Connector dataset dropdown

CHANGELOG.md

@@ -17,6 +17,10 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.4.0...main)
 
+### Added
+
+* Unified Fides Resources: Added a dataset dropdown selector when configuring a connector to link an existing dataset to the connector configuration. [#2162](https://github.com/ethyca/fides/pull/2162)
+
 ### Fixed
 
 * Remove next-auth from privacy center to fix JS console error [#2090](https://github.com/ethyca/fides/pull/2090)

clients/admin-ui/cypress/e2e/connectors.cy.ts

@@ -32,6 +32,9 @@ describe("Connectors", () => {
         "/api/v1/connection/postgres_connector/datasetconfig",
         { body: {} }
       ).as("patchDatasetconfig");
+      cy.intercept("GET", "/api/v1/dataset", { fixture: "datasets.json" }).as(
+        "getDatasets"
+      );
     });
 
     it("Should show data store connections and view configuration", () => {
@@ -46,15 +49,51 @@ describe("Connectors", () => {
       cy.getByTestId("input-name").should("have.value", "postgres_connector");
     });
 
-    it("Should allow saving a dataset configuration", () => {
+    it("Should allow saving a dataset configuration via dropdown", () => {
+      cy.visit("/datastore-connection/postgres_connector");
+      cy.getByTestId("tab-Dataset configuration").click();
+      cy.wait("@getPostgresConnectorDatasetconfig");
+
+      // The yaml editor will start off disabled
+      cy.getByTestId("save-yaml-btn").should("be.disabled");
+      // The dataset dropdown selector should have the value of the existing connected dataset
+      cy.getByTestId("save-dataset-link-btn").should("be.enabled");
+      cy.getByTestId("dataset-selector").should(
+        "have.value",
+        "postgres_example_test_dataset"
+      );
+
+      // Change the linked dataset
+      cy.getByTestId("dataset-selector").select("demo_users_dataset_2");
+      cy.getByTestId("save-dataset-link-btn").click();
+
+      cy.wait("@patchDatasetconfig").then((interception) => {
+        expect(interception.request.body).to.eql([
+          {
+            fides_key: "postgres_example_test_dataset",
+            ctl_dataset_fides_key: "demo_users_dataset_2",
+          },
+        ]);
+      });
+    });
+
+    it("Should allow saving a dataset configuration via yaml", () => {
       cy.visit("/datastore-connection/postgres_connector");
       cy.getByTestId("tab-Dataset configuration").click();
       cy.wait("@getPostgresConnectorDatasetconfig");
-      // The monaco yaml editor takes a bit to load. Since this is likely going away,
-      // just wait for now and remove this once the yaml editor is no longer available
+
+      // Unset the linked dataset, which should switch the save button enable-ness
+      cy.getByTestId("dataset-selector").select("Select");
+      cy.getByTestId("save-dataset-link-btn").should("be.disabled");
+      cy.getByTestId("save-yaml-btn").click();
+
+      // Click past the confirmation modal
+      cy.getByTestId("confirmation-modal");
+      // The monaco yaml editor takes a bit to load
       // eslint-disable-next-line cypress/no-unnecessary-waiting
-      cy.wait(1000);
-      cy.getByTestId("save-btn").click();
+      cy.wait(500);
+      cy.getByTestId("continue-btn").click();
+
       cy.wait("@upsertDataset").then((interception) => {
         expect(interception.request.body.length).to.eql(1);
         expect(interception.request.body[0].fides_key).to.eql(

clients/admin-ui/cypress/fixtures/datasets.json

@@ -290,5 +290,20 @@
         ]
       }
     ]
+  },
+  {
+    "fides_key": "postgres_example_test_dataset",
+    "organization_fides_key": "default_organization",
+    "tags": null,
+    "name": "Postgres Example Test Dataset",
+    "description": "Example of a Postgres dataset containing a variety of related tables like customers, products, addresses, etc.",
+    "meta": null,
+    "data_categories": null,
+    "data_qualifier": "aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified",
+    "fides_meta": null,
+    "joint_controller": null,
+    "retention": "No retention or erasure policy",
+    "third_country_transfers": null,
+    "collections": []
   }
 ]

clients/admin-ui/src/features/datastore-connections/add-connection/DatasetConfiguration.tsx

@@ -1,4 +1,14 @@
-import { Box, Center, Spinner, VStack } from "@fidesui/react";
+import {
+  Box,
+  Button,
+  Center,
+  HStack,
+  Select,
+  Spinner,
+  Text,
+  TextProps,
+  VStack,
+} from "@fidesui/react";
 import { useAlert, useAPIHelper } from "common/hooks";
 import { selectConnectionTypeState } from "connection-type/connection-type.slice";
 import {
@@ -7,16 +17,25 @@ import {
 } from "datastore-connections/datastore-connection.slice";
 import { PatchDatasetsConfigRequest } from "datastore-connections/types";
 import { useRouter } from "next/router";
-import React, { useState } from "react";
+import React, { ChangeEvent, useEffect, useState } from "react";
 import { DATASTORE_CONNECTION_ROUTE } from "src/constants";
 
 import { useAppSelector } from "~/app/hooks";
 import { getErrorMessage } from "~/features/common/helpers";
-import { useUpsertDatasetsMutation } from "~/features/dataset";
+import {
+  useGetAllDatasetsQuery,
+  useUpsertDatasetsMutation,
+} from "~/features/dataset";
 import { Dataset, DatasetConfigCtlDataset } from "~/types/api";
 
 import YamlEditorForm from "./forms/YamlEditorForm";
 
+const Copy = ({ children, ...props }: TextProps) => (
+  <Text color="gray.700" fontSize="14px" {...props}>
+    {children}
+  </Text>
+);
+
 const DatasetConfiguration: React.FC = () => {
   const router = useRouter();
   const { errorAlert, successAlert } = useAlert();
@@ -26,10 +45,59 @@ const DatasetConfiguration: React.FC = () => {
   const { data, isFetching, isLoading, isSuccess } = useGetDatasetConfigsQuery(
     connection!.key
   );
-  const [patchDataset] = usePatchDatasetConfigsMutation();
+  const [patchDatasetConfig] = usePatchDatasetConfigsMutation();
   const [upsertDatasets] = useUpsertDatasetsMutation();
+  const { data: allDatasets, isLoading: isLoadingAllDatasets } =
+    useGetAllDatasetsQuery();
+
+  const [selectedDatasetKey, setSelectedDatasetKey] = useState<
+    string | undefined
+  >(undefined);
+
+  useEffect(() => {
+    if (data && data.items.length) {
+      setSelectedDatasetKey(data.items[0].ctl_dataset.fides_key);
+    }
+  }, [data]);
+
+  const handleCancel = () => {
+    router.push(DATASTORE_CONNECTION_ROUTE);
+  };
+
+  const handlePatchDatasetConfig = async (
+    datasetPairs: DatasetConfigCtlDataset[]
+  ) => {
+    const params: PatchDatasetsConfigRequest = {
+      connection_key: connection?.key as string,
+      dataset_pairs: datasetPairs,
+    };
+    const payload = await patchDatasetConfig(params).unwrap();
+    if (payload.failed?.length > 0) {
+      errorAlert(payload.failed[0].message);
+    } else {
+      successAlert("Dataset successfully updated!");
+    }
+    router.push(DATASTORE_CONNECTION_ROUTE);
+  };
+
+  const handleLinkDataset = async () => {
+    if (selectedDatasetKey) {
+      try {
+        let fidesKey = selectedDatasetKey;
+        if (data && data.items.length) {
+          fidesKey = data.items[0].fides_key;
+        }
+        const datasetPairs: DatasetConfigCtlDataset[] = [
+          { fides_key: fidesKey, ctl_dataset_fides_key: selectedDatasetKey },
+        ];
+        handlePatchDatasetConfig(datasetPairs);
+      } catch (error) {
+        handleError(error);
+      }
+    }
+  };
 
-  const handleSubmit = async (value: unknown) => {
+  const handleSubmitYaml = async (value: unknown) => {
     try {
       setIsSubmitting(true);
       // First update the datasets
@@ -60,42 +128,91 @@ const DatasetConfiguration: React.FC = () => {
         }));
       }
 
-      const params: PatchDatasetsConfigRequest = {
-        connection_key: connection?.key as string,
-        dataset_pairs: pairs,
-      };
-      const payload = await patchDataset(params).unwrap();
-      if (payload.failed?.length > 0) {
-        errorAlert(payload.failed[0].message);
-      } else {
-        successAlert("Dataset successfully updated!");
-      }
-      router.push(DATASTORE_CONNECTION_ROUTE);
+      handlePatchDatasetConfig(pairs);
     } catch (error) {
       handleError(error);
     } finally {
       setIsSubmitting(false);
     }
   };
 
+  const handleSelectDataset = (event: ChangeEvent<HTMLSelectElement>) => {
+    setSelectedDatasetKey(event.target.value);
+  };
+
+  const datasetSelected =
+    selectedDatasetKey !== "" && selectedDatasetKey !== undefined;
+
+  if (isFetching || isLoading || isLoadingAllDatasets) {
+    return (
+      <Center>
+        <Spinner />
+      </Center>
+    );
+  }
+
   return (
-    <VStack align="stretch" flex="1">
-      <Box color="gray.700" fontSize="14px" mb={4}>
-        View your system yaml below! You can also modify the yaml if you need to
-        assign any references between datasets.
-      </Box>
-      {(isFetching || isLoading) && (
-        <Center>
-          <Spinner />
-        </Center>
-      )}
-      {isSuccess && data!?.items ? (
-        <YamlEditorForm
-          data={data.items.map((item) => item.ctl_dataset)}
-          isSubmitting={isSubmitting}
-          onSubmit={handleSubmit}
-        />
-      ) : null}
+    <VStack alignItems="left">
+      <HStack spacing={8} mb={4}>
+        {allDatasets && allDatasets.length ? (
+          <>
+            <VStack alignSelf="start" mr={4}>
+              <Box data-testid="dataset-selector-section" mb={4}>
+                <Copy mb={4}>
+                  Choose a dataset to associate with this connector.
+                </Copy>
+                <Select
+                  size="sm"
+                  width="fit-content"
+                  placeholder="Select"
+                  onChange={handleSelectDataset}
+                  value={selectedDatasetKey}
+                  data-testid="dataset-selector"
+                >
+                  {allDatasets.map((ds) => (
+                    <option key={ds.fides_key} value={ds.fides_key}>
+                      {ds.fides_key}
+                    </option>
+                  ))}
+                </Select>
+              </Box>
+              <Button
+                size="sm"
+                colorScheme="primary"
+                alignSelf="start"
+                disabled={!datasetSelected}
+                onClick={handleLinkDataset}
+                data-testid="save-dataset-link-btn"
+              >
+                Save
+              </Button>
+            </VStack>
+            <Copy>or</Copy>
+          </>
+        ) : null}
+        <Box data-testid="yaml-editor-section">
+          <Copy mb={4}>
+            View your dataset YAML below! You can also modify the YAML if you
+            need to assign any references between datasets.
+          </Copy>
+          {isSuccess && data!?.items ? (
+            <YamlEditorForm
+              data={data.items.map((item) => item.ctl_dataset)}
+              isSubmitting={isSubmitting}
+              onSubmit={handleSubmitYaml}
+              disabled={datasetSelected}
+            />
+          ) : null}
+        </Box>
+      </HStack>
+      <Button
+        width="fit-content"
+        size="sm"
+        variant="outline"
+        onClick={handleCancel}
+      >
+        Cancel
+      </Button>
     </VStack>
   );
 };