From 5fc96af31d7ee13d0aa15e94b78e42a1a8277b63 Mon Sep 17 00:00:00 2001 From: Jason Gill Date: Wed, 18 Dec 2024 15:57:07 -0700 Subject: [PATCH] Migrate Breadcrumbs to Ant (#5610) --- CHANGELOG.md | 1 + clients/admin-ui/src/app/hooks.ts | 1 - .../src/features/common/FixedLayout.tsx | 3 +- .../src/features/common/PageHeader.tsx | 92 ++-- .../features/common/nav/v2/NextBreadcrumb.tsx | 79 ++++ .../src/features/config-wizard/AddSystem.tsx | 2 +- .../config-wizard/AuthenticateAwsForm.tsx | 30 +- .../config-wizard/AuthenticateOktaForm.tsx | 30 +- .../config-wizard/ConfigWizardWalkthrough.tsx | 2 +- .../features/config-wizard/ScanResults.tsx | 22 +- .../DiscoveryMonitorBreadcrumbs.tsx | 105 ++--- .../features/dataset/DatasetBreadcrumbs.tsx | 26 -- .../ConnectionsHeader.tsx | 22 +- .../add-connection/AddConnection.tsx | 36 +- .../edit-connection/EditConnection.tsx | 12 +- .../messaging-templates.slice.ts | 3 +- .../privacy-notices/PrivacyNoticesTable.tsx | 19 +- .../PrivacyRequestsContainer.tsx | 31 +- .../configuration/MessagingConfiguration.tsx | 22 +- .../configuration/StorageConfiguration.tsx | 21 +- .../features/user-management/EditUserForm.tsx | 24 +- .../features/user-management/NewUserForm.tsx | 15 +- .../user-management/UserManagementLayout.tsx | 22 - clients/admin-ui/src/home/HomeContainer.tsx | 4 +- .../admin-ui/src/pages/add-systems/index.tsx | 4 +- .../admin-ui/src/pages/add-systems/manual.tsx | 15 +- .../src/pages/add-systems/multiple.tsx | 26 +- clients/admin-ui/src/pages/ant-poc.tsx | 422 +++++++++--------- .../pages/consent/configure/add-vendors.tsx | 26 +- .../src/pages/consent/configure/index.tsx | 36 +- .../consent/privacy-experience/index.tsx | 7 +- .../pages/consent/privacy-notices/[id].tsx | 42 +- .../pages/consent/privacy-notices/index.tsx | 27 +- .../src/pages/consent/privacy-notices/new.tsx | 17 +- .../src/pages/consent/properties/index.tsx | 29 +- .../src/pages/consent/reporting/index.tsx | 24 +- .../src/pages/data-discovery/activity.tsx | 9 +- .../detection/[resourceUrn].tsx | 9 +- .../pages/data-discovery/detection/index.tsx | 9 +- .../discovery/[resourceUrn].tsx | 9 +- .../pages/data-discovery/discovery/index.tsx | 9 +- clients/admin-ui/src/pages/datamap/index.tsx | 6 +- .../[...subfieldNames]/index.tsx | 31 +- .../[datasetId]/[collectionName]/index.tsx | 20 +- .../src/pages/dataset/[datasetId]/index.tsx | 15 +- clients/admin-ui/src/pages/dataset/index.tsx | 29 +- .../admin-ui/src/pages/dataset/new/index.tsx | 10 +- .../admin-ui/src/pages/integrations/[id].tsx | 7 +- .../admin-ui/src/pages/integrations/index.tsx | 13 +- clients/admin-ui/src/pages/messaging/[id].tsx | 39 +- .../src/pages/messaging/add-template.tsx | 20 +- .../admin-ui/src/pages/messaging/index.tsx | 13 +- .../src/pages/privacy-requests/[id].tsx | 17 +- .../src/pages/privacy-requests/configure.tsx | 28 +- .../src/pages/privacy-requests/index.tsx | 2 +- .../admin-ui/src/pages/properties/[id].tsx | 24 +- .../src/pages/properties/add-property.tsx | 27 +- .../admin-ui/src/pages/properties/index.tsx | 14 +- .../src/pages/reporting/datamap/index.tsx | 9 +- clients/admin-ui/src/pages/settings/about.tsx | 127 +++--- .../admin-ui/src/pages/settings/consent.tsx | 6 +- .../src/pages/settings/custom-fields.tsx | 7 +- .../admin-ui/src/pages/settings/domains.tsx | 31 +- .../src/pages/settings/email-templates.tsx | 7 +- .../admin-ui/src/pages/settings/locations.tsx | 24 +- .../src/pages/settings/organization.tsx | 12 +- .../src/pages/settings/regulations.tsx | 22 +- .../pages/systems/configure/[id]/index.tsx | 8 +- .../systems/configure/[id]/test-datasets.tsx | 9 +- clients/admin-ui/src/pages/systems/index.tsx | 11 +- clients/admin-ui/src/pages/taxonomy/index.tsx | 9 +- .../src/pages/user-management/index.tsx | 13 +- .../src/pages/user-management/new.tsx | 13 +- .../pages/user-management/profile/[id].tsx | 38 +- clients/fidesui/src/index.ts | 6 + 75 files changed, 1053 insertions(+), 958 deletions(-) create mode 100644 clients/admin-ui/src/features/common/nav/v2/NextBreadcrumb.tsx delete mode 100644 clients/admin-ui/src/features/dataset/DatasetBreadcrumbs.tsx delete mode 100644 clients/admin-ui/src/features/user-management/UserManagementLayout.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index c8d8ddaba8..4bbf3ba45b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ The types of changes are: ### Changed - Adjusted Ant's Select component colors and icon [#5594](https://github.com/ethyca/fides/pull/5594) - Replaced taxonomies page with new UI based on an interactive tree visualization [#5602](https://github.com/ethyca/fides/pull/5602) +- Migrated breadcrumbs to Ant Design [#5610](https://github.com/ethyca/fides/pull/5610) ### Fixed - Fixing quickstart.py script [#5585](https://github.com/ethyca/fides/pull/5585) diff --git a/clients/admin-ui/src/app/hooks.ts b/clients/admin-ui/src/app/hooks.ts index 9951e807dd..c7d1d9819e 100644 --- a/clients/admin-ui/src/app/hooks.ts +++ b/clients/admin-ui/src/app/hooks.ts @@ -3,5 +3,4 @@ import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"; import type { AppDispatch, RootState } from "./store"; export const useAppDispatch: () => AppDispatch = useDispatch; -// eslint-disable-next-line import/prefer-default-export export const useAppSelector: TypedUseSelectorHook = useSelector; diff --git a/clients/admin-ui/src/features/common/FixedLayout.tsx b/clients/admin-ui/src/features/common/FixedLayout.tsx index 4666c1cb1c..bb01159ba3 100644 --- a/clients/admin-ui/src/features/common/FixedLayout.tsx +++ b/clients/admin-ui/src/features/common/FixedLayout.tsx @@ -32,7 +32,8 @@ const FixedLayout = ({ { + heading?: ReactNode; + breadcrumbItems?: NextBreadcrumbProps["items"]; isSticky?: boolean; - rightContent?: ReactElement; + rightContent?: ReactNode; + children?: ReactNode; } /** * A header component for pages. * - * @param breadcrumbs - The breadcrumbs to display in the page header. + * @param heading - The main heading to display in the page header. Can be a string or a React element. String will be rendered as an H1. + * @param breadcrumbItems - Extends Ant Design Breadcrumb component `items` property. If an item has a `href` property, it will be wrapped in a Next.js link. * Can be an array of breadcrumb items (more information on Breadcrumbs component), a React element * if you want to render something else, or false to not show any breadcrumbs. * @param isSticky - Whether the page header should stick to the top of the page while scrolling. Defaults to true. - * @param children - Additional content to display in the header at the bottom. + * @param children - Additional content to display in the header below the heading and breadcrumb. * @param rightContent - Additional content to display in the header on the right side. Usually for displaying buttons. */ const PageHeader = ({ - breadcrumbs, + heading, + breadcrumbItems, isSticky = true, children, rightContent, - ...otherProps + style, + ...props }: PageHeaderProps): JSX.Element => ( - - - - {/* If breadcrumbs is an array, render the Breadcrumbs component. */} - {isArray(breadcrumbs) && ( - - - - )} - {/* If breadcrumbs is a React element, render it. */} - {isValidElement(breadcrumbs) && breadcrumbs} - - {rightContent && {rightContent}} + + {typeof heading === "string" ? ( + + {heading} + + ) : ( + heading + )} + {rightContent && ( +
{rightContent}
+ )} + {!!breadcrumbItems && ( + + )} + {children} - + ); export default PageHeader; diff --git a/clients/admin-ui/src/features/common/nav/v2/NextBreadcrumb.tsx b/clients/admin-ui/src/features/common/nav/v2/NextBreadcrumb.tsx new file mode 100644 index 0000000000..e1bb8974f6 --- /dev/null +++ b/clients/admin-ui/src/features/common/nav/v2/NextBreadcrumb.tsx @@ -0,0 +1,79 @@ +/* eslint-disable tailwindcss/no-custom-classname */ +import { + AntBreadcrumb as Breadcrumb, + AntBreadcrumbItemType as BreadcrumbItemType, + AntBreadcrumbProps as BreadcrumbProps, + AntTypography as Typography, +} from "fidesui"; +import { Url } from "next/dist/shared/lib/router/router"; +import NextLink from "next/link"; +import { ReactNode, useMemo } from "react"; + +const { Text } = Typography; + +// Too difficult to make `path` work with Next.js links so we'll just remove it from the type +interface NextBreadcrumbItemType + extends Omit { + /** + * becomes NextJS link href + */ + href?: Url; + icon?: ReactNode; +} + +export interface NextBreadcrumbProps extends Omit { + items?: NextBreadcrumbItemType[]; +} + +/** + * Extends the Ant Design Breadcrumb component to allow for Next.js links. If an item has a `href` property, it will be wrapped in a Next.js link. + * + * Note: Since Next.js link is used to wrap the entire item, we cannot do these other customizations as an HOC in FidesUI due to the order of operations. HOC would be applied AFTER the Next.js link is applied, but we want the Next.js link to wrap the entire item after all other customizations. And, of course, we can't use Next.js links in FidesUI. + */ +export const NextBreadcrumb = ({ items, ...props }: NextBreadcrumbProps) => { + const formattedItems = useMemo( + () => + items?.map((item, i) => { + const isCurrentPage = i === items.length - 1; + const modifiedItem = { ...item }; + if (typeof modifiedItem.title === "string") { + // for everything except the current page, truncate the title if it's too long + modifiedItem.title = ( + + {modifiedItem.title} + + ); + } + if (modifiedItem.icon) { + modifiedItem.title = ( + <> + + {modifiedItem.icon} + + {modifiedItem.title} + + ); + } + if (modifiedItem.href && modifiedItem.title) { + // repeat the ant breadcrumb link class to match the style and margin of the ant breadcrumb item + modifiedItem.title = ( + + {modifiedItem.title} + + ); + delete modifiedItem.href; + } + return modifiedItem; + }), + [items], + ); + return ( + + ); +}; diff --git a/clients/admin-ui/src/features/config-wizard/AddSystem.tsx b/clients/admin-ui/src/features/config-wizard/AddSystem.tsx index cc3d654f94..5441dce585 100644 --- a/clients/admin-ui/src/features/config-wizard/AddSystem.tsx +++ b/clients/admin-ui/src/features/config-wizard/AddSystem.tsx @@ -41,7 +41,7 @@ const AddSystem = () => { return ( - + Fides helps you map your systems to manage your privacy diff --git a/clients/admin-ui/src/features/config-wizard/AuthenticateAwsForm.tsx b/clients/admin-ui/src/features/config-wizard/AuthenticateAwsForm.tsx index 8617b7e4cd..4f4ca44d80 100644 --- a/clients/admin-ui/src/features/config-wizard/AuthenticateAwsForm.tsx +++ b/clients/admin-ui/src/features/config-wizard/AuthenticateAwsForm.tsx @@ -1,4 +1,4 @@ -import { AntButton as Button, Heading, HStack, Stack } from "fidesui"; +import { AntButton as Button, Box, HStack, Stack, Text } from "fidesui"; import { Form, Formik } from "formik"; import { useState } from "react"; import * as Yup from "yup"; @@ -20,6 +20,7 @@ import { import { RTKErrorResult } from "~/types/errors"; import { ControlledSelect } from "../common/form/ControlledSelect"; +import { NextBreadcrumb } from "../common/nav/v2/NextBreadcrumb"; import { changeStep, selectOrganizationFidesKey, @@ -129,12 +130,27 @@ const AuthenticateAwsForm = () => { ) : null} {!isSubmitting && !scannerError ? ( <> - Authenticate AWS Scanner -

- To use the scanner to inventory systems in AWS, you must first - authenticate to your AWS cloud by providing the following - information: -

+ + { + e.preventDefault(); + handleCancel(); + }, + }, + { title: "Authenticate AWS Scanner" }, + ]} + /> + + To use the scanner to inventory systems in AWS, you must + first authenticate to your AWS cloud by providing the + following information: + + { {scannerError ? : null} {!isSubmitting && !scannerError ? ( <> - Authenticate Okta Scanner -

- To use the scanner to inventory systems in Okta, you must - first authenticate to your Okta account by providing the - following information: -

+ + { + e.preventDefault(); + handleCancel(); + }, + }, + { title: "Authenticate Okta Scanner" }, + ]} + /> + + To use the scanner to inventory systems in Okta, you must + first authenticate to your Okta account by providing the + following information: + + { return ( - + {step === 1 ? : null} {step === 2 ? : null} {step === 3 ? : null} diff --git a/clients/admin-ui/src/features/config-wizard/ScanResults.tsx b/clients/admin-ui/src/features/config-wizard/ScanResults.tsx index dc814140ff..687401188e 100644 --- a/clients/admin-ui/src/features/config-wizard/ScanResults.tsx +++ b/clients/admin-ui/src/features/config-wizard/ScanResults.tsx @@ -1,7 +1,6 @@ import { AntButton as Button, Box, - Heading, HStack, Stack, Text, @@ -22,6 +21,7 @@ import { SystemsCheckboxTable } from "~/features/common/SystemsCheckboxTable"; import { useUpsertSystemsMutation } from "~/features/system"; import { System } from "~/types/api"; +import { NextBreadcrumb } from "../common/nav/v2/NextBreadcrumb"; import { changeStep, reset, @@ -95,10 +95,22 @@ const ScanResults = () => { return ( - - - Scan results - + + { + e.preventDefault(); + handleCancel(); + }, + }, + { title: "Authenticate" }, + { title: "Scan results" }, + ]} + /> {systems.length === 0 ? ( <> diff --git a/clients/admin-ui/src/features/data-discovery-and-detection/DiscoveryMonitorBreadcrumbs.tsx b/clients/admin-ui/src/features/data-discovery-and-detection/DiscoveryMonitorBreadcrumbs.tsx index 9bdc7431fc..74bb0cf7aa 100644 --- a/clients/admin-ui/src/features/data-discovery-and-detection/DiscoveryMonitorBreadcrumbs.tsx +++ b/clients/admin-ui/src/features/data-discovery-and-detection/DiscoveryMonitorBreadcrumbs.tsx @@ -1,10 +1,9 @@ -import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "fidesui"; -import { useRouter } from "next/router"; +import { Icons } from "fidesui"; -import { DatabaseIcon } from "~/features/common/Icon/database/DatabaseIcon"; -import { DatasetIcon } from "~/features/common/Icon/database/DatasetIcon"; -import { FieldIcon } from "~/features/common/Icon/database/FieldIcon"; -import { TableIcon } from "~/features/common/Icon/database/TableIcon"; +import { + NextBreadcrumb, + NextBreadcrumbProps, +} from "../common/nav/v2/NextBreadcrumb"; interface DiscoveryMonitorBreadcrumbsProps { resourceUrn?: string; @@ -12,11 +11,11 @@ interface DiscoveryMonitorBreadcrumbsProps { onPathClick?: (urn: string) => void; } -const MONITOR_BREADCRUMB_ICONS = [ - , - , - , - , +export const DATA_BREADCRUMB_ICONS = [ + , + , + , + , ]; const DiscoveryMonitorBreadcrumbs = ({ @@ -24,68 +23,40 @@ const DiscoveryMonitorBreadcrumbs = ({ parentLink, onPathClick = () => {}, }: DiscoveryMonitorBreadcrumbsProps) => { - const router = useRouter(); + const breadcrumbItems: NextBreadcrumbProps["items"] = []; if (!resourceUrn) { - return ( - - - {MONITOR_BREADCRUMB_ICONS[0]} - All activity - - - ); + breadcrumbItems.push({ + title: "All activity", + icon: DATA_BREADCRUMB_ICONS[0], + }); } - const urnParts = resourceUrn.split("."); + if (resourceUrn) { + const urnParts = resourceUrn.split("."); + urnParts.forEach((urnPart, index) => { + // don't render anything at the monitor level because there's no view for it + if (index === 0) { + return; + } + const isDatabase = index === 1; + + breadcrumbItems.push({ + title: urnPart, + icon: DATA_BREADCRUMB_ICONS[index - 1], + href: isDatabase ? parentLink : "", + onClick: !isDatabase + ? (e) => { + e.preventDefault(); + onPathClick(urnParts.slice(0, index + 1).join(".")); + } + : undefined, + }); + }); + } return ( - - {urnParts.map((urnPart, index) => { - // don't render anything at the monitor level because there's no view for it - if (index === 0) { - return null; - } - - // at the database level, link should go to "all activity" view - const isDatabase = index === 1; - const isLastPart = index === urnParts.length - 1; - - return ( - - {MONITOR_BREADCRUMB_ICONS[index - 1]} - - isDatabase - ? router.push(parentLink) - : onPathClick(urnParts.slice(0, index + 1).join(".")) - } - > - {urnPart} - - - ); - })} - + ); }; diff --git a/clients/admin-ui/src/features/dataset/DatasetBreadcrumbs.tsx b/clients/admin-ui/src/features/dataset/DatasetBreadcrumbs.tsx deleted file mode 100644 index 22e19fa016..0000000000 --- a/clients/admin-ui/src/features/dataset/DatasetBreadcrumbs.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/** - * Renders the DatasetBreadcrumbs component with a few default styles - * so every breadcrumb in the Dataset pages looks the same. - * - * @param breadcrumbProps - The props for the Breadcrumbs component. - * @returns The rendered DatasetBreadcrumbs component. - */ - -import React from "react"; - -import Breadcrumbs, { BreadcrumbsProps } from "~/features/common/Breadcrumbs"; - -const DatasetBreadcrumbs = (breadcrumbProps: BreadcrumbsProps) => ( - -); -export default DatasetBreadcrumbs; diff --git a/clients/admin-ui/src/features/datastore-connections/ConnectionsHeader.tsx b/clients/admin-ui/src/features/datastore-connections/ConnectionsHeader.tsx index 627db75ae3..d2920ae23c 100644 --- a/clients/admin-ui/src/features/datastore-connections/ConnectionsHeader.tsx +++ b/clients/admin-ui/src/features/datastore-connections/ConnectionsHeader.tsx @@ -1,28 +1,22 @@ -import { Box, Flex, Heading, Link, Spacer, Text } from "fidesui"; +import { Box, Link, Text } from "fidesui"; import React from "react"; import { useFeatures } from "~/features/common/features"; import { ADD_SYSTEMS_ROUTE } from "../common/nav/v2/routes"; +import PageHeader from "../common/PageHeader"; import AddConnectionButton from "./add-connection/AddConnectionButton"; const ConnectionsHeader = () => { const features = useFeatures(); return ( - + } > - - - Unlinked Connections - - - {features.flags.standaloneConnections && } - Connections are now created in the{" "} @@ -33,7 +27,7 @@ const ConnectionsHeader = () => { system. - + ); }; diff --git a/clients/admin-ui/src/features/datastore-connections/add-connection/AddConnection.tsx b/clients/admin-ui/src/features/datastore-connections/add-connection/AddConnection.tsx index 2e012acd33..066efcd6dc 100644 --- a/clients/admin-ui/src/features/datastore-connections/add-connection/AddConnection.tsx +++ b/clients/admin-ui/src/features/datastore-connections/add-connection/AddConnection.tsx @@ -4,14 +4,14 @@ import { setStep, } from "connection-type/connection-type.slice"; import ConnectionTypeLogo from "datastore-connections/ConnectionTypeLogo"; -import { Box, Heading, Text } from "fidesui"; +import { AntSpace as Space, AntTypography as Typography } from "fidesui"; import { useRouter } from "next/router"; import React, { useCallback, useEffect } from "react"; import { useDispatch } from "react-redux"; import { useAppSelector } from "~/app/hooks"; -import BackButton from "~/features/common/nav/v2/BackButton"; import { DATASTORE_CONNECTION_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import ChooseConnection from "./ChooseConnection"; import ConfigureConnector from "./ConfigureConnector"; @@ -19,6 +19,8 @@ import { STEPS } from "./constants"; import { replaceURL } from "./helpers"; import { AddConnectionStep } from "./types"; +const { Title } = Typography; + const AddConnection = () => { const dispatch = useDispatch(); const router = useRouter(); @@ -72,24 +74,24 @@ const AddConnection = () => { return ( <> - - - - {connectionOption && ( - <> + + {connectionOption ? ( + <Space> <ConnectionTypeLogo data={connectionOption} /> - <Text ml="8px">{getLabel(step)}</Text> - </> + {getLabel(step)} + </Space> + ) : ( + getLabel(step) )} - {!connectionOption && <Text>{getLabel(step)}</Text>} - </Box> - </Heading> + + {(() => { switch (step.stepId) { case 1: diff --git a/clients/admin-ui/src/features/datastore-connections/edit-connection/EditConnection.tsx b/clients/admin-ui/src/features/datastore-connections/edit-connection/EditConnection.tsx index e73179bd9e..e2e1577280 100644 --- a/clients/admin-ui/src/features/datastore-connections/edit-connection/EditConnection.tsx +++ b/clients/admin-ui/src/features/datastore-connections/edit-connection/EditConnection.tsx @@ -3,8 +3,8 @@ import React, { useEffect, useMemo, useState } from "react"; import { useAppDispatch, useAppSelector } from "~/app/hooks"; import DataTabs, { TabData } from "~/features/common/DataTabs"; -import BackButton from "~/features/common/nav/v2/BackButton"; import { DATASTORE_CONNECTION_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import { reset, selectConnectionTypeState, @@ -91,9 +91,15 @@ const EditConnection = () => { return connection && connectionOption ? ( <> - + { {userCanUpdate && ( - + + )} diff --git a/clients/admin-ui/src/features/privacy-requests/PrivacyRequestsContainer.tsx b/clients/admin-ui/src/features/privacy-requests/PrivacyRequestsContainer.tsx index f88076520e..b16a7f58ca 100644 --- a/clients/admin-ui/src/features/privacy-requests/PrivacyRequestsContainer.tsx +++ b/clients/admin-ui/src/features/privacy-requests/PrivacyRequestsContainer.tsx @@ -1,4 +1,4 @@ -import { Flex, Heading, Spacer } from "fidesui"; +import { AntSpace as Space } from "fidesui"; import dynamic from "next/dynamic"; import * as React from "react"; import { useEffect } from "react"; @@ -9,6 +9,7 @@ import { RequestTable } from "~/features/privacy-requests/RequestTable"; import SubmitPrivacyRequest from "~/features/privacy-requests/SubmitPrivacyRequest"; import { ScopeRegistryEnum } from "~/types/api"; +import PageHeader from "../common/PageHeader"; import { useDSRErrorAlert } from "./hooks/useDSRErrorAlert"; const ActionButtons = dynamic( @@ -27,18 +28,22 @@ const PrivacyRequestsContainer = () => { return ( <> - - - Privacy Requests - - - {hasPlus && ( - - - - )} - - + + {hasPlus && ( + + + + )} + + + } + data-testid="privacy-requests" + /> + ); diff --git a/clients/admin-ui/src/features/privacy-requests/configuration/MessagingConfiguration.tsx b/clients/admin-ui/src/features/privacy-requests/configuration/MessagingConfiguration.tsx index 5970ed8dbe..70bba4597b 100644 --- a/clients/admin-ui/src/features/privacy-requests/configuration/MessagingConfiguration.tsx +++ b/clients/admin-ui/src/features/privacy-requests/configuration/MessagingConfiguration.tsx @@ -4,8 +4,11 @@ import { useEffect, useState } from "react"; import { isErrorResult } from "~/features/common/helpers"; import { useAlert, useAPIHelper } from "~/features/common/hooks"; import Layout from "~/features/common/Layout"; -import BackButton from "~/features/common/nav/v2/BackButton"; -import { PRIVACY_REQUESTS_CONFIGURATION_ROUTE } from "~/features/common/nav/v2/routes"; +import { + PRIVACY_REQUESTS_CONFIGURATION_ROUTE, + PRIVACY_REQUESTS_ROUTE, +} from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import { messagingProviders } from "~/features/privacy-requests/constants"; import { useCreateMessagingConfigurationMutation, @@ -66,9 +69,18 @@ const MessagingConfiguration = () => { return ( - - - + + Configure your messaging provider diff --git a/clients/admin-ui/src/features/privacy-requests/configuration/StorageConfiguration.tsx b/clients/admin-ui/src/features/privacy-requests/configuration/StorageConfiguration.tsx index 00514d2c55..1e81bf8eea 100644 --- a/clients/admin-ui/src/features/privacy-requests/configuration/StorageConfiguration.tsx +++ b/clients/admin-ui/src/features/privacy-requests/configuration/StorageConfiguration.tsx @@ -4,8 +4,11 @@ import { useEffect, useState } from "react"; import { isErrorResult } from "~/features/common/helpers"; import { useAlert, useAPIHelper } from "~/features/common/hooks"; import Layout from "~/features/common/Layout"; -import BackButton from "~/features/common/nav/v2/BackButton"; -import { PRIVACY_REQUESTS_CONFIGURATION_ROUTE } from "~/features/common/nav/v2/routes"; +import { + PRIVACY_REQUESTS_CONFIGURATION_ROUTE, + PRIVACY_REQUESTS_ROUTE, +} from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import { storageTypes } from "~/features/privacy-requests/constants"; import { useCreateStorageMutation, @@ -63,8 +66,18 @@ const StorageConfiguration = () => { return ( - - + + Configure storage diff --git a/clients/admin-ui/src/features/user-management/EditUserForm.tsx b/clients/admin-ui/src/features/user-management/EditUserForm.tsx index e31b7edf3c..811e9beadf 100644 --- a/clients/admin-ui/src/features/user-management/EditUserForm.tsx +++ b/clients/admin-ui/src/features/user-management/EditUserForm.tsx @@ -6,6 +6,8 @@ import { selectUser } from "~/features/auth"; import { useHasPermission } from "~/features/common/Restrict"; import { ScopeRegistryEnum } from "~/types/api"; +import { USER_MANAGEMENT_ROUTE } from "../common/nav/v2/routes"; +import PageHeader from "../common/PageHeader"; import { User } from "./types"; import { useEditUserMutation } from "./user-management.slice"; import { FormValues } from "./UserForm"; @@ -50,13 +52,21 @@ const EditUserForm = ({ user }: Props) => { return (
-
- -
+ +
); }; diff --git a/clients/admin-ui/src/features/user-management/NewUserForm.tsx b/clients/admin-ui/src/features/user-management/NewUserForm.tsx index 10a1c67d81..b6b1084aeb 100644 --- a/clients/admin-ui/src/features/user-management/NewUserForm.tsx +++ b/clients/admin-ui/src/features/user-management/NewUserForm.tsx @@ -7,6 +7,7 @@ import { useAppDispatch } from "~/app/hooks"; import { isErrorResult } from "~/features/common/helpers"; import { USER_MANAGEMENT_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "../common/PageHeader"; import { setActiveUserId, useCreateUserMutation, @@ -38,9 +39,17 @@ const NewUserForm = () => { return (
-
- -
+ +
); }; diff --git a/clients/admin-ui/src/features/user-management/UserManagementLayout.tsx b/clients/admin-ui/src/features/user-management/UserManagementLayout.tsx deleted file mode 100644 index 19f527f5a5..0000000000 --- a/clients/admin-ui/src/features/user-management/UserManagementLayout.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Heading } from "fidesui"; -import React from "react"; - -import Layout from "~/features/common/Layout"; -import BackButton from "~/features/common/nav/v2/BackButton"; -import { USER_MANAGEMENT_ROUTE } from "~/features/common/nav/v2/routes"; - -interface Props { - children: React.ReactNode; -} - -const Profile = ({ children }: Props) => ( - - - - User Management - - {children} - -); - -export default Profile; diff --git a/clients/admin-ui/src/home/HomeContainer.tsx b/clients/admin-ui/src/home/HomeContainer.tsx index 5cbc123afd..5a18963460 100644 --- a/clients/admin-ui/src/home/HomeContainer.tsx +++ b/clients/admin-ui/src/home/HomeContainer.tsx @@ -7,8 +7,8 @@ import HomeBanner from "./HomeBanner"; import HomeContent from "./HomeContent"; const HomeContainer = () => ( - - + + diff --git a/clients/admin-ui/src/pages/add-systems/index.tsx b/clients/admin-ui/src/pages/add-systems/index.tsx index 4a07049c40..0ae344e74d 100644 --- a/clients/admin-ui/src/pages/add-systems/index.tsx +++ b/clients/admin-ui/src/pages/add-systems/index.tsx @@ -3,6 +3,7 @@ import { useEffect } from "react"; import { useAppDispatch } from "~/app/hooks"; import Layout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; import { changeStep } from "~/features/config-wizard/config-wizard.slice"; import ConfigWizardWalkthrough from "~/features/config-wizard/ConfigWizardWalkthrough"; @@ -15,7 +16,8 @@ const ConfigWizard: NextPage = () => { }, [dispatch]); return ( - + + ); diff --git a/clients/admin-ui/src/pages/add-systems/manual.tsx b/clients/admin-ui/src/pages/add-systems/manual.tsx index ee1cf44245..3ee79ef57f 100644 --- a/clients/admin-ui/src/pages/add-systems/manual.tsx +++ b/clients/admin-ui/src/pages/add-systems/manual.tsx @@ -6,8 +6,8 @@ import React, { useMemo } from "react"; import { useAppSelector } from "~/app/hooks"; import DataTabs from "~/features/common/DataTabs"; import Layout from "~/features/common/Layout"; -import BackButton from "~/features/common/nav/v2/BackButton"; import { ADD_SYSTEMS_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import ConnectionTypeLogo from "~/features/datastore-connections/ConnectionTypeLogo"; import { selectLockedForGVL } from "~/features/system/dictionary-form/dict-suggestion.slice"; import GVLNotice from "~/features/system/GVLNotice"; @@ -20,7 +20,7 @@ const DESCRIBE_SYSTEM_COPY = const Header = ({ connector }: { connector?: ConnectionSystemTypeMap }) => ( - + Describe your {connector ? connector.human_readable : "new"} system @@ -49,7 +49,16 @@ const NewManualSystem: NextPage = () => { return ( - +
{lockedForGVL ? : null} diff --git a/clients/admin-ui/src/pages/add-systems/multiple.tsx b/clients/admin-ui/src/pages/add-systems/multiple.tsx index 5105fd1fa7..813b75c67b 100644 --- a/clients/admin-ui/src/pages/add-systems/multiple.tsx +++ b/clients/admin-ui/src/pages/add-systems/multiple.tsx @@ -1,30 +1,30 @@ -import { Box, Heading, Link, Text } from "fidesui"; +import { Box, Link, Text } from "fidesui"; import type { NextPage } from "next"; import Layout from "~/features/common/Layout"; -import BackButton from "~/features/common/nav/v2/BackButton"; import { ADD_SYSTEMS_MANUAL_ROUTE, ADD_SYSTEMS_ROUTE, DATAMAP_ROUTE, } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import { AddMultipleSystems } from "~/features/system/add-multiple-systems/AddMultipleSystems"; const DESCRIBE_SYSTEM_COPY = "Select your vendors below and they will be added as systems to your data map. Fides Compass will automatically populate the system information so that you can quickly configure privacy requests and consent. To add custom systems or unlisted vendors, please"; -const Header = () => ( - - - Choose vendors - - -); - const AddMultipleSystemsPage: NextPage = () => ( - - -
+ + {DESCRIBE_SYSTEM_COPY} diff --git a/clients/admin-ui/src/pages/ant-poc.tsx b/clients/admin-ui/src/pages/ant-poc.tsx index 77ee8035f3..e321786838 100644 --- a/clients/admin-ui/src/pages/ant-poc.tsx +++ b/clients/admin-ui/src/pages/ant-poc.tsx @@ -13,14 +13,12 @@ import { AntSwitch as Switch, AntTag as Tag, AntTooltip as Tooltip, - AntTypography as Typography, } from "fidesui"; import type { NextPage } from "next"; -import FidesLayout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; -const { Header, Content } = Layout; -const { Title } = Typography; +const { Content } = Layout; const options: { label: string; value: string }[] = []; for (let i = 10; i < 36; i += 1) { @@ -32,219 +30,213 @@ for (let i = 10; i < 36; i += 1) { const AntPOC: NextPage = () => { return ( - - -
- - Ant Design Proof of Concept - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - -
- - - - - - Tooltip will show on mouse enter. - - - - - - - - - - - - - - - - - - magenta - red - volcano - orange - gold - lime - green - cyan - blue - geekblue - purple - - - - - - - + + + + + + + + + + + + +
+ + + + + + Tooltip will show on mouse enter. + + + + + + + + + + + + + + + + + + magenta + red + volcano + orange + gold + lime + green + cyan + blue + geekblue + purple + + + + + + ); }; diff --git a/clients/admin-ui/src/pages/consent/configure/add-vendors.tsx b/clients/admin-ui/src/pages/consent/configure/add-vendors.tsx index 005e8995e3..7dd4cccd5b 100644 --- a/clients/admin-ui/src/pages/consent/configure/add-vendors.tsx +++ b/clients/admin-ui/src/pages/consent/configure/add-vendors.tsx @@ -1,30 +1,28 @@ -import { Box, Heading, Text } from "fidesui"; +import { AntTypography as Typography } from "fidesui"; import type { NextPage } from "next"; import Layout from "~/features/common/Layout"; -import BackButton from "~/features/common/nav/v2/BackButton"; import { CONFIGURE_CONSENT_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import { AddMultipleSystems } from "~/features/system/add-multiple-systems/AddMultipleSystems"; -const Header = () => ( - - - Choose vendors - - -); +const { Text } = Typography; const AddMultipleVendorsPage: NextPage = () => ( - -
- - + + Select your vendors below and they will be added as systems to your data map. Fides Compass will automatically populate the system information so that you can quickly configure privacy requests and consent. - + ); diff --git a/clients/admin-ui/src/pages/consent/configure/index.tsx b/clients/admin-ui/src/pages/consent/configure/index.tsx index 4fec5c930a..2731aba21b 100644 --- a/clients/admin-ui/src/pages/consent/configure/index.tsx +++ b/clients/admin-ui/src/pages/consent/configure/index.tsx @@ -1,35 +1,21 @@ -import { Box, Flex, Heading, Text } from "fidesui"; +import { AntTypography as Typography } from "fidesui"; import React from "react"; import Layout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; import { ConsentManagementTable } from "~/features/configure-consent/ConsentManagementTable"; -type Props = { - title: string; - description: string; -}; - -const ConsentMetadata = ({ title, description }: Props) => ( - <> - - - {title} - - - - - {description} - - - -); +const { Text } = Typography; const ConfigureConsentPage = () => ( - - + + + + Use the table below to manage your vendors. Modify the legal basis for a + vendor if permitted and view and group your views by applying different + filters + + ); diff --git a/clients/admin-ui/src/pages/consent/privacy-experience/index.tsx b/clients/admin-ui/src/pages/consent/privacy-experience/index.tsx index 43c51c84f8..f6664ed511 100644 --- a/clients/admin-ui/src/pages/consent/privacy-experience/index.tsx +++ b/clients/admin-ui/src/pages/consent/privacy-experience/index.tsx @@ -5,12 +5,7 @@ import FixedLayout from "~/features/common/FixedLayout"; import { PrivacyExperiencesTable } from "~/features/privacy-experience/PrivacyExperiencesTable"; const PrivacyExperiencePage = () => ( - + Privacy experience diff --git a/clients/admin-ui/src/pages/consent/privacy-notices/[id].tsx b/clients/admin-ui/src/pages/consent/privacy-notices/[id].tsx index 0e583f1301..5dc27a3f34 100644 --- a/clients/admin-ui/src/pages/consent/privacy-notices/[id].tsx +++ b/clients/admin-ui/src/pages/consent/privacy-notices/[id].tsx @@ -1,9 +1,9 @@ -import { Box, Center, Heading, Spinner, Text } from "fidesui"; +import { Box, Center, Spinner, Text } from "fidesui"; import { useRouter } from "next/router"; import Layout from "~/features/common/Layout"; -import BackButton from "~/features/common/nav/v2/BackButton"; import { PRIVACY_NOTICES_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import { useGetAvailableNoticeTranslationsQuery, useGetPrivacyNoticeByIdQuery, @@ -44,23 +44,29 @@ const PrivacyNoticeDetailPage = () => { return ( - - - {data.name} - - - - - Configure your privacy notice including consent mechanism, associated - data uses and the locations in which this should be displayed to - users. - - - + + + + Configure your privacy notice including consent mechanism, + associated data uses and the locations in which this should be + displayed to users. + + + + ); diff --git a/clients/admin-ui/src/pages/consent/privacy-notices/index.tsx b/clients/admin-ui/src/pages/consent/privacy-notices/index.tsx index 73d56e3cd0..ff8d230fe7 100644 --- a/clients/admin-ui/src/pages/consent/privacy-notices/index.tsx +++ b/clients/admin-ui/src/pages/consent/privacy-notices/index.tsx @@ -1,26 +1,19 @@ -import { Box, Heading, Text } from "fidesui"; +import { Box, Text } from "fidesui"; import React from "react"; import FixedLayout from "~/features/common/FixedLayout"; +import PageHeader from "~/features/common/PageHeader"; import { PrivacyNoticesTable } from "~/features/privacy-notices/PrivacyNoticesTable"; const PrivacyNoticesPage = () => ( - - - - Manage privacy notices - - - - Manage the privacy notices and mechanisms that are displayed to your users - based on their location, what information you collect about them, and how - you use that data. - + + + + Manage the privacy notices and mechanisms that are displayed to your + users based on their location, what information you collect about them, + and how you use that data. + + diff --git a/clients/admin-ui/src/pages/consent/privacy-notices/new.tsx b/clients/admin-ui/src/pages/consent/privacy-notices/new.tsx index 4fae5ee671..bfda632316 100644 --- a/clients/admin-ui/src/pages/consent/privacy-notices/new.tsx +++ b/clients/admin-ui/src/pages/consent/privacy-notices/new.tsx @@ -1,18 +1,19 @@ -import { Box, Heading, Text } from "fidesui"; +import { Box, Text } from "fidesui"; import Layout from "~/features/common/Layout"; -import BackButton from "~/features/common/nav/v2/BackButton"; import { PRIVACY_NOTICES_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import PrivacyNoticeForm from "~/features/privacy-notices/PrivacyNoticeForm"; const NewPrivacyNoticePage = () => ( - - - - New privacy notice - - + Configure your privacy notice including consent mechanism, associated diff --git a/clients/admin-ui/src/pages/consent/properties/index.tsx b/clients/admin-ui/src/pages/consent/properties/index.tsx index 3f7fba4ede..30402999a7 100644 --- a/clients/admin-ui/src/pages/consent/properties/index.tsx +++ b/clients/admin-ui/src/pages/consent/properties/index.tsx @@ -1,30 +1,19 @@ -import { Box, Flex, Heading, Text } from "fidesui"; +import { Text } from "fidesui"; import type { NextPage } from "next"; import Layout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; import { PropertiesTable } from "~/features/properties/PropertiesTable"; const PropertiesPage: NextPage = () => ( - <> - - - Properties - - - - - Review and manage your properties below. Properties are the locations - you have configured for consent management such as a website or mobile - app. - - - + + + Review and manage your properties below. Properties are the locations + you have configured for consent management such as a website or mobile + app. + + ); diff --git a/clients/admin-ui/src/pages/consent/reporting/index.tsx b/clients/admin-ui/src/pages/consent/reporting/index.tsx index 4ba8b2c75d..fdc390c0ac 100644 --- a/clients/admin-ui/src/pages/consent/reporting/index.tsx +++ b/clients/admin-ui/src/pages/consent/reporting/index.tsx @@ -1,23 +1,21 @@ -import { Box, Heading, Text } from "fidesui"; +import { Box, Text } from "fidesui"; import React from "react"; import Layout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; import ConsentReporting from "~/features/consent-reporting/ConsentReporting"; const ConsentReportingPage = () => ( - - - Consent reporting - - - - Download a CSV containing a report of consent preferences made by users on - your sites. Select a date range below and click "Download - report". Depending on the number of records in the date range you - select, it may take several minutes to prepare the file after you click - "Download report". - + + + Download a CSV containing a report of consent preferences made by users + on your sites. Select a date range below and click "Download + report". Depending on the number of records in the date range you + select, it may take several minutes to prepare the file after you click + "Download report". + + diff --git a/clients/admin-ui/src/pages/data-discovery/activity.tsx b/clients/admin-ui/src/pages/data-discovery/activity.tsx index 8a1c4a881b..99cd21240c 100644 --- a/clients/admin-ui/src/pages/data-discovery/activity.tsx +++ b/clients/admin-ui/src/pages/data-discovery/activity.tsx @@ -24,13 +24,8 @@ const DataDiscoveryAndDetectionActivityPage = () => { }; return ( - - + + { const { resourceUrn, navigateToDetectionResults } = useDiscoveryRoutes(); return ( - - + + ( - - + + diff --git a/clients/admin-ui/src/pages/data-discovery/discovery/[resourceUrn].tsx b/clients/admin-ui/src/pages/data-discovery/discovery/[resourceUrn].tsx index 1dd9d44c2a..9a17433e91 100644 --- a/clients/admin-ui/src/pages/data-discovery/discovery/[resourceUrn].tsx +++ b/clients/admin-ui/src/pages/data-discovery/discovery/[resourceUrn].tsx @@ -11,13 +11,8 @@ const DataDiscoveryActivityPage = () => { const { resourceUrn, navigateToDiscoveryResults } = useDiscoveryRoutes(); return ( - - + + ( - - + + diff --git a/clients/admin-ui/src/pages/datamap/index.tsx b/clients/admin-ui/src/pages/datamap/index.tsx index 49831e1044..4c257253a2 100644 --- a/clients/admin-ui/src/pages/datamap/index.tsx +++ b/clients/admin-ui/src/pages/datamap/index.tsx @@ -3,6 +3,7 @@ import React, { useMemo } from "react"; import { DirtyFormConfirmationModal } from "~/features/common/hooks/useIsAnyFormDirty"; import Layout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; import Datamap from "~/features/datamap/Datamap"; import DatamapGraphStore from "~/features/datamap/datamap-graph/DatamapGraphContext"; import DatamapTableContext, { @@ -17,11 +18,12 @@ const Home: NextPage = () => { return ( + diff --git a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[...subfieldNames]/index.tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[...subfieldNames]/index.tsx index 2c97675057..cced436bb4 100644 --- a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[...subfieldNames]/index.tsx +++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/[...subfieldNames]/index.tsx @@ -20,12 +20,8 @@ import type { NextPage } from "next"; import { useRouter } from "next/router"; import { useCallback, useMemo, useState } from "react"; -import { BreadcrumbsProps } from "~/features/common/Breadcrumbs"; -import { DatabaseIcon } from "~/features/common/Icon/database/DatabaseIcon"; -import { DatasetIcon } from "~/features/common/Icon/database/DatasetIcon"; -import { FieldIcon } from "~/features/common/Icon/database/FieldIcon"; -import { TableIcon } from "~/features/common/Icon/database/TableIcon"; import Layout from "~/features/common/Layout"; +import { NextBreadcrumbProps } from "~/features/common/nav/v2/NextBreadcrumb"; import { DATASET_COLLECTION_DETAIL_ROUTE, DATASET_COLLECTION_SUBFIELD_DETAIL_ROUTE, @@ -43,11 +39,11 @@ import { TableSkeletonLoader, } from "~/features/common/table/v2"; import TaxonomiesPicker from "~/features/common/TaxonomiesPicker"; +import { DATA_BREADCRUMB_ICONS } from "~/features/data-discovery-and-detection/DiscoveryMonitorBreadcrumbs"; import { useGetDatasetByKeyQuery, useUpdateDatasetMutation, } from "~/features/dataset"; -import DatasetBreadcrumbs from "~/features/dataset/DatasetBreadcrumbs"; import EditFieldDrawer from "~/features/dataset/EditFieldDrawer"; import { getDatasetPath } from "~/features/dataset/helpers"; import { DatasetField } from "~/types/api"; @@ -275,24 +271,23 @@ const FieldsDetailPage: NextPage = () => { >(); const breadcrumbs = useMemo(() => { - const baseBreadcrumbs: BreadcrumbsProps["breadcrumbs"] = [ + const baseBreadcrumbs: NextBreadcrumbProps["items"] = [ { title: "All datasets", - icon: , - link: DATASET_ROUTE, + href: DATASET_ROUTE, }, { title: datasetId, - link: { + href: { pathname: DATASET_DETAIL_ROUTE, query: { datasetId }, }, - icon: , + icon: DATA_BREADCRUMB_ICONS[1], }, { title: collectionName, - icon: , - link: { + icon: DATA_BREADCRUMB_ICONS[2], + href: { pathname: DATASET_COLLECTION_DETAIL_ROUTE, query: { datasetId, collectionName }, }, @@ -301,7 +296,7 @@ const FieldsDetailPage: NextPage = () => { subfieldNames.forEach((subfield, index) => { baseBreadcrumbs.push({ title: subfield, - link: + href: index < subfieldNames.length - 1 ? { pathname: DATASET_COLLECTION_SUBFIELD_DETAIL_ROUTE, @@ -314,17 +309,15 @@ const FieldsDetailPage: NextPage = () => { }, } : undefined, - icon: , + icon: DATA_BREADCRUMB_ICONS[3], }); }); return baseBreadcrumbs; }, [datasetId, collectionName, subfieldNames]); return ( - - - - + + {isLoading ? ( diff --git a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx index f825971be4..27f789f004 100644 --- a/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx +++ b/clients/admin-ui/src/pages/dataset/[datasetId]/[collectionName]/index.tsx @@ -19,9 +19,6 @@ import type { NextPage } from "next"; import { useRouter } from "next/router"; import { useCallback, useMemo, useState } from "react"; -import { DatabaseIcon } from "~/features/common/Icon/database/DatabaseIcon"; -import { DatasetIcon } from "~/features/common/Icon/database/DatasetIcon"; -import { TableIcon } from "~/features/common/Icon/database/TableIcon"; import Layout from "~/features/common/Layout"; import { DATASET_COLLECTION_SUBFIELD_DETAIL_ROUTE, @@ -39,11 +36,11 @@ import { TableSkeletonLoader, } from "~/features/common/table/v2"; import TaxonomiesPicker from "~/features/common/TaxonomiesPicker"; +import { DATA_BREADCRUMB_ICONS } from "~/features/data-discovery-and-detection/DiscoveryMonitorBreadcrumbs"; import { useGetDatasetByKeyQuery, useUpdateDatasetMutation, } from "~/features/dataset"; -import DatasetBreadcrumbs from "~/features/dataset/DatasetBreadcrumbs"; import EditFieldDrawer from "~/features/dataset/EditFieldDrawer"; import { getUpdatedDatasetFromField } from "~/features/dataset/helpers"; import { DatasetField } from "~/types/api"; @@ -260,29 +257,26 @@ const FieldsDetailPage: NextPage = () => { return [ { title: "All datasets", - icon: , - link: DATASET_ROUTE, + href: DATASET_ROUTE, }, { title: datasetId, - link: { + href: { pathname: DATASET_DETAIL_ROUTE, query: { datasetId }, }, - icon: , + icon: DATA_BREADCRUMB_ICONS[1], }, { title: collectionName, - icon: , + icon: DATA_BREADCRUMB_ICONS[2], }, ]; }, [datasetId, collectionName]); return ( - - - - + + {isLoading ? ( diff --git a/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx b/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx index 371a1def8d..cdb2255f1a 100644 --- a/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx +++ b/clients/admin-ui/src/pages/dataset/[datasetId]/index.tsx @@ -19,8 +19,6 @@ import type { NextPage } from "next"; import { useRouter } from "next/router"; import { useMemo, useState } from "react"; -import { DatabaseIcon } from "~/features/common/Icon/database/DatabaseIcon"; -import { DatasetIcon } from "~/features/common/Icon/database/DatasetIcon"; import Layout from "~/features/common/Layout"; import { DATASET_COLLECTION_DETAIL_ROUTE, @@ -35,8 +33,8 @@ import { TableActionBar, TableSkeletonLoader, } from "~/features/common/table/v2"; +import { DATA_BREADCRUMB_ICONS } from "~/features/data-discovery-and-detection/DiscoveryMonitorBreadcrumbs"; import { useGetDatasetByKeyQuery } from "~/features/dataset"; -import DatasetBreadcrumbs from "~/features/dataset/DatasetBreadcrumbs"; import EditCollectionDrawer from "~/features/dataset/EditCollectionDrawer"; import { DatasetCollection } from "~/types/api"; @@ -140,21 +138,18 @@ const DatasetDetailPage: NextPage = () => { return [ { title: "All datasets", - icon: , - link: DATASET_ROUTE, + href: DATASET_ROUTE, }, { title: datasetId, - icon: , + icon: DATA_BREADCRUMB_ICONS[1], }, ]; }, [datasetId]); return ( - - - - + + {isLoading ? ( diff --git a/clients/admin-ui/src/pages/dataset/index.tsx b/clients/admin-ui/src/pages/dataset/index.tsx index 4f4bc6bf6d..d75b9d3cb1 100644 --- a/clients/admin-ui/src/pages/dataset/index.tsx +++ b/clients/admin-ui/src/pages/dataset/index.tsx @@ -17,13 +17,13 @@ import { VStack, } from "fidesui"; import type { NextPage } from "next"; +import NextLink from "next/link"; import { useRouter } from "next/router"; import { useCallback, useEffect, useMemo, useState } from "react"; import { useDispatch } from "react-redux"; import { usePollForClassifications } from "~/features/common/classifications"; import { useFeatures } from "~/features/common/features"; -import { DatabaseIcon } from "~/features/common/Icon/database/DatabaseIcon"; import Layout from "~/features/common/Layout"; import { DATASET_DETAIL_ROUTE } from "~/features/common/nav/v2/routes"; import PageHeader from "~/features/common/PageHeader"; @@ -41,7 +41,6 @@ import { setActiveDatasetFidesKey, useGetDatasetsQuery, } from "~/features/dataset/dataset.slice"; -import DatasetBreadcrumbs from "~/features/dataset/DatasetBreadcrumbs"; import EditDatasetDrawer from "~/features/dataset/EditDatasetDrawer"; import { Dataset, GenerateTypes } from "~/types/api"; @@ -199,25 +198,21 @@ const DataSets: NextPage = () => { }); return ( - + - + Add dataset - + + + } - > - }, - ]} - fontSize="md" - fontWeight="normal" - mb={5} - /> - + /> {isLoading ? ( diff --git a/clients/admin-ui/src/pages/dataset/new/index.tsx b/clients/admin-ui/src/pages/dataset/new/index.tsx index 1a6b44431e..739a1de9c5 100644 --- a/clients/admin-ui/src/pages/dataset/new/index.tsx +++ b/clients/admin-ui/src/pages/dataset/new/index.tsx @@ -16,10 +16,14 @@ const NewDataset: NextPage = () => { "yaml" | "database" | "manual" | null >(null); return ( - + diff --git a/clients/admin-ui/src/pages/integrations/[id].tsx b/clients/admin-ui/src/pages/integrations/[id].tsx index 05c7f80c29..f570da5970 100644 --- a/clients/admin-ui/src/pages/integrations/[id].tsx +++ b/clients/admin-ui/src/pages/integrations/[id].tsx @@ -105,10 +105,11 @@ const IntegrationDetailView: NextPage = () => { return ( { return ( - - Integrations - + diff --git a/clients/admin-ui/src/pages/messaging/[id].tsx b/clients/admin-ui/src/pages/messaging/[id].tsx index 6e88b5d69d..b96a0c4369 100644 --- a/clients/admin-ui/src/pages/messaging/[id].tsx +++ b/clients/admin-ui/src/pages/messaging/[id].tsx @@ -2,7 +2,6 @@ import { getErrorMessage } from "common/helpers"; import { Box, ConfirmationModal, - Heading, Spinner, Text, useDisclosure, @@ -13,7 +12,9 @@ import { useRouter } from "next/router"; import Layout from "~/features/common/Layout"; import { MESSAGING_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import { errorToastParams, successToastParams } from "~/features/common/toast"; +import CustomizableMessagingTemplatesLabelEnum from "~/features/messaging-templates/CustomizableMessagingTemplatesLabelEnum"; import { MessagingTemplateCreateOrUpdate, useDeleteMessagingTemplateByIdMutation, @@ -91,21 +92,31 @@ const EditPropertyPage: NextPage = () => { return ( - - - Configure message - - - Configure this message - - + + + + + + - + { return ( - - - Configure message - + - Configure this message { /> - + ); }; diff --git a/clients/admin-ui/src/pages/messaging/index.tsx b/clients/admin-ui/src/pages/messaging/index.tsx index d11ec73c5f..a29aaae80e 100644 --- a/clients/admin-ui/src/pages/messaging/index.tsx +++ b/clients/admin-ui/src/pages/messaging/index.tsx @@ -173,17 +173,8 @@ const MessagingPage: NextPage = () => { }); return ( - - - - Configure Fides messaging. - - + + diff --git a/clients/admin-ui/src/pages/privacy-requests/[id].tsx b/clients/admin-ui/src/pages/privacy-requests/[id].tsx index e2847c7c1b..86c1e8cd48 100644 --- a/clients/admin-ui/src/pages/privacy-requests/[id].tsx +++ b/clients/admin-ui/src/pages/privacy-requests/[id].tsx @@ -1,11 +1,11 @@ -import { Center, Heading, Spinner, Text } from "fidesui"; +import { Center, Spinner, Text } from "fidesui"; import type { NextPage } from "next"; import { useRouter } from "next/router"; import { ReactNode } from "react"; import Layout from "~/features/common/Layout"; -import BackButton from "~/features/common/nav/v2/BackButton"; import { PRIVACY_REQUESTS_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import { useGetAllPrivacyRequestsQuery } from "~/features/privacy-requests"; import PrivacyRequest from "~/features/privacy-requests/PrivacyRequest"; @@ -39,11 +39,14 @@ const PrivacyRequests: NextPage = () => { } return ( - - - - Privacy Request - + + {content} ); diff --git a/clients/admin-ui/src/pages/privacy-requests/configure.tsx b/clients/admin-ui/src/pages/privacy-requests/configure.tsx index 838b790f8e..414cad3062 100644 --- a/clients/admin-ui/src/pages/privacy-requests/configure.tsx +++ b/clients/admin-ui/src/pages/privacy-requests/configure.tsx @@ -1,21 +1,35 @@ -import { Box, Heading, LinkBox, LinkOverlay } from "fidesui"; +import { + AntTypography as Typography, + Box, + Heading, + LinkBox, + LinkOverlay, +} from "fidesui"; import type { NextPage } from "next"; import NextLink from "next/link"; import Layout from "~/features/common/Layout"; -import BackButton from "~/features/common/nav/v2/BackButton"; import { PRIVACY_REQUESTS_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; + +const { Text } = Typography; const ConfigurePrivacyRequests: NextPage = () => ( - - - Configure your privacy requests - + + + Configure your privacy requests: + ( - + ); diff --git a/clients/admin-ui/src/pages/properties/[id].tsx b/clients/admin-ui/src/pages/properties/[id].tsx index 40f8775109..78a1c8a7ff 100644 --- a/clients/admin-ui/src/pages/properties/[id].tsx +++ b/clients/admin-ui/src/pages/properties/[id].tsx @@ -1,9 +1,11 @@ -import { Box, Heading, Text, useToast } from "fidesui"; +import { Box, useToast } from "fidesui"; import type { NextPage } from "next"; import { useRouter } from "next/router"; import { getErrorMessage } from "~/features/common/helpers"; import Layout from "~/features/common/Layout"; +import { PROPERTIES_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import { errorToastParams, successToastParams } from "~/features/common/toast"; import { useGetPropertyByIdQuery, @@ -41,13 +43,19 @@ const EditPropertyPage: NextPage = () => { return ( - - - Edit {data.name} - - - - Edit your existing property here. + + diff --git a/clients/admin-ui/src/pages/properties/add-property.tsx b/clients/admin-ui/src/pages/properties/add-property.tsx index 91a08cc3f4..d414ab3767 100644 --- a/clients/admin-ui/src/pages/properties/add-property.tsx +++ b/clients/admin-ui/src/pages/properties/add-property.tsx @@ -1,23 +1,16 @@ -import { Box, Heading, Text, useToast } from "fidesui"; +import { Box, useToast } from "fidesui"; import type { NextPage } from "next"; import { useRouter } from "next/router"; import { getErrorMessage } from "~/features/common/helpers"; import Layout from "~/features/common/Layout"; import { PROPERTIES_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import { errorToastParams, successToastParams } from "~/features/common/toast"; import { useCreatePropertyMutation } from "~/features/properties/property.slice"; import PropertyForm, { FormValues } from "~/features/properties/PropertyForm"; import { isErrorResult } from "~/types/errors"; -const Header = () => ( - - - Add property - - -); - const AddPropertyPage: NextPage = () => { const toast = useToast(); const router = useRouter(); @@ -38,9 +31,19 @@ const AddPropertyPage: NextPage = () => { return ( -
- - Add new property to Fides here. + + diff --git a/clients/admin-ui/src/pages/properties/index.tsx b/clients/admin-ui/src/pages/properties/index.tsx index 70d9c22e0c..30402999a7 100644 --- a/clients/admin-ui/src/pages/properties/index.tsx +++ b/clients/admin-ui/src/pages/properties/index.tsx @@ -1,23 +1,19 @@ -import { Box, Flex, Heading, Text } from "fidesui"; +import { Text } from "fidesui"; import type { NextPage } from "next"; import Layout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; import { PropertiesTable } from "~/features/properties/PropertiesTable"; const PropertiesPage: NextPage = () => ( - - - Properties - - - - + + Review and manage your properties below. Properties are the locations you have configured for consent management such as a website or mobile app. - + ); diff --git a/clients/admin-ui/src/pages/reporting/datamap/index.tsx b/clients/admin-ui/src/pages/reporting/datamap/index.tsx index 7eb781c807..bc5ae4bfae 100644 --- a/clients/admin-ui/src/pages/reporting/datamap/index.tsx +++ b/clients/admin-ui/src/pages/reporting/datamap/index.tsx @@ -6,15 +6,10 @@ import { DatamapReportProvider } from "~/features/datamap/reporting/datamap-repo import { DatamapReportTable } from "~/features/datamap/reporting/DatamapReportTable"; const DatamapReportingPage = () => ( - + diff --git a/clients/admin-ui/src/pages/settings/about.tsx b/clients/admin-ui/src/pages/settings/about.tsx index 036bad8e71..341c715a30 100644 --- a/clients/admin-ui/src/pages/settings/about.tsx +++ b/clients/admin-ui/src/pages/settings/about.tsx @@ -17,6 +17,7 @@ import { } from "~/features/common/features/features.slice"; import { FlagControl } from "~/features/common/features/FlagControl"; import Layout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; const About: NextPage = () => { const features = useFeatures(); @@ -24,79 +25,79 @@ const About: NextPage = () => { return ( - - About Fides - - - - Fides Core Version:{" "} - - - {features.version} - - - - {features.plusVersion ? ( + + - Fides Plus Version:{" "} + Fides Core Version:{" "} - {features.plusVersion} + {features.version} - ) : null} - - - - - Beta Features - - + {features.plusVersion ? ( + + + Fides Plus Version:{" "} + + + {features.plusVersion} + + + ) : null} + - - {FLAG_NAMES.map((flag) => ( - - ))} - + - - - Please visit{" "} - - docs.ethyca.com - {" "} - for more information on these features. - - - - For questions and feedback, please join us at{" "} - - fidescommunity.slack.com - - . - - + + + Beta Features + + + + {FLAG_NAMES.map((flag) => ( + + ))} + + + + + Please visit{" "} + + docs.ethyca.com + {" "} + for more information on these features. + + + + For questions and feedback, please join us at{" "} + + fidescommunity.slack.com + + . + + ); }; diff --git a/clients/admin-ui/src/pages/settings/consent.tsx b/clients/admin-ui/src/pages/settings/consent.tsx index 695e4da52f..71c4d312ec 100644 --- a/clients/admin-ui/src/pages/settings/consent.tsx +++ b/clients/admin-ui/src/pages/settings/consent.tsx @@ -6,7 +6,6 @@ import { AntSwitch as Switch, Box, Flex, - Heading, Spinner, Stack, Text, @@ -21,6 +20,7 @@ import DocsLink from "~/features/common/DocsLink"; import { useFeatures } from "~/features/common/features"; import { getErrorMessage, isErrorResult } from "~/features/common/helpers"; import Layout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; import { useGetPurposesQuery } from "~/features/common/purpose.slice"; import QuestionTooltip from "~/features/common/QuestionTooltip"; import { errorToastParams, successToastParams } from "~/features/common/toast"; @@ -217,9 +217,7 @@ const ConsentConfigPage: NextPage = () => { ) : ( - - Consent settings - + diff --git a/clients/admin-ui/src/pages/settings/custom-fields.tsx b/clients/admin-ui/src/pages/settings/custom-fields.tsx index 46aa4adf27..6d8a7b0a14 100644 --- a/clients/admin-ui/src/pages/settings/custom-fields.tsx +++ b/clients/admin-ui/src/pages/settings/custom-fields.tsx @@ -1,16 +1,15 @@ import Layout from "common/Layout"; -import { Box, Heading } from "fidesui"; +import { Box } from "fidesui"; import type { NextPage } from "next"; import React from "react"; +import PageHeader from "~/features/common/PageHeader"; import { CustomFieldsTable } from "~/features/custom-fields/CustomFieldsTable"; const CustomFields: NextPage = () => ( - - Manage custom fields - + diff --git a/clients/admin-ui/src/pages/settings/domains.tsx b/clients/admin-ui/src/pages/settings/domains.tsx index fabec83fbf..a949f62807 100644 --- a/clients/admin-ui/src/pages/settings/domains.tsx +++ b/clients/admin-ui/src/pages/settings/domains.tsx @@ -6,7 +6,6 @@ import { Box, DeleteIcon, Flex, - Heading, Spinner, Text, useToast, @@ -21,6 +20,7 @@ import FormSection from "~/features/common/form/FormSection"; import { CustomTextInput, TextInput } from "~/features/common/form/inputs"; import { getErrorMessage, isErrorResult } from "~/features/common/helpers"; import Layout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; import { errorToastParams, successToastParams } from "~/features/common/toast"; import { CORSOrigins, @@ -161,21 +161,20 @@ const CORSConfigurationPage: NextPage = () => { return ( - - Domains - - - - For Fides to work on your website(s), each of your domains must be - listed below. You can add and remove domains at any time up to the - quantity included in your license. For more information on managing - domains{" "} - - read here - - . - - + + + + For Fides to work on your website(s), each of your domains must be + listed below. You can add and remove domains at any time up to the + quantity included in your license. For more information on + managing domains{" "} + + read here + + . + + + { return ( - - Email templates - + When privacy requests are submitted, Fides emails the data subject diff --git a/clients/admin-ui/src/pages/settings/locations.tsx b/clients/admin-ui/src/pages/settings/locations.tsx index e86beff23f..8b6217737d 100644 --- a/clients/admin-ui/src/pages/settings/locations.tsx +++ b/clients/admin-ui/src/pages/settings/locations.tsx @@ -1,8 +1,9 @@ -import { Box, Heading, Spinner, Text } from "fidesui"; +import { Box, Spinner, Text } from "fidesui"; import type { NextPage } from "next"; import { useAppSelector } from "~/app/hooks"; import Layout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; import LocationManagement from "~/features/locations/LocationManagement"; import { selectLocationsRegulations, @@ -18,22 +19,19 @@ const LocationsPage: NextPage = () => { return ( - - Locations - - - + + Select the locations that you operate in and Fides will make sure that you are automatically presented with the relevant regulatory guidelines and global frameworks for your locations. - - {isLoading ? ( - - ) : ( - - )} - + + + {isLoading ? ( + + ) : ( + + )} diff --git a/clients/admin-ui/src/pages/settings/organization.tsx b/clients/admin-ui/src/pages/settings/organization.tsx index b2462ef470..1c2c1c8029 100644 --- a/clients/admin-ui/src/pages/settings/organization.tsx +++ b/clients/admin-ui/src/pages/settings/organization.tsx @@ -1,9 +1,10 @@ import Restrict from "common/Restrict"; -import { Box, Heading, Text } from "fidesui"; +import { Box, Text } from "fidesui"; import type { NextPage } from "next"; import { useFeatures } from "~/features/common/features"; import Layout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; import OpenIDAuthenticationSection from "~/features/openid-authentication/SSOProvidersSection"; import { DEFAULT_ORGANIZATION_FIDES_KEY, @@ -24,15 +25,14 @@ const OrganizationPage: NextPage = () => { return ( - - Organization Management - - - + + Please use this section to manage your organization‘s details, including key information that will be recorded in the RoPA (Record of Processing Activities). + + diff --git a/clients/admin-ui/src/pages/settings/regulations.tsx b/clients/admin-ui/src/pages/settings/regulations.tsx index f4d0a1cf8f..a8ed513af2 100644 --- a/clients/admin-ui/src/pages/settings/regulations.tsx +++ b/clients/admin-ui/src/pages/settings/regulations.tsx @@ -1,10 +1,11 @@ -import { Box, Heading, Link, Spinner, Text } from "fidesui"; +import { Box, Link, Spinner, Text } from "fidesui"; import type { NextPage } from "next"; import NextLink from "next/link"; import { useAppSelector } from "~/app/hooks"; import Layout from "~/features/common/Layout"; import { LOCATIONS_ROUTE } from "~/features/common/nav/v2/routes"; +import PageHeader from "~/features/common/PageHeader"; import { selectLocationsRegulations, useGetLocationsRegulationsQuery, @@ -20,10 +21,7 @@ const RegulationsPage: NextPage = () => { return ( - - Regulations - - + Select the regulations that apply to your organizations compliance requirements. The selections you make here will automatically update @@ -36,13 +34,13 @@ const RegulationsPage: NextPage = () => { You can view your location settings here. - - {isLoading ? ( - - ) : ( - - )} - + + + {isLoading ? ( + + ) : ( + + )} diff --git a/clients/admin-ui/src/pages/systems/configure/[id]/index.tsx b/clients/admin-ui/src/pages/systems/configure/[id]/index.tsx index cab6242e34..e71dcfa9a2 100644 --- a/clients/admin-ui/src/pages/systems/configure/[id]/index.tsx +++ b/clients/admin-ui/src/pages/systems/configure/[id]/index.tsx @@ -78,13 +78,13 @@ const ConfigureSystem: NextPage = () => { } return ( - + { diff --git a/clients/admin-ui/src/pages/systems/index.tsx b/clients/admin-ui/src/pages/systems/index.tsx index cfc41ca109..aad2fcb07a 100644 --- a/clients/admin-ui/src/pages/systems/index.tsx +++ b/clients/admin-ui/src/pages/systems/index.tsx @@ -231,13 +231,12 @@ const Systems: NextPage = () => { }); return ( - + - - - View and manage recently detected systems and vendors here. - - + {isLoading ? ( ) : ( diff --git a/clients/admin-ui/src/pages/taxonomy/index.tsx b/clients/admin-ui/src/pages/taxonomy/index.tsx index 7b8f7f9156..6c58f58201 100644 --- a/clients/admin-ui/src/pages/taxonomy/index.tsx +++ b/clients/admin-ui/src/pages/taxonomy/index.tsx @@ -90,15 +90,10 @@ const TaxonomyPage: NextPage = () => { ) as TaxonomyEntity[]; return ( - +
- + {/* hide search bar until functionality is implemented */}
diff --git a/clients/admin-ui/src/pages/user-management/index.tsx b/clients/admin-ui/src/pages/user-management/index.tsx index e210d5f32f..0877312bf6 100644 --- a/clients/admin-ui/src/pages/user-management/index.tsx +++ b/clients/admin-ui/src/pages/user-management/index.tsx @@ -1,16 +1,21 @@ -import { Heading } from "fidesui"; import type { NextPage } from "next"; import React from "react"; import UserManagementTable from "user-management/UserManagementTable"; import UserManagementTableActions from "user-management/UserManagementTableActions"; import Layout from "~/features/common/Layout"; +import PageHeader from "~/features/common/PageHeader"; const UserManagement: NextPage = () => ( - - User Management - + diff --git a/clients/admin-ui/src/pages/user-management/new.tsx b/clients/admin-ui/src/pages/user-management/new.tsx index d581c5c8dd..4ea8019c39 100644 --- a/clients/admin-ui/src/pages/user-management/new.tsx +++ b/clients/admin-ui/src/pages/user-management/new.tsx @@ -1,22 +1,23 @@ import React from "react"; import NewUserForm from "user-management/NewUserForm"; -import UserManagementLayout from "user-management/UserManagementLayout"; + +import Layout from "~/features/common/Layout"; const CreateNewUser = () => ( - - {/* + + {/* We're going to have some problems with flow here. The NewUserForm no longer redirects to the user management table after a user is created since there - are still roles to edit. But this means the user will still be on the + are still roles to edit. But this means the user will still be on the NewUserForm and if they try to make edits they'll actually be making a new user!! We may need to do some thinking around the flow we want here, and maybe refactor these forms to work more like the way the SystemInformation form works, where the form itself figures out if it's creating or updating, rather than relying on its - parents to tell it what to do. + parents to tell it what to do. */} - + ); export default CreateNewUser; diff --git a/clients/admin-ui/src/pages/user-management/profile/[id].tsx b/clients/admin-ui/src/pages/user-management/profile/[id].tsx index bcc939176d..a57eda907f 100644 --- a/clients/admin-ui/src/pages/user-management/profile/[id].tsx +++ b/clients/admin-ui/src/pages/user-management/profile/[id].tsx @@ -1,4 +1,4 @@ -import { Spinner } from "fidesui"; +import { AntAlert as Alert, AntFlex as Flex, Spinner } from "fidesui"; import { useRouter } from "next/router"; import React, { useEffect } from "react"; import EditUserForm from "user-management/EditUserForm"; @@ -6,10 +6,10 @@ import { setActiveUserId, useGetUserByIdQuery, } from "user-management/user-management.slice"; -import UserManagementLayout from "user-management/UserManagementLayout"; import { useAppDispatch, useAppSelector } from "~/app/hooks"; import { selectUser } from "~/features/auth"; +import Layout from "~/features/common/Layout"; import { useHasPermission } from "~/features/common/Restrict"; import { ScopeRegistryEnum } from "~/types/api"; @@ -47,24 +47,24 @@ const Profile = () => { } }, [router, canAccess, existingUser]); - if (isLoadingUser) { - return ( - - - - ); - } - - if (existingUser == null) { - return ( - Could not find profile ID. - ); - } - return ( - - - + + {isLoadingUser && ( + + + + )} + {!isLoadingUser && !existingUser && ( + + + + )} + {!!existingUser && } + ); }; diff --git a/clients/fidesui/src/index.ts b/clients/fidesui/src/index.ts index b928d26415..6179fa6da0 100644 --- a/clients/fidesui/src/index.ts +++ b/clients/fidesui/src/index.ts @@ -8,6 +8,7 @@ export * from "@chakra-ui/utils"; export type { ThemeConfig as AntThemeConfig } from "antd/es"; export type { ButtonProps as AntButtonProps, + FlexProps as AntFlexProps, FormInstance as AntFormInstance, InputProps as AntInputProps, SelectProps as AntSelectProps, @@ -17,6 +18,7 @@ export type { } from "antd/lib"; export { Alert as AntAlert, + Breadcrumb as AntBreadcrumb, Button as AntButton, Card as AntCard, Checkbox as AntCheckbox, @@ -35,6 +37,10 @@ export { Tooltip as AntTooltip, Typography as AntTypography, } from "antd/lib"; +export type { + BreadcrumbItemType as AntBreadcrumbItemType, + BreadcrumbProps as AntBreadcrumbProps, +} from "antd/lib/breadcrumb/Breadcrumb"; export type { BaseOptionType as AntBaseOptionType, DefaultOptionType as AntDefaultOptionType,