From a8b339c3a2505471287fde43353778a389b4d8e5 Mon Sep 17 00:00:00 2001 From: Andrew Jackson Date: Thu, 26 Jan 2023 12:25:14 -0500 Subject: [PATCH 1/9] See PIIToggle with redux store value --- clients/admin-ui/src/features/common/PIIToggle.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/clients/admin-ui/src/features/common/PIIToggle.tsx b/clients/admin-ui/src/features/common/PIIToggle.tsx index c3f98e1ccf5..24f48fe7c6b 100644 --- a/clients/admin-ui/src/features/common/PIIToggle.tsx +++ b/clients/admin-ui/src/features/common/PIIToggle.tsx @@ -1,13 +1,16 @@ import { Switch } from "@fidesui/react"; -import { setRevealPII } from "privacy-requests/privacy-requests.slice"; +import { selectRevealPII,setRevealPII } from "privacy-requests/privacy-requests.slice"; import React, { ChangeEvent } from "react"; import { useDispatch } from "react-redux"; +import { useAppSelector } from "~/app/hooks"; + const PIIToggle: React.FC = () => { const dispatch = useDispatch(); + const revealPII = useAppSelector(selectRevealPII); const handleToggle = (event: ChangeEvent) => dispatch(setRevealPII(event.target.checked)); - return ; + return ; }; export default PIIToggle; From cf9a25df876d66a00d9bfe2262488ac18d184e96 Mon Sep 17 00:00:00 2001 From: Andrew Jackson Date: Thu, 26 Jan 2023 12:48:54 -0500 Subject: [PATCH 2/9] Memoize `selectRevealPII` selector --- .../features/privacy-requests/privacy-requests.slice.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/clients/admin-ui/src/features/privacy-requests/privacy-requests.slice.ts b/clients/admin-ui/src/features/privacy-requests/privacy-requests.slice.ts index 97c94836d93..803f2dc0ab8 100644 --- a/clients/admin-ui/src/features/privacy-requests/privacy-requests.slice.ts +++ b/clients/admin-ui/src/features/privacy-requests/privacy-requests.slice.ts @@ -1,4 +1,4 @@ -import { createSlice, PayloadAction } from "@reduxjs/toolkit"; +import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit"; import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; import { addCommonHeaders } from "common/CommonHeaders"; @@ -117,6 +117,7 @@ export const selectPrivacyRequestFilters = ( verbose: state.subjectRequests.verbose, }); +const selectSubjectRequests = (state: RootState) => state.subjectRequests; export const selectRequestStatus = (state: RootState) => state.subjectRequests.status; @@ -125,8 +126,10 @@ export const selectRetryRequests = (state: RootState): RetryRequests => ({ errorRequests: state.subjectRequests.errorRequests, }); -export const selectRevealPII = (state: RootState) => - state.subjectRequests.revealPII; +export const selectRevealPII = createSelector( + selectSubjectRequests, + (state) => state.revealPII +); // Subject requests state (filters, etc.) type SubjectRequestsState = { From 94c4f92da8df2c1e1c0fe3634a4ee9e1d1fe4ba2 Mon Sep 17 00:00:00 2001 From: Andrew Jackson Date: Thu, 26 Jan 2023 12:50:12 -0500 Subject: [PATCH 3/9] Set switch state based on redux store --- .../admin-ui/src/features/common/PIIToggle.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/clients/admin-ui/src/features/common/PIIToggle.tsx b/clients/admin-ui/src/features/common/PIIToggle.tsx index 24f48fe7c6b..91a72677d71 100644 --- a/clients/admin-ui/src/features/common/PIIToggle.tsx +++ b/clients/admin-ui/src/features/common/PIIToggle.tsx @@ -1,5 +1,8 @@ import { Switch } from "@fidesui/react"; -import { selectRevealPII,setRevealPII } from "privacy-requests/privacy-requests.slice"; +import { + selectRevealPII, + setRevealPII, +} from "privacy-requests/privacy-requests.slice"; import React, { ChangeEvent } from "react"; import { useDispatch } from "react-redux"; @@ -8,9 +11,16 @@ import { useAppSelector } from "~/app/hooks"; const PIIToggle: React.FC = () => { const dispatch = useDispatch(); const revealPII = useAppSelector(selectRevealPII); - const handleToggle = (event: ChangeEvent) => + const handleToggle = (event: ChangeEvent) => { dispatch(setRevealPII(event.target.checked)); - return ; + }; + return ( + + ); }; export default PIIToggle; From 772bf2a711362e3afd2cfe5a2852fa46b01b87c2 Mon Sep 17 00:00:00 2001 From: Andrew Jackson Date: Thu, 26 Jan 2023 12:55:02 -0500 Subject: [PATCH 4/9] Remove braces --- clients/admin-ui/src/features/common/PIIToggle.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/clients/admin-ui/src/features/common/PIIToggle.tsx b/clients/admin-ui/src/features/common/PIIToggle.tsx index 91a72677d71..2aa52af8de9 100644 --- a/clients/admin-ui/src/features/common/PIIToggle.tsx +++ b/clients/admin-ui/src/features/common/PIIToggle.tsx @@ -11,9 +11,9 @@ import { useAppSelector } from "~/app/hooks"; const PIIToggle: React.FC = () => { const dispatch = useDispatch(); const revealPII = useAppSelector(selectRevealPII); - const handleToggle = (event: ChangeEvent) => { + const handleToggle = (event: ChangeEvent) => dispatch(setRevealPII(event.target.checked)); - }; + return ( Date: Thu, 26 Jan 2023 12:57:39 -0500 Subject: [PATCH 5/9] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a17ec282622..ab9f9f0a8a2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,6 +38,7 @@ 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 will remember the selection between pages [#2388](https://github.com/ethyca/fides/pull/2388) ### Security From e7cb93ce69cecd159b6104cc9732fb4a75e4818a Mon Sep 17 00:00:00 2001 From: Andrew Jackson Date: Thu, 26 Jan 2023 13:16:03 -0500 Subject: [PATCH 6/9] Default PII to hidden on pageload --- clients/admin-ui/src/features/common/PIIToggle.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/clients/admin-ui/src/features/common/PIIToggle.tsx b/clients/admin-ui/src/features/common/PIIToggle.tsx index 2aa52af8de9..66baaf532f4 100644 --- a/clients/admin-ui/src/features/common/PIIToggle.tsx +++ b/clients/admin-ui/src/features/common/PIIToggle.tsx @@ -3,7 +3,7 @@ import { selectRevealPII, setRevealPII, } from "privacy-requests/privacy-requests.slice"; -import React, { ChangeEvent } from "react"; +import React, { ChangeEvent, useEffect } from "react"; import { useDispatch } from "react-redux"; import { useAppSelector } from "~/app/hooks"; @@ -14,6 +14,14 @@ const PIIToggle: React.FC = () => { const handleToggle = (event: ChangeEvent) => dispatch(setRevealPII(event.target.checked)); + useEffect(() => { + /* + PII should default to hidden on page load. + This ensures the state isn't reused as the user navigates around + */ + dispatch(setRevealPII(false)); + }, [dispatch]); + return ( Date: Thu, 26 Jan 2023 13:26:53 -0500 Subject: [PATCH 7/9] Remove revealPII selector in toggle state --- .../admin-ui/src/features/common/PIIToggle.tsx | 16 ++-------------- .../privacy-requests/privacy-requests.slice.ts | 9 +++------ 2 files changed, 5 insertions(+), 20 deletions(-) diff --git a/clients/admin-ui/src/features/common/PIIToggle.tsx b/clients/admin-ui/src/features/common/PIIToggle.tsx index 66baaf532f4..e226c5a4fca 100644 --- a/clients/admin-ui/src/features/common/PIIToggle.tsx +++ b/clients/admin-ui/src/features/common/PIIToggle.tsx @@ -1,16 +1,10 @@ import { Switch } from "@fidesui/react"; -import { - selectRevealPII, - setRevealPII, -} from "privacy-requests/privacy-requests.slice"; +import { setRevealPII } from "privacy-requests/privacy-requests.slice"; import React, { ChangeEvent, useEffect } from "react"; import { useDispatch } from "react-redux"; -import { useAppSelector } from "~/app/hooks"; - const PIIToggle: React.FC = () => { const dispatch = useDispatch(); - const revealPII = useAppSelector(selectRevealPII); const handleToggle = (event: ChangeEvent) => dispatch(setRevealPII(event.target.checked)); @@ -22,13 +16,7 @@ const PIIToggle: React.FC = () => { dispatch(setRevealPII(false)); }, [dispatch]); - return ( - - ); + return ; }; export default PIIToggle; diff --git a/clients/admin-ui/src/features/privacy-requests/privacy-requests.slice.ts b/clients/admin-ui/src/features/privacy-requests/privacy-requests.slice.ts index 803f2dc0ab8..97c94836d93 100644 --- a/clients/admin-ui/src/features/privacy-requests/privacy-requests.slice.ts +++ b/clients/admin-ui/src/features/privacy-requests/privacy-requests.slice.ts @@ -1,4 +1,4 @@ -import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit"; +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; import { addCommonHeaders } from "common/CommonHeaders"; @@ -117,7 +117,6 @@ export const selectPrivacyRequestFilters = ( verbose: state.subjectRequests.verbose, }); -const selectSubjectRequests = (state: RootState) => state.subjectRequests; export const selectRequestStatus = (state: RootState) => state.subjectRequests.status; @@ -126,10 +125,8 @@ export const selectRetryRequests = (state: RootState): RetryRequests => ({ errorRequests: state.subjectRequests.errorRequests, }); -export const selectRevealPII = createSelector( - selectSubjectRequests, - (state) => state.revealPII -); +export const selectRevealPII = (state: RootState) => + state.subjectRequests.revealPII; // Subject requests state (filters, etc.) type SubjectRequestsState = { From 0b6080785f3c2d4c6a3354921b3959735a239132 Mon Sep 17 00:00:00 2001 From: Andrew Jackson Date: Thu, 26 Jan 2023 13:32:02 -0500 Subject: [PATCH 8/9] Update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ab9f9f0a8a2..28869925cc9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,7 +38,7 @@ 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 will remember the selection between pages [#2388](https://github.com/ethyca/fides/pull/2388) +* The PII toggle defaults to false and PII will be hidden on page load [#2388](https://github.com/ethyca/fides/pull/2388) ### Security From 19dff77738f9ed58a39c437a3ca5ed16fde7f411 Mon Sep 17 00:00:00 2001 From: Andrew Jackson Date: Mon, 30 Jan 2023 15:52:21 -0500 Subject: [PATCH 9/9] Refactor the PII components to no longer use Redux --- clients/admin-ui/src/features/common/PII.tsx | 16 +++++++--- .../src/features/common/PIIToggle.tsx | 32 +++++++++++-------- .../PrivacyRequestsContainer.tsx | 7 ++-- .../privacy-requests/RequestFilters.tsx | 18 ++++++++--- .../features/privacy-requests/RequestRow.tsx | 18 +++++++++-- .../privacy-requests/RequestTable.tsx | 7 +++- .../privacy-requests/SubjectIdentities.tsx | 14 ++++++-- .../src/features/privacy-requests/helpers.ts | 12 ------- .../privacy-requests.slice.ts | 13 +------- 9 files changed, 79 insertions(+), 58 deletions(-) delete mode 100644 clients/admin-ui/src/features/privacy-requests/helpers.ts diff --git a/clients/admin-ui/src/features/common/PII.tsx b/clients/admin-ui/src/features/common/PII.tsx index f7079fe2d67..8a101276d78 100644 --- a/clients/admin-ui/src/features/common/PII.tsx +++ b/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; diff --git a/clients/admin-ui/src/features/common/PIIToggle.tsx b/clients/admin-ui/src/features/common/PIIToggle.tsx index e226c5a4fca..77ce7411411 100644 --- a/clients/admin-ui/src/features/common/PIIToggle.tsx +++ b/clients/admin-ui/src/features/common/PIIToggle.tsx @@ -1,22 +1,26 @@ import { Switch } from "@fidesui/react"; -import { setRevealPII } from "privacy-requests/privacy-requests.slice"; -import React, { ChangeEvent, useEffect } from "react"; -import { useDispatch } from "react-redux"; +import React, { ChangeEvent } from "react"; -const PIIToggle: React.FC = () => { - const dispatch = useDispatch(); - const handleToggle = (event: ChangeEvent) => - dispatch(setRevealPII(event.target.checked)); +type PIIToggleProps = { + revealPII: boolean; + onChange: (revealPII: boolean) => void; +}; - useEffect(() => { - /* - PII should default to hidden on page load. - This ensures the state isn't reused as the user navigates around +const PIIToggle = ({ revealPII, onChange }: PIIToggleProps) => { + /* + The onChange function only takes functions with ChangeEvent + as the input type. That's why the incoming function is being wrapped. */ - dispatch(setRevealPII(false)); - }, [dispatch]); + const handleToggle = (event: ChangeEvent) => + onChange(event.target.checked); - return ; + return ( + + ); }; export default PIIToggle; diff --git a/clients/admin-ui/src/features/privacy-requests/PrivacyRequestsContainer.tsx b/clients/admin-ui/src/features/privacy-requests/PrivacyRequestsContainer.tsx index 9082407cef0..2f25628e1eb 100644 --- a/clients/admin-ui/src/features/privacy-requests/PrivacyRequestsContainer.tsx +++ b/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 = () => { - - + + ); }; diff --git a/clients/admin-ui/src/features/privacy-requests/RequestFilters.tsx b/clients/admin-ui/src/features/privacy-requests/RequestFilters.tsx index 864a5814984..7530288fb1b 100644 --- a/clients/admin-ui/src/features/privacy-requests/RequestFilters.tsx +++ b/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) => 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 ( @@ -181,7 +189,7 @@ const RequestFilters: React.FC = () => { Reveal PII - +