Skip to content

Commit

Permalink
Migrate one-off Select inputs to Ant (#5475)
Browse files Browse the repository at this point in the history
  • Loading branch information
gilluminate authored Nov 15, 2024
1 parent 1c8b2d7 commit 523c1ab
Show file tree
Hide file tree
Showing 39 changed files with 567 additions and 730 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ The types of changes are:
### Added
- Added namespace support for Snowflake [#5486](https://github.com/ethyca/fides/pull/5486)

### Developer Experience
- Migrated several instances of Chakra's Select component to use Ant's Select component [#5475](https://github.com/ethyca/fides/pull/5475)

### Fixed
- Fixed deletion of ConnectionConfigs that have related MonitorConfigs [#5478](https://github.com/ethyca/fides/pull/5478)

Expand Down
7 changes: 4 additions & 3 deletions clients/admin-ui/cypress/e2e/connectors.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,13 @@ describe("Connectors", () => {
// The dataset dropdown selector should have the value of the existing connected dataset
cy.getByTestId("save-dataset-link-btn").should("be.enabled");
cy.getByTestId("dataset-selector").should(
"have.value",
"have.text",
"postgres_example_test_dataset",
);

// Change the linked dataset
cy.getByTestId("dataset-selector").select("demo_users_dataset_2");
cy.getByTestId("dataset-selector").antSelect("demo_users_dataset_2");

cy.getByTestId("save-dataset-link-btn").click();

cy.wait("@patchDatasetconfig").then((interception) => {
Expand All @@ -95,7 +96,7 @@ describe("Connectors", () => {
cy.wait("@getPostgresConnectorDatasetconfig");

// Unset the linked dataset, which should switch the save button enable-ness
cy.getByTestId("dataset-selector").select("Select");
cy.getByTestId("dataset-selector").antClearSelect();
cy.getByTestId("save-dataset-link-btn").should("be.disabled");
// The monaco yaml editor takes a bit to load
// eslint-disable-next-line cypress/no-unnecessary-waiting
Expand Down
15 changes: 5 additions & 10 deletions clients/admin-ui/cypress/e2e/discovery-detection.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -389,19 +389,14 @@ describe("discovery and detection", () => {
});

it("allows classifications to be changed using the dropdown", () => {
cy.intercept("GET", "/api/v1/data_category", [
{ fides_key: "system", active: true },
{ fides_key: "user.contact", active: true },
]);
cy.intercept("PATCH", "/api/v1/plus/discovery-monitor/*/results", {
response: 200,
}).as("patchClassification");
stubTaxonomyEntities();
cy.intercept("PATCH", "/api/v1/plus/discovery-monitor/*/results").as(
"patchClassification",
);
cy.getByTestId("classification-user.device.device_id").click({
force: true,
});
cy.get(".select-wrapper").within(() => {
cy.getByTestId("option-system").click({ force: true });
});
cy.getByTestId("taxonomy-select").antSelect("system");
cy.wait("@patchClassification");
});

Expand Down
16 changes: 6 additions & 10 deletions clients/admin-ui/cypress/e2e/messaging.cy.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import { stubPlus } from "cypress/support/stubs";

const getSelectOptionList = (selectorId: string) =>
cy.getByTestId(selectorId).click().find(`.custom-select__menu-list`);

describe("Messaging", () => {
beforeEach(() => {
cy.login();
Expand Down Expand Up @@ -77,9 +74,8 @@ describe("Messaging", () => {

cy.getByTestId("add-messaging-template-modal").should("exist");

getSelectOptionList("template-type-selector")
.find(".custom-select__option")
.should("have.length", customizableMessagesCount);
cy.getByTestId("template-type-selector").click();
cy.get(".ant-select-item").should("have.length", customizableMessagesCount);
});

it("should redirect to the add new page after selecting a message type", () => {
Expand All @@ -88,7 +84,9 @@ describe("Messaging", () => {

cy.getByTestId("add-message-btn").click();

cy.selectOption("template-type-selector", "Access request completed");
cy.getByTestId("template-type-selector")
.find(".ant-select")
.antSelect("Access request completed");

cy.getByTestId("confirm-btn").click();

Expand Down Expand Up @@ -131,9 +129,7 @@ describe("Messaging", () => {

cy.getByTestId("submit-btn").should("be.disabled");
cy.getByTestId("add-property").click();
cy.getByTestId("select-property")
.find(".select-property__input-container")
.click();
cy.getByTestId("select-property").click();
cy.getByTestId("select-property").find("input").focus().type("{enter}");
cy.getByTestId("submit-btn").should("be.enabled");
cy.getByTestId("submit-btn").click();
Expand Down
32 changes: 6 additions & 26 deletions clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -188,17 +188,10 @@ describe("Privacy experiences", () => {
cy.getByTestId("input-name").type("Test experience name");
cy.selectOption("input-component", "Banner and modal");
cy.getByTestId("add-privacy-notice").click();
cy.getByTestId("select-privacy-notice").click();
cy.get(".select-privacy-notice__menu")
.find(".select-privacy-notice__option")
.first()
.click();
cy.getByTestId("select-privacy-notice").antSelect(0);
cy.getByTestId("add-location").click();
cy.getByTestId("select-location").click();
cy.get(".select-location__menu")
.find(".select-location__option")
.first()
.click();

cy.getByTestId("select-location").antSelect("France");
cy.intercept("POST", "/api/v1/experience-config", {
statusCode: 200,
}).as("postExperience");
Expand Down Expand Up @@ -256,11 +249,7 @@ describe("Privacy experiences", () => {
"No privacy notices added",
);
cy.getByTestId("add-privacy-notice").click();
cy.getByTestId("select-privacy-notice").click();
cy.get(".select-privacy-notice__menu")
.find(".select-privacy-notice__option")
.first()
.click();
cy.getByTestId("select-privacy-notice").antSelect(0);
cy.getByTestId("no-preview-notice").should("not.exist");
cy.get(`#${PREVIEW_CONTAINER_ID}`).should("be.visible");
});
Expand All @@ -269,12 +258,7 @@ describe("Privacy experiences", () => {
cy.getByTestId("input-show_layer1_notices").should("not.be.visible");
cy.selectOption("input-component", "Banner and modal");
cy.getByTestId("add-privacy-notice").click();
cy.getByTestId("select-privacy-notice").click();
cy.get(".select-privacy-notice__menu")
.find(".select-privacy-notice__option")
.first()
.as("SelectedPrivacyNotice")
.click();
cy.getByTestId("select-privacy-notice").antSelect(0);
cy.getByTestId("input-show_layer1_notices").click();
cy.get("#preview-container")
.find("#fides-banner")
Expand All @@ -285,11 +269,7 @@ describe("Privacy experiences", () => {
it("allows editing experience text and shows updated text in the preview", () => {
cy.selectOption("input-component", "Banner and modal");
cy.getByTestId("add-privacy-notice").click();
cy.getByTestId("select-privacy-notice").click();
cy.get(".select-privacy-notice__menu")
.find(".select-privacy-notice__option")
.first()
.click();
cy.getByTestId("select-privacy-notice").antSelect(0);
cy.getByTestId("edit-experience-btn").click();
cy.getByTestId("input-translations.0.title")
.clear()
Expand Down
16 changes: 3 additions & 13 deletions clients/admin-ui/cypress/e2e/privacy-notices.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -242,13 +242,7 @@ describe("Privacy notices", () => {
"Notice only",
);

cy.getByTestId("notice-locations").within(() => {
cy.get(".notice-locations--is-disabled");
cy.get(".notice-locations__value-container").should(
"contain",
"United States",
);
});
cy.getByTestId("notice-locations").should("contain", "United States");

cy.getByTestId("input-has_gpc_flag").within(() => {
cy.get("span").should("not.have.attr", "data-checked");
Expand Down Expand Up @@ -317,10 +311,7 @@ describe("Privacy notices", () => {

cy.getByTestId("add-children").click();
cy.getByTestId("select-children").click();
cy.get(".select-children__menu")
.find(".select-children__option")
.first()
.click();
cy.get(".ant-select-dropdown").find(".ant-select-item").first().click();

cy.getByTestId("save-btn").click();
cy.wait("@patchNotices").then((interception) => {
Expand Down Expand Up @@ -391,8 +382,7 @@ describe("Privacy notices", () => {

// add a new translation
cy.getByTestId("add-language-btn").click();
cy.getByTestId("select-language").click();
cy.get(".select-language__menu").find(".select-language__option").click();
cy.getByTestId("select-language").antSelect("French");
cy.getByTestId("input-translations.1.title").type("Le titre");
cy.getByTestId("input-translations.1.description").type(
"Un description français",
Expand Down
22 changes: 1 addition & 21 deletions clients/admin-ui/cypress/e2e/system-integrations-plus.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -102,30 +102,10 @@ describe("System integrations", () => {
cy.getByTestId("consentable-item-label").should("have.length", 5);
cy.getByTestId("consentable-item-label-child").should("have.length", 6);
cy.getByTestId("consentable-item-select").should("have.length", 11);
cy.getByTestId("consentable-item-select")
.first()
.within(() => {
cy.get(".custom-select__input").focus().realPress(" ");
});
cy.get(".custom-select__menu").first().should("exist");
cy.get(".custom-select__menu")
.first()
.within(() => {
cy.get(".custom-select__option").should("have.length", 5);
});
});
it("should save the consent automation settings", () => {
cy.getByTestId("accordion-consent-automation").click();
cy.getByTestId("consentable-item-select")
.first()
.within(() => {
cy.get(".custom-select__input").focus().realPress(" ");
});
cy.get(".custom-select__menu")
.first()
.within(() => {
cy.get(".custom-select__option").first().click();
});
cy.getByTestId("consentable-item-select").antSelect(0);
cy.getByTestId("save-consent-automation").click();
cy.wait("@putConsentableItems").then((interception) => {
cy.fixture("connectors/consentable_items.json").then((expected) => {
Expand Down
62 changes: 62 additions & 0 deletions clients/admin-ui/cypress/support/ant-support.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/// <reference types="cypress" />

declare global {
namespace Cypress {
interface Chainable {
getAntSelectOption: (optionLabel: string | number) => Chainable;
/**
* Select an option from an Ant Design Select component
* @param option The label of the option to select or the index of the option
*/
antSelect: (
option: string | number,
clickOptions?: { force?: boolean },
) => void;
/**
* Clear all options from an Ant Design Select component
*/
antClearSelect: () => void;
}
}
}

Cypress.Commands.add("getAntSelectOption", (option: string | number) =>
typeof option === "string"
? cy.get(`.ant-select-item-option[title="${option}"]`)
: cy.get(`.ant-select-item-option`).eq(option),
);

Cypress.Commands.add(
"antSelect",
{
prevSubject: "element",
},
(subject, option, clickOptions) => {
cy.get(subject.selector).first().should("have.class", "ant-select");
cy.get(subject.selector)
.first()
.invoke("attr", "class")
.then((classes) => {
if (classes.includes("ant-select-disabled")) {
throw new Error("Cannot select from a disabled Ant Select component");
}
if (!classes.includes("ant-select-open")) {
cy.get(subject.selector).first().click(clickOptions);
}
});
cy.getAntSelectOption(option).should("be.visible").click(clickOptions);
},
);

Cypress.Commands.add(
"antClearSelect",
{
prevSubject: "element",
},
(subject) => {
cy.get(subject.selector).should("have.class", "ant-select-allow-clear");
cy.get(subject.selector).find(".ant-select-clear").click({ force: true });
},
);

export {};
1 change: 1 addition & 0 deletions clients/admin-ui/cypress/support/e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@

// Import commands.js using ES2015 syntax:
import "./commands";
import "./ant-support";
// eslint-disable-next-line import/no-extraneous-dependencies
import "cypress-real-events";

Expand Down
26 changes: 14 additions & 12 deletions clients/admin-ui/src/features/common/ScrollableList.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Select } from "chakra-react-select";
import {
AntButton as Button,
AntSelect as Select,
Box,
ChakraProps,
DeleteIcon,
Expand All @@ -13,7 +13,7 @@ import {
import { motion, Reorder, useDragControls } from "framer-motion";
import { useState } from "react";

import { Label, Option, SELECT_STYLES } from "~/features/common/form/inputs";
import { Label, Option } from "~/features/common/form/inputs";
import QuestionTooltip from "~/features/common/QuestionTooltip";

const ScrollableListItem = <T extends unknown>({
Expand Down Expand Up @@ -112,24 +112,26 @@ const ScrollableListAdd = ({
const [isAdding, setIsAdding] = useState<boolean>(false);
const [selectValue, setSelectValue] = useState<Option | undefined>(undefined);

const handleElementSelected = (event: any) => {
onOptionSelected(event);
const handleElementSelected = (value: Option) => {
onOptionSelected(value);
setIsAdding(false);
setSelectValue(undefined);
};

return isAdding ? (
<Box w="full" data-testid={`select-${baseTestId}`}>
<Box w="full">
<Select
chakraStyles={SELECT_STYLES}
size="sm"
showSearch
labelInValue
placeholder="Select..."
filterOption={(input, option) =>
(option?.label ?? "").toLowerCase().includes(input.toLowerCase())
}
value={selectValue}
options={options}
onChange={(e: any) => handleElementSelected(e)}
autoFocus
menuPosition="fixed"
menuPlacement="auto"
classNamePrefix={`select-${baseTestId}`}
onChange={handleElementSelected}
className="w-full"
data-testid={`select-${baseTestId}`}
/>
</Box>
) : (
Expand Down
Loading

0 comments on commit 523c1ab

Please sign in to comment.