BED-4488 (round 2) - Code cleanup and additional UX improvements on h…

…elper 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
SpecterOps · Jun 27, 2024 · 159ba42 · 159ba42
1 parent f51249b
commit 159ba42
Show file tree

Hide file tree

Showing 16 changed files with 247 additions and 258 deletions.
diff --git 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
@@ -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 (
-        <ContentPage title='Clear BloodHound Data'>
-            <Box>
-                <Typography variant='body1'>
+        <PageWithTitle
+            title='Database Management'
+            data-testid='database-management'
+            pageDescription={
+                <Typography variant='body2' paragraph>
                     Manage your BloodHound data. Select from the options below which data should be deleted.
                 </Typography>
+            }>
+            <Box>
                 <Alert severity='warning' sx={{ mt: '1rem' }}>
                     <strong>Caution: </strong> This change is irreversible and will delete data from your environment.
                 </Alert>
@@ -324,7 +328,7 @@ const DatabaseManagement = () => {
                 handleClose={() => dispatch({ type: 'close_dialog' })}
                 handleDelete={() => handleMutation()}
             />
-        </ContentPage>
+        </PageWithTitle>
     );
 };
 

diff --git 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 = (
-        <Link
-            target='_blank'
-            data-testid='download-collectors-sharphound-ce-link'
-            href={
-                'https://support.bloodhoundenterprise.io/hc/en-us/articles/17481151861019-SharpHound-Community-Edition'
-            }>
-            SharpHound Community
-        </Link>
-    );
-
-    const azureHoundCELink = (
-        <Link
-            target='_blank'
-            data-testid='download-collectors-azurehound-ce-link'
-            href={
-                'https://support.bloodhoundenterprise.io/hc/en-us/articles/17481394564251-AzureHound-Community-Edition'
-            }>
-            AzureHound Community
-        </Link>
-    );
-
     /* Implementation */
     return (
-        <PageWithTitle title='Download Collectors' data-testid='download-collectors'>
-            <Typography variant='body1'>
-                <p>To get started, collect data using SharpHound or AzureHound.</p>
-                <p>
-                    BloodHound CE supports both {sharpHoundCELink} or {azureHoundCELink} collectors.
-                </p>
-            </Typography>
-
+        <PageWithTitle
+            title='Download Collectors'
+            data-testid='download-collectors'
+            pageDescription={
+                <Typography variant='body2' paragraph>
+                    To get started, collect data using SharpHound or AzureHound.
+                    <br />
+                    BloodHound CE supports both {DocumentationLinks.sharpHoundCELink} and{' '}
+                    {DocumentationLinks.azureHoundCELink} collectors.
+                </Typography>
+            }>
             <Box display='grid' gap={theme.spacing(4)}>
                 {(sharpHoundCollectorsQuery.isError ||
                     azureHoundCollectorsQuery.isError ||

diff --git 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 (
         <>
-            <ContentPage title='Early Access Features' data-testid='early-access-features'>
+            <PageWithTitle
+                title='Early Access Features'
+                data-testid='early-access-features'
+                pageDescription={
+                    <Typography variant='body2' paragraph>
+                        Enable or disable features available under early access. These features may be unstable, broken,
+                        or incomplete, but are available for testing.
+                    </Typography>
+                }>
                 {!showWarningDialog &&
                     (isLoading ? (
                         <Paper elevation={0}>
@@ -162,7 +170,7 @@ const EarlyAccessFeatures: React.FC = () => {
                                 </Box>
                             ))
                     ))}
-            </ContentPage>
+            </PageWithTitle>
             <EarlyAccessFeaturesWarningDialog
                 open={showWarningDialog}
                 onCancel={() => navigate(-1)}

diff --git 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 (
-            <ContentPage
+            <PageWithTitle
                 title='Data Quality'
                 data-testid='data-quality'
-                actionButton={
+                pageDescription={
+                    <Typography variant='body2' paragraph>
+                        Understand the data collected within BloodHound broken down by environment and principal type.
+                    </Typography>
+                }>
+                <Box display='flex' justifyContent='flex-end' alignItems='center' minHeight='24px' mb={2}>
                     <DataSelector
                         value={{
                             type: contextType,
@@ -75,26 +80,26 @@ const QualityAssurance: React.FC = () => {
                             setContextId(id);
                         }}
                     />
-                }>
-                <Typography variant='body1'>
-                    <p>
-                        Understand the data collected within BloodHound broken down by environment and principal type.
-                    </p>
-                </Typography>
+                </Box>
                 <Alert severity='info'>
                     <AlertTitle>No Domain or Tenant Selected</AlertTitle>
                     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}
                 </Alert>
-            </ContentPage>
+            </PageWithTitle>
         );
     }
 
     return (
-        <ContentPage
+        <PageWithTitle
             title='Data Quality'
             data-testid='data-quality'
-            actionButton={
+            pageDescription={
+                <Typography variant='body2' paragraph>
+                    Understand the data collected within BloodHound broken down by environment and principal type.
+                </Typography>
+            }>
+            <Box display='flex' justifyContent='flex-end' alignItems='center' minHeight='24px' mb={2}>
                 <DataSelector
                     value={{
                         type: contextType,
@@ -106,7 +111,7 @@ const QualityAssurance: React.FC = () => {
                         setContextId(id);
                     }}
                 />
-            }>
+            </Box>
             {dataError && (
                 <Box paddingBottom={2}>
                     <Alert severity='warning'>
@@ -128,7 +133,7 @@ const QualityAssurance: React.FC = () => {
                     {getStatsComponent()}
                 </Grid>
             </Grid>
-        </ContentPage>
+        </PageWithTitle>
     );
 };
 

diff --git 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 = (
-        <Link
-            target='_blank'
-            data-testid='saml-config-doc-link'
-            href={'https://support.bloodhoundenterprise.io/hc/en-us/articles/9228122981275-SAML-in-BloodHound'}>
-            here
-        </Link>
-    );
-
     /* Implementation */
 
     return (
         <>
-            <ContentPage title='SAML Configuration'>
-                <Typography variant='body1'>
-                    <p>
-                        BloodHound supports SAML for single sign-on (SSO). Learn how to deploy SAML {samlConfigDocLink}.
-                    </p>
-                </Typography>
+            <PageWithTitle
+                title='SAML Configuration'
+                data-testid='saml-configuration'
+                pageDescription={
+                    <Typography variant='body2' paragraph>
+                        BloodHound supports SAML for single sign-on (SSO). Learn how to deploy SAML{' '}
+                        {DocumentationLinks.samlConfigDocLink}.
+                    </Typography>
+                }>
                 <Box>
                     <Box display='flex' justifyContent='space-between' mb={2}>
                         <div />
@@ -106,7 +100,7 @@ const SAMLConfiguration: React.FC = () => {
                         }}
                     />
                 </Box>
-            </ContentPage>
+            </PageWithTitle>
             <CreateSAMLProviderDialog
                 open={SAMLProviderDialogOpen}
                 error={createSAMLProviderError}

diff --git a/cmd/ui/src/views/Users/Users.tsx b/cmd/ui/src/views/Users/Users.tsx
@@ -14,20 +14,21 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { Box, Button, Link, Paper, Typography } from '@mui/material';
+import { Box, Button, Paper, Typography } from '@mui/material';
 import { DateTime } from 'luxon';
 import { useMemo, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
 import {
     ConfirmationDialog,
     DataTable,
+    DocumentationLinks,
     Header,
-    ContentPage,
     PasswordDialog,
     LuxonFormat,
     UserTokenManagementDialog,
     apiClient,
     Disable2FADialog,
+    PageWithTitle,
 } from 'bh-shared-ui';
 import { PutUserAuthSecretRequest, UpdateUserRequest } from 'js-client-library';
 import find from 'lodash/find';
@@ -250,28 +251,19 @@ const Users = () => {
         /* eslint-enable react/jsx-key */
     ]);
 
-    const ManageUsersDocLink = (
-        <Link
-            target='_blank'
-            data-testid='manage-users-doc-link'
-            href={
-                'https://support.bloodhoundenterprise.io/hc/en-us/articles/16372343366939-Administering-users-and-roles'
-            }>
-            adding users, changing their roles, or understanding role capabilities
-        </Link>
-    );
-
     return (
         <>
-            <ContentPage title='Manage Users' data-testid='manage-users'>
-                <Typography variant='body1'>
-                    <p>
-                        Bloodhound offers multiple roles with degrees of permissions, providing greater security and
+            <PageWithTitle
+                title='Manage Users'
+                data-testid='manage-users'
+                pageDescription={
+                    <Typography variant='body2' paragraph>
+                        BloodHound offers multiple roles with degrees of permissions, providing greater security and
                         control of your team.
                         <br />
-                        Learn more about {ManageUsersDocLink}.
-                    </p>
-                </Typography>
+                        Learn more about {DocumentationLinks.ManageUsersDocLink}.
+                    </Typography>
+                }>
                 <Box display='flex' justifyContent='flex-end' alignItems='center' minHeight='24px' mb={2}>
                     <Button
                         color='primary'
@@ -293,7 +285,7 @@ const Users = () => {
                         showPaginationControls={false}
                     />
                 </Paper>
-            </ContentPage>
+            </PageWithTitle>
 
             <CreateUserDialog
                 open={createUserDialogOpen}

diff --git a/packages/javascript/bh-shared-ui/src/components/ContentPage/ContentPage.test.tsx b/packages/javascript/bh-shared-ui/src/components/ContentPage/ContentPage.test.tsx