@digihmis/esm-primary-navigation-app 1.0.0

package/src/components/navbar/navbar.component.tsx

@@ -0,0 +1,123 @@
+import { Header, HeaderContainer, HeaderGlobalBar, HeaderMenuButton } from '@carbon/react';
+import {
+  ConfigurableLink,
+  ExtensionSlot,
+  useAssignedExtensions,
+  useConfig,
+  useLayoutType,
+  useLeftNavStore,
+  useSession,
+} from '@openmrs/esm-framework';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Navigate } from 'react-router-dom';
+import { isDesktop } from '../../utils';
+import Logo from '../logo/logo.component';
+import NotificationsMenuPanel from '../navbar-header-panels/notifications-menu-panel.component';
+import SideMenuPanel from '../navbar-header-panels/side-menu-panel.component';
+import styles from './navbar.scss';
+
+const HeaderItems: React.FC = () => {
+  const config = useConfig();
+  const [activeHeaderPanel, setActiveHeaderPanel] = useState<string>(null);
+  const layout = useLayoutType();
+  const { slotName, mode } = useLeftNavStore();
+  const navMenuItems = useAssignedExtensions(slotName);
+  const isActivePanel = useCallback((panelName: string) => activeHeaderPanel === panelName, [activeHeaderPanel]);
+
+  const togglePanel = useCallback((panelName: string) => {
+    setActiveHeaderPanel((activeHeaderPanel) => (activeHeaderPanel === panelName ? null : panelName));
+  }, []);
+
+  const hidePanel = useCallback(
+    (panelName: string) => () => {
+      setActiveHeaderPanel((activeHeaderPanel) => (activeHeaderPanel === panelName ? null : activeHeaderPanel));
+    },
+    [],
+  );
+
+  const showHamburger = useMemo(
+    () => (!isDesktop(layout) || mode === 'collapsed') && mode !== 'hidden' && navMenuItems.length > 0,
+    [navMenuItems.length, layout, mode],
+  );
+
+  return (
+    <>
+      <Header aria-label="OpenMRS" className={styles.topNavHeader}>
+        {showHamburger && (
+          <HeaderMenuButton
+            aria-label="Open menu"
+            isCollapsible
+            className={styles.headerMenuButton}
+            onClick={() => {
+              togglePanel('sideMenu');
+            }}
+            onMouseDown={(e) => e.stopPropagation()}
+            onTouchStart={(e) => e.stopPropagation()}
+            isActive={isActivePanel('sideMenu')}
+          />
+        )}
+        <ConfigurableLink to={config.logo.link}>
+          <div className={showHamburger ? '' : styles.spacedLogo}>
+            <Logo />
+          </div>
+        </ConfigurableLink>
+        <div className={styles.divider} />
+        <ExtensionSlot name="top-nav-info-slot" className={styles.topNavInfoSlot} />
+        <HeaderGlobalBar className={styles.headerGlobalBar}>
+          <ExtensionSlot
+            name="top-nav-actions-slot"
+            state={{ isActivePanel, togglePanel, hidePanel }}
+            className={styles.topNavActionsSlot}
+          />
+          <ExtensionSlot
+            name="notifications-menu-button-slot"
+            state={{
+              isActivePanel: isActivePanel,
+              togglePanel: togglePanel,
+            }}
+          />
+          <ExtensionSlot
+            name="top-nav-app-menu-slot"
+            state={{ isActivePanel, togglePanel, hidePanel }}
+            className={styles.topNavActionsSlot}
+          />
+          <SideMenuPanel hidePanel={hidePanel('sideMenu')} expanded={isActivePanel('sideMenu')} />
+          <NotificationsMenuPanel expanded={isActivePanel('notificationsMenu')} />
+        </HeaderGlobalBar>
+      </Header>
+    </>
+  );
+};
+
+const Navbar: React.FC = () => {
+  const session = useSession();
+  const openmrsSpaBase = window['getOpenmrsSpaBase']();
+
+  if (session?.user?.person) {
+    return session.sessionLocation ? (
+      <HeaderContainer render={HeaderItems}></HeaderContainer>
+    ) : (
+      <Navigate
+        to={`/login/location`}
+        state={{
+          referrer: window.location.pathname.slice(
+            window.location.pathname.indexOf(openmrsSpaBase) + openmrsSpaBase.length - 1,
+          ),
+        }}
+      />
+    );
+  }
+
+  return (
+    <Navigate
+      to={`/login`}
+      state={{
+        referrer: window.location.pathname.slice(
+          window.location.pathname.indexOf(openmrsSpaBase) + openmrsSpaBase.length - 1,
+        ),
+      }}
+    />
+  );
+};
+
+export default Navbar;

package/src/components/navbar/navbar.scss

@@ -0,0 +1,51 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.topNavActionsSlot {
+  display: flex;
+  align-items: center;
+
+  > a {
+    color: white;
+    text-decoration: none;
+    margin: 0 layout.$spacing-04;
+  }
+}
+
+.headerGlobalBarButton {
+  @include brand-02(background-color);
+}
+
+.topNavHeader {
+  top: var(--omrs-offline-banner-height);
+}
+
+.activePanel {
+  @include brand-01(background-color);
+}
+
+.headerMenuButton {
+  height: layout.$spacing-09;
+  width: layout.$spacing-09;
+  padding: layout.$spacing-04;
+  margin-inline-end: layout.$spacing-02;
+}
+
+.spacedLogo {
+  margin-inline-start: layout.$spacing-05;
+}
+
+.divider {
+  width: 1px;
+  height: layout.$spacing-06;
+  background-color: rgba(244, 244, 244, 0.4);
+  margin-inline-start: layout.$spacing-04;
+}
+
+.topNavInfoSlot {
+  gap: layout.$spacing-03;
+}
+
+.panelWrapper {
+  display: contents;
+}

package/src/components/navbar/types.ts

@@ -0,0 +1,5 @@
+export interface MenuButtonProps {
+  isActivePanel(panelName: string): boolean;
+  togglePanel(panelName: string): void;
+  hidePanel: (panelName: string) => () => void;
+}

package/src/components/navbar/user-menu-button.component.tsx

@@ -0,0 +1,44 @@
+import { HeaderGlobalAction } from '@carbon/react';
+import { CloseIcon, useAssignedExtensions, UserAvatarIcon, useOnClickOutside } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import UserMenuPanel from '../navbar-header-panels/user-menu-panel.component';
+import { type MenuButtonProps } from './types';
+import styles from './navbar.scss';
+
+/**
+ * This component displays the user menu button and the menu itself (when toggled on)
+ */
+const UserMenuButton: React.FC<MenuButtonProps> = ({ isActivePanel, togglePanel, hidePanel }) => {
+  const userMenuItems = useAssignedExtensions('user-panel-slot');
+  const showUserMenu = useMemo(() => userMenuItems.length > 0, [userMenuItems.length]);
+  const { t } = useTranslation();
+  const userMenuRef = useOnClickOutside<HTMLDivElement>(hidePanel('userMenu'), isActivePanel('userMenu'));
+
+  return (
+    showUserMenu && (
+      <div ref={userMenuRef} className={styles.panelWrapper}>
+        <HeaderGlobalAction
+          aria-label={t('userMenuTooltip', 'My Account')}
+          aria-labelledby="Users Avatar Icon"
+          className={classNames({
+            [styles.headerGlobalBarButton]: isActivePanel('userMenu'),
+            [styles.activePanel]: !isActivePanel('userMenu'),
+          })}
+          // @ts-ignore - `name` is not a valid prop for the HeaderGlobalAction component, but we need the name prop for user onboarding app to work correctly
+          name="User"
+          isActive={isActivePanel('userMenu')}
+          onClick={() => {
+            togglePanel('userMenu');
+          }}
+        >
+          {isActivePanel('userMenu') ? <CloseIcon size={20} /> : <UserAvatarIcon size={20} />}
+        </HeaderGlobalAction>
+        <UserMenuPanel expanded={isActivePanel('userMenu')} hidePanel={hidePanel('userMenu')} />
+      </div>
+    )
+  );
+};
+
+export default UserMenuButton;

package/src/components/navbar-header-panels/app-menu-panel.component.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { HeaderPanel } from '@carbon/react';
+import { Launch } from '@carbon/react/icons';
+import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
+import styles from './app-menu-panel.scss';
+
+interface AppMenuProps {
+  expanded: boolean;
+  hidePanel: () => void;
+}
+
+const AppMenuPanel: React.FC<AppMenuProps> = ({ expanded, hidePanel }) => {
+  const config = useConfig();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    window.addEventListener('popstate', hidePanel);
+    return () => window.removeEventListener('popstate', hidePanel);
+  }, [hidePanel]);
+
+  return (
+    expanded && (
+      <div style={{ display: 'inline' }}>
+        <HeaderPanel
+          className={classNames({ [styles.headerPanel]: expanded })}
+          aria-label="App Menu Panel"
+          expanded={expanded}
+        >
+          <ExtensionSlot className={styles.menuLink} name="app-menu-slot" />
+          {config?.externalRefLinks?.length > 0 && (
+            <div className={classNames(styles.menuLink, styles.externalLinks)}>
+              {config?.externalRefLinks?.map((link) => (
+                <a target="_blank" rel="noopener noreferrer" href={link?.redirect}>
+                  {t(link?.title)}
+                  <Launch size={16} className={styles.launchIcon} />
+                </a>
+              ))}
+            </div>
+          )}
+        </HeaderPanel>
+      </div>
+    )
+  );
+};
+
+export default AppMenuPanel;

package/src/components/navbar-header-panels/app-menu-panel.scss

@@ -0,0 +1,43 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.productiveHeading01 {
+  @include type.type-style('heading-compact-01');
+}
+
+.headerPanel {
+  height: max-content;
+}
+
+.primaryNavContainer {
+  height: var(--omrs-topnav-height);
+}
+
+.menuLink a {
+  display: flex;
+  padding: layout.$spacing-05;
+  height: layout.$spacing-09;
+  width: 100%;
+  text-decoration: none;
+  color: $ui-02;
+  background-color: transparent;
+  @extend .productiveHeading01;
+}
+
+.menuLink a:hover {
+  @include brand-01(background-color);
+}
+
+.externalLinks {
+  border-top: 1px solid;
+  @include brand-03(border-top-color);
+}
+
+.launchIcon {
+  margin-left: layout.$spacing-03;
+}
+
+.headerPanel {
+  width: fit-content;
+}

package/src/components/navbar-header-panels/notifications-menu-panel.component.tsx

@@ -0,0 +1,23 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { HeaderPanel, type HeaderPanelProps } from '@carbon/react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './notifications-menu.panel.scss';
+
+interface NotificationsMenuPanelProps extends HeaderPanelProps {
+  expanded: boolean;
+}
+
+const NotificationsMenuPanel: React.FC<NotificationsMenuPanelProps> = ({ expanded }) => {
+  const { t } = useTranslation();
+  const state = useMemo(() => ({ expanded }), [expanded]);
+
+  return (
+    <HeaderPanel aria-label="Notifications Panel" expanded={expanded}>
+      <h1 className={styles.heading}>{t('notifications', 'Notifications')}</h1>
+      <ExtensionSlot name="notifications-nav-menu-slot" state={state} />
+    </HeaderPanel>
+  );
+};
+
+export default NotificationsMenuPanel;

package/src/components/navbar-header-panels/notifications-menu-panel.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import NotificationsMenuPanel from './notifications-menu-panel.component';
+
+test('renders the notifications menu panel scaffold', () => {
+  render(<NotificationsMenuPanel expanded />);
+
+  expect(screen.getByRole('heading', { name: /notifications/i })).toBeInTheDocument();
+});

package/src/components/navbar-header-panels/notifications-menu.panel.scss

@@ -0,0 +1,9 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.heading {
+  @include type.type-style('heading-03');
+  color: $ui-background;
+  margin: layout.$spacing-05;
+}

package/src/components/navbar-header-panels/side-menu-panel.component.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+import { isDesktop, LeftNavMenu, useLayoutType, useLeftNavStore, useOnClickOutside } from '@openmrs/esm-framework';
+import { createPortal } from 'react-dom';
+
+interface SideMenuPanelProps {
+  expanded: boolean;
+  hidePanel: Parameters<typeof useOnClickOutside>[0];
+}
+
+/**
+ * This is the menu that pops up when clicking on the hamburger button
+ * on the top nav. It's also responsible for rendering the left nav
+ * in desktop mode (via a react portal).
+ */
+const SideMenuPanel: React.FC<SideMenuPanelProps> = ({ expanded, hidePanel }) => {
+  const menuRef = useOnClickOutside(hidePanel, expanded);
+
+  useEffect(() => {
+    window.addEventListener('popstate', hidePanel);
+    return () => window.removeEventListener('popstate', hidePanel);
+  }, [hidePanel]);
+  const layout = useLayoutType();
+  const { mode } = useLeftNavStore();
+
+  const leftNavContainer = window.document.getElementById('omrs-left-nav-container');
+  return (
+    <>
+      {(!isDesktop(layout) || mode === 'collapsed') && expanded && <LeftNavMenu ref={menuRef} isChildOfHeader />}
+      {isDesktop(layout) &&
+        mode === 'normal' &&
+        leftNavContainer &&
+        createPortal(<LeftNavMenu ref={menuRef} isChildOfHeader />, leftNavContainer)}
+    </>
+  );
+};
+
+export default SideMenuPanel;

package/src/components/navbar-header-panels/user-menu-panel.component.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { HeaderPanel, type HeaderPanelProps, Switcher, SwitcherDivider } from '@carbon/react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './user-menu-panel.scss';
+
+interface UserMenuPanelProps extends HeaderPanelProps {
+  expanded: boolean;
+  hidePanel: () => void;
+}
+
+/**
+ * Extensions attaching to `user-panel-slot` or `user-panel-bottom-slot` should in
+ * general be wrapped in the `SwitcherItem` Carbon component.
+ */
+const UserMenuPanel: React.FC<UserMenuPanelProps> = ({ expanded, hidePanel }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div style={{ display: 'inline' }}>
+      <HeaderPanel className={styles.headerPanel} expanded={expanded} aria-label={t('userMenu', 'User menu')}>
+        <Switcher className={styles.userPanelSwitcher} aria-label={t('userMenuOptions', 'User menu options')}>
+          <ExtensionSlot className={styles.fullWidth} name="user-panel-slot" />
+          <SwitcherDivider className={styles.divider} aria-hidden="true" />
+          <ExtensionSlot className={styles.fullWidth} name="user-panel-bottom-slot" />
+        </Switcher>
+      </HeaderPanel>
+    </div>
+  );
+};
+
+export default UserMenuPanel;

package/src/components/navbar-header-panels/user-menu-panel.scss

@@ -0,0 +1,65 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.headerPanel {
+  height: max-content;
+}
+
+.primaryNavContainer {
+  height: var(--omrs-topnav-height);
+}
+
+.headerPanel {
+  transition: none;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.userPanelSwitcher {
+  padding-top: layout.$spacing-05;
+  align-items: start;
+}
+
+.userPanelSwitcher :global(.cds--switcher__item) {
+  height: layout.$spacing-09;
+}
+
+.userPanelSwitcher :global(.cds--switcher__item:first-child) {
+  margin-top: 0;
+}
+
+.userPanelSwitcher :global(.cds--switcher__item-link) {
+  display: flex;
+  align-items: center;
+  color: $field-01;
+  padding: 0;
+  height: layout.$spacing-09;
+  @extend .bodyLong01;
+}
+
+.userPanelSwitcher :global(.cds--switcher__item-link):hover:not(.cds--switcher__item-link--selected) {
+  color: $field-01;
+  @include brand-02(background-color);
+}
+
+.userPanelSwitcher :global(.cds--switcher__item) svg {
+  margin: 0 layout.$spacing-04;
+  fill: $field-01;
+  flex-shrink: 0;
+}
+
+.userPanelSwitcher :global(.cds--switcher__item) button {
+  color: white;
+}
+
+.userPanelSwitcher :global(.cds--switcher__item) button:hover {
+  @include brand-03(background-color);
+  color: white;
+}

package/src/components/user-panel-switcher-item/user-panel-switcher.component.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SwitcherItem } from '@carbon/react';
+import { UserAvatarIcon, useSession } from '@openmrs/esm-framework';
+
+const UserPanelSwitcher: React.FC = () => {
+  const session = useSession();
+  return (
+    <SwitcherItem aria-label="User">
+      <UserAvatarIcon size={20} />
+      <p>{session?.user?.person?.display}</p>
+    </SwitcherItem>
+  );
+};
+
+export default UserPanelSwitcher;

package/src/components/user-panel-switcher-item/user-panel-switcher.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { type LoggedInUser, type Session, useSession } from '@openmrs/esm-framework';
+import { mockLoggedInUser } from '../../../__mocks__/mock-user';
+import UserPanelSwitcher from './user-panel-switcher.component';
+
+const mockUseSession = jest.mocked(useSession);
+
+describe('UserPanelSwitcher', () => {
+  beforeEach(() => {
+    mockUseSession.mockReturnValue({
+      authenticated: true,
+      user: mockLoggedInUser as unknown as LoggedInUser,
+    } as unknown as Session);
+  });
+
+  it('should display user name', async () => {
+    render(<UserPanelSwitcher />);
+
+    expect(await screen.findByText(/Dr Healther Morgan/i)).toBeInTheDocument();
+  });
+});

package/src/config-schema.ts

@@ -0,0 +1,56 @@
+import { Type, validators } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  logo: {
+    src: {
+      _type: Type.String,
+      _default: '',
+      _description:
+        'The path or URL to the logo image. If set to an empty string, the default OpenMRS SVG sprite will be used.',
+      _validators: [validators.isUrl],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+    name: {
+      _type: Type.String,
+      _default: '',
+      _description: 'The organization name displayed when image is absent',
+    },
+    link: {
+      _type: Type.String,
+      _default: '${openmrsSpaBase}/home',
+      _description: 'The link to redirect to when the logo is clicked',
+      _validators: [validators.isUrl],
+    },
+  },
+  externalRefLinks: {
+    _type: Type.Array,
+    _elements: {
+      _type: Type.Object,
+      title: {
+        _type: Type.String,
+        _description: 'Title of the link',
+      },
+      redirect: {
+        _type: Type.String,
+        _description: 'Link to redirect to (must be an external link)',
+        _validators: [validators.isUrl],
+      },
+    },
+    _default: [],
+    _description: 'The external links to be showcased in the app menu',
+  },
+};
+
+export type ConfigSchema = {
+  logo: {
+    src: string;
+    alt: string;
+    name: string;
+    link: string;
+  };
+  externalRefLinks: { title: string; redirect: string }[];
+};

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const userPropertyChange = 'user-property-change';
+export const moduleName = '@digihmis/esm-primary-navigation-app';

package/src/declarations.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';

package/src/index.ts

@@ -0,0 +1,68 @@
+import {
+  defineConfigSchema,
+  defineExtensionConfigSchema,
+  getAsyncLifecycle,
+  getSyncLifecycle,
+  navigate,
+} from '@openmrs/esm-framework';
+import { type Application } from 'single-spa';
+import { configSchema } from './config-schema';
+import { moduleName } from './constants';
+import primaryNavRootComponent from './root.component';
+import userPanelComponent from './components/user-panel-switcher-item/user-panel-switcher.component';
+import changeLanguageLinkComponent from './components/change-language/change-language-link.extension';
+import { NavGroup, navGroupConfigSchema } from './components/nav-group/nav-group.component';
+import { dashboardConfigSchema } from './components/dashboard/dashboard.component';
+import genericLinkComponent, { genericLinkConfigSchema } from './components/generic-link/generic-link.component';
+import UserMenuButton from './components/navbar/user-menu-button.component';
+import AppMenuButton from './components/navbar/app-menu-button.component';
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+const options = {
+  featureName: 'primary navigation',
+  moduleName,
+};
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+  defineExtensionConfigSchema('link', genericLinkConfigSchema);
+  defineExtensionConfigSchema('nav-group', navGroupConfigSchema);
+  defineExtensionConfigSchema('dashboard', dashboardConfigSchema);
+}
+
+export const root = getSyncLifecycle(primaryNavRootComponent, options);
+
+export const redirect: Application = async () => ({
+  bootstrap: async () => navigate({ to: '${openmrsSpaBase}/home' }),
+  mount: async () => undefined,
+  unmount: async () => undefined,
+});
+
+export const userMenuButton = getSyncLifecycle(UserMenuButton, {
+  featureName: 'user-menu-button',
+  moduleName,
+});
+
+export const userPanel = getSyncLifecycle(userPanelComponent, options);
+
+export const changeLanguageLink = getSyncLifecycle(changeLanguageLinkComponent, options);
+
+export const changeLanguageModal = getAsyncLifecycle(
+  () => import('./components/change-language/change-language.modal'),
+  options,
+);
+
+export const appMenuButton = getSyncLifecycle(AppMenuButton, {
+  featureName: 'app-menu-button',
+  moduleName,
+});
+
+export const linkComponent = getSyncLifecycle(genericLinkComponent, {
+  featureName: 'Link',
+  moduleName,
+});
+
+export const navGroup = getSyncLifecycle(NavGroup, options);
+
+export const dashboard = getAsyncLifecycle(() => import('./components/dashboard/dashboard.component'), options);