Migrate toggle switches from Chakra to Ant Design (#5323)

ethyca · Sep 26, 2024 · feeeae1 · feeeae1
1 parent dba1a56
commit feeeae1
Show file tree

Hide file tree

Showing 29 changed files with 196 additions and 643 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,9 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.46.0...main)
 
+### Developer Experience
+- Migrate toggle switches from Chakra to Ant Design [#5323](https://github.com/ethyca/fides/pull/5323)
+
 
 ## [2.46.0](https://github.com/ethyca/fides/compare/2.45.2...2.46.0)
 

diff --git a/clients/admin-ui/cypress/e2e/consent-settings.cy.ts b/clients/admin-ui/cypress/e2e/consent-settings.cy.ts
@@ -82,15 +82,18 @@ describe("Consent settings", () => {
         );
         cy.getByTestId("input-gpp.mspa_service_provider_mode").should(
           "have.attr",
-          "data-checked",
+          "aria-checked",
+          "true",
         );
         cy.getByTestId("input-gpp.mspa_opt_out_option_mode").should(
-          "not.have.attr",
-          "data-checked",
+          "have.attr",
+          "aria-checked",
+          "false",
         );
         cy.getByTestId("input-gpp.enable_tcfeu_string").should(
           "have.attr",
-          "data-checked",
+          "aria-checked",
+          "true",
         );
       });
     });
@@ -115,17 +118,17 @@ describe("Consent settings", () => {
         cy.getByTestId("input-gpp.mspa_service_provider_mode").click();
         cy.getByTestId("input-gpp.mspa_opt_out_option_mode").should(
           "have.attr",
-          "data-disabled",
+          "disabled",
         );
         cy.getByTestId("input-gpp.mspa_service_provider_mode").click();
         cy.getByTestId("input-gpp.mspa_opt_out_option_mode").should(
           "not.have.attr",
-          "data-disabled",
+          "disabled",
         );
         cy.getByTestId("input-gpp.mspa_opt_out_option_mode").click();
         cy.getByTestId("input-gpp.mspa_service_provider_mode").should(
           "have.attr",
-          "data-disabled",
+          "disabled",
         );
       });
     });

diff --git a/clients/admin-ui/cypress/e2e/custom-fields.cy.ts b/clients/admin-ui/cypress/e2e/custom-fields.cy.ts
@@ -245,9 +245,11 @@ describe("Custom Fields", () => {
 
       it("can disable a custom field with a warning", () => {
         cy.getByTestId("row-2").within(() => {
-          cy.getByTestId("toggle-switch").within(() => {
-            cy.get("span").should("have.attr", "data-checked");
-          });
+          cy.getByTestId("toggle-switch").should(
+            "have.attr",
+            "aria-checked",
+            "true",
+          );
           cy.getByTestId("toggle-switch").click();
         });
 

diff --git a/clients/admin-ui/cypress/e2e/messaging.cy.ts b/clients/admin-ui/cypress/e2e/messaging.cy.ts
@@ -51,12 +51,9 @@ describe("Messaging", () => {
     cy.visit("/messaging");
     cy.wait("@getEmailTemplatesSummary");
 
-    cy.get("table")
-      .find("tbody")
-      .find("tr")
-      .first()
-      .find("td input")
-      .uncheck({ force: true });
+    cy.getByTestId("row-0-col-is_enabled").within(() => {
+      cy.get('[role="switch"]').click();
+    });
 
     cy.wait("@patchTemplate").then((interception) => {
       expect(interception.request.body).to.deep.equal({
@@ -115,7 +112,11 @@ describe("Messaging", () => {
       "Your access request has been completed and can be downloaded at {{download_link}}. For security purposes, this secret link will expire in {{days}} days.",
     );
 
-    cy.getByTestId("input-is_enabled").find("input").should("not.be.checked");
+    cy.getByTestId("input-is_enabled").should(
+      "have.attr",
+      "aria-checked",
+      "false",
+    );
   });
 
   it("should save template after selecting a property and clicking save", () => {

diff --git a/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts b/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts
@@ -153,9 +153,11 @@ describe("Privacy experiences", () => {
         cy.get("table")
           .contains("tr", "notice enabled test")
           .within(() => {
-            cy.getByTestId("toggle-switch").within(() => {
-              cy.get("span").should("have.attr", "data-checked");
-            });
+            cy.getByTestId("toggle-switch").should(
+              "have.attr",
+              "aria-checked",
+              "true",
+            );
             cy.getByTestId("toggle-switch").click();
           });
 

diff --git a/clients/admin-ui/cypress/e2e/privacy-notices.cy.ts b/clients/admin-ui/cypress/e2e/privacy-notices.cy.ts
@@ -156,9 +156,11 @@ describe("Privacy notices", () => {
         cy.get("table")
           .contains("tr", "Essential")
           .within(() => {
-            cy.getByTestId("toggle-switch").within(() => {
-              cy.get("span").should("have.attr", "data-checked");
-            });
+            cy.getByTestId("toggle-switch").should(
+              "have.attr",
+              "aria-checked",
+              "true",
+            );
             cy.getByTestId("toggle-switch").click();
           });
 

diff --git a/clients/admin-ui/cypress/e2e/user-management.cy.ts b/clients/admin-ui/cypress/e2e/user-management.cy.ts
@@ -432,9 +432,11 @@ describe("User management", () => {
             });
 
             // the select all toggle should no longer be selected
-            cy.getByTestId("assign-all-systems-toggle").within(() => {
-              cy.get("span").should("not.have.attr", "data-checked");
-            });
+            cy.getByTestId("assign-all-systems-toggle").should(
+              "have.attr",
+              "aria-checked",
+              "false",
+            );
           });
           cy.getByTestId("confirm-btn").click();
           cy.getByTestId("save-btn").click();
@@ -450,17 +452,21 @@ describe("User management", () => {
         });
 
         it("can use the select all toggle to unassign systems", () => {
-          cy.getByTestId("assign-all-systems-toggle").within(() => {
-            cy.get("span").should("have.attr", "data-checked");
-          });
+          cy.getByTestId("assign-all-systems-toggle").should(
+            "have.attr",
+            "aria-checked",
+            "true",
+          );
           // all toggles in every row should be checked
 
           cy.getByTestId("assign-systems-modal-body").within(() => {
             systems.forEach((fidesKey) => {
               cy.getByTestId(`row-${fidesKey}`).within(() => {
-                cy.getByTestId("assign-switch").within(() => {
-                  cy.get("span").should("have.attr", "data-checked");
-                });
+                cy.getByTestId("assign-switch").should(
+                  "have.attr",
+                  "aria-checked",
+                  "true",
+                );
               });
             });
           });
@@ -470,9 +476,11 @@ describe("User management", () => {
           cy.getByTestId("assign-systems-modal-body").within(() => {
             systems.forEach((fidesKey) => {
               cy.getByTestId(`row-${fidesKey}`).within(() => {
-                cy.getByTestId("assign-switch").within(() => {
-                  cy.get("span").should("not.have.attr", "data-checked");
-                });
+                cy.getByTestId("assign-switch").should(
+                  "have.attr",
+                  "aria-checked",
+                  "false",
+                );
               });
             });
           });
@@ -496,23 +504,29 @@ describe("User management", () => {
             ["demo_marketing_system", "demo_analytics_system"].forEach(
               (fidesKey) => {
                 cy.getByTestId(`row-${fidesKey}`).within(() => {
-                  cy.getByTestId("assign-switch").within(() => {
-                    cy.get("span").should("not.have.attr", "data-checked");
-                  });
+                  cy.getByTestId("assign-switch").should(
+                    "have.attr",
+                    "aria-checked",
+                    "false",
+                  );
                 });
               },
             );
 
             // the one that was not in the search should not have been affected
             cy.getByTestId("system-search").clear();
             cy.getByTestId(`row-fidesctl_system`).within(() => {
-              cy.getByTestId("assign-switch").within(() => {
-                cy.get("span").should("have.attr", "data-checked");
-              });
-            });
-            cy.getByTestId("assign-all-systems-toggle").within(() => {
-              cy.get("span").should("not.have.attr", "data-checked");
+              cy.getByTestId("assign-switch").should(
+                "have.attr",
+                "aria-checked",
+                "true",
+              );
             });
+            cy.getByTestId("assign-all-systems-toggle").should(
+              "have.attr",
+              "aria-checked",
+              "false",
+            );
 
             // now do the reverse: toggle on while filtered
             // toggle everyone off by clicking on the all toggle twice
@@ -523,9 +537,11 @@ describe("User management", () => {
             cy.getByTestId("assign-all-systems-toggle").click();
             cy.getByTestId("system-search").clear();
             cy.getByTestId(`row-fidesctl_system`).within(() => {
-              cy.getByTestId("assign-switch").within(() => {
-                cy.get("span").should("not.have.attr", "data-checked");
-              });
+              cy.getByTestId("assign-switch").should(
+                "have.attr",
+                "aria-checked",
+                "false",
+              );
             });
           });
         });

diff --git a/clients/admin-ui/src/features/common/ClassifyResultsToggle.tsx b/clients/admin-ui/src/features/common/ClassifyResultsToggle.tsx
diff --git a/clients/admin-ui/src/features/common/PIIToggle.tsx b/clients/admin-ui/src/features/common/PIIToggle.tsx