diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx index cb9f3cd7c6..94f089c040 100644 --- a/frontend/src/component/commandBar/CommandBar.tsx +++ b/frontend/src/component/commandBar/CommandBar.tsx @@ -115,11 +115,7 @@ export const CommandBar = () => { const [value, setValue] = useState(''); const { routes } = useRoutes(); const allRoutes: Record = {}; - 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, diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/useRoutes.ts b/frontend/src/component/layout/MainLayout/NavigationSidebar/useRoutes.ts index abb3b38301..86c3e807eb 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/useRoutes.ts +++ b/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, diff --git a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx index e1fb47ef10..747bde2ecf 100644 --- a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx +++ b/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 = ({ links = [], open = false, toggleDrawer, - routes, }) => { return ( { 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 ( @@ -139,7 +123,6 @@ const Header = () => { links={uiConfig.links} open={openDrawer} toggleDrawer={toggleDrawer} - routes={filteredMainRoutes} /> diff --git a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap index 668a1b20e6..4c105b262a 100644 --- a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap +++ b/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,9 +119,7 @@ exports[`returns all baseRoutes 1`] = ` }, }, "hidden": false, - "menu": { - "mobile": true, - }, + "menu": {}, "path": "/playground", "title": "Playground", "type": "protected", @@ -135,9 +127,7 @@ exports[`returns all baseRoutes 1`] = ` { "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", diff --git a/frontend/src/component/menu/routes.ts b/frontend/src/component/menu/routes.ts index 3ddbbf606f..500137d928 100644 --- a/frontend/src/component/menu/routes.ts +++ b/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 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[] => { +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)); +}; diff --git a/frontend/src/interfaces/route.ts b/frontend/src/interfaces/route.ts index 4395d6545e..4189a0af57 100644 --- a/frontend/src/interfaces/route.ts +++ b/frontend/src/interfaces/route.ts @@ -29,8 +29,7 @@ export interface INavigationMenuItem { } interface IRouteMenu { - mobile?: boolean; - advanced?: boolean; + main?: boolean; adminSettings?: boolean; mode?: Array<'pro' | 'enterprise'>; billing?: boolean;