fix: loading

web/app/components/base/form/hooks/use-check-validated.ts

@@ -7,7 +7,6 @@ export const useCheckValidated = (form: AnyFormApi) => {
 
   const checkValidated = useCallback(() => {
     const allError = form?.getAllErrors()
-    console.log('allError', allError)
 
     if (allError) {
       const fields = allError.fields

web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx

@@ -51,7 +51,7 @@ const AddOAuthButton = ({
   const renderI18nObject = useRenderI18nObject()
   const [isOAuthSettingsOpen, setIsOAuthSettingsOpen] = useState(false)
   const { mutateAsync: getPluginOAuthUrl } = useGetPluginOAuthUrlHook(pluginPayload)
-  const { data } = useGetPluginOAuthClientSchemaHook(pluginPayload)
+  const { data, isLoading } = useGetPluginOAuthClientSchemaHook(pluginPayload)
   const {
     schema = [],
     is_oauth_custom_client_enabled,
@@ -214,7 +214,7 @@ const AddOAuthButton = ({
           <OAuthClientSettings
             pluginPayload={pluginPayload}
             onClose={() => setIsOAuthSettingsOpen(false)}
-            disabled={disabled}
+            disabled={disabled || isLoading}
             schemas={memorizedSchemas}
             onAuth={handleOAuth}
             editValues={client_params}

web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx

@@ -3,6 +3,7 @@ import {
   useCallback,
   useMemo,
   useRef,
+  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiExternalLinkLine } from '@remixicon/react'
@@ -39,6 +40,12 @@ const ApiKeyModal = ({
 }: ApiKeyModalProps) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
+  const [doingAction, setDoingAction] = useState(false)
+  const doingActionRef = useRef(doingAction)
+  const handleSetDoingAction = useCallback((value: boolean) => {
+    doingActionRef.current = value
+    setDoingAction(value)
+  }, [])
   const { data = [], isLoading } = useGetPluginCredentialSchemaHook(pluginPayload, CredentialTypeEnum.API_KEY)
   const formSchemas = useMemo(() => {
     return [
@@ -63,6 +70,8 @@ const ApiKeyModal = ({
   const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
   const formRef = useRef<FormRefObject>(null)
   const handleConfirm = useCallback(async () => {
+    if (doingActionRef.current)
+      return
     const {
       isCheckValidated,
       values,
@@ -73,34 +82,40 @@ const ApiKeyModal = ({
     if (!isCheckValidated)
       return
 
-    const {
+    try {
-      __name__,
+      const {
-      __credential_id__,
+        __name__,
-      ...restValues
+        __credential_id__,
-    } = values
+        ...restValues
+      } = values
 
-    if (editValues) {
+      handleSetDoingAction(true)
-      await updatePluginCredential({
+      if (editValues) {
-        credentials: restValues,
+        await updatePluginCredential({
-        credential_id: __credential_id__,
+          credentials: restValues,
-        name: __name__ || '',
+          credential_id: __credential_id__,
+          name: __name__ || '',
+        })
+      }
+      else {
+        await addPluginCredential({
+          credentials: restValues,
+          type: CredentialTypeEnum.API_KEY,
+          name: __name__ || '',
+        })
+      }
+      notify({
+        type: 'success',
+        message: t('common.api.actionSuccess'),
       })
+
+      onClose?.()
+      invalidatePluginCredentialInfo()
     }
-    else {
+    finally {
-      await addPluginCredential({
+      handleSetDoingAction(false)
-        credentials: restValues,
-        type: CredentialTypeEnum.API_KEY,
-        name: __name__ || '',
-      })
     }
-    notify({
+  }, [addPluginCredential, onClose, invalidatePluginCredentialInfo, updatePluginCredential, notify, t, editValues, handleSetDoingAction])
-      type: 'success',
-      message: t('common.api.actionSuccess'),
-    })
-
-    onClose?.()
-    invalidatePluginCredentialInfo()
-  }, [addPluginCredential, onClose, invalidatePluginCredentialInfo, updatePluginCredential, notify, t, editValues])
 
   return (
     <Modal
@@ -138,7 +153,7 @@ const ApiKeyModal = ({
       onConfirm={handleConfirm}
       showExtraButton={!!editValues}
       onExtraButtonClick={onRemove}
-      disabled={disabled}
+      disabled={disabled || isLoading || doingAction}
     >
       {
         isLoading && (

web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx

@@ -2,6 +2,7 @@ import {
   memo,
   useCallback,
   useRef,
+  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal/modal'
@@ -35,6 +36,12 @@ const OAuthClientSettings = ({
 }: OAuthClientSettingsProps) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
+  const [doingAction, setDoingAction] = useState(false)
+  const doingActionRef = useRef(doingAction)
+  const handleSetDoingAction = useCallback((value: boolean) => {
+    doingActionRef.current = value
+    setDoingAction(value)
+  }, [])
   const defaultValues = schemas.reduce((acc, schema) => {
     if (schema.default)
       acc[schema.name] = schema.default
@@ -44,6 +51,8 @@ const OAuthClientSettings = ({
   const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
   const formRef = useRef<FormRefObject>(null)
   const handleConfirm = useCallback(async () => {
+    if (doingActionRef.current)
+      return
     const {
       isCheckValidated,
       values,
@@ -53,23 +62,30 @@ const OAuthClientSettings = ({
     }) || { isCheckValidated: false, values: {} }
     if (!isCheckValidated)
       return
-    const {
-      __oauth_client__,
-      ...restValues
-    } = values
 
-    await setPluginOAuthCustomClient({
+    try {
-      client_params: restValues,
+      const {
-      enable_oauth_custom_client: __oauth_client__ === 'custom',
+        __oauth_client__,
-    })
+        ...restValues
-    notify({
+      } = values
-      type: 'success',
+
-      message: t('common.api.actionSuccess'),
+      handleSetDoingAction(true)
-    })
+      await setPluginOAuthCustomClient({
+        client_params: restValues,
+        enable_oauth_custom_client: __oauth_client__ === 'custom',
+      })
+      notify({
+        type: 'success',
+        message: t('common.api.actionSuccess'),
+      })
 
-    onClose?.()
+      onClose?.()
-    invalidatePluginCredentialInfo()
+      invalidatePluginCredentialInfo()
-  }, [onClose, invalidatePluginCredentialInfo, setPluginOAuthCustomClient, notify, t])
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [onClose, invalidatePluginCredentialInfo, setPluginOAuthCustomClient, notify, t, handleSetDoingAction])
 
   const handleConfirmAndAuthorize = useCallback(async () => {
     await handleConfirm()
@@ -88,6 +104,7 @@ const OAuthClientSettings = ({
       onClose={onClose}
       onCancel={handleConfirm}
       onConfirm={handleConfirmAndAuthorize}
+      disabled={disabled || doingAction}
     >
       <AuthForm
         ref={formRef}

web/app/components/plugins/plugin-auth/authorized/index.tsx

@@ -98,21 +98,34 @@ const Authorized = ({
     setDeleteCredentialId(null)
     pendingOperationCredentialId.current = null
   }, [])
+  const [doingAction, setDoingAction] = useState(false)
+  const doingActionRef = useRef(doingAction)
+  const handleSetDoingAction = useCallback((doing: boolean) => {
+    doingActionRef.current = doing
+    setDoingAction(doing)
+  }, [])
   const handleConfirm = useCallback(async () => {
+    if (doingActionRef.current)
+      return
     if (!pendingOperationCredentialId.current) {
       setDeleteCredentialId(null)
       return
     }
-
+    try {
-    await deletePluginCredential({ credential_id: pendingOperationCredentialId.current })
+      handleSetDoingAction(true)
-    notify({
+      await deletePluginCredential({ credential_id: pendingOperationCredentialId.current })
-      type: 'success',
+      notify({
-      message: t('common.api.actionSuccess'),
+        type: 'success',
-    })
+        message: t('common.api.actionSuccess'),
-    invalidatePluginCredentialInfo()
+      })
-    setDeleteCredentialId(null)
+      invalidatePluginCredentialInfo()
-    pendingOperationCredentialId.current = null
+      setDeleteCredentialId(null)
-  }, [deletePluginCredential, invalidatePluginCredentialInfo, notify, t])
+      pendingOperationCredentialId.current = null
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [deletePluginCredential, invalidatePluginCredentialInfo, notify, t, handleSetDoingAction])
   const [editValues, setEditValues] = useState<Record<string, any> | null>(null)
   const handleEdit = useCallback((id: string, values: Record<string, any>) => {
     pendingOperationCredentialId.current = id
@@ -123,24 +136,41 @@ const Authorized = ({
   }, [])
   const { mutateAsync: setPluginDefaultCredential } = useSetPluginDefaultCredentialHook(pluginPayload)
   const handleSetDefault = useCallback(async (id: string) => {
-    await setPluginDefaultCredential(id)
+    if (doingActionRef.current)
-    notify({
+      return
-      type: 'success',
+    try {
-      message: t('common.api.actionSuccess'),
+      handleSetDoingAction(true)
-    })
+      await setPluginDefaultCredential(id)
-    invalidatePluginCredentialInfo()
+      notify({
-  }, [setPluginDefaultCredential, invalidatePluginCredentialInfo, notify, t])
+        type: 'success',
+        message: t('common.api.actionSuccess'),
+      })
+      invalidatePluginCredentialInfo()
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [setPluginDefaultCredential, invalidatePluginCredentialInfo, notify, t, handleSetDoingAction])
   const { mutateAsync: updatePluginCredential } = useUpdatePluginCredentialHook(pluginPayload)
   const handleRename = useCallback(async (payload: {
       credential_id: string
       name: string
     }) => {
-    await updatePluginCredential(payload)
+    if (doingActionRef.current)
-    notify({
+      return
-      type: 'success',
+    try {
-      message: t('common.api.actionSuccess'),
+      handleSetDoingAction(true)
-    })
+      await updatePluginCredential(payload)
-  }, [updatePluginCredential, notify, t])
+      notify({
+        type: 'success',
+        message: t('common.api.actionSuccess'),
+      })
+      invalidatePluginCredentialInfo()
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [updatePluginCredential, notify, t, handleSetDoingAction, invalidatePluginCredentialInfo])
 
   return (
     <>
@@ -283,6 +313,7 @@ const Authorized = ({
           <Confirm
             isShow
             title={t('datasetDocuments.list.delete.title')}
+            isDisabled={doingAction}
             onCancel={closeConfirm}
             onConfirm={handleConfirm}
           />
@@ -298,7 +329,7 @@ const Authorized = ({
               pendingOperationCredentialId.current = null
             }}
             onRemove={handleRemove}
-            disabled={disabled}
+            disabled={disabled || doingAction}
           />
         )
       }