feat: data steward monitor config [ENG-2267] (#7217)

Author: speaker-ender

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

@@ -8,7 +8,6 @@ import {
   ConsentStatus,
   DiffStatus,
   MonitorConfig,
-  MonitorTaskInProgressResponse,
   Page_ConsentBreakdown_,
   Page_StagedResourceAPIResponse_,
   Page_SystemStagedResourcesAggregateRecord_,
@@ -23,6 +22,7 @@ import { DatastoreMonitorResourcesDynamicFilters } from "~/types/api/models/Data
 import { DatastoreStagedResourceTreeAPIResponse } from "~/types/api/models/DatastoreStagedResourceTreeAPIResponse";
 import { ExecutionLogStatus } from "~/types/api/models/ExecutionLogStatus";
 import { MonitorActionResponse } from "~/types/api/models/MonitorActionResponse";
+import { MonitorTaskInProgressResponse } from "~/types/api/models/MonitorTaskInProgressResponse";
 import { Page_DatastoreStagedResourceTreeAPIResponse_ } from "~/types/api/models/Page_DatastoreStagedResourceTreeAPIResponse_";
 import {
   PaginatedResponse,

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

@@ -5,6 +5,7 @@ import type { RootState } from "~/app/store";
 import { baseApi } from "~/features/common/api.slice";
 import {
   DiffStatus,
+  EditableMonitorConfig,
   MonitorConfig,
   MonitorFrequency,
   Page_MonitorStatusResponse_,
@@ -116,7 +117,7 @@ const discoveryDetectionApi = baseApi.injectEndpoints({
       }),
       providesTags: ["Discovery Monitor Configs"],
     }),
-    putDiscoveryMonitor: build.mutation<MonitorConfig, MonitorConfig>({
+    putDiscoveryMonitor: build.mutation<MonitorConfig, EditableMonitorConfig>({
       query: (body) => ({
         method: "PUT",
         url: `/plus/discovery-monitor`,

clients/admin-ui/src/features/integrations/configure-monitor/ConfigureMonitorDatabasesForm.tsx

@@ -12,7 +12,7 @@ import { InfoTooltip } from "~/features/common/InfoTooltip";
 import { DEFAULT_TOAST_PARAMS } from "~/features/common/toast";
 import MonitorDatabasePicker from "~/features/integrations/configure-monitor/MonitorDatabasePicker";
 import useCumulativeGetDatabases from "~/features/integrations/configure-monitor/useCumulativeGetDatabases";
-import { MonitorConfig } from "~/types/api";
+import { EditableMonitorConfig } from "~/types/api";
 
 const TOOLTIP_COPY =
   "Selecting a project will monitor all current and future datasets within that project.";
@@ -27,11 +27,11 @@ const ConfigureMonitorDatabasesForm = ({
   onSubmit,
   onClose,
 }: {
-  monitor: MonitorConfig;
+  monitor: EditableMonitorConfig;
   isEditing?: boolean;
   isSubmitting?: boolean;
   integrationKey: string;
-  onSubmit: (monitor: MonitorConfig) => void;
+  onSubmit: (monitor: EditableMonitorConfig) => void;
   onClose: () => void;
 }) => {
   const toast = useToast();

clients/admin-ui/src/features/integrations/configure-monitor/ConfigureMonitorForm.tsx

@@ -1,3 +1,4 @@
+import { skipToken } from "@reduxjs/toolkit/query";
 import type { Dayjs } from "dayjs";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
@@ -8,12 +9,13 @@ import { useEffect, useState } from "react";
 import { useFeatures } from "~/features/common/features/features.slice";
 import { enumToOptions } from "~/features/common/helpers";
 import { useGetConfigurationSettingsQuery } from "~/features/config-settings/config-settings.slice";
+import { useGetSystemByFidesKeyQuery } from "~/features/system";
+import { useGetAllUsersQuery } from "~/features/user-management";
 import {
   ClassifyLlmPromptTemplateOptions,
   ConnectionSystemTypeMap,
   ConnectionType,
   EditableMonitorConfig,
-  MonitorConfig,
   MonitorFrequency,
 } from "~/types/api";
 
@@ -31,6 +33,7 @@ interface MonitorConfigFormValues {
   llm_model_override?: string;
   prompt_template?: ClassifyLlmPromptTemplateOptions;
   content_classification_enabled?: boolean;
+  stewards?: string[];
 }
 
 const DEFAULT_CLASSIFIER_PARAMS = {
@@ -40,7 +43,7 @@ const DEFAULT_CLASSIFIER_PARAMS = {
 
 const getClassifyParams = (
   isEditing: boolean,
-  monitor: MonitorConfig | undefined,
+  monitor: EditableMonitorConfig | undefined,
   values: MonitorConfigFormValues,
 ) => {
   const baseParams = isEditing
@@ -75,19 +78,21 @@ const getClassifyParams = (
 const ConfigureMonitorForm = ({
   monitor,
   integrationOption,
+  integrationSystem,
   isSubmitting,
   databasesAvailable,
   onClose,
   onAdvance,
   onSubmit,
 }: {
-  monitor?: MonitorConfig;
+  monitor?: EditableMonitorConfig;
   integrationOption: ConnectionSystemTypeMap;
+  integrationSystem?: string | null;
   isSubmitting?: boolean;
   databasesAvailable?: boolean;
   onClose: () => void;
-  onAdvance: (monitor: MonitorConfig) => void;
-  onSubmit: (monitor: MonitorConfig) => void;
+  onAdvance: (monitor: EditableMonitorConfig) => void;
+  onSubmit: (monitor: EditableMonitorConfig) => void;
 }) => {
   const isEditing = !!monitor;
   const { flags } = useFeatures();
@@ -106,6 +111,10 @@ const ConfigureMonitorForm = ({
     { skip: !llmClassifierFeatureEnabled },
   );
 
+  const [form] = Form.useForm<MonitorConfigFormValues>();
+  const { data: systemData, isLoading: isLoadingSystem } =
+    useGetSystemByFidesKeyQuery(integrationSystem || skipToken);
+
   /**
    * Server-side LLM classifier capability.
    * This determines if the backend supports LLM-based classification for monitors.
@@ -133,21 +142,22 @@ const ConfigureMonitorForm = ({
           };
 
     const classifyParams = getClassifyParams(isEditing, monitor, values);
-
     const payload: EditableMonitorConfig = isEditing
       ? {
           ...monitor,
           ...executionInfo,
           name: values.name,
           shared_config_id: values.shared_config_id,
           classify_params: classifyParams,
+          stewards: values.stewards,
         }
       : {
           ...executionInfo,
           name: values.name,
           shared_config_id: values.shared_config_id,
           connection_config_key: integrationId!,
           classify_params: classifyParams,
+          stewards: values.stewards,
         };
 
     if (integrationOption.identifier === ConnectionType.DYNAMODB) {
@@ -169,10 +179,27 @@ const ConfigureMonitorForm = ({
   const monitorUsesLlmClassifier =
     monitor?.classify_params?.context_classifier === "llm";
 
-  const [form] = Form.useForm<MonitorConfigFormValues>();
   const [submittable, setSubmittable] = useState(false);
   const formValues = Form.useWatch([], form);
 
+  const { data: eligibleUsersData } = useGetAllUsersQuery({
+    page: 1,
+    size: 100,
+    include_external: false,
+    exclude_approvers: true,
+  });
+
+  const dataStewardOptions = (eligibleUsersData?.items || []).map((user) => ({
+    label: user.username,
+    value: user.id,
+  }));
+
+  // TODO: build better pattern for async form initialization
+  useEffect(() => {
+    form.resetFields();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoadingSystem]);
+
   useEffect(() => {
     form
       .validateFields({ validateOnly: true })
@@ -196,6 +223,8 @@ const ConfigureMonitorForm = ({
     content_classification_enabled: !monitorUsesLlmClassifier
       ? monitor?.classify_params?.content_classification_enabled
       : undefined, // for now, content classification is always disabled for LLM classification
+    stewards:
+      monitor?.stewards || systemData?.data_stewards?.map(({ id }) => id),
   } as const;
 
   return (
@@ -206,6 +235,7 @@ const ConfigureMonitorForm = ({
       layout="vertical"
       validateTrigger="onChange"
       initialValues={initialValues}
+      disabled={isLoadingSystem} // TODO: establish better pattern and styles for async form initialization
     >
       <Form.Item
         label="Name"
@@ -214,13 +244,21 @@ const ConfigureMonitorForm = ({
       >
         <Input data-testid="input-name" />
       </Form.Item>
+      <Form.Item label="Stewards" name="stewards">
+        <Select
+          mode="multiple"
+          aria-label="Select stewards"
+          data-testid="controlled-select"
+          options={dataStewardOptions}
+        />
+      </Form.Item>
       <Form.Item
         label="Automatic execution frequency"
         name="execution_frequency"
         tooltip="Interval to run the monitor automatically after the start date"
       >
         <Select
-          aria-label="Select Automatic execution frequency"
+          aria-label="Select automatic execution frequency"
           data-testid="controlled-select-execution_frequency"
           options={enumToOptions(MonitorFrequency)}
         />
@@ -262,7 +300,6 @@ const ConfigureMonitorForm = ({
               checked={form.getFieldValue("use_llm_classifier")}
             />
           </Form.Item>
-
           {form.getFieldValue("use_llm_classifier") && (
             <Form.Item
               name="llm_model_override"

clients/admin-ui/src/features/integrations/configure-monitor/ConfigureMonitorModal.tsx

@@ -18,10 +18,10 @@ import ConfigureMonitorDatabasesForm from "~/features/integrations/configure-mon
 import ConfigureMonitorForm from "~/features/integrations/configure-monitor/ConfigureMonitorForm";
 import ConfigureWebsiteMonitorForm from "~/features/integrations/configure-monitor/ConfigureWebsiteMonitorForm";
 import {
-  ConnectionConfigurationResponse,
+  ConnectionConfigurationResponseWithSystemKey,
   ConnectionSystemTypeMap,
   ConnectionType,
-  MonitorConfig,
+  EditableMonitorConfig,
   MonitorFrequency,
 } from "~/types/api";
 import { isErrorResult, RTKResult } from "~/types/errors";
@@ -47,15 +47,14 @@ const ConfigureMonitorModal = ({
   isWebsiteMonitor,
 }: Pick<UseDisclosureReturn, "isOpen" | "onClose"> & {
   formStep: number;
-  monitor?: MonitorConfig;
+  monitor?: EditableMonitorConfig;
   isEditing?: boolean;
-  onAdvance: (m: MonitorConfig) => void;
-  integration: ConnectionConfigurationResponse;
+  onAdvance: (m: EditableMonitorConfig) => void;
+  integration: ConnectionConfigurationResponseWithSystemKey;
   integrationOption: ConnectionSystemTypeMap;
   isWebsiteMonitor?: boolean;
 }) => {
   const isOktaIntegration = integration.connection_type === ConnectionType.OKTA;
-
   const [putMonitorMutationTrigger, { isLoading: isSubmittingRegular }] =
     usePutDiscoveryMonitorMutation();
 
@@ -88,7 +87,7 @@ const ConfigureMonitorModal = ({
 
   const { successAlert, errorAlert } = useAlert();
 
-  const handleSubmit = async (values: MonitorConfig) => {
+  const handleSubmit = async (values: EditableMonitorConfig) => {
     let result: RTKResult | undefined;
     const timeout = setTimeout(() => {
       if (!result) {
@@ -188,6 +187,7 @@ const ConfigureMonitorModal = ({
           onSubmit={handleSubmit}
           isSubmitting={isSubmitting}
           databasesAvailable={databasesAvailable}
+          integrationSystem={integration?.system_key}
           integrationOption={integrationOption}
         />
       )}

clients/admin-ui/src/features/integrations/configure-monitor/ConfigureWebsiteMonitorForm.tsx

@@ -22,15 +22,15 @@ import { PRIVACY_NOTICE_REGION_RECORD } from "~/features/common/privacy-notice-r
 import { useGetOnlyCountryLocationsQuery } from "~/features/locations/locations.slice";
 import { getSelectedRegionIds } from "~/features/privacy-experience/form/helpers";
 import {
-  MonitorConfig,
+  EditableMonitorConfig,
   MonitorFrequency,
   WebsiteMonitorParams,
 } from "~/types/api";
 
 import { FormikSharedConfigSelect } from "./FormikSharedConfigSelect";
 
 interface WebsiteMonitorConfig
-  extends Omit<MonitorConfig, "datasource_params"> {
+  extends Omit<EditableMonitorConfig, "datasource_params"> {
   datasource_params?: WebsiteMonitorParams;
   url: string;
 }
@@ -58,10 +58,10 @@ const ConfigureWebsiteMonitorForm = ({
   onClose,
   onSubmit,
 }: {
-  monitor?: MonitorConfig;
+  monitor?: EditableMonitorConfig;
   url: string;
   onClose: () => void;
-  onSubmit: (values: MonitorConfig) => Promise<void>;
+  onSubmit: (values: EditableMonitorConfig) => Promise<void>;
 }) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const router = useRouter();

clients/admin-ui/src/features/integrations/configure-monitor/MonitorConfigEnableCell.tsx

@@ -7,17 +7,17 @@ const MODAL_TEXT =
   "You are about to disable this monitor. If you continue, it will no longer scan automatically.";
 
 export const MonitorConfigEnableCell = ({
-  record,
+  record: { stewards, enabled, ...data },
 }: {
   record: MonitorConfig;
 }) => {
   const [putMonitor] = usePutDiscoveryMonitorMutation();
   const handleToggle = async (toggleValue: boolean) =>
     putMonitor({
-      ...record,
+      ...data,
+      stewards: stewards?.map(({ id }) => id),
       enabled: toggleValue,
     });
-  const { enabled } = record;
 
   return (
     <EnableCell

clients/admin-ui/src/features/integrations/configure-monitor/MonitorConfigTab.tsx

@@ -12,10 +12,10 @@ import { MonitorIcon } from "~/features/common/Icon/MonitorIcon";
 import ConfigureMonitorModal from "~/features/integrations/configure-monitor/ConfigureMonitorModal";
 import { useMonitorConfigTable } from "~/features/integrations/hooks/useMonitorConfigTable";
 import {
-  ConnectionConfigurationResponse,
+  ConnectionConfigurationResponseWithSystemKey,
   ConnectionSystemTypeMap,
   ConnectionType,
-  MonitorConfig,
+  EditableMonitorConfig,
   SystemType,
 } from "~/types/api";
 
@@ -36,7 +36,7 @@ const MonitorConfigTab = ({
   integration,
   integrationOption,
 }: {
-  integration: ConnectionConfigurationResponse;
+  integration: ConnectionConfigurationResponseWithSystemKey;
   integrationOption?: ConnectionSystemTypeMap;
 }) => {
   const isWebsiteMonitor =
@@ -47,12 +47,12 @@ const MonitorConfigTab = ({
 
   const modal = useDisclosure();
   const [workingMonitor, setWorkingMonitor] = useState<
-    MonitorConfig | undefined
+    EditableMonitorConfig | undefined
   >(undefined);
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const [formStep, setFormStep] = useState(0);
 
-  const handleEditMonitor = (monitor: MonitorConfig) => {
+  const handleEditMonitor = (monitor: EditableMonitorConfig) => {
     setWorkingMonitor(monitor);
     setIsEditing(true);
     modal.onOpen();
@@ -65,7 +65,7 @@ const MonitorConfigTab = ({
     modal.onClose();
   };
 
-  const handleAdvanceForm = (monitor: MonitorConfig) => {
+  const handleAdvanceForm = (monitor: EditableMonitorConfig) => {
     setWorkingMonitor(monitor);
     setFormStep(1);
   };

clients/admin-ui/src/features/integrations/hooks/useFeatureBasedTabs.tsx

@@ -48,7 +48,6 @@ export const useFeatureBasedTabs = ({
   supportsConnectionTest,
 }: UseFeatureBasedTabsProps) => {
   const { onOpen, isOpen, onClose } = useDisclosure();
-
   const tabs = useMemo(() => {
     // Don't show tabs until enabledFeatures is loaded
     if (!enabledFeatures || !enabledFeatures.length) {