Merge pull request #622 from adhocteam/main

add filters and target populations table to grantee record page

frontend/package.json

@@ -157,7 +157,9 @@
       "<rootDir>/src/pages/NotFound/index.js",
       "<rootDir>/src/polyfills.js",
       "<rootDir>/src/pages/Widgets/index.js",
-      "<rootDir>/src/widgets/Example.js"
+      "<rootDir>/src/widgets/Example.js",
+      "<rootDir>/src/pages/RegionalDashboard/formatDateRange.js",
+      "<rootDir>/src/pages/RegionalDashboard/constants.js"
     ],
     "coverageThreshold": {
       "global": {

frontend/src/components/ActivityReportsTable/__tests__/ColumnHeader.js

@@ -0,0 +1,58 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import {
+  render, screen, act,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ColumnHeader from '../ColumnHeader';
+
+describe('ActivityReportsTable ColumnHeader', () => {
+  const renderColumnHeader = (onUpdateSort = jest.fn(), sortDirection = 'asc') => {
+    const name = 'fanciest shoes';
+    render(
+      <div>
+        <table>
+          <thead>
+            <tr>
+              <ColumnHeader
+                onUpdateSort={onUpdateSort}
+                displayName={name}
+                name="shoes"
+                sortBy="shoes"
+                sortDirection={sortDirection}
+              />
+            </tr>
+          </thead>
+        </table>
+      </div>,
+    );
+  };
+
+  it('renders and calls on update sort', async () => {
+    const onUpdateSort = jest.fn();
+    renderColumnHeader(onUpdateSort);
+
+    const shoes = await screen.findByText('fanciest shoes');
+
+    await act(async () => userEvent.click(shoes));
+    expect(onUpdateSort).toHaveBeenCalledWith('shoes');
+  });
+
+  it('sorts on keypress', async () => {
+    const onUpdateSort = jest.fn();
+    renderColumnHeader(onUpdateSort, 'desc');
+
+    const shoes = await screen.findByText('fanciest shoes');
+
+    await act(async () => userEvent.type(shoes, '{enter}'));
+    expect(onUpdateSort).toHaveBeenCalledTimes(2);
+  });
+
+  it('displays an unsortable column', async () => {
+    const onUpdateSort = jest.fn();
+    renderColumnHeader(onUpdateSort, '');
+
+    const shoes = await screen.findByRole('columnheader', { name: /fanciest shoes/i });
+    expect(shoes).toHaveAttribute('aria-sort', 'none');
+  });
+});

frontend/src/components/ActivityReportsTable/__tests__/ReportRow.js

@@ -0,0 +1,55 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import {
+  render, screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Router } from 'react-router';
+import { createMemoryHistory } from 'history';
+import ReportRow from '../ReportRow';
+import { generateXFakeReports } from '../mocks';
+
+const history = createMemoryHistory();
+
+const [report] = generateXFakeReports(1);
+
+describe('ReportRow', () => {
+  const renderReportRow = () => (
+    render(
+      <Router history={history}>
+        <ReportRow
+          report={report}
+          openMenuUp={false}
+          handleReportSelect={jest.fn()}
+          isChecked={false}
+        />
+      </Router>,
+    )
+  );
+
+  beforeAll(async () => {
+    global.navigator.clipboard = jest.fn();
+    global.navigator.clipboard.writeText = jest.fn(() => Promise.resolve());
+  });
+
+  afterAll(() => {
+    delete global.navigator;
+  });
+
+  it('the view link works', async () => {
+    history.push = jest.fn();
+    renderReportRow();
+    userEvent.click(await screen.findByRole('button', { name: 'Actions for activity report R14-AR-1' }));
+    userEvent.click(await screen.findByRole('button', { name: /view/i }));
+
+    expect(history.push).toHaveBeenCalled();
+  });
+
+  it('you can copy', async () => {
+    renderReportRow();
+    userEvent.click(await screen.findByRole('button', { name: 'Actions for activity report R14-AR-1' }));
+    userEvent.click(await screen.findByRole('button', { name: /copy url/i }));
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalled();
+  });
+});

frontend/src/components/ActivityReportsTable/__tests__/index.js

@@ -64,7 +64,7 @@ describe('Table menus & selections', () => {
       fetchMock.reset();
       fetchMock.get(
         defaultBaseUrlWithRegionOne,
-        { count: 10, rows: generateXFakeReports(10) },
+        { count: 10, rows: generateXFakeReports(10, ['approved']) },
       );
       const user = {
         name: '[email protected]',

frontend/src/components/ActivityReportsTable/index.js

@@ -335,8 +335,12 @@ ActivityReportsTable.propTypes = {
     }),
   ).isRequired,
   showFilter: PropTypes.bool.isRequired,
-  onUpdateFilters: PropTypes.func.isRequired,
+  onUpdateFilters: PropTypes.func,
   tableCaption: PropTypes.string.isRequired,
 };
 
+ActivityReportsTable.defaultProps = {
+  onUpdateFilters: () => {},
+};
+
 export default ActivityReportsTable;

frontend/src/components/ActivityReportsTable/mocks.js

@@ -226,7 +226,7 @@ export const activityReportsSorted = [
   },
 ];
 
-export const generateXFakeReports = (count) => {
+export const generateXFakeReports = (count, status = []) => {
   const result = [];
   for (let i = 1; i <= count; i += 1) {
     result.push(
@@ -237,7 +237,7 @@ export const generateXFakeReports = (count) => {
         displayId: 'R14-AR-1',
         regionId: 14,
         topics: ['Behavioral / Mental Health', 'CLASS: Instructional Support'],
-        calculatedStatus: 'draft',
+        calculatedStatus: status[i] || 'draft',
         activityRecipients: [
           {
             activityRecipientId: 5,

frontend/src/components/AppWrapper.js

@@ -50,5 +50,5 @@ AppWrapper.propTypes = {
 AppWrapper.defaultProps = {
   authenticated: false,
   padded: true,
-  logout: () => null,
+  logout: () => {},
 };

frontend/src/components/ButtonSelect.css

@@ -1,20 +1,3 @@
-.smart-hub--button-select-toggle-btn {
-    justify-content: space-between;
-    min-width: 140px;
-}
-
-.smart-hub--button-select-menu {
-    background-color: hsl(0, 0%, 100%);
-    border-radius: 4px;
-    box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1),0 4px 11px hsla(0, 0%, 0%, 0.1);
-    margin-bottom: 8px;
-    margin-top: 8px;
-    position: absolute;
-    min-width: 200px;
-    z-index: 2;
-    box-sizing: border-box;
-}
-
 .smart-hub--button-select-menu-label:not(.sr-only) {
     display: block;
     margin-top: 1em;
@@ -76,7 +59,6 @@
 * The styles for the "style as select" prop
 */
 .smart-hub--button-select-toggle-btn.usa-select {
-    border-radius: 5px;
     border: 1px solid black;
     box-shadow: none;
     color: black;