BED-5453: deep linking support for selected environment

cmd/ui/src/App.tsx

@@ -39,14 +39,14 @@ import { fullyAuthenticatedSelector, initialize } from 'src/ducks/auth/authSlice
 import { ROUTES } from 'src/routes';
 import { useAppDispatch, useAppSelector } from 'src/store';
 import { initializeBHEClient } from 'src/utils';
-import Content from 'src/views/Content';
 import {
-    MainNavPrimaryListData,
     useMainNavLogoData,
+    useMainNavPrimaryListData,
     useMainNavSecondaryListData,
 } from './components/MainNav/MainNavData';
 import Notifier from './components/Notifier';
 import { setDarkMode } from './ducks/global/actions';
+import ContentFeatureToggle from './views/ContentFeatureToggle';
 
 export const Inner: React.FC = () => {
     const dispatch = useAppDispatch();
@@ -56,7 +56,7 @@ export const Inner: React.FC = () => {
     const featureFlagsRes = useFeatureFlags({ retry: false, enabled: !!authState.isInitialized && fullyAuthenticated });
     const mainNavData = {
         logo: useMainNavLogoData(),
-        primaryList: MainNavPrimaryListData,
+        primaryList: useMainNavPrimaryListData(),
         secondaryList: useMainNavSecondaryListData(),
     };
     const showNavBar = useShowNavBar(ROUTES);
@@ -183,7 +183,7 @@ export const Inner: React.FC = () => {
         <Box className={`${classes.applicationContainer}`} id='app-root'>
             {showNavBar && <MainNav mainNavData={mainNavData} />}
             <Box className={classes.applicationContent}>
-                <Content />
+                <ContentFeatureToggle />
             </Box>
             <AppNotifications />
             <Notifier />

cmd/ui/src/components/MainNav/MainNavData.tsx

@@ -15,14 +15,21 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Switch } from '@bloodhoundenterprise/doodleui';
-import { AppIcon } from 'bh-shared-ui';
-import { logout } from 'src/ducks/auth/authSlice';
+import { AppIcon, GloballySupportedSearchParams, useFeatureFlag } from 'bh-shared-ui';
+import { fullyAuthenticatedSelector, logout } from 'src/ducks/auth/authSlice';
 import { setDarkMode } from 'src/ducks/global/actions.ts';
 import * as routes from 'src/routes/constants';
 import { useAppDispatch, useAppSelector } from 'src/store';
 
 export const useMainNavLogoData = () => {
+    const authState = useAppSelector((state) => state.auth);
+    const fullyAuthenticated = useAppSelector(fullyAuthenticatedSelector);
+    const { data: flag } = useFeatureFlag('back_button_support', {
+        enabled: !!authState.isInitialized && fullyAuthenticated,
+    });
+
     const darkMode = useAppSelector((state) => state.global.view.darkMode);
+
     const bhceImageUrlDarkMode = '/img/banner-ce-dark-mode.png';
     const bhceImageUrlLightMode = '/img/banner-ce-light-mode.png';
     const soImageUrlDarkMode = '/img/banner-so-dark-mode.png';
@@ -45,25 +52,41 @@ export const useMainNavLogoData = () => {
                 altText: 'SpecterOps Text Logo',
             },
         },
+        persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
     };
 };
 
-export const MainNavPrimaryListData = [
-    {
-        label: 'Explore',
-        icon: <AppIcon.LineChart size={24} />,
-        route: routes.ROUTE_EXPLORE,
-        testId: 'global_nav-explore',
-    },
-    {
-        label: 'Group Management',
-        icon: <AppIcon.Diamond size={24} />,
-        route: routes.ROUTE_GROUP_MANAGEMENT,
-        testId: 'global_nav-group-management',
-    },
-];
+export const useMainNavPrimaryListData = () => {
+    const authState = useAppSelector((state) => state.auth);
+    const fullyAuthenticated = useAppSelector(fullyAuthenticatedSelector);
+    const { data: flag } = useFeatureFlag('back_button_support', {
+        enabled: !!authState.isInitialized && fullyAuthenticated,
+    });
+    return [
+        {
+            label: 'Explore',
+            icon: <AppIcon.LineChart size={24} />,
+            route: routes.ROUTE_EXPLORE,
+            testId: 'global_nav-explore',
+            persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
+        },
+        {
+            label: 'Group Management',
+            icon: <AppIcon.Diamond size={24} />,
+            route: routes.ROUTE_GROUP_MANAGEMENT,
+            testId: 'global_nav-group-management',
+            persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
+        },
+    ];
+};
 
 export const useMainNavSecondaryListData = () => {
+    const authState = useAppSelector((state) => state.auth);
+    const fullyAuthenticated = useAppSelector(fullyAuthenticatedSelector);
+    const { data: flag } = useFeatureFlag('back_button_support', {
+        enabled: !!authState.isInitialized && fullyAuthenticated,
+    });
+
     const dispatch = useAppDispatch();
     const darkMode = useAppSelector((state) => state.global.view.darkMode);
 
@@ -85,30 +108,35 @@ export const useMainNavSecondaryListData = () => {
             icon: <AppIcon.User size={24} />,
             route: routes.ROUTE_MY_PROFILE,
             testId: 'global_nav-my-profile',
+            persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
         },
         {
             label: 'Download Collectors',
             icon: <AppIcon.Download size={24} />,
             route: routes.ROUTE_DOWNLOAD_COLLECTORS,
             testId: 'global_nav-download-collectors',
+            persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
         },
         {
             label: 'Administration',
             icon: <AppIcon.UserCog size={24} />,
-            route: routes.ROUTE_ADMINISTRATION_ROOT,
+            route: routes.DEFAULT_ADMINISTRATION_ROUTE,
             testId: 'global_nav-administration',
+            persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
         },
         {
             label: 'API Explorer',
             icon: <AppIcon.Compass size={24} />,
             route: routes.ROUTE_API_EXPLORER,
             testId: 'global_nav-api-explorer',
+            persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
         },
         {
             label: 'Docs and Support',
             icon: <AppIcon.FileMagnifyingGlass size={24} />,
             functionHandler: handleGoToSupport,
             testId: 'global_nav-support',
+            persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
         },
         {
             label: (
@@ -120,12 +148,14 @@ export const useMainNavSecondaryListData = () => {
             icon: <AppIcon.EclipseCircle size={24} />,
             functionHandler: handleToggleDarkMode,
             testId: 'global_nav-dark-mode',
+            persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
         },
         {
             label: 'Log Out',
             icon: <AppIcon.Logout size={24} />,
             functionHandler: handleLogout,
             testId: 'global_nav-logout',
+            persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
         },
     ];
 };

cmd/ui/src/mocks/browser.ts

@@ -15,7 +15,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { setupWorker } from 'msw';
-// import handlers from './handlers';
+import handlers from './handlers';
 
 // This configures a Service Worker with the given request handlers.
-export const worker = setupWorker();
+export const worker = setupWorker(...handlers.deepLinking);

cmd/ui/src/routes/constants.ts

@@ -33,3 +33,6 @@ export const ROUTE_ADMINISTRATION_SSO_CONFIGURATION = '/administration/sso-confi
 export const ROUTE_ADMINISTRATION_EARLY_ACCESS_FEATURES = '/administration/early-access-features';
 export const ROUTE_ADMINISTRATION_BLOODHOUND_CONFIGURATION = '/administration/bloodhound-configuration';
 export const ROUTE_API_EXPLORER = '/api-explorer';
+
+export const ENVIRONMENT_SUPPORTED_ROUTES = [ROUTE_GROUP_MANAGEMENT, ROUTE_ADMINISTRATION_DATA_QUALITY];
+export const DEFAULT_ADMINISTRATION_ROUTE = ROUTE_ADMINISTRATION_FILE_INGEST;

cmd/ui/src/routes/index.ts

@@ -27,7 +27,7 @@ const UserProfile = React.lazy(() => import('bh-shared-ui').then((module) => ({
 const DownloadCollectors = React.lazy(() => import('src/views/DownloadCollectors'));
 const Administration = React.lazy(() => import('src/views/Administration'));
 const ApiExplorer = React.lazy(() => import('bh-shared-ui').then((module) => ({ default: module.ApiExplorer })));
-const GroupManagement = React.lazy(() => import('src/views/GroupManagement/GroupManagement'));
+const GroupManagementFeatureToggle = React.lazy(() => import('src/views/GroupManagement/GroupManagementFeatureToggle'));
 
 export const ROUTES = [
     {
@@ -62,7 +62,7 @@ export const ROUTES = [
     },
     {
         path: routes.ROUTE_GROUP_MANAGEMENT,
-        component: GroupManagement,
+        component: GroupManagementFeatureToggle,
         authenticationRequired: true,
         navigation: true,
     },

cmd/ui/src/views/Administration/Administration.tsx

@@ -15,12 +15,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Box, CircularProgress, Container } from '@mui/material';
-import { GenericErrorBoundaryFallback, Permission, SubNav } from 'bh-shared-ui';
+import { GenericErrorBoundaryFallback, GloballySupportedSearchParams, SubNav, useFeatureFlag } from 'bh-shared-ui';
 import React, { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import usePermissions from 'src/hooks/usePermissions/usePermissions';
 import {
+    DEFAULT_ADMINISTRATION_ROUTE,
     ROUTE_ADMINISTRATION_BLOODHOUND_CONFIGURATION,
     ROUTE_ADMINISTRATION_DATA_QUALITY,
     ROUTE_ADMINISTRATION_DB_MANAGEMENT,
@@ -29,6 +30,7 @@ import {
     ROUTE_ADMINISTRATION_MANAGE_USERS,
     ROUTE_ADMINISTRATION_SSO_CONFIGURATION,
 } from 'src/routes/constants';
+import { AdminSection, getAdminFilteredSections, getAdminSubRoute } from './utils';
 
 const DatabaseManagement = React.lazy(() => import('src/views/DatabaseManagement'));
 const QA = React.lazy(() => import('src/views/QA'));
@@ -41,7 +43,8 @@ const SSOConfiguration = React.lazy(() =>
 );
 
 const Administration: React.FC = () => {
-    const sections = [
+    const { data: flag } = useFeatureFlag('back_button_support');
+    const sections: AdminSection[] = [
         {
             title: 'Data Collection',
             items: [
@@ -50,18 +53,21 @@ const Administration: React.FC = () => {
                     path: ROUTE_ADMINISTRATION_FILE_INGEST,
                     component: FileIngest,
                     adminOnly: false,
+                    persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
                 },
                 {
                     label: 'Data Quality',
                     path: ROUTE_ADMINISTRATION_DATA_QUALITY,
                     component: QA,
                     adminOnly: false,
+                    persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
                 },
                 {
                     label: 'Database Management',
                     path: ROUTE_ADMINISTRATION_DB_MANAGEMENT,
                     component: DatabaseManagement,
                     adminOnly: false,
+                    persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
                 },
             ],
             order: 0,
@@ -74,6 +80,7 @@ const Administration: React.FC = () => {
                     path: ROUTE_ADMINISTRATION_MANAGE_USERS,
                     component: Users,
                     adminOnly: false,
+                    persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
                 },
             ],
             order: 0,
@@ -86,6 +93,7 @@ const Administration: React.FC = () => {
                     path: ROUTE_ADMINISTRATION_SSO_CONFIGURATION,
                     component: SSOConfiguration,
                     adminOnly: false,
+                    persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
                 },
             ],
             order: 0,
@@ -98,12 +106,14 @@ const Administration: React.FC = () => {
                     path: ROUTE_ADMINISTRATION_BLOODHOUND_CONFIGURATION,
                     component: BloodHoundConfiguration,
                     adminOnly: true,
+                    persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
                 },
                 {
                     label: 'Early Access Features',
                     path: ROUTE_ADMINISTRATION_EARLY_ACCESS_FEATURES,
                     component: EarlyAccessFeatures,
                     adminOnly: false,
+                    persistentSearchParams: flag?.enabled ? GloballySupportedSearchParams : undefined,
                 },
             ],
             order: 1,
@@ -112,23 +122,8 @@ const Administration: React.FC = () => {
 
     const { checkAllPermissions } = usePermissions();
 
-    // Checking these for now because the only route we are currently hiding is to the configuration page.
-    // In practice, this will permit Administrators and Power User roles only.
-    const hasAdminPermissions = checkAllPermissions([
-        Permission.APP_READ_APPLICATION_CONFIGURATION,
-        Permission.APP_WRITE_APPLICATION_CONFIGURATION,
-    ]);
-
     // Filter adminOnly links from the data we pass to the sidebar if a user does not have the correct permissions
-    const adminFilteredSections = sections
-        .map((section) => {
-            const filteredItems = section.items.filter((item) => !item.adminOnly || hasAdminPermissions);
-            return {
-                ...section,
-                items: filteredItems,
-            };
-        })
-        .filter((section) => section.items.length !== 0);
+    const adminFilteredSections = getAdminFilteredSections(sections, checkAllPermissions);
 
     return (
         <Box className='flex h-full pl-subnav-width'>
@@ -159,7 +154,7 @@ const Administration: React.FC = () => {
                                         .reduce((acc, val) => acc.concat(val), [])
                                         .map((item) => (
                                             <Route
-                                                path={item.path.slice(16)}
+                                                path={getAdminSubRoute(item.path)}
                                                 key={item.path}
                                                 element={
                                                     <ErrorBoundary fallbackRender={GenericErrorBoundaryFallback}>
@@ -168,7 +163,12 @@ const Administration: React.FC = () => {
                                                 }
                                             />
                                         ))}
-                                    <Route path='*' element={<Navigate to='file-ingest' replace />} />
+                                    <Route
+                                        path='*'
+                                        element={
+                                            <Navigate to={getAdminSubRoute(DEFAULT_ADMINISTRATION_ROUTE)} replace />
+                                        }
+                                    />
                                 </Routes>
                             </Suspense>
                         </Box>

cmd/ui/src/views/Administration/utils.ts

@@ -0,0 +1,58 @@
+// Copyright 2025 Specter Ops, Inc.
+//
+// Licensed under the Apache License, Version 2.0
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { Permission } from 'bh-shared-ui';
+import { FC, LazyExoticComponent } from 'react';
+
+export const getAdminSubRoute = (route: string) => {
+    const administrationRoute = '/administration/';
+    return route.slice(administrationRoute.length);
+};
+
+interface AdminSectionItem {
+    label: string;
+    path: string;
+    component: LazyExoticComponent<FC>;
+    adminOnly: boolean;
+    persistentSearchParams?: string[];
+}
+
+export interface AdminSection {
+    title: string;
+    items: AdminSectionItem[];
+    order: number;
+}
+
+export const getAdminFilteredSections = (
+    sections: AdminSection[],
+    checkAllPermissions: (permissions: Permission[]) => boolean
+) => {
+    // Checking these for now because the only route we are currently hiding is to the configuration page.
+    // In practice, this will permit Administrators and Power User roles only.
+    const hasAdminPermissions = checkAllPermissions([
+        Permission.APP_READ_APPLICATION_CONFIGURATION,
+        Permission.APP_WRITE_APPLICATION_CONFIGURATION,
+    ]);
+    return sections
+        .map((section) => {
+            const filteredItems = section.items.filter((item) => !item.adminOnly || hasAdminPermissions);
+            return {
+                ...section,
+                items: filteredItems,
+            };
+        })
+        .filter((section) => section.items.length !== 0);
+};