frontend: Refactor prepareSidebarItems into a hook

Signed-off-by: Oleksandr Dubenko <[email protected]>
headlamp-k8s · Jan 29, 2025 · babd7eb · babd7eb
1 parent 573eb4e
commit babd7eb
Show file tree

Hide file tree

Showing 5 changed files with 473 additions and 365 deletions.
diff --git a/frontend/src/components/Sidebar/NavigationTabs.tsx b/frontend/src/components/Sidebar/NavigationTabs.tsx
@@ -9,7 +9,7 @@ import { getCluster, getClusterPrefixedPath } from '../../lib/util';
 import { useTypedSelector } from '../../redux/reducers/reducers';
 import Tabs from '../common/Tabs';
 import { SidebarItemProps } from '../Sidebar';
-import prepareRoutes from './prepareRoutes';
+import { useSidebarItems } from './useSidebarItems';
 
 function searchNameInSubList(sublist: SidebarItemProps['subList'], name: string): boolean {
   if (!sublist) {
@@ -54,7 +54,7 @@ export default function NavigationTabs() {
   }
 
   let defaultIndex = null;
-  const listItems = prepareRoutes(t, sidebar.selected.sidebar || '');
+  const listItems = useSidebarItems(sidebar.selected.sidebar ?? undefined);
   let navigationItem = listItems.find(item => item.name === sidebar.selected.item);
   if (!navigationItem) {
     const parent = findParentOfSubList(listItems, sidebar.selected.item);

diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -10,15 +10,14 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import helpers from '../../helpers';
-import { useCluster } from '../../lib/k8s';
 import { createRouteURL } from '../../lib/router';
 import { useTypedSelector } from '../../redux/reducers/reducers';
 import { ActionButton } from '../common';
 import CreateButton from '../common/Resource/CreateButton';
 import NavigationTabs from './NavigationTabs';
-import prepareRoutes from './prepareRoutes';
 import SidebarItem, { SidebarItemProps } from './SidebarItem';
 import { DefaultSidebars, setSidebarSelected, setWhetherSidebarOpen } from './sidebarSlice';
+import { useSidebarItems } from './useSidebarItems';
 import VersionButton from './VersionButton';
 
 export const drawerWidth = 240;
@@ -177,8 +176,6 @@ function updateItemSelected(
 }
 
 export default function Sidebar() {
-  const { t, i18n } = useTranslation(['glossary', 'translation']);
-
   const sidebar = useTypedSelector(state => state.sidebar);
   const {
     isOpen,
@@ -188,24 +185,10 @@ export default function Sidebar() {
     isTemporary: isTemporaryDrawer,
   } = useSidebarInfo();
   const isNarrowOnly = isNarrow && !canExpand;
-  const arePluginsLoaded = useTypedSelector(state => state.plugins.loaded);
   const namespaces = useTypedSelector(state => state.filter.namespaces);
   const dispatch = useDispatch();
-  const cluster = useCluster();
-  const items = React.useMemo(() => {
-    // If the sidebar is null, then it means it should not be visible.
-    if (sidebar.selected.sidebar === null) {
-      return [];
-    }
-    return prepareRoutes(t, sidebar.selected.sidebar || '');
-  }, [
-    cluster,
-    sidebar.selected.sidebar,
-    sidebar.entries,
-    sidebar.filters,
-    i18n.language,
-    arePluginsLoaded,
-  ]);
+
+  const items = useSidebarItems(sidebar?.selected?.sidebar ?? undefined);
 
   const search = namespaces.size !== 0 ? `?namespace=${[...namespaces].join('+')}` : '';