Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00
Code Issues Projects Releases Wiki Activity

chore: clean up frontend routes (#9533)

Browse Source
This commit is contained in:
David Leek 2025-03-14 08:18:01 +01:00 committed by GitHub
parent 0d0530b61c
commit 8ab1a49294
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 38 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/component/commandBar/CommandBar.tsx
View File

@ -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,

9
frontend/src/component/layout/MainLayout/NavigationSidebar/useRoutes.ts
View File

@ -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,

7
frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx
View File

@ -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

17
frontend/src/component/menu/Header/Header.tsx
View File

@ -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 />

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

@ -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",

52
frontend/src/component/menu/routes.ts
View File

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

3
frontend/src/interfaces/route.ts
View File

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