@openmrs/esm-patient-allergies-app 11.3.1-patch.9310 → 11.3.1-patch.9508

package/src/allergies/allergies-form/allergy-form.workspace.tsx

@@ -23,14 +23,8 @@ import {
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Controller, useForm, useWatch } from 'react-hook-form';
-import {
-  ExtensionSlot,
-  showSnackbar,
-  useConfig,
-  useLayoutType,
-  ResponsiveWrapper,
-  Workspace2,
-} from '@openmrs/esm-framework';
+import { ExtensionSlot, showSnackbar, useConfig, useLayoutType, ResponsiveWrapper } from '@openmrs/esm-framework';
+import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import {
   type Allergen,
   type NewAllergy,
@@ -43,7 +37,6 @@ import { useAllergies } from '../allergy-intolerance.resource';
 import { type AllergiesConfigObject } from '../../config-schema';
 import { ALLERGEN_TYPES, type Allergy } from '../../types';
 import styles from './allergy-form.scss';
-import { type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
 
 interface AllergyFormData {
   allergen: Allergen;
@@ -54,7 +47,7 @@ interface AllergyFormData {
   severityOfWorstReaction: string;
 }
 
-export interface AllergyFormWorkspaceProps {
+interface AllergyFormProps extends DefaultPatientWorkspaceProps {
   allergy?: Allergy;
   formContext: 'creating' | 'editing';
 }
@@ -118,11 +111,14 @@ const allergyFormSchema = (t: TFunction, otherConceptUuid: string) =>
       }
     });
 
-function AllergyFormWorkspace({
+function AllergyForm({
   closeWorkspace,
-  groupProps: { patient, patientUuid },
-  workspaceProps: { allergy, formContext },
-}: PatientWorkspace2DefinitionProps<AllergyFormWorkspaceProps, {}>) {
+  patient,
+  patientUuid,
+  allergy,
+  formContext,
+  promptBeforeClosing,
+}: AllergyFormProps) {
   const { allergens } = useAllergens();
   const { allergicReactions, isLoading: isLoadingReactions } = useAllergicReactions();
   const { concepts } = useConfig<AllergiesConfigObject>();
@@ -289,6 +285,10 @@ function AllergyFormWorkspace({
     }
   }, [allergy, formContext, getAllergyFormDefaultValues, inEditMode, isLoadingReactions, setValue]);
 
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [promptBeforeClosing, isDirty]);
+
   const selectedAllergen = useWatch({
     control,
     name: 'allergen',
@@ -345,7 +345,7 @@ function AllergyFormWorkspace({
 
       const handleSuccess = () => {
         mutate();
-        closeWorkspace({ discardUnsavedChanges: true });
+        closeWorkspace({ ignoreChanges: true });
         showSnackbar({
           isLowContrast: true,
           kind: 'success',
@@ -399,210 +399,200 @@ function AllergyFormWorkspace({
   );
 
   return (
-    <Workspace2
-      title={allergy ? t('editAllergy', 'Edit an allergy') : t('recordNewAllergy', 'Record a new allergy')}
-      hasUnsavedChanges={isDirty}
-    >
-      <Form className={styles.formContainer} onSubmit={handleSubmit(onSubmit)}>
-        {isTablet ? (
-          <Row className={styles.header}>
-            <ExtensionSlot className={styles.content} name="patient-details-header-slot" state={extensionSlotState} />
-          </Row>
-        ) : null}
-        <div className={styles.form}>
-          {isLoadingReactions ? (
-            <div className={styles.loaderContainer}>
-              <InlineLoading className={styles.loading} description={`${t('loading', 'Loading')} ...`} />
-            </div>
-          ) : (
-            <Stack gap={5} className={styles.formContent}>
-              {selectedAllergen?.uuid === otherConceptUuid && (
-                <InlineNotification
-                  hideCloseButton
-                  kind="warning"
-                  lowContrast
-                  style={{ minWidth: '100%' }}
-                  subtitle={t(
-                    'nonCodedAllergenWarningDescription',
-                    "Adding a custom allergen may impact system-wide allergy notifications. It's recommended to choose from the provided list for accurate alerts. Custom entries may not trigger notifications in all relevant contexts.",
+    <Form className={styles.formContainer} onSubmit={handleSubmit(onSubmit)}>
+      {isTablet ? (
+        <Row className={styles.header}>
+          <ExtensionSlot className={styles.content} name="patient-details-header-slot" state={extensionSlotState} />
+        </Row>
+      ) : null}
+      <div className={styles.form}>
+        {isLoadingReactions ? (
+          <div className={styles.loaderContainer}>
+            <InlineLoading className={styles.loading} description={`${t('loading', 'Loading')} ...`} />
+          </div>
+        ) : (
+          <Stack gap={5} className={styles.formContent}>
+            {selectedAllergen?.uuid === otherConceptUuid && (
+              <InlineNotification
+                hideCloseButton
+                kind="warning"
+                lowContrast
+                style={{ minWidth: '100%' }}
+                subtitle={t(
+                  'nonCodedAllergenWarningDescription',
+                  "Adding a custom allergen may impact system-wide allergy notifications. It's recommended to choose from the provided list for accurate alerts. Custom entries may not trigger notifications in all relevant contexts.",
+                )}
+                title={t('nonCodedAllergenWarningTitle', 'Warning: Custom Allergen Entry')}
+              />
+            )}
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  name="allergen"
+                  control={control}
+                  render={({ field: { onChange, value } }) => (
+                    <ComboBox
+                      id="allergen"
+                      invalid={!!errors.allergen}
+                      invalidText={errors.allergen?.message}
+                      itemToString={(item: unknown) => (item as Allergen)?.display}
+                      items={allergenItems as unknown as Array<Record<string, unknown>>}
+                      onChange={(props: { selectedItem?: unknown }) => {
+                        if (typeof props?.selectedItem !== 'undefined') {
+                          onChange(props.selectedItem as Allergen);
+                        }
+                      }}
+                      readOnly={inEditMode}
+                      placeholder={t('selectAllergen', 'Select the allergen')}
+                      selectedItem={value as unknown as Allergen}
+                      titleText={t('allergen', 'Allergen')}
+                    />
                   )}
-                  title={t('nonCodedAllergenWarningTitle', 'Warning: Custom Allergen Entry')}
                 />
-              )}
+              </FormGroup>
+            </ResponsiveWrapper>
+            {selectedAllergen?.uuid === otherConceptUuid && (
               <ResponsiveWrapper>
-                <FormGroup legendText="">
-                  <Controller
-                    name="allergen"
-                    control={control}
-                    render={({ field: { onChange, value } }) => (
-                      <ComboBox
-                        id="allergen"
-                        invalid={!!errors.allergen}
-                        invalidText={errors.allergen?.message}
-                        itemToString={(item: unknown) => (item as Allergen)?.display}
-                        items={allergenItems as unknown as Array<Record<string, unknown>>}
-                        onChange={(props: { selectedItem?: unknown }) => {
-                          if (typeof props?.selectedItem !== 'undefined') {
-                            onChange(props.selectedItem as Allergen);
-                          }
-                        }}
-                        readOnly={inEditMode}
-                        placeholder={t('selectAllergen', 'Select the allergen')}
-                        selectedItem={value as unknown as Allergen}
-                        titleText={t('allergen', 'Allergen')}
-                      />
-                    )}
-                  />
-                </FormGroup>
+                <Controller
+                  name="nonCodedAllergen"
+                  control={control}
+                  render={({ field: { onBlur, onChange, value } }) => (
+                    <TextInput
+                      id="nonCodedAllergen"
+                      invalid={!!errors.nonCodedAllergen}
+                      invalidText={errors.nonCodedAllergen?.message}
+                      labelText={t('otherNonCodedAllergen', 'Other non-coded allergen')}
+                      onBlur={onBlur}
+                      onChange={onChange}
+                      placeholder={t('typeAllergenName', 'Please type in the name of the allergen')}
+                      readOnly={inEditMode}
+                      value={value}
+                    />
+                  )}
+                />
               </ResponsiveWrapper>
-              {selectedAllergen?.uuid === otherConceptUuid && (
+            )}
+            <>
+              <div className={classNames({ [styles.checkboxContainer]: isTablet })}>
+                <FormGroup legendText="" data-testid="allergic-reactions-container">
+                  {isLoadingReactions ? (
+                    <>
+                      {Array.from({ length: 10 }).map((_, index) => (
+                        <CheckboxSkeleton key={`checkbox-skeleton-${index}`} />
+                      ))}
+                    </>
+                  ) : (
+                    <Controller
+                      name="allergicReactions"
+                      control={control}
+                      render={({ field: { onChange, value } }) => (
+                        <CheckboxGroup
+                          invalid={!!errors.allergicReactions}
+                          invalidText={errors.allergicReactions?.message}
+                          legendText={t('selectReactions', 'Select the reactions')}
+                        >
+                          {allergicReactionsItems.map(({ id, labelText }) => (
+                            <Checkbox
+                              checked={Array.isArray(value) && value.includes(id)}
+                              className={styles.checkbox}
+                              id={id}
+                              key={id}
+                              labelText={labelText}
+                              onChange={(_, { checked, id }) => {
+                                const currentValue = Array.isArray(value) ? value : [];
+                                onChange(checked ? [...currentValue, id] : currentValue.filter((item) => item !== id));
+                              }}
+                            />
+                          ))}
+                        </CheckboxGroup>
+                      )}
+                    />
+                  )}
+                </FormGroup>
+              </div>
+              {selectedAllergicReactions?.includes(otherConceptUuid) ? (
                 <ResponsiveWrapper>
                   <Controller
-                    name="nonCodedAllergen"
+                    name="nonCodedAllergicReaction"
                     control={control}
                     render={({ field: { onBlur, onChange, value } }) => (
                       <TextInput
-                        id="nonCodedAllergen"
-                        invalid={!!errors.nonCodedAllergen}
-                        invalidText={errors.nonCodedAllergen?.message}
-                        labelText={t('otherNonCodedAllergen', 'Other non-coded allergen')}
+                        id="nonCodedAllergicReaction"
+                        invalid={!!errors.nonCodedAllergicReaction}
+                        invalidText={errors.nonCodedAllergicReaction?.message}
+                        labelText={t('otherNonCodedAllergicReaction', 'Other non-coded allergic reaction')}
                         onBlur={onBlur}
                         onChange={onChange}
-                        placeholder={t('typeAllergenName', 'Please type in the name of the allergen')}
-                        readOnly={inEditMode}
+                        placeholder={t('typeAllergicReactionName', 'Please type in the name of the allergic reaction')}
                         value={value}
                       />
                     )}
                   />
                 </ResponsiveWrapper>
-              )}
-              <>
-                <div className={classNames({ [styles.checkboxContainer]: isTablet })}>
-                  <FormGroup legendText="" data-testid="allergic-reactions-container">
-                    {isLoadingReactions ? (
-                      <>
-                        {Array.from({ length: 10 }).map((_, index) => (
-                          <CheckboxSkeleton key={`checkbox-skeleton-${index}`} />
-                        ))}
-                      </>
-                    ) : (
-                      <Controller
-                        name="allergicReactions"
-                        control={control}
-                        render={({ field: { onChange, value } }) => (
-                          <CheckboxGroup
-                            invalid={!!errors.allergicReactions}
-                            invalidText={errors.allergicReactions?.message}
-                            legendText={t('selectReactions', 'Select the reactions')}
-                          >
-                            {allergicReactionsItems.map(({ id, labelText }) => (
-                              <Checkbox
-                                checked={Array.isArray(value) && value.includes(id)}
-                                className={styles.checkbox}
-                                id={id}
-                                key={id}
-                                labelText={labelText}
-                                onChange={(_, { checked, id }) => {
-                                  const currentValue = Array.isArray(value) ? value : [];
-                                  onChange(
-                                    checked ? [...currentValue, id] : currentValue.filter((item) => item !== id),
-                                  );
-                                }}
-                              />
-                            ))}
-                          </CheckboxGroup>
-                        )}
-                      />
-                    )}
-                  </FormGroup>
-                </div>
-                {selectedAllergicReactions?.includes(otherConceptUuid) ? (
-                  <ResponsiveWrapper>
-                    <Controller
-                      name="nonCodedAllergicReaction"
-                      control={control}
-                      render={({ field: { onBlur, onChange, value } }) => (
-                        <TextInput
-                          id="nonCodedAllergicReaction"
-                          invalid={!!errors.nonCodedAllergicReaction}
-                          invalidText={errors.nonCodedAllergicReaction?.message}
-                          labelText={t('otherNonCodedAllergicReaction', 'Other non-coded allergic reaction')}
-                          onBlur={onBlur}
-                          onChange={onChange}
-                          placeholder={t(
-                            'typeAllergicReactionName',
-                            'Please type in the name of the allergic reaction',
-                          )}
-                          value={value}
-                        />
-                      )}
-                    />
-                  </ResponsiveWrapper>
-                ) : null}
-              </>
-              <FormGroup legendText={t('severityOfWorstReaction', 'Severity of worst reaction')}>
-                <Controller
-                  name="severityOfWorstReaction"
-                  control={control}
-                  render={({ field: { onBlur, onChange, value } }) => (
-                    <RadioButtonGroup
-                      name="severity-of-worst-reaction"
-                      invalid={!!errors.severityOfWorstReaction}
-                      invalidText={errors.severityOfWorstReaction?.message}
-                      onBlur={onBlur}
-                      onChange={(event) => onChange(event.toString())}
-                      valueSelected={value}
-                    >
-                      {severityLevels.map(({ key, display, uuid }) => (
-                        <RadioButton id={key} key={key} labelText={display} value={uuid} />
-                      ))}
-                    </RadioButtonGroup>
-                  )}
-                />
-              </FormGroup>
-
-              <ResponsiveWrapper>
-                <Controller
-                  name="comment"
-                  control={control}
-                  render={({ field: { onBlur, onChange, value } }) => (
-                    <TextArea
-                      id="comments"
-                      labelText={t('comments', 'Comments')}
-                      onChange={onChange}
-                      placeholder={t('typeAdditionalComments', 'Type any additional comments here')}
-                      onBlur={onBlur}
-                      value={value}
-                      rows={4}
-                    />
-                  )}
-                />
-              </ResponsiveWrapper>
-            </Stack>
-          )}
-          <ButtonSet
-            className={classNames(styles.actionButtons, isTablet ? styles.tabletButtons : styles.desktopButtons)}
+              ) : null}
+            </>
+            <FormGroup legendText={t('severityOfWorstReaction', 'Severity of worst reaction')}>
+              <Controller
+                name="severityOfWorstReaction"
+                control={control}
+                render={({ field: { onBlur, onChange, value } }) => (
+                  <RadioButtonGroup
+                    name="severity-of-worst-reaction"
+                    invalid={!!errors.severityOfWorstReaction}
+                    invalidText={errors.severityOfWorstReaction?.message}
+                    onBlur={onBlur}
+                    onChange={(event) => onChange(event.toString())}
+                    valueSelected={value}
+                  >
+                    {severityLevels.map(({ key, display, uuid }) => (
+                      <RadioButton id={key} key={key} labelText={display} value={uuid} />
+                    ))}
+                  </RadioButtonGroup>
+                )}
+              />
+            </FormGroup>
+
+            <ResponsiveWrapper>
+              <Controller
+                name="comment"
+                control={control}
+                render={({ field: { onBlur, onChange, value } }) => (
+                  <TextArea
+                    id="comments"
+                    labelText={t('comments', 'Comments')}
+                    onChange={onChange}
+                    placeholder={t('typeAdditionalComments', 'Type any additional comments here')}
+                    onBlur={onBlur}
+                    value={value}
+                    rows={4}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+          </Stack>
+        )}
+        <ButtonSet
+          className={classNames(styles.actionButtons, isTablet ? styles.tabletButtons : styles.desktopButtons)}
+        >
+          <Button className={styles.button} onClick={() => closeWorkspace()} kind="secondary">
+            {t('discard', 'Discard')}
+          </Button>
+          <Button
+            className={styles.button}
+            disabled={isSubmitting || (inEditMode && isLoadingReactions)}
+            kind="primary"
+            type="submit"
           >
-            <Button className={styles.button} onClick={() => closeWorkspace()} kind="secondary">
-              {t('discard', 'Discard')}
-            </Button>
-            <Button
-              className={styles.button}
-              disabled={isSubmitting || (inEditMode && isLoadingReactions)}
-              kind="primary"
-              type="submit"
-            >
-              {isSubmitting ? (
-                <InlineLoading description={t('saving', 'Saving') + '...'} />
-              ) : (
-                <span>{t('saveAndClose', 'Save and close')}</span>
-              )}
-            </Button>
-          </ButtonSet>
-        </div>
-      </Form>
-    </Workspace2>
+            {isSubmitting ? (
+              <InlineLoading description={t('saving', 'Saving') + '...'} />
+            ) : (
+              <span>{t('saveAndClose', 'Save and close')}</span>
+            )}
+          </Button>
+        </ButtonSet>
+      </div>
+    </Form>
   );
 }
 
-export default AllergyFormWorkspace;
+export default AllergyForm;

package/src/allergies/allergies-overview.component.tsx

@@ -13,7 +13,7 @@ import {
   TableRow,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { AddIcon, launchWorkspace2, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { AddIcon, launchWorkspace, useLayoutType, usePagination } from '@openmrs/esm-framework';
 import { CardHeader, EmptyState, ErrorState, PatientChartPagination } from '@openmrs/esm-patient-common-lib';
 import { allergiesCount, patientAllergiesFormWorkspace } from '../constants';
 import { useAllergies } from './allergy-intolerance.resource';
@@ -57,7 +57,7 @@ const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient }) => {
     }));
   }, [paginatedAllergies]);
 
-  const launchAllergiesForm = useCallback(() => launchWorkspace2(patientAllergiesFormWorkspace), []);
+  const launchAllergiesForm = useCallback(() => launchWorkspace(patientAllergiesFormWorkspace), []);
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />;

package/src/index.ts

@@ -51,6 +51,7 @@ export const allergiesDashboardLink = getSyncLifecycle(
   options,
 );
 
+// t('recordNewAllergy', "Record a new allergy")
 export const allergyFormWorkspace = getAsyncLifecycle(
   () => import('./allergies/allergies-form/allergy-form.workspace'),
   options,

package/src/routes.json

@@ -44,17 +44,12 @@
       "component": "deleteAllergyModal"
     }
   ],
-  "workspaces2": [
+  "workspaces": [
     {
       "name": "patient-allergy-form-workspace",
+      "title": "recordNewAllergy",
       "component": "allergyFormWorkspace",
-      "window": "patient-allergy-form-window"
-    }
-  ],
-  "workspaceWindows2": [
-    {
-      "name": "patient-allergy-form-window",
-      "group": "patient-chart"
+      "type": "form"
     }
   ]
 }

package/translations/cs.json

@@ -0,0 +1,52 @@
+{
+  "add": "Add",
+  "allergen": "Allergen",
+  "allergenRequired": "Allergen is required",
+  "allergies": "Allergies",
+  "Allergies": "Allergies",
+  "allergyDeleted": "Allergy deleted",
+  "allergyIntolerances": "allergy intolerances",
+  "allergyNowVisible": "It is now visible on the Allergies page",
+  "allergySaved": "Allergy saved",
+  "allergySaveError": "Error saving allergy",
+  "allergyUpdated": "Allergy updated",
+  "atLeastOneReactionRequired": "At least one reaction is required",
+  "cancel": "Cancel",
+  "comments": "Comments",
+  "delete": "Delete",
+  "deleteModalConfirmationText": "Are you sure you want to delete this allergy?",
+  "deletePatientAllergy": "Delete allergy",
+  "deleting": "Deleting",
+  "discard": "Discard",
+  "edit": "Edit",
+  "editAllergy": "Edit an Allergy",
+  "editOrDeleteAllergy": "Edit or delete allergy",
+  "errorDeletingAllergy": "Error deleting allergy",
+  "loading": "Loading",
+  "mild": "Mild",
+  "moderate": "Moderate",
+  "name": "Name",
+  "nonCodedAllergenRequired": "Please specify the non-coded allergen",
+  "nonCodedAllergenWarningDescription": "Adding a custom allergen may impact system-wide allergy notifications. It's recommended to choose from the provided list for accurate alerts. Custom entries may not trigger notifications in all relevant contexts.",
+  "nonCodedAllergenWarningTitle": "Warning: Custom Allergen Entry",
+  "nonCodedAllergicReactionRequired": "Please specify the non-coded allergic reaction",
+  "other": "Other",
+  "otherNonCodedAllergen": "Other non-coded allergen",
+  "otherNonCodedAllergicReaction": "Other non-coded allergic reaction",
+  "reaction": "Reaction",
+  "reactions": "Reactions",
+  "recordNewAllergy": "Record a new allergy",
+  "saveAndClose": "Save and close",
+  "saving": "Saving",
+  "seeAll": "See all",
+  "selectAllergen": "Select the allergen",
+  "selectReactions": "Select the reactions",
+  "severe": "Severe",
+  "severityandReaction": "Severity",
+  "severityOfWorstReaction": "Severity of worst reaction",
+  "severityRequired": "Severity is required",
+  "typeAdditionalComments": "Type any additional comments here",
+  "typeAllergenName": "Please type in the name of the allergen",
+  "typeAllergicReactionName": "Please type in the name of the allergic reaction",
+  "unknown": "Unknown"
+}

package/translations/sq.json

@@ -0,0 +1,52 @@
+{
+  "add": "Add",
+  "allergen": "Allergen",
+  "allergenRequired": "Allergen is required",
+  "allergies": "Allergies",
+  "Allergies": "Allergies",
+  "allergyDeleted": "Allergy deleted",
+  "allergyIntolerances": "allergy intolerances",
+  "allergyNowVisible": "It is now visible on the Allergies page",
+  "allergySaved": "Allergy saved",
+  "allergySaveError": "Error saving allergy",
+  "allergyUpdated": "Allergy updated",
+  "atLeastOneReactionRequired": "At least one reaction is required",
+  "cancel": "Cancel",
+  "comments": "Comments",
+  "delete": "Delete",
+  "deleteModalConfirmationText": "Are you sure you want to delete this allergy?",
+  "deletePatientAllergy": "Delete allergy",
+  "deleting": "Deleting",
+  "discard": "Discard",
+  "edit": "Edit",
+  "editAllergy": "Edit an Allergy",
+  "editOrDeleteAllergy": "Edit or delete allergy",
+  "errorDeletingAllergy": "Error deleting allergy",
+  "loading": "Loading",
+  "mild": "Mild",
+  "moderate": "Moderate",
+  "name": "Name",
+  "nonCodedAllergenRequired": "Please specify the non-coded allergen",
+  "nonCodedAllergenWarningDescription": "Adding a custom allergen may impact system-wide allergy notifications. It's recommended to choose from the provided list for accurate alerts. Custom entries may not trigger notifications in all relevant contexts.",
+  "nonCodedAllergenWarningTitle": "Warning: Custom Allergen Entry",
+  "nonCodedAllergicReactionRequired": "Please specify the non-coded allergic reaction",
+  "other": "Other",
+  "otherNonCodedAllergen": "Other non-coded allergen",
+  "otherNonCodedAllergicReaction": "Other non-coded allergic reaction",
+  "reaction": "Reaction",
+  "reactions": "Reactions",
+  "recordNewAllergy": "Record a new allergy",
+  "saveAndClose": "Save and close",
+  "saving": "Saving",
+  "seeAll": "See all",
+  "selectAllergen": "Select the allergen",
+  "selectReactions": "Select the reactions",
+  "severe": "Severe",
+  "severityandReaction": "Severity",
+  "severityOfWorstReaction": "Severity of worst reaction",
+  "severityRequired": "Severity is required",
+  "typeAdditionalComments": "Type any additional comments here",
+  "typeAllergenName": "Please type in the name of the allergen",
+  "typeAllergicReactionName": "Please type in the name of the allergic reaction",
+  "unknown": "Unknown"
+}