@openmrs/esm-styleguide 11.0.1-pre.5799 → 11.0.1-pre.5825

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
-[0] Successfully compiled: 117 files, copied 171 files with swc (274.55ms)
+[0] Successfully compiled: 117 files, copied 171 files with swc (257.79ms)
 [0] swc --strip-leading-paths --copy-files src -d dist && svgo -rf dist --quiet exited with code 0
 [1] tsc --project tsconfig.build.json exited with code 0

package/dist/workspaces2/active-workspace-window.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"active-workspace-window.component.d.ts","sourceRoot":"","sources":["../../src/workspaces2/active-workspace-window.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAM5E,OAAO,EACL,KAAK,YAAY,EAKlB,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAGzE,UAAU,oBAAoB;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;IACvC,OAAO,EAAE,sBAAsB,CAAC;IAChC;;;;OAIG;IACH,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;CACzB;AAKD;;;GAGG;AACH,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4DzD,CAAC;AA0RF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"active-workspace-window.component.d.ts","sourceRoot":"","sources":["../../src/workspaces2/active-workspace-window.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAapF,OAAO,EACL,KAAK,YAAY,EAKlB,MAAM,yBAAyB,CAAC;AAQjC,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAGzE,UAAU,oBAAoB;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;IACvC,OAAO,EAAE,sBAAsB,CAAC;IAChC;;;;OAIG;IACH,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;CACzB;AAKD;;;GAGG;AACH,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuEzD,CAAC;AAmSF,eAAe,qBAAqB,CAAC"}

package/dist/workspaces2/active-workspace-window.component.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 import Parcel from "single-spa-react/parcel";
-import { Header, HeaderGlobalAction, HeaderGlobalBar, HeaderName, InlineLoading } from "@carbon/react";
+import { Header, HeaderGlobalAction, HeaderGlobalBar, HeaderName, InlineLoading, InlineNotification } from "@carbon/react";
 import { DownToBottom, Maximize, Minimize } from "@carbon/react/icons";
 import { createParcelMounter, workspace2Store } from "@openmrs/esm-extensions";
 import { isDesktop, useLayoutType, useStore } from "@openmrs/esm-react-utils";
+import { reportError } from "@openmrs/esm-error-handling";
 import { loadLifeCycles } from "@openmrs/esm-routes";
 import { getCoreTranslation } from "@openmrs/esm-translations";
 import { ArrowRightIcon, CloseIcon } from "../icons/index.js";
@@ -28,6 +29,9 @@ const selectRegisteredWorkspacesByName = (state)=>state.registeredWorkspacesByNa
     const [lifeCyclesByUuid, setLifeCyclesByUuid] = useState({});
     // Reactive so the effect retries when a workspace registers after mount.
     const registeredWorkspacesByName = useStore(workspace2Store, selectRegisteredWorkspacesByName);
+    // The effect reloads every workspace whenever any of them changes (for example, its title), so
+    // track which workspaces have already reported a load failure to report each one only once.
+    const reportedFailureUuids = useRef(new Set());
     useEffect(()=>{
         let cancelled = false;
         Promise.all(openedWorkspaces.map(async (openedWorkspace)=>{
@@ -36,15 +40,26 @@ const selectRegisteredWorkspacesByName = (state)=>state.registeredWorkspacesByNa
                 return null;
             }
             const { moduleName, component } = workspaceDef;
-            return [
-                openedWorkspace.uuid,
-                await loadLifeCycles(moduleName, component)
-            ];
+            try {
+                return [
+                    openedWorkspace.uuid,
+                    await loadLifeCycles(moduleName, component)
+                ];
+            } catch (error) {
+                if (!cancelled && !reportedFailureUuids.current.has(openedWorkspace.uuid)) {
+                    reportedFailureUuids.current.add(openedWorkspace.uuid);
+                    reportError(error);
+                }
+                return [
+                    openedWorkspace.uuid,
+                    null
+                ];
+            }
         })).then((entries)=>{
             if (!cancelled) {
                 setLifeCyclesByUuid(Object.fromEntries(entries.filter((entry)=>entry != null)));
             }
-        });
+        }, reportError);
         return ()=>{
             cancelled = true;
         };
@@ -141,7 +156,17 @@ const ActiveWorkspace = ({ lifeCycle, openedWorkspace, openedWindow, groupProps,
                 [styles.hiddenExtraWorkspace]: hideBehindLeaf
             }),
             ...props
-        }, openedWorkspace.workspaceName) : null, [
+        }, openedWorkspace.workspaceName) : lifeCycle === null ? /*#__PURE__*/ _jsx("div", {
+            className: classNames(styles.workspaceContent, {
+                [styles.hiddenExtraWorkspace]: hideBehindLeaf
+            }),
+            children: /*#__PURE__*/ _jsx(InlineNotification, {
+                kind: "error",
+                title: getCoreTranslation('error'),
+                subtitle: getCoreTranslation('somethingWentWrongTryReloading'),
+                hideCloseButton: true
+            })
+        }) : null, [
         lifeCycle,
         openedWorkspace.workspaceName,
         props,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "11.0.1-pre.5799",
+  "version": "11.0.1-pre.5825",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "module": "dist/internal.js",
@@ -79,18 +79,18 @@
     "uuid": "^11.1.1"
   },
   "peerDependencies": {
-    "@openmrs/esm-api": "^11.0.1-pre.5799",
-    "@openmrs/esm-config": "^11.0.1-pre.5799",
-    "@openmrs/esm-emr-api": "^11.0.1-pre.5799",
-    "@openmrs/esm-error-handling": "^11.0.1-pre.5799",
-    "@openmrs/esm-extensions": "^11.0.1-pre.5799",
-    "@openmrs/esm-globals": "^11.0.1-pre.5799",
-    "@openmrs/esm-navigation": "^11.0.1-pre.5799",
-    "@openmrs/esm-react-utils": "^11.0.1-pre.5799",
-    "@openmrs/esm-routes": "^11.0.1-pre.5799",
-    "@openmrs/esm-state": "^11.0.1-pre.5799",
-    "@openmrs/esm-translations": "^11.0.1-pre.5799",
-    "@openmrs/esm-utils": "^11.0.1-pre.5799",
+    "@openmrs/esm-api": "^11.0.1-pre.5825",
+    "@openmrs/esm-config": "^11.0.1-pre.5825",
+    "@openmrs/esm-emr-api": "^11.0.1-pre.5825",
+    "@openmrs/esm-error-handling": "^11.0.1-pre.5825",
+    "@openmrs/esm-extensions": "^11.0.1-pre.5825",
+    "@openmrs/esm-globals": "^11.0.1-pre.5825",
+    "@openmrs/esm-navigation": "^11.0.1-pre.5825",
+    "@openmrs/esm-react-utils": "^11.0.1-pre.5825",
+    "@openmrs/esm-routes": "^11.0.1-pre.5825",
+    "@openmrs/esm-state": "^11.0.1-pre.5825",
+    "@openmrs/esm-translations": "^11.0.1-pre.5825",
+    "@openmrs/esm-utils": "^11.0.1-pre.5825",
     "dayjs": "1.x",
     "i18next": "25.x",
     "react": "18.x",
@@ -99,18 +99,18 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "11.0.1-pre.5799",
-    "@openmrs/esm-config": "11.0.1-pre.5799",
-    "@openmrs/esm-emr-api": "11.0.1-pre.5799",
-    "@openmrs/esm-error-handling": "11.0.1-pre.5799",
-    "@openmrs/esm-extensions": "11.0.1-pre.5799",
-    "@openmrs/esm-globals": "11.0.1-pre.5799",
-    "@openmrs/esm-navigation": "11.0.1-pre.5799",
-    "@openmrs/esm-react-utils": "11.0.1-pre.5799",
-    "@openmrs/esm-routes": "11.0.1-pre.5799",
-    "@openmrs/esm-state": "11.0.1-pre.5799",
-    "@openmrs/esm-translations": "11.0.1-pre.5799",
-    "@openmrs/esm-utils": "11.0.1-pre.5799",
+    "@openmrs/esm-api": "11.0.1-pre.5825",
+    "@openmrs/esm-config": "11.0.1-pre.5825",
+    "@openmrs/esm-emr-api": "11.0.1-pre.5825",
+    "@openmrs/esm-error-handling": "11.0.1-pre.5825",
+    "@openmrs/esm-extensions": "11.0.1-pre.5825",
+    "@openmrs/esm-globals": "11.0.1-pre.5825",
+    "@openmrs/esm-navigation": "11.0.1-pre.5825",
+    "@openmrs/esm-react-utils": "11.0.1-pre.5825",
+    "@openmrs/esm-routes": "11.0.1-pre.5825",
+    "@openmrs/esm-state": "11.0.1-pre.5825",
+    "@openmrs/esm-translations": "11.0.1-pre.5825",
+    "@openmrs/esm-utils": "11.0.1-pre.5825",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.21",
     "@types/geopattern": "^1.2.9",

package/src/workspaces2/active-workspace-window.component.tsx

@@ -1,8 +1,15 @@
-import React, { type ReactNode, useEffect, useMemo, useState } from 'react';
+import React, { type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import Parcel from 'single-spa-react/parcel';
 import { type ParcelConfig } from 'single-spa';
-import { Header, HeaderGlobalAction, HeaderGlobalBar, HeaderName, InlineLoading } from '@carbon/react';
+import {
+  Header,
+  HeaderGlobalAction,
+  HeaderGlobalBar,
+  HeaderName,
+  InlineLoading,
+  InlineNotification,
+} from '@carbon/react';
 import { DownToBottom, Maximize, Minimize } from '@carbon/react/icons';
 import {
   type OpenedWindow,
@@ -12,6 +19,7 @@ import {
   type WorkspaceStoreState2,
 } from '@openmrs/esm-extensions';
 import { isDesktop, useLayoutType, useStore } from '@openmrs/esm-react-utils';
+import { reportError } from '@openmrs/esm-error-handling';
 import { loadLifeCycles } from '@openmrs/esm-routes';
 import { getCoreTranslation } from '@openmrs/esm-translations';
 import { ArrowRightIcon, CloseIcon } from '../icons';
@@ -55,28 +63,39 @@ const ActiveWorkspaceWindow: React.FC<WorkspaceWindowProps> = ({
   // the previous workspace's component until the reload resolves. The parcel
   // mounts whatever config it first receives, so the wrong component would then
   // render with the new workspace's props.
-  const [lifeCyclesByUuid, setLifeCyclesByUuid] = useState<Record<string, ParcelConfig>>({});
+  const [lifeCyclesByUuid, setLifeCyclesByUuid] = useState<Record<string, ParcelConfig | null>>({});
   // Reactive so the effect retries when a workspace registers after mount.
   const registeredWorkspacesByName = useStore(workspace2Store, selectRegisteredWorkspacesByName);
+  // The effect reloads every workspace whenever any of them changes (for example, its title), so
+  // track which workspaces have already reported a load failure to report each one only once.
+  const reportedFailureUuids = useRef(new Set<string>());
 
   useEffect(() => {
     let cancelled = false;
     Promise.all(
-      openedWorkspaces.map(async (openedWorkspace): Promise<[string, ParcelConfig] | null> => {
+      openedWorkspaces.map(async (openedWorkspace): Promise<[string, ParcelConfig | null] | null> => {
         const workspaceDef = registeredWorkspacesByName[openedWorkspace.workspaceName];
         if (!workspaceDef) {
           return null;
         }
         const { moduleName, component } = workspaceDef;
-        return [openedWorkspace.uuid, await loadLifeCycles(moduleName, component)];
+        try {
+          return [openedWorkspace.uuid, await loadLifeCycles(moduleName, component)];
+        } catch (error) {
+          if (!cancelled && !reportedFailureUuids.current.has(openedWorkspace.uuid)) {
+            reportedFailureUuids.current.add(openedWorkspace.uuid);
+            reportError(error);
+          }
+          return [openedWorkspace.uuid, null];
+        }
       }),
     ).then((entries) => {
       if (!cancelled) {
         setLifeCyclesByUuid(
-          Object.fromEntries(entries.filter((entry): entry is [string, ParcelConfig] => entry != null)),
+          Object.fromEntries(entries.filter((entry): entry is [string, ParcelConfig | null] => entry != null)),
         );
       }
-    });
+    }, reportError);
     return () => {
       cancelled = true;
     };
@@ -103,7 +122,7 @@ const ActiveWorkspaceWindow: React.FC<WorkspaceWindowProps> = ({
 };
 
 interface ActiveWorkspaceProps {
-  lifeCycle: ParcelConfig | undefined;
+  lifeCycle: ParcelConfig | null | undefined;
   openedWorkspace: OpenedWorkspace;
   openedWindow: OpenedWindow;
   groupProps: Record<string, any> | null;
@@ -207,6 +226,15 @@ const ActiveWorkspace: React.FC<ActiveWorkspaceProps> = ({
           wrapClassName={classNames(styles.workspaceContent, { [styles.hiddenExtraWorkspace]: hideBehindLeaf })}
           {...props}
         />
+      ) : lifeCycle === null ? (
+        <div className={classNames(styles.workspaceContent, { [styles.hiddenExtraWorkspace]: hideBehindLeaf })}>
+          <InlineNotification
+            kind="error"
+            title={getCoreTranslation('error')}
+            subtitle={getCoreTranslation('somethingWentWrongTryReloading')}
+            hideCloseButton
+          />
+        </div>
       ) : null,
     [lifeCycle, openedWorkspace.workspaceName, props, hideBehindLeaf],
   );

package/src/workspaces2/active-workspace-window.test.tsx

@@ -2,12 +2,15 @@ import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, render, screen } from '@testing-library/react';
 import { workspace2Store, type OpenedWindow, type OpenedWorkspace } from '@openmrs/esm-extensions';
+import { reportError } from '@openmrs/esm-error-handling';
 import { loadLifeCycles } from '@openmrs/esm-routes';
 import ActiveWorkspaceWindow from './active-workspace-window.component';
 import styles from './workspace2.module.scss';
 import { type Workspace2InternalProps } from './workspace2.component';
 import { type WorkspaceWindowActions } from './workspace-window-actions';
 
+vi.mock('@openmrs/esm-error-handling', () => ({ reportError: vi.fn() }));
+
 vi.mock('@openmrs/esm-routes', () => ({
   loadLifeCycles: vi.fn(),
 }));
@@ -186,6 +189,82 @@ describe('ActiveWorkspaceWindow', () => {
     expect(screen.getByTestId('parcel')).toHaveTextContent('admit-lifecycle');
   });
 
+  it.each([false, true])(
+    'reports failed loading with renderChrome=%s while rendering other workspaces',
+    async (renderChrome) => {
+      const error = new Error('Module failed to load');
+      mockLoadLifeCycles.mockImplementation((_moduleName, component) =>
+        component === 'form' ? Promise.reject(error) : Promise.resolve({ name: 'admit-lifecycle' } as never),
+      );
+      render(
+        renderWindow(
+          makeOpenedWindow([
+            makeOpenedWorkspace('form-workspace', 'uuid-form'),
+            makeOpenedWorkspace('admit-workspace', 'uuid-admit'),
+          ]),
+          makeActions(),
+          renderChrome,
+        ),
+      );
+
+      await flushLifeCycles();
+
+      expect(reportError).toHaveBeenCalledWith(error);
+      expect(screen.getByText('Something went wrong. Please try reloading.')).toBeInTheDocument();
+      expect(screen.getByTestId('parcel')).toHaveTextContent('admit-lifecycle');
+      expect(screen.queryByText('Loading')).not.toBeInTheDocument();
+    },
+  );
+
+  it('does not report a failed load for a workspace that has since been replaced', async () => {
+    // The form lifecycle rejects only when we release it, after the admit workspace has replaced it.
+    let rejectForm: (error: Error) => void;
+    mockLoadLifeCycles.mockImplementation((_moduleName, component) => {
+      if (component === 'form') {
+        return new Promise((_resolve, reject) => {
+          rejectForm = reject;
+        }) as never;
+      }
+      return Promise.resolve({ name: 'admit-lifecycle' } as never);
+    });
+
+    const actions = makeActions();
+    const { rerender } = render(
+      renderWindow(makeOpenedWindow([makeOpenedWorkspace('form-workspace', 'uuid-form')]), actions),
+    );
+    rerender(renderWindow(makeOpenedWindow([makeOpenedWorkspace('admit-workspace', 'uuid-admit')]), actions));
+    await flushLifeCycles();
+
+    await act(async () => {
+      rejectForm(new Error('Module failed to load'));
+      await Promise.resolve();
+    });
+
+    expect(reportError).not.toHaveBeenCalled();
+    expect(screen.queryByText('Something went wrong. Please try reloading.')).not.toBeInTheDocument();
+    expect(screen.getByTestId('parcel')).toHaveTextContent('admit-lifecycle');
+  });
+
+  it('reports a failed load only once when the opened workspaces change', async () => {
+    const error = new Error('Module failed to load');
+    mockLoadLifeCycles.mockImplementation((_moduleName, component) =>
+      component === 'form' ? Promise.reject(error) : Promise.resolve({ name: 'admit-lifecycle' } as never),
+    );
+    const actions = makeActions();
+    const formWorkspace = makeOpenedWorkspace('form-workspace', 'uuid-form');
+    const admitWorkspace = makeOpenedWorkspace('admit-workspace', 'uuid-admit');
+
+    const { rerender } = render(renderWindow(makeOpenedWindow([formWorkspace, admitWorkspace]), actions));
+    await flushLifeCycles();
+
+    // A title change creates a new openedWorkspaces array, which reloads every workspace.
+    rerender(renderWindow(makeOpenedWindow([formWorkspace, { ...admitWorkspace, title: 'Admit' }]), actions));
+    await flushLifeCycles();
+
+    expect(mockLoadLifeCycles).toHaveBeenCalledTimes(4);
+    expect(reportError).toHaveBeenCalledTimes(1);
+  });
+
   it("passes the workspace's registered meta to the parcel via workspaceMeta", async () => {
     mockLoadLifeCycles.mockResolvedValue({ name: 'form-lifecycle' } as never);