fix: bulk select normalization

CHANGELOG.md

@@ -24,6 +24,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 ### Added
 - Enabled data stewards field with searchable multiselect in system information form [#6993](https://github.com/ethyca/fides/pull/6993)
 - Support for confidence level visual and filtering in action center [#7040](https://github.com/ethyca/fides/pull/7040)
+- Adding data normalization to action center fields [#7022](https://github.com/ethyca/fides/pull/7022)
 
 ### Changed
 - Updated External User Welcome email to use editable template [#7030](https://github.com/ethyca/fides/pull/7030)

clients/admin-ui/src/features/common/hooks/useNodeMap.test.ts

@@ -0,0 +1,173 @@
+import { act, renderHook } from "@testing-library/react";
+
+import useNodeMap, { mapNodes, Node, NodeMap } from "./useNodeMap";
+
+describe("Normalized Data Hook", () => {
+  it("returns empty array when no data provided", () => {
+    const { result } = renderHook(() => useNodeMap());
+    const { nodes } = result.current;
+    expect([...nodes.values()]).toStrictEqual([]);
+  });
+
+  it("adds new data nodes to state when updated", () => {
+    const INITIAL_DATA = [{ key: 1, title: "first" }];
+    const NEXT_DATA = [{ key: 2, title: "second" }];
+    const { result } = renderHook((props) => useNodeMap(props), {
+      initialProps: mapNodes(INITIAL_DATA),
+    });
+    const { nodes, update } = result.current;
+
+    expect([...nodes.values()]).toStrictEqual(INITIAL_DATA);
+
+    act(() => update(mapNodes(NEXT_DATA)));
+
+    expect([...result.current.nodes.values()]).toStrictEqual([
+      ...INITIAL_DATA,
+      ...NEXT_DATA,
+    ]);
+  });
+
+  it("updates existing nodes", () => {
+    const INITIAL_DATA = [
+      { key: 1, title: "first" },
+      { key: 2, title: "second" },
+    ];
+    const NEXT_DATA = [
+      { key: 1, title: "changed" },
+      { key: 3, title: "third" },
+    ];
+    const { result } = renderHook((props) => useNodeMap(props), {
+      initialProps: mapNodes(INITIAL_DATA),
+    });
+    const { nodes, update } = result.current;
+
+    expect([...nodes.values()]).toStrictEqual(INITIAL_DATA);
+
+    act(() => update(mapNodes(NEXT_DATA)));
+
+    expect([...result.current.nodes.values()]).toStrictEqual([
+      { key: 1, title: "changed" },
+      { key: 2, title: "second" },
+      { key: 3, title: "third" },
+    ]);
+  });
+
+  it("partially updates an existing node", () => {
+    type TestNode = Node<{
+      title?: string;
+      subtitle?: string;
+      list?: string[];
+    }>;
+    const INITIAL_DATA: TestNode[] = [
+      { key: 1, title: "first", list: [] },
+      { key: 2, title: "second", list: ["a", "b"] },
+    ];
+    const NEXT_DATA = mapNodes([
+      { key: 1, subtitle: "changed", list: ["a", "b"] },
+    ]);
+    const { result } = renderHook((props) => useNodeMap(props), {
+      initialProps: mapNodes(INITIAL_DATA),
+    });
+    const { nodes, update } = result.current;
+
+    expect([...nodes.values()]).toStrictEqual(INITIAL_DATA);
+
+    act(() => update(NEXT_DATA));
+
+    expect([...result.current.nodes.values()]).toStrictEqual([
+      { key: 1, title: "first", subtitle: "changed", list: ["a", "b"] },
+      { key: 2, title: "second", list: ["a", "b"] },
+    ]);
+  });
+
+  it("partially updates an existing node via update function", () => {
+    type TestNode = Node<{
+      title?: string;
+      subtitle?: string;
+      list?: string[];
+    }>;
+    const INITIAL_DATA: TestNode[] = [
+      { key: 1, title: "first", list: [] },
+      { key: 2, title: "second", list: ["a", "b"] },
+    ];
+    const NEXT_DATA = mapNodes([
+      { key: 1, subtitle: "changed", list: ["a", "b"] },
+    ]);
+    const { result } = renderHook(() => useNodeMap());
+
+    const { update } = result.current;
+
+    act(() => update(mapNodes(INITIAL_DATA)));
+
+    expect([...result.current.nodes.values()]).toStrictEqual(INITIAL_DATA);
+
+    act(() => result.current.update(NEXT_DATA));
+
+    expect([...result.current.nodes.values()]).toStrictEqual([
+      { key: 1, title: "first", subtitle: "changed", list: ["a", "b"] },
+      { key: 2, title: "second", list: ["a", "b"] },
+    ]);
+  });
+
+  it("replaces existing node when partial updates are disabled", () => {
+    type TestNode = Node<{ title?: string; subtitle?: string }>;
+    const INITIAL_DATA: TestNode[] = [
+      { key: 1, title: "first" },
+      { key: 2, title: "second" },
+    ];
+    const NEXT_DATA = mapNodes([{ key: 1, subtitle: "changed" }]);
+    const { result } = renderHook((props) => useNodeMap(props, false), {
+      initialProps: mapNodes(INITIAL_DATA),
+    });
+    const { nodes, update } = result.current;
+
+    expect([...nodes.values()]).toStrictEqual(INITIAL_DATA);
+
+    act(() => update(NEXT_DATA));
+
+    expect([...result.current.nodes.values()]).toStrictEqual([
+      { key: 1, subtitle: "changed" },
+      { key: 2, title: "second" },
+    ]);
+  });
+
+  it.skip("removes node value when explicitly removed", () => {
+    type TestNodes = NodeMap<{ title?: string; subtitle?: string }>;
+    const INITIAL_DATA: TestNodes = mapNodes([
+      { key: 1, title: "first", subtitle: "ghost" },
+      { key: 2, title: "second" },
+    ]);
+    const NEXT_DATA = mapNodes([{ key: 1, subtitle: undefined }]);
+
+    const { result } = renderHook((props) => useNodeMap(props), {
+      initialProps: INITIAL_DATA,
+    });
+    const { nodes, update } = result.current;
+
+    expect([...nodes.values()]).toStrictEqual(INITIAL_DATA);
+
+    act(() => update(NEXT_DATA));
+
+    expect([...result.current.nodes.values()]).toStrictEqual([
+      { key: 1, title: "first" },
+      { key: 2, title: "second" },
+    ]);
+  });
+
+  it("resetting all nodes", () => {
+    const INITIAL_DATA = [
+      { key: 1, title: "first" },
+      { key: 2, title: "second" },
+    ];
+    const { result } = renderHook((props) => useNodeMap(props), {
+      initialProps: mapNodes(INITIAL_DATA),
+    });
+    const { nodes, reset } = result.current;
+
+    expect([...nodes.values()]).toStrictEqual(INITIAL_DATA);
+
+    act(() => reset());
+
+    expect([...result.current.nodes.values()]).toStrictEqual([]);
+  });
+});

clients/admin-ui/src/features/common/hooks/useNodeMap.ts

@@ -0,0 +1,48 @@
+import _ from "lodash";
+import { Key, useState } from "react";
+
+/** Note: should be adding __type and optional relational types in future iterations */
+export type Node<T> = T & {
+  key: Key;
+};
+
+export type NodeMap<N> = Map<Key, Node<N>>;
+
+export const mapNodes = <Data>(data: Node<Data>[]): NodeMap<Data> =>
+  new Map(data.map((d) => [d.key, d]));
+
+const mergeNodes = <Data>(prev: NodeMap<Data>, next: NodeMap<Data>) =>
+  _([...next.entries()])
+    .map(([key, node]) =>
+      _.chain(prev.get(key)).defaultTo(node).merge(node).value(),
+    )
+    .thru(mapNodes)
+    .value();
+
+const useNodeMap = <Data>(
+  initialData?: NodeMap<Data>,
+  partialUpdates = true,
+) => {
+  const [nodes, setNodeMapState] = useState<NodeMap<Data>>(
+    initialData ?? new Map(),
+  );
+
+  const update = (next: NodeMap<Data>) => {
+    const nextDraft = partialUpdates ? mergeNodes(nodes, next) : next;
+    const hasChanges = _([...nextDraft.entries()]).some(
+      ([key, node]) => !_.isEqual(nodes.get(key), node),
+    );
+
+    if (hasChanges) {
+      setNodeMapState((prev) => new Map([...prev, ...nextDraft]));
+    }
+  };
+
+  const reset = () => {
+    setNodeMapState(new Map());
+  };
+
+  return { nodes, update, reset };
+};
+
+export default useNodeMap;

clients/admin-ui/src/features/data-discovery-and-detection/action-center/action-center.slice.ts

@@ -388,12 +388,12 @@ const actionCenterApi = baseApi.injectEndpoints({
     }),
     getStagedResourceDetails: build.query<
       MonitorResource,
-      { stagedResourceUrn: string }
+      { stagedResourceUrn?: string }
     >({
       query: ({ stagedResourceUrn }) => ({
-        url: `/plus/discovery-monitor/staged_resource/${encodeURIComponent(
-          stagedResourceUrn,
-        )}`,
+        url: `/plus/discovery-monitor/staged_resource/${
+          stagedResourceUrn ? encodeURIComponent(stagedResourceUrn) : ""
+        }`,
       }),
       providesTags: ["Monitor Field Details"],
     }),

clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorFieldListItem.tsx

@@ -16,7 +16,6 @@ import _ from "lodash";
 
 import { SeverityGauge } from "~/features/common/progress/SeverityGauge";
 import { DiffStatus } from "~/types/api";
-import { Page_DatastoreStagedResourceAPIResponse_ } from "~/types/api/models/Page_DatastoreStagedResourceAPIResponse_";
 
 import {
   parseResourceBreadcrumbs,
@@ -25,6 +24,7 @@ import {
 import ClassificationSelect from "./ClassificationSelect";
 import styles from "./MonitorFieldListItem.module.scss";
 import { MAP_DIFF_STATUS_TO_RESOURCE_STATUS_LABEL } from "./MonitorFields.const";
+import { MonitorResource } from "./types";
 import { getMaxSeverity, mapConfidenceBucketToSeverity } from "./utils";
 
 type TagRenderParams = Parameters<NonNullable<SelectProps["tagRender"]>>[0];
@@ -61,9 +61,7 @@ export const tagRender: TagRender = (props) => {
   );
 };
 
-type ListRenderItem = ListProps<
-  Page_DatastoreStagedResourceAPIResponse_["items"][number]
->["renderItem"];
+type ListRenderItem = ListProps<MonitorResource>["renderItem"];
 
 type MonitorFieldListItemRenderParams = Parameters<
   NonNullable<ListRenderItem>
@@ -97,20 +95,25 @@ const renderBreadcrumbItem = (breadcrumb: UrnBreadcrumbItem) => {
 
 const renderMonitorFieldListItem: RenderMonitorFieldListItem = ({
   urn,
-  classifications,
   name,
   diff_status,
   selected,
   onSelect,
   onSetDataCategories,
   dataCategoriesDisabled,
   onNavigate,
-  preferred_data_categories,
   actions,
+  classifications,
+  ...restProps
 }) => {
+  const preferredDataCategories =
+    "preferred_data_categories" in restProps
+      ? restProps.preferred_data_categories
+      : [];
+
   const onSelectDataCategory = (value: string) => {
-    if (!preferred_data_categories?.includes(value)) {
-      onSetDataCategories(urn, [...(preferred_data_categories ?? []), value]);
+    if (!preferredDataCategories?.includes(value)) {
+      onSetDataCategories(urn, [...(preferredDataCategories ?? []), value]);
     }
   };
 
@@ -187,7 +190,7 @@ const renderMonitorFieldListItem: RenderMonitorFieldListItem = ({
         description={
           <ClassificationSelect
             mode="multiple"
-            value={preferred_data_categories ?? []}
+            value={preferredDataCategories ?? []}
             urn={urn}
             tagRender={(props) => {
               const isFromClassifier = !!classifications?.find(
@@ -196,7 +199,7 @@ const renderMonitorFieldListItem: RenderMonitorFieldListItem = ({
 
               const handleClose = () => {
                 const newDataCategories =
-                  preferred_data_categories?.filter(
+                  preferredDataCategories?.filter(
                     (category) => category !== props.value,
                   ) ?? [];
                 onSetDataCategories(urn, newDataCategories);

clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/ResourceDetailsDrawer.tsx

@@ -76,7 +76,8 @@ export const ResourceDetailsDrawer = ({
                       {
                         key: "system",
                         label: "System",
-                        children: resource.system_key,
+                        children:
+                          "system_key" in resource && resource.system_key,
                       },
                       {
                         key: "path",