Merge branch 'main' into ft-O3-4180

.eslintrc

@@ -9,10 +9,11 @@
     "plugin:testing-library/react"
   ],
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "jest-dom", "react-hooks", "testing-library"],
+  "plugins": ["@typescript-eslint", "import", "jest-dom", "react-hooks", "testing-library"],
   "rules": {
+    "import/no-duplicates": "error",
     "react-hooks/rules-of-hooks": "error",
-    // Disabling these rules for now just to keep the diff small. I'll enable them one by one as we go.
+    // Disabling these rules for now just to keep the diff small. We'll enable them one by one as we go.
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/no-explicit-any": "off",

.gitignore

@@ -93,3 +93,6 @@ moduleName
 
 # vim
 .swp
+
+# vscode
+.vscode

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

@@ -50,21 +50,21 @@ 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(/01 — Feb — 2020/i)).toBeVisible();
+    await expect(patientBanner.getByText(/01-Feb-2020/i)).toBeVisible();
     await expect(patientBanner.getByText(/OpenMRS ID/i)).toBeVisible();
   });
 
-  await test.step('And when I click the `Show details` button in the patient banner', async () => {
+  await test.step('And when I click the `Show more` button in the patient banner', async () => {
     await page
       .getByLabel('patient banner')
-      .getByRole('button', { name: /show details/i })
+      .getByRole('button', { name: /show more/i })
       .click();
   });
 
   await test.step("Then I should see the patient's address and contact details displayed in the patient banner", async () => {
     const patientBanner = page.locator('header[aria-label="patient banner"]');
 
-    await expect(patientBanner.getByRole('button', { name: /hide details/i })).toBeVisible();
+    await expect(patientBanner.getByRole('button', { name: /show less/i })).toBeVisible();
     await expect(patientBanner.getByText(/^address$/i)).toBeVisible();
     await expect(patientBanner.getByText(/address line 1: Bom Jesus Street/i)).toBeVisible();
     await expect(patientBanner.getByText(/city: Recife/i)).toBeVisible();
@@ -127,7 +127,7 @@ test('Register an unknown patient', async ({ api, page }) => {
     await expect(patientBanner.getByText('Unknown Unknown')).toBeVisible();
     await expect(patientBanner.getByText(/female/i)).toBeVisible();
     await expect(patientBanner.getByText(/25 yrs/i)).toBeVisible();
-    await expect(patientBanner.getByText(/01 — Jan — 1999/i)).toBeVisible();
+    await expect(patientBanner.getByText(/01-Jan-1999/i)).toBeVisible();
     await expect(patientBanner.getByText(/OpenMRS ID/i)).toBeVisible();
   });
 });

package.json

@@ -53,6 +53,7 @@
     "dayjs": "^1.8.36",
     "dotenv": "^16.0.3",
     "eslint": "^8.55.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^6.2.2",

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

@@ -1,6 +1,3 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
 import {
   Button,
   ButtonSet,
@@ -20,9 +17,7 @@ import {
   TimePickerSelect,
   Toggle,
 } from '@carbon/react';
-import { Controller, useController, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
 import {
   ExtensionSlot,
   ResponsiveWrapper,
@@ -33,17 +28,14 @@ import {
   useLocations,
   usePatient,
   useSession,
+  type DefaultWorkspaceProps,
   type FetchResponse,
 } from '@openmrs/esm-framework';
-import {
-  checkAppointmentConflict,
-  saveAppointment,
-  saveRecurringAppointments,
-  useAppointmentService,
-  useMutateAppointments,
-} from './appointments-form.resource';
-import { useProviders } from '../hooks/useProviders';
-import type { Appointment, AppointmentPayload, RecurringPattern } from '../types';
+import dayjs from 'dayjs';
+import React, { useContext, useEffect, useState } from 'react';
+import { Controller, useController, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
 import { type ConfigObject } from '../config-schema';
 import {
   appointmentLocationTagName,
@@ -54,7 +46,16 @@ import {
   weekDays,
 } from '../constants';
 import SelectedDateContext from '../hooks/selectedDateContext';
+import { useProviders } from '../hooks/useProviders';
+import type { Appointment, AppointmentPayload, RecurringPattern } from '../types';
 import Workload from '../workload/workload.component';
+import {
+  checkAppointmentConflict,
+  saveAppointment,
+  saveRecurringAppointments,
+  useAppointmentService,
+  useMutateAppointments,
+} from './appointments-form.resource';
 import styles from './appointments-form.scss';
 
 const time12HourFormatRegexPattern = '^(1[0-2]|0?[1-9]):[0-5][0-9]$';
@@ -68,15 +69,15 @@ interface AppointmentsFormProps {
   recurringPattern?: RecurringPattern;
   patientUuid?: string;
   context: string;
-  closeWorkspace: () => void;
 }
 
-const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
+const AppointmentsForm: React.FC<AppointmentsFormProps & DefaultWorkspaceProps> = ({
   appointment,
   recurringPattern,
   patientUuid,
   context,
   closeWorkspace,
+  promptBeforeClosing,
 }) => {
   const { patient } = usePatient(patientUuid);
   const { mutateAppointments } = useMutateAppointments();
@@ -97,11 +98,10 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
 
   const [isRecurringAppointment, setIsRecurringAppointment] = useState(false);
   const [isAllDayAppointment, setIsAllDayAppointment] = useState(false);
-  const [isConflict, setIsConflict] = useState(false);
   const defaultRecurringPatternType = recurringPattern?.type || 'DAY';
   const defaultRecurringPatternPeriod = recurringPattern?.period || 1;
   const defaultRecurringPatternDaysOfWeek = recurringPattern?.daysOfWeek || [];
-
+  const [isSuccessful, setIsSuccessful] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // TODO can we clean this all up to be more consistent between using Date and dayjs?
@@ -219,7 +219,8 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
     setValue,
     watch,
     handleSubmit,
-    formState: { errors },
+    reset,
+    formState: { isDirty },
   } = useForm<AppointmentFormData>({
     mode: 'all',
     resolver: zodResolver(appointmentsFormSchema),
@@ -268,6 +269,16 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
     endDateRef(endDateElement);
   }, [startDateRef, endDateRef]);
 
+  useEffect(() => {
+    if (isSuccessful) {
+      reset();
+      promptBeforeClosing(() => false);
+      closeWorkspace();
+      return;
+    }
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty, promptBeforeClosing, isSuccessful]);
+
   const handleWorkloadDateChange = (date: Date) => {
     const appointmentDate = getValues('appointmentDateTime');
     setValue('appointmentDateTime', { ...appointmentDate, startDate: date });
@@ -351,7 +362,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
       ({ status }) => {
         if (status === 200) {
           setIsSubmitting(false);
-          closeWorkspace();
+          setIsSuccessful(true);
           mutateAppointments();
           showSnackbar({
             isLowContrast: true,

packages/esm-appointments-app/src/form/appointments-form.resource.ts

@@ -1,4 +1,6 @@
+import { useCallback } from 'react';
 import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
 import useSWR, { useSWRConfig } from 'swr';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import {
@@ -7,12 +9,10 @@ import {
   type AppointmentsFetchResponse,
   type RecurringAppointmentsPayload,
 } from '../types';
-import isToday from 'dayjs/plugin/isToday';
-import { useCallback } from 'react';
 dayjs.extend(isToday);
 
-const appointmentUrlMatcher = '/ws/rest/v1/appointment';
-const appointmentsSearchUrl = '/ws/rest/v1/appointments/search';
+const appointmentUrlMatcher = `${restBaseUrl}/appointment`;
+const appointmentsSearchUrl = `${restBaseUrl}/appointments/search`;
 
 export function useMutateAppointments() {
   const { mutate } = useSWRConfig();

packages/esm-bed-management-app/src/admin-card-link.component.tsx

@@ -5,13 +5,14 @@ import { ArrowRight } from '@carbon/react/icons';
 
 const BedManagementAdminCardLink: React.FC = () => {
   const { t } = useTranslation();
-  const header = t('manageBeds', 'Manage Beds');
+  const header = t('manageBeds', 'Manage beds');
+
   return (
     <Layer>
       <ClickableTile href={window.getOpenmrsSpaBase() + 'bed-management'} rel="noopener noreferrer">
         <div>
           <div className="heading">{header}</div>
-          <div className="content">{t('bedManagement', 'Bed Management')}</div>
+          <div className="content">{t('bedManagement', 'Bed management')}</div>
         </div>
         <div className="iconWrapper">
           <ArrowRight size={16} />