fix(console): add missing loading state for confirm modals (#3610)

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
     <ConfirmModal
       isOpen={isOpen}
       confirmButtonText="general.delete"
+      isLoading={isLoading}
       onCancel={onCancel}
       onConfirm={onConfirm}
     >

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<ConnectorResponse>();
+    try {
+      await api.delete(`api/connectors/${connectorId}`).json<ConnectorResponse>();
 
-    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);
             }}

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<ConnectorResponse>();
-      })
-    );
+    try {
+      await Promise.all(
+        connectors.map(async (connector) => {
+          await api.delete(`api/connectors/${connector.id}`).json<ConnectorResponse>();
+        })
+      );
 
-    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);
         }}

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}
       >

packages/console/src/pages/SignInExperience/index.tsx

@@ -65,6 +65,7 @@ function SignInExperience() {
   const { data, error, mutate } = useSWR<SignInExperienceType, RequestError>('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<SignInExperienceType>();
-    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<SignInExperienceType>();
+      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() {
           </div>
           <SubmitFormChangesActionBar
             isOpen={isDirty}
-            isSubmitting={isSubmitting}
+            isSubmitting={isSaving}
             onDiscard={reset}
             onSubmit={onSubmit}
           />
@@ -226,6 +233,7 @@ function SignInExperience() {
       {data && (
         <ConfirmModal
           isOpen={Boolean(dataToCompare)}
+          isLoading={isSaving}
           onCancel={() => {
             setDataToCompare(undefined);
           }}

packages/console/src/pages/UserDetails/UserSettings/components/UserSocialIdentities/index.tsx

@@ -136,6 +136,7 @@ function UserSocialIdentities({ userId, identities, onDelete }: Props) {
       )}
       <DeleteConfirmModal
         isOpen={deletingConnector !== undefined}
+        isLoading={isSubmitting}
         onCancel={() => {
           setDeletingConnector(undefined);
         }}