ui/taxonomy: CustomSelect isClearable - handle empty string selection

CHANGELOG.md

@@ -33,6 +33,7 @@ The types of changes are:
 * Removed local storage parsing that is redundant with redux-persist. [#1678](https://github.com/ethyca/fides/pull/1678)
 * Show a helpful error message if Docker daemon is not running during "fides deploy" [#1694](https://github.com/ethyca/fides/pull/1694)
 * Allow users to query their own permissions, including root user. [#1698](https://github.com/ethyca/fides/pull/1698)
+* Single-select taxonomy fields legal basis and special category can be cleared. [#1712](https://github.com/ethyca/fides/pull/1712)
 
 ### Security
 

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

@@ -224,10 +224,15 @@ describe("Taxonomy management page", () => {
         "https://example.org/legitimate_interest_assessment"
       );
 
-      // trigger a PUT
       cy.getByTestId("input-legitimate_interest_impact_assessment")
         .clear()
         .type("foo");
+      // Test clearable single-select.
+      cy.getByTestId("input-legal_basis").within(() => {
+        cy.get('[aria-label="Clear selected options"]').click();
+      });
+      cy.getByTestId("input-special_category").click().type("{backspace}{esc}");
+      // trigger a PUT
       cy.getByTestId("submit-btn").click();
       cy.wait("@putDataUse").then((interception) => {
         const { body } = interception.request;
@@ -237,8 +242,6 @@ describe("Taxonomy management page", () => {
           description:
             "Provide, give, or make available the product, service, application or system.",
           is_default: true,
-          legal_basis: "Legitimate Interests",
-          special_category: "Vital Interests",
           recipients: ["marketing team", "dog shelter"],
           legitimate_interest: true,
           legitimate_interest_impact_assessment: "foo",

clients/admin-ui/src/features/common/form/inputs.tsx

@@ -154,6 +154,8 @@ export const CustomSelect = ({
             onChange={(newValue) => {
               if (newValue) {
                 field.onChange(props.name)(newValue.value);
+              } else if (isClearable) {
+                field.onChange(props.name)("");
               }
             }}
             name={props.name}

clients/admin-ui/src/features/taxonomy/hooks.tsx

@@ -122,6 +122,14 @@ export const useDataUse = (): TaxonomyHookData<DataUse> => {
     legitimate_interest: !!(
       formValues.legitimate_interest?.toString() === "true"
     ),
+    legal_basis:
+      formValues.legal_basis?.toString() === ""
+        ? undefined
+        : formValues.legal_basis,
+    special_category:
+      formValues.special_category?.toString() === ""
+        ? undefined
+        : formValues.special_category,
   });
 
   const [handleDelete] = useDeleteDataUseMutation();
@@ -156,11 +164,13 @@ export const useDataUse = (): TaxonomyHookData<DataUse> => {
         name="legal_basis"
         label={labels.legal_basis}
         options={legalBases}
+        isClearable
       />
       <CustomSelect
         name="special_category"
         label={labels.special_category}
         options={specialCategories}
+        isClearable
       />
       <CustomCreatableMultiSelect
         name="recipients"