@openmrs/esm-styleguide 8.0.1-pre.3717 → 8.0.1-pre.3727

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

@@ -12,6 +12,6 @@ export interface ActionMenuProps {
  * for a workspace group. The action menu is only rendered when at least one
  * window in the workspace group has an icon defined.
  */
-export declare function ActionMenu({ workspaceGroup, groupProps }: ActionMenuProps): React.JSX.Element | null;
+export declare function ActionMenu({ workspaceGroup, groupProps }: ActionMenuProps): React.JSX.Element;
 export default ActionMenu;
 //# sourceMappingURL=action-menu2.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"action-menu2.component.d.ts","sourceRoot":"","sources":["../../../src/workspaces2/action-menu2/action-menu2.component.tsx"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAOtE,MAAM,WAAW,eAAe;IAC9B,cAAc,EAAE,yBAAyB,GAAG;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;CACxC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,EAAE,eAAe,4BAsCzE;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"action-menu2.component.d.ts","sourceRoot":"","sources":["../../../src/workspaces2/action-menu2/action-menu2.component.tsx"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAOtE,MAAM,WAAW,eAAe;IAC9B,cAAc,EAAE,yBAAyB,GAAG;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC;CACxC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,EAAE,eAAe,qBA8BzE;AAED,eAAe,UAAU,CAAC"}

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { type OpenedWindow } from '@openmrs/esm-extensions';
 interface WorkspaceWindowProps {
     openedWindow: OpenedWindow;
+    showActionMenu: boolean;
 }
 /**
  * Renders an opened workspace window.

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;CAC5B;AACD;;GAEG;AACH,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4BzD,CAAC;AAyGF,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,CA6BzD,CAAC;AA6GF,eAAe,qBAAqB,CAAC"}

package/dist/workspaces2/workspace2.component.d.ts

@@ -32,6 +32,7 @@ export interface Workspace2DefinitionProps<WorkspaceProps extends object = objec
     workspaceName: string;
     windowName: string;
     isRootWorkspace: boolean;
+    showActionMenu: boolean;
 }
 /**
  * @experimental

package/dist/workspaces2/workspace2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workspace2.component.d.ts","sourceRoot":"","sources":["../../src/workspaces2/workspace2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWzD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB,CACxC,cAAc,SAAS,MAAM,GAAG,MAAM,EACtC,WAAW,SAAS,MAAM,GAAG,MAAM,EACnC,UAAU,SAAS,MAAM,GAAG,MAAM;IAElC;;;;;;OAMG;IACH,oBAAoB,CAAC,KAAK,SAAS,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAEhG;;;;;OAKG;IACH,cAAc,CAAC,OAAO,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,OAAO,CAAC;QAAC,qBAAqB,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAEvG,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,CAC9B,cAAc,SAAS,MAAM,EAC7B,WAAW,SAAS,MAAM,EAC1B,UAAU,SAAS,MAAM,IACvB,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,cAAc,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;AAEjF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0JhD,CAAC"}
+{"version":3,"file":"workspace2.component.d.ts","sourceRoot":"","sources":["../../src/workspaces2/workspace2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWzD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB,CACxC,cAAc,SAAS,MAAM,GAAG,MAAM,EACtC,WAAW,SAAS,MAAM,GAAG,MAAM,EACnC,UAAU,SAAS,MAAM,GAAG,MAAM;IAElC;;;;;;OAMG;IACH,oBAAoB,CAAC,KAAK,SAAS,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAEhG;;;;;OAKG;IACH,cAAc,CAAC,OAAO,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,OAAO,CAAC;QAAC,qBAAqB,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAEvG,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,CAC9B,cAAc,SAAS,MAAM,EAC7B,WAAW,SAAS,MAAM,EAC1B,UAAU,SAAS,MAAM,IACvB,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,cAAc,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;AAEjF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2JhD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "8.0.1-pre.3717",
+  "version": "8.0.1-pre.3727",
   "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.3717",
-    "@openmrs/esm-config": "8.0.1-pre.3717",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3717",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3717",
-    "@openmrs/esm-extensions": "8.0.1-pre.3717",
-    "@openmrs/esm-globals": "8.0.1-pre.3717",
-    "@openmrs/esm-navigation": "8.0.1-pre.3717",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3717",
-    "@openmrs/esm-state": "8.0.1-pre.3717",
-    "@openmrs/esm-translations": "8.0.1-pre.3717",
-    "@openmrs/esm-utils": "8.0.1-pre.3717",
+    "@openmrs/esm-api": "8.0.1-pre.3727",
+    "@openmrs/esm-config": "8.0.1-pre.3727",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3727",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3727",
+    "@openmrs/esm-extensions": "8.0.1-pre.3727",
+    "@openmrs/esm-globals": "8.0.1-pre.3727",
+    "@openmrs/esm-navigation": "8.0.1-pre.3727",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3727",
+    "@openmrs/esm-state": "8.0.1-pre.3727",
+    "@openmrs/esm-translations": "8.0.1-pre.3727",
+    "@openmrs/esm-utils": "8.0.1-pre.3727",
     "@rspack/cli": "^1.3.11",
     "@rspack/core": "^1.3.11",
     "@types/geopattern": "^1.2.9",

package/src/dashboard-extension/dashboard.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { DashboardExtension } from './index';
+
+describe('DashboardExtension', () => {
+  describe('Basic Rendering', () => {
+    it('renders with required props (path and title)', () => {
+      renderDashboardExtension('/base', 'dashboard', 'Dashboard', '/base');
+      expect(screen.getByText('Dashboard')).toBeInTheDocument();
+      const link = screen.getByRole('link');
+      expect(link).toBeInTheDocument();
+    });
+
+    it('renders ConfigurableLink with correct href', () => {
+      renderDashboardExtension('/base', 'dashboard', 'Dashboard', '/base');
+
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('href', '/base/dashboard');
+    });
+  });
+
+  describe('Active State Logic', () => {
+    it('is active when current pathname matches dashboard path', () => {
+      renderDashboardExtension('/base/dashboard', 'dashboard', 'Dashboard', '/base');
+
+      const link = screen.getByRole('link');
+      expect(link).toHaveClass('active-left-nav-link');
+    });
+
+    it('is active when path segments match (partial match)', () => {
+      renderDashboardExtension('/base/dashboard/patients', 'patients', 'Dashboard', '/base');
+
+      const link = screen.getByRole('link');
+      expect(link).toHaveClass('active-left-nav-link');
+    });
+
+    it('is not active when path does not match', () => {
+      renderDashboardExtension('/base/other', 'dashboard', 'Dashboard', '/base');
+
+      const link = screen.getByRole('link');
+      expect(link).not.toHaveClass('active-left-nav-link');
+    });
+
+    it('handles empty path (returns false)', () => {
+      renderDashboardExtension('/base', '', 'Dashboard', '/base');
+
+      const link = screen.getByRole('link');
+      expect(link).not.toHaveClass('active-left-nav-link');
+    });
+
+    it('handles path with encoded characters in location', () => {
+      renderDashboardExtension('/base/dashboard%20%26%20test', 'dashboard & test', 'Dashboard', '/base');
+
+      const link = screen.getByRole('link');
+      expect(link).toHaveClass('active-left-nav-link');
+      expect(link).toHaveAttribute('href', '/base/dashboard%20%26%20test');
+    });
+  });
+});
+
+const renderDashboardExtension = (browserPath: string, path: string, title: string, basePath: string) => {
+  render(
+    <MemoryRouter initialEntries={[browserPath]}>
+      <DashboardExtension path={path} title={title} basePath={basePath} />
+    </MemoryRouter>,
+  );
+};

package/src/dashboard-extension/index.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { BrowserRouter, useLocation } from 'react-router-dom';
-import { shallowEqual } from '@openmrs/esm-utils';
 import { ConfigurableLink, MaybeIcon } from '@openmrs/esm-framework';
 import { type IconId } from '../icons';
 import styles from './dashboard.module.scss';
@@ -26,13 +25,14 @@ export const DashboardExtension = ({ path, title, basePath, icon }: DashboardExt
     if (p.startsWith('http')) {
       return p === window.location.href;
     }
-    const paths = p.split('/').map((s) => decodeURIComponent(s));
-
-    const localPath = (location.pathname ?? '')
+    const pathSegments = p.split('/').map((s) => decodeURIComponent(s));
+    const localSegments = (location.pathname ?? '')
       .split('/')
-      .slice(-1 * paths.length)
+      .slice(1)
       .map((s) => decodeURIComponent(s));
-    return shallowEqual(paths, localPath);
+
+    // Check if pathSegments appear as a contiguous slice anywhere in localSegments
+    return localSegments.some((_, i) => pathSegments.every((seg, j) => localSegments[i + j] === seg));
   }, [location.pathname, path]);
 
   return (

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

@@ -23,17 +23,9 @@ export interface ActionMenuProps {
  * window in the workspace group has an icon defined.
  */
 export function ActionMenu({ workspaceGroup, groupProps }: ActionMenuProps) {
-  const { registeredWindowsByName } = useWorkspace2Store();
   const layout = useLayoutType();
-  const { name: groupName, persistence } = workspaceGroup;
+  const { name: persistence } = workspaceGroup;
 
-  const windowsWithIcons = Object.values(registeredWindowsByName)
-    .filter((window): window is Required<typeof window> => window.group === groupName && window.icon !== undefined)
-    .sort((a, b) => (a.order ?? Number.MAX_VALUE) - (b.order ?? Number.MAX_VALUE));
-
-  if (windowsWithIcons.length === 0) {
-    return null; // No icons to display
-  }
   const isClosable = persistence == 'closable';
 
   return (

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

@@ -12,11 +12,12 @@ import styles from './workspace2.module.scss';
 
 interface WorkspaceWindowProps {
   openedWindow: OpenedWindow;
+  showActionMenu: boolean;
 }
 /**
  * Renders an opened workspace window.
  */
-const ActiveWorkspaceWindow: React.FC<WorkspaceWindowProps> = ({ openedWindow }) => {
+const ActiveWorkspaceWindow: React.FC<WorkspaceWindowProps> = ({ openedWindow, showActionMenu }) => {
   const { openedWorkspaces } = openedWindow;
   const [lifeCycles, setLifeCycles] = useState<ParcelConfig[]>();
   const { registeredWorkspacesByName } = workspace2Store.getState();
@@ -40,6 +41,7 @@ const ActiveWorkspaceWindow: React.FC<WorkspaceWindowProps> = ({ openedWindow })
           lifeCycle={lifeCycles && lifeCycles[i] ? lifeCycles[i] : undefined}
           isRootWorkspace={i === 0}
           isLeafWorkspace={i === openedWorkspaces.length - 1}
+          showActionMenu={showActionMenu}
         />
       ))}
     </>
@@ -52,6 +54,7 @@ interface ActiveWorkspaceProps {
   openedWindow: OpenedWindow;
   isRootWorkspace: boolean;
   isLeafWorkspace: boolean;
+  showActionMenu: boolean;
 }
 
 const ActiveWorkspace: React.FC<ActiveWorkspaceProps> = ({
@@ -60,6 +63,7 @@ const ActiveWorkspace: React.FC<ActiveWorkspaceProps> = ({
   openedWindow,
   isRootWorkspace,
   isLeafWorkspace,
+  showActionMenu,
 }) => {
   const { openedGroup, closeWorkspace, openChildWorkspace } = useWorkspace2Store();
 
@@ -108,6 +112,7 @@ const ActiveWorkspace: React.FC<ActiveWorkspaceProps> = ({
         isRootWorkspace,
         isLeafWorkspace,
         windowName: openedWindow.windowName,
+        showActionMenu,
       },
     [openedWorkspace, closeWorkspace, openedGroup, openedWindow],
   );
@@ -132,6 +137,7 @@ const ActiveWorkspace: React.FC<ActiveWorkspaceProps> = ({
         <div
           className={classNames(styles.workspaceMiddleContainer, {
             [styles.isRootWorkspace]: isRootWorkspace,
+            [styles.showActionMenu]: showActionMenu,
           })}
         >
           <div

package/src/workspaces2/workspace-windows-and-menu.component.tsx

@@ -19,7 +19,7 @@ export function renderWorkspaceWindowsAndMenu(target: HTMLElement | null) {
  * and all the active workspace windows within that group.
  */
 function WorkspaceWindowsAndMenu() {
-  const { openedGroup, openedWindows, registeredGroupsByName } = useWorkspace2Store();
+  const { openedGroup, openedWindows, registeredGroupsByName, registeredWindowsByName } = useWorkspace2Store();
 
   useEffect(() => {
     const unsubscribe = subscribeOpenmrsEvent('before-page-changed', (pageChangedEvent) => {
@@ -41,6 +41,12 @@ function WorkspaceWindowsAndMenu() {
   const group = registeredGroupsByName[openedGroup.groupName];
   const hasMaximizedWindow = openedWindows.some((window) => window.maximized);
 
+  const { name: groupName } = group;
+  const windowsWithIcons = Object.values(registeredWindowsByName)
+    .filter((window): window is Required<typeof window> => window.group === groupName && window.icon !== undefined)
+    .sort((a, b) => (a.order ?? Number.MAX_VALUE) - (b.order ?? Number.MAX_VALUE));
+  const showActionMenu = windowsWithIcons.length > 0;
+
   return (
     <div
       className={classNames(styles.workspaceWindowsAndMenuContainer, {
@@ -50,10 +56,16 @@ function WorkspaceWindowsAndMenu() {
     >
       <div className={styles.workspaceWindowsContainer}>
         {openedWindows.map((openedWindow) => {
-          return <ActiveWorkspaceWindow key={openedWindow.windowName} openedWindow={openedWindow} />;
+          return (
+            <ActiveWorkspaceWindow
+              key={openedWindow.windowName}
+              openedWindow={openedWindow}
+              showActionMenu={showActionMenu}
+            />
+          );
         })}
       </div>
-      <ActionMenu workspaceGroup={group} groupProps={openedGroup.props} />
+      {showActionMenu && <ActionMenu workspaceGroup={group} groupProps={openedGroup.props} />}
     </div>
   );
 }

package/src/workspaces2/workspace2.component.tsx

@@ -46,6 +46,7 @@ export interface Workspace2DefinitionProps<
   workspaceName: string;
   windowName: string;
   isRootWorkspace: boolean;
+  showActionMenu: boolean;
 }
 
 /**
@@ -79,7 +80,7 @@ export const Workspace2: React.FC<Workspace2Props> = ({ title, children, hasUnsa
     setWorkspaceTitle,
     isMostRecentlyOpenedWindowHidden,
   } = useWorkspace2Store();
-  const { workspaceName, isRootWorkspace, closeWorkspace } = useWorkspace2Context();
+  const { workspaceName, isRootWorkspace, closeWorkspace, showActionMenu } = useWorkspace2Context();
 
   const openedWindowIndex = getOpenedWindowIndexByWorkspace(workspaceName);
 
@@ -145,6 +146,7 @@ export const Workspace2: React.FC<Workspace2Props> = ({ title, children, hasUnsa
           [styles.maximized]: maximized,
           [styles.hidden]: isWindowHidden,
           [styles.isRootWorkspace]: isRootWorkspace,
+          [styles.showActionMenu]: showActionMenu,
         })}
       >
         <div

package/src/workspaces2/workspace2.module.scss

@@ -187,7 +187,9 @@ $extraWideWorkspaceWidth: 48.25rem;
     }
 
     // in tablet mode, reduce the height to of the workspace window to accommodate the workspace menu (bottom nav)
-    height: calc(100% - layout.$spacing-10);
+    &.showActionMenu {
+      height: calc(100% - layout.$spacing-10);
+    }
   }
 
   .workspaceInnerContainer {