diff --git a/packages/console/src/pages/ConnectorDetails/components/DeleteConnectorConfirmModal/index.tsx b/packages/console/src/pages/ConnectorDetails/components/DeleteConnectorConfirmModal/index.tsx index d85006a4c..3d0f69698 100644 --- a/packages/console/src/pages/ConnectorDetails/components/DeleteConnectorConfirmModal/index.tsx +++ b/packages/console/src/pages/ConnectorDetails/components/DeleteConnectorConfirmModal/index.tsx @@ -9,11 +9,19 @@ type Props = { data: ConnectorResponse; isOpen: boolean; isInUse: boolean; + isLoading: boolean; onCancel: () => void; onConfirm: () => void; }; -function DeleteConnectorConfirmModal({ data, isOpen, isInUse, onCancel, onConfirm }: Props) { +function DeleteConnectorConfirmModal({ + data, + isOpen, + isInUse, + isLoading, + onCancel, + onConfirm, +}: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const isSocial = data.type === ConnectorType.Social; @@ -21,6 +29,7 @@ function DeleteConnectorConfirmModal({ data, isOpen, isInUse, onCancel, onConfir diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx index 7584fe4e2..5022f20b1 100644 --- a/packages/console/src/pages/ConnectorDetails/index.tsx +++ b/packages/console/src/pages/ConnectorDetails/index.tsx @@ -68,36 +68,32 @@ function ConnectorDetails() { const navigate = useNavigate(); const isSocial = data?.type === ConnectorType.Social; const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false); + const [isDeleting, setIsDeleting] = useState(false); useEffect(() => { setIsDeleteAlertOpen(false); }, [pathname]); - const onDeleteClick = async () => { - if (!inUse) { - await handleDelete(); - - return; - } - - setIsDeleteAlertOpen(true); - }; - const handleDelete = async () => { - if (!connectorId) { + if (!connectorId || isDeleting) { return; } + setIsDeleting(true); - await api.delete(`api/connectors/${connectorId}`).json(); + try { + await api.delete(`api/connectors/${connectorId}`).json(); - setIsDeleted(true); + setIsDeleted(true); - toast.success(t('connector_details.connector_deleted')); - await mutateGlobal('api/connectors'); + toast.success(t('connector_details.connector_deleted')); + await mutateGlobal('api/connectors'); - navigate(getConnectorsPathname(isSocial), { - replace: true, - }); + navigate(getConnectorsPathname(isSocial), { + replace: true, + }); + } finally { + setIsDeleting(false); + } }; if (!connectorId) { @@ -225,6 +221,7 @@ function ConnectorDetails() { data={data} isInUse={inUse} isOpen={isDeleteAlertOpen} + isLoading={isDeleting} onCancel={() => { setIsDeleteAlertOpen(false); }} diff --git a/packages/console/src/pages/Connectors/components/ConnectorDeleteButton/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorDeleteButton/index.tsx index 0babf766f..090c8294d 100644 --- a/packages/console/src/pages/Connectors/components/ConnectorDeleteButton/index.tsx +++ b/packages/console/src/pages/Connectors/components/ConnectorDeleteButton/index.tsx @@ -26,24 +26,30 @@ function ConnectorDeleteButton({ connectorGroup }: Props) { const inUse = isConnectorInUse(firstConnector); const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false); + const [isDeleting, setIsDeleting] = useState(false); const api = useApi(); const handleDelete = async () => { - if (!firstConnector) { + if (!firstConnector || isDeleting) { return; } + setIsDeleting(true); const { connectors } = connectorGroup; - await Promise.all( - connectors.map(async (connector) => { - await api.delete(`api/connectors/${connector.id}`).json(); - }) - ); + try { + await Promise.all( + connectors.map(async (connector) => { + await api.delete(`api/connectors/${connector.id}`).json(); + }) + ); - toast.success(t('connector_details.connector_deleted')); - await mutateGlobal('api/connectors'); + toast.success(t('connector_details.connector_deleted')); + await mutateGlobal('api/connectors'); + } finally { + setIsDeleting(false); + } }; if (!firstConnector) { @@ -65,6 +71,7 @@ function ConnectorDeleteButton({ connectorGroup }: Props) { data={firstConnector} isInUse={inUse} isOpen={isDeleteAlertOpen} + isLoading={isDeleting} onCancel={() => { setIsDeleteAlertOpen(false); }} diff --git a/packages/console/src/pages/GetStarted/index.tsx b/packages/console/src/pages/GetStarted/index.tsx index 7dcb4371f..471fc85a3 100644 --- a/packages/console/src/pages/GetStarted/index.tsx +++ b/packages/console/src/pages/GetStarted/index.tsx @@ -20,11 +20,21 @@ function GetStarted() { const { data, isLoading } = useGetStartedMetadata(); const { update } = useUserPreferences(); const [showConfirmModal, setShowConfirmModal] = useState(false); + const [isUpdating, setIsUpdating] = useState(false); - const hideGetStarted = () => { - void update({ getStartedHidden: true }); - // Navigate to next menu item - navigate('/dashboard'); + const hideGetStarted = async () => { + if (isUpdating) { + return; + } + setIsUpdating(true); + + try { + await update({ getStartedHidden: true }); + // Navigate to next menu item + navigate('/dashboard'); + } finally { + setIsUpdating(false); + } }; const showConfirmModalHandler = () => { @@ -77,6 +87,7 @@ function GetStarted() { isOpen={showConfirmModal} confirmButtonType="primary" confirmButtonText="get_started.hide_this" + isLoading={isUpdating} onConfirm={hideGetStarted} onCancel={hideConfirmModalHandler} > diff --git a/packages/console/src/pages/SignInExperience/index.tsx b/packages/console/src/pages/SignInExperience/index.tsx index 1b4ba12fe..6413be43d 100644 --- a/packages/console/src/pages/SignInExperience/index.tsx +++ b/packages/console/src/pages/SignInExperience/index.tsx @@ -65,6 +65,7 @@ function SignInExperience() { const { data, error, mutate } = useSWR('api/sign-in-exp'); const isLoadingSignInExperience = !data && !error; const { isLoading: isUserAssetsServiceLoading } = useUserAssetsService(); + const [isSaving, setIsSaving] = useState(false); const { configs, @@ -93,7 +94,7 @@ function SignInExperience() { handleSubmit, getValues, watch, - formState: { isSubmitting, isDirty, errors }, + formState: { isDirty, errors }, } = methods; const api = useApi(); const formData = watch(); @@ -115,19 +116,25 @@ function SignInExperience() { }, [reset, defaultFormData]); const saveData = async () => { - const updatedData = await api - .patch('api/sign-in-exp', { - json: signInExperienceParser.toRemoteModel(getValues()), - }) - .json(); - void mutate(updatedData); - setDataToCompare(undefined); - await updateConfigs({ signInExperienceCustomized: true }); - toast.success(t('general.saved')); + setIsSaving(true); + + try { + const updatedData = await api + .patch('api/sign-in-exp', { + json: signInExperienceParser.toRemoteModel(getValues()), + }) + .json(); + void mutate(updatedData); + setDataToCompare(undefined); + await updateConfigs({ signInExperienceCustomized: true }); + toast.success(t('general.saved')); + } finally { + setIsSaving(false); + } }; const onSubmit = handleSubmit(async (formData: SignInExperienceForm) => { - if (!data || isSubmitting) { + if (!data || isSaving) { return; } @@ -217,7 +224,7 @@ function SignInExperience() { @@ -226,6 +233,7 @@ function SignInExperience() { {data && ( { setDataToCompare(undefined); }} diff --git a/packages/console/src/pages/UserDetails/UserSettings/components/UserSocialIdentities/index.tsx b/packages/console/src/pages/UserDetails/UserSettings/components/UserSocialIdentities/index.tsx index 50052d91c..6848a53f9 100644 --- a/packages/console/src/pages/UserDetails/UserSettings/components/UserSocialIdentities/index.tsx +++ b/packages/console/src/pages/UserDetails/UserSettings/components/UserSocialIdentities/index.tsx @@ -136,6 +136,7 @@ function UserSocialIdentities({ userId, identities, onDelete }: Props) { )} { setDeletingConnector(undefined); }}