@mherman22/esm-act-app 1.0.1-pre.22

package/src/flag-gaps/flag-gaps.workspace.tsx

@@ -0,0 +1,149 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTableSkeleton,
+  InlineNotification,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { formatDate, showSnackbar, Workspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import { fetchForm, type FlagGap, type FlagGaps, usePatientFlagGaps } from './flag-gaps.resource';
+import styles from './flag-gaps.scss';
+
+/** What a patient flags app that passes the clicked flag launches a flag action's workspace with. */
+export interface FlagActionWorkspaceProps {
+  patientUuid: string;
+  patientFlagUuid: string;
+  flagUuid: string;
+  flagName: string;
+}
+
+/** The patient chart's workspace group props, which carry the patient when the flag is not passed. */
+interface PatientChartGroupProps {
+  patientUuid?: string;
+}
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+export function daysPending(encounterDatetime: string, now = new Date()) {
+  return Math.floor((now.getTime() - new Date(encounterDatetime).getTime()) / DAY_MS);
+}
+
+const FlagGapsWorkspace: React.FC<
+  Workspace2DefinitionProps<Partial<FlagActionWorkspaceProps>, object, PatientChartGroupProps>
+> = ({ workspaceProps, groupProps, launchChildWorkspace }) => {
+  const { t } = useTranslation();
+  const patientUuid = workspaceProps?.patientUuid ?? groupProps?.patientUuid;
+  const clickedFlag = workspaceProps?.flagUuid
+    ? { uuid: workspaceProps.flagUuid, name: workspaceProps.flagName }
+    : undefined;
+  const { flagGaps, isLoading, error } = usePatientFlagGaps(patientUuid, clickedFlag);
+  const listed = flagGaps.filter((flag) => flag.configured);
+
+  const openGap = useCallback(
+    async (gap: FlagGap) => {
+      try {
+        const form = await fetchForm(gap.form.uuid);
+        await launchChildWorkspace('patient-form-entry-workspace', { form, encounterUuid: gap.encounter });
+      } catch (e) {
+        showSnackbar({
+          kind: 'error',
+          title: t('couldNotOpenForm', 'Could not open the form'),
+          subtitle: e?.message,
+        });
+      }
+    },
+    [launchChildWorkspace, t],
+  );
+
+  const renderContent = () => {
+    if (isLoading) {
+      return <DataTableSkeleton role="progressbar" compact zebra={false} showHeader={false} showToolbar={false} />;
+    }
+    if (error) {
+      return (
+        <InlineNotification
+          kind="error"
+          lowContrast
+          hideCloseButton
+          title={t('couldNotLoadGaps', 'Could not load the missing data')}
+          subtitle={error.message}
+        />
+      );
+    }
+    if (listed.length === 0) {
+      return (
+        <p className={styles.message}>
+          {clickedFlag
+            ? t('noGapList', 'This flag does not list its missing data.')
+            : t('noGapLists', "None of this patient's flags lists its missing data.")}
+        </p>
+      );
+    }
+    return listed.map((flag) => (
+      <section key={flag.flagUuid} className={styles.flag}>
+        {clickedFlag ? null : <h4 className={styles.flagName}>{flag.flagName}</h4>}
+        {renderGaps(flag)}
+      </section>
+    ));
+  };
+
+  const renderGaps = ({ gaps }: FlagGaps) => {
+    if (gaps.length === 0) {
+      // The flag is raised but the data has no saved form to go on yet, so it needs a new one.
+      return (
+        <>
+          <p className={styles.message}>
+            {t('noSavedForm', 'No saved form is waiting to be completed. Record the missing data on a new form.')}
+          </p>
+          <Button kind="ghost" size="sm" onClick={() => launchChildWorkspace('clinical-forms-workspace')}>
+            {t('openClinicalForms', 'Open clinical forms')}
+          </Button>
+        </>
+      );
+    }
+    return (
+      <Table size="md" useZebraStyles={false}>
+        <TableHead>
+          <TableRow>
+            <TableHeader>{t('form', 'Form')}</TableHeader>
+            <TableHeader>{t('date', 'Date')}</TableHeader>
+            <TableHeader>{t('missing', 'Missing')}</TableHeader>
+            <TableHeader>{t('daysPending', 'Days pending')}</TableHeader>
+            <TableHeader aria-label={t('actions', 'Actions')} />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {gaps.map((gap) => (
+            <TableRow key={`${gap.encounter}-${gap.concept.uuid}`}>
+              <TableCell>{gap.form?.display ?? '--'}</TableCell>
+              <TableCell>{formatDate(new Date(gap.encounterDatetime), { mode: 'standard', time: false })}</TableCell>
+              <TableCell>{gap.concept.display}</TableCell>
+              <TableCell>{daysPending(gap.encounterDatetime)}</TableCell>
+              <TableCell>
+                {gap.form ? (
+                  <Button kind="ghost" size="sm" onClick={() => openGap(gap)}>
+                    {t('openForm', 'Open form')}
+                  </Button>
+                ) : null}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  };
+
+  return (
+    <Workspace2 title={clickedFlag?.name ?? t('missingData', 'Missing data')}>
+      <div className={styles.container}>{renderContent()}</div>
+    </Workspace2>
+  );
+};
+
+export default FlagGapsWorkspace;

package/src/index.ts

@@ -0,0 +1,33 @@
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import actHomeDashboardLinkComponent from './act-home/act-home-dashboard-link.component';
+import registryDashboardLinkComponent from './registry/registry-dashboard-link.component';
+
+const moduleName = '@mherman22/esm-act-app';
+
+const options = {
+  featureName: 'rhd-flag-gaps',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const flagGapsWorkspace = getAsyncLifecycle(() => import('./flag-gaps/flag-gaps.workspace'), options);
+
+export const actHomeDashboardLink = getSyncLifecycle(actHomeDashboardLinkComponent, options);
+
+export const actHomeDashboard = getAsyncLifecycle(() => import('./act-home/act-home-dashboard.component'), options);
+
+export const actHomeQuickActions = getAsyncLifecycle(() => import('./act-home/quick-actions.component'), options);
+
+export const actHomeWorklists = getAsyncLifecycle(() => import('./act-home/worklist-tiles.component'), options);
+
+export const actHomeCareCascade = getAsyncLifecycle(() => import('./act-home/care-cascade.component'), options);
+
+export const registryDashboardLink = getSyncLifecycle(registryDashboardLinkComponent, options);
+
+export const registryDashboard = getAsyncLifecycle(() => import('./registry/registry.component'), options);

package/src/registry/csv.ts

@@ -0,0 +1,16 @@
+/** A cell starting with =, +, -, @, a tab or a carriage return gets a leading ' so a spreadsheet shows it as text. */
+function csvCell(text: string) {
+  const value = /^[=+\-@\t\r]/.test(text) ? `'${text}` : text;
+  return /[",\r\n]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value;
+}
+
+/** Downloads rows as a CSV file, one line per row with the given headers first. */
+export function downloadCsv(fileName: string, headers: Array<string>, rows: Array<Array<string>>) {
+  const csv = [headers, ...rows].map((cells) => cells.map(csvCell).join(',')).join('\r\n') + '\r\n';
+  const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }));
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = fileName;
+  link.click();
+  URL.revokeObjectURL(url);
+}

package/src/registry/registry-bpg.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { signInWith } from '../access/sign-in.test-helper';
+import { useReportDataset } from '../reports/report-dataset.resource';
+import { registryRows } from './registry.fixture';
+import Registry from './registry.component';
+
+vi.mock('../reports/report-dataset.resource', () => ({ useReportDataset: vi.fn() }));
+
+const withBpg = registryRows.map((row, i) => ({
+  ...row,
+  bpg_status: ['Covered', 'Not covered', 'Due soon'][i % 3],
+  adherence: 50 + i,
+}));
+
+const bpgOn = { registry: { report: 'f1a2b3c4-d5e6-7890-abcd-ef1234567890', showBpgColumns: true } };
+
+describe('Registry BPG status and adherence', () => {
+  beforeEach(() => {
+    window.getOpenmrsSpaBase = () => '/openmrs/spa/';
+    window.history.replaceState(null, '', '/openmrs/spa/home/act-registry');
+    vi.mocked(useReportDataset).mockReturnValue({ columns: [], rows: withBpg, isLoading: false, error: undefined });
+  });
+
+  it('leaves the columns and the filter out while the setting is off', async () => {
+    await signInWith(['View Patient Flags']);
+
+    render(<Registry />);
+
+    const headers = screen.getAllByRole('columnheader').map((header) => header.textContent);
+    expect(headers).not.toContain('BPG status');
+    expect(headers).not.toContain('Adherence');
+    expect(screen.queryByLabelText('BPG status')).not.toBeInTheDocument();
+  });
+
+  it('ignores a BPG status in the URL while the setting is off', async () => {
+    window.history.replaceState(null, '', '/openmrs/spa/home/act-registry?bpg=Due+soon');
+    await signInWith(['View Patient Flags']);
+
+    render(<Registry />);
+
+    expect(screen.getAllByRole('row')).toHaveLength(1 + 25);
+  });
+
+  it('leaves the adherence empty for a patient who has none', async () => {
+    await signInWith(['View Patient Flags'], bpgOn);
+    vi.mocked(useReportDataset).mockReturnValue({
+      columns: [],
+      rows: [{ ...withBpg[0], adherence: null }],
+      isLoading: false,
+      error: undefined,
+    });
+
+    render(<Registry />);
+
+    const headers = screen.getAllByRole('columnheader').map((header) => header.textContent);
+    const row = within(screen.getByRole('row', { name: /Patient 1\b/ })).getAllByRole('cell');
+    expect(row[headers.indexOf('Adherence')]).toHaveTextContent(/^$/);
+  });
+
+  it('shows each patient’s BPG status and adherence once turned on', async () => {
+    await signInWith(['View Patient Flags'], bpgOn);
+
+    render(<Registry />);
+
+    const headers = screen.getAllByRole('columnheader').map((header) => header.textContent);
+    const row = within(screen.getByRole('row', { name: /Patient 2\b/ })).getAllByRole('cell');
+    expect(row[headers.indexOf('BPG status')]).toHaveTextContent('Not covered');
+    expect(row[headers.indexOf('Adherence')]).toHaveTextContent('51%');
+  });
+
+  it('narrows the rows by BPG status', async () => {
+    await signInWith(['View Patient Flags'], bpgOn);
+
+    render(<Registry />);
+
+    await userEvent.selectOptions(screen.getByLabelText('BPG status'), 'Due soon');
+    const rows = screen.getAllByRole('row').slice(1);
+    expect(rows).toHaveLength(10);
+    expect(rows.every((r) => within(r).queryByText('Due soon'))).toBe(true);
+  });
+});

package/src/registry/registry-csv.test.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { signInWith } from '../access/sign-in.test-helper';
+import { useReportDataset } from '../reports/report-dataset.resource';
+import { registryRows } from './registry.fixture';
+import Registry from './registry.component';
+
+vi.mock('../reports/report-dataset.resource', () => ({ useReportDataset: vi.fn() }));
+
+async function downloadedCsv() {
+  const createObjectURL = vi.fn((blob: Blob) => 'blob:registry');
+  window.URL.createObjectURL = createObjectURL as never;
+  window.URL.revokeObjectURL = vi.fn();
+  await userEvent.click(screen.getByRole('button', { name: /download csv/i }));
+  return (createObjectURL.mock.calls[0][0] as Blob).text();
+}
+
+describe('Registry CSV download', () => {
+  beforeEach(async () => {
+    window.getOpenmrsSpaBase = () => '/openmrs/spa/';
+    window.history.replaceState(null, '', '/openmrs/spa/home/act-registry');
+    await signInWith(['View Patient Flags']);
+    vi.mocked(useReportDataset).mockReturnValue({
+      columns: [],
+      rows: registryRows,
+      isLoading: false,
+      error: undefined,
+    });
+  });
+
+  it('downloads the filtered rows, from every page, with the visible columns as shown', async () => {
+    render(<Registry />);
+    await userEvent.selectOptions(screen.getByLabelText('Category at diagnosis'), 'RHD A');
+
+    const lines = (await downloadedCsv()).trim().split('\r\n');
+
+    expect(lines[0]).toBe('Name,ACT ID,Age,Sex,Diagnosis category,Prophylaxis regimen,Next consultation,Flags');
+    expect(lines).toHaveLength(1 + 10);
+    expect(lines[1]).toBe('Patient 1,rhd00001,10,F,RHD A,Q28 day BPG,15-Oct-2026,');
+  });
+
+  it('includes rows past the first page', async () => {
+    render(<Registry />);
+
+    const lines = (await downloadedCsv()).trim().split('\r\n');
+
+    expect(lines).toHaveLength(1 + 30);
+  });
+
+  it("writes each patient's flags as the table shows them", async () => {
+    vi.mocked(useReportDataset).mockReturnValue({
+      columns: [],
+      rows: [{ ...registryRows[0], rhd_flags: 'RHD INR target missing|RHD prophylaxis overdue' }],
+      isLoading: false,
+      error: undefined,
+    });
+    render(<Registry />);
+
+    const lines = (await downloadedCsv()).trim().split('\r\n');
+
+    expect(lines[1].endsWith(',RHD INR target missing; RHD prophylaxis overdue')).toBe(true);
+  });
+
+  it('quotes a value holding a comma or a quote', async () => {
+    vi.mocked(useReportDataset).mockReturnValue({
+      columns: [],
+      rows: [{ ...registryRows[0], full_name: 'Nambi, Esther "Essie"' }],
+      isLoading: false,
+      error: undefined,
+    });
+    render(<Registry />);
+
+    const lines = (await downloadedCsv()).trim().split('\r\n');
+
+    expect(lines[1].startsWith('"Nambi, Esther ""Essie""",')).toBe(true);
+  });
+
+  it.each([
+    ['=HYPERLINK("http://x")', `"'=HYPERLINK(""http://x"")"`],
+    ['+256 700', "'+256 700"],
+    ['-1', "'-1"],
+    ['@SUM(A1)', "'@SUM(A1)"],
+    ['\t=1+1', "'\t=1+1"],
+    ['\r=1+1', `"'\r=1+1"`],
+  ])('writes %s as text, so a spreadsheet does not run it', async (name, cell) => {
+    vi.mocked(useReportDataset).mockReturnValue({
+      columns: [],
+      rows: [{ ...registryRows[0], full_name: name }],
+      isLoading: false,
+      error: undefined,
+    });
+    render(<Registry />);
+
+    const lines = (await downloadedCsv()).trim().split('\r\n');
+
+    expect(lines[1].startsWith(`${cell},`)).toBe(true);
+  });
+});

package/src/registry/registry-dashboard-link.component.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ActDashboardLink } from '../access/act-dashboard-link.component';
+import { registryDashboardMeta } from './registry.meta';
+
+export default function RegistryDashboardLink() {
+  return <ActDashboardLink screen="registry" meta={registryDashboardMeta} />;
+}

package/src/registry/registry-dashboard-link.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import { DashboardExtension } from '@openmrs/esm-framework';
+import { signInWith } from '../access/sign-in.test-helper';
+import RegistryDashboardLink from './registry-dashboard-link.component';
+
+vi.mock('@openmrs/esm-framework', async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  DashboardExtension: vi.fn(() => null),
+}));
+
+describe('RegistryDashboardLink', () => {
+  it('links the home left nav to /home/act-registry', async () => {
+    window.spaBase = '/openmrs/spa';
+    await signInWith(['View Patient Flags']);
+
+    render(<RegistryDashboardLink />);
+
+    expect(vi.mocked(DashboardExtension).mock.calls[0][0]).toEqual(
+      expect.objectContaining({ path: 'act-registry', basePath: '/openmrs/spa/home', title: 'registry' }),
+    );
+  });
+
+  it('is hidden from a user without the registry privilege', async () => {
+    await signInWith(['Get Patients']);
+
+    render(<RegistryDashboardLink />);
+
+    expect(vi.mocked(DashboardExtension)).not.toHaveBeenCalled();
+  });
+});

package/src/registry/registry-filters.test.tsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { signInWith } from '../access/sign-in.test-helper';
+import { useReportDataset } from '../reports/report-dataset.resource';
+import { registryRows } from './registry.fixture';
+import Registry from './registry.component';
+
+vi.mock('../reports/report-dataset.resource', () => ({ useReportDataset: vi.fn() }));
+
+function shownNames() {
+  return screen
+    .getAllByRole('row')
+    .slice(1)
+    .map((row) => row.querySelector('td').textContent);
+}
+
+async function choose(label: string, option: string) {
+  await userEvent.selectOptions(screen.getByLabelText(label), option);
+}
+
+describe('Registry filters', () => {
+  beforeEach(async () => {
+    window.getOpenmrsSpaBase = () => '/openmrs/spa/';
+    window.history.replaceState(null, '', '/openmrs/spa/home/act-registry');
+    await signInWith(['View Patient Flags']);
+    vi.mocked(useReportDataset).mockReturnValue({
+      columns: [],
+      rows: registryRows,
+      isLoading: false,
+      error: undefined,
+    });
+  });
+
+  it('narrows the rows by status', async () => {
+    render(<Registry />);
+
+    await choose('Status', 'Completed');
+
+    expect(shownNames()).toEqual(['Patient 4']);
+  });
+
+  it('narrows the rows by cardiac clinic, offering the clinics the patients are assigned to', async () => {
+    render(<Registry />);
+
+    await screen.findByRole('option', { name: 'Lira RRH' });
+    expect(screen.getAllByRole('option', { name: /RRH/ }).map((option) => option.textContent)).toEqual([
+      'Gulu RRH',
+      'Lira RRH',
+    ]);
+    await choose('Cardiac clinic', 'Gulu RRH');
+
+    expect(shownNames()).toHaveLength(15);
+    expect(shownNames().every((name) => Number(name.split(' ')[1]) % 2 === 0)).toBe(true);
+  });
+
+  it('narrows the rows by primary care clinic', async () => {
+    render(<Registry />);
+
+    expect(
+      within(screen.getByLabelText('Primary care clinic'))
+        .getAllByRole('option')
+        .map((option) => option.textContent),
+    ).toEqual(['All', 'Anyeke HCIV']);
+    await choose('Primary care clinic', 'Anyeke HCIV');
+
+    expect(shownNames()).toHaveLength(15);
+  });
+
+  it('narrows the rows by category at diagnosis', async () => {
+    render(<Registry />);
+
+    await choose('Category at diagnosis', 'RHD B');
+
+    expect(shownNames()).toEqual([
+      'Patient 2',
+      'Patient 5',
+      'Patient 8',
+      'Patient 11',
+      'Patient 14',
+      'Patient 17',
+      'Patient 20',
+      'Patient 23',
+      'Patient 26',
+      'Patient 29',
+    ]);
+  });
+
+  it("keeps offering every patient's values once a filter is set, so another can be picked", async () => {
+    render(<Registry />);
+
+    await choose('Category at diagnosis', 'RHD A');
+    await choose('Status', 'Completed');
+
+    const options = (label: string) =>
+      within(screen.getByLabelText(label))
+        .getAllByRole('option')
+        .map((option) => option.textContent);
+    expect(options('Category at diagnosis')).toEqual(['All', 'RHD A', 'RHD B', 'RHD C']);
+    expect(options('Status')).toEqual(['All', 'Active', 'Completed']);
+  });
+
+  it('finds patients by name or ACT ID', async () => {
+    render(<Registry />);
+
+    await userEvent.type(screen.getByRole('searchbox'), 'rhd00012');
+    expect(shownNames()).toEqual(['Patient 12']);
+    await userEvent.clear(screen.getByRole('searchbox'));
+    await userEvent.type(screen.getByRole('searchbox'), 'patient 3');
+    expect(shownNames()).toEqual(['Patient 3', 'Patient 30']);
+  });
+
+  it('goes back to the first page when a filter changes', async () => {
+    render(<Registry />);
+
+    await userEvent.click(screen.getByRole('button', { name: /next page/i }));
+    await choose('Status', 'Active');
+
+    expect(shownNames()[0]).toBe('Patient 1');
+  });
+
+  it('shows a filter value from the URL that no patient has, so it can be cleared', async () => {
+    window.history.replaceState(null, '', '/openmrs/spa/home/act-registry?cardiac=Old+clinic');
+
+    render(<Registry />);
+
+    expect(screen.getByLabelText('Cardiac clinic')).toHaveValue('Old clinic');
+    expect(screen.getByText('No patients match these filters.')).toBeInTheDocument();
+    await choose('Cardiac clinic', '');
+    expect(shownNames()).toHaveLength(25);
+  });
+
+  it('follows the URL when the Registry link resets it', async () => {
+    window.history.replaceState(null, '', '/openmrs/spa/home/act-registry?category=RHD+B');
+    render(<Registry />);
+    expect(shownNames()).toHaveLength(10);
+
+    act(() => {
+      window.history.replaceState(null, '', '/openmrs/spa/home/act-registry');
+      window.dispatchEvent(new PopStateEvent('popstate'));
+    });
+
+    expect(screen.getByLabelText('Category at diagnosis')).toHaveValue('');
+    expect(shownNames()).toHaveLength(25);
+  });
+
+  it('starts again from the first page when the Registry link resets the filters', async () => {
+    window.history.replaceState(null, '', '/openmrs/spa/home/act-registry?status=Active');
+    render(<Registry />);
+    await userEvent.click(screen.getByRole('button', { name: /next page/i }));
+
+    act(() => {
+      window.history.replaceState(null, '', '/openmrs/spa/home/act-registry');
+      window.dispatchEvent(new PopStateEvent('popstate'));
+    });
+
+    expect(shownNames()[0]).toBe('Patient 1');
+  });
+
+  it('keeps the page when another app changes the URL but not the filters', async () => {
+    render(<Registry />);
+    await userEvent.click(screen.getByRole('button', { name: /next page/i }));
+
+    act(() => {
+      window.dispatchEvent(new PopStateEvent('popstate'));
+    });
+
+    expect(shownNames()[0]).toBe('Patient 26');
+  });
+
+  it('writes the URL once typing has paused, not on every key', () => {
+    vi.useFakeTimers();
+    render(<Registry />);
+
+    fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'pat' } });
+    act(() => vi.advanceTimersByTime(299));
+    expect(window.location.search).toBe('');
+    act(() => vi.advanceTimersByTime(1));
+    vi.useRealTimers();
+
+    expect(new URLSearchParams(window.location.search).get('q')).toBe('pat');
+  });
+
+  it('says so when no patient matches the filters', async () => {
+    render(<Registry />);
+
+    await userEvent.type(screen.getByRole('searchbox'), 'nobody');
+
+    expect(screen.getByText('No patients match these filters.')).toBeInTheDocument();
+    expect(screen.queryByLabelText(/items per page/i)).not.toBeInTheDocument();
+  });
+
+  it('takes a filter set back to All out of the URL', async () => {
+    window.history.replaceState(null, '', '/openmrs/spa/home/act-registry?category=RHD+B&status=Active');
+    render(<Registry />);
+
+    await choose('Category at diagnosis', '');
+
+    await waitFor(() => expect(new URLSearchParams(window.location.search).has('category')).toBe(false));
+    expect(new URLSearchParams(window.location.search).get('status')).toBe('Active');
+  });
+
+  it('keeps the filters in the URL and restores them from it', async () => {
+    const { unmount } = render(<Registry />);
+    await choose('Category at diagnosis', 'RHD C');
+    await userEvent.type(screen.getByRole('searchbox'), 'patient 1');
+    await waitFor(() => expect(new URLSearchParams(window.location.search).get('q')).toBe('patient 1'));
+    expect(new URLSearchParams(window.location.search).get('category')).toBe('RHD C');
+    unmount();
+
+    render(<Registry />);
+
+    expect(screen.getByLabelText('Category at diagnosis')).toHaveValue('RHD C');
+    expect(screen.getByRole('searchbox')).toHaveValue('patient 1');
+    expect(shownNames()).toEqual(['Patient 12', 'Patient 15', 'Patient 18']);
+  });
+});