@openmrs/esm-service-queues-app 9.2.1-pre.7118 → 9.2.1-pre.7126

package/src/admin/queue-rooms/queue-room-form.workspace.tsx

@@ -19,11 +19,12 @@ import {
   TextInput,
 } from '@carbon/react';
 import {
-  type DefaultWorkspaceProps,
   getCoreTranslation,
   restBaseUrl,
   showSnackbar,
   useLayoutType,
+  Workspace2,
+  type Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import { saveQueueRoom } from './queue-room.resource';
 import { useQueueLocations } from '../../create-queue-entry/hooks/useQueueLocations';
@@ -54,7 +55,7 @@ const createQueueRoomSchema = (t: TFunction) =>
 
 type QueueRoomFormData = z.infer<ReturnType<typeof createQueueRoomSchema>>;
 
-const QueueRoomForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) => {
+const QueueRoomForm: React.FC<Workspace2DefinitionProps> = ({ closeWorkspace }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const {
@@ -99,91 +100,93 @@ const QueueRoomForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) => {
   };
 
   return (
-    <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
-      <Stack gap={4} className={styles.grid}>
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              control={control}
-              name="queueRoomName"
-              render={({ field }) => (
-                <TextInput
-                  {...field}
-                  id="queueRoomName"
-                  invalid={!!errors.queueRoomName}
-                  invalidText={errors.queueRoomName?.message}
-                  labelText={t('queueRoomName', 'Queue room name')}
-                />
-              )}
-            />
-          </Layer>
-        </Column>
+    <Workspace2 title={t('addNewQueueServiceRoom', 'Add new queue service room')}>
+      <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        <Stack gap={4} className={styles.grid}>
+          <Column>
+            <Layer className={styles.input}>
+              <Controller
+                control={control}
+                name="queueRoomName"
+                render={({ field }) => (
+                  <TextInput
+                    {...field}
+                    id="queueRoomName"
+                    invalid={!!errors.queueRoomName}
+                    invalidText={errors.queueRoomName?.message}
+                    labelText={t('queueRoomName', 'Queue room name')}
+                  />
+                )}
+              />
+            </Layer>
+          </Column>
 
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              name="queueLocation"
-              control={control}
-              render={({ field: { onChange, value, ...field } }) => (
-                <Select
-                  {...field}
-                  id="queueRoomLocation"
-                  invalid={!!errors.queueLocation}
-                  invalidText={errors.queueLocation?.message}
-                  labelText={t('queueLocation', 'Queue location')}
-                  onChange={(e) => onChange(e.target.value)}
-                  value={value || ''}>
-                  <SelectItem text={t('selectQueueRoomLocation', 'Select a queue room location')} value="" />
-                  {queueLocations?.map((location) => (
-                    <SelectItem key={location.id} text={location.name} value={location.id}>
-                      {location.name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              )}
-            />
-          </Layer>
-        </Column>
+          <Column>
+            <Layer className={styles.input}>
+              <Controller
+                name="queueLocation"
+                control={control}
+                render={({ field: { onChange, value, ...field } }) => (
+                  <Select
+                    {...field}
+                    id="queueRoomLocation"
+                    invalid={!!errors.queueLocation}
+                    invalidText={errors.queueLocation?.message}
+                    labelText={t('queueLocation', 'Queue location')}
+                    onChange={(e) => onChange(e.target.value)}
+                    value={value || ''}>
+                    <SelectItem text={t('selectQueueRoomLocation', 'Select a queue room location')} value="" />
+                    {queueLocations?.map((location) => (
+                      <SelectItem key={location.id} text={location.name} value={location.id}>
+                        {location.name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                )}
+              />
+            </Layer>
+          </Column>
 
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              name="queueRoomService"
-              control={control}
-              render={({ field: { onChange, value, ...field } }) => (
-                <Select
-                  {...field}
-                  id="queueRoomService"
-                  invalid={!!errors.queueRoomService}
-                  invalidText={errors.queueRoomService?.message}
-                  labelText={t('queueRoomService', 'Queue room service')}
-                  onChange={(e) => onChange(e.target.value)}
-                  value={value || ''}>
-                  <SelectItem text={t('selectQueueRoomService', 'Select a queue room service')} value="" />
-                  {queues?.map((service) => (
-                    <SelectItem key={service.uuid} text={service.display} value={service.uuid}>
-                      {service.display}
-                    </SelectItem>
-                  ))}
-                </Select>
-              )}
-            />
-          </Layer>
-        </Column>
-      </Stack>
-      <ButtonSet className={classNames(isTablet ? styles.tablet : styles.desktop)}>
-        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
-          {getCoreTranslation('cancel', 'Cancel')}
-        </Button>
-        <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
-          {isSubmitting ? (
-            <InlineLoading description={t('saving', 'Saving') + '...'} />
-          ) : (
-            <span>{getCoreTranslation('save', 'Save')}</span>
-          )}{' '}
-        </Button>
-      </ButtonSet>
-    </Form>
+          <Column>
+            <Layer className={styles.input}>
+              <Controller
+                name="queueRoomService"
+                control={control}
+                render={({ field: { onChange, value, ...field } }) => (
+                  <Select
+                    {...field}
+                    id="queueRoomService"
+                    invalid={!!errors.queueRoomService}
+                    invalidText={errors.queueRoomService?.message}
+                    labelText={t('queueRoomService', 'Queue room service')}
+                    onChange={(e) => onChange(e.target.value)}
+                    value={value || ''}>
+                    <SelectItem text={t('selectQueueRoomService', 'Select a queue room service')} value="" />
+                    {queues?.map((service) => (
+                      <SelectItem key={service.uuid} text={service.display} value={service.uuid}>
+                        {service.display}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                )}
+              />
+            </Layer>
+          </Column>
+        </Stack>
+        <ButtonSet className={classNames(isTablet ? styles.tablet : styles.desktop)}>
+          <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+            {getCoreTranslation('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
+            {isSubmitting ? (
+              <InlineLoading description={t('saving', 'Saving') + '...'} />
+            ) : (
+              <span>{getCoreTranslation('save', 'Save')}</span>
+            )}{' '}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
   );
 };
 

package/src/admin/queue-services/queue-service-form.workspace.tsx

@@ -17,7 +17,7 @@ import {
   TextInput,
 } from '@carbon/react';
 import { mutate } from 'swr';
-import { type DefaultWorkspaceProps, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import { restBaseUrl, showSnackbar, Workspace2, type Workspace2DefinitionProps } from '@openmrs/esm-framework';
 import { saveQueue, useServiceConcepts } from './queue-service.resource';
 import { useQueueLocations } from '../../create-queue-entry/hooks/useQueueLocations';
 import styles from './queue-service-form.scss';
@@ -46,7 +46,7 @@ const createQueueServiceSchema = (t: TFunction) =>
 
 type QueueServiceFormData = z.infer<ReturnType<typeof createQueueServiceSchema>>;
 
-const QueueServiceForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) => {
+const QueueServiceForm: React.FC<Workspace2DefinitionProps> = ({ closeWorkspace }) => {
   const { t } = useTranslation();
   const { queueConcepts } = useServiceConcepts();
   const { queueLocations } = useQueueLocations();
@@ -92,87 +92,89 @@ const QueueServiceForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) =
   };
 
   return (
-    <Form onSubmit={handleSubmit(createQueue)} className={styles.form}>
-      <Stack gap={5} className={styles.grid}>
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              name="queueName"
-              control={control}
-              render={({ field }) => (
-                <TextInput
-                  {...field}
-                  id="queueName"
-                  invalidText={errors.queueName?.message}
-                  invalid={!!errors.queueName}
-                  labelText={t('queueName', 'Queue name')}
-                />
-              )}
-            />
-          </Layer>
-        </Column>
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              name="queueServiceType"
-              control={control}
-              render={({ field }) => (
-                <Select
-                  {...field}
-                  labelText={t('selectServiceType', 'Select a service type')}
-                  id="queueServiceType"
-                  invalid={!!errors?.queueServiceType}
-                  invalidText={errors?.queueServiceType?.message}>
-                  <SelectItem text={t('selectServiceType', 'Select a service type')} value="" />
-                  {queueConcepts?.length > 0 &&
-                    queueConcepts.map((concept) => (
-                      <SelectItem key={concept.uuid} text={concept.display} value={concept.uuid}>
-                        {concept.display}
-                      </SelectItem>
-                    ))}
-                </Select>
-              )}
-            />
-          </Layer>
-        </Column>
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              name="userLocation"
-              control={control}
-              render={({ field }) => (
-                <Select
-                  {...field}
-                  id="location"
-                  invalid={!!errors?.userLocation}
-                  invalidText={errors?.userLocation?.message}
-                  labelText={t('selectALocation', 'Select a location')}>
-                  <SelectItem text={t('selectALocation', 'Select a location')} value="" />
-                  {queueLocations?.length > 0 &&
-                    queueLocations.map((location) => (
-                      <SelectItem key={location.id} text={location.name} value={location.id}>
-                        {location.name}
-                      </SelectItem>
-                    ))}
-                </Select>
-              )}
-            />
-          </Layer>
-        </Column>
-      </Stack>
-      <ButtonSet className={styles.buttonSet}>
-        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
-          {isSubmitting ? (
-            <InlineLoading description={t('saving', 'Saving') + '...'} />
-          ) : (
-            <span>{t('save', 'Save')}</span>
-          )}
-        </Button>
-      </ButtonSet>
-    </Form>
+    <Workspace2 title={t('addNewQueueService', 'Add New Queue Service')}>
+      <Form onSubmit={handleSubmit(createQueue)} className={styles.form}>
+        <Stack gap={5} className={styles.grid}>
+          <Column>
+            <Layer className={styles.input}>
+              <Controller
+                name="queueName"
+                control={control}
+                render={({ field }) => (
+                  <TextInput
+                    {...field}
+                    id="queueName"
+                    invalidText={errors.queueName?.message}
+                    invalid={!!errors.queueName}
+                    labelText={t('queueName', 'Queue name')}
+                  />
+                )}
+              />
+            </Layer>
+          </Column>
+          <Column>
+            <Layer className={styles.input}>
+              <Controller
+                name="queueServiceType"
+                control={control}
+                render={({ field }) => (
+                  <Select
+                    {...field}
+                    labelText={t('selectServiceType', 'Select a service type')}
+                    id="queueServiceType"
+                    invalid={!!errors?.queueServiceType}
+                    invalidText={errors?.queueServiceType?.message}>
+                    <SelectItem text={t('selectServiceType', 'Select a service type')} value="" />
+                    {queueConcepts?.length > 0 &&
+                      queueConcepts.map((concept) => (
+                        <SelectItem key={concept.uuid} text={concept.display} value={concept.uuid}>
+                          {concept.display}
+                        </SelectItem>
+                      ))}
+                  </Select>
+                )}
+              />
+            </Layer>
+          </Column>
+          <Column>
+            <Layer className={styles.input}>
+              <Controller
+                name="userLocation"
+                control={control}
+                render={({ field }) => (
+                  <Select
+                    {...field}
+                    id="location"
+                    invalid={!!errors?.userLocation}
+                    invalidText={errors?.userLocation?.message}
+                    labelText={t('selectALocation', 'Select a location')}>
+                    <SelectItem text={t('selectALocation', 'Select a location')} value="" />
+                    {queueLocations?.length > 0 &&
+                      queueLocations.map((location) => (
+                        <SelectItem key={location.id} text={location.name} value={location.id}>
+                          {location.name}
+                        </SelectItem>
+                      ))}
+                  </Select>
+                )}
+              />
+            </Layer>
+          </Column>
+        </Stack>
+        <ButtonSet className={styles.buttonSet}>
+          <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
+            {isSubmitting ? (
+              <InlineLoading description={t('saving', 'Saving') + '...'} />
+            ) : (
+              <span>{t('save', 'Save')}</span>
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
   );
 };
 

package/src/create-queue-entry/create-queue-entry.workspace.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, DataTableSkeleton } from '@carbon/react';
+import { Button, DataTableSkeleton, Stack } from '@carbon/react';
 import {
   ArrowLeftIcon,
   ErrorState,
@@ -12,28 +12,35 @@ import {
   PatientPhoto,
   usePatient,
   useVisit,
-  type DefaultWorkspaceProps,
+  Workspace2,
+  type Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import { AddPatientToQueueContextProvider } from './add-patient-to-queue-context';
 import ExistingVisitFormComponent from './existing-visit-form/existing-visit-form.component';
 import styles from './create-queue-entry.scss';
 
-interface PatientSearchProps extends DefaultWorkspaceProps {
+interface CreateQueueEntryWorkspaceProps {
   selectedPatientUuid: string;
   currentServiceQueueUuid?: string;
-  handleReturnToSearchList?: () => void;
 }
 
 /**
  *
  * This is the component that appears when clicking on a search result in the "Add patient to queue" workspace,
  */
-const CreateQueueEntryWorkspace: React.FC<PatientSearchProps> = ({
+const CreateQueueEntryWorkspace: React.FC<
+  Workspace2DefinitionProps<
+    CreateQueueEntryWorkspaceProps,
+    {
+      startVisitWorkspaceName: string;
+    },
+    {}
+  >
+> = ({
   closeWorkspace,
-  promptBeforeClosing,
-  selectedPatientUuid,
-  currentServiceQueueUuid,
-  handleReturnToSearchList,
+  workspaceProps: { selectedPatientUuid, currentServiceQueueUuid },
+  windowProps: { startVisitWorkspaceName },
+  launchChildWorkspace,
 }) => {
   const { t } = useTranslation();
   const { patient } = usePatient(selectedPatientUuid);
@@ -47,60 +54,64 @@ const CreateQueueEntryWorkspace: React.FC<PatientSearchProps> = ({
 
   const patientName = patient && getPatientName(patient);
 
-  return patient ? (
-    <div className={styles.patientSearchContainer}>
-      <AddPatientToQueueContextProvider value={{ currentServiceQueueUuid }}>
-        <div className={styles.patientBannerContainer}>
-          <div className={styles.patientBanner}>
-            <div className={styles.patientPhoto} role="img">
-              <PatientPhoto patientUuid={patient.id} patientName={patientName} />
+  if (!patient) {
+    return null;
+  }
+
+  return (
+    <Workspace2 title={t('addPatientToQueue', 'Add patient to queue')}>
+      <div className={styles.patientSearchContainer}>
+        <AddPatientToQueueContextProvider value={{ currentServiceQueueUuid }}>
+          <div className={styles.patientBannerContainer}>
+            <div className={styles.patientBanner}>
+              <div className={styles.patientPhoto} role="img">
+                <PatientPhoto patientUuid={patient.id} patientName={patientName} />
+              </div>
+              <PatientBannerPatientInfo patient={patient} />
+              <PatientBannerToggleContactDetailsButton
+                className={styles.toggleContactDetailsButton}
+                showContactDetails={showContactDetails}
+                toggleContactDetails={handleToggleContactDetails}
+              />
             </div>
-            <PatientBannerPatientInfo patient={patient} />
-            <PatientBannerToggleContactDetailsButton
-              className={styles.toggleContactDetailsButton}
-              showContactDetails={showContactDetails}
-              toggleContactDetails={handleToggleContactDetails}
-            />
+            {showContactDetails ? (
+              <PatientBannerContactDetails deceased={patient.deceasedBoolean} patientId={patient.id} />
+            ) : null}
+          </div>
+          <div className={styles.backButton}>
+            <Button
+              className={styles.backButton}
+              kind="ghost"
+              renderIcon={(props) => <ArrowLeftIcon size={24} {...props} />}
+              iconDescription={t('backToSearchResults', 'Back to search results')}
+              size="sm"
+              onClick={closeWorkspace}>
+              <span>{t('backToSearchResults', 'Back to search results')}</span>
+            </Button>
           </div>
-          {showContactDetails ? (
-            <PatientBannerContactDetails deceased={patient.deceasedBoolean} patientId={patient.id} />
-          ) : null}
-        </div>
-        <div className={styles.backButton}>
-          <Button
-            className={styles.backButton}
-            kind="ghost"
-            renderIcon={(props) => <ArrowLeftIcon size={24} {...props} />}
-            iconDescription={t('backToSearchResults', 'Back to search results')}
-            size="sm"
-            onClick={() => handleReturnToSearchList?.()}>
-            <span>{t('backToSearchResults', 'Back to search results')}</span>
-          </Button>
-        </div>
-        {isLoading ? (
-          <DataTableSkeleton role="progressbar" />
-        ) : error ? (
-          <ErrorState headerTitle={t('errorFetchingVisit', 'Error fetching patient visit')} error={error} />
-        ) : activeVisit ? (
-          <ExistingVisitFormComponent
-            closeWorkspace={closeWorkspace}
-            handleReturnToSearchList={handleReturnToSearchList}
-            visit={activeVisit}
-          />
-        ) : (
-          <ExtensionSlot
-            name="start-visit-workspace-form-slot"
-            state={{
-              patientUuid: selectedPatientUuid,
-              closeWorkspace,
-              promptBeforeClosing,
-              openedFrom: 'service-queues-add-patient',
-            }}
-          />
-        )}
-      </AddPatientToQueueContextProvider>
-    </div>
-  ) : null;
+          {isLoading ? (
+            <DataTableSkeleton role="progressbar" />
+          ) : error ? (
+            <ErrorState headerTitle={t('errorFetchingVisit', 'Error fetching patient visit')} error={error} />
+          ) : activeVisit ? (
+            <ExistingVisitFormComponent closeWorkspace={closeWorkspace} visit={activeVisit} />
+          ) : (
+            <Stack gap={4}>
+              <div>{t('visitRequiredToCreateQueueEntry', 'A visit is required to add patient to queue')}</div>
+              <ExtensionSlot
+                name="start-visit-button-slot2"
+                state={{
+                  patientUuid: patient.id,
+                  launchChildWorkspace,
+                  startVisitWorkspaceName,
+                }}
+              />
+            </Stack>
+          )}
+        </AddPatientToQueueContextProvider>
+      </div>
+    </Workspace2>
+  );
 };
 
 export default CreateQueueEntryWorkspace;

package/src/create-queue-entry/existing-visit-form/existing-visit-form.component.tsx

@@ -1,14 +1,13 @@
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ButtonSet, Form, Row } from '@carbon/react';
-import { ExtensionSlot, useLayoutType, type Visit } from '@openmrs/esm-framework';
+import { ExtensionSlot, useLayoutType, type Workspace2DefinitionProps, type Visit } from '@openmrs/esm-framework';
 import { useMutateQueueEntries } from '../../hooks/useQueueEntries';
 import QueueFields from '../queue-fields/queue-fields.component';
 import styles from './existing-visit-form.scss';
 
 interface ExistingVisitFormProps {
-  closeWorkspace: () => void;
-  handleReturnToSearchList?: () => void;
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
   visit: Visit;
 }
 
@@ -16,7 +15,7 @@ interface ExistingVisitFormProps {
  * This is the form that appears when clicking on a search result in the "Add patient to queue" workspace,
  * when the patient already has an active visit.
  */
-const ExistingVisitForm: React.FC<ExistingVisitFormProps> = ({ visit, closeWorkspace, handleReturnToSearchList }) => {
+const ExistingVisitForm: React.FC<ExistingVisitFormProps> = ({ visit, closeWorkspace }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -26,14 +25,6 @@ const ExistingVisitForm: React.FC<ExistingVisitFormProps> = ({ visit, closeWorks
     submitQueueEntry: (visit: Visit) => Promise<unknown>;
   } | null>(null);
 
-  const handleCloseWorkspace = useCallback(() => {
-    if (handleReturnToSearchList) {
-      handleReturnToSearchList();
-    } else {
-      closeWorkspace();
-    }
-  }, [closeWorkspace, handleReturnToSearchList]);
-
   const handleSubmit = useCallback(
     (event: React.FormEvent) => {
       event.preventDefault();
@@ -47,7 +38,7 @@ const ExistingVisitForm: React.FC<ExistingVisitFormProps> = ({ visit, closeWorks
       callback
         .submitQueueEntry(visit)
         .then(() => {
-          closeWorkspace();
+          closeWorkspace({ closeWindow: true, discardUnsavedChanges: true });
           mutateQueueEntries();
         })
         .finally(() => {
@@ -81,7 +72,10 @@ const ExistingVisitForm: React.FC<ExistingVisitFormProps> = ({ visit, closeWorks
           <QueueFields setOnSubmit={handleSetOnSubmit} />
         </div>
         <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
-          <Button className={styles.button} kind="secondary" onClick={handleCloseWorkspace}>
+          <Button
+            className={styles.button}
+            kind="secondary"
+            onClick={() => closeWorkspace({ discardUnsavedChanges: false })}>
             {t('discard', 'Discard')}
           </Button>
           <Button className={styles.button} disabled={isSubmitting || !callback} kind="primary" type="submit">

package/src/index.ts

@@ -121,7 +121,6 @@ export const transitionOverflowMenuItem = getAsyncLifecycle(
   },
 );
 
-// t('addNewQueueService', 'Add New Queue Service')
 export const addNewQueueServiceWorkspace = getAsyncLifecycle(
   () => import('./admin/queue-services/queue-service-form.workspace'),
   {
@@ -130,7 +129,6 @@ export const addNewQueueServiceWorkspace = getAsyncLifecycle(
   },
 );
 
-// t('addNewQueueServiceRoom', 'Add new queue service room')
 export const addNewQueueServiceRoomWorkspace = getAsyncLifecycle(
   () => import('./admin/queue-rooms/queue-room-form.workspace'),
   {