Data catalog UI: MVP

CHANGELOG.md

@@ -166,6 +166,7 @@ The types of changes are:
 
 ### Fixed
  - API router sanitizer being too aggressive with NextJS Catch-all Segments [#5438](https://github.com/ethyca/fides/pull/5438)
+ - Fix rendering of subfield names in D&D tables [#5439](https://github.com/ethyca/fides/pull/5439)
  - Fix BigQuery `partitioning` queries to properly support multiple identity clauses [#5432](https://github.com/ethyca/fides/pull/5432)
 
 ## [2.48.0](https://github.com/ethyca/fides/compare/2.47.1...2.48.0)

clients/admin-ui/src/features/common/ResultStatusBadge.tsx

@@ -0,0 +1,22 @@
+import { Badge, BadgeProps } from "fidesui";
+import React from "react";
+
+const ResultStatusBadge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  (props, ref) => {
+    return (
+      <Badge
+        fontSize="xs"
+        fontWeight="normal"
+        textTransform="none"
+        ref={ref}
+        {...props}
+      >
+        {props.children}
+      </Badge>
+    );
+  },
+);
+
+ResultStatusBadge.displayName = "ResultStatusBadge";
+
+export default ResultStatusBadge;

clients/admin-ui/src/features/common/TaxonomiesPicker.tsx

@@ -4,11 +4,11 @@ import {
   Box,
   CloseIcon,
   SmallAddIcon,
-  Wrap,
 } from "fidesui";
 import { useState } from "react";
 
-import { TaxonomySelect } from "~/features/common/dropdown/TaxonomySelect";
+import DataCategorySelect from "~/features/common/dropdown/DataCategorySelect";
+import TaxonomyCellContainer from "~/features/data-discovery-and-detection/tables/cells/TaxonomyCellContainer";
 
 import useTaxonomies from "./hooks/useTaxonomies";
 
@@ -27,14 +27,7 @@ const TaxonomiesPicker = ({
   const { getDataCategoryDisplayName } = useTaxonomies();
 
   return (
-    <Wrap
-      py={2}
-      alignItems="center"
-      position="relative"
-      width="100%"
-      gap={2}
-      overflowX="auto"
-    >
+    <TaxonomyCellContainer>
       {selectedTaxonomies.map((category) => (
         <Badge
           fontWeight="normal"
@@ -76,7 +69,7 @@ const TaxonomiesPicker = ({
           height="max"
           bgColor="#fff"
         >
-          <TaxonomySelect
+          <DataCategorySelect
             selectedTaxonomies={selectedTaxonomies}
             onChange={(o) => {
               setIsAdding(false);
@@ -87,7 +80,7 @@ const TaxonomiesPicker = ({
           />
         </Box>
       )}
-    </Wrap>
+    </TaxonomyCellContainer>
   );
 };
 export default TaxonomiesPicker;

clients/admin-ui/src/features/common/api.slice.ts

@@ -19,6 +19,8 @@ export const baseApi = createApi({
   tagTypes: [
     "Allow List",
     "Auth",
+    "Catalog Systems",
+    "Catalog Projects",
     "Classify Instances Datasets",
     "Classify Instances Systems",
     "Connection Type",

clients/admin-ui/src/features/common/dropdown/DataCategorySelect.tsx

@@ -0,0 +1,43 @@
+import {
+  TaxonomySelect,
+  TaxonomySelectOption,
+  TaxonomySelectProps,
+} from "~/features/common/dropdown/TaxonomySelect";
+import useTaxonomies from "~/features/common/hooks/useTaxonomies";
+
+import styles from "./TaxonomySelect.module.scss";
+
+const DataCategorySelect = ({
+  selectedTaxonomies,
+  showDisabled = false,
+  ...props
+}: TaxonomySelectProps) => {
+  const { getDataCategoryDisplayNameProps, getDataCategories } =
+    useTaxonomies();
+
+  const getActiveDataCategories = () =>
+    getDataCategories().filter((c) => c.active);
+
+  const dataCategories = showDisabled
+    ? getDataCategories()
+    : getActiveDataCategories();
+
+  const options: TaxonomySelectOption[] = dataCategories
+    .filter((category) => !selectedTaxonomies.includes(category.fides_key))
+    .map((category) => {
+      const { name, primaryName } = getDataCategoryDisplayNameProps(
+        category.fides_key,
+      );
+      return {
+        value: category.fides_key,
+        name,
+        primaryName,
+        description: category.description || "",
+        className: styles.option,
+      };
+    });
+
+  return <TaxonomySelect options={options} {...props} />;
+};
+
+export default DataCategorySelect;

clients/admin-ui/src/features/common/dropdown/DataUseSelect.tsx

@@ -0,0 +1,39 @@
+import {
+  TaxonomySelect,
+  TaxonomySelectOption,
+  TaxonomySelectProps,
+} from "~/features/common/dropdown/TaxonomySelect";
+import useTaxonomies from "~/features/common/hooks/useTaxonomies";
+
+import styles from "./TaxonomySelect.module.scss";
+
+const DataUseSelect = ({
+  selectedTaxonomies,
+  showDisabled = false,
+  ...props
+}: TaxonomySelectProps) => {
+  const { getDataUseDisplayNameProps, getDataUses } = useTaxonomies();
+
+  const getActiveDataUses = () => getDataUses().filter((du) => du.active);
+
+  const dataUses = showDisabled ? getDataUses() : getActiveDataUses();
+
+  const options: TaxonomySelectOption[] = dataUses
+    .filter((dataUse) => !selectedTaxonomies.includes(dataUse.fides_key))
+    .map((dataUse) => {
+      const { name, primaryName } = getDataUseDisplayNameProps(
+        dataUse.fides_key,
+      );
+      return {
+        value: dataUse.fides_key,
+        name,
+        primaryName,
+        description: dataUse.description || "",
+        className: styles.option,
+      };
+    });
+
+  return <TaxonomySelect options={options} {...props} />;
+};
+
+export default DataUseSelect;

clients/admin-ui/src/features/common/dropdown/TaxonomySelect.tsx

@@ -4,9 +4,6 @@ import {
   AntSelectProps as SelectProps,
 } from "fidesui";
 
-import useTaxonomies from "../hooks/useTaxonomies";
-import styles from "./TaxonomySelect.module.scss";
-
 export interface TaxonomySelectOption {
   value: string;
   name?: string;
@@ -15,7 +12,7 @@ export interface TaxonomySelectOption {
   className?: string;
 }
 
-const TaxonomyOption = ({ data }: { data: TaxonomySelectOption }) => {
+export const TaxonomyOption = ({ data }: { data: TaxonomySelectOption }) => {
   return (
     <Flex
       gap={12}
@@ -30,48 +27,22 @@ const TaxonomyOption = ({ data }: { data: TaxonomySelectOption }) => {
   );
 };
 
-interface TaxonomySelectProps
-  extends SelectProps<string, TaxonomySelectOption> {
+export interface TaxonomySelectProps
+  extends Omit<SelectProps<string, TaxonomySelectOption>, "options"> {
   selectedTaxonomies: string[];
   showDisabled?: boolean;
 }
+
 export const TaxonomySelect = ({
-  selectedTaxonomies,
-  showDisabled = false,
+  options,
   ...props
-}: TaxonomySelectProps) => {
-  const { getDataCategoryDisplayNameProps, getDataCategories } =
-    useTaxonomies();
-
-  const getActiveDataCategories = () =>
-    getDataCategories().filter((c) => c.active);
-
-  const dataCategories = showDisabled
-    ? getDataCategories()
-    : getActiveDataCategories();
-
-  const options: TaxonomySelectOption[] = dataCategories
-    .filter((category) => !selectedTaxonomies.includes(category.fides_key))
-    .map((category) => {
-      const { name, primaryName } = getDataCategoryDisplayNameProps(
-        category.fides_key,
-      );
-      return {
-        value: category.fides_key,
-        name,
-        primaryName,
-        description: category.description || "",
-        className: styles.option,
-      };
-    });
-
+}: SelectProps<string, TaxonomySelectOption>) => {
   return (
     <Select<string, TaxonomySelectOption>
+      options={options}
       autoFocus
       showSearch
       variant="borderless"
-      placeholder="Select a category..."
-      options={options}
       optionRender={TaxonomyOption}
       dropdownStyle={{ minWidth: "500px" }}
       className="w-full p-0"

clients/admin-ui/src/features/common/form/AdvancedSettings.tsx

@@ -0,0 +1,27 @@
+import { ChevronDownIcon, Collapse, Flex, Text, useDisclosure } from "fidesui";
+import { ReactNode } from "react";
+
+const AdvancedSettings = ({ children }: { children: ReactNode }) => {
+  const { isOpen, onToggle } = useDisclosure();
+  return (
+    <Flex
+      p={4}
+      gap={6}
+      direction="column"
+      border="1px solid"
+      borderColor="gray.200"
+    >
+      <Flex justifyContent="space-between" cursor="pointer" onClick={onToggle}>
+        <Text fontSize="xs">Advanced settings</Text>
+        <ChevronDownIcon className={isOpen ? "rotate-180" : undefined} />
+      </Flex>
+      <Collapse in={isOpen}>
+        <Flex direction="column" gap={4}>
+          {children}
+        </Flex>
+      </Collapse>
+    </Flex>
+  );
+};
+
+export default AdvancedSettings;

clients/admin-ui/src/features/common/hooks/useTaxonomies.tsx

@@ -107,6 +107,10 @@ const useTaxonomies = () => {
 
   const getDataUseDisplayName = (dataUseKey: string): JSX.Element | string =>
     getDataDisplayName(dataUseKey, getDataUseByKey, 1);
+  const getDataUseDisplayNameProps = (
+    dataUseKey: string,
+  ): DataDisplayNameProps =>
+    getDataDisplayNameProps(dataUseKey, getDataUseByKey, 1);
 
   /*
     Data Categories
@@ -143,6 +147,7 @@ const useTaxonomies = () => {
     getDataUses,
     getDataUseByKey,
     getDataUseDisplayName,
+    getDataUseDisplayNameProps,
     getDataCategories,
     getDataCategoryByKey,
     getDataCategoryDisplayName,

clients/admin-ui/src/features/common/nav/v2/nav-config.ts

@@ -59,6 +59,11 @@ export const NAV_CONFIG: NavConfigGroup[] = [
         requiresFlag: "dataDiscoveryAndDetection",
         requiresPlus: true,
       },
+      {
+        title: "Data catalog",
+        path: routes.DATA_CATALOG_ROUTE,
+        scopes: [],
+      },
     ],
   },
   {

clients/admin-ui/src/features/common/nav/v2/routes.ts

@@ -29,6 +29,9 @@ export const DATA_DISCOVERY_ROUTE = "/data-discovery/discovery";
 export const DATA_DISCOVERY_ROUTE_DETAIL =
   "/data-discovery/discovery/[resourceUrn]";
 
+// End-to-end datasets
+export const DATA_CATALOG_ROUTE = "/data-catalog";
+
 // Privacy requests group
 export const DATASTORE_CONNECTION_ROUTE = "/datastore-connection";
 export const PRIVACY_REQUESTS_ROUTE = "/privacy-requests";

clients/admin-ui/src/features/common/table/v2/FidesCell.tsx

@@ -106,6 +106,7 @@ export const FidesCell = <T,>({
       height="inherit"
       onClick={handleCellClick}
       data-testid={`row-${cell.row.id}-col-${cell.column.id}`}
+      {...cell.column.columnDef.meta?.cellProps}
     >
       {!cell.getIsPlaceholder() || isFirstRowOfGroupedRows
         ? flexRender(cell.column.columnDef.cell, {

clients/admin-ui/src/features/common/table/v2/FidesTable.tsx

@@ -22,6 +22,7 @@ import {
   Portal,
   SmallCloseIcon,
   Table,
+  TableCellProps,
   TableContainer,
   Tbody,
   Td,
@@ -57,6 +58,7 @@ declare module "@tanstack/table-core" {
     showHeaderMenuWrapOption?: boolean;
     overflow?: "auto" | "visible" | "hidden";
     disableRowClick?: boolean;
+    cellProps?: TableCellProps;
     onCellClick?: (row: TData) => void;
   }
 }
@@ -438,6 +440,7 @@ export const FidesTableV2 = <T,>({
                         opacity: 1,
                       },
                     }}
+                    {...header.column.columnDef.meta?.cellProps}
                   >
                     <HeaderContent
                       header={header}