Default PII to hidden on page load

CHANGELOG.md

@@ -42,6 +42,8 @@ The types of changes are:
 
 * Home screen header scaling and responsiveness issues [#2200](https://github.com/ethyca/fides/pull/2277)
 * Added a feature flag for the recent dataset classification UX changes [#2335](https://github.com/ethyca/fides/pull/2335)
+* Privacy Center identity inputs validate even when they are optional. [#2308](https://github.com/ethyca/fides/pull/2308)
+* The PII toggle defaults to false and PII will be hidden on page load [#2388](https://github.com/ethyca/fides/pull/2388)
 * Fixed a CI bug caused by git security upgrades [#2441](https://github.com/ethyca/fides/pull/2441)
 * Privacy Center
   * Identity inputs validate even when they are optional. [#2308](https://github.com/ethyca/fides/pull/2308)

clients/admin-ui/src/features/common/PII.tsx

@@ -1,8 +1,14 @@
-import { useObscuredPII } from "privacy-requests/helpers";
-import React from "react";
+type PIIProps = {
+  data: string;
+  revealPII: boolean;
+};
 
-const PII: React.FC<{ data: string }> = ({ data }) => (
-  <>{useObscuredPII(data)}</>
-);
+const PII = ({ data, revealPII }: PIIProps) => {
+  const pii = revealPII ? data : data.replace(/./g, "*");
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>{pii}</>
+  );
+};
 
 export default PII;

clients/admin-ui/src/features/common/PIIToggle.tsx

@@ -1,13 +1,26 @@
 import { Switch } from "@fidesui/react";
-import { setRevealPII } from "privacy-requests/privacy-requests.slice";
 import React, { ChangeEvent } from "react";
-import { useDispatch } from "react-redux";
 
-const PIIToggle: React.FC = () => {
-  const dispatch = useDispatch();
+type PIIToggleProps = {
+  revealPII: boolean;
+  onChange: (revealPII: boolean) => void;
+};
+
+const PIIToggle = ({ revealPII, onChange }: PIIToggleProps) => {
+  /*
+    The <Switch> onChange function only takes functions with ChangeEvent<HTMLInputElement>
+    as the input type. That's why the incoming function is being wrapped.
+   */
   const handleToggle = (event: ChangeEvent<HTMLInputElement>) =>
-    dispatch(setRevealPII(event.target.checked));
-  return <Switch colorScheme="secondary" onChange={handleToggle} />;
+    onChange(event.target.checked);
+
+  return (
+    <Switch
+      colorScheme="secondary"
+      isChecked={revealPII}
+      onChange={handleToggle}
+    />
+  );
 };
 
 export default PIIToggle;

clients/admin-ui/src/features/privacy-requests/PrivacyRequestsContainer.tsx

@@ -1,7 +1,7 @@
 import { Flex, Heading, Spacer } from "@fidesui/react";
 import dynamic from "next/dynamic";
 import * as React from "react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import { useDSRErrorAlert } from "./hooks/useDSRErrorAlert";
 import RequestFilters from "./RequestFilters";
@@ -14,6 +14,7 @@ const ActionButtons = dynamic(
 
 const PrivacyRequestsContainer: React.FC = () => {
   const { processing } = useDSRErrorAlert();
+  const [revealPII, setRevealPII] = useState(false);
 
   useEffect(() => {
     processing();
@@ -28,8 +29,8 @@ const PrivacyRequestsContainer: React.FC = () => {
         <Spacer />
         <ActionButtons />
       </Flex>
-      <RequestFilters />
-      <RequestTable />
+      <RequestFilters revealPII={revealPII} setRevealPII={setRevealPII} />
+      <RequestTable revealPII={revealPII} />
     </>
   );
 };

clients/admin-ui/src/features/privacy-requests/RequestFilters.tsx

@@ -30,7 +30,7 @@ import {
 } from "./privacy-requests.slice";
 import { PrivacyRequestStatus } from "./types";
 
-const useRequestFilters = () => {
+const useRequestFilters = (setRevealPII: (revealPII: boolean) => void) => {
   const filters = useSelector(selectPrivacyRequestFilters);
   const token = useSelector(selectToken);
   const dispatch = useDispatch();
@@ -56,7 +56,10 @@ const useRequestFilters = () => {
     dispatch(setRequestFrom(event?.target.value));
   const handleToChange = (event: React.ChangeEvent<HTMLInputElement>) =>
     dispatch(setRequestTo(event?.target.value));
-  const handleClearAllFilters = () => dispatch(clearAllFilters());
+  const handleClearAllFilters = () => {
+    setRevealPII(false);
+    dispatch(clearAllFilters());
+  };
   const handleDownloadClick = async () => {
     let message;
     try {
@@ -113,7 +116,12 @@ const useRequestFilters = () => {
   };
 };
 
-const RequestFilters: React.FC = () => {
+type RequestFiltersProps = {
+  revealPII: boolean;
+  setRevealPII: (revealPII: boolean) => void;
+};
+
+const RequestFilters = ({ revealPII, setRevealPII }: RequestFiltersProps) => {
   const {
     handleSearchChange,
     handleStatusChange,
@@ -126,7 +134,7 @@ const RequestFilters: React.FC = () => {
     selectedStatusList,
     statusList,
     to,
-  } = useRequestFilters();
+  } = useRequestFilters(setRevealPII);
 
   return (
     <Stack direction="row" spacing={4} mb={6}>
@@ -181,7 +189,7 @@ const RequestFilters: React.FC = () => {
         <Text fontSize="xs" mr={2} size="sm">
           Reveal PII
         </Text>
-        <PIIToggle />
+        <PIIToggle revealPII={revealPII} onChange={setRevealPII} />
       </Flex>
       <Button
         variant="ghost"

clients/admin-ui/src/features/privacy-requests/RequestRow.tsx

@@ -117,11 +117,19 @@ const useRequestRow = (request: PrivacyRequestEntity) => {
   };
 };
 
-const RequestRow: React.FC<{
+type RequestRowProps = {
   isChecked: boolean;
   onCheckChange: (id: string, checked: boolean) => void;
   request: PrivacyRequestEntity;
-}> = ({ isChecked, onCheckChange, request }) => {
+  revealPII: boolean;
+};
+
+const RequestRow = ({
+  isChecked,
+  onCheckChange,
+  request,
+  revealPII,
+}: RequestRowProps) => {
   const {
     hovered,
     handleMenuOpen,
@@ -183,6 +191,7 @@ const RequestRow: React.FC<{
                 ? request.identity.email || request.identity.phone_number || ""
                 : ""
             }
+            revealPII={revealPII}
           />
         </Text>
       </Td>
@@ -191,7 +200,10 @@ const RequestRow: React.FC<{
       </Td>
       <Td py={1}>
         <Text fontSize="xs">
-          <PII data={request.reviewer ? request.reviewer.username : ""} />
+          <PII
+            data={request.reviewer ? request.reviewer.username : ""}
+            revealPII={revealPII}
+          />
         </Text>
       </Td>
       <Td py={1}>

clients/admin-ui/src/features/privacy-requests/RequestTable.tsx

@@ -15,7 +15,11 @@ import RequestRow from "./RequestRow";
 import SortRequestButton from "./SortRequestButton";
 import { PrivacyRequestEntity } from "./types";
 
-const RequestTable: React.FC = () => {
+type RequestTableProps = {
+  revealPII: boolean;
+};
+
+const RequestTable = ({ revealPII }: RequestTableProps) => {
   const dispatch = useAppDispatch();
   const filters = useAppSelector(selectPrivacyRequestFilters);
   const { checkAll, errorRequests } = useAppSelector(selectRetryRequests);
@@ -104,6 +108,7 @@ const RequestTable: React.FC = () => {
               isChecked={errorRequests.includes(request.id)}
               onCheckChange={handleCheckChange}
               request={request}
+              revealPII={revealPII}
             />
           ))}
         </Tbody>

clients/admin-ui/src/features/privacy-requests/SubjectIdentities.tsx

@@ -1,4 +1,5 @@
 import { Divider, Flex, Heading, Text } from "@fidesui/react";
+import { useState } from "react";
 
 import PII from "../common/PII";
 import PIIToggle from "../common/PIIToggle";
@@ -10,6 +11,7 @@ type SubjectIdentitiesProps = {
 
 const SubjectIdentities = ({ subjectRequest }: SubjectIdentitiesProps) => {
   const { identity } = subjectRequest;
+  const [revealPII, setRevealPII] = useState(false);
 
   return (
     <>
@@ -18,7 +20,7 @@ const SubjectIdentities = ({ subjectRequest }: SubjectIdentitiesProps) => {
           Subject identities
         </Heading>
         <Flex flexShrink={0} alignItems="flex-start">
-          <PIIToggle />
+          <PIIToggle revealPII={revealPII} onChange={setRevealPII} />
           <Text
             fontSize="xs"
             ml={2}
@@ -44,15 +46,21 @@ const SubjectIdentities = ({ subjectRequest }: SubjectIdentitiesProps) => {
           Email:
         </Text>
         <Text color="gray.600" fontWeight="500" fontSize="sm">
-          <PII data={identity.email ? identity.email : ""} />
+          <PII
+            data={identity.email ? identity.email : ""}
+            revealPII={revealPII}
+          />
         </Text>
       </Flex>
       <Flex alignItems="flex-start">
         <Text mb={4} mr={2} fontSize="sm" color="gray.900" fontWeight="500">
           Mobile:
         </Text>
         <Text color="gray.600" fontWeight="500" fontSize="sm">
-          <PII data={identity.phone_number ? identity.phone_number : ""} />
+          <PII
+            data={identity.phone_number ? identity.phone_number : ""}
+            revealPII={revealPII}
+          />
         </Text>
       </Flex>
     </>

clients/admin-ui/src/features/privacy-requests/privacy-requests.slice.ts

@@ -125,17 +125,13 @@ export const selectRetryRequests = (state: RootState): RetryRequests => ({
   errorRequests: state.subjectRequests.errorRequests,
 });
 
-export const selectRevealPII = (state: RootState) =>
-  state.subjectRequests.revealPII;
-
 // Subject requests state (filters, etc.)
 type SubjectRequestsState = {
   checkAll: boolean;
   errorRequests: string[];
   from: string;
   id: string;
   page: number;
-  revealPII: boolean;
   size: number;
   sort_direction?: string;
   sort_field?: string;
@@ -150,7 +146,6 @@ const initialState: SubjectRequestsState = {
   from: "",
   id: "",
   page: 1,
-  revealPII: false,
   size: 25,
   to: "",
 };
@@ -159,9 +154,8 @@ export const subjectRequestsSlice = createSlice({
   name: "subjectRequests",
   initialState,
   reducers: {
-    clearAllFilters: ({ revealPII }) => ({
+    clearAllFilters: () => ({
       ...initialState,
-      revealPII,
     }),
     clearSortFields: (state) => ({
       ...state,
@@ -200,10 +194,6 @@ export const subjectRequestsSlice = createSlice({
       checkAll: action.payload.checkAll,
       errorRequests: action.payload.errorRequests,
     }),
-    setRevealPII: (state, action: PayloadAction<boolean>) => ({
-      ...state,
-      revealPII: action.payload,
-    }),
     setSortDirection: (state, action: PayloadAction<string>) => ({
       ...state,
       sort_direction: action.payload,
@@ -233,7 +223,6 @@ export const {
   setRequestStatus,
   setRequestTo,
   setRetryRequests,
-  setRevealPII,
   setSortDirection,
   setSortField,
   setVerbose,