Expand/Collapse Data Categories

[gilluminate]

Closes PROD-2677

Description Of Changes

On the Datamap Reporting table

• New overflow indicator that represents how many categories are hidden after displaying the first 2
• Update badge styles for Data uses and Data categories columns
• User can expand each cell individually by clicking the overflow indicator
• User can collapse each cell individually by clicking anywhere in the cell
• Update the header menu:
  • Rename options to "Expand all" and "Collapse all"
  • Reorder so that "Expand all" is first
  • add a "Wrap results" checkbox option
• Update all badges in this table to be hidden if there are 0 results
• Adjust table column resize handle to be more user friendly

Steps to Confirm

• Visit Datamap report page in Admin UI /reporting/datamap
• Ensure that Data categories are collapsed by default (may need to visit in incognito window in case expand/collapse has been saved in Local Storage already for you)
• Expand a couple of individual cells by clicking the overflow indicator (eg. "+5 more")
• Open the header menu of the Data categories column
  • Click "Collapse all" to ensure the individual cells you expanded above are collapsed again
  • Click "Expand all" and ensure that all badges appear in this column and are stacked by default
  • Click "Wrap results" checkbox to see that all expanded badges are now wrapping within the cell space rather than stacked
• Drag the column resizer to change width of the Data categories column and ensure badges wrap to the cell width as expected
• Open the column options again, uncheck "Wrap results", and ensure the badges are now stacked within each cell
• Play around with Expand/Collapse/Wrap in various combinations of those states to ensure resulting behavior is expected.

Pre-Merge Checklist

• All CI Pipelines Succeeded
• Issue Requirements are Met
• Update CHANGELOG.md

[vercel]

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	Sep 6, 2024 7:48pm

[cypress]

fides    Run #9841

Run Properties:   Passed #9841  •  f6a2bb96ac ℹ️: Merge 17f27b2e56f0ecadbb0a6db90f10927542644308 into 8d2d787b83b21bb1301bb5cf4239...

Project	fides
Branch Review	refs/pull/5265/merge
Run status	Passed #9841
Run duration	00m 36s
Commit	f6a2bb96ac ℹ️: Merge 17f27b2e56f0ecadbb0a6db90f10927542644308 into 8d2d787b83b21bb1301bb5cf4239...
Committer	Jason Gill
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	4
View all changes introduced in this branch ↗︎

[jack-gale-ethyca]

Well done, this is a massive improvement to our reporting tables.

[jack-gale-ethyca]

This is looking great.

[cypress]

fides    Run #9842

Run Properties:   Passed #9842  •  6be5adc0f3: Expand/Collapse Data Categories (#5265)

Project	fides
Branch Review	main
Run status	Passed #9842
Run duration	00m 38s
Commit	6be5adc0f3: Expand/Collapse Data Categories (#5265)
Committer	Jason Gill
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	4
View all changes introduced in this branch ↗︎