[TTAHUB-174]/update list of topics plus admin diagnostics table

.circleci/config.yml

@@ -164,7 +164,7 @@ parameters:
     default: "main"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "revert-351-revert-349-TTAHUB-182/Add-Three-New-Topics"
+    default: "TTAHUB-174/update-list-of-topics"
     type: string
   prod_new_relic_app_id:
     default: "877570491"

frontend/package.json

@@ -20,7 +20,9 @@
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.33",
     "prop-types": "^15.7.2",
+    "query-string": "^7.0.0",
     "react": "^17.0.1",
+    "react-admin": "^3.15.0",
     "react-app-polyfill": "^2.0.0",
     "react-dates": "^21.8.0",
     "react-dom": "^17.0.1",
@@ -137,7 +139,7 @@
     "eslint-plugin-react-hooks": "^4.0.8",
     "eslint-plugin-testing-library": "^3.10.1",
     "fetch-mock": "^9.10.7",
-    "history": "^5.0.0",
+    "history": "4.10.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-junit": "^12.0.0",
     "mutationobserver-shim": "^0.3.7",

frontend/src/pages/ActivityReport/Pages/__tests__/topicsResources.js

@@ -67,19 +67,19 @@ describe('Topics & resources', () => {
       const topicSelect = screen.getByText(/select is focused ,type to refine list, press down to open the menu, press left to focus selected values/i);
       fireEvent.focus(topicSelect);
       fireEvent.keyDown(topicSelect, { key: 'ArrowDown', code: 40 });
-      expect(await screen.findByText('Behavioral / Mental Health')).toBeVisible();
+      expect(await screen.findByText('Behavioral / Mental Health / Trauma')).toBeVisible();
       expect(await screen.findByText('Child Assessment, Development, Screening')).toBeVisible();
-      expect(await screen.findByText('CLASS: Classroom Management')).toBeVisible();
+      expect(await screen.findByText('CLASS: Classroom Organization')).toBeVisible();
       expect(await screen.findByText('CLASS: Emotional Support')).toBeVisible();
       expect(await screen.findByText('CLASS: Instructional Support')).toBeVisible();
       expect(await screen.findByText('Coaching')).toBeVisible();
       expect(await screen.findByText('Communication')).toBeVisible();
       expect(await screen.findByText('Community and Self-Assessment')).toBeVisible();
       expect(await screen.findByText('Culture & Language')).toBeVisible();
-      expect(await screen.findByText('Curriculum (Early Childhood or Parenting)')).toBeVisible();
+      expect(await screen.findByText('Curriculum (Instructional or Parenting)')).toBeVisible();
       expect(await screen.findByText('Data and Evaluation')).toBeVisible();
       expect(await screen.findByText('ERSEA')).toBeVisible();
-      expect(await screen.findByText('Environmental Health and Safety')).toBeVisible();
+      expect(await screen.findByText('Environmental Health and Safety / EPRR')).toBeVisible();
       expect(await screen.findByText('Equity')).toBeVisible();
       expect(await screen.findByText('Facilities')).toBeVisible();
       expect(await screen.findByText('Family Support Services')).toBeVisible();
@@ -96,7 +96,7 @@ describe('Topics & resources', () => {
       expect(await screen.findByText('Physical Health and Screenings')).toBeVisible();
       expect(await screen.findByText('Pregnancy Services / Expectant Families')).toBeVisible();
       expect(await screen.findByText('Program Planning and Services')).toBeVisible();
-      expect(await screen.findByText('QIP')).toBeVisible();
+      expect(await screen.findByText('Quality Improvement Plan / QIP')).toBeVisible();
       expect(await screen.findByText('Recordkeeping and Reporting')).toBeVisible();
       expect(await screen.findByText('Safety Practices')).toBeVisible();
       expect(await screen.findByText('Staff Wellness')).toBeVisible();

frontend/src/pages/ActivityReport/constants.js

@@ -61,19 +61,19 @@ export const programTypes = [
 ];
 
 export const topics = [
-  'Behavioral / Mental Health',
+  'Behavioral / Mental Health / Trauma',
   'Child Assessment, Development, Screening',
-  'CLASS: Classroom Management',
+  'CLASS: Classroom Organization',
   'CLASS: Emotional Support',
   'CLASS: Instructional Support',
   'Coaching',
   'Communication',
   'Community and Self-Assessment',
   'Culture & Language',
-  'Curriculum (Early Childhood or Parenting)',
+  'Curriculum (Instructional or Parenting)',
   'Data and Evaluation',
   'ERSEA',
-  'Environmental Health and Safety',
+  'Environmental Health and Safety / EPRR',
   'Equity',
   'Facilities',
   'Family Support Services',
@@ -90,7 +90,7 @@ export const topics = [
   'Physical Health and Screenings',
   'Pregnancy Services / Expectant Families',
   'Program Planning and Services',
-  'QIP',
+  'Quality Improvement Plan / QIP',
   'Recordkeeping and Reporting',
   'Safety Practices',
   'Staff Wellness',

frontend/src/pages/Admin/__tests__/diag.js

@@ -0,0 +1,43 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import {
+  render, screen,
+} from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import { Router } from 'react-router';
+import { createMemoryHistory } from 'history';
+
+import Diag from '../diag';
+
+const defaultBaseUrl = '/api/admin/requestErrors?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22ASC%22%5D';
+
+describe('Diag', () => {
+  const history = createMemoryHistory();
+  afterEach(() => fetchMock.restore());
+
+  beforeEach(() => {
+    fetchMock.get(defaultBaseUrl, [{
+      id: '4',
+      operation: 'OPERATION',
+      uri: 'http://smarthub',
+      method: 'POST',
+      requestBody: { foo: 'bar' },
+      responseBody: { error: { foo: 'encountered problems' } },
+      responseCode: '400',
+      createdAt: '2021-07-01T14:37:04.730Z',
+      updatedAt: '2021-07-01T14:37:04.730Z',
+    }]);
+  });
+
+  const RenderDiag = () => (
+    <Router history={history}>
+      <Diag />
+    </Router>
+  );
+
+  it('renders the main view', async () => {
+    render(<RenderDiag />);
+    const requestErrorsView = await screen.findAllByText('Requesterrors');
+    expect(requestErrorsView.length).toBe(3);
+  });
+});

frontend/src/pages/Admin/dataProvider.js

@@ -0,0 +1,42 @@
+import { fetchUtils } from 'react-admin';
+import { stringify } from 'query-string';
+import join from 'url-join';
+
+const apiUrl = join('/', 'api', 'admin');
+const httpClient = fetchUtils.fetchJson;
+
+export default {
+  getList: async (resource, params) => {
+    const { page, perPage } = params.pagination;
+    const { field, order } = params.sort;
+    const query = {
+      sort: JSON.stringify([field, order]),
+      range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
+      filter: JSON.stringify(params.filter),
+    };
+    const url = `${apiUrl}/${resource}?${stringify(query)}`;
+
+    const { headers, json } = await httpClient(url);
+    const total = headers.get('content-range') ? parseInt(headers.get('content-range').split('/').pop(), 10) : 0;
+
+    return ({
+      data: json,
+      total,
+    });
+  },
+
+  getOne: (resource, params) => httpClient(`${apiUrl}/${resource}/${params.id}`).then(({ json }) => ({
+    data: json,
+  })),
+
+  deleteMany: async (resource, params) => {
+    const query = {
+      filter: JSON.stringify({ id: params.ids }),
+    };
+    const { json } = await httpClient(`${apiUrl}/${resource}?${stringify(query)}`, {
+      method: 'DELETE',
+      body: JSON.stringify(params.data),
+    });
+    return ({ data: json });
+  },
+};

frontend/src/pages/Admin/diag.css

@@ -0,0 +1,4 @@
+.smart-hub--overflow-auto {
+    overflow: auto;
+    max-height: 970px;
+  }

frontend/src/pages/Admin/diag.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+  Admin, Resource,
+} from 'react-admin';
+import dp from './dataProvider';
+import RequestErrors, { RequestErrorShow } from './requestErrors';
+import Container from '../../components/Container';
+import './diag.css';
+
+function Diag() {
+  return (
+    <>
+      <Container padding={0} className="smart-hub--overflow-auto">
+        <Admin dataProvider={dp}>
+          <Resource name="requestErrors" list={RequestErrors} edit={RequestErrorShow} />
+        </Admin>
+      </Container>
+    </>
+  );
+}
+export default Diag;

frontend/src/pages/Admin/index.js

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 
 import User from './users';
 import Cdi from './cdi';
+import Diag from './diag';
 
 function Admin() {
   return (
@@ -16,6 +17,9 @@ function Admin() {
         <Link className="usa-button" to="/admin/users">
           Users
         </Link>
+        <Link className="usa-button" to="/admin/diag">
+          Diag
+        </Link>
       </div>
       <Switch>
         <Route
@@ -26,6 +30,10 @@ function Admin() {
           path="/admin/users/:userId?"
           render={({ match }) => <User match={match} />}
         />
+        <Route
+          path="/admin/diag/"
+          render={({ match }) => <Diag match={match} />}
+        />
       </Switch>
     </>
   );

frontend/src/pages/Admin/requestErrors.js

@@ -0,0 +1,51 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+import {
+  List,
+  Datagrid,
+  TextField,
+  DateField,
+  Show,
+  SimpleShowLayout,
+  TopToolbar,
+  ListButton,
+} from 'react-admin';
+
+// eslint-disable-next-line react/prop-types
+const RequestErrorShowActions = ({ basePath }) => (
+  <TopToolbar>
+    <ListButton basePath={basePath} />
+  </TopToolbar>
+);
+
+const RequestErrorList = (props) => (
+  <List {...props} className="smart-hub--overflow-auto">
+    <Datagrid rowClick="edit">
+      <TextField source="id" />
+      <TextField source="operation" />
+      <TextField source="uri" />
+      <TextField source="method" />
+      <TextField source="responseCode" />
+      <DateField source="createdAt" />
+      <DateField source="updatedAt" />
+    </Datagrid>
+  </List>
+);
+
+export const RequestErrorShow = (props) => (
+  <Show actions={<RequestErrorShowActions />} {...props}>
+    <SimpleShowLayout>
+      <TextField source="id" />
+      <TextField source="operation" />
+      <TextField source="uri" />
+      <TextField source="method" />
+      <TextField source="requestBody" />
+      <TextField source="responseBody" />
+      <TextField source="responseCode" />
+      <DateField source="createdAt" />
+      <DateField source="updatedAt" />
+    </SimpleShowLayout>
+  </Show>
+);
+
+export default RequestErrorList;