@openmrs/esm-form-builder-app 2.2.2-pre.651 → 2.2.2-pre.658

package/src/components/dashboard/dashboard.test.tsx

@@ -1,19 +1,32 @@
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { navigate, openmrsFetch, usePagination } from '@openmrs/esm-framework';
+import { type FetchResponse, navigate, openmrsFetch, usePagination } from '@openmrs/esm-framework';
 import { renderWithSwr, waitForLoadingToFinish } from '../../test-helpers';
 import { deleteForm } from '../../forms.resource';
 import Dashboard from './dashboard.component';
 
-const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
-const mockedDeleteForm = deleteForm as jest.Mock;
-global.window.URL.createObjectURL = jest.fn();
-
-jest.mock('../../forms.resource', () => ({
-  deleteForm: jest.fn(),
-}));
-const mockUsePagination = usePagination as jest.Mock;
+type OpenmrsFetchResponse = Promise<
+  FetchResponse<{
+    results: unknown[];
+  }>
+>;
+
+type PaginationData = {
+  currentPage: number;
+  goTo: (page: number) => void;
+  results: unknown[];
+  totalPages: number;
+  paginated: boolean;
+  showNextButton: boolean;
+  showPreviousButton: boolean;
+  goToNext: () => void;
+  goToPrevious: () => void;
+};
+
+const mockedOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockedDeleteForm = jest.mocked(deleteForm);
+const mockUsePagination = jest.mocked(usePagination);
 
 const formsResponse = [
   {
@@ -37,6 +50,10 @@ const formsResponse = [
   },
 ];
 
+jest.mock('../../forms.resource', () => ({
+  deleteForm: jest.fn(),
+}));
+
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
 
@@ -51,15 +68,17 @@ jest.mock('@openmrs/esm-framework', () => {
   };
 });
 
+global.window.URL.createObjectURL = jest.fn();
+
 describe('Dashboard', () => {
   it('renders an empty state view if no forms are available', async () => {
-    mockedOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } });
+    mockedOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } } as unknown as OpenmrsFetchResponse);
 
     renderDashboard();
 
     await waitForLoadingToFinish();
 
-    expect(screen.getByRole('heading', { name: /form builder/i })).toBeInTheDocument();
+    expect(screen.getByText(/form builder/i)).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: /forms/i })).toBeInTheDocument();
     expect(screen.getByTitle(/empty data illustration/i)).toBeInTheDocument();
     expect(screen.getByText(/there are no forms to display/i)).toBeInTheDocument();
@@ -73,7 +92,7 @@ describe('Dashboard', () => {
       data: {
         results: formsResponse,
       },
-    });
+    } as unknown as OpenmrsFetchResponse);
 
     renderDashboard();
 
@@ -81,17 +100,20 @@ describe('Dashboard', () => {
 
     const searchbox = screen.getByRole('searchbox') as HTMLInputElement;
 
-    await waitFor(() => user.type(searchbox, 'COVID'));
+    await user.type(searchbox, 'COVID');
 
     expect(searchbox.value).toBe('COVID');
 
-    mockUsePagination.mockImplementation(() => ({
-      currentPage: 1,
-      goTo: () => {},
-      results: formsResponse.filter((form) => form.name === searchbox.value),
-    }));
+    mockUsePagination.mockImplementation(
+      () =>
+        ({
+          currentPage: 1,
+          goTo: () => {},
+          results: formsResponse.filter((form) => form.name === searchbox.value),
+        }) as unknown as PaginationData,
+    );
 
-    await waitFor(() => expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument());
+    await expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument();
     expect(screen.getByText(/no matching forms to display/i)).toBeInTheDocument();
   });
 
@@ -102,7 +124,7 @@ describe('Dashboard', () => {
       data: {
         results: formsResponse,
       },
-    });
+    } as unknown as OpenmrsFetchResponse);
 
     renderDashboard();
 
@@ -112,14 +134,17 @@ describe('Dashboard', () => {
       name: /filter by/i,
     });
 
-    await waitFor(() => user.click(publishStatusFilter));
-    await waitFor(() => user.click(screen.getByRole('option', { name: /unpublished/i })));
+    await user.click(publishStatusFilter);
+    await user.click(screen.getByRole('option', { name: /unpublished/i }));
 
-    mockUsePagination.mockImplementation(() => ({
-      currentPage: 1,
-      goTo: () => {},
-      results: formsResponse.filter((form) => !form.published),
-    }));
+    mockUsePagination.mockImplementation(
+      () =>
+        ({
+          currentPage: 1,
+          goTo: () => {},
+          results: formsResponse.filter((form) => !form.published),
+        }) as unknown as PaginationData,
+    );
 
     expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument();
     expect(screen.getByText(/no matching forms to display/i)).toBeInTheDocument();
@@ -130,19 +155,22 @@ describe('Dashboard', () => {
       data: {
         results: formsResponse,
       },
-    });
+    } as unknown as OpenmrsFetchResponse);
 
-    mockUsePagination.mockImplementation(() => ({
-      currentPage: 1,
-      goTo: () => {},
-      results: formsResponse,
-    }));
+    mockUsePagination.mockImplementation(
+      () =>
+        ({
+          currentPage: 1,
+          goTo: () => {},
+          results: formsResponse,
+        }) as unknown as PaginationData,
+    );
 
     renderDashboard();
 
     await waitForLoadingToFinish();
 
-    expect(screen.getByRole('heading', { name: /form builder/i })).toBeInTheDocument();
+    expect(screen.getByText(/form builder/i)).toBeInTheDocument();
     expect(screen.getByRole('combobox', { name: /filter by/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /create a new form/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /edit schema/i })).toBeInTheDocument();
@@ -159,13 +187,16 @@ describe('Dashboard', () => {
       data: {
         results: formsResponse,
       },
-    });
+    } as unknown as OpenmrsFetchResponse);
 
-    mockUsePagination.mockImplementation(() => ({
-      currentPage: 1,
-      goTo: () => {},
-      results: formsResponse,
-    }));
+    mockUsePagination.mockImplementation(
+      () =>
+        ({
+          currentPage: 1,
+          goTo: () => {},
+          results: formsResponse,
+        }) as unknown as PaginationData,
+    );
 
     renderDashboard();
 
@@ -187,13 +218,16 @@ describe('Dashboard', () => {
       data: {
         results: formsResponse,
       },
-    });
+    } as unknown as OpenmrsFetchResponse);
 
-    mockUsePagination.mockImplementation(() => ({
-      currentPage: 1,
-      goTo: () => {},
-      results: formsResponse,
-    }));
+    mockUsePagination.mockImplementation(
+      () =>
+        ({
+          currentPage: 1,
+          goTo: () => {},
+          results: formsResponse,
+        }) as unknown as PaginationData,
+    );
 
     renderDashboard();
 
@@ -210,13 +244,16 @@ describe('Dashboard', () => {
       data: {
         results: formsResponse,
       },
-    });
+    } as unknown as OpenmrsFetchResponse);
 
-    mockUsePagination.mockImplementation(() => ({
-      currentPage: 1,
-      goTo: () => {},
-      results: formsResponse,
-    }));
+    mockUsePagination.mockImplementation(
+      () =>
+        ({
+          currentPage: 1,
+          goTo: () => {},
+          results: formsResponse,
+        }) as unknown as PaginationData,
+    );
 
     renderDashboard();
 
@@ -226,7 +263,7 @@ describe('Dashboard', () => {
       name: /edit schema/i,
     });
 
-    await waitFor(() => user.click(editSchemaButton));
+    await user.click(editSchemaButton);
 
     expect(navigate).toHaveBeenCalledWith({
       to: expect.stringMatching(/form\-builder\/edit/),
@@ -240,13 +277,17 @@ describe('Dashboard', () => {
       data: {
         results: formsResponse,
       },
-    });
+    } as unknown as OpenmrsFetchResponse);
+
+    mockUsePagination.mockImplementation(
+      () =>
+        ({
+          currentPage: 1,
+          goTo: () => {},
+          results: formsResponse,
+        }) as unknown as PaginationData,
+    );
 
-    mockUsePagination.mockImplementation(() => ({
-      currentPage: 1,
-      goTo: () => {},
-      results: formsResponse,
-    }));
     renderDashboard();
 
     await waitForLoadingToFinish();
@@ -255,7 +296,7 @@ describe('Dashboard', () => {
       name: /download schema/i,
     });
 
-    await waitFor(() => user.click(downloadSchemaButton));
+    await user.click(downloadSchemaButton);
 
     expect(window.URL.createObjectURL).toHaveBeenCalled();
   });
@@ -267,14 +308,18 @@ describe('Dashboard', () => {
       data: {
         results: formsResponse,
       },
-    });
-    mockedDeleteForm.mockResolvedValue({});
+    } as unknown as OpenmrsFetchResponse);
 
-    mockUsePagination.mockImplementation(() => ({
-      currentPage: 1,
-      goTo: () => {},
-      results: formsResponse,
-    }));
+    mockedDeleteForm.mockResolvedValue({} as FetchResponse<Record<string, never>>);
+
+    mockUsePagination.mockImplementation(
+      () =>
+        ({
+          currentPage: 1,
+          goTo: () => {},
+          results: formsResponse,
+        }) as unknown as PaginationData,
+    );
 
     renderDashboard();
 
@@ -283,7 +328,7 @@ describe('Dashboard', () => {
     const deleteButton = screen.getByRole('button', { name: /delete schema/i });
     expect(deleteButton).toBeInTheDocument();
 
-    await waitFor(() => user.click(deleteButton));
+    await user.click(deleteButton);
 
     const modal = screen.getByRole('presentation');
     expect(modal).toBeInTheDocument();
@@ -292,7 +337,7 @@ describe('Dashboard', () => {
     expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /danger delete/i })).toBeInTheDocument();
 
-    await waitFor(() => user.click(screen.getByRole('button', { name: /danger delete/i })));
+    await user.click(screen.getByRole('button', { name: /danger delete/i }));
   });
 });
 

package/src/components/form-editor/form-editor.component.tsx

@@ -17,10 +17,9 @@ import {
   TabPanels,
   TabPanel,
 } from '@carbon/react';
-import { Download } from '@carbon/react/icons';
+import { ArrowLeft, Download } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { ExtensionSlot } from '@openmrs/esm-framework';
 import type { OHRIFormSchema } from '@openmrs/openmrs-form-engine-lib';
 import type { Schema } from '../../types';
 import { useClobdata } from '../../hooks/useClobdata';
@@ -28,9 +27,11 @@ import { useForm } from '../../hooks/useForm';
 import ActionButtons from '../action-buttons/action-buttons.component';
 import AuditDetails from '../audit-details/audit-details.component';
 import FormRenderer from '../form-renderer/form-renderer.component';
+import Header from '../header/header.component';
 import InteractiveBuilder from '../interactive-builder/interactive-builder.component';
 import SchemaEditor from '../schema-editor/schema-editor.component';
 import styles from './form-editor.scss';
+import { ConfigurableLink } from '@openmrs/esm-framework';
 
 interface ErrorProps {
   error: Error;
@@ -240,9 +241,8 @@ const FormEditor: React.FC = () => {
 
   return (
     <>
-      <div className={styles.breadcrumbsContainer}>
-        <ExtensionSlot name="breadcrumbs-slot" />
-      </div>
+      <Header title={t('schemaEditor', 'Schema editor')} />
+      <BackButton />
       <div className={styles.container}>
         {showDraftSchemaModal && <DraftSchemaModal />}
         <Grid className={styles.grid}>
@@ -334,4 +334,22 @@ const FormEditor: React.FC = () => {
   );
 };
 
+function BackButton() {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.backButton}>
+      <ConfigurableLink to={window.getOpenmrsSpaBase() + 'form-builder'}>
+        <Button
+          kind="ghost"
+          renderIcon={(props) => <ArrowLeft size={24} {...props} />}
+          iconDescription="Return to dashboard"
+        >
+          <span>{t('backToDashboard', 'Back to dashboard')}</span>
+        </Button>
+      </ConfigurableLink>
+    </div>
+  );
+}
+
 export default FormEditor;

package/src/components/form-editor/form-editor.scss

@@ -8,12 +8,6 @@
   flex-direction: column;
 }
 
-.breadcrumbsContainer {
-  nav {
-    background-color: colors.$white-0;
-  }
-}
-
 .grid {
   margin-left: 0;
   margin-right: 0;
@@ -72,3 +66,30 @@
   padding: 0.75rem;
 }
 
+.backButton {
+  margin-left: layout.$spacing-05;
+  padding: layout.$spacing-03 0;
+  max-width: fit-content;
+
+  a {
+    text-decoration: none;
+  }
+
+  button {
+    display: flex;
+    padding-left: 0 !important;
+
+    svg {
+      order: 1;
+      margin: 0 layout.$spacing-03;
+    }
+
+    span {
+      order: 2;
+    }
+  }
+}
+
+button {
+  padding-block-start: 0.5rem;
+}

package/src/components/header/header.component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location, UserFollow } from '@carbon/react/icons';
+import { formatDate, useSession } from '@openmrs/esm-framework';
+import Illustration from './illo.component';
+import styles from './header.scss';
+
+interface HeaderProps {
+  title: string;
+}
+
+const Header: React.FC<HeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles['left-justified-items']}>
+        <Illustration />
+        <div className={styles['page-labels']}>
+          <p>{t('formBuilder', 'Form builder')}</p>
+          <p className={styles['page-name']}>{title}</p>
+        </div>
+      </div>
+      <div className={styles['right-justified-items']}>
+        <div className={styles.userContainer}>
+          <p>{session?.user?.person?.display}</p>
+          <UserFollow size={16} className={styles.userIcon} />
+        </div>
+        <div className={styles['date-and-location']}>
+          <Location size={16} />
+          <span className={styles.value}>{location}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

package/src/components/header/header.scss

@@ -0,0 +1,67 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: layout.$spacing-12;
+  background-color: $ui-02;
+  border-bottom: 1px solid $ui-03;
+  display: flex;
+  justify-content: space-between;
+  padding: layout.$spacing-05;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  align-items: center;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin: layout.$spacing-03;
+
+  p:first-of-type {
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.userContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: layout.$spacing-05;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.view {
+  @include type.type-style('label-01');
+}

package/src/components/header/illo.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const Illustration: React.FC = () => {
+  return (
+    <svg
+      height="64"
+      width="64"
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      strokeLinejoin="round"
+      strokeMiterlimit="2"
+    >
+      <path
+        d="M27 31.36H8a.36.36 0 0 1-.36-.36v-1.64H6a.36.36 0 0 1-.36-.36v-1.64H5a.36.36 0 0 1-.36-.36V3A.36.36 0 0 1 5 2.64h4.64V2a.36.36 0 0 1 .36-.36h1.64V1A.36.36 0 0 1 12 .64h4a.36.36 0 0 1 .36.36v.64H18a.36.36 0 0 1 .36.36v.64H23a.36.36 0 0 1 .36.36v1.64H25a.36.36 0 0 1 .36.36v1.64H27a.36.36 0 0 1 .36.36v24a.36.36 0 0 1-.36.36Z"
+        fill="#d2e5e5"
+      />
+      <path d="M8.36 30.64h18.28V7.36h-1.28V29a.36.36 0 0 1-.36.36H8.36v1.28Z" fill="#8abab8" />
+      <path
+        d="M5.36 26.64h17.28V3.36h-4.28V4a.36.36 0 0 1-.36.36h-8A.36.36 0 0 1 9.64 4v-.64H5.36v23.28Z"
+        fill="#8abab8"
+      />
+      <path fill="#fff" d="M7.5 12.64h13v.72h-13zM7.5 8.64h13v.72h-13zM7.5 20.64h13v.72h-13zM7.5 16.64h13v.72h-13z" />
+      <path
+        d="M10.36 3.64h7.28V2.36H16a.36.36 0 0 1-.36-.36v-.64h-3.28V2a.36.36 0 0 1-.36.36h-1.64v1.28ZM6.36 28.64h18.28V5.36h-1.28V27a.36.36 0 0 1-.36.36H6.36v1.28Z"
+        fill="#8abab8"
+      />
+    </svg>
+  );
+};
+
+export default Illustration;

package/src/index.ts

@@ -1,4 +1,4 @@
-import { defineConfigSchema, getAsyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
+import { defineConfigSchema, getAsyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 
 const moduleName = '@openmrs/esm-form-builder-app';
@@ -19,22 +19,4 @@ export const systemAdministrationFormBuilderCardLink = getAsyncLifecycle(
 
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
-
-  registerBreadcrumbs([
-    {
-      path: `${window.spaBase}/form-builder`,
-      title: 'Form Builder',
-      parent: `${window.spaBase}/home`,
-    },
-    {
-      path: `${window.spaBase}/form-builder/new`,
-      title: 'Form Editor',
-      parent: `${window.spaBase}/form-builder`,
-    },
-    {
-      path: `${window.spaBase}/form-builder/edit/:uuid`,
-      title: 'Form Editor',
-      parent: `${window.spaBase}/form-builder`,
-    },
-  ]);
 }