Migrate custom selects (Chakra -> Ant) #5502

gilluminate · 2024-11-15T23:44:02Z

Closes HJ-160

Description Of Changes

Migrate remaining Select input fields from Chakra to Ant Design.
Replace disabled "creatable" select instances where we were using them just for badge display. Use pure Ant Badges instead.

Code Changes

Cleaned up a few files/components that are obsolete that were using old Chakra Select components
Changed colorPrimaryBg to palette.FIDESUI_NEUTRAL_75 as per @jack-gale-ethyca's request
Migrated one more "one-off" in the System Inventory page.
Replace disabled Select instances with Ant badges

Steps to Confirm

Visit System inventory where an integration has been configured (Iterable)
Switch to the "Integrations" tab
Ensure the "Request types" multi-select uses the new Select
Now switch to the "Data uses" tab
Click one of the options or the [Add data use +] button
In the modal, the "Data use," "Data categories," "Data subjects," "Legal basis for processing," "Features," "Dataset references," and "Cookies" fields all use the new Select

Visit the Manage your vendors page (/consent/configure)
Click [Add Vendors] and then [Add custom vendor]
All fields in this modal are using the new Select
Close the modal and return to the Manage your vendors page
open a Vendor that has more than one TCF Purpose
Badges should appear here where there used to be a disabled Select instance with badges inside it.

Visit Manage custom fields (/settings/custom-fields)
Add a new custom field
"Location" and "Field type" are both using the new Select.
Go ahead and create 1 for Single Select
Go to the Add system form and at the very bottom under Custom fields you should see the custom field you just created and it should be using the new Select.

Go to Add Systems (/add-systems)
Click the "Add a System" button
The "Dataset references" field is using the new Select (everything else on this page was updated in the previous PR)
Now on the Add Systems page, Click the "Scan your infrastructure (AWS)" button
The AWS Region field is using the new Select

Go to add New Privacy Notice (/consent/privacy-notices/new)
"Consent mechanism," "Data use," and "Enforcement level" are all using the new Select

Go to Integrations (/integrations)
Click [Add Integration] button
Click [Configure] button on one of the options
The "System" field is using the new Select
Close the modal and [Manage] one of the existing integrations (or crate one on the previous step)
Click the "Data discovery" tab
Click the [Add monitor] button
the "Automatic execution frequency" field is using the new Select

Go to Organizations Management (/settings/organization)
Click [Add SSO Provider]
The "Provider" field is using the new Select

Go to create a new Experience (/consent/privacy-experience/new)
The "Experience Type" field is using the new Select
Use that to select a "Banner and modal" type
The now visible "Banner options" field uses the new Select

Go to Privacy requests (/privacy-requests)
Click [Create request]
The "Request type" field is using the new Select
Click the [filter] button at the top of the table
The "Status" and "Request type" fields are using the new Select

Go to the (hidden) Configure Storage page (/privacy-requests/configure/storage)
"Format," and "Auth method" are using the new Select

Go to Properties (/properties)
Click [Add Property] button
The "Type" field is using the new Select

Go to the Data map report (/reporting/datamap)
Click a row to open the left Drawer
Expand an accordion under the "Data uses" section
There are 4 fields here using the new Select (these may or may not be disabled)

Go to Taxonomy management (/taxonomy)
Switch to the Data Subjects tab
Click the [Add Taxonomy Entity] button
the "Rights" field is using the new Select

Go to Connection manager (AKA Unlinked connections /datastore-connection)
Click the [Create new connection] button
The "Show all" connector type filter uses the new Select
Search for "Manual"
Click the "Manual Process" option
Give it a name and click Save
the "Data Categories" field uses the new Select

Pre-Merge Checklist

* Visit System Inventory where an integration has been configured (Iterable) * Ensure the Request types multi-select works as expected and the form saves.

vercel · 2024-11-15T23:44:06Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fides-plus-nightly	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 8:33pm

cypress · 2024-11-16T00:00:20Z

fides Run #11139

Run Properties: Passed #11139 • 4a2835dfd4 ℹ️: Merge 016b2f01f7df725ed74125e8d2582554a1e28277 into d1baca99b58d9c13d5e99d23a94f...

Project	`fides`
Branch Review	`refs/pull/5502/merge`
Run status	`Passed #11139`
Run duration	`00m 37s`
Commit	`4a2835dfd4 ℹ️: Merge 016b2f01f7df725ed74125e8d2582554a1e28277 into d1baca99b58d9c13d5e99d23a94f...`
Committer	`Jason Gill`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`0`
Skipped	`0`
Passing	`4`
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.
View all changes introduced in this branch ↗︎

jpople

Code looks good-- UAT'd as described in PR and confirming everything works.

I am seeing one bug on the connection manager page where the "Connection type" filter select doesn't render options, not sure if that was introduced with this PR or missed on the earlier one:

Also, after clicking "add connection", this ConnectionTypeFilter component appears to still be using the old, bespoke SelectDropdown component, could we switch that over to Ant as well? It seems to be the last one-- its counterpart MultiSelectDropdown is also still in the codebase but isn't used anywhere anywhere and should be able to be removed.

jpople · 2024-11-20T18:53:17Z

clients/admin-ui/package.json

@@ -35,7 +35,6 @@
    "@reduxjs/toolkit": "^1.9.3",
    "@tanstack/react-table": "^8.10.7",
    "@types/jest": "^29.5.12",
-    "chakra-react-select": "^3.3.7",


jpople · 2024-11-20T18:57:01Z

clients/admin-ui/src/features/common/nav/v2/BackButton.tsx

+  return (
+    <Flex alignItems="center" mb={6} {...props}>
+      <Button
+        onClick={() => nextRouter.push(backPath)}


What's the reasoning for this change?

Good question, I meant to leave a comment on this PR about it and forgot...

This was more of an annoyance fix. The link part would work as expected in a SPA where the page would immediately load. This button part however would load the entire app again. This change just aligns the button behavior with the link behavior using the Next router.

gilluminate · 2024-11-20T23:03:43Z

@jpople Thanks for finding that one-off select. It helped me find 2 more in the Privacy Requests table filter!

This reverts commit c759c25.

jpople

Looking good! Thanks for getting those extra old selects, it's great to have that cleanup done.

cypress · 2024-11-22T19:14:07Z

fides Run #11156

Run Properties: Passed #11156 • 43b434b6be: Migrate custom selects (Chakra -> Ant) (#5502)

Project	`fides`
Branch Review	`main`
Run status	`Passed #11156`
Run duration	`00m 38s`
Commit	`43b434b6be: Migrate custom selects (Chakra -> Ant) (#5502)`
Committer	`Jason Gill`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`0`
Skipped	`0`
Passing	`4`
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.
View all changes introduced in this branch ↗︎

gilluminate added 4 commits November 15, 2024 16:41

remove obsolete components

e0397b1

Migrate System Integration Request Types Select

6550e6c

* Visit System Inventory where an integration has been configured (Iterable) * Ensure the Request types multi-select works as expected and the form saves.

Update colorPrimaryBg as per designer request

e671ca3

Replace disabled Select instances with Ant badges

8abb19e

vercel bot deployed to Preview November 15, 2024 23:47 View deployment

gilluminate added 4 commits November 15, 2024 17:00

align fidesui prettier rules with other client projects

54fca9d

enhanced HOC select component

fde2d3e

Create ControlledSelect.tsx

8f0f25c

replace CustomSelect with ControlledSelect

1f10946

gilluminate force-pushed the gill/HJ-160/migrate-custom-selects-to-ant branch from b56aa85 to 1f10946 Compare November 16, 2024 01:08

vercel bot deployed to Preview November 16, 2024 01:14 View deployment

gilluminate added 3 commits November 15, 2024 18:20

clean up old Chakra selects & npm package

c2c6998

Update CHANGELOG.md

c759c25

some UI fixes relating to connection filters

008e4d6

vercel bot deployed to Preview November 18, 2024 18:04 View deployment

gilluminate added 3 commits November 18, 2024 18:11

fix back button to use next router

9f2d0ef

fic controlledSelect & replace DictSuggestionSelect

5eb20d3

fix Cypress tests

e738a29

vercel bot deployed to Preview November 19, 2024 02:27 View deployment

gilluminate marked this pull request as ready for review November 19, 2024 02:55

gilluminate requested review from jpople and Roger-Ethyca November 19, 2024 02:55

various layout fixes

53b5f4d

vercel bot deployed to Preview November 19, 2024 17:02 View deployment

gilluminate added 2 commits November 19, 2024 12:06

fix broken link palette color

73b826e

update badge display views

781a7bb

vercel bot had a problem deploying to Preview November 19, 2024 19:08 Failure

minor fix

e0e6503

vercel bot deployed to Preview November 19, 2024 19:42 View deployment

jpople reviewed Nov 20, 2024

View reviewed changes

fix Connection Type filter options

5f982d6

vercel bot deployed to Preview November 20, 2024 21:55 View deployment

migrate connection type filter

91fb969

vercel bot deployed to Preview November 20, 2024 22:34 View deployment

migrate remaining Selects

c19e94b

gilluminate requested a review from jpople November 20, 2024 22:59

vercel bot deployed to Preview November 20, 2024 23:02 View deployment

gilluminate added 4 commits November 20, 2024 16:06

Revert "Update CHANGELOG.md"

65951a3

This reverts commit c759c25.

Merge branch 'main' into gill/HJ-160/migrate-custom-selects-to-ant

b656e59

Update CHANGELOG.md

4467429

fix Cypress test

eec85dd

vercel bot deployed to Preview November 20, 2024 23:35 View deployment

include data-testid where appropriate

016b2f0

vercel bot deployed to Preview November 21, 2024 20:33 View deployment

jpople approved these changes Nov 22, 2024

View reviewed changes

gilluminate merged commit 43b434b into main Nov 22, 2024
13 checks passed

gilluminate deleted the gill/HJ-160/migrate-custom-selects-to-ant branch November 22, 2024 18:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate custom selects (Chakra -> Ant) #5502

Migrate custom selects (Chakra -> Ant) #5502

gilluminate commented Nov 15, 2024 •

edited by jira bot

Loading

vercel bot commented Nov 15, 2024 •

edited

Loading

cypress bot commented Nov 16, 2024 •

edited

Loading

jpople left a comment •

edited

Loading

jpople Nov 20, 2024

jpople Nov 20, 2024

gilluminate Nov 20, 2024

gilluminate commented Nov 20, 2024

jpople left a comment

cypress bot commented Nov 22, 2024

Migrate custom selects (Chakra -> Ant) #5502

Migrate custom selects (Chakra -> Ant) #5502

Conversation

gilluminate commented Nov 15, 2024 • edited by jira bot Loading

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

vercel bot commented Nov 15, 2024 • edited Loading

cypress bot commented Nov 16, 2024 • edited Loading

fides Run #11139

jpople left a comment • edited Loading

Choose a reason for hiding this comment

jpople Nov 20, 2024

Choose a reason for hiding this comment

jpople Nov 20, 2024

Choose a reason for hiding this comment

gilluminate Nov 20, 2024

Choose a reason for hiding this comment

gilluminate commented Nov 20, 2024

jpople left a comment

Choose a reason for hiding this comment

cypress bot commented Nov 22, 2024

fides Run #11156

gilluminate commented Nov 15, 2024 •

edited by jira bot

Loading

vercel bot commented Nov 15, 2024 •

edited

Loading

cypress bot commented Nov 16, 2024 •

edited

Loading

jpople left a comment •

edited

Loading