@openmrs/esm-form-builder-app 2.2.2-pre.645 → 2.2.2-pre.654

package/src/components/dashboard/dashboard.scss

@@ -3,7 +3,7 @@
 @use "@carbon/type";
 
 .container {
-  padding: 2rem;
+  padding: 1rem;
   background-color: colors.$gray-10;
 }
 
@@ -49,6 +49,9 @@
   }
 }
 
+.link {
+  text-decoration: none;
+}
 
 .table {
   tr {
@@ -65,10 +68,6 @@
   }
 }
 
-.heading {
-  margin-bottom: 1.5rem;
-}
-
 .toolbar {
   position: relative;
   display: flex;
@@ -105,10 +104,6 @@
     padding-top: 0rem;
   }
 
-  // FIXME: This override should be moved to esm-styleguide
-  :global(.cds--btn--icon-only) {
-    padding-block-start: 0.5rem;
-  }
 }
 
 .filterContainer {
@@ -123,6 +118,10 @@
   }
 }
 
+.filterDropdown {
+  margin-left: layout.$spacing-03;
+}
+
 .content {
   @include type.type-style('heading-compact-02');
   color: colors.$gray-70;
@@ -147,7 +146,7 @@
 }
 
 .warningMessage {
-  margin: 1.5rem 0;
+  margin: 1rem 0;
 }
 
 .spinner {

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

@@ -8,6 +8,7 @@ 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(),
@@ -58,7 +59,7 @@ describe('Dashboard', () => {
 
     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();
@@ -141,14 +142,14 @@ describe('Dashboard', () => {
 
     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();
     expect(screen.getByRole('button', { name: /download schema/i })).toBeInTheDocument();
     expect(screen.getByRole('searchbox', { name: /filter table/i })).toBeInTheDocument();
     expect(screen.queryByRole('table')).toBeInTheDocument();
-    expect(screen.getByText(/Test Form 1/i)).toBeInTheDocument();
+    expect(screen.getByText(formsResponse[0].name)).toBeInTheDocument();
   });
 
   it('clicking on "create a new form" button navigates to the "create form" page', async () => {
@@ -181,6 +182,27 @@ describe('Dashboard', () => {
     });
   });
 
+  it("clicking the form name navigates to the form's edit page", async () => {
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    mockUsePagination.mockImplementation(() => ({
+      currentPage: 1,
+      goTo: () => {},
+      results: formsResponse,
+    }));
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    const link = screen.getByRole('link', { name: formsResponse[0].name });
+    expect(link).toBeInTheDocument();
+  });
+
   it('clicking on "edit schema" button navigates to the "edit schema" page', async () => {
     const user = userEvent.setup();
 

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}>
@@ -250,17 +250,21 @@ const FormEditor: React.FC = () => {
             <div className={styles.actionButtons}>
               {isLoadingFormOrSchema ? (
                 <InlineLoading description={t('loadingSchema', 'Loading schema') + '...'} />
-              ) : null}
+              ) : (
+                <h1 className={styles.formName}>{form?.name}</h1>
+              )}
 
-              {isNewSchema && !schema ? (
-                <Button kind="ghost" onClick={inputDummySchema}>
-                  {t('inputDummySchema', 'Input dummy schema')}
-                </Button>
-              ) : null}
+              <div>
+                {isNewSchema && !schema ? (
+                  <Button kind="ghost" onClick={inputDummySchema}>
+                    {t('inputDummySchema', 'Input dummy schema')}
+                  </Button>
+                ) : null}
 
-              <Button kind="ghost" onClick={renderSchemaChanges}>
-                <span>{t('renderChanges', 'Render changes')}</span>
-              </Button>
+                <Button kind="ghost" onClick={renderSchemaChanges}>
+                  <span>{t('renderChanges', 'Render changes')}</span>
+                </Button>
+              </div>
             </div>
             <div>
               <div className={styles.heading}>
@@ -330,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;
@@ -41,7 +35,7 @@
 .actionButtons {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
   margin: 1rem 0;
 
   button {
@@ -49,6 +43,10 @@
   }
 }
 
+.formName {
+  @include type.type-style('heading-03');
+}
+
 .editorContainer {
   padding: 1rem;
 }
@@ -67,3 +65,31 @@
   width: 100%;
   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"
+      fill-rule="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`,
-    },
-  ]);
 }

package/src/setup-tests.ts

@@ -1,3 +1,6 @@
 import '@testing-library/jest-dom';
 
 window.URL.createObjectURL = jest.fn();
+window.openmrsBase = '/openmrs';
+window.spaBase = '/spa';
+window.getOpenmrsSpaBase = () => '/openmrs/spa/';