@openmrs/esm-styleguide 8.0.1-pre.3648 → 8.0.1-pre.3663

package/dist/workspaces2/action-menu2/action-menu2.component.d.ts

@@ -2,7 +2,9 @@
 import React from 'react';
 import { type WorkspaceGroupDefinition2 } from '@openmrs/esm-globals';
 export interface ActionMenuProps {
-    workspaceGroup: WorkspaceGroupDefinition2;
+    workspaceGroup: WorkspaceGroupDefinition2 & {
+        moduleName: string;
+    };
     groupProps: Record<string, any> | null;
 }
 /**

package/dist/workspaces2/workspace2.d.ts

@@ -75,6 +75,10 @@ type PromptReason = {
     explicit: boolean;
     windowName: string;
     workspaceName: string;
+} | {
+    reason: 'CLOSE_OTHER_WINDOWS';
+    explicit: false;
+    windowNameToSpare: string;
 };
 /**
  * A user can perform actions that explicitly result in closing workspaces

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "8.0.1-pre.3648",
+  "version": "8.0.1-pre.3663",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "main": "dist/openmrs-esm-styleguide.js",
@@ -98,17 +98,17 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "8.0.1-pre.3648",
-    "@openmrs/esm-config": "8.0.1-pre.3648",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3648",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3648",
-    "@openmrs/esm-extensions": "8.0.1-pre.3648",
-    "@openmrs/esm-globals": "8.0.1-pre.3648",
-    "@openmrs/esm-navigation": "8.0.1-pre.3648",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3648",
-    "@openmrs/esm-state": "8.0.1-pre.3648",
-    "@openmrs/esm-translations": "8.0.1-pre.3648",
-    "@openmrs/esm-utils": "8.0.1-pre.3648",
+    "@openmrs/esm-api": "8.0.1-pre.3663",
+    "@openmrs/esm-config": "8.0.1-pre.3663",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3663",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3663",
+    "@openmrs/esm-extensions": "8.0.1-pre.3663",
+    "@openmrs/esm-globals": "8.0.1-pre.3663",
+    "@openmrs/esm-navigation": "8.0.1-pre.3663",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3663",
+    "@openmrs/esm-state": "8.0.1-pre.3663",
+    "@openmrs/esm-translations": "8.0.1-pre.3663",
+    "@openmrs/esm-utils": "8.0.1-pre.3663",
     "@rspack/cli": "^1.3.11",
     "@rspack/core": "^1.3.11",
     "@types/geopattern": "^1.2.9",

package/src/workspaces2/action-menu2/action-menu-button2.component.tsx

@@ -3,7 +3,7 @@ import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { Button, IconButton } from '@carbon/react';
 import { SingleSpaContext } from 'single-spa-react';
-import { useLayoutType } from '@openmrs/esm-react-utils';
+import { ComponentContext, useLayoutType } from '@openmrs/esm-react-utils';
 import { type OpenedWindow } from '@openmrs/esm-extensions';
 import { launchWorkspace2, useWorkspace2Store } from '../workspace2';
 import styles from './action-menu-button2.module.scss';
@@ -72,10 +72,8 @@ export const ActionMenuButton2: React.FC<ActionMenuButtonProps2> = ({
   const layout = useLayoutType();
   const { openedWindows, restoreWindow, isMostRecentlyOpenedWindowHidden } = useWorkspace2Store();
 
-  // name of the window that the button is associated with
-  const { windowName } = useContext(SingleSpaContext);
-
-  const openedWindowIndex = openedWindows.findIndex((w) => w.windowName === windowName);
+  const { extension } = useContext(ComponentContext);
+  const openedWindowIndex = openedWindows.findIndex((w) => w.windowName === extension?.extensionId);
   // can be undefined if the window is not opened
   const window: OpenedWindow | undefined = openedWindows[openedWindowIndex];
   const isWindowOpened = window != null;

package/src/workspaces2/action-menu2/action-menu2.component.tsx

@@ -4,15 +4,16 @@ import Parcel from 'single-spa-react/parcel';
 import { IconButton } from '@carbon/react';
 import { mountRootParcel } from 'single-spa';
 import { loadLifeCycles } from '@openmrs/esm-routes';
-import { isDesktop, useLayoutType } from '@openmrs/esm-react-utils';
+import { ComponentContext, isDesktop, useLayoutType } from '@openmrs/esm-react-utils';
 import { type WorkspaceGroupDefinition2 } from '@openmrs/esm-globals';
 import { getCoreTranslation } from '@openmrs/esm-translations';
 import { closeWorkspaceGroup2, useWorkspace2Store } from '../workspace2';
 import { CloseIcon } from '../../icons';
 import styles from './action-menu2.module.scss';
+import { ExtensionSlot } from '@openmrs/esm-framework';
 
 export interface ActionMenuProps {
-  workspaceGroup: WorkspaceGroupDefinition2;
+  workspaceGroup: WorkspaceGroupDefinition2 & { moduleName: string };
   groupProps: Record<string, any> | null;
 }
 
@@ -48,15 +49,14 @@ export function ActionMenu({ workspaceGroup, groupProps }: ActionMenuProps) {
             <CloseIcon />
           </IconButton>
         )}
-        {windowsWithIcons.map((window) => (
-          <Parcel
-            key={window.icon}
-            config={() => loadLifeCycles(window.moduleName, window.icon)}
-            mountParcel={mountRootParcel}
-            windowName={window.name}
-            groupProps={groupProps}
-          />
-        ))}
+        <ComponentContext.Provider
+          value={{
+            moduleName: workspaceGroup.moduleName,
+            featureName: workspaceGroup.name,
+          }}
+        >
+          <ExtensionSlot name={workspaceGroup.name} state={{ groupProps }} />
+        </ComponentContext.Provider>
       </div>
       {isClosable && !isDesktop(layout) && (
         <IconButton

package/src/workspaces2/workspace2.component.tsx

@@ -115,7 +115,8 @@ export const Workspace2: React.FC<Workspace2Props> = ({ title, children, hasUnsa
   }
 
   const { icon, canMaximize } = windowDef;
-  const canHide = !!icon;
+  const canCloseGroup = group.persistence === 'closable';
+  const canHide = !!icon && !canCloseGroup;
   const { maximized } = openedWindow;
   const width = windowDef?.width ?? 'narrow';
 
@@ -173,12 +174,14 @@ export const Workspace2: React.FC<Workspace2Props> = ({ title, children, hasUnsa
                         <ArrowRightIcon />
                       </HeaderGlobalAction>
                     ) : (
-                      <HeaderGlobalAction
-                        aria-label={getCoreTranslation('close')}
-                        onClick={() => closeWorkspace({ closeWindow: true })}
-                      >
-                        <CloseIcon />
-                      </HeaderGlobalAction>
+                      !canCloseGroup && (
+                        <HeaderGlobalAction
+                          aria-label={getCoreTranslation('close')}
+                          onClick={() => closeWorkspace({ closeWindow: true })}
+                        >
+                          <CloseIcon />
+                        </HeaderGlobalAction>
+                      )
                     )}
                   </>
                 ) : (

package/src/workspaces2/workspace2.ts

@@ -272,6 +272,33 @@ export async function launchWorkspace2<
         return false;
       }
     }
+  } else if (groupDef.persistence == 'closable') {
+    const okToCloseWorkspaces = await promptForClosingWorkspaces({
+      reason: 'CLOSE_OTHER_WINDOWS',
+      explicit: false,
+      windowNameToSpare: windowDef.name,
+    });
+    if (okToCloseWorkspaces) {
+      workspace2Store.setState({
+        ...storeState,
+        openedGroup: {
+          groupName: groupDef.name,
+          props: groupProps ?? storeState?.openedGroup?.props ?? null,
+        },
+        openedWindows: [
+          {
+            windowName: windowName,
+            openedWorkspaces: [newOpenedWorkspace(workspaceName, workspaceProps)], // root workspace at index 0
+            props: windowProps,
+            maximized: false,
+          },
+        ],
+        isMostRecentlyOpenedWindowHidden: false,
+      });
+      return true;
+    } else {
+      return false;
+    }
   } else {
     workspace2Store.setState({
       ...storeState,
@@ -316,7 +343,8 @@ function arePropsCompatible(a: Record<string, any> | null, b: Record<string, any
 type PromptReason =
   | { reason: 'CLOSE_WORKSPACE_GROUP'; explicit: boolean }
   | { reason: 'CLOSE_WINDOW'; explicit: boolean; windowName: string }
-  | { reason: 'CLOSE_WORKSPACE'; explicit: boolean; windowName: string; workspaceName: string };
+  | { reason: 'CLOSE_WORKSPACE'; explicit: boolean; windowName: string; workspaceName: string }
+  | { reason: 'CLOSE_OTHER_WINDOWS'; explicit: false; windowNameToSpare: string };
 
 /**
  * A user can perform actions that explicitly result in closing workspaces
@@ -340,7 +368,7 @@ export function promptForClosingWorkspaces(promptReason: PromptReason): Promise<
     for (let i = openedWindow.openedWorkspaces.length - 1; i >= 0; i--) {
       const openedWorkspace = openedWindow.openedWorkspaces[i];
 
-      if (openedWorkspace.hasUnsavedChanges || !promptReason.explicit) {
+      if (openedWorkspace.hasUnsavedChanges) {
         ret.push(openedWorkspace);
       }
       if (onlyUpToThisWorkspace && openedWorkspace.workspaceName === onlyUpToThisWorkspace) {
@@ -371,6 +399,12 @@ export function promptForClosingWorkspaces(promptReason: PromptReason): Promise<
         throw new Error(`Window ${promptReason.windowName} not found in opened windows.`);
       }
       affectedWorkspaces = getAffectedWorkspacesInWindow(openedWindow, promptReason.workspaceName);
+      break;
+    }
+    case 'CLOSE_OTHER_WINDOWS': {
+      const windowsToClose = openedWindows.filter((window) => window.windowName !== promptReason.windowNameToSpare);
+      affectedWorkspaces = windowsToClose.flatMap((w) => getAffectedWorkspacesInWindow(w));
+      break;
     }
   }