WEB-4454 - Dashboard

__tests__/unit/app/pages/clinicworkspace/DeviceIssues/DeviceIssues.test.js

@@ -0,0 +1,169 @@
+/* global jest, expect, describe, it, beforeAll, beforeEach, afterAll, afterEach */
+
+import React from 'react';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
+import { combineReducers } from 'redux';
+import { http, HttpResponse, delay } from 'msw';
+import { setupServer } from 'msw/node';
+
+import { setupStore } from '@tests/utils/setupStore';
+import deviceIssuesReducer from '@app/pages/clinicworkspace/DeviceIssues/deviceIssuesSlice';
+import DeviceIssues from '@app/pages/clinicworkspace/DeviceIssues/DeviceIssues';
+
+const CLINIC_ID = 'clinic123';
+const API_URL = `http://app.tidepool.test/v1/clinics/${CLINIC_ID}/patients`;
+
+const clinicPatientTags = [
+  { id: 'tag1', name: 'Diabetes' },
+  { id: 'tag2', name: 'Hypertension' },
+];
+
+const mockPatients = {
+  data: [
+    { fullName: 'Jane Doe', birthDate: '1990-01-15', mrn: 'MRN001', tags: ['tag1', 'tag2'] },
+    { fullName: 'John Smith', birthDate: '1985-06-20', mrn: 'MRN002', tags: ['tag1'] },
+  ],
+  meta: { count: 30 },
+};
+
+const blipReducer = combineReducers({
+  selectedClinicId: (state = CLINIC_ID) => state,
+  clinics: (state = { [CLINIC_ID]: { patientTags: clinicPatientTags } }) => state,
+  deviceIssues: deviceIssuesReducer,
+});
+
+const server = setupServer();
+
+describe('DeviceIssues', () => {
+  let store;
+  let capturedRequests;
+
+  beforeAll(() => server.listen());
+
+  beforeEach(() => {
+    capturedRequests = [];
+    store = setupStore({}, { blip: blipReducer });
+
+    server.use(
+      http.get(API_URL, async ({ request }) => {
+        const url = new URL(request.url);
+        capturedRequests.push(Object.fromEntries(url.searchParams));
+        await delay(50);
+        return HttpResponse.json(mockPatients);
+      })
+    );
+  });
+
+  afterEach(() => {
+    server.resetHandlers();
+  });
+
+  afterAll(() => server.close());
+
+  const renderComponent = () =>
+    render(
+      <Provider store={store}>
+        <DeviceIssues />
+      </Provider>
+    );
+
+  it('makes the correct HTTP call with default args on mount', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+    });
+
+    expect(capturedRequests).toHaveLength(1);
+    expect(capturedRequests[0]).toEqual({
+      offset: '0',
+      category: 'DEFAULT',
+      limit: '12',
+    });
+  });
+
+  it('changes the HTTP call category arg when clicking a different category', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+    });
+
+    await userEvent.click(screen.getByText('Stale Data'));
+
+    await waitFor(() => {
+      expect(capturedRequests.length).toBeGreaterThanOrEqual(2);
+    });
+
+    const lastRequest = capturedRequests[capturedRequests.length - 1];
+    expect(lastRequest.category).toBe('STALE_DATA');
+    expect(lastRequest.offset).toBe('0');
+  });
+
+  it('changes the HTTP call offset arg when clicking a pagination button', async () => {
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+    });
+
+    // meta.count=30 with limit=12 gives 3 pages; click page 2
+    await userEvent.click(screen.getByText('2'));
+
+    await waitFor(() => {
+      expect(capturedRequests.length).toBeGreaterThanOrEqual(2);
+    });
+
+    const lastRequest = capturedRequests[capturedRequests.length - 1];
+    expect(lastRequest.offset).toBe('12');
+    expect(lastRequest.limit).toBe('12');
+  });
+
+  describe('table cells', () => {
+    it('displays patient detail demographics', async () => {
+      renderComponent();
+
+      await waitFor(() => {
+        expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+      });
+
+      const cell0 = within(screen.getByTestId('deviceIssuesPatientsTable-row-0-fullName'));
+
+      // Patient 1 - first row
+      expect(cell0.getByText('Jane Doe')).toBeInTheDocument();
+      expect(cell0.getByText(/DOB:/)).toBeInTheDocument();
+      expect(cell0.getByText(/1990-01-15/)).toBeInTheDocument();
+      expect(cell0.getByText(/MRN001/)).toBeInTheDocument();
+
+      const cell1 = within(screen.getByTestId('deviceIssuesPatientsTable-row-1-fullName'));
+
+      // Patient 2 - second row
+      expect(cell1.getByText('John Smith')).toBeInTheDocument();
+      expect(cell1.getByText(/DOB:/)).toBeInTheDocument();
+      expect(cell1.getByText(/1985-06-20/)).toBeInTheDocument();
+      expect(cell1.getByText(/MRN002/)).toBeInTheDocument();
+    });
+
+    it('displays the per-patient tag list', async () => {
+      renderComponent();
+
+      await waitFor(() => {
+        expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+      });
+
+      const cell0 = within(screen.getByTestId('deviceIssuesPatientsTable-row-0-tags'));
+
+      // Patient 1 has both tags
+      expect(cell0.getByText('Diabetes')).toBeInTheDocument();
+      expect(cell0.getByText('Hypertension')).toBeInTheDocument();
+
+      const cell1 = within(screen.getByTestId('deviceIssuesPatientsTable-row-1-tags'));
+
+      // Patient 2 has only Diabetes
+      expect(cell1.getByText('Diabetes')).toBeInTheDocument();
+      expect(cell1.queryByText('Hypertension')).not.toBeInTheDocument();
+    });
+  });
+});

__tests__/utils/setupStore.js

@@ -1,10 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { RTKQueryApi } from '@app/redux/api/baseApi';
 
-export const setupStore = (preloadedState = {}) => {
+export const setupStore = (preloadedState = {}, additionalReducers = {}) => {
   return configureStore({
     reducer: {
       [RTKQueryApi.reducerPath]: RTKQueryApi.reducer,
+      ...additionalReducers,
     },
     middleware: (getDefaultMiddleware) => ([
       ...getDefaultMiddleware(),

app/components/elements/Table.js

@@ -227,13 +227,15 @@ export const Table = React.memo(props => {
             <TableRow
               id={`${id}-row-${rowIndex}`}
               key={`${id}-row-${rowIndex}`}
+              data-testid={`${id}-row-${rowIndex}`}
               hover={rowHover}
               onClick={e => handleRowClick(e, d)}
             >
               {map(columns, (col, index) => (
                 <TableCell
                   id={`${id}-row-${rowIndex}-${col.field}`}
                   key={`${id}-row-${rowIndex}-${col.field}`}
+                  data-testid={`${id}-row-${rowIndex}-${col.field}`}
                   component={index === 0 ? 'th' : 'td'}
                   scope={index === 0 ? 'row' : undefined}
                   align={col.align || (index === 0 ? 'left' : 'right')}

app/core/clinicUtils.js

@@ -185,31 +185,31 @@ export const clinicTierDetails = (clinic = {}) => {
     },
     tier0201: {
       planName: 'essential',
-      entitlements: { ...entitlements, patientTags: true, clinicSites: true, summaryDashboard: true },
+      entitlements: { ...entitlements, deviceIssues: true, patientTags: true, clinicSites: true, summaryDashboard: true },
     },
     tier0202: {
       planName: 'professional',
-      entitlements: { ...entitlements, patientTags: true, clinicSites: true, summaryDashboard: true },
+      entitlements: { ...entitlements, deviceIssues: true, patientTags: true, clinicSites: true, summaryDashboard: true },
     },
     tier0300: {
       planName: 'professional',
-      entitlements: { ...entitlements, patientTags: true, clinicSites: true, summaryDashboard: true },
+      entitlements: { ...entitlements, deviceIssues: true, patientTags: true, clinicSites: true, summaryDashboard: true },
     },
     tier0301: {
       planName: 'professional',
-      entitlements: { ...entitlements, rpmReport: true, patientTags: true, clinicSites: true, summaryDashboard: true, tideDashboard: true },
+      entitlements: { ...entitlements, rpmReport: true, deviceIssues: true, patientTags: true, clinicSites: true, summaryDashboard: true, tideDashboard: true },
     },
     tier0302: {
       planName: 'professional',
-      entitlements: { ...entitlements, rpmReport: true, patientTags: true, clinicSites: true, summaryDashboard: true },
+      entitlements: { ...entitlements, rpmReport: true, deviceIssues: true, patientTags: true, clinicSites: true, summaryDashboard: true },
     },
     tier0303: {
       planName: 'professional',
-      entitlements: { ...entitlements, rpmReport: true, patientTags: true, clinicSites: true, summaryDashboard: true, tideDashboard: true },
+      entitlements: { ...entitlements, rpmReport: true, deviceIssues: true, patientTags: true, clinicSites: true, summaryDashboard: true, tideDashboard: true },
     },
     tier0400: {
       planName: 'enterprise',
-      entitlements: { ...entitlements, rpmReport: true, patientTags: true, clinicSites: true, summaryDashboard: true, tideDashboard: true },
+      entitlements: { ...entitlements, rpmReport: true, deviceIssues: true, patientTags: true, clinicSites: true, summaryDashboard: true, tideDashboard: true },
     },
   };
 

app/pages/clinicworkspace/ClinicPatients.js

@@ -67,7 +67,7 @@ import Button from '../../components/elements/Button';
 import Icon from '../../components/elements/Icon';
 import Table from '../../components/elements/Table';
 import { TagList } from '../../components/elements/Tag';
-import Pagination from '../../components/elements/Pagination';
+import PaginationControls from './components/PaginationControls';
 import TextInput from '../../components/elements/TextInput';
 import BgSummaryCell from '../../components/clinic/BgSummaryCell';
 import PatientForm from '../../components/clinic/PatientForm';
@@ -1563,11 +1563,8 @@ export const ClinicPatients = (props) => {
     debounceSearch('');
   }
 
-  const handlePageChange = useCallback((event, page) => {
-    setPatientFetchOptions({
-      ...patientFetchOptions,
-      offset: (page - 1) * patientFetchOptions.limit,
-    });
+  const handleOffsetChange = useCallback(offset => {
+    setPatientFetchOptions({ ...patientFetchOptions, offset: offset });
   }, [patientFetchOptions]);
 
   function handleResetFilters() {
@@ -4223,7 +4220,6 @@ export const ClinicPatients = (props) => {
 
   const renderPeopleTable = useCallback(() => {
     const pageCount = Math.ceil(clinic?.fetchedPatientCount / patientFetchOptions.limit);
-    const page = Math.ceil(patientFetchOptions.offset / patientFetchOptions.limit) + 1;
     const sort = patientFetchOptions.sort || defaultPatientFetchOptions.sort;
 
     const patientListQueryState = getPatientListQueryState(activeFilters, patientListSearchTextInput);
@@ -4271,17 +4267,14 @@ export const ClinicPatients = (props) => {
         />
 
         {pageCount > 1 && (
-          <Pagination
-            px="5%"
-            sx={{ width: '100%', position: 'absolute', bottom: '-50px' }}
-            id="clinic-patients-pagination"
-            count={pageCount}
-            disabled={pageCount < 2}
-            onChange={handlePageChange}
-            page={page}
-            showFirstButton={false}
-            showLastButton={false}
-          />
+          <Box sx={{ width: '100%', position: 'absolute', bottom: '-50px' }}>
+            <PaginationControls
+              total={clinic?.fetchedPatientCount}
+              limit={patientFetchOptions.limit}
+              offset={patientFetchOptions.offset}
+              onOffsetChange={handleOffsetChange}
+            />
+          </Box>
         )}
       </Box>
     );
@@ -4290,7 +4283,7 @@ export const ClinicPatients = (props) => {
     columns,
     data,
     defaultPatientFetchOptions.sort,
-    handlePageChange,
+    handleOffsetChange,
     handleSortChange,
     loading,
     patientFetchOptions,

app/pages/clinicworkspace/DeviceIssues/DeviceIssues.js

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation, Trans } from 'react-i18next';
+import { colors as vizColors } from '@tidepool/viz';
+import Table from '../../../components/elements/Table';
+import { Box, Flex, Grid, Text } from 'theme-ui';
+
+import FilterByCategory from './FilterByCategory';
+import PaginationControls from '../components/PaginationControls';
+
+import { setOffset, resetDeviceIssuesState } from './deviceIssuesSlice';
+import { useGetDeviceIssuesPatientsQuery } from './deviceIssuesApi';
+import useTableColumns from './useTableColumns';
+import PatientCount from '../components/PatientCount';
+
+const LIMIT = 12;
+
+const DeviceIssues = () => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const selectedClinicId = useSelector(state => state.blip.selectedClinicId);
+  const category = useSelector(state => state.blip.deviceIssues.category);
+  const offset = useSelector(state => state.blip.deviceIssues.offset);
+
+  const columns = useTableColumns();
+
+  const { data } = useGetDeviceIssuesPatientsQuery(
+    { clinicId: selectedClinicId, offset, category, limit: LIMIT },
+    { skip: !selectedClinicId }
+  );
+
+  // reset state on dismount
+  useEffect(() => {
+    return () => dispatch(resetDeviceIssuesState());
+  }, []);
+
+  const handleChangeOffset = (newOffset) => dispatch(setOffset(newOffset));
+
+  if (!data) return null;
+
+  const tableData = data?.data || [];
+
+  const total = data?.meta?.count || 0;
+
+  return (
+    <>
+      <Flex mb={2}>
+        <Trans>
+          <Text sx={{ fontSize: 0, color: vizColors.blueGray50, fontStyle: 'italic' }}>
+            Only patients with active device issues or delayed data from a <Text sx={{ fontWeight: 'bold' }}>cloud-connected device</Text> will be displayed.
+          </Text>
+        </Trans>
+      </Flex>
+
+      <Flex mb={3} sx={{ justifyContent: 'center' }}>
+        <FilterByCategory />
+      </Flex>
+
+      <Table
+        id="deviceIssuesPatientsTable"
+        variant="condensed"
+        label="deviceIssuesPatientsTable"
+        columns={columns}
+        data={tableData}
+        // sx={tableStyle}
+        // onSort={handleSortChange}
+        // order={sort?.substring(0, 1) === '+' ? 'asc' : 'desc'}
+        // orderBy={sort?.substring(1)}
+        // onClickRow={handleClickPatient}
+        // emptyContentNode={}
+      />
+
+      <Grid sx={{ gridTemplateColumns: '1fr 2fr 1fr' }}>
+        <Flex sx={{ alignItems: 'flex-end', padding: '0 0 24px 12px' }}>
+          <PatientCount offset={offset} limit={LIMIT} total={total} />
+        </Flex>
+        <Flex pb={4} sx={{ maxWidth: '640px', justifyContent: 'center', margin: '0 auto' }}>
+          <PaginationControls
+            limit={LIMIT}
+            total={total}
+            offset={offset}
+            onOffsetChange={handleChangeOffset}
+          />
+        </Flex>
+        <Box></Box>
+      </Grid>
+    </>
+  );
+};
+
+export default DeviceIssues;