ENG-3176: Migrate consent settings forms to Ant Design

changelog/7967-consent-settings-forms-ant.yaml

@@ -0,0 +1,4 @@
+type: Changed
+description: Migrated consent settings forms from Formik/Chakra to Ant Design
+pr: 7967
+labels: []

clients/admin-ui/cypress/e2e/consent-settings.cy.ts

@@ -51,7 +51,7 @@ describe("Consent settings", () => {
       cy.visit(GLOBAL_CONSENT_CONFIG_ROUTE);
       cy.getByTestId("consent-configuration");
       cy.getByTestId("setting-Global Privacy Platform").within(() => {
-        cy.get("p").contains("GPP status Enabled");
+        cy.contains("GPP status Enabled").should("exist");
         cy.getByTestId("option-national").should("not.have.attr", "checked");
         cy.getByTestId("option-state").should("have.attr", "checked");
         cy.getByTestId("input-gpp.mspa_covered_transactions").should(
@@ -78,7 +78,7 @@ describe("Consent settings", () => {
       cy.intercept("/api/v1/config?api_set=true", { body: API_CONFIG });
       cy.visit(GLOBAL_CONSENT_CONFIG_ROUTE);
       cy.getByTestId("setting-Global Privacy Platform").within(() => {
-        cy.get("p").contains("GPP status Enabled");
+        cy.contains("GPP status Enabled").should("exist");
         cy.getByTestId("option-national").should("have.attr", "checked");
         cy.getByTestId("option-state").should("not.have.attr", "checked");
         cy.getByTestId("input-gpp.mspa_covered_transactions").should(
@@ -376,7 +376,7 @@ describe("Consent settings", () => {
           "Restrict all vendors",
           { force: true },
         );
-        cy.getByTestId("controlled-select-vendor_ids").should("not.be.visible");
+        cy.getByTestId("controlled-select-vendor_ids").should("not.exist");
         cy.getByTestId("save-restriction-button").click();
         cy.wait("@createRestriction");
         cy.contains("Restriction created successfully").should("be.visible");
@@ -412,7 +412,9 @@ describe("Consent settings", () => {
         // a more comprehensive test of the validation exists in the unit tests, this is just a check of the UI for the error message
         cy.get("input[id='vendor_ids']").type("invalid format{enter}");
         cy.get("input[id='vendor_ids']").blur();
-        cy.getByTestId("error-vendor_ids").should("be.visible");
+        cy.contains("Vendor IDs must be numbers or ranges").should(
+          "be.visible",
+        );
       });
 
       it("displays purpose restrictions table correctly", () => {

clients/admin-ui/src/features/consent-settings/DeprecatedPurposeOverrides.tsx

@@ -1,9 +1,7 @@
-import { ColumnsType, Table } from "fidesui";
-import { FieldArray, useFormikContext } from "formik";
+import { ColumnsType, Form, Switch, Table } from "fidesui";
 import { useMemo } from "react";
 
 import { useAppSelector } from "~/app/hooks";
-import { CustomSwitch } from "~/features/common/form/inputs";
 import { selectPurposes } from "~/features/common/purpose.slice";
 
 type FormPurposeOverride = {
@@ -23,18 +21,23 @@ const HIDDEN_PURPOSES = [1, 3, 4, 5, 6];
  * @deprecated
  */
 const DeprecatedPurposeOverrides = () => {
-  const { values, setFieldValue } = useFormikContext<{
+  const form = Form.useFormInstance<{
     purposeOverrides: FormPurposeOverride[];
   }>();
+  const watchedOverrides = Form.useWatch("purposeOverrides", form);
+  const purposeOverrides: FormPurposeOverride[] = useMemo(
+    () => watchedOverrides ?? [],
+    [watchedOverrides],
+  );
   const { purposes: purposeMapping } = useAppSelector(selectPurposes);
 
   const dataSourceWithIndex: FormPurposeOverrideWithIndex[] = useMemo(
     () =>
-      values.purposeOverrides.map((override, index) => ({
+      purposeOverrides.map((override, index) => ({
         ...override,
         index,
       })),
-    [values.purposeOverrides],
+    [purposeOverrides],
   );
 
   const columns: ColumnsType<FormPurposeOverrideWithIndex> = useMemo(
@@ -54,20 +57,22 @@ const DeprecatedPurposeOverrides = () => {
         width: 100,
         align: "center",
         render: (_, record) => (
-          <CustomSwitch
-            name={`purposeOverrides[${record.index}].is_included`}
+          <Switch
+            size="small"
+            checked={record.is_included}
             onChange={(checked) => {
-              if (!checked) {
-                setFieldValue(
-                  `purposeOverrides[${record.index}].is_consent`,
-                  false,
-                );
-                setFieldValue(
-                  `purposeOverrides[${record.index}].is_legitimate_interest`,
-                  false,
-                );
-              }
+              const updated = [...purposeOverrides];
+              updated[record.index] = {
+                ...updated[record.index],
+                is_included: checked,
+                ...(checked
+                  ? {}
+                  : { is_consent: false, is_legitimate_interest: false }),
+              };
+              form.setFieldValue("purposeOverrides", updated);
             }}
+            data-testid={`input-purposeOverrides[${record.index}].is_included`}
+            className="mr-2"
           />
         ),
       },
@@ -81,12 +86,23 @@ const DeprecatedPurposeOverrides = () => {
             return null;
           }
           return (
-            <CustomSwitch
-              isDisabled={
-                !values.purposeOverrides[record.index].is_included ||
-                values.purposeOverrides[record.index].is_legitimate_interest
+            <Switch
+              size="small"
+              checked={record.is_consent}
+              disabled={
+                !purposeOverrides[record.index]?.is_included ||
+                purposeOverrides[record.index]?.is_legitimate_interest
               }
-              name={`purposeOverrides[${record.index}].is_consent`}
+              onChange={(checked) => {
+                const updated = [...purposeOverrides];
+                updated[record.index] = {
+                  ...updated[record.index],
+                  is_consent: checked,
+                };
+                form.setFieldValue("purposeOverrides", updated);
+              }}
+              data-testid={`input-purposeOverrides[${record.index}].is_consent`}
+              className="mr-2"
             />
           );
         },
@@ -101,34 +117,40 @@ const DeprecatedPurposeOverrides = () => {
             return null;
           }
           return (
-            <CustomSwitch
-              isDisabled={
-                !values.purposeOverrides[record.index].is_included ||
-                values.purposeOverrides[record.index].is_consent
+            <Switch
+              size="small"
+              checked={record.is_legitimate_interest}
+              disabled={
+                !purposeOverrides[record.index]?.is_included ||
+                purposeOverrides[record.index]?.is_consent
               }
-              name={`purposeOverrides[${record.index}].is_legitimate_interest`}
+              onChange={(checked) => {
+                const updated = [...purposeOverrides];
+                updated[record.index] = {
+                  ...updated[record.index],
+                  is_legitimate_interest: checked,
+                };
+                form.setFieldValue("purposeOverrides", updated);
+              }}
+              data-testid={`input-purposeOverrides[${record.index}].is_legitimate_interest`}
+              className="mr-2"
             />
           );
         },
       },
     ],
-    [purposeMapping, values.purposeOverrides, setFieldValue],
+    [purposeMapping, purposeOverrides, form],
   );
 
   return (
-    <FieldArray
-      name="purposeOverrides"
-      render={() => (
-        <Table
-          dataSource={dataSourceWithIndex}
-          columns={columns}
-          rowKey="purpose"
-          pagination={false}
-          size="small"
-          bordered
-          data-testid="deprecated-purpose-overrides-table"
-        />
-      )}
+    <Table
+      dataSource={dataSourceWithIndex}
+      columns={columns}
+      rowKey="purpose"
+      pagination={false}
+      size="small"
+      bordered
+      data-testid="deprecated-purpose-overrides-table"
     />
   );
 };

clients/admin-ui/src/features/consent-settings/FrameworkStatus.tsx

@@ -1,4 +1,4 @@
-import { ChakraStack as Stack, ChakraText as Text, Tag } from "fidesui";
+import { Flex, Tag } from "fidesui";
 
 import DocsLink from "~/features/common/DocsLink";
 
@@ -9,27 +9,21 @@ const FrameworkStatus = ({
   name: string;
   enabled: boolean;
 }) => (
-  <Stack
-    spacing={2}
-    fontSize="sm"
-    lineHeight="5"
-    fontWeight="medium"
-    color="gray.700"
-  >
-    <Text>
+  <Flex vertical gap="small" className="text-sm font-medium">
+    <span>
       {name} status{" "}
       {enabled ? (
         <Tag color="success">Enabled</Tag>
       ) : (
         <Tag color="error">Disabled</Tag>
       )}
-    </Text>
-    <Text>
+    </span>
+    <span>
       To {enabled ? "disable" : "enable"} {name}, please contact your Fides
       administrator or{" "}
       <DocsLink href="mailto:support@ethyca.com">Ethyca support</DocsLink>.
-    </Text>
-  </Stack>
+    </span>
+  </Flex>
 );
 
 export default FrameworkStatus;