hide header items in sidebar

Signed-off-by: Yi Cai <[email protected]>

packages/app/src/components/Root/Root.tsx

@@ -28,9 +28,8 @@ import { makeStyles } from 'tss-react/mui';
 
 import { policyEntityReadPermission } from '@janus-idp/backstage-plugin-rbac-common';
 
-import DynamicRootContext, {
-  ResolvedMenuItem,
-} from '../DynamicRoot/DynamicRootContext';
+import { useDisplayedSidebarItems } from '../../utils/dynamicUI/useDisplayedSidebarItems';
+import { ResolvedMenuItem } from '../DynamicRoot/DynamicRootContext';
 import { ApplicationHeaders } from './ApplicationHeaders';
 import { MenuIcon } from './MenuIcon';
 import { SidebarLogo } from './SidebarLogo';
@@ -103,7 +102,11 @@ const getMenuItem = (menuItem: ResolvedMenuItem, isNestedMenuItem = false) => {
 };
 
 export const Root = ({ children }: PropsWithChildren<{}>) => {
-  const { dynamicRoutes, menuItems } = useContext(DynamicRootContext);
+  const {
+    showSearchBar,
+    displayedDynamicRoutes: dynamicRoutes,
+    displayedMenuItems: menuItems,
+  } = useDisplayedSidebarItems();
   const [openItems, setOpenItems] = useState<{ [key: string]: boolean }>({});
 
   const { loading: loadingPermission, allowed: canDisplayRBACMenuItem } =
@@ -255,9 +258,11 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
         <ApplicationHeaders position="above-main-content" />
         <Sidebar>
           <SidebarLogo />
-          <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
-            <SidebarSearchModal />
-          </SidebarGroup>
+          {showSearchBar && (
+            <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
+              <SidebarSearchModal />
+            </SidebarGroup>
+          )}
           <SidebarDivider />
           <SidebarGroup label="Menu" icon={<MuiMenuIcon />}>
             {/* Global nav, not org-specific */}

packages/app/src/utils/dynamicUI/useDisplayedSidebarItems.ts

@@ -0,0 +1,29 @@
+import { useContext } from 'react';
+
+import DynamicRootContext from '../../components/DynamicRoot/DynamicRootContext';
+
+export const useDisplayedSidebarItems = () => {
+  const { dynamicRoutes, menuItems, mountPoints } =
+    useContext(DynamicRootContext);
+  const headerComponents = mountPoints['application/header/component'] ?? [];
+
+  const headerPaths = headerComponents
+    .map(({ config }) => config?.props?.to)
+    .filter(Boolean);
+
+  const displayedDynamicRoutes = dynamicRoutes?.filter(
+    ({ path }) => !headerPaths.includes(path),
+  );
+
+  const displayedMenuItems = menuItems.filter(
+    item => !headerPaths.includes(item.to),
+  );
+
+  return {
+    showSearchBar: !headerComponents.some(
+      ({ config }) => (config as any)?.type === 'search',
+    ),
+    displayedDynamicRoutes,
+    displayedMenuItems,
+  };
+};