Add UI for custom taxonomy CRUD (#6921)

Author: jpople

CHANGELOG.md

@@ -34,6 +34,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 - Added duplicate DSR checking to request runner [#6860](https://github.com/ethyca/fides/pull/6860/)
 - Added keyboard shortcuts for field actions in Action Center [#6919](https://github.com/ethyca/fides/pull/6919)
 - Added keyboard shortcuts helper modal in Action Center fields [#6926](https://github.com/ethyca/fides/pull/6926)
+- Added UI for configuring custom taxonomies [#6921](https://github.com/ethyca/fides/pull/6921)
 
 ### Changed
 - Restricted monitor tree selection to only classifiable resource types [#6900](https://github.com/ethyca/fides/pull/6900)

clients/admin-ui/src/features/taxonomy/components/CreateCustomTaxonomyForm.tsx

@@ -0,0 +1,85 @@
+import {
+  AntButton as Button,
+  AntFlex as Flex,
+  AntForm as Form,
+  AntInput as Input,
+  AntMessageInstance as MessageInstance,
+  AntTypography as Typography,
+} from "fidesui";
+
+import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
+import { formatKey } from "~/features/datastore-connections/system_portal_config/helpers";
+import { useCreateCustomTaxonomyMutation } from "~/features/taxonomy/taxonomy.slice";
+
+interface CreateCustomTaxonomyFormValues {
+  name: string;
+  description: string;
+}
+
+const FORM_COPY =
+  "Create and organize the core terminology your team uses to describe data and how it's handled. Custom taxonomies let you define domain-specific concepts and then apply them to other privacy objects throughout the platform";
+
+const CreateCustomTaxonomyForm = ({
+  onClose,
+  messageApi,
+}: {
+  onClose: () => void;
+  messageApi: MessageInstance;
+}) => {
+  const [createCustomTaxonomy, { isLoading: isSubmitting }] =
+    useCreateCustomTaxonomyMutation();
+
+  const handleSubmit = async (values: CreateCustomTaxonomyFormValues) => {
+    const payload = {
+      ...values,
+      taxonomy_type: formatKey(values.name ?? ""),
+    };
+    const result = await createCustomTaxonomy(payload);
+    if (isErrorResult(result)) {
+      messageApi.error(getErrorMessage(result.error));
+      return;
+    }
+    messageApi.success("Taxonomy created successfully");
+    onClose();
+  };
+
+  return (
+    <>
+      <Typography.Paragraph>{FORM_COPY}</Typography.Paragraph>
+      <Form
+        layout="vertical"
+        onFinish={handleSubmit}
+        validateTrigger={["onBlur", "onChange"]}
+      >
+        <Form.Item
+          label="Taxonomy name"
+          name="name"
+          rules={[{ required: true, message: "Name is required" }]}
+        >
+          <Input data-testid="input-name" />
+        </Form.Item>
+
+        <Form.Item label="Description" name="description">
+          <Input.TextArea rows={2} data-testid="input-description" />
+        </Form.Item>
+
+        <Flex gap="small" justify="space-between">
+          <Button onClick={onClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button
+            type="primary"
+            htmlType="submit"
+            loading={isSubmitting}
+            disabled={isSubmitting}
+            data-testid="save-btn"
+          >
+            Create taxonomy
+          </Button>
+        </Flex>
+      </Form>
+    </>
+  );
+};
+
+export default CreateCustomTaxonomyForm;

clients/admin-ui/src/features/taxonomy/components/CustomTaxonomyDetails.tsx

@@ -0,0 +1,53 @@
+import {
+  AntDescriptions as Descriptions,
+  AntFlex as Flex,
+  AntForm as Form,
+  AntInput as Input,
+} from "fidesui";
+
+import { TaxonomyResponse } from "~/types/api/models/TaxonomyResponse";
+import { TaxonomyUpdate } from "~/types/api/models/TaxonomyUpdate";
+
+interface CustomTaxonomyDetailsProps {
+  taxonomy?: TaxonomyResponse | null;
+  onSubmit: (values: TaxonomyUpdate) => void;
+  formId: string;
+}
+
+const CustomTaxonomyDetails = ({
+  taxonomy,
+  onSubmit,
+  formId,
+}: CustomTaxonomyDetailsProps) => {
+  if (!taxonomy) {
+    return null;
+  }
+  const { fides_key: fidesKey, ...initialValues } = taxonomy;
+
+  return (
+    <Flex vertical gap="large">
+      <Descriptions>
+        <Descriptions.Item label="Fides key">{fidesKey}</Descriptions.Item>
+      </Descriptions>
+      <Form
+        id={formId}
+        layout="vertical"
+        initialValues={initialValues}
+        onFinish={onSubmit}
+      >
+        <Form.Item
+          label="Name"
+          name="name"
+          rules={[{ required: true, message: "Name is required" }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item label="Description" name="description">
+          <Input.TextArea />
+        </Form.Item>
+      </Form>
+    </Flex>
+  );
+};
+
+export default CustomTaxonomyDetails;

clients/admin-ui/src/features/taxonomy/components/CustomTaxonomyEditDrawer.tsx

@@ -0,0 +1,81 @@
+import {
+  AntButton as Button,
+  AntFlex as Flex,
+  AntMessageInstance as MessageInstance,
+} from "fidesui";
+
+import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
+import { DetailsDrawer } from "~/features/data-discovery-and-detection/action-center/fields/DetailsDrawer";
+import { DetailsDrawerProps } from "~/features/data-discovery-and-detection/action-center/fields/DetailsDrawer/types";
+import CustomTaxonomyDetails from "~/features/taxonomy/components/CustomTaxonomyDetails";
+import { useUpdateCustomTaxonomyMutation } from "~/features/taxonomy/taxonomy.slice";
+import { TaxonomyResponse } from "~/types/api/models/TaxonomyResponse";
+import { TaxonomyUpdate } from "~/types/api/models/TaxonomyUpdate";
+
+interface CustomTaxonomyEditDrawerProps
+  extends Omit<DetailsDrawerProps, "itemKey"> {
+  taxonomy?: TaxonomyResponse | null;
+  onDelete: () => void;
+  messageApi: MessageInstance;
+}
+
+const FORM_ID = "custom-taxonomy-form";
+
+const CustomTaxonomyEditDrawer = ({
+  taxonomy,
+  onClose,
+  onDelete,
+  messageApi,
+  ...props
+}: CustomTaxonomyEditDrawerProps) => {
+  const [updateCustomTaxonomy, { isLoading: isUpdating }] =
+    useUpdateCustomTaxonomyMutation();
+
+  const handleUpdate = async (values: TaxonomyUpdate) => {
+    if (!taxonomy?.fides_key) {
+      messageApi.error("Taxonomy not found");
+      return;
+    }
+    const result = await updateCustomTaxonomy({
+      fides_key: taxonomy.fides_key,
+      ...values,
+    });
+    if (isErrorResult(result)) {
+      messageApi.error(getErrorMessage(result.error));
+      return;
+    }
+    messageApi.success("Taxonomy updated successfully");
+  };
+
+  return (
+    <DetailsDrawer
+      title={`Edit ${taxonomy?.name}`}
+      {...props}
+      itemKey=""
+      open={!!taxonomy}
+      onClose={onClose}
+      destroyOnHidden
+      footer={
+        <Flex justify="space-between" className="w-full">
+          <Button onClick={onDelete}>Delete</Button>
+          <Button
+            type="primary"
+            htmlType="submit"
+            form={FORM_ID}
+            loading={isUpdating}
+          >
+            Save
+          </Button>
+        </Flex>
+      }
+    >
+      <CustomTaxonomyDetails
+        taxonomy={taxonomy}
+        onSubmit={handleUpdate}
+        formId={FORM_ID}
+      />
+    </DetailsDrawer>
+  );
+};
+
+export default CustomTaxonomyEditDrawer;

clients/admin-ui/src/features/taxonomy/components/TaxonomyEditDrawer.tsx

@@ -33,7 +33,7 @@ interface TaxonomyEditDrawerProps {
   onClose: () => void;
 }
 
-const TaxonomyEditDrawer = ({
+const TaxonomyItemEditDrawer = ({
   taxonomyItem,
   taxonomyType,
   onClose: closeDrawer,
@@ -210,4 +210,4 @@ const TaxonomyEditDrawer = ({
     </>
   );
 };
-export default TaxonomyEditDrawer;
+export default TaxonomyItemEditDrawer;

clients/admin-ui/src/features/taxonomy/components/TaxonomyInteractiveTree.tsx

@@ -16,10 +16,7 @@ import {
 import palette from "fidesui/src/palette/palette.module.scss";
 import { useEffect, useMemo } from "react";
 
-import {
-  TAXONOMY_ROOT_NODE_ID,
-  taxonomyTypeToLabel,
-} from "~/features/taxonomy/constants";
+import { TAXONOMY_ROOT_NODE_ID } from "~/features/taxonomy/constants";
 import { TaxonomyTreeHoverProvider } from "~/features/taxonomy/context/TaxonomyTreeHoverContext";
 import useD3HierarchyLayout from "~/features/taxonomy/hooks/useD3HierarchyLayout";
 import { TaxonomyEntity } from "~/features/taxonomy/types";
@@ -36,12 +33,14 @@ interface TaxonomyInteractiveTreeProps {
   draftNewItem: Partial<TaxonomyEntity> | null;
   lastCreatedItemKey: string | null;
   resetLastCreatedItemKey: () => void;
+  onRootItemClick: (() => void) | null;
   onTaxonomyItemClick: (taxonomyItem: TaxonomyEntity) => void;
   onAddButtonClick: (taxonomyItem: TaxonomyEntity | undefined) => void;
   onCancelDraftItem: () => void;
   onSubmitDraftItem: (label: string) => void;
   userCanAddLabels: boolean;
   isCreating?: boolean;
+  rootNodeLabel?: string;
 }
 
 const TaxonomyInteractiveTree = ({
@@ -50,12 +49,14 @@ const TaxonomyInteractiveTree = ({
   draftNewItem,
   lastCreatedItemKey,
   resetLastCreatedItemKey,
+  onRootItemClick,
   onTaxonomyItemClick,
   onAddButtonClick,
   onCancelDraftItem,
   onSubmitDraftItem,
   userCanAddLabels,
   isCreating = false,
+  rootNodeLabel,
 }: TaxonomyInteractiveTreeProps) => {
   const { fitView } = useReactFlow();
 
@@ -72,19 +73,26 @@ const TaxonomyInteractiveTree = ({
       id: TAXONOMY_ROOT_NODE_ID,
       position: { x: 0, y: 0 },
       data: {
-        label: taxonomyTypeToLabel(taxonomyType),
+        label: rootNodeLabel || taxonomyType,
         taxonomyItem: {
           fides_key: TAXONOMY_ROOT_NODE_ID,
         },
         taxonomyType,
-        onTaxonomyItemClick: null,
+        onTaxonomyItemClick: onRootItemClick,
         onAddButtonClick,
         hasChildren: taxonomyItems.length !== 0,
         userCanAddLabels,
       },
       type: "taxonomyTreeNode",
     }),
-    [taxonomyType, taxonomyItems.length, onAddButtonClick, userCanAddLabels],
+    [
+      rootNodeLabel,
+      taxonomyType,
+      onRootItemClick,
+      onAddButtonClick,
+      taxonomyItems.length,
+      userCanAddLabels,
+    ],
   );
 
   const nodes: Node[] = [rootNode];

clients/admin-ui/src/features/taxonomy/taxonomy.slice.ts

@@ -1,14 +1,14 @@
 import { baseApi } from "~/features/common/api.slice";
+import { TaxonomyCreate } from "~/types/api/models/TaxonomyCreate";
+import { TaxonomyResponse } from "~/types/api/models/TaxonomyResponse";
+import { TaxonomyUpdate } from "~/types/api/models/TaxonomyUpdate";
 
 import { TaxonomyEntity } from "./types";
 
 type TaxonomySummary = { fides_key: string; name: string };
 
 const taxonomyApi = baseApi.injectEndpoints({
   endpoints: (build) => ({
-    getCustomTaxonomies: build.query<TaxonomySummary[], void>({
-      query: () => ({ url: `taxonomies` }),
-    }),
     getTaxonomy: build.query<TaxonomyEntity[], string>({
       query: (taxonomyType) => ({ url: `taxonomies/${taxonomyType}/elements` }),
       providesTags: (result, error, taxonomyType) => [
@@ -47,6 +47,10 @@ const taxonomyApi = baseApi.injectEndpoints({
         return result;
       },
     }),
+    getCustomTaxonomies: build.query<TaxonomySummary[], void>({
+      query: () => ({ url: `taxonomies` }),
+      providesTags: () => [{ type: "Taxonomy" }],
+    }),
     createTaxonomy: build.mutation<
       TaxonomyEntity,
       { taxonomyType: string } & Partial<TaxonomyEntity>
@@ -86,6 +90,32 @@ const taxonomyApi = baseApi.injectEndpoints({
         { type: "Taxonomy", id: taxonomyType },
       ],
     }),
+    createCustomTaxonomy: build.mutation<TaxonomyResponse, TaxonomyCreate>({
+      query: (body) => ({
+        url: `taxonomies`,
+        method: "POST",
+        body,
+      }),
+      invalidatesTags: () => [{ type: "Taxonomy" }],
+    }),
+    updateCustomTaxonomy: build.mutation<
+      TaxonomyResponse,
+      TaxonomyUpdate & { fides_key: string }
+    >({
+      query: ({ fides_key, ...body }) => ({
+        url: `taxonomies/${fides_key}`,
+        method: "PUT",
+        body,
+      }),
+      invalidatesTags: () => [{ type: "Taxonomy" }],
+    }),
+    deleteCustomTaxonomy: build.mutation<void, string>({
+      query: (fides_key) => ({
+        url: `taxonomies/${fides_key}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: () => [{ type: "Taxonomy" }],
+    }),
   }),
 });
 
@@ -95,4 +125,7 @@ export const {
   useCreateTaxonomyMutation,
   useUpdateTaxonomyMutation,
   useDeleteTaxonomyMutation,
+  useCreateCustomTaxonomyMutation,
+  useUpdateCustomTaxonomyMutation,
+  useDeleteCustomTaxonomyMutation,
 } = taxonomyApi;