Implement adding/editing data uses on infrastructure monitor results (#7210)

Author: lucanovera

changelog/edit-data-uses-on-infra-monitor.yaml

@@ -0,0 +1,4 @@
+type: Added # One of: Added, Changed, Developer Experience, Deprecated, Docs, Fixed, Removed, Security
+description: Allow editing data uses on infrastructure monitor results
+pr: 7210 # PR number
+labels: [] # Optional: ["high-risk", "db-migration"]

clients/admin-ui/src/features/data-discovery-and-detection/action-center/components/InfrastructureClassificationSelect.tsx

@@ -9,24 +9,22 @@ import {
 import useTaxonomies from "~/features/common/hooks/useTaxonomies";
 
 const InfrastructureClassificationSelect = ({
-  onSelectDataCategory,
+  onSelectDataUse,
   urn,
   ...props
 }: {
-  onSelectDataCategory: (value: string) => void;
+  onSelectDataUse: (value: string) => void;
   urn?: string;
 } & TaxonomySelectProps) => {
   const { getDataUseDisplayNameProps, getDataUses } = useTaxonomies();
   const dataUses = getDataUses().filter((use) => use.active);
   const [open, setOpen] = useState(false);
 
-  const options: TaxonomySelectOption[] = dataUses.map((dataCategory) => {
-    const { name, primaryName } = getDataUseDisplayNameProps(
-      dataCategory.fides_key,
-    );
+  const options: TaxonomySelectOption[] = dataUses.map((dataUse) => {
+    const { name, primaryName } = getDataUseDisplayNameProps(dataUse.fides_key);
 
     return {
-      value: dataCategory.fides_key,
+      value: dataUse.fides_key,
       label: (
         <div>
           <strong>{primaryName || name}</strong>
@@ -35,15 +33,15 @@ const InfrastructureClassificationSelect = ({
       ),
       name,
       primaryName,
-      description: dataCategory.description || "",
+      description: dataUse.description || "",
     };
   });
   return (
     <TaxonomySelect
       options={options}
       prefix={
         <Button
-          aria-label="Add Data Category"
+          aria-label="Add data use"
           type="text"
           size="small"
           icon={<Icons.Add />}
@@ -66,7 +64,7 @@ const InfrastructureClassificationSelect = ({
       open={open}
       onOpenChange={(visible) => setOpen(visible)}
       onSelect={(value) => {
-        onSelectDataCategory(value);
+        onSelectDataUse(value);
         setOpen(false);
       }}
       data-classification-select={urn}

clients/admin-ui/src/features/data-discovery-and-detection/action-center/components/InfrastructureSystemListItem.tsx

@@ -13,7 +13,7 @@ import {
 import { useMemo } from "react";
 
 import { getBrandIconUrl, getDomain } from "~/features/common/utils";
-import { IdentityProviderApplicationMetadata } from "~/types/api/models/IdentityProviderApplicationMetadata";
+import { StagedResourceAPIResponse } from "~/types/api";
 
 import { ActionCenterTabHash } from "../hooks/useActionCenterTabs";
 import InfrastructureClassificationSelect from "./InfrastructureClassificationSelect";
@@ -53,29 +53,17 @@ const tagRender: TagRender = (props) => {
 };
 
 interface InfrastructureSystemListItemProps {
-  item: {
-    id?: string | null;
-    urn?: string;
-    name?: string | null;
-    system_key?: string | null;
-    vendor_id?: string | null;
-    metadata?: IdentityProviderApplicationMetadata | null;
-    diff_status?: string | null;
-    data_uses?: string[];
-    description?: string | null;
-    preferred_data_categories?: string[] | null;
-    classifications?: Array<{ label: string }> | null;
-  };
+  item: StagedResourceAPIResponse;
   selected?: boolean;
   onSelect?: (key: string, selected: boolean) => void;
   onNavigate?: (url: string) => void;
-  rowClickUrl?: (item: InfrastructureSystemListItemProps["item"]) => string;
+  rowClickUrl?: (item: StagedResourceAPIResponse) => string;
   monitorId: string;
   activeTab?: ActionCenterTabHash | null;
   allowIgnore?: boolean;
-  onSetDataCategories?: (urn: string, dataCategories: string[]) => void;
-  onSelectDataCategory?: (value: string) => void;
-  dataCategoriesDisabled?: boolean;
+  onSetDataUses?: (urn: string, dataUses: string[]) => void;
+  onSelectDataUse?: (value: string) => void;
+  dataUsesDisabled?: boolean;
   onPromoteSuccess?: () => void;
 }
 
@@ -88,12 +76,12 @@ export const InfrastructureSystemListItem = ({
   monitorId,
   activeTab,
   allowIgnore,
-  onSetDataCategories,
-  onSelectDataCategory,
-  dataCategoriesDisabled,
+  onSetDataUses,
+  onSelectDataUse,
+  dataUsesDisabled,
   onPromoteSuccess,
 }: InfrastructureSystemListItemProps) => {
-  const itemKey = item.urn ?? item.id ?? "";
+  const itemKey = item.urn;
   const url = rowClickUrl?.(item);
   const { metadata } = item;
   const systemName = item.name ?? "Uncategorized";
@@ -135,14 +123,14 @@ export const InfrastructureSystemListItem = ({
     }
   };
 
-  // Handle data category selection
-  const handleSelectDataCategory = (value: string) => {
-    if (onSelectDataCategory) {
-      onSelectDataCategory(value);
-    } else if (onSetDataCategories && itemKey) {
-      const currentCategories = item.preferred_data_categories ?? [];
-      if (!currentCategories.includes(value)) {
-        onSetDataCategories(itemKey, [...currentCategories, value]);
+  // Handle data use selection
+  const handleSelectDataUse = (value: string) => {
+    if (onSelectDataUse) {
+      onSelectDataUse(value);
+    } else if (onSetDataUses && itemKey) {
+      const currentDataUses = item.preferred_data_uses ?? [];
+      if (!currentDataUses.includes(value)) {
+        onSetDataUses(itemKey, [...currentDataUses, value]);
       }
     }
   };
@@ -190,31 +178,33 @@ export const InfrastructureSystemListItem = ({
         description={
           <InfrastructureClassificationSelect
             mode="multiple"
-            value={item.preferred_data_categories ?? []}
+            value={item.preferred_data_uses ?? []}
             urn={itemKey}
             tagRender={(props) => {
-              const isFromClassifier = !!item.classifications?.find(
-                (classification) => classification.label === props.value,
+              // Show sparkle icon if the data use was auto-detected (in data_uses)
+              // and not manually assigned (not in user_assigned_data_uses)
+              const isAutoDetectedFromCompass = item.data_uses?.includes(
+                props.value as string,
               );
 
               const handleClose = () => {
-                if (onSetDataCategories && itemKey) {
-                  const newDataCategories =
-                    item.preferred_data_categories?.filter(
-                      (category) => category !== props.value,
+                if (onSetDataUses && itemKey) {
+                  const newDataUses =
+                    item.preferred_data_uses?.filter(
+                      (dataUse) => dataUse !== props.value,
                     ) ?? [];
-                  onSetDataCategories(itemKey, newDataCategories);
+                  onSetDataUses(itemKey, newDataUses);
                 }
               };
 
               return tagRender({
                 ...props,
-                isFromClassifier,
+                isFromClassifier: isAutoDetectedFromCompass,
                 onClose: handleClose,
               });
             }}
-            onSelectDataCategory={handleSelectDataCategory}
-            disabled={dataCategoriesDisabled}
+            onSelectDataUse={handleSelectDataUse}
+            disabled={dataUsesDisabled}
           />
         }
       />

clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useDiscoveredInfrastructureSystemsTable.tsx

@@ -6,10 +6,7 @@ import {
   UNCATEGORIZED_SEGMENT,
 } from "~/features/common/nav/routes";
 import { useAntPagination } from "~/features/common/pagination/useAntPagination";
-import {
-  StagedResourceAPIResponse,
-  SystemStagedResourcesAggregateRecord,
-} from "~/types/api";
+import { StagedResourceAPIResponse } from "~/types/api";
 import { DiffStatus } from "~/types/api/models/DiffStatus";
 
 import { useGetIdentityProviderMonitorResultsQuery } from "../../discovery-detection.slice";
@@ -29,12 +26,6 @@ interface UseDiscoveredInfrastructureSystemsTableConfig {
   vendorFilters?: string[] | null;
 }
 
-// Extended type to include diff_status for list items
-type InfrastructureSystemListItem = SystemStagedResourcesAggregateRecord & {
-  diff_status?: string | null;
-  urn?: string;
-};
-
 export const useDiscoveredInfrastructureSystemsTable = ({
   monitorId,
   statusFilters,
@@ -139,40 +130,13 @@ export const useDiscoveredInfrastructureSystemsTable = ({
     refetch: refetchOktaData,
   } = oktaDataQuery;
 
-  // Transform API data to table format
-  // Vendor filters are now applied server-side via the vendor_id query parameter
-  const transformedData = useMemo((): {
-    items: InfrastructureSystemListItem[];
-    total: number;
-  } => {
-    if (!oktaData?.items) {
-      return { items: [], total: 0 };
-    }
-
-    const items: InfrastructureSystemListItem[] = oktaData.items.map(
-      (item: StagedResourceAPIResponse): InfrastructureSystemListItem => {
-        return {
-          id: item.urn,
-          urn: item.urn,
-          name: item.name ?? null,
-          system_key: item.system_key ?? null,
-          data_uses: item.data_uses ?? [],
-          vendor_id: item.vendor_id ?? null,
-          total_updates: 1,
-          locations: item.locations ?? [],
-          domains: item.domain ? [item.domain] : [],
-          consent_status: null,
-          metadata: item.metadata ?? null,
-          diff_status: item.diff_status ?? null,
-        };
-      },
-    );
-
-    return {
-      items,
-      total: oktaData.total ?? 0,
-    };
-  }, [oktaData]);
+  const data = useMemo(
+    () => ({
+      items: oktaData?.items ?? [],
+      total: oktaData?.total ?? 0,
+    }),
+    [oktaData],
+  );
 
   const handleTabChange = useCallback(
     async (tab: string | ActionCenterTabHash) => {
@@ -185,8 +149,8 @@ export const useDiscoveredInfrastructureSystemsTable = ({
   );
 
   const rowClickUrl = useCallback(
-    (record: InfrastructureSystemListItem) => {
-      const recordId = record.urn ?? record.id ?? UNCATEGORIZED_SEGMENT;
+    (record: StagedResourceAPIResponse) => {
+      const recordId = record.urn ?? UNCATEGORIZED_SEGMENT;
       const activeTabHash = activeTab ? `#${activeTab}` : "";
       return `${ACTION_CENTER_ROUTE}/${MONITOR_TYPES.INFRASTRUCTURE}/${monitorId}/${recordId}${activeTabHash}`;
     },
@@ -195,7 +159,7 @@ export const useDiscoveredInfrastructureSystemsTable = ({
 
   return {
     // Data
-    data: transformedData,
+    data,
     isLoading: oktaIsLoading,
     isFetching: oktaIsFetching,
     refetch: refetchOktaData,
@@ -218,12 +182,8 @@ export const useDiscoveredInfrastructureSystemsTable = ({
 
     // Selection helpers
     getRecordKey: useCallback(
-      (record: InfrastructureSystemListItem) =>
-        record.urn ??
-        record.id ??
-        record.vendor_id ??
-        record.name ??
-        UNCATEGORIZED_SEGMENT,
+      (record: StagedResourceAPIResponse) =>
+        record.urn ?? record.vendor_id ?? record.name ?? UNCATEGORIZED_SEGMENT,
       [],
     ),
   };

clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useInfrastructureSystemsBulkActions.tsx

@@ -3,7 +3,7 @@ import { useCallback } from "react";
 
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
 import { errorToastParams, successToastParams } from "~/features/common/toast";
-import { SystemStagedResourcesAggregateRecord } from "~/types/api";
+import { StagedResourceAPIResponse } from "~/types/api";
 
 import {
   useBulkMuteIdentityProviderMonitorResultsMutation,
@@ -12,13 +12,9 @@ import {
 } from "../../discovery-detection.slice";
 import { InfrastructureSystemBulkActionType } from "../constants";
 
-type InfrastructureSystemWithUrn = SystemStagedResourcesAggregateRecord & {
-  urn?: string | null;
-};
-
 interface UseInfrastructureSystemsBulkActionsConfig {
   monitorId: string;
-  getRecordKey: (item: SystemStagedResourcesAggregateRecord) => string;
+  getRecordKey: (item: StagedResourceAPIResponse) => string;
   onSuccess?: () => void;
 }
 
@@ -49,12 +45,10 @@ export const useInfrastructureSystemsBulkActions = ({
   const handleBulkAction = useCallback(
     async (
       action: InfrastructureSystemBulkActionType,
-      selectedItems: InfrastructureSystemWithUrn[],
+      selectedItems: StagedResourceAPIResponse[],
     ) => {
       // Extract URNs from selected items
-      const urns = selectedItems
-        .map((item) => item.urn)
-        .filter((urn): urn is string => !!urn);
+      const urns = selectedItems.map((item) => item.urn);
 
       if (urns.length === 0) {
         toast(

clients/admin-ui/src/features/data-discovery-and-detection/action-center/hooks/useInfrastructureSystemsSelection.tsx

@@ -1,16 +1,16 @@
 import { useCallback, useMemo, useState } from "react";
 
-import { SystemStagedResourcesAggregateRecord } from "~/types/api";
+import { StagedResourceAPIResponse } from "~/types/api";
 
 interface UseInfrastructureSystemsSelectionConfig<
-  T extends SystemStagedResourcesAggregateRecord,
+  T extends StagedResourceAPIResponse,
 > {
   items: T[] | undefined;
   getRecordKey: (item: T) => string;
 }
 
 export const useInfrastructureSystemsSelection = <
-  T extends SystemStagedResourcesAggregateRecord,
+  T extends StagedResourceAPIResponse,
 >({
   items,
   getRecordKey,

clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/DiscoveredInfrastructureSystemsTable.tsx

@@ -15,6 +15,7 @@ import {
 import { useCallback, useMemo } from "react";
 
 import { DebouncedSearchInput } from "~/features/common/DebouncedSearchInput";
+import { useUpdateInfrastructureSystemDataUsesMutation } from "~/features/data-discovery-and-detection/discovery-detection.slice";
 
 import { useGetMonitorConfigQuery } from "../action-center.slice";
 import { InfrastructureSystemListItem } from "../components/InfrastructureSystemListItem";
@@ -64,6 +65,18 @@ export const DiscoveredInfrastructureSystemsTable = ({
     monitor_config_id: monitorId,
   });
 
+  const [updateInfrastructureSystemDataUses] =
+    useUpdateInfrastructureSystemDataUsesMutation();
+
+  const handleSetDataUses = async (urn: string, dataUses: string[]) => {
+    await updateInfrastructureSystemDataUses({
+      monitorId,
+      urn,
+      dataUses,
+    });
+    refetch();
+  };
+
   const {
     selectedItems,
     hasSelectedRows,
@@ -212,6 +225,7 @@ export const DiscoveredInfrastructureSystemsTable = ({
               activeTab={activeTab as ActionCenterTabHash | null}
               allowIgnore={allowIgnore}
               onPromoteSuccess={refetch}
+              onSetDataUses={handleSetDataUses}
             />
           )}
         />