From ab6137c7cbdc15b5cbf544420f13f429e8b71eaa Mon Sep 17 00:00:00 2001 From: Sebastian Sangervasi Date: Thu, 26 Jan 2023 16:16:00 -0800 Subject: [PATCH 1/2] pc/modals: Disable submit buttons on when Formik isSubmitting --- .../components/modals/VerificationForm.tsx | 11 +++++------ .../consent-request-modal/ConsentRequestForm.tsx | 11 +++++------ .../privacy-request-modal/PrivacyRequestForm.tsx | 11 +++++------ 3 files changed, 15 insertions(+), 18 deletions(-) diff --git a/clients/privacy-center/components/modals/VerificationForm.tsx b/clients/privacy-center/components/modals/VerificationForm.tsx index bde38566ff..c3d2387d7c 100644 --- a/clients/privacy-center/components/modals/VerificationForm.tsx +++ b/clients/privacy-center/components/modals/VerificationForm.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect } from "react"; import { Button, chakra, @@ -40,7 +40,6 @@ const useVerificationForm = ({ verificationType: VerificationType; successHandler: () => void; }) => { - const [isLoading, setIsLoading] = useState(false); const toast = useToast(); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [verificationCode, setVerificationCode] = useLocalStorage( @@ -56,8 +55,6 @@ const useVerificationForm = ({ code: "", }, onSubmit: async (values) => { - setIsLoading(true); - const body = { code: values.code, }; @@ -123,7 +120,7 @@ const useVerificationForm = ({ }, }); - return { ...formik, isLoading, resetVerificationProcess }; + return { ...formik, resetVerificationProcess }; }; type VerificationFormProps = { @@ -153,6 +150,7 @@ const VerificationForm: React.FC = ({ touched, values, isValid, + isSubmitting, dirty, resetForm, resetVerificationProcess, @@ -209,7 +207,8 @@ const VerificationForm: React.FC = ({ _hover={{ bg: "primary.400" }} _active={{ bg: "primary.500" }} colorScheme="primary" - disabled={!(isValid && dirty)} + isLoading={isSubmitting} + isDisabled={isSubmitting || !(isValid && dirty)} size="sm" > Submit code diff --git a/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx b/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx index 241f3d2167..a8919bedf1 100644 --- a/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx +++ b/clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import { Button, chakra, @@ -42,7 +42,6 @@ const useConsentRequestForm = ({ }) => { const identityInputs = config.consent?.identity_inputs ?? defaultIdentityInput; - const [isLoading, setIsLoading] = useState(false); const toast = useToast(); const formik = useFormik({ initialValues: { @@ -50,8 +49,6 @@ const useConsentRequestForm = ({ phone: "", }, onSubmit: async (values) => { - setIsLoading(true); - const body = { email: values.email, phone_number: values.phone, @@ -116,7 +113,7 @@ const useConsentRequestForm = ({ }), }); - return { ...formik, isLoading, identityInputs }; + return { ...formik, identityInputs }; }; type ConsentRequestFormProps = { @@ -144,6 +141,7 @@ const ConsentRequestForm: React.FC = ({ touched, values, isValid, + isSubmitting, dirty, setFieldValue, resetForm, @@ -225,7 +223,8 @@ const ConsentRequestForm: React.FC = ({ _hover={{ bg: "primary.400" }} _active={{ bg: "primary.500" }} colorScheme="primary" - disabled={!(isValid && dirty)} + isLoading={isSubmitting} + isDisabled={isSubmitting || !(isValid && dirty)} size="sm" > Continue diff --git a/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx b/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx index 573147dfd3..d3600914e1 100644 --- a/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx +++ b/clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx @@ -11,7 +11,7 @@ import { Text, useToast, } from "@fidesui/react"; -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import { useFormik } from "formik"; import * as Yup from "yup"; import { Headers } from "headers-polyfill"; @@ -44,7 +44,6 @@ const usePrivacyRequestForm = ({ isVerificationRequired: boolean; }) => { const identityInputs = action?.identity_inputs ?? defaultIdentityInput; - const [isLoading, setIsLoading] = useState(false); const toast = useToast(); const formik = useFormik({ initialValues: { @@ -58,8 +57,6 @@ const usePrivacyRequestForm = ({ return; } - setIsLoading(true); - const body = [ { identity: { @@ -143,7 +140,7 @@ const usePrivacyRequestForm = ({ }), }); - return { ...formik, isLoading, identityInputs }; + return { ...formik, identityInputs }; }; type PrivacyRequestFormProps = { @@ -176,6 +173,7 @@ const PrivacyRequestForm: React.FC = ({ touched, values, isValid, + isSubmitting, dirty, resetForm, identityInputs, @@ -276,7 +274,8 @@ const PrivacyRequestForm: React.FC = ({ _hover={{ bg: "primary.400" }} _active={{ bg: "primary.500" }} colorScheme="primary" - disabled={!(isValid && dirty)} + isLoading={isSubmitting} + isDisabled={isSubmitting || !(isValid && dirty)} size="sm" > Continue From 29de6edc5c6a2588f7e12f61f4428172afa30af6 Mon Sep 17 00:00:00 2001 From: Sebastian Sangervasi Date: Thu, 26 Jan 2023 16:38:53 -0800 Subject: [PATCH 2/2] Update changelog --- CHANGELOG.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7863bb3f88..e8b1538608 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -41,7 +41,11 @@ 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) +* Privacy Center + * Identity inputs validate even when they are optional. [#2308](https://github.com/ethyca/fides/pull/2308) + * Submit buttons show loading state and disable while submitting. [#2401](https://github.com/ethyca/fides/pull/2401) + * Phone inputs no longer request country SVGs from external domain. [#2378](https://github.com/ethyca/fides/pull/2378) + * Input validation errors no longer change the height of modals. [#2379](https://github.com/ethyca/fides/pull/2379) * Patch masking strategies to better handle null and non-string inputs [#2307](https://github.com/ethyca/fides/pull/2377) ### Security