@openmrs/esm-patient-forms-app 11.3.1-patch.9310 → 11.3.1-patch.9508

package/src/clinical-form-action-button.component.tsx

@@ -1,27 +1,54 @@
 import React, { type ComponentProps } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ActionMenuButton2, DocumentIcon } from '@openmrs/esm-framework';
-import { type PatientChartWorkspaceActionButtonProps, useStartVisitIfNeeded } from '@openmrs/esm-patient-common-lib';
+import { ActionMenuButton, DocumentIcon, launchWorkspace, useWorkspaces } from '@openmrs/esm-framework';
+import {
+  clinicalFormsWorkspace,
+  formEntryWorkspace,
+  htmlFormEntryWorkspace,
+  useLaunchWorkspaceRequiringVisit,
+} from '@openmrs/esm-patient-common-lib';
 
 /**
  * This button uses the patient chart store and MUST only be used
  * within the patient chart
  */
-const ClinicalFormActionButton: React.FC<PatientChartWorkspaceActionButtonProps> = ({
-  groupProps: { patientUuid },
-}) => {
+const ClinicalFormActionButton: React.FC<{ patientUuid: string }> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const startVisitIfNeeded = useStartVisitIfNeeded(patientUuid);
+  const { workspaces } = useWorkspaces();
+  const launchFormsWorkspace = useLaunchWorkspaceRequiringVisit(patientUuid, clinicalFormsWorkspace);
+
+  const formEntryWorkspaces = workspaces.filter((w) => w.name === formEntryWorkspace);
+  const recentlyOpenedForm = formEntryWorkspaces[0];
+
+  const htmlFormEntryWorkspaces = workspaces.filter((w) => w.name === htmlFormEntryWorkspace);
+  const recentlyOpenedHtmlForm = htmlFormEntryWorkspaces[0];
+
+  const isFormOpen = formEntryWorkspaces?.length >= 1;
+  const isHtmlFormOpen = htmlFormEntryWorkspaces?.length >= 1;
+
+  const launchPatientWorkspaceCb = () => {
+    if (isFormOpen) {
+      launchWorkspace(formEntryWorkspace, {
+        workspaceTitle: recentlyOpenedForm?.additionalProps?.['workspaceTitle'],
+      });
+    }
+    // we aren't currently supporting keeping HTML Form workspaces open, but just in case
+    else if (isHtmlFormOpen) {
+      launchWorkspace(htmlFormEntryWorkspace, {
+        workspaceTitle: recentlyOpenedHtmlForm?.additionalProps?.['workspaceTitle'],
+      });
+    } else {
+      launchFormsWorkspace();
+    }
+  };
 
   return (
-    <ActionMenuButton2
-      icon={(props: ComponentProps<typeof DocumentIcon>) => <DocumentIcon {...props} />}
+    <ActionMenuButton
+      getIcon={(props: ComponentProps<typeof DocumentIcon>) => <DocumentIcon {...props} />}
       label={t('clinicalForms', 'Clinical forms')}
-      workspaceToLaunch={{
-        workspaceName: 'clinical-forms-workspace',
-        workspaceProps: {},
-      }}
-      onBeforeWorkspaceLaunch={startVisitIfNeeded}
+      iconDescription={t('clinicalForms', 'Clinical forms')}
+      handler={launchPatientWorkspaceCb}
+      type={'clinical-form'}
     />
   );
 };

package/src/clinical-form-action-button.test.tsx

@@ -1,47 +1,46 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { ActionMenuButton2, useLayoutType } from '@openmrs/esm-framework';
+import { ActionMenuButton, useLayoutType, useWorkspaces } from '@openmrs/esm-framework';
 import ClinicalFormActionButton from './clinical-form-action-button.component';
-import { mockPatient } from 'tools';
 
-const mockActionMenuButton = jest.mocked(ActionMenuButton2);
 const mockUseLayoutType = jest.mocked(useLayoutType);
+const mockUseWorkspaces = useWorkspaces as jest.Mock;
+const mockActionMenuButton = jest.mocked(ActionMenuButton);
 
-mockActionMenuButton.mockImplementation(({ label, tagContent }) => (
-  <button>
+mockActionMenuButton.mockImplementation(({ handler, label, tagContent }) => (
+  <button onClick={handler}>
     {tagContent} {label}
   </button>
 ));
 
-jest.mock('@openmrs/esm-patient-common-lib', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-patient-common-lib');
-
-  return {
-    ...originalModule,
-    useStartVisitIfNeeded: jest.fn(() => () => Promise.resolve(true)),
-  };
-});
+mockUseWorkspaces.mockImplementation(() => ({
+  active: true,
+  windowState: 'normal',
+  workspaces: [
+    {
+      canHide: false,
+      name: 'clinical-forms-workspace',
+      title: 'Clinical forms',
+      preferredWindowSize: 'normal',
+      type: 'form',
+    },
+  ],
+  workspaceWindowState: 'normal',
+  prompt: null,
+}));
 
 describe('<ClinicalFormActionButton>', () => {
   test('should display clinical form action button on tablet view', () => {
     mockUseLayoutType.mockReturnValue('tablet');
 
-    render(
-      <ClinicalFormActionButton
-        groupProps={{ patientUuid: mockPatient.id, patient: mockPatient, visitContext: null, mutateVisitContext: null }}
-      />,
-    );
+    render(<ClinicalFormActionButton patientUuid={'some-uuid'} />);
     expect(screen.getByRole('button', { name: /Clinical forms/i })).toBeInTheDocument();
   });
 
   test('should display clinical form action button on desktop view', () => {
     mockUseLayoutType.mockReturnValue('small-desktop');
 
-    render(
-      <ClinicalFormActionButton
-        groupProps={{ patientUuid: mockPatient.id, patient: mockPatient, visitContext: null, mutateVisitContext: null }}
-      />,
-    );
+    render(<ClinicalFormActionButton patientUuid={'some-uuid'} />);
     const clinicalActionButton = screen.getByRole('button', { name: /Form/i });
     expect(clinicalActionButton).toBeInTheDocument();
   });

package/src/config-schema.ts

@@ -123,7 +123,7 @@ export interface FormsSection {
   forms: Array<string>;
 }
 
-export interface FormEntryConfigSchema {
+export interface ConfigObject {
   htmlFormEntryForms: Array<HtmlFormEntryForm>;
   formSections: Array<FormsSection>;
   customFormsUrl: string;

package/src/forms/form-entry.test.tsx

@@ -1,25 +1,39 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { BehaviorSubject } from 'rxjs';
-import { ExtensionSlot, useConnectivity } from '@openmrs/esm-framework';
+import { ExtensionSlot, useConnectivity, useFeatureFlag } from '@openmrs/esm-framework';
 import { mockPatient } from 'tools';
-import FormEntry, { type FormEntryProps } from './form-entry.component';
+import FormEntry from './form-entry.workspace';
 
-const defaultProps: FormEntryProps = {
-  form: {
-    uuid: 'some-form-uuid',
-    name: '',
-    version: '',
-    published: false,
-    retired: false,
-    resources: [],
+const mockCurrentVisit = {
+  uuid: '17f512b4-d264-4113-a6fe-160cb38cb46e',
+  encounters: [],
+  patient: { uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
+  visitType: {
+    uuid: '7b0f5697-27e3-40c4-8bae-f4049abfb4ed',
+    display: 'Facility Visit',
   },
-  encounterUuid: 'some-encounter-uuid',
+  attributes: [],
+  startDatetime: '2021-03-16T08:16:00.000+0000',
+  stopDatetime: null,
+  location: {
+    uuid: '6351fcf4-e311-4a19-90f9-35667d99a8af',
+    name: 'Registration Desk',
+    display: 'Registration Desk',
+  },
+};
+
+const testProps = {
+  closeWorkspace: jest.fn(),
+  closeWorkspaceWithSavedChanges: jest.fn(),
+  promptBeforeClosing: jest.fn(),
   patientUuid: mockPatient.id,
   patient: mockPatient,
-  visitContext: null,
+  formInfo: { formUuid: 'some-form-uuid' },
+  mutateForm: jest.fn(),
+  setTitle: jest.fn(),
+  visitContext: mockCurrentVisit,
   mutateVisitContext: null,
-  closeWorkspace: jest.fn(),
 };
 
 const mockFormEntrySub = jest.fn();
@@ -35,7 +49,7 @@ describe('FormEntry', () => {
     );
     mockExtensionSlot.mockImplementation((ext) => ext.name as any);
 
-    render(<FormEntry {...defaultProps} />);
+    render(<FormEntry {...testProps} />);
 
     await screen.findByText(/form-widget-slot/);
     expect(screen.getByText(/form-widget-slot/)).toBeInTheDocument();

package/src/forms/form-entry.workspace.tsx

@@ -1,28 +1,108 @@
-import React from 'react';
-import { type Form, type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
-import FormEntry from './form-entry.component';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useSWRConfig } from 'swr';
+import { ExtensionSlot, useConnectivity } from '@openmrs/esm-framework';
+import {
+  clinicalFormsWorkspace,
+  invalidateVisitAndEncounterData,
+  type DefaultPatientWorkspaceProps,
+  type FormEntryProps,
+} from '@openmrs/esm-patient-common-lib';
 
-interface FormEntryWorkspaceProps {
-  form: Form;
-  encounterUuid: string;
+interface FormEntryComponentProps extends DefaultPatientWorkspaceProps {
+  mutateForm: () => void;
+  formInfo: FormEntryProps;
+  clinicalFormsWorkspaceName?: string;
 }
 
-const FormEntryWorkspace: React.FC<PatientWorkspace2DefinitionProps<FormEntryWorkspaceProps, {}>> = ({
+const FormEntry: React.FC<FormEntryComponentProps> = ({
+  patientUuid,
+  patient,
+  clinicalFormsWorkspaceName = clinicalFormsWorkspace,
   closeWorkspace,
-  workspaceProps: { form, encounterUuid },
-  groupProps: { patientUuid, patient, visitContext, mutateVisitContext },
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+  mutateForm,
+  formInfo,
+  visitContext,
+  mutateVisitContext,
 }) => {
+  const { encounterUuid, formUuid, visitStartDatetime, visitStopDatetime, visitTypeUuid, visitUuid, additionalProps } =
+    formInfo || {};
+  const [showForm, setShowForm] = useState(true);
+  const isOnline = useConnectivity();
+  const { mutate: globalMutate } = useSWRConfig();
+
+  const state = useMemo(
+    () => ({
+      view: 'form',
+      formUuid: formUuid ?? null,
+      visitUuid: visitUuid ?? visitContext?.uuid ?? null,
+      visitTypeUuid: visitTypeUuid ?? visitContext?.visitType?.uuid ?? null,
+      visitStartDatetime: visitStartDatetime ?? visitContext?.startDatetime ?? null,
+      visitStopDatetime: visitStopDatetime ?? visitContext?.stopDatetime ?? null,
+      isOffline: !isOnline,
+      patientUuid: patientUuid ?? null,
+      patient,
+      encounterUuid: encounterUuid ?? null,
+      closeWorkspace: () => {
+        typeof mutateForm === 'function' && mutateForm();
+        closeWorkspace();
+      },
+      closeWorkspaceWithSavedChanges: () => {
+        typeof mutateForm === 'function' && mutateForm();
+        // Update current visit data for critical components
+        mutateVisitContext?.();
+
+        // Also invalidate visit history and encounter tables since form submission may create/update encounters
+        invalidateVisitAndEncounterData(globalMutate, patientUuid);
+
+        closeWorkspaceWithSavedChanges();
+      },
+      promptBeforeClosing,
+      additionalProps,
+      clinicalFormsWorkspaceName,
+    }),
+    [
+      additionalProps,
+      clinicalFormsWorkspaceName,
+      closeWorkspace,
+      closeWorkspaceWithSavedChanges,
+      visitContext?.startDatetime,
+      visitContext?.stopDatetime,
+      visitContext?.uuid,
+      visitContext?.visitType?.uuid,
+      encounterUuid,
+      formUuid,
+      globalMutate,
+      isOnline,
+      mutateVisitContext,
+      mutateForm,
+      patient,
+      patientUuid,
+      promptBeforeClosing,
+      visitStartDatetime,
+      visitStopDatetime,
+      visitTypeUuid,
+      visitUuid,
+    ],
+  );
+
+  // FIXME: This logic triggers a reload of the form when the formUuid changes. It's a workaround for the fact that the form doesn't reload when the formUuid changes.
+  useEffect(() => {
+    if (state.formUuid) {
+      setShowForm(false);
+      setTimeout(() => {
+        setShowForm(true);
+      });
+    }
+  }, [state]);
+
   return (
-    <FormEntry
-      form={form}
-      encounterUuid={encounterUuid}
-      patient={patient}
-      patientUuid={patientUuid}
-      visitContext={visitContext}
-      mutateVisitContext={mutateVisitContext}
-      closeWorkspace={closeWorkspace}
-    />
+    <div>
+      <ExtensionSlot name="visit-context-header-slot" state={{ patientUuid }} />
+      {showForm && formInfo && patientUuid && patient && <ExtensionSlot name="form-widget-slot" state={state} />}
+    </div>
   );
 };
 
-export default FormEntryWorkspace;
+export default FormEntry;

package/src/forms/forms-dashboard.component.tsx

@@ -1,28 +1,73 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tile } from '@carbon/react';
-import { ResponsiveWrapper, useConfig, useConnectivity, type Visit } from '@openmrs/esm-framework';
-import { EmptyDataIllustration, type Form } from '@openmrs/esm-patient-common-lib';
-import type { FormEntryConfigSchema } from '../config-schema';
+import { ResponsiveWrapper, useConfig, useConnectivity } from '@openmrs/esm-framework';
+import {
+  type DefaultPatientWorkspaceProps,
+  EmptyDataIllustration,
+  type Form,
+  launchFormEntryOrHtmlForms,
+  mapFormsToHtmlFormEntryForms,
+} from '@openmrs/esm-patient-common-lib';
+import type { ConfigObject } from '../config-schema';
 import { useForms } from '../hooks/use-forms';
 import FormsList from './forms-list.component';
 import styles from './forms-dashboard.scss';
 
-interface FormsDashbaordProps {
-  handleFormOpen: (form: Form, encounterUuid: string) => void;
-  patient: fhir.Patient;
-  visitContext: Visit;
+interface FormsDashboardProps extends DefaultPatientWorkspaceProps {
+  clinicalFormsWorkspaceName?: string;
+  formEntryWorkspaceName?: string;
+  htmlFormEntryWorkspaceName?: string;
 }
 
-const FormsDashboard: React.FC<FormsDashbaordProps> = ({ handleFormOpen, patient, visitContext }) => {
+const FormsDashboard: React.FC<FormsDashboardProps> = ({
+  patientUuid,
+  clinicalFormsWorkspaceName,
+  formEntryWorkspaceName,
+  htmlFormEntryWorkspaceName,
+  visitContext,
+}) => {
   const { t } = useTranslation();
-  const config = useConfig<FormEntryConfigSchema>();
+  const config = useConfig<ConfigObject>();
   const isOnline = useConnectivity();
   const {
     data: forms,
+    allForms,
     error,
     mutateForms,
-  } = useForms(patient.id, visitContext?.uuid, undefined, undefined, !isOnline, config.orderBy);
+  } = useForms(patientUuid, visitContext?.uuid, undefined, undefined, !isOnline, config.orderBy);
+
+  const htmlFormEntryForms = useMemo(() => {
+    return mapFormsToHtmlFormEntryForms(allForms, config.htmlFormEntryForms);
+  }, [config.htmlFormEntryForms, allForms]);
+
+  const handleFormOpen = useCallback(
+    (form: Form, encounterUuid: string) => {
+      launchFormEntryOrHtmlForms(
+        htmlFormEntryForms,
+        patientUuid,
+        form,
+        visitContext?.uuid,
+        encounterUuid,
+        visitContext?.visitType.uuid,
+        visitContext?.startDatetime,
+        visitContext?.stopDatetime,
+        mutateForms,
+        clinicalFormsWorkspaceName,
+        formEntryWorkspaceName,
+        htmlFormEntryWorkspaceName,
+      );
+    },
+    [
+      visitContext,
+      htmlFormEntryForms,
+      mutateForms,
+      patientUuid,
+      clinicalFormsWorkspaceName,
+      formEntryWorkspaceName,
+      htmlFormEntryWorkspaceName,
+    ],
+  );
 
   const sections = useMemo(() => {
     return config.formSections?.map((formSection) => ({
@@ -47,14 +92,14 @@ const FormsDashboard: React.FC<FormsDashbaordProps> = ({ handleFormOpen, patient
   return (
     <div className={styles.container}>
       {sections.length === 0 ? (
-        <FormsList forms={forms} error={error} handleFormOpen={handleFormOpen} />
+        <FormsList completedForms={forms} error={error} handleFormOpen={handleFormOpen} />
       ) : (
         sections.map((section) => {
           return (
             <FormsList
               key={`form-section-${section.name}`}
               sectionName={section.name}
-              forms={section.availableForms}
+              completedForms={section.availableForms}
               error={error}
               handleFormOpen={handleFormOpen}
             />

package/src/forms/forms-dashboard.test.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
-import { configSchema, type FormEntryConfigSchema } from '../config-schema';
+import { configSchema, type ConfigObject } from '../config-schema';
+import { mockCurrentVisit } from '__mocks__';
 import FormsDashboard from './forms-dashboard.component';
 import { mockPatient } from 'tools';
 
-const mockUseConfig = jest.mocked(useConfig<FormEntryConfigSchema>);
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 
 jest.mock('../hooks/use-forms', () => ({
   useForms: jest.fn().mockReturnValueOnce({
@@ -20,7 +21,18 @@ mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), ht
 
 describe('FormsDashboard', () => {
   test('renders an empty state if there are no forms persisted on the server', async () => {
-    render(<FormsDashboard handleFormOpen={jest.fn()} patient={mockPatient} visitContext={null} />);
+    render(
+      <FormsDashboard
+        promptBeforeClosing={jest.fn()}
+        closeWorkspace={jest.fn()}
+        closeWorkspaceWithSavedChanges={jest.fn()}
+        patientUuid={mockPatient.id}
+        patient={mockPatient}
+        setTitle={jest.fn()}
+        visitContext={mockCurrentVisit}
+        mutateVisitContext={null}
+      />,
+    );
 
     expect(screen.getByText(/there are no forms to display/i)).toBeInTheDocument();
   });

package/src/forms/forms-dashboard.workspace.tsx

@@ -1,39 +1,16 @@
-import React, { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
+import React from 'react';
 import FormsDashboard from './forms-dashboard.component';
 import styles from './forms-dashboard-workspace.scss';
-import { type Form, type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
-import { ExtensionSlot, Workspace2 } from '@openmrs/esm-framework';
+import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
+import { ExtensionSlot } from '@openmrs/esm-framework';
 
-/**
- * This workspace lists a table of available forms. When clicking on a row, it launches
- * either the form-entry workspace or the html-form-entry workspace.
- *
- * This workspace should only be used within the patient chart
- */
-const FormsDashboardWorkspace: React.FC<PatientWorkspace2DefinitionProps<{}, {}>> = ({
-  launchChildWorkspace,
-  groupProps: { patient, patientUuid, visitContext },
-}) => {
-  const { t } = useTranslation();
-  const handleFormOpen = useCallback(
-    (form: Form, encounterUuid: string) => {
-      launchChildWorkspace('patient-form-entry-workspace', {
-        form,
-        encounterUuid,
-      });
-    },
-    [launchChildWorkspace],
-  );
+export default function FormsWorkspace(props: DefaultPatientWorkspaceProps) {
+  const { patientUuid } = props;
 
   return (
-    <Workspace2 title={t('clinicalForms', 'Clinical forms')} hasUnsavedChanges={false}>
-      <div className={styles.container}>
-        <ExtensionSlot name="visit-context-header-slot" state={{ patientUuid }} />
-        <FormsDashboard {...{ patient, visitContext, handleFormOpen }} />
-      </div>
-    </Workspace2>
+    <div className={styles.container}>
+      <ExtensionSlot name="visit-context-header-slot" state={{ patientUuid }} />
+      <FormsDashboard {...props} />
+    </div>
   );
-};
-
-export default FormsDashboardWorkspace;
+}

package/src/forms/forms-list.component.tsx

@@ -9,7 +9,7 @@ import FormsTable from './forms-table.component';
 import styles from './forms-list.scss';
 
 export type FormsListProps = {
-  forms?: Array<CompletedFormInfo>;
+  completedForms?: Array<CompletedFormInfo>;
   error?: any;
   sectionName?: string;
   handleFormOpen: (form: Form, encounterUuid: string) => void;
@@ -20,23 +20,32 @@ export type FormsListProps = {
  * t('forms', 'Forms')
  */
 
-const FormsList: React.FC<FormsListProps> = ({ forms, error, sectionName, handleFormOpen }) => {
+const FormsList: React.FC<FormsListProps> = ({ completedForms, error, sectionName = 'forms', handleFormOpen }) => {
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState('');
   const isTablet = useLayoutType() === 'tablet';
+  const [locale, setLocale] = useState(window.i18next.language ?? navigator.language);
+
+  useEffect(() => {
+    if (window.i18next?.on) {
+      const languageChanged = (lng: string) => setLocale(lng);
+      window.i18next.on('languageChanged', languageChanged);
+      return () => window.i18next.off('languageChanged', languageChanged);
+    }
+  }, []);
 
   const handleSearch = useMemo(() => debounce((searchTerm) => setSearchTerm(searchTerm), 300), []);
 
   const filteredForms = useMemo(() => {
     if (!searchTerm) {
-      return forms;
+      return completedForms;
     }
 
     return fuzzy
-      .filter(searchTerm, forms, { extract: (formInfo) => formInfo.form.display ?? formInfo.form.name })
+      .filter(searchTerm, completedForms, { extract: (formInfo) => formInfo.form.display ?? formInfo.form.name })
       .sort((r1, r2) => r1.score - r2.score)
       .map((result) => result.original);
-  }, [forms, searchTerm]);
+  }, [completedForms, searchTerm]);
 
   const tableHeaders = useMemo(() => {
     return [
@@ -66,30 +75,42 @@ const FormsList: React.FC<FormsListProps> = ({ forms, error, sectionName, handle
     [filteredForms],
   );
 
-  if (!forms && !error) {
+  if (!completedForms && !error) {
     return <DataTableSkeleton role="progressbar" />;
   }
 
-  if (forms?.length === 0) {
+  if (completedForms?.length === 0) {
     return <></>;
   }
 
-  return (
-    <ResponsiveWrapper>
-      {sectionName && (
+  if (sectionName === 'forms') {
+    return (
+      <ResponsiveWrapper>
+        <FormsTable
+          tableHeaders={tableHeaders}
+          tableRows={tableRows}
+          isTablet={isTablet}
+          handleSearch={handleSearch}
+          handleFormOpen={handleFormOpen}
+        />
+      </ResponsiveWrapper>
+    );
+  } else {
+    return (
+      <ResponsiveWrapper>
         <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
           <h4>{t(sectionName)}</h4>
         </div>
-      )}
-      <FormsTable
-        tableHeaders={tableHeaders}
-        tableRows={tableRows}
-        isTablet={isTablet}
-        handleSearch={handleSearch}
-        handleFormOpen={handleFormOpen}
-      />
-    </ResponsiveWrapper>
-  );
+        <FormsTable
+          tableHeaders={tableHeaders}
+          tableRows={tableRows}
+          isTablet={isTablet}
+          handleSearch={handleSearch}
+          handleFormOpen={handleFormOpen}
+        />
+      </ResponsiveWrapper>
+    );
+  }
 };
 
 export default FormsList;

package/src/forms/forms-list.test.tsx

@@ -7,7 +7,7 @@ import FormsList, { type FormsListProps } from './forms-list.component';
 jest.mock('lodash-es/debounce', () => jest.fn((fn) => fn));
 
 const defaultProps: FormsListProps & { reset: () => void } = {
-  forms: [],
+  completedForms: [],
   handleFormOpen: jest.fn(),
   reset() {
     this.completedForms = [];
@@ -25,7 +25,7 @@ beforeEach(async () => {
 it('renders a list of forms fetched from the server', async () => {
   const user = userEvent.setup();
 
-  renderFormsList({ forms: forms.map((form) => ({ form, associatedEncounters: [] })) });
+  renderFormsList({ completedForms: forms.map((form) => ({ form, associatedEncounters: [] })) });
 
   const searchbox = screen.getByRole('searchbox');
   expect(searchbox).toBeInTheDocument();

package/src/forms/forms-table.component.tsx

@@ -71,7 +71,7 @@ const FormsTable = ({ tableHeaders, tableRows, isTablet, handleSearch, handleFor
                         <Link
                           style={{ cursor: 'pointer' }}
                           onClick={() => {
-                            handleFormOpen(tableRows[i].form, null);
+                            handleFormOpen(tableRows[i].form, '');
                           }}
                           role="presentation"
                           className={styles.formName}