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,