O3-2407: App Menu and User Menu should hide if their panel has no con… (

#768)
openmrs · Sep 12, 2023 · 3f7080e · 3f7080e
1 parent 1578dca
commit 3f7080e
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 61 deletions.
diff --git a/packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.component.tsx
@@ -13,8 +13,8 @@ import {
   useLayoutType,
   ExtensionSlot,
   ConfigurableLink,
-  useAssignedExtensions,
   useSession,
+  useConnectedExtensions,
   useConfig,
 } from "@openmrs/esm-framework";
 import { isDesktop } from "../../utils";
@@ -35,11 +35,12 @@ const Navbar: React.FC = () => {
   const [activeHeaderPanel, setActiveHeaderPanel] = useState<string>(null);
   const allowedLocales = session?.allowedLocales ?? null;
   const layout = useLayoutType();
-  const navMenuItems = useAssignedExtensions(
+  const navMenuItems = useConnectedExtensions(
     "patient-chart-dashboard-slot"
   ).map((e) => e.id);
   const openmrsSpaBase = window["getOpenmrsSpaBase"]();
-
+  const appMenuItems = useConnectedExtensions("app-menu-slot");
+  const userMenuItems = useConnectedExtensions("user-panel-slot");
   const isActivePanel = useCallback(
     (panelName: string) => activeHeaderPanel === panelName,
     [activeHeaderPanel]
@@ -63,7 +64,14 @@ const Navbar: React.FC = () => {
     () => !isDesktop(layout) && navMenuItems.length > 0,
     [navMenuItems.length, layout]
   );
-
+  const showAppMenu = useMemo(
+    () => appMenuItems.length > 0,
+    [appMenuItems.length]
+  );
+  const showUserMenu = useMemo(
+    () => userMenuItems.length > 0,
+    [userMenuItems.length]
+  );
   const HeaderItems = () => (
     <>
       <OfflineBanner />
@@ -101,70 +109,78 @@ const Navbar: React.FC = () => {
               togglePanel: togglePanel,
             }}
           />
-          <HeaderGlobalAction
-            aria-label="Users"
-            aria-labelledby="Users Avatar Icon"
-            className={`${
-              isActivePanel("userMenu")
-                ? styles.headerGlobalBarButton
-                : styles.activePanel
-            }`}
-            enterDelayMs={500}
-            name="Users"
-            isActive={isActivePanel("userMenu")}
-            onClick={(event) => {
-              togglePanel("userMenu");
-              event.stopPropagation();
-            }}
-          >
-            {isActivePanel("userMenu") ? (
-              <Close size={20} />
-            ) : (
-              <UserAvatarFilledAlt size={20} />
-            )}
-          </HeaderGlobalAction>
-          <HeaderGlobalAction
-            aria-label="App Menu"
-            aria-labelledby="App Menu"
-            enterDelayMs={500}
-            isActive={isActivePanel("appMenu")}
-            tooltipAlignment="end"
-            className={`${
-              isActivePanel("appMenu")
-                ? styles.headerGlobalBarButton
-                : styles.activePanel
-            }`}
-            onClick={(event) => {
-              togglePanel("appMenu");
-              event.stopPropagation();
-            }}
-          >
-            {isActivePanel("appMenu") ? (
-              <Close size={20} />
-            ) : (
-              <Switcher size={20} />
-            )}
-          </HeaderGlobalAction>
+          {showUserMenu && (
+            <HeaderGlobalAction
+              aria-label="Users"
+              aria-labelledby="Users Avatar Icon"
+              className={`${
+                isActivePanel("userMenu")
+                  ? styles.headerGlobalBarButton
+                  : styles.activePanel
+              }`}
+              enterDelayMs={500}
+              name="Users"
+              isActive={isActivePanel("userMenu")}
+              onClick={(event) => {
+                togglePanel("userMenu");
+                event.stopPropagation();
+              }}
+            >
+              {isActivePanel("userMenu") ? (
+                <Close size={20} />
+              ) : (
+                <UserAvatarFilledAlt size={20} />
+              )}
+            </HeaderGlobalAction>
+          )}
+          {showAppMenu && (
+            <HeaderGlobalAction
+              aria-label="App Menu"
+              aria-labelledby="App Menu"
+              enterDelayMs={500}
+              isActive={isActivePanel("appMenu")}
+              tooltipAlignment="end"
+              className={`${
+                isActivePanel("appMenu")
+                  ? styles.headerGlobalBarButton
+                  : styles.activePanel
+              }`}
+              onClick={(event) => {
+                togglePanel("appMenu");
+                event.stopPropagation();
+              }}
+            >
+              {isActivePanel("appMenu") ? (
+                <Close size={20} />
+              ) : (
+                <Switcher size={20} />
+              )}
+            </HeaderGlobalAction>
+          )}
         </HeaderGlobalBar>
         {!isDesktop(layout) && (
           <SideMenuPanel
             hidePanel={hidePanel}
             expanded={isActivePanel("sideMenu")}
           />
         )}
-        <AppMenuPanel
-          expanded={isActivePanel("appMenu")}
-          hidePanel={hidePanel}
-        />
+        {showAppMenu && (
+          <AppMenuPanel
+            expanded={isActivePanel("appMenu")}
+            hidePanel={hidePanel}
+          />
+        )}
         <NotificationsMenuPanel expanded={isActivePanel("notificationsMenu")} />
-        <UserMenuPanel
-          user={user}
-          session={session}
-          expanded={isActivePanel("userMenu")}
-          allowedLocales={allowedLocales}
-          onLogout={logout}
-          hidePanel={hidePanel}
-        />
+        {showUserMenu && (
+          <UserMenuPanel
+            user={user}
+            session={session}
+            expanded={isActivePanel("userMenu")}
+            allowedLocales={allowedLocales}
+            onLogout={logout}
+            hidePanel={hidePanel}
+          />
+        )}
       </Header>
     </>
   );

diff --git a/packages/apps/esm-primary-navigation-app/src/root.component.test.tsx b/packages/apps/esm-primary-navigation-app/src/root.component.test.tsx
@@ -12,7 +12,7 @@ const mockSessionObservable = of({ data: mockSession });
 
 jest.mock("@openmrs/esm-framework", () => ({
   openmrsFetch: jest.fn().mockResolvedValue({}),
-  useAssignedExtensions: jest.fn().mockReturnValue([]),
+  useConnectedExtensions: jest.fn().mockReturnValue(["mock-extension"]),
   createErrorHandler: jest.fn(),
   openmrsObservableFetch: jest.fn(),
   getCurrentUser: jest.fn(() => mockUserObservable),