@kenyaemr/esm-admin-app 5.4.4-pre.7 → 5.4.4-pre.71

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[{"component":"adminLeftPanelLink","name":"admin-left-panel-link","slot":"admin-left-panel-slot"},{"component":"userManagementLeftPannelLink","name":"user-management-left-panel-link","slot":"admin-left-panel-slot"},{"component":"etlAdministrationLeftPannelLink","name":"etl-administration-left-panel-link","slot":"admin-left-panel-slot"},{"component":"locationsLeftPanelLink","name":"locations-left-panel-link","slot":"admin-left-panel-slot"},{"component":"facilitySetupLeftPanelLink","name":"facility-setup-left-panel-link","slot":"admin-left-panel-slot"},{"component":"providerBanner","name":"provider-banner","slot":"provider-banner-info-slot","order":1}],"workspaces":[{"name":"manage-user-workspace","component":"manageUserWorkspace","title":"Manage User Workspace","type":"other-form","canMaximize":true,"width":"extra-wide"},{"name":"user-role-scope-workspace","component":"userRoleScopeWorkspace","title":"User Rple Scope Workspace","type":"other-form","canMaximize":true,"width":"extra-wide"},{"name":"add-location-workspace","title":"Add Location","component":"addLocation","type":"workspace"},{"name":"search-location-workspace","title":"Search Location","component":"searchLocationWorkspace","type":"workspace"},{"name":"hwr-sync-workspace","title":"HWR Sync Workspace","component":"hwrSyncWorkspace","type":"other-form"},{"name":"hwr-sync-modal","title":"HWR Sync Modal","component":"hwrSyncModal","type":"modal"}],"modals":[{"component":"operationConfirmationModal","name":"operation-confirmation-modal"},{"component":"hwrConfirmationModal","name":"hwr-confirmation-modal"},{"component":"hwrEmptyModal","name":"hwr-empty-modal"},{"component":"hwrSyncModal","name":"hwr-syncing-modal"}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.4-pre.7"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemrCharts":"^1.6.7"},"extensions":[{"component":"adminLeftPanelLink","name":"admin-left-panel-link","slot":"admin-left-panel-slot"},{"component":"userManagementLeftPannelLink","name":"user-management-left-panel-link","slot":"admin-left-panel-slot"},{"component":"etlAdministrationLeftPannelLink","name":"etl-administration-left-panel-link","slot":"admin-left-panel-slot"},{"component":"locationsLeftPanelLink","name":"locations-left-panel-link","slot":"admin-left-panel-slot"},{"component":"facilitySetupLeftPanelLink","name":"facility-setup-left-panel-link","slot":"admin-left-panel-slot"},{"component":"providerBanner","name":"provider-banner","slot":"provider-banner-info-slot","order":1}],"modals":[{"component":"operationConfirmationModal","name":"operation-confirmation-modal"},{"component":"hwrConfirmationModal","name":"hwr-confirmation-modal"},{"component":"hwrEmptyModal","name":"hwr-empty-modal"},{"component":"hwrSyncModal","name":"hwr-syncing-modal"}],"workspaces2":[{"name":"manage-user-workspace","component":"manageUserWorkspace","window":"esm-admin-extra-wide-workspace-window"},{"name":"user-role-scope-workspace","component":"userRoleScopeWorkspace","window":"esm-admin-workspace-window"},{"name":"add-location-workspace","component":"addLocation","window":"esm-admin-workspace-window"},{"name":"search-location-workspace","component":"searchLocationWorkspace","window":"esm-admin-workspace-window"}],"workspaceWindows2":[{"name":"esm-admin-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group"},{"name":"esm-admin-extra-wide-workspace-window","canMaximize":true,"group":"esm-admin-workspace-group","width":"extra-wide"}],"workspaceGroups2":[{"name":"esm-admin-workspace-group","scopePattern":"/admin","closeable":true}],"pages":[{"component":"root","route":"admin"}],"version":"5.4.4-pre.71"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-admin-app",
-  "version": "5.4.4-pre.7",
+  "version": "5.4.4-pre.71",
   "description": "Facilitates the management of ETL tables",
   "keywords": [
     "openmrs"
@@ -18,16 +18,14 @@
   "source": true,
   "browser": "dist/kenyaemr-esm-admin-app.js",
   "scripts": {
-    "analyze": "rspack --mode=production --env analyze=true",
+    "analyze": "rspack build --mode=production --analyze",
     "build": "rspack --mode=production",
-    "coverage": "yarn test --coverage",
+    "coverage": "echo \"Jest has been removed; no unit test runner is configured\" && exit 0",
     "debug": "npm run serve",
     "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js",
     "lint": "eslint src --ext ts,tsx",
     "serve": "rspack serve --mode=development",
     "start": "openmrs develop",
-    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
-    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
     "typescript": "tsc"
   },
   "browserslist": [
@@ -39,7 +37,7 @@
   },
   "peerDependencies": {
     "@carbon/react": "1.x",
-    "@openmrs/esm-framework": "8.x",
+    "@openmrs/esm-framework": "9.x",
     "react": "^18.1.0",
     "react-i18next": "11.x",
     "react-router-dom": "6.x",

package/rspack.config.js

@@ -1 +1 @@
-module.exports = require('openmrs/default-rspack-config');
+module.exports = require('../../tools/rs-pack-code-spliting');

package/src/components/locations/forms/add-location/add-location.workspace.tsx

@@ -1,35 +1,36 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
-  type DefaultWorkspaceProps,
   ResponsiveWrapper,
-  useLayoutType,
-  showSnackbar,
-  useConfig,
+  Workspace2,
   restBaseUrl,
+  showSnackbar,
+  useLayoutType,
+  type Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { Controller, useForm } from 'react-hook-form';
 import {
-  ButtonSet,
   Button,
-  InlineLoading,
-  TextInput,
+  ButtonSet,
+  FilterableMultiSelect,
+  Form,
   FormGroup,
+  InlineLoading,
   Stack,
-  Form,
-  FilterableMultiSelect,
+  TextInput,
 } from '@carbon/react';
-import classNames from 'classnames';
-import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import classNames from 'classnames';
+import { mutate } from 'swr';
+
 import styles from './add-location.workspace.scss';
 import { type LocationResponse } from '../../types';
 import { extractErrorMessagesFromResponse } from '../../helpers';
 import { useLocationTags } from '../../hooks/useLocationTags';
-import { mutate } from 'swr';
 import { saveOrUpdateLocation } from '../../hooks/useLocation';
 
-type AddLocationWorkspaceProps = DefaultWorkspaceProps & {
+type AddLocationWorkspaceProps = {
   location?: LocationResponse;
 };
 
@@ -46,16 +47,14 @@ const locationFormSchema = z.object({
 
 type LocationFormType = z.infer<typeof locationFormSchema>;
 
-const AddLocationWorkspace: React.FC<AddLocationWorkspaceProps> = ({
+const AddLocationWorkspace: React.FC<Workspace2DefinitionProps<AddLocationWorkspaceProps, {}, {}>> = ({
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
-  location,
+  workspaceProps: { location = {} as LocationResponse },
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const { locationTagList: Tags } = useLocationTags();
-
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const hasLocationAttributes = useMemo(() => {
     return location?.attributes && location.attributes.length > 0;
   }, [location?.attributes]);
@@ -105,7 +104,7 @@ const AddLocationWorkspace: React.FC<AddLocationWorkspaceProps> = ({
             }),
       });
       handleMutation();
-      closeWorkspaceWithSavedChanges();
+      closeWorkspace({ discardUnsavedChanges: true });
     } catch (error: any) {
       const errorMessages = extractErrorMessagesFromResponse(error);
       showSnackbar({
@@ -117,83 +116,85 @@ const AddLocationWorkspace: React.FC<AddLocationWorkspaceProps> = ({
   };
 
   useEffect(() => {
-    promptBeforeClosing(() => isDirty);
-  }, [isDirty, promptBeforeClosing]);
+    setHasUnsavedChanges(true);
+  }, [isDirty, setHasUnsavedChanges]);
 
   return (
-    <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
-      <div className={styles.formContainer}>
-        <Stack gap={3}>
-          <ResponsiveWrapper>
-            <FormGroup legendText="">
-              <Controller
-                control={control}
-                name="name"
-                render={({ field }) => (
-                  <TextInput
-                    id="locationName"
-                    placeholder={t('locationPlaceholder', 'Add a location')}
-                    labelText={t('locationName', 'Location Name')}
-                    value={field.value}
-                    onChange={field.onChange}
-                    invalid={!!errors.name?.message}
-                    invalidText={errors.name?.message}
-                    disabled={hasLocationAttributes}
-                  />
-                )}
-              />
-            </FormGroup>
-          </ResponsiveWrapper>
-
-          <ResponsiveWrapper>
-            <FormGroup legendText="">
-              <Controller
-                control={control}
-                name="tags"
-                render={({ field: { onChange, value, ref } }) => (
-                  <FilterableMultiSelect
-                    id="locationTags"
-                    titleText={t('selectTags', 'Select tag(s)')}
-                    placeholder={t('selectTagPlaceholder', 'Select a tag')}
-                    items={Tags || []}
-                    selectedItems={(value || []).map(
-                      (selected) => Tags?.find((tag) => tag.uuid === selected.uuid) || selected,
-                    )}
-                    onChange={({ selectedItems }) => onChange(selectedItems || [])}
-                    itemToString={(item) => (item && typeof item === 'object' ? item.display : '')}
-                    selectionFeedback="top-after-reopen"
-                    invalid={!!errors.tags?.message}
-                    invalidText={errors.tags?.message}
-                    disabled={!Tags?.length}
-                    ref={ref}
-                  />
-                )}
-              />
-            </FormGroup>
-          </ResponsiveWrapper>
-        </Stack>
-      </div>
-
-      <ButtonSet
-        className={classNames({
-          [styles.tablet]: isTablet,
-          [styles.desktop]: !isTablet,
-        })}>
-        <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button className={styles.buttonContainer} disabled={isSubmitting || !isDirty} kind="primary" type="submit">
-          {isSubmitting ? (
-            <span className={styles.inlineLoading}>
-              {t('submitting', 'Submitting' + '...')}
-              <InlineLoading status="active" iconDescription="Loading" />
-            </span>
-          ) : (
-            t('saveAndClose', 'Save & close')
-          )}
-        </Button>
-      </ButtonSet>
-    </Form>
+    <Workspace2 title={t('addLocation', 'Add Location')} hasUnsavedChanges={hasUnsavedChanges}>
+      <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        <div className={styles.formContainer}>
+          <Stack gap={3}>
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="name"
+                  render={({ field }) => (
+                    <TextInput
+                      id="locationName"
+                      placeholder={t('locationPlaceholder', 'Add a location')}
+                      labelText={t('locationName', 'Location Name')}
+                      value={field.value}
+                      onChange={field.onChange}
+                      invalid={!!errors.name?.message}
+                      invalidText={errors.name?.message}
+                      disabled={hasLocationAttributes}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="tags"
+                  render={({ field: { onChange, value, ref } }) => (
+                    <FilterableMultiSelect
+                      id="locationTags"
+                      titleText={t('selectTags', 'Select tag(s)')}
+                      placeholder={t('selectTagPlaceholder', 'Select a tag')}
+                      items={Tags || []}
+                      selectedItems={(value || []).map(
+                        (selected) => Tags?.find((tag) => tag.uuid === selected.uuid) || selected,
+                      )}
+                      onChange={({ selectedItems }) => onChange(selectedItems || [])}
+                      itemToString={(item) => (item && typeof item === 'object' ? item.display : '')}
+                      selectionFeedback="top-after-reopen"
+                      invalid={!!errors.tags?.message}
+                      invalidText={errors.tags?.message}
+                      disabled={!Tags?.length}
+                      ref={ref}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+          </Stack>
+        </div>
+
+        <ButtonSet
+          className={classNames({
+            [styles.tablet]: isTablet,
+            [styles.desktop]: !isTablet,
+          })}>
+          <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.buttonContainer} disabled={isSubmitting || !isDirty} kind="primary" type="submit">
+            {isSubmitting ? (
+              <span className={styles.inlineLoading}>
+                {t('submitting', 'Submitting' + '...')}
+                <InlineLoading status="active" iconDescription="Loading" />
+              </span>
+            ) : (
+              t('saveAndClose', 'Save & close')
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
   );
 };
 

package/src/components/locations/forms/search-location/search-location.workspace.tsx

@@ -1,27 +1,29 @@
-import { Button, ButtonSet, FilterableMultiSelect, Form, FormGroup, InlineLoading, Stack } from '@carbon/react';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { mutate } from 'swr';
+import classNames from 'classnames';
+import { z } from 'zod';
+import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
-  type DefaultWorkspaceProps,
+  Workspace2,
+  Workspace2DefinitionProps,
+  useLayoutType,
   ResponsiveWrapper,
   restBaseUrl,
   showSnackbar,
-  useLayoutType,
 } from '@openmrs/esm-framework';
-import classNames from 'classnames';
-import React, { useEffect, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { mutate } from 'swr';
-import { z } from 'zod';
+import { Button, ButtonSet, FilterableMultiSelect, Form, FormGroup, InlineLoading, Stack } from '@carbon/react';
+
 import { LocationAutosuggest } from '../../auto-suggest/location-autosuggest.component';
 import ResultsTile from '../../common/results-tile.component';
-import { extractErrorMessagesFromResponse } from '../../helpers';
-import { saveOrUpdateLocation } from '../../hooks/useLocation';
 import { useLocationTags } from '../../hooks/useLocationTags';
+import { saveOrUpdateLocation } from '../../hooks/useLocation';
+import { extractErrorMessagesFromResponse } from '../../helpers';
 import { LocationResponse } from '../../types';
 import styles from './search-location.workspace.scss';
 
-type AddLocationWorkspaceProps = DefaultWorkspaceProps & {
+type AddLocationWorkspaceProps = {
   location?: LocationResponse;
 };
 
@@ -37,17 +39,15 @@ const locationFormSchema = z.object({
 
 type LocationFormType = z.infer<typeof locationFormSchema>;
 
-const SearchLocationWorkspace: React.FC<AddLocationWorkspaceProps> = ({
+const SearchLocationWorkspace: React.FC<Workspace2DefinitionProps<AddLocationWorkspaceProps, {}, {}>> = ({
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
-  location,
+  workspaceProps: { location = {} as LocationResponse },
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const { locationTagList: Tags } = useLocationTags();
   const [selectedLocation, setSelectedLocation] = useState<LocationResponse | null>(null);
-
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const handleMutation = () => {
     const url = `${restBaseUrl}/location`;
     mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
@@ -56,7 +56,6 @@ const SearchLocationWorkspace: React.FC<AddLocationWorkspaceProps> = ({
   const {
     handleSubmit,
     control,
-    getValues,
     setValue,
     reset,
     formState: { isSubmitting, isDirty, errors },
@@ -89,7 +88,7 @@ const SearchLocationWorkspace: React.FC<AddLocationWorkspaceProps> = ({
       });
 
       handleMutation();
-      closeWorkspaceWithSavedChanges();
+      closeWorkspace({ discardUnsavedChanges: true });
     } catch (error: any) {
       console.error('Error saving location:', error);
       const errorMessages = extractErrorMessagesFromResponse(error);
@@ -137,78 +136,84 @@ const SearchLocationWorkspace: React.FC<AddLocationWorkspaceProps> = ({
   };
 
   useEffect(() => {
-    promptBeforeClosing(() => isDirty);
-  }, [isDirty, promptBeforeClosing]);
+    setHasUnsavedChanges(true);
+  }, [isDirty, setHasUnsavedChanges]);
 
   const isFormReady = (selectedLocation || location) && isDirty;
 
   return (
-    <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
-      <div className={styles.formContainer}>
-        <Stack gap={3}>
-          <ResponsiveWrapper>
-            <FormGroup legendText="">
-              {!selectedLocation ? (
-                <LocationAutosuggest
-                  onLocationSelected={handleLocationSelected}
-                  labelText={t('searchForLocation', 'Search for location')}
-                  placeholder={t('searchParentLocation', 'Search for location...')}
-                />
-              ) : (
-                renderSelectedLocationTile()
-              )}
-            </FormGroup>
-          </ResponsiveWrapper>
-
-          <ResponsiveWrapper>
-            <FormGroup legendText="">
-              <Controller
-                control={control}
-                name="tags"
-                render={({ field: { onChange, value, ref } }) => (
-                  <FilterableMultiSelect
-                    id="locationTags"
-                    titleText={t('selectTags', 'Select tag(s)')}
-                    placeholder={t('selectTagPlaceholder', 'Select a tag')}
-                    items={Tags || []}
-                    selectedItems={(value || []).map(
-                      (selected) => Tags?.find((tag) => tag.uuid === selected.uuid) || selected,
-                    )}
-                    onChange={({ selectedItems }) => onChange(selectedItems || [])}
-                    itemToString={(item) => (item && typeof item === 'object' ? item.display : '')}
-                    selectionFeedback="top-after-reopen"
-                    invalid={!!errors.tags?.message}
-                    invalidText={errors.tags?.message}
-                    disabled={!Tags?.length}
-                    ref={ref}
+    <Workspace2 title={t('searchLocation', 'Search Location')} hasUnsavedChanges={hasUnsavedChanges}>
+      <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        <div className={styles.formContainer}>
+          <Stack gap={3}>
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                {!selectedLocation ? (
+                  <LocationAutosuggest
+                    onLocationSelected={handleLocationSelected}
+                    labelText={t('searchForLocation', 'Search for location')}
+                    placeholder={t('searchParentLocation', 'Search for location...')}
                   />
+                ) : (
+                  renderSelectedLocationTile()
                 )}
-              />
-            </FormGroup>
-          </ResponsiveWrapper>
-        </Stack>
-      </div>
-
-      <ButtonSet
-        className={classNames({
-          [styles.tablet]: isTablet,
-          [styles.desktop]: !isTablet,
-        })}>
-        <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button className={styles.buttonContainer} disabled={isSubmitting || !isFormReady} kind="primary" type="submit">
-          {isSubmitting ? (
-            <span className={styles.inlineLoading}>
-              {t('submitting', 'Submitting' + '...')}
-              <InlineLoading status="active" iconDescription="Loading" />
-            </span>
-          ) : (
-            t('saveAndClose', 'Save & close')
-          )}
-        </Button>
-      </ButtonSet>
-    </Form>
+              </FormGroup>
+            </ResponsiveWrapper>
+
+            <ResponsiveWrapper>
+              <FormGroup legendText="">
+                <Controller
+                  control={control}
+                  name="tags"
+                  render={({ field: { onChange, value, ref } }) => (
+                    <FilterableMultiSelect
+                      id="locationTags"
+                      titleText={t('selectTags', 'Select tag(s)')}
+                      placeholder={t('selectTagPlaceholder', 'Select a tag')}
+                      items={Tags || []}
+                      selectedItems={(value || []).map(
+                        (selected) => Tags?.find((tag) => tag.uuid === selected.uuid) || selected,
+                      )}
+                      onChange={({ selectedItems }) => onChange(selectedItems || [])}
+                      itemToString={(item) => (item && typeof item === 'object' ? item.display : '')}
+                      selectionFeedback="top-after-reopen"
+                      invalid={!!errors.tags?.message}
+                      invalidText={errors.tags?.message}
+                      disabled={!Tags?.length}
+                      ref={ref}
+                    />
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+          </Stack>
+        </div>
+
+        <ButtonSet
+          className={classNames({
+            [styles.tablet]: isTablet,
+            [styles.desktop]: !isTablet,
+          })}>
+          <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button
+            className={styles.buttonContainer}
+            disabled={isSubmitting || !isFormReady}
+            kind="primary"
+            type="submit">
+            {isSubmitting ? (
+              <span className={styles.inlineLoading}>
+                {t('submitting', 'Submitting' + '...')}
+                <InlineLoading status="active" iconDescription="Loading" />
+              </span>
+            ) : (
+              t('saveAndClose', 'Save & close')
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
   );
 };