@openmrs/esm-dispensing-app 1.5.1-pre.367 → 1.6.0

package/dist/routes.json

@@ -1 +1 @@
-{"backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"pages":[{"component":"dispensing","route":"dispensing","online":true,"offline":true}],"extensions":[{"name":"dispensing-link","slot":"app-menu-slot","component":"dispensingLink","online":true,"offline":true},{"name":"dispensing-dashboard","slot":"dispensing-dashboard-slot","component":"dispensingDashboard","online":true,"offline":true},{"name":"dispensing-dashboard-link","component":"dispensingDashboardLink","meta":{"name":"dispensing","slot":"dispensing-dashboard-slot","title":"Dispensing"}},{"name":"dispense-action-button","slot":"prescription-action-button-slot","component":"dispenseActionButton"},{"name":"pause-action-button","slot":"prescription-action-button-slot","component":"pauseActionButton"},{"name":"close-action-button","slot":"prescription-action-button-slot","component":"closeActionButton"}],"version":"1.5.1-pre.367"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"pages":[{"component":"dispensing","route":"dispensing","online":true,"offline":true}],"extensions":[{"name":"dispensing-link","slot":"app-menu-slot","component":"dispensingLink","online":true,"offline":true},{"name":"dispensing-dashboard","slot":"dispensing-dashboard-slot","component":"dispensingDashboard","online":true,"offline":true},{"name":"dispensing-dashboard-link","component":"dispensingDashboardLink","meta":{"name":"dispensing","slot":"dispensing-dashboard-slot","title":"Dispensing"}},{"name":"dispense-action-button","slot":"prescription-action-button-slot","component":"dispenseActionButton"},{"name":"pause-action-button","slot":"prescription-action-button-slot","component":"pauseActionButton"},{"name":"close-action-button","slot":"prescription-action-button-slot","component":"closeActionButton"}],"workspaces":[{"name":"close-dispense-workspace","component":"closeDispenseWorkspace","type":"dispense","title":"Close prescription"},{"name":"pause-dispense-workspace","component":"pauseDispenseWorkspace","type":"dispense","title":"Pause prescription"},{"name":"dispense-workspace","component":"dispenseWorkspace","type":"dispense","title":"Dispense prescription","width":"wider"}],"modals":[{"name":"prescription-print-preview-modal","component":"printPrescriptionPreviewModal"}],"version":"1.6.0"}

package/i18next-parser.config.js

@@ -0,0 +1,89 @@
+module.exports = {
+  contextSeparator: '_',
+  // Key separator used in your translation keys
+
+  createOldCatalogs: false,
+  // Save the \_old files
+
+  defaultNamespace: 'translations',
+  // Default namespace used in your i18next config
+
+  defaultValue: '',
+  // Default value to give to empty keys
+  // You may also specify a function accepting the locale, namespace, and key as arguments
+
+  indentation: 2,
+  // Indentation of the catalog files
+
+  keepRemoved: false,
+  // Keep keys from the catalog that are no longer in code
+
+  keySeparator: '.',
+  // Key separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  // see below for more details
+  lexers: {
+    hbs: ['HandlebarsLexer'],
+    handlebars: ['HandlebarsLexer'],
+
+    htm: ['HTMLLexer'],
+    html: ['HTMLLexer'],
+
+    mjs: ['JavascriptLexer'],
+    js: ['JavascriptLexer'], // if you're writing jsx inside .js files, change this to JsxLexer
+    ts: ['JavascriptLexer'],
+    jsx: ['JsxLexer'],
+    tsx: ['JsxLexer'],
+
+    default: ['JavascriptLexer'],
+  },
+
+  lineEnding: 'auto',
+  // Control the line ending. See options at https://github.com/ryanve/eol
+
+  locales: ['en'],
+  // An array of the locales in your applications
+
+  namespaceSeparator: ':',
+  // Namespace separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  output: '$NAMESPACE/$LOCALE.json',
+  // Supports $LOCALE and $NAMESPACE injection
+  // Supports JSON (.json) and YAML (.yml) file formats
+  // Where to write the locale files relative to process.cwd()
+
+  pluralSeparator: '_',
+  // Plural separator used in your translation keys
+  // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
+
+  input: undefined,
+  // An array of globs that describe where to look for source files
+  // relative to the location of the configuration file
+
+  sort: true,
+  // Whether or not to sort the catalog
+
+  useKeysAsDefaultValue: false,
+  // Whether to use the keys as the default value; ex. "Hello": "Hello", "World": "World"
+  // This option takes precedence over the `defaultValue` and `skipDefaultValues` options
+  // You may also specify a function accepting the locale and namespace as arguments
+
+  verbose: false,
+  // Display info about the parsing including some stats
+
+  failOnWarnings: false,
+  // Exit with an exit code of 1 on warnings
+
+  customValueTemplate: null,
+  // If you wish to customize the value output the value as an object, you can set your own format.
+  // ${defaultValue} is the default value you set in your translation function.
+  // Any other custom property will be automatically extracted.
+  //
+  // Example:
+  // {
+  //   message: "${defaultValue}",
+  //   description: "${maxLength}", // t('my-key', {maxLength: 150})
+  // }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-dispensing-app",
-  "version": "1.5.1-pre.367",
+  "version": "1.6.0",
   "license": "MPL-2.0",
   "description": "Medication dispensing application",
   "browser": "dist/openmrs-esm-dispensing-app.js",
@@ -16,6 +16,7 @@
     "test:watch": "jest --config jest.config.js --watch",
     "typescript": "tsc",
     "verify": "concurrently 'yarn:lint' 'yarn:test' 'yarn:typescript'",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ./i18next-parser.config.js",
     "coverage": "yarn test --coverage",
     "postinstall": "husky install"
   },
@@ -43,7 +44,8 @@
   "dependencies": {
     "@carbon/react": "1.12.0",
     "classnames": "^2.5.1",
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.17.21",
+    "react-to-print": "^2.14.13"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "*",
@@ -77,6 +79,8 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^6.0.0",
+    "i18next": "^21.10.0",
+    "i18next-parser": "^9.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^28.1.3",
     "jest-cli": "^28.1.3",
@@ -97,6 +101,5 @@
     "*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
     "*.{css,scss,ts,tsx}": "prettier --write --list-different"
   },
-  "packageManager": "yarn@4.4.0",
-  "stableVersion": "1.5.0"
+  "packageManager": "yarn@4.4.0"
 }

package/src/components/prescription-actions/close-action-button.component.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import { Button } from '@carbon/react';
-import CloseDispenseForm from '../../forms/close-dispense-form.component';
-import { launchOverlay } from '../../hooks/useOverlay';
 import { useTranslation } from 'react-i18next';
 import { initiateMedicationDispenseBody } from '../../medication-dispense/medication-dispense.resource';
 import { type Provider, type MedicationRequestBundle } from '../../types';
-import { type Session } from '@openmrs/esm-framework';
+import { launchWorkspace, type Session } from '@openmrs/esm-framework';
 
 type CloseActionButtonProps = {
   patientUuid: string;
@@ -25,28 +23,23 @@ const CloseActionButton: React.FC<CloseActionButtonProps> = ({
   closeable,
 }) => {
   const { t } = useTranslation();
+
+  const closeDispenseFormProps = {
+    patientUuid,
+    encounterUuid,
+    medicationDispense: initiateMedicationDispenseBody(medicationRequestBundle.request, session, providers, false),
+    mode: 'enter',
+  };
+
+  const handleLaunchWorkspace = () => {
+    launchWorkspace('close-dispense-workspace', closeDispenseFormProps);
+  };
+
   if (!closeable) {
     return null;
   }
   return (
-    <Button
-      kind="danger"
-      onClick={() =>
-        launchOverlay(
-          t('closePrescription', 'Close prescription'),
-          <CloseDispenseForm
-            patientUuid={patientUuid}
-            encounterUuid={encounterUuid}
-            medicationDispense={initiateMedicationDispenseBody(
-              medicationRequestBundle.request,
-              session,
-              providers,
-              false,
-            )}
-            mode="enter"
-          />,
-        )
-      }>
+    <Button kind="danger" onClick={handleLaunchWorkspace}>
       {t('close', 'Close')}
     </Button>
   );

package/src/components/prescription-actions/dispense-action-button.component.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import { Button } from '@carbon/react';
-import { launchOverlay } from '../../hooks/useOverlay';
 import { useTranslation } from 'react-i18next';
 import { initiateMedicationDispenseBody } from '../../medication-dispense/medication-dispense.resource';
 import { type Provider, type MedicationRequestBundle } from '../../types';
-import { type Session } from '@openmrs/esm-framework';
-import DispenseForm from '../../forms/dispense-form.component';
+import { launchWorkspace, type Session } from '@openmrs/esm-framework';
 
 type DispenseActionButtonProps = {
   patientUuid: string;
@@ -27,30 +25,25 @@ const DispenseActionButton: React.FC<DispenseActionButtonProps> = ({
   quantityRemaining,
 }) => {
   const { t } = useTranslation();
+  const dispenseWorkspaceProps = {
+    patientUuid,
+    encounterUuid,
+    medicationDispense: initiateMedicationDispenseBody(medicationRequestBundle.request, session, providers, true),
+    medicationRequestBundle,
+    quantityRemaining,
+    mode: 'enter',
+  };
+
+  const handleLaunchWorkspace = () => {
+    launchWorkspace('dispense-workspace', dispenseWorkspaceProps);
+  };
+
   if (!dispensable) {
     return null;
   }
+
   return (
-    <Button
-      kind="primary"
-      onClick={() =>
-        launchOverlay(
-          t('dispensePrescription', 'Dispense prescription'),
-          <DispenseForm
-            patientUuid={patientUuid}
-            encounterUuid={encounterUuid}
-            medicationDispense={initiateMedicationDispenseBody(
-              medicationRequestBundle.request,
-              session,
-              providers,
-              true,
-            )}
-            medicationRequestBundle={medicationRequestBundle}
-            quantityRemaining={quantityRemaining}
-            mode="enter"
-          />,
-        )
-      }>
+    <Button kind="primary" onClick={handleLaunchWorkspace}>
       {t('dispense', 'Dispense')}
     </Button>
   );

package/src/components/prescription-actions/pause-action-button.component.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import { Button } from '@carbon/react';
-import { launchOverlay } from '../../hooks/useOverlay';
 import { useTranslation } from 'react-i18next';
 import { initiateMedicationDispenseBody } from '../../medication-dispense/medication-dispense.resource';
 import { type Provider, type MedicationRequestBundle } from '../../types';
-import { type Session } from '@openmrs/esm-framework';
-import PauseDispenseForm from '../../forms/pause-dispense-form.component';
+import { launchWorkspace, type Session } from '@openmrs/esm-framework';
 
 type PauseActionButtonProps = {
   patientUuid: string;
@@ -25,28 +23,22 @@ const PauseActionButton: React.FC<PauseActionButtonProps> = ({
   pauseable,
 }) => {
   const { t } = useTranslation();
+  const pauseWorkspaceProps = {
+    patientUuid,
+    encounterUuid,
+    medicationDispense: initiateMedicationDispenseBody(medicationRequestBundle.request, session, providers, false),
+    mode: 'enter',
+  };
+
+  const handleLaunchWorkspace = () => {
+    launchWorkspace('pause-dispense-workspace', pauseWorkspaceProps);
+  };
+
   if (!pauseable) {
     return null;
   }
   return (
-    <Button
-      kind="secondary"
-      onClick={() =>
-        launchOverlay(
-          t('pausePrescription', 'Pause prescription'),
-          <PauseDispenseForm
-            patientUuid={patientUuid}
-            encounterUuid={encounterUuid}
-            medicationDispense={initiateMedicationDispenseBody(
-              medicationRequestBundle.request,
-              session,
-              providers,
-              false,
-            )}
-            mode="enter"
-          />,
-        )
-      }>
+    <Button kind="secondary" onClick={handleLaunchWorkspace}>
       {t('pause', 'Pause')}
     </Button>
   );

package/src/config-schema.ts

@@ -1,25 +1,5 @@
 import { Type } from '@openmrs/esm-framework';
 
-/**
- * This is the config schema. It expects a configuration object which
- * looks like this:
- *
- * ```json
- * { "casualGreeting": true, "whoToGreet": ["Mom"] }
- * ```
- *
- * In OpenMRS Microfrontends, all config parameters are optional. Thus,
- * all elements must have a reasonable default. A good default is one
- * that works well with the reference application.
- *
- * To understand the schema below, please read the configuration system
- * documentation:
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config
- * Note especially the section "How do I make my module configurable?"
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=im-developing-an-esm-module-how-do-i-make-it-configurable
- * and the Schema Reference
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=schema-reference
- */
 export const configSchema = {
   appName: {
     _type: Type.String,
@@ -99,7 +79,7 @@ export const configSchema = {
         _type: Type.UUID,
         _description:
           "UUID for the Value Set of valid answers to the 'Reason for Pause' question. Defaults to CIEL value set: https://app.openconceptlab.org/#/orgs/CIEL/sources/CIEL/concepts/168099/",
-        _default: '2dd3e5c0-3d3f-4f3d-9860-19b3f9ab26ff',
+        _default: '2462a9d7-61fb-4bf5-9359-aedecb8d03cb',
       },
     },
     reasonForClose: {
@@ -107,7 +87,7 @@ export const configSchema = {
         _type: Type.UUID,
         _description:
           "UUID for the Value Set of valid answers to the 'Reason for Close' question. Defaults to CIEL value set: https://app.openconceptlab.org/#/orgs/CIEL/sources/CIEL/concepts/168099/",
-        _default: 'bd6c1fc2-7cfc-4562-94a0-e4765e5e977e',
+        _default: '2462a9d7-61fb-4bf5-9359-aedecb8d03cb',
       },
     },
     substitutionReason: {
@@ -115,7 +95,7 @@ export const configSchema = {
         _type: Type.UUID,
         _description:
           "UUID for the Value Set of valid answers to the 'Reason for Substitution' question. Defaults to CIEL value set: https://app.openconceptlab.org/#/orgs/CIEL/sources/CIEL/concepts/167862/",
-        _default: 'de8671b8-ed2e-4f7e-a9f8-dcd00878f2eb',
+        _default: '2de6e1be-f2dd-4ba0-9516-8a611aa2af9b',
       },
     },
     substitutionType: {

package/src/dashboard/dispensing-dashboard.component.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { InlineNotification } from '@carbon/react';
-import Overlay from '../forms/overlay/overlay.component';
 import { PharmacyHeader } from '../pharmacy-header/pharmacy-header.component';
 import PrescriptionTabLists from '../prescriptions/prescription-tab-lists.component';
-import { useConfig } from '@openmrs/esm-framework';
+import { useConfig, WorkspaceContainer } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { type PharmacyConfig } from '../config-schema';
 
@@ -28,7 +27,7 @@ export default function DispensingDashboard() {
         <PharmacyHeader />
         {/* <DispensingTiles /> */}
         <PrescriptionTabLists />
-        <Overlay />
+        <WorkspaceContainer key="dispensing" contextKey="dispensing" />
       </div>
     );
   }

package/src/dispensing-tiles/dispensing-tiles.component.tsx

@@ -7,7 +7,7 @@ import styles from './dispensing-tiles.scss';
 
 const DispensingTiles: React.FC = () => {
   const { t } = useTranslation();
-  const { metrics, isError, isLoading } = useMetrics();
+  const { metrics, error, isLoading } = useMetrics();
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;

package/src/dispensing-tiles/dispensing-tiles.resource.tsx

@@ -14,7 +14,7 @@ export function useMetrics() {
 
   return {
     metrics: metrics,
-    isError: error,
+    error,
     isLoading: !data && !error,
   };
 }

package/src/dispensing.test.tsx

@@ -1,25 +1,3 @@
-/**
- * This is the root test for this page. It simply checks that the page
- * renders. If the components of your page are highly interdependent,
- * (e.g., if the `Hello` component had state that communicated
- * information between `Greeter` and `PatientGetter`) then you might
- * want to do most of your testing here. If those components are
- * instead quite independent (as is the case in this example), then
- * it would make more sense to test those components independently.
- *
- * The key thing to remember, always, is: write tests that behave like
- * users. They should *look* for elements by their visual
- * characteristics, *interact* with them, and (mostly) *assert* based
- * on things that would be visually apparent to a user.
- *
- * To learn more about how we do testing, see the following resources:
- *   https://kentcdodds.com/blog/how-to-know-what-to-test
- *   https://kentcdodds.com/blog/testing-implementation-details
- *   https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
- *
- * Kent C. Dodds is the inventor of `@testing-library`:
- *   https://testing-library.com/docs/guiding-principles
- */
 import React from 'react';
 import { render } from '@testing-library/react';
 import Dispensing from './dispensing.component';

package/src/forms/{close-dispense-form.component.tsx → close-dispense-form.workspace.tsx}

@@ -1,34 +1,36 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Button, ComboBox, Form, InlineLoading } from '@carbon/react';
 import {
+  type DefaultWorkspaceProps,
   ExtensionSlot,
-  showNotification,
-  showToast,
+  getCoreTranslation,
+  showSnackbar,
   useConfig,
   useLayoutType,
   usePatient,
 } from '@openmrs/esm-framework';
-import { Button, ComboBox, InlineLoading } from '@carbon/react';
 import { saveMedicationDispense, useReasonForCloseValueSet } from '../medication-dispense/medication-dispense.resource';
-import { closeOverlay } from '../hooks/useOverlay';
-import styles from './forms.scss';
 import { updateMedicationRequestFulfillerStatus } from '../medication-request/medication-request.resource';
 import { type MedicationDispense, MedicationDispenseStatus, MedicationRequestFulfillerStatus } from '../types';
 import { type PharmacyConfig } from '../config-schema';
 import { getUuidFromReference, revalidate } from '../utils';
+import styles from './forms.scss';
 
-interface CloseDispenseFormProps {
+type CloseDispenseFormProps = DefaultWorkspaceProps & {
   medicationDispense: MedicationDispense;
   mode: 'enter' | 'edit';
   patientUuid?: string;
   encounterUuid: string;
-}
+};
 
 const CloseDispenseForm: React.FC<CloseDispenseFormProps> = ({
   medicationDispense,
   mode,
   patientUuid,
   encounterUuid,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
 }) => {
   const { t } = useTranslation();
   const config = useConfig<PharmacyConfig>();
@@ -84,12 +86,10 @@ const CloseDispenseForm: React.FC<CloseDispenseFormProps> = ({
         })
         .then((response) => {
           if (response.ok) {
-            closeOverlay();
             revalidate(encounterUuid);
-            showToast({
-              critical: true,
+            showSnackbar({
               kind: 'success',
-              description: t(
+              subtitle: t(
                 mode === 'enter' ? 'medicationDispenseClosed' : 'medicationDispenseUpdated',
                 mode === 'enter' ? 'Medication dispense closed.' : 'Dispense record successfully updated.',
               ),
@@ -98,17 +98,17 @@ const CloseDispenseForm: React.FC<CloseDispenseFormProps> = ({
                 mode === 'enter' ? 'Medication dispense closed.' : 'Dispense record successfully updated.',
               ),
             });
+            closeWorkspaceWithSavedChanges();
           }
         })
         .catch((error) => {
-          showNotification({
+          showSnackbar({
             title: t(
               mode === 'enter' ? 'medicationDispenseCloseError' : 'medicationDispenseUpdatedError',
               mode === 'enter' ? 'Error closing medication dispense.' : 'Error updating dispense record',
             ),
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            subtitle: error?.message,
           });
           setIsSubmitting(false);
         });
@@ -140,8 +140,8 @@ const CloseDispenseForm: React.FC<CloseDispenseFormProps> = ({
   }, [patient, patientUuid]);
 
   return (
-    <div className="">
-      <div className={styles.formWrapper}>
+    <Form className={styles.formWrapper}>
+      <div>
         {isLoading && (
           <InlineLoading
             className={styles.bannerLoading}
@@ -176,16 +176,16 @@ const CloseDispenseForm: React.FC<CloseDispenseFormProps> = ({
             }}
           />
         </section>
-        <section className={styles.buttonGroup}>
-          <Button disabled={isSubmitting} onClick={() => closeOverlay()} kind="secondary">
-            {t('cancel', 'Cancel')}
-          </Button>
-          <Button disabled={!isValid || isSubmitting} onClick={handleSubmit}>
-            {t(mode === 'enter' ? 'close' : 'saveChanges', mode === 'enter' ? 'Close' : 'Save changes')}
-          </Button>
-        </section>
       </div>
-    </div>
+      <section className={styles.buttonGroup}>
+        <Button disabled={isSubmitting} onClick={closeWorkspace} kind="secondary">
+          {getCoreTranslation('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={!isValid || isSubmitting} onClick={handleSubmit}>
+          {t(mode === 'enter' ? 'close' : 'saveChanges', mode === 'enter' ? 'Close' : 'Save changes')}
+        </Button>
+      </section>
+    </Form>
   );
 };