(feat) O3-3782: Use styleguide page header component

e2e/commands/patient-operations.ts

@@ -1,4 +1,4 @@
-import { APIRequestContext, expect } from '@playwright/test';
+import { type APIRequestContext, expect } from '@playwright/test';
 
 export interface Patient {
   uuid: string;

e2e/specs/register-new-patient.spec.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { test } from '../core';
 import { type PatientRegistrationFormValues, RegistrationAndEditPage } from '../pages';
-import { deletePatient, getPatient } from '../commands';
+import { deletePatient } from '../commands';
 
 let patientUuid: string;
 
@@ -50,7 +50,6 @@ test('Register a new patient', async ({ page }) => {
     await expect(patientBanner).toBeVisible();
     await expect(patientBanner.getByText('Johnny Donny Ronny')).toBeVisible();
     await expect(patientBanner.getByText(/male/i)).toBeVisible();
-    await expect(patientBanner.getByText(/4 yrs, 6 mths/i)).toBeVisible();
     await expect(patientBanner.getByText(/01 — Feb — 2020/i)).toBeVisible();
     await expect(patientBanner.getByText(/OpenMRS ID/i)).toBeVisible();
   });

packages/esm-appointments-app/src/appointments.component.tsx

@@ -30,7 +30,7 @@ const Appointments: React.FC = () => {
   return (
     <SelectedDateContext.Provider value={{ selectedDate, setSelectedDate }}>
       <AppointmentsHeader
-        title={t('home', 'Home')}
+        title={t('appointments', 'Appointments')}
         appointmentServiceType={appointmentServiceType}
         onChange={setAppointmentServiceType}
       />

packages/esm-appointments-app/src/appointments.test.tsx

@@ -3,13 +3,13 @@ import { render, screen } from '@testing-library/react';
 import Appointments from './appointments.component';
 
 describe('Appointments', () => {
-  it('should render correctly', () => {
+  it('renders the appointments dashboard', async () => {
     render(<Appointments />);
 
-    expect(screen.getByTitle(/patient queue illustration/i)).toBeInTheDocument();
-    expect(screen.getByText(/^appointments$/i)).toBeInTheDocument();
-    expect(screen.getByText(/home/i)).toBeInTheDocument();
-    expect(screen.getByPlaceholderText(/DD-MMM-YYYY/i)).toBeInTheDocument();
+    await screen.findByText(/^appointments$/i);
     expect(screen.getByRole('button', { name: /appointments calendar/i })).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/dd-mmm-yyyy/i)).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: /view/i })).toBeInTheDocument();
+    expect(screen.getByText(/appointment metrics/i)).toBeInTheDocument();
   });
 });

packages/esm-appointments-app/src/appointments/appointment-tabs.component.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tab, TabList, Tabs, TabPanel, TabPanels } from '@carbon/react';
-
-import { type ConfigObject } from '../config-schema';
 import { useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../config-schema';
 import ScheduledAppointments from './scheduled/scheduled-appointments.component';
 import UnscheduledAppointments from './unscheduled/unscheduled-appointments.component';
 import styles from './appointment-tabs.scss';

packages/esm-appointments-app/src/header/appointments-header.component.tsx

@@ -2,13 +2,11 @@ import React, { useContext } from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { DatePicker, DatePickerInput, Dropdown } from '@carbon/react';
-import { Location } from '@carbon/react/icons';
-import { useSession } from '@openmrs/esm-framework';
+import { PageHeader, PageHeaderContent, AppointmentsPictogram } from '@openmrs/esm-framework';
+import { omrsDateFormat } from '../constants';
 import { useAppointmentServices } from '../hooks/useAppointmentService';
-import AppointmentsIllustration from './appointments-illustration.component';
-import styles from './appointments-header.scss';
 import SelectedDateContext from '../hooks/selectedDateContext';
-import { omrsDateFormat } from '../constants';
+import styles from './appointments-header.scss';
 
 interface AppointmentHeaderProps {
   title: string;
@@ -18,61 +16,46 @@ interface AppointmentHeaderProps {
 
 const AppointmentsHeader: React.FC<AppointmentHeaderProps> = ({ title, appointmentServiceType, onChange }) => {
   const { t } = useTranslation();
-  const session = useSession();
   const { selectedDate, setSelectedDate } = useContext(SelectedDateContext);
-  const location = session?.sessionLocation?.display;
   const { serviceTypes } = useAppointmentServices();
 
   return (
-    <div className={styles.header} data-testid="appointments-header">
-      <div className={styles['left-justified-items']}>
-        <AppointmentsIllustration />
-        <div className={styles['page-labels']}>
-          <p>{t('appointments', 'Appointments')}</p>
-          <p className={styles['page-name']}>{title}</p>
-        </div>
-      </div>
-      <div className={styles['right-justified-items']}>
-        <div className={styles['date-and-location']}>
-          <Location size={16} />
-          <span className={styles.value}>{location}</span>
-          <span className={styles.middot}>&middot;</span>
-          <DatePicker
-            onChange={([date]) => setSelectedDate(dayjs(date).startOf('day').format(omrsDateFormat))}
-            value={dayjs(selectedDate).format('DD MMM YYYY')}
-            dateFormat="d-M-Y"
-            datePickerType="single">
-            <DatePickerInput
-              style={{ cursor: 'pointer', backgroundColor: 'transparent', border: 'none', maxWidth: '10rem' }}
-              id="appointment-date-picker"
-              placeholder="DD-MMM-YYYY"
-              labelText=""
-              type="text"
-            />
-          </DatePicker>
-        </div>
-        <div className={styles.dropdownContainer}>
-          {typeof onChange === 'function' && (
-            <Dropdown
-              className={styles.dropdown}
-              aria-label="Select service type"
-              id="serviceDropdown"
-              selectedItem={
-                serviceTypes.find((service) => service.uuid === appointmentServiceType) || { name: 'All', uuid: '' }
-              }
-              items={[{ name: 'All', uuid: '' }, ...serviceTypes]}
-              itemToString={(item) => (item ? item.name : '')}
-              label={t('selectServiceType', 'Select service type')}
-              type="inline"
-              size="sm"
-              direction="bottom"
-              titleText={t('view', 'View')}
-              onChange={({ selectedItem }) => onChange(selectedItem?.uuid)}
-            />
-          )}
-        </div>
+    <PageHeader className={styles.header} data-testid="appointments-header">
+      <PageHeaderContent illustration={<AppointmentsPictogram />} title={title} />
+      <div className={styles.rightJustifiedItems}>
+        <DatePicker
+          dateFormat="d-M-Y"
+          datePickerType="single"
+          onChange={([date]) => setSelectedDate(dayjs(date).startOf('day').format(omrsDateFormat))}
+          value={dayjs(selectedDate).format('DD MMM YYYY')}>
+          <DatePickerInput
+            style={{ cursor: 'pointer', backgroundColor: 'transparent', border: 'none', maxWidth: '10rem' }}
+            id="appointment-date-picker"
+            labelText=""
+            placeholder="DD-MMM-YYYY"
+            type="text"
+          />
+        </DatePicker>
+        {typeof onChange === 'function' && (
+          <Dropdown
+            aria-label={t('selectServiceType', 'Select service type')}
+            className={styles.dropdown}
+            direction="bottom"
+            id="serviceDropdown"
+            items={[{ name: 'All', uuid: '' }, ...serviceTypes]}
+            itemToString={(item) => (item ? item.name : '')}
+            label={t('selectServiceType', 'Select service type')}
+            onChange={({ selectedItem }) => onChange(selectedItem?.uuid)}
+            selectedItem={
+              serviceTypes.find((service) => service.uuid === appointmentServiceType) || { name: 'All', uuid: '' }
+            }
+            size="sm"
+            titleText={t('view', 'View')}
+            type="inline"
+          />
+        )}
       </div>
-    </div>
+    </PageHeader>
   );
 };
 

packages/esm-appointments-app/src/header/appointments-header.scss

@@ -4,71 +4,22 @@
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .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;
+  border: 1px solid $ui-03;
+  border-left: 0;
   display: flex;
   justify-content: space-between;
-}
-
-.left-justified-items {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.right-justified-items {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
-  margin: layout.$spacing-03;
-}
-
-.page-name {
-  @include type.type-style('heading-04');
-}
-
-.page-labels {
-  margin: layout.$spacing-05 0;
-
-  p:first-of-type {
-    margin-bottom: layout.$spacing-02;
-  }
-}
-
-.date-and-location {
-  display: flex;
-  justify-content: flex-end;
   align-items: center;
+  padding-right: layout.$spacing-03;
 }
 
-.dropdownContainer {
+.rightJustifiedItems {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-end;
   justify-content: flex-end;
-  margin-top: layout.$spacing-02;
-}
-
-.value {
-  margin-left: layout.$spacing-02;
-}
-
-.middot {
   margin: 0 layout.$spacing-03;
-}
-
-.view {
-  @include type.type-style('label-01');
-}
-
-.datePicker {
-  background-color: transparent;
-  width: layout.$spacing-13;
-  border: none;
-  & > input {
-    color: colors.$blue-10;
-  }
+  row-gap: layout.$spacing-01;
 }
 
 .dropdown {

packages/esm-appointments-app/translations/en.json

@@ -90,7 +90,6 @@
   "filterTable": "Filter table",
   "gender": "Gender",
   "highestServiceVolume": "Highest volume service: {{time}}",
-  "home": "Home",
   "identifier": "Identifier",
   "invalidNumber": "Number is not valid",
   "invalidTime": "Invalid time",