PROD-2481 Update manage datasets pages #5191
Conversation
…manage-datasets-view
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
lucanovera
changed the title
| @@ -1,13 +1,26 @@ | |||
| import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "fidesui"; | |||
| import { | |||
There was a problem hiding this comment.
Updated the breadcrumbs component. Added support for icons, expanded Link to be able to receive query params, added prop optionally be able to override some styles. Remove isOpaque props since it was too specific and it won't be used anymore. Removed onClick since it wasn't working nor being used.
| @@ -1,7 +1,7 @@ | |||
| import { | |||
There was a problem hiding this comment.
Updated edit drawer component with some new styling.
| @@ -0,0 +1,12 @@ | |||
| import { createIcon } from "fidesui"; | |||
There was a problem hiding this comment.
Copied the icons from the D&D branch but I placed them in a more generic folder so we can use them for both features.
| @@ -1,4 +1,4 @@ | |||
| import { Box, BoxProps } from "fidesui"; | |||
| import { Box, BoxProps, Flex } from "fidesui"; | |||
There was a problem hiding this comment.
Added rightContent prop to PageHeader. Useful in new designs for buttons on the right of the page header.
| @@ -0,0 +1,103 @@ | |||
| import { | |||
There was a problem hiding this comment.
Made a more generic version of the TaxonomyDisplayAndEdit component so I could use it in the dataset page. The idea is that later we can re-use it for D&D or for the TaxonomyDisplayAndEdit component.
| @@ -0,0 +1,24 @@ | |||
| /** | |||
There was a problem hiding this comment.
Just a tiny wrapper for normal Breadcrumbs component with some added styles.
| checked={checkedDataCategories} | ||
| onChecked={setCheckedDataCategories} | ||
| tooltip={DATASET.data_categories.tooltip} | ||
| variant="block" |
There was a problem hiding this comment.
Talked with jack about this. We're removing the data categories selector for datasets and collections, only fields should show this.
| updateDataset(updatedDataset); | ||
| onClose(); | ||
| } | ||
| const updatedField = { ...field!, ...values }; |
There was a problem hiding this comment.
I am this could be simplified in the future. But here I'm reusing the existing helper functions that are unit tested.
There was a problem hiding this comment.
Changes look good to me generally, but I found two small UI issues.
Icon sizes in the breadcrumbs are slightly inconsistent:
Compare designs:
Also, if I delete the provided data category and end up in a "None" state, there's no + button so I can't add a new category with the picker:
| breadcrumbs: { | ||
| title: string; | ||
| link?: string; | ||
| link?: Url; // Next.js link url. It can be a string or an URL object (accepts query params) |
There was a problem hiding this comment.
Didn't know this existed, neat.
…manage-datasets-view
@jpople Thanks for the CR. Fixed the issues you mentioned. Data category picker now has the + icon instead of saying None. And the icon sizes are normalized now: |
…manage-datasets-view
…ready and repaced by d&d
|
Test summaryRun details
This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Cloud |
|
Test summaryRun details
This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Cloud |
Description Of Changes
Complete refactor of every dataset page. Updated to use our new table component, breadcrumb navigation, add a table of collections.
Screenshots
Dataset List Page
Dataset Detail Page
Edit collection drawer
Delete confirmation modal
Collection detail page
Edit field drawer
Edit data category for field using picker
Code Changes
Steps to Confirm
Pre-Merge Checklist
CHANGELOG.md