From cf331b16d5435826425c5b14ac807521295f31c6 Mon Sep 17 00:00:00 2001
From: Mark Goodrich <mgoodrich@pih.org>
Date: Mon, 11 Sep 2023 19:45:41 -0400
Subject: [PATCH 1/3] O3-2407: App Menu and User Menu should hide if their
 panel has no contents

---
 .../components/navbar/navbar.component.tsx    | 136 ++++++++++--------
 1 file changed, 76 insertions(+), 60 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
index a908af437..3fd75ebcc 100644
--- 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,
 } from "@openmrs/esm-framework";
 import { isDesktop } from "../../utils";
 import AppMenuPanel from "../navbar-header-panels/app-menu-panel.component";
@@ -33,11 +33,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]
@@ -61,7 +62,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 />
@@ -99,50 +107,54 @@ 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
@@ -150,19 +162,23 @@ const Navbar: React.FC = () => {
             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>
     </>
   );

From 5248a5c43f7f10482f8d46511e57cf836ab155c6 Mon Sep 17 00:00:00 2001
From: Mark Goodrich <mgoodrich@pih.org>
Date: Tue, 12 Sep 2023 13:01:04 -0400
Subject: [PATCH 2/3] O3-2407: App Menu and User Menu should hide if their
 panel has no contents (fix tests)

---
 .../apps/esm-primary-navigation-app/src/root.component.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 3095b758b..31c2d8f55 100644
--- 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),

From 8ee85644d92a4237ae869c358e58c3e6d8dd9078 Mon Sep 17 00:00:00 2001
From: Mark Goodrich <mgoodrich@pih.org>
Date: Tue, 12 Sep 2023 15:22:55 -0400
Subject: [PATCH 3/3] O3-2407: App Menu and User Menu should hide if their
 panel has no contents (fix tests)

---
 .../src/components/navbar/navbar.component.tsx                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index f206f8d8c..95f5e45d3 100644
--- 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
@@ -15,7 +15,7 @@ import {
   ConfigurableLink,
   useSession,
   useConnectedExtensions,
-  useConfig
+  useConfig,
 } from "@openmrs/esm-framework";
 import { isDesktop } from "../../utils";
 import AppMenuPanel from "../navbar-header-panels/app-menu-panel.component";