Migrate custom selects (Chakra -> Ant) (#5502)

CHANGELOG.md

@@ -18,6 +18,8 @@ The types of changes are:
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.50.0...main)
 
 
+### Developer Experience
+- Migrated remaining instances of Chakra's Select component to use Ant's Select component [#5502](https://github.com/ethyca/fides/pull/5502)
 
 
 

clients/admin-ui/cypress/e2e/config-wizard.cy.ts

@@ -23,7 +23,7 @@ describe("Config Wizard", () => {
       cy.getByTestId("authenticate-aws-form");
       cy.getByTestId("input-aws_access_key_id").type("fakeAccessKey");
       cy.getByTestId("input-aws_secret_access_key").type("fakeSecretAccessKey");
-      cy.getByTestId("input-region_name").type("us-east-1{Enter}");
+      cy.getByTestId("controlled-select-region_name").type("us-east-1{Enter}");
     });
 
     it("Allows submitting the form and reviewing the results", () => {

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

@@ -163,9 +163,7 @@ describe("Connectors", () => {
 
     it("allows the user to add an email connector", () => {
       cy.visit("/datastore-connection/new");
-      cy.getByTestId("select-dropdown-btn").click();
-      cy.getByTestId("select-dropdown-list").contains("Email connectors");
-      cy.getByTestId("select-dropdown-btn").click();
+      cy.getByTestId("connection-type-filter").antSelect("Email connectors");
       cy.getByTestId("sovrn-item").click();
       cy.url().should("contain", "/new?step=2");
 

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

@@ -249,11 +249,11 @@ describe("Consent configuration", () => {
         cy.getByTestId("add-vendor-btn").click();
         cy.getByTestId("input-name").type("Aniview LTD{enter}");
         cy.wait("@getDictionaryDeclarations");
-        cy.getSelectValueContainer(
-          "input-privacy_declarations.0.consent_use",
+        cy.getByTestId(
+          "controlled-select-privacy_declarations.0.consent_use",
         ).contains("Marketing");
-        cy.getSelectValueContainer(
-          "input-privacy_declarations.0.data_use",
+        cy.getByTestId(
+          "controlled-select-privacy_declarations.0.data_use",
         ).contains("Profiling for Advertising");
         ["av_*", "aniC", "2_C_*"].forEach((cookieName) => {
           cy.getByTestId("input-privacy_declarations.0.cookieNames").contains(
@@ -262,8 +262,8 @@ describe("Consent configuration", () => {
         });
 
         // Also check one that shouldn't have any cookies
-        cy.getSelectValueContainer(
-          "input-privacy_declarations.1.data_use",
+        cy.getByTestId(
+          "controlled-select-privacy_declarations.1.data_use",
         ).contains("Analytics for Insights");
         cy.getByTestId("input-privacy_declarations.1.cookieNames").contains(
           "Select...",

clients/admin-ui/cypress/e2e/custom-fields.cy.ts

@@ -315,12 +315,12 @@ describe("Custom Fields", () => {
           "have.value",
           "Description!!",
         );
-        cy.getSelectValueContainer("input-resource_type").contains(
+        cy.getByTestId("controlled-select-resource_type").contains(
           "taxonomy:data category",
         );
 
         // Configuration
-        cy.getSelectValueContainer("input-field_type").contains(
+        cy.getByTestId("controlled-select-field_type").contains(
           "Single select",
         );
         cy.getByTestId("custom-input-allow_list.allowed_values[0]").should(
@@ -336,7 +336,9 @@ describe("Custom Fields", () => {
       it("can edit field information", () => {
         const newDescription = "new description";
         cy.getByTestId("custom-input-description").clear().type(newDescription);
-        cy.selectOption("input-field_type", "Multiple select");
+        cy.getByTestId("controlled-select-field_type").antSelect(
+          "Multiple select",
+        );
         cy.getByTestId("save-btn").click();
         cy.wait("@putCustomFieldDefinition").then((interception) => {
           const { body } = interception.request;
@@ -399,7 +401,9 @@ describe("Custom Fields", () => {
 
         // Configuration
         const allowList = ["snorlax", "eevee"];
-        cy.selectOption("input-field_type", "Single select");
+        cy.getByTestId("controlled-select-field_type").antSelect(
+          "Single select",
+        );
         allowList.forEach((item, idx) => {
           cy.getByTestId("add-list-value-btn").click();
           cy.getByTestId(`custom-input-allow_list.allowed_values[${idx}]`).type(
@@ -428,10 +432,12 @@ describe("Custom Fields", () => {
         // Field info
         cy.getByTestId("custom-input-name").type(payload.name);
         cy.getByTestId("custom-input-description").type(payload.description);
-        cy.selectOption("input-resource_type", "taxonomy:data category");
+        cy.getByTestId("controlled-select-resource_type").antSelect(
+          "taxonomy:data category",
+        );
 
         // Configuration
-        cy.selectOption("input-field_type", "Open Text");
+        cy.getByTestId("controlled-select-field_type").antSelect("Open Text");
 
         cy.getByTestId("save-btn").click();
         cy.wait("@postCustomFieldDefinition").then((interception) => {

clients/admin-ui/cypress/e2e/integration-management.cy.ts

@@ -157,7 +157,9 @@ describe("Integration management for data detection & discovery", () => {
             parseSpecialCharSequences: false,
           },
         );
-        cy.selectOption("input-system_fides_key", "Fidesctl System");
+        cy.getByTestId("controlled-select-system_fides_key").antSelect(
+          "Fidesctl System",
+        );
         cy.getByTestId("save-btn").click();
         cy.wait("@patchSystemConnection");
       });
@@ -279,7 +281,9 @@ describe("Integration management for data detection & discovery", () => {
         cy.getByTestId("add-monitor-btn").click();
         cy.getByTestId("add-modal-content").should("be.visible");
         cy.getByTestId("input-name").type("A new monitor");
-        cy.selectOption("input-execution_frequency", "Daily");
+        cy.getByTestId("controlled-select-execution_frequency").antSelect(
+          "Daily",
+        );
         cy.getByTestId("input-execution_start_date").type("2034-06-03T10:00");
         cy.getByTestId("next-btn").click();
         cy.wait("@getDatabasesPage1");
@@ -298,7 +302,9 @@ describe("Integration management for data detection & discovery", () => {
         cy.getByTestId("add-monitor-btn").click();
         cy.getByTestId("add-modal-content").should("be.visible");
         cy.getByTestId("input-name").type("A new monitor");
-        cy.selectOption("input-execution_frequency", "Daily");
+        cy.getByTestId("controlled-select-execution_frequency").antSelect(
+          "Daily",
+        );
         cy.getByTestId("input-execution_start_date").type("2034-06-03T10:00");
         cy.getByTestId("next-btn").click();
         cy.wait("@getDatabasesPage1");
@@ -321,7 +327,9 @@ describe("Integration management for data detection & discovery", () => {
         cy.getByTestId("add-monitor-btn").click();
         cy.getByTestId("add-modal-content").should("be.visible");
         cy.getByTestId("input-name").type("A new monitor");
-        cy.selectOption("input-execution_frequency", "Daily");
+        cy.getByTestId("controlled-select-execution_frequency").antSelect(
+          "Daily",
+        );
         cy.getByTestId("input-execution_start_date").type("2034-06-03T10:00");
         cy.getByTestId("next-btn").click();
         cy.wait("@getDatabasesPage1");
@@ -367,7 +375,7 @@ describe("Integration management for data detection & discovery", () => {
       it("can edit an existing monitor by clicking the table row", () => {
         cy.getByTestId("row-test monitor 2").click();
         cy.getByTestId("input-name").should("have.value", "test monitor 2");
-        cy.getSelectValueContainer("input-execution_frequency").should(
+        cy.getByTestId("controlled-select-execution_frequency").should(
           "contain",
           "Weekly",
         );
@@ -406,12 +414,11 @@ describe("Integration management for data detection & discovery", () => {
         cy.intercept("GET", "/api/v1/plus/discovery-monitor*", {
           fixture: "detection-discovery/monitors/monitor_list.json",
         }).as("getMonitors");
-        cy.intercept("/api/v1/plus/discovery-monitor/databases", {
+        cy.intercept("POST", "/api/v1/plus/discovery-monitor/databases", {
           fixture: "empty-pagination.json",
         }).as("getEmptyDatabases");
         cy.getByTestId("tab-Data discovery").click();
         cy.wait("@getMonitors");
-        cy.clock(new Date(2034, 5, 3));
       });
 
       it("skips the project/database selection step", () => {
@@ -420,7 +427,9 @@ describe("Integration management for data detection & discovery", () => {
         }).as("putMonitor");
         cy.getByTestId("add-monitor-btn").click();
         cy.getByTestId("input-name").type("A new monitor");
-        cy.selectOption("input-execution_frequency", "Daily");
+        cy.getByTestId("controlled-select-execution_frequency").antSelect(
+          "Daily",
+        );
         cy.getByTestId("input-execution_start_date").type("2034-06-03T10:00");
         cy.getByTestId("next-btn").click();
         cy.wait("@putMonitor");

clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts

@@ -186,7 +186,9 @@ describe("Privacy experiences", () => {
 
       it("can create an experience", () => {
         cy.getByTestId("input-name").type("Test experience name");
-        cy.selectOption("input-component", "Banner and modal");
+        cy.getByTestId("controlled-select-component").antSelect(
+          "Banner and modal",
+        );
         cy.getByTestId("add-privacy-notice").click();
         cy.getByTestId("select-privacy-notice").antSelect(0);
         cy.getByTestId("add-location").click();
@@ -230,21 +232,30 @@ describe("Privacy experiences", () => {
       });
 
       it("doesn't allow component type to be changed after selection", () => {
-        cy.selectOption("input-component", "Banner and modal");
-        cy.getByTestId("input-component").find("input").should("be.disabled");
+        cy.getByTestId("controlled-select-component").antSelect(
+          "Banner and modal",
+        );
+        cy.getByTestId("controlled-select-component").should(
+          "have.class",
+          "ant-select-disabled",
+        );
         cy.getByTestId("input-dismissable").should("be.visible");
       });
 
       it("doesn't show a preview for a privacy center", () => {
-        cy.selectOption("input-component", "Privacy center");
+        cy.getByTestId("controlled-select-component").antSelect(
+          "Privacy center",
+        );
         cy.getByTestId("input-dismissable").should("not.be.visible");
         cy.getByTestId("no-preview-notice").contains(
           "Privacy center preview not available",
         );
       });
 
       it("doesn't show preview until privacy notice is added", () => {
-        cy.selectOption("input-component", "Banner and modal");
+        cy.getByTestId("controlled-select-component").antSelect(
+          "Banner and modal",
+        );
         cy.getByTestId("no-preview-notice").contains(
           "No privacy notices added",
         );
@@ -256,7 +267,9 @@ describe("Privacy experiences", () => {
 
       it("shows option to display privacy notices in banner and updates preview when clicked", () => {
         cy.getByTestId("input-show_layer1_notices").should("not.be.visible");
-        cy.selectOption("input-component", "Banner and modal");
+        cy.getByTestId("controlled-select-component").antSelect(
+          "Banner and modal",
+        );
         cy.getByTestId("add-privacy-notice").click();
         cy.getByTestId("select-privacy-notice").antSelect(0);
         cy.getByTestId("input-show_layer1_notices").click();
@@ -267,7 +280,9 @@ describe("Privacy experiences", () => {
       });
 
       it("allows editing experience text and shows updated text in the preview", () => {
-        cy.selectOption("input-component", "Banner and modal");
+        cy.getByTestId("controlled-select-component").antSelect(
+          "Banner and modal",
+        );
         cy.getByTestId("add-privacy-notice").click();
         cy.getByTestId("select-privacy-notice").antSelect(0);
         cy.getByTestId("edit-experience-btn").click();
@@ -288,7 +303,10 @@ describe("Privacy experiences", () => {
 
       it("populates the form and shows the preview with the existing values", () => {
         cy.wait("@getExperienceDetail");
-        cy.getByTestId("input-component").find("input").should("be.disabled");
+        cy.getByTestId("controlled-select-component").should(
+          "have.class",
+          "ant-select-disabled",
+        );
         cy.getByTestId("input-name").should(
           "have.value",
           "Example modal experience",

clients/admin-ui/cypress/e2e/privacy-notices.cy.ts

@@ -238,7 +238,7 @@ describe("Privacy notices", () => {
         cy.getByTestId("input-name").should("have.value", notice.name);
 
         // consent mechanism section
-        cy.getSelectValueContainer("input-consent_mechanism").contains(
+        cy.getByTestId("controlled-select-consent_mechanism").contains(
           "Notice only",
         );
 
@@ -250,11 +250,11 @@ describe("Privacy notices", () => {
 
         // configuration section
         notice.data_uses.forEach((dataUse) => {
-          cy.getSelectValueContainer("input-data_uses").contains(dataUse);
+          cy.getByTestId("controlled-select-data_uses").contains(dataUse);
         });
 
         // enforcement level
-        cy.getSelectValueContainer("input-enforcement_level").contains(
+        cy.getByTestId("controlled-select-enforcement_level").contains(
           "Not applicable",
         );
 
@@ -368,11 +368,13 @@ describe("Privacy notices", () => {
       cy.getByTestId("input-name").type(notice.name);
 
       // consent mechanism section
-      cy.selectOption("input-consent_mechanism", "Opt in");
+      cy.getByTestId("controlled-select-consent_mechanism").antSelect("Opt in");
       cy.getByTestId("input-has_gpc_flag").click();
 
       // configuration section
-      cy.selectOption("input-data_uses", notice.data_uses[0]);
+      cy.getByTestId("controlled-select-data_uses").antSelect(
+        notice.data_uses[0],
+      );
 
       // translations
       cy.getByTestId("input-translations.0.title").type("Title");

clients/admin-ui/cypress/e2e/privacy-requests.cy.ts

@@ -274,7 +274,10 @@ describe("Privacy Requests", () => {
       it("shows configured fields and values", () => {
         cy.getByTestId("submit-request-btn").click();
         cy.wait("@getPrivacyCenterConfig");
-        cy.getSelectValueContainer("input-policy_key").type("a{enter}");
+
+        cy.getByTestId("controlled-select-policy_key").antSelect(
+          "Access your data",
+        );
         cy.getByTestId("input-identity.phone").should("not.exist");
         cy.getByTestId("input-identity.email").should("exist");
         cy.getByTestId(
@@ -292,7 +295,7 @@ describe("Privacy Requests", () => {
       it("can submit a privacy request", () => {
         cy.getByTestId("submit-request-btn").click();
         cy.wait("@getPrivacyCenterConfig");
-        cy.getSelectValueContainer("input-policy_key").type("a{enter}");
+        cy.getByTestId("controlled-select-policy_key").type("a{enter}");
         cy.getByTestId("input-identity.email").type("email@ethyca.com");
         cy.getByTestId(
           "input-custom_privacy_request_fields.required_field.value",