Bed 4769 refactor: SAML admin UI to SSO admin UI (#899)

cmd/ui/src/App.tsx

@@ -25,6 +25,7 @@ import {
     darkPalette,
     typography,
     components,
+    useFeatureFlags,
 } from 'bh-shared-ui';
 import { createBrowserHistory } from 'history';
 import React, { useEffect } from 'react';
@@ -34,7 +35,6 @@ import { unstable_HistoryRouter as BrowserRouter, useLocation } from 'react-rout
 import Header from 'src/components/Header';
 import { fullyAuthenticatedSelector, initialize } from 'src/ducks/auth/authSlice';
 import { ROUTE_EXPIRED_PASSWORD, ROUTE_LOGIN, ROUTE_USER_DISABLED } from 'src/ducks/global/routes';
-import { useFeatureFlags } from 'src/hooks/useFeatureFlags';
 import { useAppDispatch, useAppSelector } from 'src/store';
 import { initializeBHEClient } from 'src/utils';
 import Content from 'src/views/Content';

cmd/ui/src/components/Notifier.tsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 //
 // SPDX-License-Identifier: Apache-2.0
-
+import { SnackbarKey } from 'notistack';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconButton, SvgIcon } from '@mui/material';
@@ -76,12 +76,12 @@ const Notifier: React.FC = () => {
                 ...options,
                 onClose: (event, reason, myKey) => {
                     if (options.onClose) {
-                        options.onClose(event, myKey, reason);
+                        options.onClose(event, reason, myKey);
                     }
                 },
-                onExited: (event, myKey: string) => {
+                onExited: (_, myKey: SnackbarKey) => {
                     dispatch(removeSnackbar(myKey));
-                    removeDisplayed(myKey);
+                    removeDisplayed(myKey.toString());
                 },
             });
 

cmd/ui/src/components/SettingsMenu.tsx

@@ -31,14 +31,13 @@ import ListItemText from '@mui/material/ListItemText';
 import Menu, { MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import withStyles from '@mui/styles/withStyles';
-import { EnterpriseIcon } from 'bh-shared-ui';
+import { EnterpriseIcon, FeatureFlag } from 'bh-shared-ui';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { logout } from 'src/ducks/auth/authSlice';
 import { setDarkMode } from 'src/ducks/global/actions.ts';
 import * as routes from 'src/ducks/global/routes';
 import { useAppDispatch, useAppSelector } from 'src/store';
-import FeatureFlag from './FeatureFlag';
 
 interface Props {
     anchorEl: null | HTMLElement;

cmd/ui/src/ducks/global/actions.ts

@@ -13,17 +13,21 @@
 // limitations under the License.
 //
 // SPDX-License-Identifier: Apache-2.0
-
+import { OptionsObject, SnackbarKey } from 'notistack';
 import * as types from './types';
 
-export const removeSnackbar = (key: string): types.GlobalViewActionTypes => {
+export const removeSnackbar = (key: SnackbarKey): types.GlobalViewActionTypes => {
     return {
         type: types.GLOBAL_REMOVE_SNACKBAR,
         key: key,
     };
 };
 
-export const addSnackbar = (notification: string, key: string, options: any = {}): types.GlobalViewActionTypes => {
+export const addSnackbar = (
+    notification: string,
+    key: string,
+    options: OptionsObject = {}
+): types.GlobalViewActionTypes => {
     return {
         type: types.GLOBAL_ADD_SNACKBAR,
         notification: {

cmd/ui/src/ducks/global/reducer.ts

@@ -14,7 +14,7 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { produce } from 'immer';
+import { produce, castDraft } from 'immer';
 import { combineReducers } from '@reduxjs/toolkit';
 import * as types from './types';
 import assign from 'lodash/assign';
@@ -27,7 +27,7 @@ const initialGlobalState: types.GlobalViewState = {
 const globalViewReducer = (state = initialGlobalState, action: types.GlobalViewActionTypes) => {
     return produce(state, (draft) => {
         if (action.type === types.GLOBAL_ADD_SNACKBAR) {
-            draft.notifications = [...draft.notifications, action.notification];
+            draft.notifications = [...draft.notifications, castDraft(action.notification)];
         } else if (action.type === types.GLOBAL_CLOSE_SNACKBAR) {
             draft.notifications = draft.notifications.map((notification) => {
                 return action.key === null || action.key === notification.key

cmd/ui/src/ducks/global/routes.ts

@@ -29,7 +29,7 @@ export const ROUTE_ADMINISTRATION_FILE_INGEST = '/administration/file-ingest';
 export const ROUTE_ADMINISTRATION_DATA_QUALITY = '/administration/data-quality';
 export const ROUTE_ADMINISTRATION_DB_MANAGEMENT = '/administration/database-management';
 export const ROUTE_ADMINISTRATION_MANAGE_USERS = '/administration/manage-users';
-export const ROUTE_ADMINISTRATION_SAML_CONFIGURATION = '/administration/saml-configuration';
+export const ROUTE_ADMINISTRATION_SSO_CONFIGURATION = '/administration/sso-configuration';
 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';

cmd/ui/src/ducks/global/types.ts

@@ -13,6 +13,8 @@
 // limitations under the License.
 //
 // SPDX-License-Identifier: Apache-2.0
+import { SnackbarKey } from 'notistack';
+import { Notification } from 'bh-shared-ui';
 
 const GLOBAL_ADD_SNACKBAR = 'app/global/ADDSNACKBAR';
 const GLOBAL_CLOSE_SNACKBAR = 'app/global/CLOSESNACKBAR';
@@ -43,13 +45,6 @@ export interface GlobalViewState {
     darkMode: boolean;
 }
 
-export interface Notification {
-    message: string;
-    key: string;
-    dismissed: boolean;
-    options: any;
-}
-
 export interface GlobalOptionsState {
     domain: Domain | null;
     assetGroups: any[];
@@ -68,12 +63,12 @@ interface AddSnackbarAction {
 
 interface RemoveSnackbarAction {
     type: typeof GLOBAL_REMOVE_SNACKBAR;
-    key: string;
+    key: SnackbarKey;
 }
 
 interface CloseSnackbarAction {
     type: typeof GLOBAL_CLOSE_SNACKBAR;
-    key: string;
+    key: SnackbarKey;
 }
 
 export interface SetDarkModeAction {

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

@@ -19,7 +19,7 @@ import {
     ROUTE_ADMINISTRATION_DATA_QUALITY,
     ROUTE_ADMINISTRATION_EARLY_ACCESS_FEATURES,
     ROUTE_ADMINISTRATION_MANAGE_USERS,
-    ROUTE_ADMINISTRATION_SAML_CONFIGURATION,
+    ROUTE_ADMINISTRATION_SSO_CONFIGURATION,
 } from 'src/ducks/global/routes';
 import { render, screen } from 'src/test-utils';
 import Administration from './Administration';
@@ -46,10 +46,10 @@ describe('Administration', () => {
             ROUTE_ADMINISTRATION_EARLY_ACCESS_FEATURES
         );
 
-        expect(await screen.findByRole('link', { name: 'SAML Configuration' })).toBeInTheDocument();
-        expect(screen.getByRole('link', { name: 'SAML Configuration' })).toHaveAttribute(
+        expect(await screen.findByRole('link', { name: 'SSO Configuration' })).toBeInTheDocument();
+        expect(screen.getByRole('link', { name: 'SSO Configuration' })).toHaveAttribute(
             'href',
-            ROUTE_ADMINISTRATION_SAML_CONFIGURATION
+            ROUTE_ADMINISTRATION_SSO_CONFIGURATION
         );
     });
 

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

@@ -25,18 +25,21 @@ import {
     ROUTE_ADMINISTRATION_DATA_QUALITY,
     ROUTE_ADMINISTRATION_EARLY_ACCESS_FEATURES,
     ROUTE_ADMINISTRATION_MANAGE_USERS,
-    ROUTE_ADMINISTRATION_SAML_CONFIGURATION,
+    ROUTE_ADMINISTRATION_SSO_CONFIGURATION,
     ROUTE_ADMINISTRATION_DB_MANAGEMENT,
     ROUTE_ADMINISTRATION_BLOODHOUND_CONFIGURATION,
 } from 'src/ducks/global/routes';
 import usePermissions from 'src/hooks/usePermissions/usePermissions';
+
 const DatabaseManagement = React.lazy(() => import('src/views/DatabaseManagement'));
 const QA = React.lazy(() => import('src/views/QA'));
 const Users = React.lazy(() => import('src/views/Users'));
-const SAMLConfiguration = React.lazy(() => import('src/views/SAMLConfiguration'));
 const EarlyAccessFeatures = React.lazy(() => import('src/views/EarlyAccessFeatures'));
 const FileIngest = React.lazy(() => import('bh-shared-ui').then((module) => ({ default: module.FileIngest })));
 const BloodHoundConfiguration = React.lazy(() => import('src/views/BloodHoundConfiguration'));
+const SSOConfiguration = React.lazy(() =>
+    import('bh-shared-ui').then((module) => ({ default: module.SSOConfiguration }))
+);
 
 const Administration: React.FC = () => {
     const sections = [
@@ -80,9 +83,9 @@ const Administration: React.FC = () => {
             title: 'Authentication',
             items: [
                 {
-                    label: 'SAML Configuration',
-                    path: ROUTE_ADMINISTRATION_SAML_CONFIGURATION,
-                    component: SAMLConfiguration,
+                    label: 'SSO Configuration',
+                    path: ROUTE_ADMINISTRATION_SSO_CONFIGURATION,
+                    component: SSOConfiguration,
                     adminOnly: false,
                 },
             ],

cmd/ui/src/views/DatabaseManagement/DatabaseManagement.tsx

@@ -16,14 +16,13 @@
 
 import { Button } from '@bloodhoundenterprise/doodleui';
 import { Alert, Box, Checkbox, FormControl, FormControlLabel, FormGroup, Typography } from '@mui/material';
-import { PageWithTitle, apiClient } from 'bh-shared-ui';
+import { PageWithTitle, apiClient, FeatureFlag } from 'bh-shared-ui';
 import { useReducer } from 'react';
 import ConfirmationDialog from './ConfirmationDialog';
 import { useMutation } from 'react-query';
 import { useSelector } from 'react-redux';
 import { selectAllAssetGroupIds, selectTierZeroAssetGroupId } from 'src/ducks/assetgroups/reducer';
 import { ClearDatabaseRequest } from 'js-client-library';
-import FeatureFlag from 'src/components/FeatureFlag';
 
 const initialState: State = {
     deleteCollectedGraphData: false,

cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.test.tsx

@@ -17,7 +17,7 @@
 import userEvent from '@testing-library/user-event';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
-import { Flag } from 'src/hooks/useFeatureFlags';
+import { Flag } from 'bh-shared-ui';
 import { act, render, screen } from 'src/test-utils';
 import EarlyAccessFeatures from '.';
 

cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx

@@ -30,11 +30,10 @@ import {
     Skeleton,
     Typography,
 } from '@mui/material';
-import { PageWithTitle } from 'bh-shared-ui';
+import { PageWithTitle, Flag, useFeatureFlags, useToggleFeatureFlag } from 'bh-shared-ui';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { setDarkMode } from 'src/ducks/global/actions';
-import { Flag, useFeatureFlags, useToggleFeatureFlag } from 'src/hooks/useFeatureFlags';
 import { useAppDispatch } from 'src/store';
 
 export const EarlyAccessFeatureToggle: React.FC<{

cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeaturesToggle.test.tsx

@@ -17,7 +17,7 @@
 import userEvent from '@testing-library/user-event';
 import { render, screen } from 'src/test-utils';
 import { EarlyAccessFeatureToggle } from './EarlyAccessFeatures';
-import { Flag } from 'src/hooks/useFeatureFlags';
+import { Flag } from 'bh-shared-ui';
 
 describe('EarlyAccessFeatureToggle', () => {
     it('renders', () => {