From bd9d6070196451c830e48960433c1e0bee38208b Mon Sep 17 00:00:00 2001 From: Allison King Date: Mon, 11 Sep 2023 12:13:54 -0400 Subject: [PATCH] Human readable locations (#4029) --- CHANGELOG.md | 4 + .../cypress/e2e/privacy-experiences.cy.ts | 2 +- .../cypress/e2e/privacy-notices.cy.ts | 9 +- .../features/common/privacy-notice-regions.ts | 120 ++++++++++++++++++ .../src/features/common/table/cells.tsx | 6 +- .../src/features/privacy-experience/cells.tsx | 3 +- .../privacy-notices/PrivacyNoticeForm.tsx | 17 +-- .../privacy-notices/PrivacyNoticesTable.tsx | 4 +- .../src/features/privacy-notices/cells.tsx | 7 +- 9 files changed, 149 insertions(+), 23 deletions(-) create mode 100644 clients/admin-ui/src/features/common/privacy-notice-regions.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index cfa259e2e9..634d710c24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,10 @@ The types of changes are: - System history UI with diff modal [#4021](https://github.com/ethyca/fides/pull/4021) - Relax system legal basis for transfers to be any string [#4049](https://github.com/ethyca/fides/pull/4049) +### Changed + +- Privacy notice regions now render human readable names instead of country codes [#4029](https://github.com/ethyca/fides/pull/4029) + ## [2.19.0](https://github.com/ethyca/fides/compare/2.18.0...2.19.0) ### Added diff --git a/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts b/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts index da3aad8dfa..bd5540b8d3 100644 --- a/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts +++ b/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts @@ -119,7 +119,7 @@ describe("Privacy experiences", () => { cy.get("td").first().contains("Global"); }); cy.getByTestId(`row-${DISABLED_EXPERIENCE_ID}`).within(() => { - cy.get("td").first().contains("us-ca"); + cy.get("td").first().contains("California (USA)"); }); }); diff --git a/clients/admin-ui/cypress/e2e/privacy-notices.cy.ts b/clients/admin-ui/cypress/e2e/privacy-notices.cy.ts index 8f3123e844..d1d8532318 100644 --- a/clients/admin-ui/cypress/e2e/privacy-notices.cy.ts +++ b/clients/admin-ui/cypress/e2e/privacy-notices.cy.ts @@ -5,6 +5,7 @@ import { } from "cypress/support/stubs"; import { PRIVACY_NOTICES_ROUTE } from "~/features/common/nav/v2/routes"; +import { PRIVACY_NOTICE_REGION_MAP } from "~/features/common/privacy-notice-regions"; import { RoleRegistryEnum } from "~/types/api"; const DATA_SALES_NOTICE_ID = "pri_132bb3ba-fa1e-4a3f-9f06-c19e3fee49da"; @@ -212,7 +213,8 @@ describe("Privacy notices", () => { }); cy.getByTestId("input-internal_description").should("have.value", ""); notice.regions.forEach((region) => { - cy.getSelectValueContainer("input-regions").contains(region); + const regionName = PRIVACY_NOTICE_REGION_MAP.get(region); + cy.getSelectValueContainer("input-regions").contains(regionName); }); [ "displayed_in_overlay", @@ -323,7 +325,10 @@ describe("Privacy notices", () => { cy.getByTestId("input-internal_description").type( notice.internal_description ); - cy.selectOption("input-regions", notice.regions[0]); + cy.selectOption( + "input-regions", + PRIVACY_NOTICE_REGION_MAP.get(notice.regions[0]) + ); cy.getByTestId("input-displayed_in_api").click(); cy.getByTestId("save-btn").click(); diff --git a/clients/admin-ui/src/features/common/privacy-notice-regions.ts b/clients/admin-ui/src/features/common/privacy-notice-regions.ts new file mode 100644 index 0000000000..84c9e04de6 --- /dev/null +++ b/clients/admin-ui/src/features/common/privacy-notice-regions.ts @@ -0,0 +1,120 @@ +import { PrivacyNoticeRegion } from "~/types/api"; + +/** + * A mapping of privacy notice regions to human readable names. + * + * The typing is important here so that our build will fail if we are missing a region. + */ +export const PRIVACY_NOTICE_REGION_RECORD: Record = + { + [PrivacyNoticeRegion.US]: "United States", + [PrivacyNoticeRegion.US_AL]: "Alabama (USA)", + [PrivacyNoticeRegion.US_AK]: "Alaska (USA)", + [PrivacyNoticeRegion.US_AZ]: "Arizona (USA)", + [PrivacyNoticeRegion.US_AR]: "Arkansas (USA)", + [PrivacyNoticeRegion.US_CA]: "California (USA)", + [PrivacyNoticeRegion.US_CO]: "Colorado (USA)", + [PrivacyNoticeRegion.US_CT]: "Connecticut (USA)", + [PrivacyNoticeRegion.US_DE]: "Delaware (USA)", + [PrivacyNoticeRegion.US_FL]: "Florida (USA)", + [PrivacyNoticeRegion.US_GA]: "Georgia (USA)", + [PrivacyNoticeRegion.US_HI]: "Hawaii (USA)", + [PrivacyNoticeRegion.US_ID]: "Idaho (USA)", + [PrivacyNoticeRegion.US_IL]: "Illinois (USA)", + [PrivacyNoticeRegion.US_IN]: "Indiana (USA)", + [PrivacyNoticeRegion.US_IA]: "Iowa (USA)", + [PrivacyNoticeRegion.US_KS]: "Kansas (USA)", + [PrivacyNoticeRegion.US_KY]: "Kentucky (USA)", + [PrivacyNoticeRegion.US_LA]: "Louisiana (USA)", + [PrivacyNoticeRegion.US_ME]: "Maine (USA)", + [PrivacyNoticeRegion.US_MD]: "Maryland (USA)", + [PrivacyNoticeRegion.US_MA]: "Massachusetts (USA)", + [PrivacyNoticeRegion.US_MI]: "Michigan (USA)", + [PrivacyNoticeRegion.US_MN]: "Minnesota (USA)", + [PrivacyNoticeRegion.US_MS]: "Mississippi (USA)", + [PrivacyNoticeRegion.US_MO]: "Missouri (USA)", + [PrivacyNoticeRegion.US_MT]: "Montana (USA)", + [PrivacyNoticeRegion.US_NE]: "Nebraska (USA)", + [PrivacyNoticeRegion.US_NV]: "Nevada (USA)", + [PrivacyNoticeRegion.US_NH]: "New Hampshire (USA)", + [PrivacyNoticeRegion.US_NJ]: "New Jersey (USA)", + [PrivacyNoticeRegion.US_NM]: "New Mexico (USA)", + [PrivacyNoticeRegion.US_NY]: "New York (USA)", + [PrivacyNoticeRegion.US_NC]: "North Carolina (USA)", + [PrivacyNoticeRegion.US_ND]: "North Dakota (USA)", + [PrivacyNoticeRegion.US_OH]: "Ohio (USA)", + [PrivacyNoticeRegion.US_OK]: "Oklahoma (USA)", + [PrivacyNoticeRegion.US_OR]: "Oregon (USA)", + [PrivacyNoticeRegion.US_PA]: "Pennsylvania (USA)", + [PrivacyNoticeRegion.US_RI]: "Rhode Island (USA)", + [PrivacyNoticeRegion.US_SC]: "South Carolina (USA)", + [PrivacyNoticeRegion.US_SD]: "South Dakota (USA)", + [PrivacyNoticeRegion.US_TN]: "Tennessee (USA)", + [PrivacyNoticeRegion.US_TX]: "Texas (USA)", + [PrivacyNoticeRegion.US_UT]: "Utah (USA)", + [PrivacyNoticeRegion.US_VT]: "Vermont (USA)", + [PrivacyNoticeRegion.US_VA]: "Virginia (USA)", + [PrivacyNoticeRegion.US_WA]: "Washington (USA)", + [PrivacyNoticeRegion.US_WV]: "West Virginia (USA)", + [PrivacyNoticeRegion.US_WI]: "Wisconsin (USA)", + [PrivacyNoticeRegion.US_WY]: "Wyoming (USA)", + [PrivacyNoticeRegion.BE]: "Belgium (EU)", + [PrivacyNoticeRegion.BG]: "Bulgaria (EU)", + [PrivacyNoticeRegion.CZ]: "Czech Republic (EU)", + [PrivacyNoticeRegion.DK]: "Denmark (EU)", + [PrivacyNoticeRegion.DE]: "Germany (EU)", + [PrivacyNoticeRegion.EE]: "Estonia (EU)", + [PrivacyNoticeRegion.IE]: "Ireland (EU)", + [PrivacyNoticeRegion.GR]: "Greece (EU)", + [PrivacyNoticeRegion.ES]: "Spain (EU)", + [PrivacyNoticeRegion.FR]: "France (EU)", + [PrivacyNoticeRegion.HR]: "Croatia (EU)", + [PrivacyNoticeRegion.IT]: "Italy (EU)", + [PrivacyNoticeRegion.CY]: "Cyprus (EU)", + [PrivacyNoticeRegion.LV]: "Latvia (EU)", + [PrivacyNoticeRegion.LT]: "Lithuania (EU)", + [PrivacyNoticeRegion.LU]: "Luxembourg (EU)", + [PrivacyNoticeRegion.HU]: "Hungary (EU)", + [PrivacyNoticeRegion.MT]: "Malta (EU)", + [PrivacyNoticeRegion.NL]: "Netherlands (EU)", + [PrivacyNoticeRegion.AT]: "Austria (EU)", + [PrivacyNoticeRegion.PL]: "Poland (EU)", + [PrivacyNoticeRegion.PT]: "Portugal (EU)", + [PrivacyNoticeRegion.RO]: "Romania (EU)", + [PrivacyNoticeRegion.SI]: "Slovenia (EU)", + [PrivacyNoticeRegion.SK]: "Slovakia (EU)", + [PrivacyNoticeRegion.FI]: "Finland (EU)", + [PrivacyNoticeRegion.SE]: "Sweden (EU)", + [PrivacyNoticeRegion.GB_ENG]: "England", + [PrivacyNoticeRegion.GB_SCT]: "Scotland", + [PrivacyNoticeRegion.GB_WLS]: "Wales", + [PrivacyNoticeRegion.GB_NIR]: "Northern Ireland", + [PrivacyNoticeRegion.IS]: "Iceland", + [PrivacyNoticeRegion.NO]: "Norway", + [PrivacyNoticeRegion.LI]: "Liechtenstein", + [PrivacyNoticeRegion.CA]: "Canada", + [PrivacyNoticeRegion.CA_AB]: "Alberta (Canada)", + [PrivacyNoticeRegion.CA_BC]: "British Columbia (Canada)", + [PrivacyNoticeRegion.CA_MB]: "Manitoba (Canada)", + [PrivacyNoticeRegion.CA_NB]: "New Brunswick (Canada)", + [PrivacyNoticeRegion.CA_NL]: "Newfoundland and Labrador (Canada)", + [PrivacyNoticeRegion.CA_NS]: "Nova Scotia (Canada)", + [PrivacyNoticeRegion.CA_ON]: "Ontario (Canada)", + [PrivacyNoticeRegion.CA_PE]: "Prince Edward Island (Canada)", + [PrivacyNoticeRegion.CA_QC]: "Quebec (Canada)", + [PrivacyNoticeRegion.CA_SK]: "Saskatchewan (Canada)", + [PrivacyNoticeRegion.CA_NT]: "Northwest Territories (Canada)", + [PrivacyNoticeRegion.CA_NU]: "Nunavut (Canada)", + [PrivacyNoticeRegion.CA_YT]: "Yukon (Canada)", + }; + +export const PRIVACY_NOTICE_REGION_MAP = new Map( + Object.entries(PRIVACY_NOTICE_REGION_RECORD) +); + +export const PRIVACY_NOTICE_REGION_OPTIONS = Object.entries( + PRIVACY_NOTICE_REGION_RECORD +).map((entry) => ({ + value: entry[0], + label: entry[1], +})); diff --git a/clients/admin-ui/src/features/common/table/cells.tsx b/clients/admin-ui/src/features/common/table/cells.tsx index b605be7d03..e25fecd83b 100644 --- a/clients/admin-ui/src/features/common/table/cells.tsx +++ b/clients/admin-ui/src/features/common/table/cells.tsx @@ -46,7 +46,8 @@ export const MapCell = ({ export const MultiTagCell = ({ value, -}: CellProps) => { + map, +}: CellProps & { map?: Map }) => { // If we are over a certain number, render an "..." instead of all of the tags const maxNum = 8; // eslint-disable-next-line no-nested-ternary @@ -67,10 +68,9 @@ export const MultiTagCell = ({ backgroundColor="primary.400" color="white" mr={idx === value.length - 1 ? 0 : 3} - textTransform="uppercase" mb={2} > - {v.replace(/_/g, "-")} + {map && map.get(v) ? map.get(v) : v.replace(/_/g, "-")} ))} diff --git a/clients/admin-ui/src/features/privacy-experience/cells.tsx b/clients/admin-ui/src/features/privacy-experience/cells.tsx index 209ae05802..0765a8ff28 100644 --- a/clients/admin-ui/src/features/privacy-experience/cells.tsx +++ b/clients/admin-ui/src/features/privacy-experience/cells.tsx @@ -3,6 +3,7 @@ import React from "react"; import { CellProps } from "react-table"; import { GlobeIcon } from "~/features/common/Icon"; +import { PRIVACY_NOTICE_REGION_MAP } from "~/features/common/privacy-notice-regions"; import { EnableCell, MultiTagCell } from "~/features/common/table/"; import { ExperienceConfigResponse } from "~/types/api"; @@ -27,7 +28,7 @@ export const LocationCell = ({ ); } - return ; + return ; }; export const EnablePrivacyExperienceCell = ( diff --git a/clients/admin-ui/src/features/privacy-notices/PrivacyNoticeForm.tsx b/clients/admin-ui/src/features/privacy-notices/PrivacyNoticeForm.tsx index 4e39ae6727..1bc23cf621 100644 --- a/clients/admin-ui/src/features/privacy-notices/PrivacyNoticeForm.tsx +++ b/clients/admin-ui/src/features/privacy-notices/PrivacyNoticeForm.tsx @@ -19,22 +19,15 @@ import { CustomTextArea, CustomTextInput, } from "~/features/common/form/inputs"; -import { - enumToOptions, - getErrorMessage, - isErrorResult, -} from "~/features/common/helpers"; +import { getErrorMessage, isErrorResult } from "~/features/common/helpers"; import { PRIVACY_NOTICES_ROUTE } from "~/features/common/nav/v2/routes"; +import { PRIVACY_NOTICE_REGION_OPTIONS } from "~/features/common/privacy-notice-regions"; import { errorToastParams, successToastParams } from "~/features/common/toast"; import { selectEnabledDataUseOptions, useGetAllDataUsesQuery, } from "~/features/data-use/data-use.slice"; -import { - PrivacyNoticeCreation, - PrivacyNoticeRegion, - PrivacyNoticeResponse, -} from "~/types/api"; +import { PrivacyNoticeCreation, PrivacyNoticeResponse } from "~/types/api"; import ConsentMechanismForm from "./ConsentMechanismForm"; import { @@ -48,8 +41,6 @@ import { usePostPrivacyNoticeMutation, } from "./privacy-notices.slice"; -const REGION_OPTIONS = enumToOptions(PrivacyNoticeRegion); - const PrivacyNoticeForm = ({ privacyNotice: passedInPrivacyNotice, }: { @@ -136,7 +127,7 @@ const PrivacyNoticeForm = ({ { accessor: "consent_mechanism", Cell: MechanismCell, }, - { Header: "Locations", accessor: "regions", Cell: MultiTagCell }, + { Header: "Locations", accessor: "regions", Cell: LocationCell }, { Header: "Created", accessor: "created_at", Cell: DateCell }, { Header: "Last update", accessor: "updated_at", Cell: DateCell }, { diff --git a/clients/admin-ui/src/features/privacy-notices/cells.tsx b/clients/admin-ui/src/features/privacy-notices/cells.tsx index 6dc08bb1b4..d8df0492da 100644 --- a/clients/admin-ui/src/features/privacy-notices/cells.tsx +++ b/clients/admin-ui/src/features/privacy-notices/cells.tsx @@ -1,7 +1,8 @@ import React from "react"; import { CellProps } from "react-table"; -import { EnableCell, MapCell } from "~/features/common/table/"; +import { PRIVACY_NOTICE_REGION_MAP } from "~/features/common/privacy-notice-regions"; +import { EnableCell, MapCell, MultiTagCell } from "~/features/common/table/"; import { MECHANISM_MAP } from "~/features/privacy-notices/constants"; import { usePatchPrivacyNoticesMutation } from "~/features/privacy-notices/privacy-notices.slice"; import { PrivacyNoticeResponse } from "~/types/api"; @@ -10,6 +11,10 @@ export const MechanismCell = ( cellProps: CellProps ) => ; +export const LocationCell = ( + cellProps: CellProps +) => ; + export const EnablePrivacyNoticeCell = ( cellProps: CellProps ) => {