chore: clean up frontend routes (#9533)

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 [
+    for (const route of [...routes.mainNavRoutes, ...routes.adminRoutes]) {
-        ...routes.mainNavRoutes,
-        ...routes.adminRoutes,
-        ...routes.mobileRoutes,
-    ]) {
         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)
+        mainNavRoutes: routes
-            .filter(filterByConfig(uiConfig))
-            .map(mapRouteLink),
-        mobileRoutes: getCondensedRoutes(routes.mobileRoutes)
             .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": {
+    "menu": {},
-      "mobile": true,
-    },
     "path": "/personal",
     "title": "Dashboard",
     "type": "protected",
@@ -92,9 +90,7 @@ exports[`returns all baseRoutes 1`] = `
   },
   {
     "component": [Function],
-    "menu": {
+    "menu": {},
-      "mobile": true,
-    },
     "path": "/projects",
     "title": "Projects",
     "type": "protected",
@@ -108,9 +104,7 @@ exports[`returns all baseRoutes 1`] = `
   },
   {
     "component": [Function],
-    "menu": {
+    "menu": {},
-      "mobile": true,
-    },
     "path": "/search",
     "title": "Search",
     "type": "protected",
@@ -125,9 +119,7 @@ exports[`returns all baseRoutes 1`] = `
       },
     },
     "hidden": false,
-    "menu": {
+    "menu": {},
-      "mobile": true,
-    },
     "path": "/playground",
     "title": "Playground",
     "type": "protected",
@@ -135,9 +127,7 @@ exports[`returns all baseRoutes 1`] = `
   {
     "component": [Function],
     "enterprise": true,
-    "menu": {
+    "menu": {},
-      "mobile": true,
-    },
     "path": "/insights",
     "title": "Insights",
     "type": "protected",
@@ -153,8 +143,7 @@ exports[`returns all baseRoutes 1`] = `
   {
     "component": [Function],
     "menu": {
-      "advanced": true,
+      "main": true,
-      "mobile": true,
     },
     "path": "/applications",
     "title": "Applications",
@@ -179,8 +168,7 @@ exports[`returns all baseRoutes 1`] = `
   {
     "component": [Function],
     "menu": {
-      "advanced": true,
+      "main": true,
-      "mobile": true,
     },
     "path": "/context",
     "title": "Context fields",
@@ -189,8 +177,7 @@ exports[`returns all baseRoutes 1`] = `
   {
     "component": [Function],
     "menu": {
-      "advanced": true,
+      "main": true,
-      "mobile": true,
     },
     "path": "/feature-toggle-type/*",
     "title": "Feature flag types",
@@ -223,8 +210,7 @@ exports[`returns all baseRoutes 1`] = `
   {
     "component": [Function],
     "menu": {
-      "advanced": true,
+      "main": true,
-      "mobile": true,
     },
     "path": "/strategies",
     "title": "Strategy types",
@@ -249,8 +235,7 @@ exports[`returns all baseRoutes 1`] = `
     "component": [Function],
     "enterprise": true,
     "menu": {
-      "advanced": true,
+      "main": true,
-      "mobile": 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,
+      "main": true,
-      "mobile": true,
     },
     "path": "/tag-types",
     "title": "Tag types",
@@ -383,8 +367,7 @@ exports[`returns all baseRoutes 1`] = `
     "component": [Function],
     "hidden": false,
     "menu": {
-      "advanced": true,
+      "main": true,
-      "mobile": true,
     },
     "path": "/integrations",
     "title": "Integrations",
@@ -412,8 +395,7 @@ exports[`returns all baseRoutes 1`] = `
     "component": [Function],
     "hidden": false,
     "menu": {
-      "advanced": true,
+      "main": true,
-      "mobile": true,
     },
     "path": "/segments",
     "title": "Segments",

frontend/src/component/menu/routes.ts

@@ -68,7 +68,7 @@ export const routes: IRoute[] = [
         title: 'Dashboard',
         component: PersonalDashboard,
         type: 'protected',
-        menu: { mobile: true },
+        menu: {},
     },
 
     // Project
@@ -127,7 +127,7 @@ export const routes: IRoute[] = [
         title: 'Projects',
         component: ProjectList,
         type: 'protected',
-        menu: { mobile: true },
+        menu: {},
     },
     {
         path: '/projects-archive',
@@ -143,7 +143,7 @@ export const routes: IRoute[] = [
         title: 'Search',
         component: FeatureToggleListTable,
         type: 'protected',
-        menu: { mobile: true },
+        menu: {},
     },
 
     // Playground
@@ -153,7 +153,7 @@ export const routes: IRoute[] = [
         component: LazyPlayground,
         hidden: false,
         type: 'protected',
-        menu: { mobile: true },
+        menu: {},
     },
 
     // Insights
@@ -162,7 +162,7 @@ export const routes: IRoute[] = [
         title: 'Insights',
         component: Insights,
         type: 'protected',
-        menu: { mobile: true },
+        menu: {},
         enterprise: true,
     },
 
@@ -180,7 +180,7 @@ export const routes: IRoute[] = [
         title: 'Applications',
         component: PaginatedApplicationList,
         type: 'protected',
-        menu: { mobile: true, advanced: true },
+        menu: { main: true },
     },
 
     // Context
@@ -205,7 +205,7 @@ export const routes: IRoute[] = [
         title: 'Context fields',
         component: ContextList,
         type: 'protected',
-        menu: { mobile: true, advanced: true },
+        menu: { main: true },
     },
 
     // Feature types
@@ -214,7 +214,7 @@ export const routes: IRoute[] = [
         title: 'Feature flag types',
         component: FeatureTypesList,
         type: 'protected',
-        menu: { mobile: true, advanced: true },
+        menu: { main: true },
     },
 
     // Strategies
@@ -247,7 +247,7 @@ export const routes: IRoute[] = [
         title: 'Strategy types',
         component: StrategiesList,
         type: 'protected',
-        menu: { mobile: true, advanced: true },
+        menu: { main: true },
     },
     {
         path: '/environments/create',
@@ -269,7 +269,7 @@ export const routes: IRoute[] = [
         title: 'Environments',
         component: EnvironmentTable,
         type: 'protected',
-        menu: { mobile: true, advanced: true },
+        menu: { main: true },
         enterprise: true,
     },
     {
@@ -287,7 +287,7 @@ export const routes: IRoute[] = [
         title: 'Release management',
         component: ReleaseManagement,
         type: 'protected',
-        menu: { advanced: true, mode: ['enterprise'] },
+        menu: { main: true, mode: ['enterprise'] },
         flag: 'releasePlans',
     },
     {
@@ -333,7 +333,7 @@ export const routes: IRoute[] = [
         title: 'Tag types',
         component: TagTypeList,
         type: 'protected',
-        menu: { mobile: true, advanced: true },
+        menu: { main: true },
     },
 
     // Integrations
@@ -391,7 +391,7 @@ export const routes: IRoute[] = [
         component: IntegrationList,
         hidden: false,
         type: 'protected',
-        menu: { mobile: true, advanced: true },
+        menu: { main: true },
     },
     {
         path: '/integrations/signals',
@@ -427,7 +427,7 @@ export const routes: IRoute[] = [
         component: SegmentTable,
         hidden: false,
         type: 'protected',
-        menu: { mobile: true, advanced: true },
+        menu: { main: true },
     },
 
     // History
@@ -518,24 +518,7 @@ export const routes: IRoute[] = [
 export const getRoute = (path: string) =>
     routes.find((route) => route.path === path);
 
-export const baseRoutes = routes.filter((route) => !route.hidden);
+const getCondensedRoutes = (routes: IRoute[]): INavigationMenuItem[] => {
-
-const computeRoutes = () => {
-    const mainNavRoutes = baseRoutes.filter((route) => route.menu.advanced);
-    const adminRoutes = routes.filter((route) => route.menu.adminSettings);
-    const mobileRoutes = routes.filter((route) => route.menu.mobile);
-
-    const computedRoutes = {
-        mainNavRoutes,
-        adminRoutes,
-        mobileRoutes,
-    };
-    return () => {
-        return computedRoutes;
-    };
-};
-
-export const getCondensedRoutes = (routes: IRoute[]): INavigationMenuItem[] => {
     return routes.map((route) => {
         return {
             path: route.path,
@@ -549,4 +532,7 @@ export const getCondensedRoutes = (routes: IRoute[]): INavigationMenuItem[] => {
     });
 };
 
-export const getRoutes = computeRoutes();
+export const baseRoutes = routes.filter((route) => !route.hidden);
+export const getNavRoutes = () => {
+    return getCondensedRoutes(baseRoutes.filter((route) => route.menu.main));
+};

frontend/src/interfaces/route.ts

@@ -29,8 +29,7 @@ export interface INavigationMenuItem {
 }
 
 interface IRouteMenu {
-    mobile?: boolean;
+    main?: boolean;
-    advanced?: boolean;
     adminSettings?: boolean;
     mode?: Array<'pro' | 'enterprise'>;
     billing?: boolean;