chore: clean up frontend routes (#9533)

Author: daveleek

frontend/src/component/commandBar/CommandBar.tsx

@@ -115,11 +115,7 @@ export const CommandBar = () => {
     const [value, setValue] = useState<string>('');
     const { routes } = useRoutes();
     const allRoutes: Record<string, IPageRouteInfo> = {};
-    for (const route of [
-        ...routes.mainNavRoutes,
-        ...routes.adminRoutes,
-        ...routes.mobileRoutes,
-    ]) {
+    for (const route of [...routes.mainNavRoutes, ...routes.adminRoutes]) {
         allRoutes[route.path] = {
             path: route.path,
             route: route.route,

frontend/src/component/layout/MainLayout/NavigationSidebar/useRoutes.ts

@@ -1,18 +1,15 @@
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { getCondensedRoutes, getRoutes } from 'component/menu/routes';
+import { getNavRoutes } from 'component/menu/routes';
 import { useAdminRoutes } from 'component/admin/useAdminRoutes';
 import { filterByConfig, mapRouteLink } from 'component/common/util';
 
 export const useRoutes = () => {
     const { uiConfig } = useUiConfig();
-    const routes = getRoutes();
+    const routes = getNavRoutes();
     const adminRoutes = useAdminRoutes();
 
     const filteredMainRoutes = {
-        mainNavRoutes: getCondensedRoutes(routes.mainNavRoutes)
-            .filter(filterByConfig(uiConfig))
-            .map(mapRouteLink),
-        mobileRoutes: getCondensedRoutes(routes.mobileRoutes)
+        mainNavRoutes: routes
             .filter(filterByConfig(uiConfig))
             .map(mapRouteLink),
         adminRoutes,

frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 import { Divider, Drawer, styled } from '@mui/material';
 import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
 import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg';
-import type { INavigationMenuItem } from 'interfaces/route';
 import styles from './DrawerMenu.module.scss'; // FIXME: useStyle - theme
 import theme from 'themes/theme';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
@@ -32,18 +31,12 @@ interface IDrawerMenuProps {
         href: string;
         title: string;
     }>;
-    routes: {
-        mainNavRoutes: INavigationMenuItem[];
-        mobileRoutes: INavigationMenuItem[];
-        adminRoutes: INavigationMenuItem[];
-    };
 }
 
 export const DrawerMenu: VFC<IDrawerMenuProps> = ({
     links = [],
     open = false,
     toggleDrawer,
-    routes,
 }) => {
     return (
         <Drawer

frontend/src/component/menu/Header/Header.tsx

@@ -21,13 +21,10 @@ import { ReactComponent as CelebatoryUnleashLogo } from 'assets/img/unleashHolid
 import { DrawerMenu } from './DrawerMenu/DrawerMenu';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { focusable } from 'themes/themeStyles';
-import { getCondensedRoutes, getRoutes } from 'component/menu/routes';
 import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined';
 import LightModeOutlined from '@mui/icons-material/LightModeOutlined';
-import { filterByConfig, mapRouteLink } from 'component/common/util';
 import { useThemeMode } from 'hooks/useThemeMode';
 import { Notifications } from 'component/common/Notifications/Notifications';
-import { useAdminRoutes } from 'component/admin/useAdminRoutes';
 import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { CommandBar } from 'component/commandBar/CommandBar';
@@ -105,19 +102,6 @@ const Header = () => {
     const toggleDrawer = () => setOpenDrawer((prev) => !prev);
     const celebatoryUnleash = useUiFlag('celebrateUnleash');
 
-    const routes = getRoutes();
-    const adminRoutes = useAdminRoutes();
-
-    const filteredMainRoutes = {
-        mainNavRoutes: getCondensedRoutes(routes.mainNavRoutes)
-            .filter(filterByConfig(uiConfig))
-            .map(mapRouteLink),
-        mobileRoutes: getCondensedRoutes(routes.mobileRoutes)
-            .filter(filterByConfig(uiConfig))
-            .map(mapRouteLink),
-        adminRoutes,
-    };
-
     if (smallScreen) {
         return (
             <HeaderComponent position='static'>
@@ -139,7 +123,6 @@ const Header = () => {
                         links={uiConfig.links}
                         open={openDrawer}
                         toggleDrawer={toggleDrawer}
-                        routes={filteredMainRoutes}
                     />
                     <StyledUserContainer>
                         <UserProfile />

frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap

@@ -12,9 +12,7 @@ exports[`returns all baseRoutes 1`] = `
   },
   {
     "component": [Function],
-    "menu": {
-      "mobile": true,
-    },
+    "menu": {},
     "path": "/personal",
     "title": "Dashboard",
     "type": "protected",
@@ -92,9 +90,7 @@ exports[`returns all baseRoutes 1`] = `
   },
   {
     "component": [Function],
-    "menu": {
-      "mobile": true,
-    },
+    "menu": {},
     "path": "/projects",
     "title": "Projects",
     "type": "protected",
@@ -108,9 +104,7 @@ exports[`returns all baseRoutes 1`] = `
   },
   {
     "component": [Function],
-    "menu": {
-      "mobile": true,
-    },
+    "menu": {},
     "path": "/search",
     "title": "Search",
     "type": "protected",
@@ -125,19 +119,15 @@ exports[`returns all baseRoutes 1`] = `
       },
     },
     "hidden": false,
-    "menu": {
-      "mobile": true,
-    },
+    "menu": {},
     "path": "/playground",
     "title": "Playground",
     "type": "protected",
   },
   {
     "component": [Function],
     "enterprise": true,
-    "menu": {
-      "mobile": true,
-    },
+    "menu": {},
     "path": "/insights",
     "title": "Insights",
     "type": "protected",
@@ -153,8 +143,7 @@ exports[`returns all baseRoutes 1`] = `
   {
     "component": [Function],
     "menu": {
-      "advanced": true,
-      "mobile": true,
+      "main": true,
     },
     "path": "/applications",
     "title": "Applications",
@@ -179,8 +168,7 @@ exports[`returns all baseRoutes 1`] = `
   {
     "component": [Function],
     "menu": {
-      "advanced": true,
-      "mobile": true,
+      "main": true,
     },
     "path": "/context",
     "title": "Context fields",
@@ -189,8 +177,7 @@ exports[`returns all baseRoutes 1`] = `
   {
     "component": [Function],
     "menu": {
-      "advanced": true,
-      "mobile": true,
+      "main": true,
     },
     "path": "/feature-toggle-type/*",
     "title": "Feature flag types",
@@ -223,8 +210,7 @@ exports[`returns all baseRoutes 1`] = `
   {
     "component": [Function],
     "menu": {
-      "advanced": true,
-      "mobile": true,
+      "main": true,
     },
     "path": "/strategies",
     "title": "Strategy types",
@@ -249,8 +235,7 @@ exports[`returns all baseRoutes 1`] = `
     "component": [Function],
     "enterprise": true,
     "menu": {
-      "advanced": true,
-      "mobile": true,
+      "main": true,
     },
     "path": "/environments",
     "title": "Environments",
@@ -268,7 +253,7 @@ exports[`returns all baseRoutes 1`] = `
     "component": [Function],
     "flag": "releasePlans",
     "menu": {
-      "advanced": true,
+      "main": true,
       "mode": [
         "enterprise",
       ],
@@ -324,8 +309,7 @@ exports[`returns all baseRoutes 1`] = `
   {
     "component": [Function],
     "menu": {
-      "advanced": true,
-      "mobile": true,
+      "main": true,
     },
     "path": "/tag-types",
     "title": "Tag types",
@@ -383,8 +367,7 @@ exports[`returns all baseRoutes 1`] = `
     "component": [Function],
     "hidden": false,
     "menu": {
-      "advanced": true,
-      "mobile": true,
+      "main": true,
     },
     "path": "/integrations",
     "title": "Integrations",
@@ -412,8 +395,7 @@ exports[`returns all baseRoutes 1`] = `
     "component": [Function],
     "hidden": false,
     "menu": {
-      "advanced": true,
-      "mobile": true,
+      "main": true,
     },
     "path": "/segments",
     "title": "Segments",