(feat) Add a page header (openmrs#212)

* (feat) Add a page header

* Remove breadcrumbs registration

* Update svg illustration

src/components/dashboard/dashboard.component.tsx

@@ -47,6 +47,7 @@ import { useClobdata } from '../../hooks/useClobdata';
 import { useForms } from '../../hooks/useForms';
 import EmptyState from '../empty-state/empty-state.component';
 import ErrorState from '../error-state/error-state.component';
+import Header from '../header/header.component';
 import styles from './dashboard.scss';
 
 type Mutator = KeyedMutator<{
@@ -436,24 +437,26 @@ const Dashboard: React.FC = () => {
  const { error, forms, isLoading, isValidating, mutate } = useForms();
 
  return (
- <div className={styles.container}>
- <h3 className={styles.heading}>{t('formBuilder', 'Form Builder')}</h3>
- {(() => {
- if (error) {
- return <ErrorState error={error} />;
- }
+ <main>
+ <Header title={t('home', 'Home')} />
+ <div className={styles.container}>
+ {(() => {
+ if (error) {
+ return <ErrorState error={error} />;
+ }
 
- if (isLoading) {
- return <DataTableSkeleton role="progressbar" />;
- }
+  if (isLoading) {
+  return <DataTableSkeleton role="progressbar" />;
+  }
 
- if (forms.length === 0) {
- return <EmptyState />;
- }
+  if (forms.length === 0) {
+  return <EmptyState />;
+  }
 
- return <FormsList forms={forms} isValidating={isValidating} mutate={mutate} t={t} />;
- })()}
- </div>
+ return <FormsList forms={forms} isValidating={isValidating} mutate={mutate} t={t} />;
+ })()}
+ </div>
+ </main>
  );
 };
 

src/components/dashboard/dashboard.scss

@@ -3,7 +3,7 @@
 @use "@carbon/type";
 
 .container {
- padding: 2rem;
+ padding: 1rem;
  background-color: colors.$gray-10;
 }
 
@@ -68,10 +68,6 @@
  }
 }
 
-.heading {
- margin-bottom: 1.5rem;
-}
-
 .toolbar {
  position: relative;
  display: flex;
@@ -150,7 +146,7 @@
 }
 
 .warningMessage {
- margin: 1.5rem 0;
+ margin: 1rem 0;
 }
 
 .spinner {

src/components/dashboard/dashboard.test.tsx

@@ -59,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();
@@ -142,7 +142,7 @@ 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();

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

@@ -17,20 +17,21 @@ 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';
 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;

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;
+}

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;

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');
+}

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:https://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;

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`,
- },
- ]);
 }