Allow categories without confidences to show up in select box

ethyca · Sep 27, 2022 · 4cabdca · 4cabdca
1 parent e3a7eea
commit 4cabdca
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 36 deletions.
diff --git a/clients/ctl/admin-ui/cypress/components/ClassifiedDataCategoryInput.cy.tsx b/clients/ctl/admin-ui/cypress/components/ClassifiedDataCategoryInput.cy.tsx
@@ -43,6 +43,30 @@ describe("ClassifiedDataCategoryDropdown", () => {
     ).should("have.attr", "data-checked");
   });
 
+  it("can render all categories even if not recommended", () => {
+    const onCheckedSpy = cy.spy().as("onCheckedSpy");
+    const selectedClassifiedCategory = MOST_LIKELY_CATEGORIES[0];
+    const otherCategory = MOCK_DATA_CATEGORIES[6];
+    cy.mount(
+      <ClassifiedDataCategoryDropdown
+        dataCategories={MOCK_DATA_CATEGORIES as DataCategory[]}
+        // check one "most likely" and one regular one
+        checked={[
+          selectedClassifiedCategory.fides_key,
+          "system.authentication",
+        ]}
+        onChecked={onCheckedSpy}
+        mostLikelyCategories={MOST_LIKELY_CATEGORIES}
+      />
+    );
+    cy.getByTestId("classified-select").contains("system.authentication (N/A)");
+    cy.getByTestId("classified-select")
+      .click()
+      .within(() => {
+        cy.contains(`${otherCategory.fides_key} (N/A)`);
+      });
+  });
+
   it("can select from classified select without overriding taxonomy dropdown", () => {
     const onCheckedSpy = cy.spy().as("onCheckedSpy");
     const toSelect = MOST_LIKELY_CATEGORIES[0];
@@ -100,7 +124,7 @@ describe("ClassifiedDataCategoryDropdown", () => {
     // delete the selected category
     cy.getByTestId("classified-select").click().type("{backspace}");
     cy.get("@onCheckedSpy").should("have.been.calledWith", [
-      "system.authentication",
+      selectedClassifiedCategory.fides_key,
     ]);
   });
 

diff --git a/clients/ctl/admin-ui/src/features/dataset/ClassifiedDataCategoryDropdown.tsx b/clients/ctl/admin-ui/src/features/dataset/ClassifiedDataCategoryDropdown.tsx
@@ -1,5 +1,6 @@
 import { Box, ButtonProps } from "@fidesui/react";
 import { MultiValue, Select } from "chakra-react-select";
+import { useMemo } from "react";
 
 import { DataCategory } from "~/types/api";
 
@@ -11,28 +12,57 @@ interface DataCategoryWithConfidence extends DataCategory {
   confidence: number;
 }
 
-interface Props extends DataCategoryDropdownProps {
+interface Props extends Omit<DataCategoryDropdownProps, "tooltip"> {
   mostLikelyCategories: DataCategoryWithConfidence[];
 }
 
 const ClassifiedDataCategoryDropdown = ({
   mostLikelyCategories,
   onChecked,
   checked,
-  ...props
+  dataCategories,
 }: Props) => {
   const menuButtonProps: ButtonProps = {
     size: "sm",
     colorScheme: "complimentary",
     borderRadius: "6px 0px 0px 6px",
   };
 
-  const options = mostLikelyCategories
-    .sort((a, b) => b.confidence - a.confidence)
-    .map((c) => ({
-      label: `${c.fides_key} (${c.confidence}%)`,
-      value: c.fides_key,
-    }));
+  const allCategoriesWithConfidence = useMemo(
+    () =>
+      dataCategories.map((dc) => {
+        const categoryWithConfidence = mostLikelyCategories.find(
+          (mlc) => mlc.fides_key === dc.fides_key
+        );
+        if (categoryWithConfidence) {
+          return categoryWithConfidence;
+        }
+        return { ...dc, confidence: undefined };
+      }),
+    [mostLikelyCategories, dataCategories]
+  );
+
+  const options = allCategoriesWithConfidence
+    .sort((a, b) => {
+      if (a.confidence !== undefined && b.confidence !== undefined) {
+        return b.confidence - a.confidence;
+      }
+      if (a.confidence === undefined) {
+        return 1;
+      }
+      if (b.confidence === undefined) {
+        return -1;
+      }
+      return a.fides_key.localeCompare(b.fides_key);
+    })
+    .map((c) => {
+      const confidence =
+        c.confidence === undefined ? "N/A" : `${c.confidence}%`;
+      return {
+        label: `${c.fides_key} (${confidence})`,
+        value: c.fides_key,
+      };
+    });
 
   const selectedOptions = options.filter((o) => checked.indexOf(o.value) >= 0);
 
@@ -61,7 +91,7 @@ const ClassifiedDataCategoryDropdown = ({
     <Box display="flex">
       <Box>
         <DataCategoryDropdown
-          {...props}
+          dataCategories={dataCategories}
           checked={checked}
           onChecked={onChecked}
           buttonProps={menuButtonProps}

diff --git a/clients/ctl/admin-ui/src/features/dataset/DataCategoryInput.tsx b/clients/ctl/admin-ui/src/features/dataset/DataCategoryInput.tsx
@@ -33,41 +33,46 @@ const DataCategoryInput = ({
   return (
     <Grid templateColumns="1fr 3fr">
       <FormLabel>Data Categories</FormLabel>
-      <Stack>
+      {features.plus ? (
         <Box display="flex" alignItems="center">
           <Box mr="2" width="100%">
-            {features.plus ? (
-              <ClassifiedDataCategoryDropdown
-                dataCategories={dataCategories}
-                // TODO: make this real
-                mostLikelyCategories={dataCategories
-                  .slice(0, 5)
-                  .map((d) => ({ ...d, confidence: 97 }))}
-                checked={checked}
-                onChecked={onChecked}
-              />
-            ) : (
+            <ClassifiedDataCategoryDropdown
+              dataCategories={dataCategories}
+              // TODO: make this real
+              mostLikelyCategories={dataCategories
+                .slice(0, 5)
+                .map((d) => ({ ...d, confidence: 97 }))}
+              checked={checked}
+              onChecked={onChecked}
+            />
+          </Box>
+          <QuestionTooltip label={tooltip} />
+        </Box>
+      ) : (
+        <Stack>
+          <Box display="flex" alignItems="center">
+            <Box mr="2" width="100%">
               <DataCategoryDropdown
                 dataCategories={dataCategories}
                 checked={checked}
                 onChecked={onChecked}
               />
-            )}
+            </Box>
+            <QuestionTooltip label={tooltip} />
           </Box>
-          <QuestionTooltip label={tooltip} />
-        </Box>
-        <Stack data-testid="selected-categories">
-          {sortedCheckedDataCategories.map((dc) => (
-            <TaxonomyEntityTag
-              key={dc}
-              name={dc}
-              onClose={() => {
-                handleRemoveDataCategory(dc);
-              }}
-            />
-          ))}
+          <Stack data-testid="selected-categories">
+            {sortedCheckedDataCategories.map((dc) => (
+              <TaxonomyEntityTag
+                key={dc}
+                name={dc}
+                onClose={() => {
+                  handleRemoveDataCategory(dc);
+                }}
+              />
+            ))}
+          </Stack>
         </Stack>
-      </Stack>
+      )}
     </Grid>
   );
 };