Implement page type

packages/apps/esm-devtools-app/src/routes.json

@@ -3,6 +3,7 @@
   "pages": [
     {
       "component": "devtools",
+      "type": "utility",
       "route": true,
       "online": true,
       "offline": true

packages/apps/esm-implementer-tools-app/src/routes.json

@@ -3,10 +3,12 @@
   "pages": [
     {
       "component": "implementerTools",
+      "type": "utility",
       "route": true
     },
     {
       "component": "globalImplementerTools",
+      "type": "utility",
       "route": true
     }
   ],

packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.component.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Navigate } from 'react-router-dom';
 import classNames from 'classnames';
 import { HeaderContainer, Header, HeaderMenuButton, HeaderGlobalBar, HeaderGlobalAction } from '@carbon/react';
@@ -12,6 +12,7 @@ import {
   useSession,
 } from '@openmrs/esm-framework';
 import { getActiveAppNames } from '@openmrs/esm-framework/src/internal';
+import { type SingleSpaCustomEventDetail } from 'single-spa';
 import { useTranslation } from 'react-i18next';
 import { isDesktop } from '../../utils';
 import AppMenuPanel from '../navbar-header-panels/app-menu-panel.component';
@@ -23,32 +24,61 @@ import UserMenuPanel from '../navbar-header-panels/user-menu-panel.component';
 import SideMenuPanel from '../navbar-header-panels/side-menu-panel.component';
 import styles from './navbar.scss';
 
-const defaultLeftNavSlot = 'default-dashboard-slot';
+const defaultLeftNavSlot = 'default-left-nav-slot';
 
 const HeaderItems: React.FC = () => {
   const { t } = useTranslation();
   const config = useConfig();
   const [activeHeaderPanel, setActiveHeaderPanel] = useState<string>(null);
   const layout = useLayoutType();
   const appMenuItems = useConnectedExtensions('app-menu-slot');
-  const activePages = getActiveAppNames();
-  const pageLeftNavSlot = activePages && activePages.length > 0 ? `${activePages[0]}-dashboard-slot` : undefined;
+
+  const [pageLeftNavSlot, setPageLeftNavSlot] = useState<string | null>(null);
   const leftNavItems = useConnectedExtensions(pageLeftNavSlot);
   const defaultLeftNavItems = useConnectedExtensions(defaultLeftNavSlot);
   const userMenuItems = useConnectedExtensions('user-panel-slot');
   const isActivePanel = useCallback((panelName: string) => activeHeaderPanel === panelName, [activeHeaderPanel]);
 
+  /*
+   * Utility callback used to set or unset the active panel
+   */
   const togglePanel = useCallback((panelName: string) => {
     setActiveHeaderPanel((activeHeaderPanel) => (activeHeaderPanel === panelName ? null : panelName));
   }, []);
 
+  /*
+   * Utility call back used to hide the named panel if it is the active panel.
+   */
   const hidePanel = useCallback(
     (panelName: string) => () => {
       setActiveHeaderPanel((activeHeaderPanel) => (activeHeaderPanel === panelName ? null : activeHeaderPanel));
     },
     [],
   );
 
+  /*
+   * The left nav is driven by which main page is active. This hook sets the slot name for the current screen
+   * based on page. We add an event listener to listen to single-spa app changes to update the left nav accordingly.
+   */
+  useEffect(() => {
+    {
+      const activePages = getActiveAppNames();
+      setPageLeftNavSlot(activePages && activePages.length > 0 ? `${activePages[0]}-left-nav-slot` : null);
+    }
+
+    return window.addEventListener('single-spa:app-change', (evt: Event & { detail: SingleSpaCustomEventDetail }) => {
+      if (evt.detail.totalAppChanges > 0) {
+        const activePages = getActiveAppNames(undefined, evt.detail.appsByNewStatus['MOUNTED']);
+        setPageLeftNavSlot(activePages && activePages.length > 0 ? `${activePages[0]}-left-nav-slot` : null);
+      }
+    });
+  }, []);
+
+  /*
+   * In addition to the logic based on which apps are active, we implement a default left nav slot that is used
+   * if either the page has no corresponding left nav slot or the left nav slot is empty. This means that the
+   * default left nav slot can be used to provide a default for every application.
+   */
   const leftNavSlot = useMemo(() => {
     if (leftNavItems.length > 0) {
       return pageLeftNavSlot;
@@ -57,8 +87,11 @@ const HeaderItems: React.FC = () => {
     }
 
     return null;
-  }, [pageLeftNavSlot.length, defaultLeftNavSlot.length]);
+  }, [leftNavItems.length, defaultLeftNavSlot.length, pageLeftNavSlot]);
+
+  // in desktop mode, the left nav is rendered if either the page slot or the default slot has extensions
   const showLeftNav = useMemo(() => isDesktop(layout) && leftNavSlot !== null, [layout, leftNavSlot]);
+  // in non-desktop mode, the left nav is rendered as a hamburger menu if either the page slot or default slot has extensions
   const showHamburgerMenu = useMemo(() => !isDesktop(layout) && leftNavSlot !== null, [layout, leftNavSlot]);
   const showAppMenu = useMemo(() => appMenuItems.length > 0, [appMenuItems.length]);
   const showUserMenu = useMemo(() => userMenuItems.length > 0, [userMenuItems.length]);
@@ -78,7 +111,7 @@ const HeaderItems: React.FC = () => {
           />
         )}
         <ConfigurableLink to={config.logo.link}>
-          <div className={showHamburgerMenu ? '' : styles.spacedLogo}>
+          <div className={classNames({ [styles.spacedLogo]: showHamburgerMenu })}>
             <Logo />
           </div>
         </ConfigurableLink>

packages/apps/esm-primary-navigation-app/src/routes.json

@@ -7,13 +7,15 @@
     {
       "component": "root",
       "routeRegex": "^(?!login/?)",
+      "type": "utility",
       "online": true,
       "offline": true,
       "order": 0
     },
     {
       "component": "redirect",
       "routeRegex": "^$",
+      "type": "utility",
       "online": true,
       "offline": true,
       "order": 0

packages/framework/esm-framework/docs/API.md

@@ -178,6 +178,7 @@
 
 ### Other Functions
 
+- [LeftNavMenu](API.md#leftnavmenu)
 - [setLeftNav](API.md#setleftnav)
 - [unsetLeftNav](API.md#unsetleftnav)
 
@@ -511,7 +512,7 @@ component.
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:175](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L175)
+[packages/framework/esm-globals/src/types.ts:194](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L194)
 
 ___
 
@@ -533,31 +534,31 @@ A definition of an extension as extracted from an app's routes.json
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:200](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L200)
+[packages/framework/esm-globals/src/types.ts:219](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L219)
 
 ___
 
 ### Loadable
 
-Ƭ **Loadable**<`LoadResult`\>: () => `Promise`<`LifeCycles`<`LoadResult`\> & { `default`: `LifeCycles`<`LoadResult`\>  }\>
+Ƭ **Loadable**<`LoadResult`\>: () => `Promise`<`LifeCycles`<`LoadResult`\>\>
 
 #### Type parameters
 
 | Name | Type |
 | :------ | :------ |
-| `LoadResult` | {} |
+| `LoadResult` | `unknown` |
 
 #### Type declaration
 
-▸ (): `Promise`<`LifeCycles`<`LoadResult`\> & { `default`: `LifeCycles`<`LoadResult`\>  }\>
+▸ (): `Promise`<`LifeCycles`<`LoadResult`\>\>
 
 ##### Returns
 
-`Promise`<`LifeCycles`<`LoadResult`\> & { `default`: `LifeCycles`<`LoadResult`\>  }\>
+`Promise`<`LifeCycles`<`LoadResult`\>\>
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:169](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L169)
+[packages/framework/esm-globals/src/types.ts:188](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L188)
 
 ___
 
@@ -569,7 +570,7 @@ A definition of a modal as extracted from an app's routes.json
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:244](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L244)
+[packages/framework/esm-globals/src/types.ts:263](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L263)
 
 ___
 
@@ -582,19 +583,19 @@ Basically, this is the same as the app routes, with each routes definition keyed
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:313](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L313)
+[packages/framework/esm-globals/src/types.ts:345](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L345)
 
 ___
 
 ### PageDefinition
 
-Ƭ **PageDefinition**: { `component`: `string` ; `offline?`: `boolean` ; `online?`: `boolean` ; `order?`: `number`  } & { `route`: `string` \| `boolean` ; `routeRegex?`: `never`  } \| { `route?`: `never` ; `routeRegex`: `string`  }
+Ƭ **PageDefinition**: { `component`: `string` ; `offline?`: `boolean` ; `online?`: `boolean` ; `order?`: `number` ; `type?`: `PageType`  } & { `route`: `string` \| `boolean` ; `routeRegex?`: `never`  } \| { `route?`: `never` ; `routeRegex`: `string`  }
 
 A definition of a page extracted from an app's routes.json
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:116](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L116)
+[packages/framework/esm-globals/src/types.ts:118](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L118)
 
 ___
 
@@ -615,18 +616,6 @@ ___
 
 ___
 
-### RegisteredPageDefinition
-
-Ƭ **RegisteredPageDefinition**: `Omit`<[`PageDefinition`](API.md#pagedefinition), ``"order"``\> & `AppComponent` & { `order`: `number`  }
-
-A definition of a page after the app has been registered.
-
-#### Defined in
-
-[packages/framework/esm-globals/src/types.ts:167](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L167)
-
-___
-
 ### SpaEnvironment
 
 Ƭ **SpaEnvironment**: ``"production"`` \| ``"development"`` \| ``"test"``
@@ -703,7 +692,7 @@ A definition of a workspace as extracted from an app's routes.json
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:257](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L257)
+[packages/framework/esm-globals/src/types.ts:276](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L276)
 
 ___
 
@@ -713,7 +702,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:252](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L252)
+[packages/framework/esm-globals/src/types.ts:271](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L271)
 
 ___
 
@@ -1052,16 +1041,6 @@ ___
 
 ___
 
-### OpenmrsDatePicker
-
-• `Const` **OpenmrsDatePicker**: `React.FC`<`OpenmrsDatePickerProps`\>
-
-#### Defined in
-
-[packages/framework/esm-styleguide/src/datepicker/openmrs/openmrs-date-picker.component.tsx:41](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/datepicker/openmrs/openmrs-date-picker.component.tsx#L41)
-
-___
-
 ### backendDependencies
 
 • `Const` **backendDependencies**: `Object`
@@ -4649,6 +4628,20 @@ ___
 
 ## Other Functions
 
+### LeftNavMenu
+
+▸ **LeftNavMenu**(): ``null``
+
+#### Returns
+
+``null``
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/left-nav/index.tsx:1](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/left-nav/index.tsx#L1)
+
+___
+
 ### setLeftNav
 
 ▸ **setLeftNav**(): `void`
@@ -4661,7 +4654,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-pages/src/pages.ts:73](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-pages/src/pages.ts#L73)
+[packages/framework/esm-pages/src/pages.ts:79](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-pages/src/pages.ts#L79)
 
 ___
 
@@ -4677,7 +4670,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-pages/src/pages.ts:76](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-pages/src/pages.ts#L76)
+[packages/framework/esm-pages/src/pages.ts:82](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-pages/src/pages.ts#L82)
 
 ___
 

packages/framework/esm-framework/docs/interfaces/ExtensionRegistration.md

@@ -30,7 +30,7 @@ ___
 
 ### load
 
-• **load**: [`Loadable`](../API.md#loadable)<{}\>
+• **load**: [`Loadable`](../API.md#loadable)<`unknown`\>
 
 #### Defined in
 

packages/framework/esm-framework/docs/interfaces/OpenmrsAppRoutes.md

@@ -25,7 +25,7 @@ A list of backend modules necessary for this frontend module and the correspondi
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:290](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L290)
+[packages/framework/esm-globals/src/types.ts:322](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L322)
 
 ___
 
@@ -37,7 +37,7 @@ An array of all extensions supported by this frontend module. Extensions can be
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:298](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L298)
+[packages/framework/esm-globals/src/types.ts:330](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L330)
 
 ___
 
@@ -49,7 +49,7 @@ An array of all modals supported by this frontend module. Modals can be launched
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:302](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L302)
+[packages/framework/esm-globals/src/types.ts:334](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L334)
 
 ___
 
@@ -61,7 +61,7 @@ An array of all pages supported by this frontend module. Pages are automatically
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:294](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L294)
+[packages/framework/esm-globals/src/types.ts:326](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L326)
 
 ___
 
@@ -73,7 +73,7 @@ The version of this frontend module.
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:286](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L286)
+[packages/framework/esm-globals/src/types.ts:318](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L318)
 
 ___
 
@@ -85,4 +85,4 @@ An array of all workspaces supported by this frontend module. Workspaces can be
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:306](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L306)
+[packages/framework/esm-globals/src/types.ts:338](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L338)

packages/framework/esm-framework/docs/interfaces/ResourceLoader.md

@@ -20,4 +20,4 @@
 
 #### Defined in
 
-[packages/framework/esm-globals/src/types.ts:316](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L316)
+[packages/framework/esm-globals/src/types.ts:348](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-globals/src/types.ts#L348)