@openmrs/esm-styleguide 10.0.1-pre.4943 → 10.0.1-pre.4966

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
-[0] Successfully compiled: 123 files, copied 164 files with swc (295.7ms)
+[0] Successfully compiled: 123 files, copied 164 files with swc (211.09ms)
 [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,KAAuC,MAAM,OAAO,CAAC;AAK5D,OAAO,EAAE,KAAK,YAAY,EAAyC,MAAM,yBAAyB,CAAC;AAOnG,UAAU,oBAAoB;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,cAAc,EAAE,OAAO,CAAC;CACzB;AACD;;GAEG;AACH,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6BzD,CAAC;AAyIF,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,KAAuC,MAAM,OAAO,CAAC;AAK5D,OAAO,EAAE,KAAK,YAAY,EAAyC,MAAM,yBAAyB,CAAC;AAOnG,UAAU,oBAAoB;IAC5B,YAAY,EAAE,YAAY,CAAC;IAC3B,cAAc,EAAE,OAAO,CAAC;CACzB;AACD;;GAEG;AACH,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4CzD,CAAC;AAyIF,eAAe,qBAAqB,CAAC"}

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

@@ -13,13 +13,31 @@ import styles from "./workspace2.module.scss";
  * Renders an opened workspace window.
  */ const ActiveWorkspaceWindow = ({ openedWindow, showActionMenu })=>{
     const { openedWorkspaces } = openedWindow;
-    const [lifeCycles, setLifeCycles] = useState();
+    // Keyed by opened workspace uuid rather than stack index. The lifecycles load
+    // asynchronously, so when the stack changes (a workspace at some position is
+    // replaced by another, for example closing a child workspace and immediately
+    // opening a different one), an index-based lookup can hand the new workspace
+    // 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({});
     const { registeredWorkspacesByName } = workspace2Store.getState();
     useEffect(()=>{
-        Promise.all(openedWorkspaces.map((openedWorkspace)=>{
+        let cancelled = false;
+        Promise.all(openedWorkspaces.map(async (openedWorkspace)=>{
             const { moduleName, component } = registeredWorkspacesByName[openedWorkspace.workspaceName];
-            return loadLifeCycles(moduleName, component);
-        })).then(setLifeCycles);
+            return [
+                openedWorkspace.uuid,
+                await loadLifeCycles(moduleName, component)
+            ];
+        })).then((entries)=>{
+            if (!cancelled) {
+                setLifeCyclesByUuid(Object.fromEntries(entries));
+            }
+        });
+        return ()=>{
+            cancelled = true;
+        };
     }, [
         openedWorkspaces
     ]);
@@ -27,7 +45,7 @@ import styles from "./workspace2.module.scss";
         children: openedWorkspaces.map((openedWorkspace, i)=>/*#__PURE__*/ _jsx(ActiveWorkspace, {
                 openedWorkspace: openedWorkspace,
                 openedWindow: openedWindow,
-                lifeCycle: lifeCycles && lifeCycles[i] ? lifeCycles[i] : undefined,
+                lifeCycle: lifeCyclesByUuid[openedWorkspace.uuid],
                 isRootWorkspace: i === 0,
                 isLeafWorkspace: i === openedWorkspaces.length - 1,
                 showActionMenu: showActionMenu

package/package.json

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

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

@@ -19,16 +19,31 @@ interface WorkspaceWindowProps {
  */
 const ActiveWorkspaceWindow: React.FC<WorkspaceWindowProps> = ({ openedWindow, showActionMenu }) => {
   const { openedWorkspaces } = openedWindow;
-  const [lifeCycles, setLifeCycles] = useState<ParcelConfig[]>();
+  // Keyed by opened workspace uuid rather than stack index. The lifecycles load
+  // asynchronously, so when the stack changes (a workspace at some position is
+  // replaced by another, for example closing a child workspace and immediately
+  // opening a different one), an index-based lookup can hand the new workspace
+  // 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 { registeredWorkspacesByName } = workspace2Store.getState();
 
   useEffect(() => {
+    let cancelled = false;
     Promise.all(
-      openedWorkspaces.map((openedWorkspace) => {
+      openedWorkspaces.map(async (openedWorkspace): Promise<[string, ParcelConfig]> => {
         const { moduleName, component } = registeredWorkspacesByName[openedWorkspace.workspaceName];
-        return loadLifeCycles(moduleName, component);
+        return [openedWorkspace.uuid, await loadLifeCycles(moduleName, component)];
       }),
-    ).then(setLifeCycles);
+    ).then((entries) => {
+      if (!cancelled) {
+        setLifeCyclesByUuid(Object.fromEntries(entries));
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
   }, [openedWorkspaces]);
 
   return (
@@ -38,7 +53,7 @@ const ActiveWorkspaceWindow: React.FC<WorkspaceWindowProps> = ({ openedWindow, s
           key={openedWorkspace.uuid}
           openedWorkspace={openedWorkspace}
           openedWindow={openedWindow}
-          lifeCycle={lifeCycles && lifeCycles[i] ? lifeCycles[i] : undefined}
+          lifeCycle={lifeCyclesByUuid[openedWorkspace.uuid]}
           isRootWorkspace={i === 0}
           isLeafWorkspace={i === openedWorkspaces.length - 1}
           showActionMenu={showActionMenu}

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

@@ -0,0 +1,99 @@
+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 { loadLifeCycles } from '@openmrs/esm-routes';
+import ActiveWorkspaceWindow from './active-workspace-window.component';
+
+vi.mock('@openmrs/esm-routes', () => ({
+  loadLifeCycles: vi.fn(),
+}));
+
+vi.mock('single-spa-react/parcel', () => ({
+  default: ({ config }: { config: { name: string } }) => <div data-testid="parcel">{config.name}</div>,
+}));
+
+const mockLoadLifeCycles = vi.mocked(loadLifeCycles);
+
+function makeOpenedWorkspace(workspaceName: string, uuid: string): OpenedWorkspace {
+  return { workspaceName, uuid, props: {}, hasUnsavedChanges: false } as OpenedWorkspace;
+}
+
+function makeOpenedWindow(openedWorkspaces: Array<OpenedWorkspace>): OpenedWindow {
+  return {
+    windowName: 'test-window',
+    openedWorkspaces,
+    props: {},
+    maximized: false,
+  } as OpenedWindow;
+}
+
+describe('ActiveWorkspaceWindow', () => {
+  beforeEach(() => {
+    workspace2Store.setState({
+      registeredWorkspacesByName: {
+        'form-workspace': {
+          name: 'form-workspace',
+          component: 'form',
+          window: 'test-window',
+          moduleName: 'test-module',
+        },
+        'admit-workspace': {
+          name: 'admit-workspace',
+          component: 'admit',
+          window: 'test-window',
+          moduleName: 'test-module',
+        },
+      },
+      registeredWindowsByName: {
+        'test-window': { name: 'test-window', group: 'test-group' },
+      },
+      workspaceTitleByWorkspaceName: {},
+      openedGroup: null,
+    } as never);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('does not render a replaced workspace with the previous workspace lifecycle at the same stack position', async () => {
+    // The form lifecycle resolves immediately. The admit lifecycle resolves only
+    // when we release it, keeping the reload from the stack change pending, which
+    // is the window where an index-based lookup served the stale component.
+    let resolveAdmit: (config: { name: string }) => void;
+    mockLoadLifeCycles.mockImplementation((moduleName, component) => {
+      if (component === 'form') {
+        return Promise.resolve({ name: 'form-lifecycle' } as never);
+      }
+      return new Promise((resolve) => {
+        resolveAdmit = resolve as never;
+      }) as never;
+    });
+
+    const formWorkspace = makeOpenedWorkspace('form-workspace', 'uuid-form');
+    const { rerender } = render(
+      <ActiveWorkspaceWindow openedWindow={makeOpenedWindow([formWorkspace])} showActionMenu={false} />,
+    );
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(screen.getByTestId('parcel')).toHaveTextContent('form-lifecycle');
+
+    // Replace the workspace at index 0, as happens when a workspace is closed and
+    // another is opened in quick succession.
+    const admitWorkspace = makeOpenedWorkspace('admit-workspace', 'uuid-admit');
+    rerender(<ActiveWorkspaceWindow openedWindow={makeOpenedWindow([admitWorkspace])} showActionMenu={false} />);
+
+    // While the admit lifecycle is still loading, the stale form lifecycle must not
+    // be mounted for the admit workspace.
+    expect(screen.queryByTestId('parcel')).not.toBeInTheDocument();
+
+    await act(async () => {
+      resolveAdmit({ name: 'admit-lifecycle' });
+      await Promise.resolve();
+    });
+    expect(screen.getByTestId('parcel')).toHaveTextContent('admit-lifecycle');
+  });
+});