Add filtering and pagination to bulk vendor add table

[TheAndrewJackson]

Closes PROD-1267

Description Of Changes

This PR applies a few follow items based on feedback from the original bulk vendor adding PR.

Code Changes

• add source filter modal
• only show the filter modal and source column if TCF is enabled
• add a pagination menu

Steps to Confirm - UAT

TCF enabled

• go to bulk vendor adding page
• check that the source column is there
• click on the filter button and make sure the filter works
• use the pagination menu and make sure it works

TCF_enabled.mov

TCF disabled

• go to bulk vendor adding page
• check that the source column isn't there
• check that the filter button isn't there
• use the pagination menu and make sure it works

TCF_disabled.mov

Pre-Merge Checklist

• All CI Pipelines Succeeded
• Documentation:
  • documentation complete, PR opened in fidesdocs
  • documentation issue created in fidesdocs
• Issue Requirements are Met
• Relevant Follow-Up Issues Created
• Update CHANGELOG.md
• For API changes, the Postman collection has been updated

[cypress]

Passing run #4964 ↗︎

0

4

0

0

0

Details:

Merge 67521b8 into 95a6e29...
Project: fides	Commit: e7ad5feef3 ℹ️
Status: Passed	Duration: 01:02 💡
Started: Nov 2, 2023 2:43 PM	Ended: Nov 2, 2023 2:44 PM

Review all test suite changes for PR #4351 ↗︎

[allisonking]

I've tested locally and things work well for the most part! a thing I noticed that I didn't catch in your initial PR is that the route /add-systems/multiple is accessible even with the dictionary turned off (i.e. if you visit http://localhost:3000/add-systems/multiple directly). it's just empty

Perhaps the route shouldn't be available at all (would have to add a flag to nav-config) or add some text about upgrading in that case?

[TheAndrewJackson]

@allisonking Re: route being accessible when the dictionary isn't enabled.

I think updating the nav config to handle it makes the most sense. That's what we already do with plus and fides cloud.

EDIT:
that doesn't work because the page is accessed from a button instead of the navbar. Adding that check there will block the entire add-systems route if they don't have compass. For now I'll update the page to redirect to the index if the user doesn't have compass

[allisonking]

that doesn't work because the page is accessed from a button instead of the navbar. Adding that check there will block the entire add-systems route if they don't have compass. For now I'll update the page to redirect to the index if the user doesn't have compass

ah okay, that might be a bug with how our nested routes work. I remember that bit of code being a bit complex... we might want to revisit this in the future

[allisonking]

hmm I wonder if this would make more sense if we checked for if the health check was loading? I think we could do this in plus.slice. something like...

export const selectHealthIsLoading: (state: RootState) => boolean =
  createSelector(
    plusApi.endpoints.getHealth.select(),
    ({ isLoading }) => isLoading
  );

and then also expose isLoading as part of useFeatures? checking for if it's loading would make more sense to me than comparing to an empty obj, but maybe it's not straightforward to implement

[allisonking]

maybe worth spending a few minutes just to see if it'd work out? otherwise we can leave it, I don't feel super strongly about it

[allisonking]

actually I take back that suggestion—I think you can just call useGetHealthQuery directly in this component, then query for isLoading. in fact, we do this here https://github.com/ethyca/fides/blob/main/clients/admin-ui/src/features/auth/ProtectedRoute.tsx#L41

[TheAndrewJackson]

That's a good idea. It's more clear as well. I'll take a look at that.

[TheAndrewJackson]

done here: 4143768

[simon-keane]

Pagination :

• Here's a link to Figma to show the pagination control interaction. Notice the interaction takes place on the numeric values on the left and there is no additional control on the right that we see in the video above. So the Figma link shows the resting, hover and active states for the pagination control.

Filter :

• Button alignment with the vendors button is slightly off. See attached. Both buttons should be aligned vertically

• Tags should be centered horizontally in column (see attached GVL tag reference)

• If possible, can we add a tooltip to the vendor tags : Maybe that's for another ticket, if so please ignore for now.
  @rsilvery might confirm if this naming is how it should be presented ...
  GVL tooltip : Global Vendor List
  AC tooltip : Google Additional Consent List

• And also for consistency, in the filter modal, we should probably change GVL and AC to their full names to be more descriptive for the user.

• Filter and vendor buttons should be switched. So filter button on the right as it's the secondary action to the add vendors button

Otherwise looks great! 👍

[allisonking]

thanks @simon-keane — I edited your comment to have checkboxes so I could keep track of which ones I knocked out. see this updated video, I think I got all your comments!

Screen.Recording.2023-11-01.at.5.02.33.PM.mov

[Kelsey-Ethyca]

UAT is passing! But I did create a followup bug to address the multiselect. It should select only the first page of vendors. https://ethyca.atlassian.net/browse/PROD-1306

[simon-keane]

Superb thanks @allisonking looks great.