From 159ba42a34c22e28be79d502dbeae31aa6f427fa Mon Sep 17 00:00:00 2001 From: Stephen Hinck Date: Thu, 27 Jun 2024 13:59:20 -0700 Subject: [PATCH] BED-4488 (round 2) - Code cleanup and additional UX improvements on helper texts (#671) * Improve readability and consistency of elements * Updates for consistency and UX clarity * prep-for-review format * remove unnecessary dep * remove unused dep * pr feedback * PR feedback * Consistent usage of pageDescription * formatter * Fix test * remove unused dep * quick nit --- .../DatabaseManagement.test.tsx | 2 +- .../DatabaseManagement/DatabaseManagement.tsx | 14 ++-- .../DownloadCollectors/DownloadCollectors.tsx | 45 +++------- .../EarlyAccessFeatures.tsx | 14 +++- cmd/ui/src/views/QA/QA.tsx | 33 ++++---- .../SAMLConfiguration/SAMLConfiguration.tsx | 32 +++---- cmd/ui/src/views/Users/Users.tsx | 34 +++----- .../ContentPage/ContentPage.test.tsx | 36 -------- .../components/ContentPage/ContentPage.tsx | 45 ---------- .../src/components/ContentPage/index.ts | 18 ---- .../src/components/DocumentationLinks.tsx | 84 +++++++++++++++++++ .../src/components/FileIngest/FileIngest.tsx | 75 +++++++---------- .../src/components/PageWithTitle.tsx | 29 +++---- .../bh-shared-ui/src/components/index.ts | 6 +- .../swagger/OperationsLayoutPlugin.tsx | 11 ++- .../src/views/UserProfile/UserProfile.tsx | 27 +++++- 16 files changed, 247 insertions(+), 258 deletions(-) delete mode 100644 packages/javascript/bh-shared-ui/src/components/ContentPage/ContentPage.test.tsx delete mode 100644 packages/javascript/bh-shared-ui/src/components/ContentPage/ContentPage.tsx delete mode 100644 packages/javascript/bh-shared-ui/src/components/ContentPage/index.ts create mode 100644 packages/javascript/bh-shared-ui/src/components/DocumentationLinks.tsx diff --git a/cmd/ui/src/views/DatabaseManagement/DatabaseManagement.test.tsx b/cmd/ui/src/views/DatabaseManagement/DatabaseManagement.test.tsx index a4f2a397e..c537c7c8d 100644 --- a/cmd/ui/src/views/DatabaseManagement/DatabaseManagement.test.tsx +++ b/cmd/ui/src/views/DatabaseManagement/DatabaseManagement.test.tsx @@ -52,7 +52,7 @@ describe('DatabaseManagement', () => { afterAll(() => server.close()); it('renders', async () => { - const title = screen.getByText(/clear bloodhound data/i); + const title = screen.getByText(/Database Management/i); const button = screen.getByRole('button', { name: /proceed/i }); expect(title).toBeInTheDocument(); diff --git a/cmd/ui/src/views/DatabaseManagement/DatabaseManagement.tsx b/cmd/ui/src/views/DatabaseManagement/DatabaseManagement.tsx index efe3a8bd6..46ba71566 100644 --- a/cmd/ui/src/views/DatabaseManagement/DatabaseManagement.tsx +++ b/cmd/ui/src/views/DatabaseManagement/DatabaseManagement.tsx @@ -15,7 +15,7 @@ // SPDX-License-Identifier: Apache-2.0 import { Alert, Box, Button, Checkbox, FormControl, FormControlLabel, FormGroup, Typography } from '@mui/material'; -import { ContentPage, apiClient } from 'bh-shared-ui'; +import { PageWithTitle, apiClient } from 'bh-shared-ui'; import { useReducer } from 'react'; import ConfirmationDialog from './ConfirmationDialog'; import { useMutation } from 'react-query'; @@ -220,11 +220,15 @@ const DatabaseManagement = () => { }; return ( - - - + Manage your BloodHound data. Select from the options below which data should be deleted. + }> + Caution: This change is irreversible and will delete data from your environment. @@ -324,7 +328,7 @@ const DatabaseManagement = () => { handleClose={() => dispatch({ type: 'close_dialog' })} handleDelete={() => handleMutation()} /> - + ); }; diff --git a/cmd/ui/src/views/DownloadCollectors/DownloadCollectors.tsx b/cmd/ui/src/views/DownloadCollectors/DownloadCollectors.tsx index 86f4ab47f..c678d0f80 100644 --- a/cmd/ui/src/views/DownloadCollectors/DownloadCollectors.tsx +++ b/cmd/ui/src/views/DownloadCollectors/DownloadCollectors.tsx @@ -14,10 +14,10 @@ // // SPDX-License-Identifier: Apache-2.0 -import { Alert, Box, Link, Paper, Skeleton, Typography, useTheme } from '@mui/material'; +import { Alert, Box, Paper, Skeleton, Typography, useTheme } from '@mui/material'; import fileDownload from 'js-file-download'; import { useDispatch } from 'react-redux'; -import { apiClient } from 'bh-shared-ui'; +import { apiClient, DocumentationLinks } from 'bh-shared-ui'; import { CollectorCardList, PageWithTitle } from 'bh-shared-ui'; import { addSnackbar } from 'src/ducks/global/actions'; import { CollectorType, useGetCollectorsByType } from 'src/hooks/useCollectors'; @@ -67,38 +67,19 @@ const DownloadCollectors = () => { }); }; - const sharpHoundCELink = ( - - SharpHound Community - - ); - - const azureHoundCELink = ( - - AzureHound Community - - ); - /* Implementation */ return ( - - -

To get started, collect data using SharpHound or AzureHound.

-

- BloodHound CE supports both {sharpHoundCELink} or {azureHoundCELink} collectors. -

- - + + To get started, collect data using SharpHound or AzureHound. +
+ BloodHound CE supports both {DocumentationLinks.sharpHoundCELink} and{' '} + {DocumentationLinks.azureHoundCELink} collectors. + + }> {(sharpHoundCollectorsQuery.isError || azureHoundCollectorsQuery.isError || diff --git a/cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx b/cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx index f328e5810..c0359ae0d 100644 --- a/cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx +++ b/cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx @@ -33,7 +33,7 @@ import { import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Flag, useFeatureFlags, useToggleFeatureFlag } from 'src/hooks/useFeatureFlags'; -import { ContentPage } from 'bh-shared-ui'; +import { PageWithTitle } from 'bh-shared-ui'; export const EarlyAccessFeatureToggle: React.FC<{ flag: Flag; @@ -116,7 +116,15 @@ const EarlyAccessFeatures: React.FC = () => { return ( <> - + + Enable or disable features available under early access. These features may be unstable, broken, + or incomplete, but are available for testing. + + }> {!showWarningDialog && (isLoading ? ( @@ -162,7 +170,7 @@ const EarlyAccessFeatures: React.FC = () => { )) ))} - + navigate(-1)} diff --git a/cmd/ui/src/views/QA/QA.tsx b/cmd/ui/src/views/QA/QA.tsx index 6b534d5fb..92845b154 100644 --- a/cmd/ui/src/views/QA/QA.tsx +++ b/cmd/ui/src/views/QA/QA.tsx @@ -18,9 +18,9 @@ import { Alert, AlertTitle, Box, Grid, Link, Typography } from '@mui/material'; import { ActiveDirectoryPlatformInfo, AzurePlatformInfo, - ContentPage, DataSelector, DomainInfo, + PageWithTitle, TenantInfo, } from 'bh-shared-ui'; import { useEffect, useState } from 'react'; @@ -60,10 +60,15 @@ const QualityAssurance: React.FC = () => { if (!contextType || (!contextId && (contextType === 'active-directory' || contextType === 'azure'))) { return ( - + Understand the data collected within BloodHound broken down by environment and principal type. + + }> + { setContextId(id); }} /> - }> - -

- Understand the data collected within BloodHound broken down by environment and principal type. -

- + No Domain or Tenant Selected Select a domain or tenant to view data. If you are unable to select a domain, you may need to run data collection first. {dataCollectionMessage} - + ); } return ( - + Understand the data collected within BloodHound broken down by environment and principal type. + + }> + { setContextId(id); }} /> - }> + {dataError && ( @@ -128,7 +133,7 @@ const QualityAssurance: React.FC = () => { {getStatsComponent()} - + ); }; diff --git a/cmd/ui/src/views/SAMLConfiguration/SAMLConfiguration.tsx b/cmd/ui/src/views/SAMLConfiguration/SAMLConfiguration.tsx index fa64df42f..cb1927590 100644 --- a/cmd/ui/src/views/SAMLConfiguration/SAMLConfiguration.tsx +++ b/cmd/ui/src/views/SAMLConfiguration/SAMLConfiguration.tsx @@ -15,14 +15,14 @@ // SPDX-License-Identifier: Apache-2.0 import { useState } from 'react'; -import { Box, Button, Link, Typography } from '@mui/material'; +import { Box, Button, Typography } from '@mui/material'; import { useMutation, useQuery } from 'react-query'; -import { apiClient } from 'bh-shared-ui'; +import { PageWithTitle, apiClient } from 'bh-shared-ui'; import { CreateSAMLProviderDialog, CreateSAMLProviderFormInputs, - ContentPage, ConfirmationDialog, + DocumentationLinks, SAMLProviderTable, } from 'bh-shared-ui'; import useToggle from 'src/hooks/useToggle'; @@ -71,25 +71,19 @@ const SAMLConfiguration: React.FC = () => { } }; - const samlConfigDocLink = ( - - here - - ); - /* Implementation */ return ( <> - - -

- BloodHound supports SAML for single sign-on (SSO). Learn how to deploy SAML {samlConfigDocLink}. -

- + + BloodHound supports SAML for single sign-on (SSO). Learn how to deploy SAML{' '} + {DocumentationLinks.samlConfigDocLink}. + + }>
@@ -106,7 +100,7 @@ const SAMLConfiguration: React.FC = () => { }} /> - + { /* eslint-enable react/jsx-key */ ]); - const ManageUsersDocLink = ( - - adding users, changing their roles, or understanding role capabilities - - ); - return ( <> - - -

- Bloodhound offers multiple roles with degrees of permissions, providing greater security and + + BloodHound offers multiple roles with degrees of permissions, providing greater security and control of your team.
- Learn more about {ManageUsersDocLink}. -

- + Learn more about {DocumentationLinks.ManageUsersDocLink}. + + }> - - + + Upload data from SharpHound or AzureHound offline collectors. Check out our{' '} + {DocumentationLinks.fileIngestLink} documentation for more information. + + }> - - - + + + + diff --git a/packages/javascript/bh-shared-ui/src/components/PageWithTitle.tsx b/packages/javascript/bh-shared-ui/src/components/PageWithTitle.tsx index ed6389db7..3050463ca 100644 --- a/packages/javascript/bh-shared-ui/src/components/PageWithTitle.tsx +++ b/packages/javascript/bh-shared-ui/src/components/PageWithTitle.tsx @@ -14,25 +14,26 @@ // // SPDX-License-Identifier: Apache-2.0 -import React, { DataHTMLAttributes } from 'react'; -import { Box, Container, Typography } from '@mui/material'; +import { Box, Container, Typography, ContainerProps } from '@mui/material'; +import React from 'react'; -interface PageWithTitleProps extends DataHTMLAttributes { - title?: string; - children?: React.ReactNode; -} +type PageWithTitleProps = ContainerProps< + 'div', + { + title?: string; + pageDescription?: JSX.Element; + children?: React.ReactNode; + } +>; -const PageWithTitle: React.FC = ({ title, children, ...rest }) => { +const PageWithTitle: React.FC = ({ title, pageDescription, children, ...rest }) => { return ( - - {title && ( - - {title} - - )} - {children} + + {title && {title}} + {pageDescription} + {children} ); }; diff --git a/packages/javascript/bh-shared-ui/src/components/index.ts b/packages/javascript/bh-shared-ui/src/components/index.ts index 13bad00e2..6e6814bfa 100644 --- a/packages/javascript/bh-shared-ui/src/components/index.ts +++ b/packages/javascript/bh-shared-ui/src/components/index.ts @@ -32,9 +32,6 @@ export { default as CommunityIcon } from './CommunityIcon'; export * from './ConfirmationDialog'; export { default as ConfirmationDialog } from './ConfirmationDialog'; -export * from './ContentPage'; -export { default as ContentPage } from './ContentPage'; - export * from './CreateSAMLProviderDialog'; export { default as CreateSAMLProviderDialog } from './CreateSAMLProviderDialog'; @@ -146,3 +143,6 @@ export { default as FileIngest } from './FileIngest'; export * from './WebGLDisabledAlert'; export { default as WebGLDisabledAlert } from './WebGLDisabledAlert'; + +export * from './DocumentationLinks'; +export { default as DocumentationLinks } from './DocumentationLinks'; diff --git a/packages/javascript/bh-shared-ui/src/views/ApiExplorer/swagger/OperationsLayoutPlugin.tsx b/packages/javascript/bh-shared-ui/src/views/ApiExplorer/swagger/OperationsLayoutPlugin.tsx index 6e1bd80b0..e78a78f10 100644 --- a/packages/javascript/bh-shared-ui/src/views/ApiExplorer/swagger/OperationsLayoutPlugin.tsx +++ b/packages/javascript/bh-shared-ui/src/views/ApiExplorer/swagger/OperationsLayoutPlugin.tsx @@ -16,6 +16,7 @@ import { Box, Typography, Skeleton, useTheme } from '@mui/material'; import { PageWithTitle } from '../../../components'; +import DocumentationLinks from '../../../components/DocumentationLinks'; type Props = { getComponent: ( @@ -46,7 +47,15 @@ function CustomLayout(props: Props) { const isReady = () => specSelectors.loadingStatus() === 'success'; return ( - + + Review and understand the API endpoints available that power BloodHound. To learn how to use the + API, see {DocumentationLinks.apiUsageLink}. + + }> {!isReady() ? ( diff --git a/packages/javascript/bh-shared-ui/src/views/UserProfile/UserProfile.tsx b/packages/javascript/bh-shared-ui/src/views/UserProfile/UserProfile.tsx index 5205870d3..98a9f5586 100644 --- a/packages/javascript/bh-shared-ui/src/views/UserProfile/UserProfile.tsx +++ b/packages/javascript/bh-shared-ui/src/views/UserProfile/UserProfile.tsx @@ -70,7 +70,14 @@ const UserProfile = () => { if (getSelfQuery.isLoading) { return ( - + + Review and manage your user account. + + }> User Information @@ -81,7 +88,14 @@ const UserProfile = () => { if (getSelfQuery.isError) { return ( - + + Review and manage your user account. + + }> User Information @@ -98,7 +112,14 @@ const UserProfile = () => { return ( <> - + + Review and manage your user account. + + }> User Information