Human readable locations

CHANGELOG.md

@@ -21,6 +21,10 @@ The types of changes are:
 
 - Added new Performance-related nox commands and included them as part of the CI suite [#3997](https://github.com/ethyca/fides/pull/3997)
 
+### 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

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)");
       });
     });
 

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();

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, string> =
+  {
+    [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],
+}));

clients/admin-ui/src/features/common/table/cells.tsx

@@ -46,7 +46,8 @@ export const MapCell = <T extends object>({
 
 export const MultiTagCell = <T extends object>({
   value,
-}: CellProps<T, string[]>) => {
+  map,
+}: CellProps<T, string[]> & { map?: Map<string, string> }) => {
   // 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 = <T extends object>({
           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, "-")}
         </Tag>
       ))}
     </Box>

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 = ({
       </Flex>
     );
   }
-  return <MultiTagCell row={row} {...rest} />;
+  return <MultiTagCell map={PRIVACY_NOTICE_REGION_MAP} row={row} {...rest} />;
 };
 
 export const EnablePrivacyExperienceCell = (

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 = ({
                 <CustomSelect
                   name="regions"
                   label="Locations where consent notice is shown to visitors"
-                  options={REGION_OPTIONS}
+                  options={PRIVACY_NOTICE_REGION_OPTIONS}
                   variant="stacked"
                   isMulti
                   isRequired

clients/admin-ui/src/features/privacy-notices/PrivacyNoticesTable.tsx

@@ -5,7 +5,6 @@ import {
   DateCell,
   FidesTable,
   FidesTableFooter,
-  MultiTagCell,
   TitleCell,
   WrappedCell,
 } from "common/table";
@@ -18,6 +17,7 @@ import { Column } from "react-table";
 import { useAppSelector } from "~/app/hooks";
 import {
   EnablePrivacyNoticeCell,
+  LocationCell,
   MechanismCell,
 } from "~/features/privacy-notices/cells";
 import {
@@ -63,7 +63,7 @@ export const PrivacyNoticesTable = () => {
         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 },
       {

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<typeof MECHANISM_MAP, string>
 ) => <MapCell map={MECHANISM_MAP} {...cellProps} />;
 
+export const LocationCell = (
+  cellProps: CellProps<PrivacyNoticeResponse, string[]>
+) => <MultiTagCell map={PRIVACY_NOTICE_REGION_MAP} {...cellProps} />;
+
 export const EnablePrivacyNoticeCell = (
   cellProps: CellProps<PrivacyNoticeResponse, boolean>
 ) => {