diff --git a/frontend/src/component/admin/useAdminRoutes.ts b/frontend/src/component/admin/useAdminRoutes.ts index ba3f6c1b04..4b3ebb6545 100644 --- a/frontend/src/component/admin/useAdminRoutes.ts +++ b/frontend/src/component/admin/useAdminRoutes.ts @@ -1,16 +1,19 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { adminRoutes } from './oldAdminRoutes'; +import { adminRoutes as oldAdminRoutes } from './oldAdminRoutes'; +import { adminRoutes } from './adminRoutes'; import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus'; import { filterAdminRoutes } from './filterAdminRoutes'; import { filterByConfig, mapRouteLink } from 'component/common/util'; +import { useUiFlag } from 'hooks/useUiFlag'; export const useAdminRoutes = () => { + const newAdminUIEnabled = useUiFlag('adminNavUI'); const { uiConfig, isPro, isEnterprise } = useUiConfig(); const { isBilling } = useInstanceStatus(); - const routes = [...adminRoutes]; + const routes = newAdminUIEnabled ? [...adminRoutes] : [...oldAdminRoutes]; if (uiConfig.flags.UNLEASH_CLOUD) { - const adminBillingMenuItem = adminRoutes.findIndex( + const adminBillingMenuItem = routes.findIndex( (route) => route.title === 'Billing & invoices', ); routes[adminBillingMenuItem] = { diff --git a/frontend/src/component/commandBar/ButtonItemIcon.tsx b/frontend/src/component/commandBar/ButtonItemIcon.tsx new file mode 100644 index 0000000000..0ba47c6ba7 --- /dev/null +++ b/frontend/src/component/commandBar/ButtonItemIcon.tsx @@ -0,0 +1,22 @@ +import { IconRenderer } from 'component/layout/MainLayout/NavigationSidebar/IconRenderer'; +import InsightsIcon from '@mui/icons-material/Insights'; +import PlaygroundIcon from '@mui/icons-material/AutoFixNormal'; +import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon'; + +export const ButtonItemIcon = ({ + path, +}: { + path: string; +}) => { + if (path === '/projects') { + return ; + } + if (path === '/playground') { + return ; + } + if (path === '/insights') { + return ; + } + + return ; +}; diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx index 0319465fa1..45775295bb 100644 --- a/frontend/src/component/commandBar/CommandBar.tsx +++ b/frontend/src/component/commandBar/CommandBar.tsx @@ -18,7 +18,6 @@ import { type CommandResultGroupItem, } from './RecentlyVisited/CommandResultGroup'; import { CommandPageSuggestions } from './CommandPageSuggestions'; -import { useRoutes } from 'component/layout/MainLayout/NavigationSidebar/useRoutes'; import { useAsyncDebounce } from 'react-table'; import useProjects from 'hooks/api/getters/useProjects/useProjects'; import { @@ -31,6 +30,7 @@ import { CommandSearchPages } from './CommandSearchPages'; import { CommandBarFeedback } from './CommandBarFeedback'; import { RecentlyVisitedRecorder } from './RecentlyVisitedRecorder'; import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly'; +import { useCommandBarRoutes } from './useCommandBarRoutes'; export const CommandResultsPaper = styled(Paper)(({ theme }) => ({ position: 'absolute', @@ -101,12 +101,6 @@ const StyledClose = styled(Close)(({ theme }) => ({ fontSize: theme.typography.body1.fontSize, })); -interface IPageRouteInfo { - path: string; - route: string; - title: string; -} - export const CommandBar = () => { const { trackEvent } = usePlausibleTracker(); const searchInputRef = useRef(null); @@ -124,19 +118,7 @@ export const CommandBar = () => { useState({ query: '', count: 0 }); const [hasNoResults, setHasNoResults] = useState(false); const [value, setValue] = useState(''); - const { routes } = useRoutes(); - const allRoutes: Record = {}; - for (const route of [ - ...routes.mainNavRoutes, - ...routes.adminRoutes, - ...routes.primaryRoutes, - ]) { - allRoutes[route.path] = { - path: route.path, - route: route.route, - title: route.title, - }; - } + const { allRoutes } = useCommandBarRoutes(); const hideSuggestions = () => { setShowSuggestions(false); @@ -159,7 +141,7 @@ export const CommandBar = () => { setSearchedProjects(mappedProjects); const filteredPages = Object.values(allRoutes).filter((route) => - route.title.toLowerCase().includes(query.toLowerCase()), + route.searchText.toLowerCase().includes(query.toLowerCase()), ); const mappedPages = filteredPages.map((page) => ({ name: page.title, diff --git a/frontend/src/component/commandBar/CommandSearchPages.tsx b/frontend/src/component/commandBar/CommandSearchPages.tsx index a11bbaa257..4dbc4f5466 100644 --- a/frontend/src/component/commandBar/CommandSearchPages.tsx +++ b/frontend/src/component/commandBar/CommandSearchPages.tsx @@ -9,7 +9,7 @@ import { type CommandResultGroupItem, } from './RecentlyVisited/CommandResultGroup'; import { ListItemButton } from '@mui/material'; -import { IconRenderer } from 'component/layout/MainLayout/NavigationSidebar/IconRenderer'; +import { ButtonItemIcon } from './ButtonItemIcon'; export const CommandSearchPages = ({ items, @@ -50,7 +50,7 @@ export const CommandSearchPages = ({ sx={listItemButtonStyle} > - + diff --git a/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx b/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx index f23ace4d7d..4bd845d956 100644 --- a/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx +++ b/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx @@ -10,14 +10,12 @@ import { import { Link } from 'react-router-dom'; import type { Theme } from '@mui/material/styles/createTheme'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { IconRenderer } from 'component/layout/MainLayout/NavigationSidebar/IconRenderer'; -import InsightsIcon from '@mui/icons-material/Insights'; -import PlaygroundIcon from '@mui/icons-material/AutoFixNormal'; import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview'; import { Children } from 'react'; import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon'; +import { ButtonItemIcon } from '../ButtonItemIcon'; export const listItemButtonStyle = (theme: Theme) => ({ border: `1px solid transparent`, @@ -48,24 +46,6 @@ export interface CommandResultGroupItem { description?: string | null; } -const ButtonItemIcon = ({ - path, -}: { - path: string; -}) => { - if (path === '/projects') { - return ; - } - if (path === '/playground') { - return ; - } - if (path === '/insights') { - return ; - } - - return ; -}; - export const RecentlyVisitedPathButton = ({ keyName, path, diff --git a/frontend/src/component/commandBar/useCommandBarRoutes.ts b/frontend/src/component/commandBar/useCommandBarRoutes.ts new file mode 100644 index 0000000000..b60eafb311 --- /dev/null +++ b/frontend/src/component/commandBar/useCommandBarRoutes.ts @@ -0,0 +1,55 @@ +import { adminGroups } from 'component/admin/adminRoutes'; +import { useRoutes } from 'component/layout/MainLayout/NavigationSidebar/useRoutes'; +import { useUiFlag } from 'hooks/useUiFlag'; +import type { INavigationMenuItem } from 'interfaces/route'; +import { useMemo } from 'react'; + +interface IPageRouteInfo { + path: string; + route: string; + title: string; + searchText: string; +} + +export const useCommandBarRoutes = () => { + const newAdminUIEnabled = useUiFlag('adminNavUI'); + const { routes } = useRoutes(); + const getSearchText = (route: INavigationMenuItem, title: string) => { + if (route.group && adminGroups[route.group]) { + return `${title} ${route.path} ${route.group} ${adminGroups[route.group]}`; + } + + return `${title} ${route.path}`; + }; + + const getRouteTitle = (route: INavigationMenuItem) => { + if (route.path === '/admin') { + return 'Admin settings'; + } + + return route.title; + }; + return useMemo(() => { + const allRoutes: Record = {}; + for (const route of [ + ...routes.mainNavRoutes, + ...routes.adminRoutes, + ...routes.primaryRoutes, + ]) { + const title = getRouteTitle(route); + allRoutes[route.path] = { + path: route.path, + route: route.route, + title: title, + searchText: newAdminUIEnabled + ? getSearchText(route, title) + : title, + }; + } + + return { + allRoutes, + newAdminUIEnabled, + }; + }, [routes]); +}; diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx index cf0a896cec..01b1ff35d8 100644 --- a/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx +++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx @@ -13,7 +13,9 @@ import UsersIcon from '@mui/icons-material/GroupOutlined'; import ServiceAccountIcon from '@mui/icons-material/Computer'; import GroupsIcon from '@mui/icons-material/GroupsOutlined'; import RoleIcon from '@mui/icons-material/AdminPanelSettingsOutlined'; +import SettingsIcon from '@mui/icons-material/Settings'; import SearchIcon from '@mui/icons-material/Search'; +import InsightsIcon from '@mui/icons-material/Insights'; import ApiAccessIcon from '@mui/icons-material/KeyOutlined'; import SingleSignOnIcon from '@mui/icons-material/AssignmentOutlined'; import NetworkIcon from '@mui/icons-material/HubOutlined'; @@ -39,6 +41,7 @@ const icons: Record< typeof SvgIcon | FC> > = { '/search': SearchIcon, + '/insights': InsightsIcon, '/applications': ApplicationsIcon, '/context': ContextFieldsIcon, '/feature-toggle-type': FlagTypesIcon, @@ -47,13 +50,24 @@ const icons: Record< '/strategies': CustomStrategiesIcon, '/tag-types': TagTypesIcon, '/environments': EnvironmentsIcon, + '/admin': SettingsIcon, '/admin/users': UsersIcon, '/admin/service-accounts': ServiceAccountIcon, '/admin/groups': GroupsIcon, '/admin/roles': RoleIcon, + '/admin/roles/project-roles': RoleIcon, '/admin/api': ApiAccessIcon, '/admin/auth': SingleSignOnIcon, + '/admin/auth/saml': SingleSignOnIcon, + '/admin/auth/scim': SingleSignOnIcon, + '/admin/auth/password': SingleSignOnIcon, + '/admin/auth/google': SingleSignOnIcon, '/admin/network': NetworkIcon, + '/admin/network/traffic': NetworkIcon, + '/admin/network/data-usage': NetworkIcon, + '/admin/network/frontend-data-usage': NetworkIcon, + '/admin/network/connected-edges': NetworkIcon, + '/admin/network/backend-connections': NetworkIcon, '/admin/maintenance': MaintenanceIcon, '/admin/banners': BannersIcon, '/admin/instance': InstanceStatsIcon,