Feature flag dataset UX changes (#2335)

Co-authored-by: Allison King <allison@ethyca.com>
ethyca · Jan 24, 2023 · 72da423 · 72da423
1 parent fa003e2
commit 72da423
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,10 @@ The types of changes are:
 
 ## [2.5.1](https://github.com/ethyca/fides/compare/2.5.0...2.5.1)
 
+### Fixed
+
+* Added a feature flag for the recent dataset classification UX changes [#2335](https://github.com/ethyca/fides/pull/2335)
+
 ### Security
 
 * Add a check to the catchall path to prevent returning paths outside of the UI directory [#2330](https://github.com/ethyca/fides/pull/2330)

diff --git a/clients/admin-ui/src/features/dataset/ApproveClassification.tsx b/clients/admin-ui/src/features/dataset/ApproveClassification.tsx
@@ -2,6 +2,7 @@ import { Button, chakra, Spacer, useToast } from "@fidesui/react";
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
 
+import { useFeatures } from "~/features/common/features";
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
 import { errorToastParams, successToastParams } from "~/features/common/toast";
 import {
@@ -15,6 +16,8 @@ import { selectActiveDataset, useUpdateDatasetMutation } from "./dataset.slice";
 import { getUpdatedDatasetFromClassifyDataset } from "./helpers";
 
 const ApproveClassification = () => {
+  const features = useFeatures();
+
   const dataset = useSelector(selectActiveDataset);
   const classifyDataset = useSelector(selectActiveClassifyDataset);
   const classifyCollection = useSelector(selectClassifyInstanceCollection);
@@ -44,39 +47,54 @@ const ApproveClassification = () => {
     const updatedDataset = getUpdatedDatasetFromClassifyDataset(
       dataset,
       classifyDataset,
-      classifyCollection?.name
+      features.flags.datasetClassificationUpdates
+        ? classifyCollection?.name
+        : undefined
     );
+
     try {
       const updateResult = await updateDataset(updatedDataset);
       if (isErrorResult(updateResult)) {
         toast(errorToastParams(getErrorMessage(updateResult.error)));
         return;
       }
-      toast(successToastParams("Collection classified and approved"));
-      // Validate if any fields still require category approval
-      let uncategorizedCount = 0;
-      updatedDataset.collections.forEach((updatedCollection) => {
-        updatedCollection.fields.forEach((updatedField) => {
-          if (
-            !updatedField.data_categories ||
-            updatedField.data_categories.length === 0
-          ) {
-            uncategorizedCount += 1;
-          }
+      if (features.flags.datasetClassificationUpdates) {
+        toast(successToastParams("Collection classified and approved"));
+        // Validate if any fields still require category approval
+        let uncategorizedCount = 0;
+        updatedDataset.collections.forEach((updatedCollection) => {
+          updatedCollection.fields.forEach((updatedField) => {
+            if (
+              !updatedField.data_categories ||
+              updatedField.data_categories.length === 0
+            ) {
+              uncategorizedCount += 1;
+            }
+          });
         });
-      });
-      // Only update the dataset as classified when all fields have been categorized
-      if (uncategorizedCount === 0) {
+        // Only update the dataset as classified when all fields have been categorized
+        if (uncategorizedCount === 0) {
+          const statusResult = await updateClassifyInstance({
+            dataset_fides_key: dataset.fides_key,
+            status: ClassificationStatus.REVIEWED,
+          });
+
+          if (isErrorResult(statusResult)) {
+            toast(errorToastParams(getErrorMessage(statusResult.error)));
+            return;
+          }
+
+          toast(successToastParams("Dataset classified and approved"));
+        }
+      } else {
         const statusResult = await updateClassifyInstance({
           dataset_fides_key: dataset.fides_key,
           status: ClassificationStatus.REVIEWED,
         });
-
         if (isErrorResult(statusResult)) {
           toast(errorToastParams(getErrorMessage(statusResult.error)));
           return;
         }
-
         toast(successToastParams("Dataset classified and approved"));
       }
     } catch (error) {
@@ -104,17 +122,31 @@ const ApproveClassification = () => {
         <chakra.span fontWeight="bold">{classifyCollection.name}</chakra.span>{" "}
         table that are likely to contain personal data.
       </chakra.p>
-      <Button
-        size="sm"
-        variant="primary"
-        flexShrink={0}
-        onClick={handleApprove}
-        isLoading={isLoading}
-        isDisabled={isLoading}
-        data-testid="approve-classification-btn"
-      >
-        Approve classifications
-      </Button>
+      {features.flags.datasetClassificationUpdates ? (
+        <Button
+          size="sm"
+          variant="primary"
+          flexShrink={0}
+          onClick={handleApprove}
+          isLoading={isLoading}
+          isDisabled={isLoading}
+          data-testid="approve-classification-btn"
+        >
+          Approve classifications
+        </Button>
+      ) : (
+        <Button
+          size="sm"
+          variant="primary"
+          flexShrink={0}
+          onClick={handleApprove}
+          isLoading={isLoading}
+          isDisabled={isLoading}
+          data-testid="approve-classification-btn"
+        >
+          Approve dataset
+        </Button>
+      )}
     </>
   );
 };

diff --git a/clients/admin-ui/src/flags.json b/clients/admin-ui/src/flags.json
@@ -9,5 +9,10 @@
     "development": true,
     "test": false,
     "production": false
+  },
+  "datasetClassificationUpdates": {
+    "development": true,
+    "test": false,
+    "production": false
   }
 }