frontend: Refactor prepareSidebarItems into a hook

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);

frontend/src/components/Sidebar/Sidebar.tsx

@@ -10,20 +10,19 @@
 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 from './SidebarItem';
 import {
   DefaultSidebars,
   setSidebarSelected,
   setWhetherSidebarOpen,
   SidebarEntry,
 } from './sidebarSlice';
+import { useSidebarItems } from './useSidebarItems';
 import VersionButton from './VersionButton';
 
 export const drawerWidth = 240;
@@ -154,8 +153,6 @@
 });
 
 export default function Sidebar() {
-  const { t, i18n } = useTranslation(['glossary', 'translation']);
-
   const sidebar = useTypedSelector(state => state.sidebar);
   const {
     isOpen,
@@ -165,24 +162,10 @@
     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.entries,
-    sidebar.filters,
-    i18n.language,
-    arePluginsLoaded,
-  ]);
+
+  const items = useSidebarItems(sidebar?.selected?.sidebar ?? undefined);
 
   const search = namespaces.size !== 0 ? `?namespace=${[...namespaces].join('+')}` : '';
 
@@ -200,7 +183,7 @@
   }
 
   return (
     <PureSidebar
       items={items}
       open={isOpen}
       openUserSelected={isUserOpened}