Datamap Report: Rename columns #5400

gilluminate · 2024-10-21T23:11:04Z

Closes HJ-1

Description Of Changes

Fides Plus users should be able to edit the name of the columns in reporting views. User's changes will be saved locally in the browser, but will also be saved as part of custom reports.

Code Changes

Edit Columns button moved as part of the new kebab menu (no other changes to this functionality)
New Rename columns option under the kebab menu
New Table v2 header type: EditableHeader to support edit mode here
New column naming mappings to keep track of defaults/saved names
refactor Datamap table to support new column naming as a form using Formik
refactor Edit columns modal and Filters modal to support custom column names (as applicable)
Update E2E tests to ensure quality of various features

Steps to Confirm

Log in to Admin UI > Data map report (eg. http://localhost:3000/reporting/datamap)
Click the new kebab menu button (sideways ellipsis button)
In the popup menu click "Rename columns"
All column headers in the table should now be editable:
a. Each input should have a placeholder which is the equivalent of the original column header name
b. 3 new buttons should be present: "Reset All", "Cancel", and "Apply" (primary)
change the name of one or more columns by typing a new name in that header's input
apply your changes by clicking the "Apply" button
The headers should no longer be editable:
a. Newly entered names should appear as the Header name of their respective columns
b. 3 buttons are no longer visible
Click the menu and then the menu option to "Rename columns" again
Make some new changes to the column headers
Click the "Cancel" button
New changes should not be applied and the table is no longer in an editable state
Create a new Report with the new names applied to it
Click the menu and then the menu option to "Rename columns" again
This time click the "Reset all" button
All headers should be reverted to their default name and the table should not longer be editable
Apply the newly created Report
Custom names should be applied to the table again
Make sure one of the following headers has been customized: "Data use", "Data categories", or "Data subject" (or all 3 if you want)
Click the "Filter" button and make sure the customization applied in the previous step is reflected here
Close the Filter modal
Click the kebab and then "Edit columns" button
Make sure the customized header names are reflected here

Pre-Merge Checklist

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

vercel · 2024-10-21T23:11:08Z

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

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
fides-plus-nightly	⬜️ Ignored (Inspect)	Visit Preview		Oct 21, 2024 11:15pm

cypress · 2024-10-21T23:26:02Z

fides Run #10525

Run Properties: Passed #10525 • f44cd2272e ℹ️: Merge 1016633cbd59fbae867e612ff6f46b3e1f9f9577 into 7247873f8bb59c4963aa868485e5...

Project	`fides`
Branch Review	`refs/pull/5400/merge`
Run status	`Passed #10525`
Run duration	`00m 36s`
Commit	`f44cd2272e ℹ️: Merge 1016633cbd59fbae867e612ff6f46b3e1f9f9577 into 7247873f8bb59c4963aa868485e5...`
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 · 2024-10-21T23:27:29Z

clients/admin-ui/src/features/common/custom-reports/CustomReportTemplates.tsx

-  if (!userCanSeeReports) {
-    return null;
-  }
-


I moved this logic to the parent component so none of this loads if the user doesn't have permissions to view it.

gilluminate · 2024-10-21T23:29:00Z

clients/admin-ui/src/features/common/table/v2/filters/GlobalFilterV2.tsx

@@ -35,7 +35,7 @@ export const GlobalFilterV2 = ({
  }, [value, onClear]);

  return (
-    <Box maxWidth="510px" width="100%">
+    <Box maxWidth="424px" width="100%">


matches newer designs and leaves more room for the extra buttons

gilluminate · 2024-10-21T23:30:10Z

clients/admin-ui/src/features/datamap/constants.ts

-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export enum DATAMAP_LOCAL_STORAGE_KEYS {
-  COLUMN_ORDER = "datamap-column-order",
-  COLUMN_VISIBILITY = "datamap-column-visibility",
-  COLUMN_SIZING = "datamap-column-sizing",
-  COLUMN_EXPANSION_STATE = "datamap-column-expansion-state",
-  CUSTOM_REPORT_ID = "datamap-custom-report-id",
-  FILTERS = "datamap-filters",
-  GROUP_BY = "datamap-group-by",
-  SORTING_STATE = "datamap-sorting-state",
-  WRAPPING_COLUMNS = "datamap-wrapping-columns",
-}


moved to new reporting constants file

gilluminate · 2024-10-21T23:30:29Z

clients/admin-ui/src/features/datamap/datamap-drawer/SystemInfo.tsx

@@ -114,7 +114,7 @@ const SystemInfo = ({ system }: SystemInfoProps) => {
              </Box>
              <Box marginTop={3}>
                <CustomTextArea
-                  label="System Description"
+                  label="System description"


just a drive-by fix

gilluminate · 2024-10-21T23:32:52Z

clients/admin-ui/src/features/datamap/reporting/DatamapReportTableColumns.tsx

-// eslint-disable-next-line @typescript-eslint/naming-convention
-export enum COLUMN_IDS {
-  SYSTEM_NAME = "system_name",
-  DATA_USE = "data_use",
-  DATA_CATEGORY = "data_categories",
-  DATA_SUBJECT = "data_subjects",
-  LEGAL_NAME = "legal_name",
-  DPO = "dpo",
-  LEGAL_BASIS_FOR_PROCESSING = "legal_basis_for_processing",
-  ADMINISTRATING_DEPARTMENT = "administrating_department",
-  COOKIE_MAX_AGE_SECONDS = "cookie_max_age_seconds",
-  PRIVACY_POLICY = "privacy_policy",
-  LEGAL_ADDRESS = "legal_address",
-  COOKIE_REFRESH = "cookie_refresh",
-  DATA_SECURITY_PRACTICES = "data_security_practices",
-  DATA_SHARED_WITH_THIRD_PARTIES = "DATA_SHARED_WITH_THIRD_PARTIES",
-  DATA_STEWARDS = "data_stewards",
-  DECLARATION_NAME = "declaration_name",
-  DESCRIPTION = "description",
-  DOES_INTERNATIONAL_TRANSFERS = "does_international_transfers",
-  DPA_LOCATION = "dpa_location",
-  DESTINATIONS = "egress",
-  EXEMPT_FROM_PRIVACY_REGULATIONS = "exempt_from_privacy_regulations",
-  FEATURES = "features",
-  FIDES_KEY = "fides_key",
-  FLEXIBLE_LEGAL_BASIS_FOR_PROCESSING = "flexible_legal_basis_for_processing",
-  IMPACT_ASSESSMENT_LOCATION = "impact_assessment_location",
-  SOURCES = "ingress",
-  JOINT_CONTROLLER_INFO = "joint_controller_info",
-  LEGAL_BASIS_FOR_PROFILING = "legal_basis_for_profiling",
-  LEGAL_BASIS_FOR_TRANSFERS = "legal_basis_for_transfers",
-  LEGITIMATE_INTEREST_DISCLOSURE_URL = "legitimate_interest_disclosure_url",
-  LINK_TO_PROCESSOR_CONTRACT = "link_to_processor_contract",
-  PROCESSES_PERSONAL_DATA = "processes_personal_data",
-  REASON_FOR_EXEMPTION = "reason_for_exemption",
-  REQUIRES_DATA_PROTECTION_ASSESSMENTS = "requires_data_protection_assessments",
-  RESPONSIBILITY = "responsibility",
-  RETENTION_PERIOD = "retention_period",
-  SHARED_CATEGORIES = "shared_categories",
-  SPECIAL_CATEGORY_LEGAL_BASIS = "special_category_legal_basis",
-  SYSTEM_DEPENDENCIES = "system_dependencies",
-  THIRD_COUNTRY_SAFEGUARDS = "third_country_safeguards",
-  THIRD_PARTIES = "third_parties",
-  COOKIES = "cookies",
-  USES_COOKIES = "uses_cookies",
-  USES_NON_COOKIE_ACCESS = "uses_non_cookie_access",
-  USES_PROFILING = "uses_profiling",
-  SYSTEM_UNDECLARED_DATA_CATEGORIES = "system_undeclared_data_categories",
-  DATA_USE_UNDECLARED_DATA_CATEGORIES = "data_use_undeclared_data_categories",
-}


Moved to new reporting constants file

gilluminate · 2024-10-21T23:33:47Z

clients/admin-ui/src/features/datamap/reporting/DatamapReportTableColumns.tsx

-    const keyWithoutPrefix = key.replace(/^(system_|privacy_declaration_)/, "");
-    const displayText = _.upperFirst(keyWithoutPrefix.replaceAll("_", " "));


moved to a util

gilluminate · 2024-10-21T23:35:48Z

clients/admin-ui/src/features/privacy-experience/PrivacyExperiencesTable.tsx

@@ -150,7 +150,6 @@ export const PrivacyExperiencesTable = () => {
          ),
          header: (props) => <DefaultHeaderCell value="Locations" {...props} />,
          meta: {
-            displayText: "Locations",


Just cleaning up a little "Cargo Cult Coding" happening here, these displayText entries were never used on any table except for the Datamap report

jpople

✅ Tested locally, everything working as expected for me. Great work!

cypress · 2024-10-22T15:56:10Z

fides Run #10528

Run Properties: Passed #10528 • 0f2fe91028: Datamap Report: Rename columns (#5400)

Project	`fides`
Branch Review	`main`
Run status	`Passed #10528`
Run duration	`00m 38s`
Commit	`0f2fe91028: Datamap Report: Rename columns (#5400)`
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 5 commits October 21, 2024 17:11

move Edit Columns as menu option w/ updated tests

b608719

new header handling to prepare for editing header names

0f43ad8

column renaming stored in local storage

7571219

renaming stored in custom reports

cf000b8

pass column names to filters

865c7c7

gilluminate force-pushed the HJ-1-fe-datamap-report-rename-columns branch from 728b811 to 865c7c7 Compare October 21, 2024 23:11

Update CHANGELOG.md

1016633

gilluminate commented Oct 21, 2024

View reviewed changes

jpople approved these changes Oct 22, 2024

View reviewed changes

gilluminate merged commit 0f2fe91 into main Oct 22, 2024
13 checks passed

gilluminate deleted the HJ-1-fe-datamap-report-rename-columns branch October 22, 2024 15:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Datamap Report: Rename columns #5400

Datamap Report: Rename columns #5400

gilluminate commented Oct 21, 2024 •

edited

Loading

vercel bot commented Oct 21, 2024 •

edited

Loading

cypress bot commented Oct 21, 2024 •

edited

Loading

gilluminate Oct 21, 2024

gilluminate Oct 21, 2024

gilluminate Oct 21, 2024

gilluminate Oct 21, 2024

gilluminate Oct 21, 2024

gilluminate Oct 21, 2024

gilluminate Oct 21, 2024 •

edited

Loading

jpople left a comment

cypress bot commented Oct 22, 2024

		const keyWithoutPrefix = key.replace(/^(system_\|privacy_declaration_)/, "");
		const displayText = _.upperFirst(keyWithoutPrefix.replaceAll("_", " "));

Datamap Report: Rename columns #5400

Datamap Report: Rename columns #5400

Conversation

gilluminate commented Oct 21, 2024 • edited Loading

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

vercel bot commented Oct 21, 2024 • edited Loading

cypress bot commented Oct 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gilluminate Oct 21, 2024 • edited Loading

Choose a reason for hiding this comment

jpople left a comment

Choose a reason for hiding this comment

cypress bot commented Oct 22, 2024

gilluminate commented Oct 21, 2024 •

edited

Loading

vercel bot commented Oct 21, 2024 •

edited

Loading

cypress bot commented Oct 21, 2024 •

edited

Loading

gilluminate Oct 21, 2024 •

edited

Loading