diff --git a/CHANGELOG.md b/CHANGELOG.md index 24a3009ec..dc986460d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,9 @@ The types of changes are: ## [Unreleased](https://github.com/ethyca/fidesops/compare/1.7.2...main) +### Changed +* Refactor privacy center to be more modular [#1363](https://github.com/ethyca/fidesops/pull/1363) + ### Fixed * Distinguish whether webhook has been visited and no fields were found, versus never visited [#1339](https://github.com/ethyca/fidesops/pull/1339) * Fix Redis Cache Early Expiration in Tests [#1358](https://github.com/ethyca/fidesops/pull/1358) diff --git a/clients/ops/privacy-center/__tests__/RequestModal.test.tsx b/clients/ops/privacy-center/__tests__/RequestModal.test.tsx index 52fafa587..ec9d1de75 100644 --- a/clients/ops/privacy-center/__tests__/RequestModal.test.tsx +++ b/clients/ops/privacy-center/__tests__/RequestModal.test.tsx @@ -12,9 +12,9 @@ import { rest } from "msw"; import { setupServer } from "msw/node"; import { - RequestModal, + PrivacyRequestModal, RequestModalProps, -} from "../components/modals/RequestModal"; +} from "../components/modals/privacy-request-modal/PrivacyRequestModal"; import IndexPage from "../pages/index"; import mockConfig from "../config/__mocks__/config.json"; @@ -51,14 +51,16 @@ const defaultModalProperties: RequestModalProps = { describe("RequestModal", () => { it("renders a modal when isOpen is true", () => { - render(); + render(); const modal = screen.getByRole("dialog"); expect(modal).toBeInTheDocument(); }); it("renders the appropriate inputs", () => { - let { unmount } = render(); + let { unmount } = render( + + ); expect(screen.getByPlaceholderText("Name*")).toBeInTheDocument(); expect(screen.getByPlaceholderText("Email*")).toBeInTheDocument(); @@ -67,7 +69,7 @@ describe("RequestModal", () => { unmount(); ({ unmount } = render( - @@ -80,7 +82,7 @@ describe("RequestModal", () => { unmount(); ({ unmount } = render( - @@ -94,13 +96,13 @@ describe("RequestModal", () => { }); it("renders the button as disabled before inputs are filled", () => { - render(); + render(); const submitButton = screen.getByText("Continue"); expect(submitButton).toBeDisabled(); }); it("renders the button as enabled after inputs are filled correctly", async () => { - render(); + render(); act(() => { fireEvent.change(screen.getByPlaceholderText("Name*"), { target: { value: "Ethyca" }, diff --git a/clients/ops/privacy-center/components/Card.tsx b/clients/ops/privacy-center/components/Card.tsx new file mode 100644 index 000000000..4daeded45 --- /dev/null +++ b/clients/ops/privacy-center/components/Card.tsx @@ -0,0 +1,63 @@ +import React from "react"; +import { Heading, Text, Stack, Box, Image, HStack } from "@fidesui/react"; + +type CardProps = { + title: string; + iconPath: string; + description: string; + onClick: () => void; +}; + +const Card: React.FC = ({ + title, + iconPath, + description, + onClick, +}) => ( + { + onClick(); + }} + > + + + {description} + + + + + {title} + + + {description} + + + + +); + +export default Card; diff --git a/clients/ops/privacy-center/components/PrivacyCard.tsx b/clients/ops/privacy-center/components/PrivacyCard.tsx index 2d670d251..82448f965 100644 --- a/clients/ops/privacy-center/components/PrivacyCard.tsx +++ b/clients/ops/privacy-center/components/PrivacyCard.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Heading, Text, Stack, Box, Image, HStack } from "@fidesui/react"; +import Card from "./Card"; type PrivacyCardProps = { title: string; @@ -16,48 +16,14 @@ const PrivacyCard: React.FC = ({ description, onOpen, }) => ( - { + onOpen(policyKey); }} - _focus={{ - outline: "none", - boxShadow: "complimentary-2xl", - }} - onClick={() => onOpen(policyKey)} - > - - - {description} - - - - - {title} - - - {description} - - - - + /> ); export default PrivacyCard; diff --git a/clients/ops/privacy-center/components/modals/RequestModal.tsx b/clients/ops/privacy-center/components/modals/RequestModal.tsx index 93a5ac28f..561f7fd90 100644 --- a/clients/ops/privacy-center/components/modals/RequestModal.tsx +++ b/clients/ops/privacy-center/components/modals/RequestModal.tsx @@ -1,115 +1,22 @@ -import React, { useState } from "react"; +import React from "react"; import { Modal, ModalContent, ModalOverlay } from "@fidesui/react"; -import type { AlertState } from "../../types/AlertState"; - -import config from "../../config/config.json"; - -import { ModalViews } from "./types"; -import PrivacyRequestForm from "./PrivacyRequestForm"; -import VerificationForm from "./VerificationForm"; -import RequestSubmitted from "./RequestSubmitted"; - -export const useRequestModal = () => { - const [isOpen, setIsOpen] = useState(false); - const [openAction, setOpenAction] = useState(null); - const [currentView, setCurrentView] = useState( - ModalViews.PrivacyRequest - ); - const [privacyRequestId, setPrivacyRequestId] = useState(""); - - const onOpen = (action: string) => { - setOpenAction(action); - setIsOpen(true); - }; - - const onClose = () => { - setIsOpen(false); - setOpenAction(null); - setCurrentView(ModalViews.PrivacyRequest); - setPrivacyRequestId(""); - }; - - return { - isOpen, - onClose, - onOpen, - openAction, - currentView, - setCurrentView, - privacyRequestId, - setPrivacyRequestId, - }; -}; - -export type RequestModalProps = { +type RequestModalProps = { isOpen: boolean; onClose: () => void; - openAction: string | null; - setAlert: (state: AlertState) => void; - currentView: ModalViews; - setCurrentView: (view: ModalViews) => void; - privacyRequestId: string; - setPrivacyRequestId: (id: string) => void; - isVerificationRequired: boolean; }; -export const RequestModal: React.FC = ({ +const RequestModal: React.FC = ({ isOpen, onClose, - openAction, - setAlert, - currentView, - setCurrentView, - privacyRequestId, - setPrivacyRequestId, - isVerificationRequired, -}) => { - const action = openAction - ? config.actions.filter(({ policy_key }) => policy_key === openAction)[0] - : null; - - if (!action) return null; - - let form = null; - - if (currentView === ModalViews.PrivacyRequest) { - form = ( - - ); - } - - if (currentView === ModalViews.IdentityVerification) { - form = ( - - ); - } - - if (currentView === ModalViews.RequestSubmitted) { - form = ; - } - - return ( - - - - {form} - - - ); -}; + children, +}) => ( + + + + {children} + + +); + +export default RequestModal; diff --git a/clients/ops/privacy-center/components/modals/VerificationForm.tsx b/clients/ops/privacy-center/components/modals/VerificationForm.tsx index 3f686e242..d90213049 100644 --- a/clients/ops/privacy-center/components/modals/VerificationForm.tsx +++ b/clients/ops/privacy-center/components/modals/VerificationForm.tsx @@ -18,40 +18,38 @@ import { useFormik } from "formik"; import { Headers } from "headers-polyfill"; import type { AlertState } from "../../types/AlertState"; -import { ModalViews } from "./types"; +import { ModalViews, VerificationType } from "./types"; import { addCommonHeaders } from "../../common/CommonHeaders"; -import config from "../../config/config.json"; import { hostUrl } from "../../constants"; const useVerificationForm = ({ onClose, - action, setAlert, - privacyRequestId, + requestId, setCurrentView, + resetView, + verificationType, + successHandler, }: { onClose: () => void; - action: typeof config.actions[0] | null; setAlert: (state: AlertState) => void; - privacyRequestId: string; + requestId: string; setCurrentView: (view: ModalViews) => void; + resetView: ModalViews; + verificationType: VerificationType; + successHandler: () => void; }) => { const [isLoading, setIsLoading] = useState(false); const resetVerificationProcess = useCallback(() => { - setCurrentView(ModalViews.PrivacyRequest); - }, [setCurrentView]); + setCurrentView(resetView); + }, [setCurrentView, resetView]); const formik = useFormik({ initialValues: { code: "", }, onSubmit: async (values) => { - if (!action) { - // somehow we've reached a broken state, return - return; - } - setIsLoading(true); const body = { @@ -72,7 +70,7 @@ const useVerificationForm = ({ addCommonHeaders(headers, null); const response = await fetch( - `${hostUrl}/privacy-request/${privacyRequestId}/verify`, + `${hostUrl}/${verificationType}/${requestId}/verify`, { method: "POST", headers, @@ -86,7 +84,7 @@ const useVerificationForm = ({ return; } - setCurrentView(ModalViews.RequestSubmitted); + successHandler(); } catch (error) { handleError(""); } @@ -114,24 +112,24 @@ const useVerificationForm = ({ type VerificationFormProps = { isOpen: boolean; onClose: () => void; - openAction: string | null; setAlert: (state: AlertState) => void; - privacyRequestId: string; + requestId: string; setCurrentView: (view: ModalViews) => void; + resetView: ModalViews; + verificationType: VerificationType; + successHandler: () => void; }; const VerificationForm: React.FC = ({ isOpen, onClose, - openAction, setAlert, - privacyRequestId, + requestId, setCurrentView, + resetView, + verificationType, + successHandler, }) => { - const action = openAction - ? config.actions.filter(({ policy_key }) => policy_key === openAction)[0] - : null; - const { errors, handleBlur, @@ -145,16 +143,16 @@ const VerificationForm: React.FC = ({ resetVerificationProcess, } = useVerificationForm({ onClose, - action, setAlert, - privacyRequestId, + requestId, setCurrentView, + resetView, + verificationType, + successHandler, }); useEffect(() => resetForm(), [isOpen, resetForm]); - if (!action) return null; - return ( <> @@ -167,25 +165,23 @@ const VerificationForm: React.FC = ({ your email, then return to this window and the code below. - {action.identity_inputs.name ? ( - + - - {errors.code} - - ) : null} + /> + {errors.code} + diff --git a/clients/ops/privacy-center/components/modals/PrivacyRequestForm.tsx b/clients/ops/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx similarity index 96% rename from clients/ops/privacy-center/components/modals/PrivacyRequestForm.tsx rename to clients/ops/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx index f951c250f..24676fc27 100644 --- a/clients/ops/privacy-center/components/modals/PrivacyRequestForm.tsx +++ b/clients/ops/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx @@ -15,14 +15,14 @@ import { import { useFormik } from "formik"; import { Headers } from "headers-polyfill"; -import type { AlertState } from "../../types/AlertState"; -import { PrivacyRequestStatus } from "../../types"; -import { addCommonHeaders } from "../../common/CommonHeaders"; +import type { AlertState } from "../../../types/AlertState"; +import { PrivacyRequestStatus } from "../../../types"; +import { addCommonHeaders } from "../../../common/CommonHeaders"; -import config from "../../config/config.json"; +import config from "../../../config/config.json"; -import { ModalViews } from "./types"; -import { hostUrl } from "../../constants"; +import { ModalViews } from "../types"; +import { hostUrl } from "../../../constants"; const usePrivacyRequestForm = ({ onClose, diff --git a/clients/ops/privacy-center/components/modals/privacy-request-modal/PrivacyRequestModal.tsx b/clients/ops/privacy-center/components/modals/privacy-request-modal/PrivacyRequestModal.tsx new file mode 100644 index 000000000..9fa1f1590 --- /dev/null +++ b/clients/ops/privacy-center/components/modals/privacy-request-modal/PrivacyRequestModal.tsx @@ -0,0 +1,122 @@ +import React, { useCallback, useState } from "react"; +import RequestModal from "../RequestModal"; + +import type { AlertState } from "../../../types/AlertState"; + +import config from "../../../config/config.json"; + +import PrivacyRequestForm from "./PrivacyRequestForm"; +import VerificationForm from "../VerificationForm"; +import RequestSubmitted from "./RequestSubmitted"; + +import { ModalViews, VerificationType } from "../types"; + +export const usePrivactRequestModal = () => { + const [isOpen, setIsOpen] = useState(false); + const [openAction, setOpenAction] = useState(null); + const [currentView, setCurrentView] = useState( + ModalViews.PrivacyRequest + ); + const [privacyRequestId, setPrivacyRequestId] = useState(""); + + const onOpen = (action: string) => { + setOpenAction(action); + setIsOpen(true); + }; + + const onClose = () => { + setIsOpen(false); + setOpenAction(null); + setCurrentView(ModalViews.PrivacyRequest); + setPrivacyRequestId(""); + }; + + const successHandler = useCallback(() => { + setCurrentView(ModalViews.RequestSubmitted); + }, [setCurrentView]); + + return { + isOpen, + onClose, + onOpen, + openAction, + currentView, + setCurrentView, + privacyRequestId, + setPrivacyRequestId, + successHandler, + }; +}; + +export type RequestModalProps = { + isOpen: boolean; + onClose: () => void; + openAction: string | null; + setAlert: (state: AlertState) => void; + currentView: ModalViews; + setCurrentView: (view: ModalViews) => void; + privacyRequestId: string; + setPrivacyRequestId: (id: string) => void; + isVerificationRequired: boolean; + successHandler: () => void; +}; + +export const PrivacyRequestModal: React.FC = ({ + isOpen, + onClose, + openAction, + setAlert, + currentView, + setCurrentView, + privacyRequestId, + setPrivacyRequestId, + isVerificationRequired, + successHandler, +}) => { + const action = openAction + ? config.actions.filter(({ policy_key }) => policy_key === openAction)[0] + : null; + + if (!action) return null; + + let form = null; + + if (currentView === ModalViews.PrivacyRequest) { + form = ( + + ); + } + + if (currentView === ModalViews.IdentityVerification) { + form = ( + + ); + } + + if (currentView === ModalViews.RequestSubmitted) { + form = ; + } + + return ( + + {form} + + ); +}; diff --git a/clients/ops/privacy-center/components/modals/RequestSubmitted.tsx b/clients/ops/privacy-center/components/modals/privacy-request-modal/RequestSubmitted.tsx similarity index 100% rename from clients/ops/privacy-center/components/modals/RequestSubmitted.tsx rename to clients/ops/privacy-center/components/modals/privacy-request-modal/RequestSubmitted.tsx diff --git a/clients/ops/privacy-center/components/modals/types.ts b/clients/ops/privacy-center/components/modals/types.ts index ba0f62542..0e4208c4f 100644 --- a/clients/ops/privacy-center/components/modals/types.ts +++ b/clients/ops/privacy-center/components/modals/types.ts @@ -5,3 +5,7 @@ export enum ModalViews { IdentityVerification = "identityVerification", RequestSubmitted = "requestSubmitted", } + +export enum VerificationType { + PrivacyRequest = "privacy-request", +} diff --git a/clients/ops/privacy-center/package-lock.json b/clients/ops/privacy-center/package-lock.json index 8ea53fd08..98886d467 100644 --- a/clients/ops/privacy-center/package-lock.json +++ b/clients/ops/privacy-center/package-lock.json @@ -6,8 +6,9 @@ "": { "name": "fidesops-privacy-center", "dependencies": { + "@chakra-ui/icons": "^1.1.7", "@chakra-ui/react": "^1.7.4", - "@chakra-ui/system": ">=1.0.0", + "@chakra-ui/system": "^1.12.1", "@emotion/react": "^11", "@emotion/styled": "^11", "@fidesui/react": "^0.0.9", @@ -1093,19 +1094,65 @@ } }, "node_modules/@chakra-ui/color-mode": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.1.tgz", - "integrity": "sha512-aj9PqYncJ+qceaf0s12Aj81pr7uqUyU6/DLWJQI7tiCv4n7P5SO6wMIJ1794ULJFZ+Vq7Ik9eoqK7H60Qbr90w==", - "license": "MIT", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.3.tgz", + "integrity": "sha512-2EFwsYZg3/wMH8DWtQic766N6gfw4Z/I8v57fmSSvkPV8k72pUdDn5ZjtnGhXU5R08aWl7w4exPo31ikLYlD6w==", "dependencies": { - "@chakra-ui/hooks": "1.8.0", - "@chakra-ui/react-env": "1.1.2", - "@chakra-ui/utils": "1.10.0" + "@chakra-ui/hooks": "1.8.2", + "@chakra-ui/react-env": "1.1.4", + "@chakra-ui/utils": "1.10.2" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, + "node_modules/@chakra-ui/color-mode/node_modules/@chakra-ui/hooks": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/@chakra-ui/hooks/-/hooks-1.8.2.tgz", + "integrity": "sha512-rmWfXTh7Ku0sg4bPaR9E5a53N4dzcgrdMt5lDVeaxjLUm2faE0U8LcG8yJgpxNOMKDmaKat8Nrj6H5DBYhVB+A==", + "dependencies": { + "@chakra-ui/react-utils": "1.2.2", + "@chakra-ui/utils": "1.10.2", + "compute-scroll-into-view": "1.0.14", + "copy-to-clipboard": "3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, + "node_modules/@chakra-ui/color-mode/node_modules/@chakra-ui/react-env": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-env/-/react-env-1.1.4.tgz", + "integrity": "sha512-T3ABET1UUP8PAdE7rF6rc2Luo0xb539taFR7kES+MPK5Bmbu/mL55cj+xEKa2LSNKuzAVnvtmgWFZoX3V+PXsQ==", + "dependencies": { + "@chakra-ui/utils": "1.10.2" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, + "node_modules/@chakra-ui/color-mode/node_modules/@chakra-ui/react-utils": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-utils/-/react-utils-1.2.2.tgz", + "integrity": "sha512-vdVtwEooRPVmB60+B9FEJNc+L4+DO6llA9qTk8ZFq7ocXLGagl+V5mFKJPLMzmTCafq6j5pNjoAF4A7bbh4U4Q==", + "dependencies": { + "@chakra-ui/utils": "^1.10.2" }, "peerDependencies": { "react": ">=16.8.6" } }, + "node_modules/@chakra-ui/color-mode/node_modules/@chakra-ui/utils": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/@chakra-ui/utils/-/utils-1.10.2.tgz", + "integrity": "sha512-V4nGBkebZpz6P7AgbZBiXi2Pn3RNSuzR1A6VsQCzAvxYU2+csqZGLqmC07pvCSACNB75sT1en+Xd3XT0QKr0sA==", + "dependencies": { + "@types/lodash.mergewith": "4.6.6", + "css-box-model": "1.2.1", + "framesync": "5.3.0", + "lodash.mergewith": "4.6.2" + } + }, "node_modules/@chakra-ui/control-box": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@chakra-ui/control-box/-/control-box-1.1.2.tgz", @@ -1226,6 +1273,42 @@ "react": ">=16.8.6" } }, + "node_modules/@chakra-ui/icons": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-1.1.7.tgz", + "integrity": "sha512-YIHxey/B4M2PyFASlHXtAWFyW+tsAtGAChOJ8dsM2kpu1MbVUqm/6nMI1KIFd7Te5IWuNYA75rAHBdLI0Yu61A==", + "dependencies": { + "@chakra-ui/icon": "2.0.5", + "@types/react": "^17.0.15" + }, + "peerDependencies": { + "@chakra-ui/system": ">=1.0.0", + "react": ">=16.8.6" + } + }, + "node_modules/@chakra-ui/icons/node_modules/@chakra-ui/icon": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@chakra-ui/icon/-/icon-2.0.5.tgz", + "integrity": "sha512-ZrqRvCCIxGr4qFd/r1pmtd9tobRmv8KAxV7ygFoc/t4vOSKTcVIjhE12gsI3FzgvXM15ZFVwsxa1zodwgo5neQ==", + "dependencies": { + "@chakra-ui/utils": "1.10.4" + }, + "peerDependencies": { + "@chakra-ui/system": ">=1.0.0", + "react": ">=16.8.6" + } + }, + "node_modules/@chakra-ui/icons/node_modules/@chakra-ui/utils": { + "version": "1.10.4", + "resolved": "https://registry.npmjs.org/@chakra-ui/utils/-/utils-1.10.4.tgz", + "integrity": "sha512-AM91VQQxw8F4F1WDA28mqKY6NFIOuzc2Ekkna88imy2OiqqmYH0xkq8J16L2qj4cLiLozpYqba3C79pWioy6FA==", + "dependencies": { + "@types/lodash.mergewith": "4.6.6", + "css-box-model": "1.2.1", + "framesync": "5.3.0", + "lodash.mergewith": "4.6.2" + } + }, "node_modules/@chakra-ui/image": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-1.1.3.tgz", @@ -1454,6 +1537,45 @@ "react-dom": ">=16.8.6" } }, + "node_modules/@chakra-ui/provider/node_modules/@chakra-ui/color-mode": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.1.tgz", + "integrity": "sha512-aj9PqYncJ+qceaf0s12Aj81pr7uqUyU6/DLWJQI7tiCv4n7P5SO6wMIJ1794ULJFZ+Vq7Ik9eoqK7H60Qbr90w==", + "dependencies": { + "@chakra-ui/hooks": "1.8.0", + "@chakra-ui/react-env": "1.1.2", + "@chakra-ui/utils": "1.10.0" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, + "node_modules/@chakra-ui/provider/node_modules/@chakra-ui/styled-system": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.17.0.tgz", + "integrity": "sha512-aqR4Yv+4Io8K49UUnZAhi5r56rlFIeZbTEI70/lEJP0L10JrnAnPAO/XYRYnt5GFcKu9hYQQTEmvpa3Z+J14NQ==", + "dependencies": { + "@chakra-ui/utils": "1.10.0", + "csstype": "^3.0.9" + } + }, + "node_modules/@chakra-ui/provider/node_modules/@chakra-ui/system": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.1.tgz", + "integrity": "sha512-w3VEoLI0sGDPDpP4CFlQWUgP/D1vWIuQtHePJkTRRGifxK1hk4WxfdJQf2y8CuZRvvQZ94AqUJThFue4sUJcdw==", + "dependencies": { + "@chakra-ui/color-mode": "1.4.1", + "@chakra-ui/react-utils": "1.2.1", + "@chakra-ui/styled-system": "1.17.0", + "@chakra-ui/utils": "1.10.0", + "react-fast-compare": "3.2.0" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0", + "@emotion/styled": "^11.0.0", + "react": ">=16.8.6" + } + }, "node_modules/@chakra-ui/radio": { "version": "1.4.5", "resolved": "https://registry.npmjs.org/@chakra-ui/radio/-/radio-1.4.5.tgz", @@ -1557,6 +1679,45 @@ "react": ">=16.8.6" } }, + "node_modules/@chakra-ui/react/node_modules/@chakra-ui/color-mode": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.1.tgz", + "integrity": "sha512-aj9PqYncJ+qceaf0s12Aj81pr7uqUyU6/DLWJQI7tiCv4n7P5SO6wMIJ1794ULJFZ+Vq7Ik9eoqK7H60Qbr90w==", + "dependencies": { + "@chakra-ui/hooks": "1.8.0", + "@chakra-ui/react-env": "1.1.2", + "@chakra-ui/utils": "1.10.0" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, + "node_modules/@chakra-ui/react/node_modules/@chakra-ui/styled-system": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.17.0.tgz", + "integrity": "sha512-aqR4Yv+4Io8K49UUnZAhi5r56rlFIeZbTEI70/lEJP0L10JrnAnPAO/XYRYnt5GFcKu9hYQQTEmvpa3Z+J14NQ==", + "dependencies": { + "@chakra-ui/utils": "1.10.0", + "csstype": "^3.0.9" + } + }, + "node_modules/@chakra-ui/react/node_modules/@chakra-ui/system": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.1.tgz", + "integrity": "sha512-w3VEoLI0sGDPDpP4CFlQWUgP/D1vWIuQtHePJkTRRGifxK1hk4WxfdJQf2y8CuZRvvQZ94AqUJThFue4sUJcdw==", + "dependencies": { + "@chakra-ui/color-mode": "1.4.1", + "@chakra-ui/react-utils": "1.2.1", + "@chakra-ui/styled-system": "1.17.0", + "@chakra-ui/utils": "1.10.0", + "react-fast-compare": "3.2.0" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0", + "@emotion/styled": "^11.0.0", + "react": ">=16.8.6" + } + }, "node_modules/@chakra-ui/select": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@chakra-ui/select/-/select-1.2.4.tgz", @@ -1586,6 +1747,45 @@ "react": ">=16.8.6" } }, + "node_modules/@chakra-ui/skeleton/node_modules/@chakra-ui/color-mode": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.1.tgz", + "integrity": "sha512-aj9PqYncJ+qceaf0s12Aj81pr7uqUyU6/DLWJQI7tiCv4n7P5SO6wMIJ1794ULJFZ+Vq7Ik9eoqK7H60Qbr90w==", + "dependencies": { + "@chakra-ui/hooks": "1.8.0", + "@chakra-ui/react-env": "1.1.2", + "@chakra-ui/utils": "1.10.0" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, + "node_modules/@chakra-ui/skeleton/node_modules/@chakra-ui/styled-system": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.17.0.tgz", + "integrity": "sha512-aqR4Yv+4Io8K49UUnZAhi5r56rlFIeZbTEI70/lEJP0L10JrnAnPAO/XYRYnt5GFcKu9hYQQTEmvpa3Z+J14NQ==", + "dependencies": { + "@chakra-ui/utils": "1.10.0", + "csstype": "^3.0.9" + } + }, + "node_modules/@chakra-ui/skeleton/node_modules/@chakra-ui/system": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.1.tgz", + "integrity": "sha512-w3VEoLI0sGDPDpP4CFlQWUgP/D1vWIuQtHePJkTRRGifxK1hk4WxfdJQf2y8CuZRvvQZ94AqUJThFue4sUJcdw==", + "dependencies": { + "@chakra-ui/color-mode": "1.4.1", + "@chakra-ui/react-utils": "1.2.1", + "@chakra-ui/styled-system": "1.17.0", + "@chakra-ui/utils": "1.10.0", + "react-fast-compare": "3.2.0" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0", + "@emotion/styled": "^11.0.0", + "react": ">=16.8.6" + } + }, "node_modules/@chakra-ui/slider": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/@chakra-ui/slider/-/slider-1.5.4.tgz", @@ -1631,15 +1831,25 @@ } }, "node_modules/@chakra-ui/styled-system": { - "version": "1.17.0", - "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.17.0.tgz", - "integrity": "sha512-aqR4Yv+4Io8K49UUnZAhi5r56rlFIeZbTEI70/lEJP0L10JrnAnPAO/XYRYnt5GFcKu9hYQQTEmvpa3Z+J14NQ==", - "license": "MIT", + "version": "1.17.2", + "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.17.2.tgz", + "integrity": "sha512-isRmQZ41YULv5ANM/+JnLLpLYM7/V35hnGBZzC6y8n2duWtvG4ubrY60SBrFvphI2IKSk4kg9uM83Wf+M/eV4A==", "dependencies": { - "@chakra-ui/utils": "1.10.0", + "@chakra-ui/utils": "1.10.2", "csstype": "^3.0.9" } }, + "node_modules/@chakra-ui/styled-system/node_modules/@chakra-ui/utils": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/@chakra-ui/utils/-/utils-1.10.2.tgz", + "integrity": "sha512-V4nGBkebZpz6P7AgbZBiXi2Pn3RNSuzR1A6VsQCzAvxYU2+csqZGLqmC07pvCSACNB75sT1en+Xd3XT0QKr0sA==", + "dependencies": { + "@types/lodash.mergewith": "4.6.6", + "css-box-model": "1.2.1", + "framesync": "5.3.0", + "lodash.mergewith": "4.6.2" + } + }, "node_modules/@chakra-ui/switch": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/@chakra-ui/switch/-/switch-1.3.3.tgz", @@ -1655,15 +1865,14 @@ } }, "node_modules/@chakra-ui/system": { - "version": "1.10.1", - "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.1.tgz", - "integrity": "sha512-w3VEoLI0sGDPDpP4CFlQWUgP/D1vWIuQtHePJkTRRGifxK1hk4WxfdJQf2y8CuZRvvQZ94AqUJThFue4sUJcdw==", - "license": "MIT", - "dependencies": { - "@chakra-ui/color-mode": "1.4.1", - "@chakra-ui/react-utils": "1.2.1", - "@chakra-ui/styled-system": "1.17.0", - "@chakra-ui/utils": "1.10.0", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.12.1.tgz", + "integrity": "sha512-Rp09/rMuPA3hF38OJxeQciGO9N0Ie1GxwHRAw1AFA/TY3fVyK9pNI5oN+J/1cAxq7v9yKdIr1YfnruJTI9xfEg==", + "dependencies": { + "@chakra-ui/color-mode": "1.4.8", + "@chakra-ui/react-utils": "1.2.3", + "@chakra-ui/styled-system": "1.19.0", + "@chakra-ui/utils": "1.10.4", "react-fast-compare": "3.2.0" }, "peerDependencies": { @@ -1672,6 +1881,80 @@ "react": ">=16.8.6" } }, + "node_modules/@chakra-ui/system/node_modules/@chakra-ui/color-mode": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.8.tgz", + "integrity": "sha512-iD4126DVQi06c6ARr3uf3R2rtEu8aBVjW8rhZ+lOsV26Z15iCJA7OAut13Xu06fcZvgjSB/ChDy6Sx9sV9UjHA==", + "dependencies": { + "@chakra-ui/hooks": "1.9.1", + "@chakra-ui/react-env": "1.1.6", + "@chakra-ui/utils": "1.10.4" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, + "node_modules/@chakra-ui/system/node_modules/@chakra-ui/hooks": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/hooks/-/hooks-1.9.1.tgz", + "integrity": "sha512-SEeh1alDKzrP9gMLWMnXOUDBQDKF/URL6iTmkumTn6vhawWNla6sPrcMyoCzWdMzwUhZp3QNtCKbUm7dxBXvPw==", + "dependencies": { + "@chakra-ui/react-utils": "1.2.3", + "@chakra-ui/utils": "1.10.4", + "compute-scroll-into-view": "1.0.14", + "copy-to-clipboard": "3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, + "node_modules/@chakra-ui/system/node_modules/@chakra-ui/react-env": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-env/-/react-env-1.1.6.tgz", + "integrity": "sha512-L90LNvCfe04FTkN9OPok/o2e60zLJNBH8Im/5dUHvqy7dXLXok8ZDad5vEL46XmGbhe7O8fbxhG6FmAYdcCHrQ==", + "dependencies": { + "@chakra-ui/utils": "1.10.4" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, + "node_modules/@chakra-ui/system/node_modules/@chakra-ui/react-utils": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-utils/-/react-utils-1.2.3.tgz", + "integrity": "sha512-r8pUwCVVB7UPhb0AiRa9ZzSp4xkMz64yIeJ4O4aGy4WMw7TRH4j4QkbkE1YC9tQitrXrliOlvx4WWJR4VyiGpw==", + "dependencies": { + "@chakra-ui/utils": "^1.10.4" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, + "node_modules/@chakra-ui/system/node_modules/@chakra-ui/styled-system": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.19.0.tgz", + "integrity": "sha512-z+bMfWs6jQGkpgarge1kmk78DuDhJIXRUMyRqZ3+CiIkze88bIIsww6mV2i8tEfUfTAvALeMnlYZ1DYsHsTTJw==", + "dependencies": { + "@chakra-ui/utils": "1.10.4", + "csstype": "3.0.9" + } + }, + "node_modules/@chakra-ui/system/node_modules/@chakra-ui/utils": { + "version": "1.10.4", + "resolved": "https://registry.npmjs.org/@chakra-ui/utils/-/utils-1.10.4.tgz", + "integrity": "sha512-AM91VQQxw8F4F1WDA28mqKY6NFIOuzc2Ekkna88imy2OiqqmYH0xkq8J16L2qj4cLiLozpYqba3C79pWioy6FA==", + "dependencies": { + "@types/lodash.mergewith": "4.6.6", + "css-box-model": "1.2.1", + "framesync": "5.3.0", + "lodash.mergewith": "4.6.2" + } + }, + "node_modules/@chakra-ui/system/node_modules/csstype": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz", + "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==" + }, "node_modules/@chakra-ui/table": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@chakra-ui/table/-/table-1.3.2.tgz", @@ -2138,6 +2421,19 @@ "react-dom": "^17.0.2" } }, + "node_modules/@fidesui/react-button": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@fidesui/react-button/-/react-button-0.0.6.tgz", + "integrity": "sha512-DKONQljVdUMs34ZhIlm9/rXzCYAW6IJ+QmqC+HkZHpZ9ILbn5svu1KwSmt3DZsylSzhzc8HhQY1s5NdC0XlxKw==", + "dependencies": { + "@chakra-ui/button": "^1.5.3" + }, + "peerDependencies": { + "@chakra-ui/system": "^1.10.3", + "react": "^17.0.2", + "react-dom": "^17.0.2" + } + }, "node_modules/@fidesui/react/node_modules/@chakra-ui/accordion": { "version": "1.4.6", "resolved": "https://registry.npmjs.org/@chakra-ui/accordion/-/accordion-1.4.6.tgz", @@ -2249,19 +2545,6 @@ "react": ">=16.8.6" } }, - "node_modules/@fidesui/react/node_modules/@chakra-ui/color-mode": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.3.tgz", - "integrity": "sha512-2EFwsYZg3/wMH8DWtQic766N6gfw4Z/I8v57fmSSvkPV8k72pUdDn5ZjtnGhXU5R08aWl7w4exPo31ikLYlD6w==", - "dependencies": { - "@chakra-ui/hooks": "1.8.2", - "@chakra-ui/react-env": "1.1.4", - "@chakra-ui/utils": "1.10.2" - }, - "peerDependencies": { - "react": ">=16.8.6" - } - }, "node_modules/@fidesui/react/node_modules/@chakra-ui/control-box": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/@chakra-ui/control-box/-/control-box-1.1.4.tgz", @@ -2696,15 +2979,6 @@ "react": ">=16.8.6" } }, - "node_modules/@fidesui/react/node_modules/@chakra-ui/styled-system": { - "version": "1.17.2", - "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.17.2.tgz", - "integrity": "sha512-isRmQZ41YULv5ANM/+JnLLpLYM7/V35hnGBZzC6y8n2duWtvG4ubrY60SBrFvphI2IKSk4kg9uM83Wf+M/eV4A==", - "dependencies": { - "@chakra-ui/utils": "1.10.2", - "csstype": "^3.0.9" - } - }, "node_modules/@fidesui/react/node_modules/@chakra-ui/switch": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/@chakra-ui/switch/-/switch-1.3.5.tgz", @@ -2889,19 +3163,6 @@ "react": ">=16.8.6" } }, - "node_modules/@fidesui/react/node_modules/@fidesui/react-button": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/@fidesui/react-button/-/react-button-0.0.6.tgz", - "integrity": "sha512-DKONQljVdUMs34ZhIlm9/rXzCYAW6IJ+QmqC+HkZHpZ9ILbn5svu1KwSmt3DZsylSzhzc8HhQY1s5NdC0XlxKw==", - "dependencies": { - "@chakra-ui/button": "^1.5.3" - }, - "peerDependencies": { - "@chakra-ui/system": "^1.10.3", - "react": "^17.0.2", - "react-dom": "^17.0.2" - } - }, "node_modules/@fidesui/react/node_modules/@fidesui/react-provider": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/@fidesui/react-provider/-/react-provider-0.0.7.tgz", @@ -4128,14 +4389,12 @@ "version": "15.7.4", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz", "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==", - "devOptional": true, "license": "MIT" }, "node_modules/@types/react": { "version": "17.0.38", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz", "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==", - "devOptional": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -4156,7 +4415,6 @@ "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "devOptional": true, "license": "MIT" }, "node_modules/@types/set-cookie-parser": { @@ -12049,13 +12307,53 @@ } }, "@chakra-ui/color-mode": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.1.tgz", - "integrity": "sha512-aj9PqYncJ+qceaf0s12Aj81pr7uqUyU6/DLWJQI7tiCv4n7P5SO6wMIJ1794ULJFZ+Vq7Ik9eoqK7H60Qbr90w==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.3.tgz", + "integrity": "sha512-2EFwsYZg3/wMH8DWtQic766N6gfw4Z/I8v57fmSSvkPV8k72pUdDn5ZjtnGhXU5R08aWl7w4exPo31ikLYlD6w==", "requires": { - "@chakra-ui/hooks": "1.8.0", - "@chakra-ui/react-env": "1.1.2", - "@chakra-ui/utils": "1.10.0" + "@chakra-ui/hooks": "1.8.2", + "@chakra-ui/react-env": "1.1.4", + "@chakra-ui/utils": "1.10.2" + }, + "dependencies": { + "@chakra-ui/hooks": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/@chakra-ui/hooks/-/hooks-1.8.2.tgz", + "integrity": "sha512-rmWfXTh7Ku0sg4bPaR9E5a53N4dzcgrdMt5lDVeaxjLUm2faE0U8LcG8yJgpxNOMKDmaKat8Nrj6H5DBYhVB+A==", + "requires": { + "@chakra-ui/react-utils": "1.2.2", + "@chakra-ui/utils": "1.10.2", + "compute-scroll-into-view": "1.0.14", + "copy-to-clipboard": "3.3.1" + } + }, + "@chakra-ui/react-env": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-env/-/react-env-1.1.4.tgz", + "integrity": "sha512-T3ABET1UUP8PAdE7rF6rc2Luo0xb539taFR7kES+MPK5Bmbu/mL55cj+xEKa2LSNKuzAVnvtmgWFZoX3V+PXsQ==", + "requires": { + "@chakra-ui/utils": "1.10.2" + } + }, + "@chakra-ui/react-utils": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-utils/-/react-utils-1.2.2.tgz", + "integrity": "sha512-vdVtwEooRPVmB60+B9FEJNc+L4+DO6llA9qTk8ZFq7ocXLGagl+V5mFKJPLMzmTCafq6j5pNjoAF4A7bbh4U4Q==", + "requires": { + "@chakra-ui/utils": "^1.10.2" + } + }, + "@chakra-ui/utils": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/@chakra-ui/utils/-/utils-1.10.2.tgz", + "integrity": "sha512-V4nGBkebZpz6P7AgbZBiXi2Pn3RNSuzR1A6VsQCzAvxYU2+csqZGLqmC07pvCSACNB75sT1en+Xd3XT0QKr0sA==", + "requires": { + "@types/lodash.mergewith": "4.6.6", + "css-box-model": "1.2.1", + "framesync": "5.3.0", + "lodash.mergewith": "4.6.2" + } + } } }, "@chakra-ui/control-box": { @@ -12138,6 +12436,36 @@ "@chakra-ui/utils": "1.10.0" } }, + "@chakra-ui/icons": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-1.1.7.tgz", + "integrity": "sha512-YIHxey/B4M2PyFASlHXtAWFyW+tsAtGAChOJ8dsM2kpu1MbVUqm/6nMI1KIFd7Te5IWuNYA75rAHBdLI0Yu61A==", + "requires": { + "@chakra-ui/icon": "2.0.5", + "@types/react": "^17.0.15" + }, + "dependencies": { + "@chakra-ui/icon": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@chakra-ui/icon/-/icon-2.0.5.tgz", + "integrity": "sha512-ZrqRvCCIxGr4qFd/r1pmtd9tobRmv8KAxV7ygFoc/t4vOSKTcVIjhE12gsI3FzgvXM15ZFVwsxa1zodwgo5neQ==", + "requires": { + "@chakra-ui/utils": "1.10.4" + } + }, + "@chakra-ui/utils": { + "version": "1.10.4", + "resolved": "https://registry.npmjs.org/@chakra-ui/utils/-/utils-1.10.4.tgz", + "integrity": "sha512-AM91VQQxw8F4F1WDA28mqKY6NFIOuzc2Ekkna88imy2OiqqmYH0xkq8J16L2qj4cLiLozpYqba3C79pWioy6FA==", + "requires": { + "@types/lodash.mergewith": "4.6.6", + "css-box-model": "1.2.1", + "framesync": "5.3.0", + "lodash.mergewith": "4.6.2" + } + } + } + }, "@chakra-ui/image": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-1.1.3.tgz", @@ -12289,6 +12617,39 @@ "@chakra-ui/react-env": "1.1.2", "@chakra-ui/system": "1.10.1", "@chakra-ui/utils": "1.10.0" + }, + "dependencies": { + "@chakra-ui/color-mode": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.1.tgz", + "integrity": "sha512-aj9PqYncJ+qceaf0s12Aj81pr7uqUyU6/DLWJQI7tiCv4n7P5SO6wMIJ1794ULJFZ+Vq7Ik9eoqK7H60Qbr90w==", + "requires": { + "@chakra-ui/hooks": "1.8.0", + "@chakra-ui/react-env": "1.1.2", + "@chakra-ui/utils": "1.10.0" + } + }, + "@chakra-ui/styled-system": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.17.0.tgz", + "integrity": "sha512-aqR4Yv+4Io8K49UUnZAhi5r56rlFIeZbTEI70/lEJP0L10JrnAnPAO/XYRYnt5GFcKu9hYQQTEmvpa3Z+J14NQ==", + "requires": { + "@chakra-ui/utils": "1.10.0", + "csstype": "^3.0.9" + } + }, + "@chakra-ui/system": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.1.tgz", + "integrity": "sha512-w3VEoLI0sGDPDpP4CFlQWUgP/D1vWIuQtHePJkTRRGifxK1hk4WxfdJQf2y8CuZRvvQZ94AqUJThFue4sUJcdw==", + "requires": { + "@chakra-ui/color-mode": "1.4.1", + "@chakra-ui/react-utils": "1.2.1", + "@chakra-ui/styled-system": "1.17.0", + "@chakra-ui/utils": "1.10.0", + "react-fast-compare": "3.2.0" + } + } } }, "@chakra-ui/radio": { @@ -12355,6 +12716,39 @@ "@chakra-ui/transition": "1.4.3", "@chakra-ui/utils": "1.10.0", "@chakra-ui/visually-hidden": "1.1.2" + }, + "dependencies": { + "@chakra-ui/color-mode": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.1.tgz", + "integrity": "sha512-aj9PqYncJ+qceaf0s12Aj81pr7uqUyU6/DLWJQI7tiCv4n7P5SO6wMIJ1794ULJFZ+Vq7Ik9eoqK7H60Qbr90w==", + "requires": { + "@chakra-ui/hooks": "1.8.0", + "@chakra-ui/react-env": "1.1.2", + "@chakra-ui/utils": "1.10.0" + } + }, + "@chakra-ui/styled-system": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.17.0.tgz", + "integrity": "sha512-aqR4Yv+4Io8K49UUnZAhi5r56rlFIeZbTEI70/lEJP0L10JrnAnPAO/XYRYnt5GFcKu9hYQQTEmvpa3Z+J14NQ==", + "requires": { + "@chakra-ui/utils": "1.10.0", + "csstype": "^3.0.9" + } + }, + "@chakra-ui/system": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.1.tgz", + "integrity": "sha512-w3VEoLI0sGDPDpP4CFlQWUgP/D1vWIuQtHePJkTRRGifxK1hk4WxfdJQf2y8CuZRvvQZ94AqUJThFue4sUJcdw==", + "requires": { + "@chakra-ui/color-mode": "1.4.1", + "@chakra-ui/react-utils": "1.2.1", + "@chakra-ui/styled-system": "1.17.0", + "@chakra-ui/utils": "1.10.0", + "react-fast-compare": "3.2.0" + } + } } }, "@chakra-ui/react-env": { @@ -12391,6 +12785,39 @@ "@chakra-ui/media-query": "1.2.4", "@chakra-ui/system": "1.10.1", "@chakra-ui/utils": "1.10.0" + }, + "dependencies": { + "@chakra-ui/color-mode": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.1.tgz", + "integrity": "sha512-aj9PqYncJ+qceaf0s12Aj81pr7uqUyU6/DLWJQI7tiCv4n7P5SO6wMIJ1794ULJFZ+Vq7Ik9eoqK7H60Qbr90w==", + "requires": { + "@chakra-ui/hooks": "1.8.0", + "@chakra-ui/react-env": "1.1.2", + "@chakra-ui/utils": "1.10.0" + } + }, + "@chakra-ui/styled-system": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.17.0.tgz", + "integrity": "sha512-aqR4Yv+4Io8K49UUnZAhi5r56rlFIeZbTEI70/lEJP0L10JrnAnPAO/XYRYnt5GFcKu9hYQQTEmvpa3Z+J14NQ==", + "requires": { + "@chakra-ui/utils": "1.10.0", + "csstype": "^3.0.9" + } + }, + "@chakra-ui/system": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.1.tgz", + "integrity": "sha512-w3VEoLI0sGDPDpP4CFlQWUgP/D1vWIuQtHePJkTRRGifxK1hk4WxfdJQf2y8CuZRvvQZ94AqUJThFue4sUJcdw==", + "requires": { + "@chakra-ui/color-mode": "1.4.1", + "@chakra-ui/react-utils": "1.2.1", + "@chakra-ui/styled-system": "1.17.0", + "@chakra-ui/utils": "1.10.0", + "react-fast-compare": "3.2.0" + } + } } }, "@chakra-ui/slider": { @@ -12423,12 +12850,25 @@ } }, "@chakra-ui/styled-system": { - "version": "1.17.0", - "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.17.0.tgz", - "integrity": "sha512-aqR4Yv+4Io8K49UUnZAhi5r56rlFIeZbTEI70/lEJP0L10JrnAnPAO/XYRYnt5GFcKu9hYQQTEmvpa3Z+J14NQ==", + "version": "1.17.2", + "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.17.2.tgz", + "integrity": "sha512-isRmQZ41YULv5ANM/+JnLLpLYM7/V35hnGBZzC6y8n2duWtvG4ubrY60SBrFvphI2IKSk4kg9uM83Wf+M/eV4A==", "requires": { - "@chakra-ui/utils": "1.10.0", + "@chakra-ui/utils": "1.10.2", "csstype": "^3.0.9" + }, + "dependencies": { + "@chakra-ui/utils": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/@chakra-ui/utils/-/utils-1.10.2.tgz", + "integrity": "sha512-V4nGBkebZpz6P7AgbZBiXi2Pn3RNSuzR1A6VsQCzAvxYU2+csqZGLqmC07pvCSACNB75sT1en+Xd3XT0QKr0sA==", + "requires": { + "@types/lodash.mergewith": "4.6.6", + "css-box-model": "1.2.1", + "framesync": "5.3.0", + "lodash.mergewith": "4.6.2" + } + } } }, "@chakra-ui/switch": { @@ -12441,15 +12881,79 @@ } }, "@chakra-ui/system": { - "version": "1.10.1", - "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.10.1.tgz", - "integrity": "sha512-w3VEoLI0sGDPDpP4CFlQWUgP/D1vWIuQtHePJkTRRGifxK1hk4WxfdJQf2y8CuZRvvQZ94AqUJThFue4sUJcdw==", - "requires": { - "@chakra-ui/color-mode": "1.4.1", - "@chakra-ui/react-utils": "1.2.1", - "@chakra-ui/styled-system": "1.17.0", - "@chakra-ui/utils": "1.10.0", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.12.1.tgz", + "integrity": "sha512-Rp09/rMuPA3hF38OJxeQciGO9N0Ie1GxwHRAw1AFA/TY3fVyK9pNI5oN+J/1cAxq7v9yKdIr1YfnruJTI9xfEg==", + "requires": { + "@chakra-ui/color-mode": "1.4.8", + "@chakra-ui/react-utils": "1.2.3", + "@chakra-ui/styled-system": "1.19.0", + "@chakra-ui/utils": "1.10.4", "react-fast-compare": "3.2.0" + }, + "dependencies": { + "@chakra-ui/color-mode": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.8.tgz", + "integrity": "sha512-iD4126DVQi06c6ARr3uf3R2rtEu8aBVjW8rhZ+lOsV26Z15iCJA7OAut13Xu06fcZvgjSB/ChDy6Sx9sV9UjHA==", + "requires": { + "@chakra-ui/hooks": "1.9.1", + "@chakra-ui/react-env": "1.1.6", + "@chakra-ui/utils": "1.10.4" + } + }, + "@chakra-ui/hooks": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/hooks/-/hooks-1.9.1.tgz", + "integrity": "sha512-SEeh1alDKzrP9gMLWMnXOUDBQDKF/URL6iTmkumTn6vhawWNla6sPrcMyoCzWdMzwUhZp3QNtCKbUm7dxBXvPw==", + "requires": { + "@chakra-ui/react-utils": "1.2.3", + "@chakra-ui/utils": "1.10.4", + "compute-scroll-into-view": "1.0.14", + "copy-to-clipboard": "3.3.1" + } + }, + "@chakra-ui/react-env": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-env/-/react-env-1.1.6.tgz", + "integrity": "sha512-L90LNvCfe04FTkN9OPok/o2e60zLJNBH8Im/5dUHvqy7dXLXok8ZDad5vEL46XmGbhe7O8fbxhG6FmAYdcCHrQ==", + "requires": { + "@chakra-ui/utils": "1.10.4" + } + }, + "@chakra-ui/react-utils": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@chakra-ui/react-utils/-/react-utils-1.2.3.tgz", + "integrity": "sha512-r8pUwCVVB7UPhb0AiRa9ZzSp4xkMz64yIeJ4O4aGy4WMw7TRH4j4QkbkE1YC9tQitrXrliOlvx4WWJR4VyiGpw==", + "requires": { + "@chakra-ui/utils": "^1.10.4" + } + }, + "@chakra-ui/styled-system": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.19.0.tgz", + "integrity": "sha512-z+bMfWs6jQGkpgarge1kmk78DuDhJIXRUMyRqZ3+CiIkze88bIIsww6mV2i8tEfUfTAvALeMnlYZ1DYsHsTTJw==", + "requires": { + "@chakra-ui/utils": "1.10.4", + "csstype": "3.0.9" + } + }, + "@chakra-ui/utils": { + "version": "1.10.4", + "resolved": "https://registry.npmjs.org/@chakra-ui/utils/-/utils-1.10.4.tgz", + "integrity": "sha512-AM91VQQxw8F4F1WDA28mqKY6NFIOuzc2Ekkna88imy2OiqqmYH0xkq8J16L2qj4cLiLozpYqba3C79pWioy6FA==", + "requires": { + "@types/lodash.mergewith": "4.6.6", + "css-box-model": "1.2.1", + "framesync": "5.3.0", + "lodash.mergewith": "4.6.2" + } + }, + "csstype": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz", + "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==" + } } }, "@chakra-ui/table": { @@ -12881,16 +13385,6 @@ "@chakra-ui/utils": "1.10.2" } }, - "@chakra-ui/color-mode": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.4.3.tgz", - "integrity": "sha512-2EFwsYZg3/wMH8DWtQic766N6gfw4Z/I8v57fmSSvkPV8k72pUdDn5ZjtnGhXU5R08aWl7w4exPo31ikLYlD6w==", - "requires": { - "@chakra-ui/hooks": "1.8.2", - "@chakra-ui/react-env": "1.1.4", - "@chakra-ui/utils": "1.10.2" - } - }, "@chakra-ui/control-box": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/@chakra-ui/control-box/-/control-box-1.1.4.tgz", @@ -13201,15 +13695,6 @@ "@chakra-ui/visually-hidden": "1.1.4" } }, - "@chakra-ui/styled-system": { - "version": "1.17.2", - "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.17.2.tgz", - "integrity": "sha512-isRmQZ41YULv5ANM/+JnLLpLYM7/V35hnGBZzC6y8n2duWtvG4ubrY60SBrFvphI2IKSk4kg9uM83Wf+M/eV4A==", - "requires": { - "@chakra-ui/utils": "1.10.2", - "csstype": "^3.0.9" - } - }, "@chakra-ui/switch": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/@chakra-ui/switch/-/switch-1.3.5.tgz", @@ -13342,14 +13827,6 @@ "@chakra-ui/utils": "1.10.2" } }, - "@fidesui/react-button": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/@fidesui/react-button/-/react-button-0.0.6.tgz", - "integrity": "sha512-DKONQljVdUMs34ZhIlm9/rXzCYAW6IJ+QmqC+HkZHpZ9ILbn5svu1KwSmt3DZsylSzhzc8HhQY1s5NdC0XlxKw==", - "requires": { - "@chakra-ui/button": "^1.5.3" - } - }, "@fidesui/react-provider": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/@fidesui/react-provider/-/react-provider-0.0.7.tgz", @@ -13370,6 +13847,14 @@ } } }, + "@fidesui/react-button": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@fidesui/react-button/-/react-button-0.0.6.tgz", + "integrity": "sha512-DKONQljVdUMs34ZhIlm9/rXzCYAW6IJ+QmqC+HkZHpZ9ILbn5svu1KwSmt3DZsylSzhzc8HhQY1s5NdC0XlxKw==", + "requires": { + "@chakra-ui/button": "^1.5.3" + } + }, "@fontsource/inter": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.4.tgz", @@ -14264,14 +14749,12 @@ "@types/prop-types": { "version": "15.7.4", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz", - "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==", - "devOptional": true + "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==" }, "@types/react": { "version": "17.0.38", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz", "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==", - "devOptional": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -14290,8 +14773,7 @@ "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "devOptional": true + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, "@types/set-cookie-parser": { "version": "2.4.2", diff --git a/clients/ops/privacy-center/package.json b/clients/ops/privacy-center/package.json index 896241af8..6474ab852 100644 --- a/clients/ops/privacy-center/package.json +++ b/clients/ops/privacy-center/package.json @@ -17,8 +17,9 @@ "build-privacy-portal": "npm run build" }, "dependencies": { + "@chakra-ui/icons": "^1.1.7", "@chakra-ui/react": "^1.7.4", - "@chakra-ui/system": ">=1.0.0", + "@chakra-ui/system": "^1.12.1", "@emotion/react": "^11", "@emotion/styled": "^11", "@fidesui/react": "^0.0.9", diff --git a/clients/ops/privacy-center/pages/index.tsx b/clients/ops/privacy-center/pages/index.tsx index 121405e68..516dbba6e 100644 --- a/clients/ops/privacy-center/pages/index.tsx +++ b/clients/ops/privacy-center/pages/index.tsx @@ -14,9 +14,9 @@ import { } from "@fidesui/react"; import { - useRequestModal, - RequestModal, -} from "../components/modals/RequestModal"; + usePrivactRequestModal, + PrivacyRequestModal, +} from "../components/modals/privacy-request-modal/PrivacyRequestModal"; import PrivacyCard from "../components/PrivacyCard"; import type { AlertState } from "../types/AlertState"; @@ -36,7 +36,8 @@ const Home: NextPage = () => { setCurrentView, privacyRequestId, setPrivacyRequestId, - } = useRequestModal(); + successHandler, + } = usePrivactRequestModal(); useEffect(() => { if (alert?.status) { @@ -59,6 +60,21 @@ const Home: NextPage = () => { getConfig(); }, [setIsVerificationRequired]); + const content: any = []; + + config.actions.forEach((action) => { + content.push( + + ); + }); + return (
@@ -124,19 +140,10 @@ const Home: NextPage = () => { - {config.actions.map((action) => ( - - ))} + {content} - { privacyRequestId={privacyRequestId} setPrivacyRequestId={setPrivacyRequestId} isVerificationRequired={isVerificationRequired} + successHandler={successHandler} />