Skip database selection step when monitors would have no databases (e…

…thyca#5056)

CHANGELOG.md

@@ -38,6 +38,7 @@ The types of changes are:
 - Update name of Ingress/Egress columns in Datamap Report to Sources/Destinations [#5045](https://github.com/ethyca/fides/pull/5045)
 - Changed behavior of project selection UI in discovery monitor form [#5049](https://github.com/ethyca/fides/pull/5049)
 - Updating DSR filtering to use collection-level data categories [#4999](https://github.com/ethyca/fides/pull/4999)
+- Changed discovery monitor form to skip project selection UI when no projects exist [#5056](https://github.com/ethyca/fides/pull/5056)
 
 
 ### Fixed

clients/admin-ui/cypress/e2e/integration-management.cy.ts

@@ -268,5 +268,29 @@ describe("Integration management for data detection & discovery", () => {
         );
       });
     });
+
+    describe("data discovery tab with no projects/databases", () => {
+      beforeEach(() => {
+        cy.intercept("GET", "/api/v1/plus/discovery-monitor*", {
+          fixture: "detection-discovery/monitors/monitor_list.json",
+        }).as("getMonitors");
+        cy.intercept("/api/v1/plus/discovery-monitor/databases", {
+          body: { items: [], page: 1, size: 25, total: 0, pages: 0 },
+        }).as("getEmptyDatabases");
+        cy.getByTestId("tab-Data discovery").click();
+        cy.wait("@getMonitors");
+        cy.clock(new Date(2034, 5, 3));
+      });
+
+      it("skips the project/database selection step", () => {
+        cy.intercept("PUT", "/api/v1/plus/discovery-monitor*").as("putMonitor");
+        cy.getByTestId("add-monitor-btn").click();
+        cy.getByTestId("input-name").type("A new monitor");
+        cy.selectOption("input-execution_frequency", "Daily");
+        cy.getByTestId("input-execution_start_date").type("2034-06-03T10:00");
+        cy.getByTestId("next-btn").click();
+        cy.wait("@putMonitor");
+      });
+    });
   });
 });

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

@@ -2,20 +2,15 @@ import { Button, ButtonGroup, Flex, Text, Tooltip } from "fidesui";
 import { useEffect, useState } from "react";
 
 import FidesSpinner from "~/features/common/FidesSpinner";
-import useQueryResultToast from "~/features/common/form/useQueryResultToast";
 import { usePaginatedPicker } from "~/features/common/hooks/usePicker";
 import QuestionTooltip from "~/features/common/QuestionTooltip";
 import {
   PaginationBar,
   useServerSidePagination,
 } from "~/features/common/table/v2";
-import {
-  useGetDatabasesByConnectionQuery,
-  usePutDiscoveryMonitorMutation,
-} from "~/features/data-discovery-and-detection/discovery-detection.slice";
+import { useGetDatabasesByConnectionQuery } from "~/features/data-discovery-and-detection/discovery-detection.slice";
 import MonitorDatabasePicker from "~/features/integrations/configure-monitor/MonitorDatabasePicker";
 import { MonitorConfig } from "~/types/api";
-import { isErrorResult } from "~/types/errors";
 
 const EMPTY_RESPONSE = {
   items: [] as string[],
@@ -31,23 +26,18 @@ const TOOLTIP_COPY =
 const ConfigureMonitorDatabasesForm = ({
   monitor,
   isEditing,
+  isSubmitting,
   integrationKey,
+  onSubmit,
   onClose,
 }: {
   monitor: MonitorConfig;
   isEditing?: boolean;
+  isSubmitting?: boolean;
   integrationKey: string;
+  onSubmit: (monitor: MonitorConfig) => void;
   onClose: () => void;
 }) => {
-  const { toastResult } = useQueryResultToast({
-    defaultSuccessMsg: `Monitor ${
-      isEditing ? "updated" : "created"
-    } successfully`,
-    defaultErrorMsg: `A problem occurred while ${
-      isEditing ? "updating" : "creating"
-    } this monitor`,
-  });
-
   const {
     PAGE_SIZES,
     pageSize,
@@ -78,9 +68,6 @@ const ConfigureMonitorDatabasesForm = ({
     setTotalPages(totalPages);
   }, [totalPages, setTotalPages]);
 
-  const [putMonitorMutationTrigger, { isLoading: isSubmitting }] =
-    usePutDiscoveryMonitorMutation();
-
   const [selected, setSelected] = useState<string[]>(monitor.databases ?? []);
 
   const { allSelected, someSelected, handleToggleSelection, handleToggleAll } =
@@ -91,13 +78,9 @@ const ConfigureMonitorDatabasesForm = ({
       onChange: setSelected,
     });
 
-  const handleSave = async () => {
+  const handleSave = () => {
     const payload = { ...monitor, databases: allSelected ? [] : selected };
-    const result = await putMonitorMutationTrigger(payload);
-    toastResult(result);
-    if (!isErrorResult(result)) {
-      onClose();
-    }
+    onSubmit(payload);
   };
 
   if (isLoading) {

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

@@ -30,13 +30,19 @@ interface MonitorConfigFormValues {
 const ConfigureMonitorForm = ({
   monitor,
   integrationOption,
+  isSubmitting,
+  databasesAvailable,
   onClose,
   onAdvance,
+  onSubmit,
 }: {
   monitor?: MonitorConfig;
   integrationOption: ConnectionSystemTypeMap;
+  isSubmitting?: boolean;
+  databasesAvailable?: boolean;
   onClose: () => void;
   onAdvance: (monitor: MonitorConfig) => void;
+  onSubmit: (monitor: MonitorConfig) => void;
 }) => {
   const isEditing = !!monitor;
 
@@ -81,7 +87,11 @@ const ConfigureMonitorForm = ({
         single_dataset: false,
       };
     }
-    onAdvance(payload);
+    if (databasesAvailable) {
+      onAdvance(payload);
+    } else {
+      onSubmit(payload);
+    }
   };
 
   const initialDate = monitor?.execution_start_date
@@ -145,9 +155,10 @@ const ConfigureMonitorForm = ({
                 type="submit"
                 variant="primary"
                 isDisabled={!isValid}
+                isLoading={isSubmitting}
                 data-testid="next-btn"
               >
-                Next
+                {databasesAvailable ? "Next" : "Save"}
               </Button>
             </ButtonGroup>
           </VStack>

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

@@ -1,14 +1,20 @@
 import { UseDisclosureReturn } from "fidesui";
 
 import FidesSpinner from "~/features/common/FidesSpinner";
+import useQueryResultToast from "~/features/common/form/useQueryResultToast";
 import AddModal from "~/features/configure-consent/AddModal";
+import {
+  useGetDatabasesByConnectionQuery,
+  usePutDiscoveryMonitorMutation,
+} from "~/features/data-discovery-and-detection/discovery-detection.slice";
 import ConfigureMonitorDatabasesForm from "~/features/integrations/configure-monitor/ConfigureMonitorDatabasesForm";
 import ConfigureMonitorForm from "~/features/integrations/configure-monitor/ConfigureMonitorForm";
 import {
   ConnectionConfigurationResponse,
   ConnectionSystemTypeMap,
   MonitorConfig,
 } from "~/types/api";
+import { isErrorResult } from "~/types/errors";
 
 const ConfigureMonitorModal = ({
   isOpen,
@@ -26,36 +32,71 @@ const ConfigureMonitorModal = ({
   onAdvance: (m: MonitorConfig) => void;
   integration: ConnectionConfigurationResponse;
   integrationOption: ConnectionSystemTypeMap;
-}) => (
-  <AddModal
-    title={
-      monitor?.name
-        ? `Configure ${monitor.name}`
-        : "Configure discovery monitor"
+}) => {
+  const [putMonitorMutationTrigger, { isLoading: isSubmitting }] =
+    usePutDiscoveryMonitorMutation();
+
+  const { data: databases } = useGetDatabasesByConnectionQuery({
+    page: 1,
+    size: 25,
+    connection_config_key: integration.key,
+  });
+
+  const databasesAvailable = !!databases && !!databases.total;
+
+  const { toastResult } = useQueryResultToast({
+    defaultSuccessMsg: `Monitor ${
+      isEditing ? "updated" : "created"
+    } successfully`,
+    defaultErrorMsg: `A problem occurred while ${
+      isEditing ? "updating" : "creating"
+    } this monitor`,
+  });
+
+  const handleSubmit = async (values: MonitorConfig) => {
+    const result = await putMonitorMutationTrigger(values);
+    toastResult(result);
+    if (!isErrorResult(result)) {
+      onClose();
     }
-    isOpen={isOpen}
-    onClose={onClose}
-  >
-    {formStep === 0 && (
-      <ConfigureMonitorForm
-        monitor={monitor}
-        onClose={onClose}
-        onAdvance={onAdvance}
-        integrationOption={integrationOption}
-      />
-    )}
-    {formStep === 1 &&
-      (monitor ? (
-        <ConfigureMonitorDatabasesForm
+  };
+
+  return (
+    <AddModal
+      title={
+        monitor?.name
+          ? `Configure ${monitor.name}`
+          : "Configure discovery monitor"
+      }
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      {formStep === 0 && (
+        <ConfigureMonitorForm
           monitor={monitor}
-          isEditing={isEditing}
           onClose={onClose}
-          integrationKey={integration.key}
+          onAdvance={onAdvance}
+          onSubmit={handleSubmit}
+          isSubmitting={isSubmitting}
+          databasesAvailable={databasesAvailable}
+          integrationOption={integrationOption}
         />
-      ) : (
-        <FidesSpinner />
-      ))}
-  </AddModal>
-);
+      )}
+      {formStep === 1 &&
+        (monitor ? (
+          <ConfigureMonitorDatabasesForm
+            monitor={monitor}
+            isEditing={isEditing}
+            isSubmitting={isSubmitting}
+            onSubmit={handleSubmit}
+            onClose={onClose}
+            integrationKey={integration.key}
+          />
+        ) : (
+          <FidesSpinner />
+        ))}
+    </AddModal>
+  );
+};
 
 export default ConfigureMonitorModal;