fix

web/app/components/base/form/components/base/base-field.tsx

@@ -87,7 +87,7 @@ const BaseField = ({
       <div className={cn(labelClassName, formLabelClassName)}>
         {memorizedLabel}
         {
-          required && (
+          required && !isValidElement(label) && (
             <span className='ml-1 text-text-destructive-secondary'>*</span>
           )
         }

web/app/components/base/form/components/base/base-form.tsx

@@ -5,6 +5,7 @@ import {
 } from 'react'
 import type {
   AnyFieldApi,
+  AnyFormApi,
 } from '@tanstack/react-form'
 import { useForm } from '@tanstack/react-form'
 import type {
@@ -29,6 +30,7 @@ export type BaseFormProps = {
   formClassName?: string
   ref?: FormRef
   disabled?: boolean
+  formFromProps?: AnyFormApi
 } & Pick<BaseFieldProps, 'fieldClassName' | 'labelClassName' | 'inputContainerClassName' | 'inputClassName'>
 
 const BaseForm = ({
@@ -41,10 +43,12 @@ const BaseForm = ({
   inputClassName,
   ref,
   disabled,
+  formFromProps,
 }: BaseFormProps) => {
-  const form = useForm({
+  const formFromHook = useForm({
     defaultValues,
   })
+  const form: any = formFromProps || formFromHook
   const { getFormValues } = useGetFormValues(form)
   const { getValidators } = useGetValidators()
 
@@ -102,10 +106,6 @@ const BaseForm = ({
   return (
     <form
       className={cn(formClassName)}
-      onSubmit={(e) => {
-        e.preventDefault()
-        form?.handleSubmit()
-      }}
     >
       {formSchemas.map(renderFieldWrapper)}
     </form>

web/app/components/base/form/form-scenarios/auth/index.tsx

@@ -6,6 +6,7 @@ const AuthForm = ({
   formSchemas = [],
   defaultValues,
   ref,
+  formFromProps,
 }: BaseFormProps) => {
   return (
     <BaseForm
@@ -14,6 +15,7 @@ const AuthForm = ({
       defaultValues={defaultValues}
       formClassName='space-y-4'
       labelClassName='h-6 flex items-center mb-1 system-sm-medium text-text-secondary'
+      formFromProps={formFromProps}
     />
   )
 }

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

@@ -24,7 +24,7 @@ const AddApiKeyButton = ({
   return (
     <>
       <Button
-        className='grow'
+        className='w-0 grow'
         variant={buttonVariant}
         onClick={() => setIsApiKeyModalOpen(true)}
         disabled={disabled}

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

@@ -103,6 +103,11 @@ const AddOAuthButton = ({
         </div>
         <div className='system-sm-medium flex h-6 items-center text-text-secondary'>
           {renderI18nObject(item.label as Record<string, string>)}
+          {
+            item.required && (
+              <span className='ml-1 text-text-destructive-secondary'>*</span>
+            )
+          }
         </div>
       </div>
     )
@@ -157,7 +162,7 @@ const AddOAuthButton = ({
           <Button
             variant={buttonVariant}
             className={cn(
-              'grow px-0 py-0 hover:bg-components-button-primary-bg',
+              'w-0 grow px-0 py-0 hover:bg-components-button-primary-bg',
               className,
             )}
             disabled={disabled}
@@ -171,7 +176,10 @@ const AddOAuthButton = ({
               {
                 is_oauth_custom_client_enabled && (
                   <Badge
-                    className='ml-1 border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface'
+                    className={cn(
+                      'ml-1',
+                      buttonVariant === 'primary' && 'border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface',
+                    )}
                   >
                     {t('plugin.auth.custom')}
                   </Badge>
@@ -203,6 +211,7 @@ const AddOAuthButton = ({
             variant={buttonVariant}
             onClick={() => setIsOAuthSettingsOpen(true)}
             disabled={disabled}
+            className='w-0 grow'
           >
             <RiEqualizer2Line className='mr-0.5 h-4 w-4' />
             {t('plugin.auth.setupOAuth')}
@@ -217,7 +226,11 @@ const AddOAuthButton = ({
             disabled={disabled || isLoading}
             schemas={memorizedSchemas}
             onAuth={handleOAuth}
-            editValues={client_params}
+            editValues={{
+              ...client_params,
+              __oauth_client__: is_oauth_custom_client_enabled ? 'custom' : 'default',
+            }}
+            hasOriginalClientParams={Object.keys(client_params || {}).length > 0}
           />
         )
       }

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

@@ -4,10 +4,16 @@ import {
   useRef,
   useState,
 } from 'react'
+import {
+  useForm,
+  useStore,
+} from '@tanstack/react-form'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal/modal'
 import {
+  useDeletePluginOAuthCustomClientHook,
   useInvalidPluginCredentialInfoHook,
+  useInvalidPluginOAuthClientSchemaHook,
   useSetPluginOAuthCustomClientHook,
 } from '../hooks/use-credential'
 import type { PluginPayload } from '../types'
@@ -17,6 +23,7 @@ import type {
   FormSchema,
 } from '@/app/components/base/form/types'
 import { useToastContext } from '@/app/components/base/toast'
+import Button from '@/app/components/base/button'
 
 type OAuthClientSettingsProps = {
   pluginPayload: PluginPayload
@@ -25,6 +32,7 @@ type OAuthClientSettingsProps = {
   disabled?: boolean
   schemas: FormSchema[]
   onAuth?: () => Promise<void>
+  hasOriginalClientParams?: boolean
 }
 const OAuthClientSettings = ({
   pluginPayload,
@@ -33,6 +41,7 @@ const OAuthClientSettings = ({
   disabled,
   schemas,
   onAuth,
+  hasOriginalClientParams,
 }: OAuthClientSettingsProps) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
@@ -48,7 +57,8 @@ const OAuthClientSettings = ({
     return acc
   }, {} as Record<string, any>)
   const { mutateAsync: setPluginOAuthCustomClient } = useSetPluginOAuthCustomClientHook(pluginPayload)
-  const invalidatePluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
+  const invalidPluginCredentialInfo = useInvalidPluginCredentialInfoHook(pluginPayload)
+  const invalidPluginOAuthClientSchema = useInvalidPluginOAuthClientSchemaHook(pluginPayload)
   const formRef = useRef<FormRefObject>(null)
   const handleConfirm = useCallback(async () => {
     if (doingActionRef.current)
@@ -80,18 +90,42 @@ const OAuthClientSettings = ({
       })
 
       onClose?.()
-      invalidatePluginCredentialInfo()
+      invalidPluginCredentialInfo()
+      invalidPluginOAuthClientSchema()
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [onClose, invalidatePluginCredentialInfo, setPluginOAuthCustomClient, notify, t, handleSetDoingAction])
+  }, [onClose, invalidPluginCredentialInfo, invalidPluginOAuthClientSchema, setPluginOAuthCustomClient, notify, t, handleSetDoingAction])
 
   const handleConfirmAndAuthorize = useCallback(async () => {
     await handleConfirm()
     if (onAuth)
       await onAuth()
   }, [handleConfirm, onAuth])
+  const { mutateAsync: deletePluginOAuthCustomClient } = useDeletePluginOAuthCustomClientHook(pluginPayload)
+  const handleRemove = useCallback(async () => {
+    if (doingActionRef.current)
+      return
+
+    try {
+      handleSetDoingAction(true)
+      await deletePluginOAuthCustomClient()
+      notify({
+        type: 'success',
+        message: t('common.api.actionSuccess'),
+      })
+      invalidPluginCredentialInfo()
+      invalidPluginOAuthClientSchema()
+    }
+    finally {
+      handleSetDoingAction(false)
+    }
+  }, [invalidPluginCredentialInfo, invalidPluginOAuthClientSchema, deletePluginOAuthCustomClient, notify, t, handleSetDoingAction])
+  const form = useForm({
+    defaultValues: editValues || defaultValues,
+  })
+  const __oauth_client__ = useStore(form.store, s => s.values.__oauth_client__)
   return (
     <Modal
       title={t('plugin.auth.oauthClientSettings')}
@@ -105,8 +139,23 @@ const OAuthClientSettings = ({
       onCancel={handleConfirm}
       onConfirm={handleConfirmAndAuthorize}
       disabled={disabled || doingAction}
+      footerSlot={
+        __oauth_client__ === 'custom' && hasOriginalClientParams && (
+          <div className='grow'>
+            <Button
+              variant='secondary'
+              className='text-components-button-destructive-secondary-text'
+              disabled={disabled || doingAction || !editValues}
+              onClick={handleRemove}
+            >
+              {t('common.operation.remove')}
+            </Button>
+          </div>
+        )
+      }
     >
       <AuthForm
+        formFromProps={form}
         ref={formRef}
         formSchemas={schemas}
         defaultValues={editValues || defaultValues}

web/app/components/plugins/plugin-auth/hooks/use-credential.ts

@@ -1,11 +1,13 @@
 import {
   useAddPluginCredential,
   useDeletePluginCredential,
+  useDeletePluginOAuthCustomClient,
   useGetPluginCredentialInfo,
   useGetPluginCredentialSchema,
   useGetPluginOAuthClientSchema,
   useGetPluginOAuthUrl,
   useInvalidPluginCredentialInfo,
+  useInvalidPluginOAuthClientSchema,
   useSetPluginDefaultCredential,
   useSetPluginOAuthCustomClient,
   useUpdatePluginCredential,
@@ -67,8 +69,20 @@ export const useGetPluginOAuthClientSchemaHook = (pluginPayload: PluginPayload)
   return useGetPluginOAuthClientSchema(apiMap.getOauthClientSchema)
 }
 
+export const useInvalidPluginOAuthClientSchemaHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useInvalidPluginOAuthClientSchema(apiMap.getOauthClientSchema)
+}
+
 export const useSetPluginOAuthCustomClientHook = (pluginPayload: PluginPayload) => {
   const apiMap = useGetApi(pluginPayload)
 
   return useSetPluginOAuthCustomClient(apiMap.setCustomOauthClient)
 }
+
+export const useDeletePluginOAuthCustomClientHook = (pluginPayload: PluginPayload) => {
+  const apiMap = useGetApi(pluginPayload)
+
+  return useDeletePluginOAuthCustomClient(apiMap.deleteCustomOAuthClient)
+}

web/app/components/plugins/plugin-auth/hooks/use-get-api.ts

@@ -20,6 +20,7 @@ export const useGetApi = ({ category = AuthCategory.tool, provider }: PluginPayl
       getOauthClientSchema: `/workspaces/current/tool-provider/builtin/${provider}/oauth/client-schema`,
       setCustomOauthClient: `/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`,
       getCustomOAuthClientValues: `/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`,
+      deleteCustomOAuthClient: `/workspaces/current/tool-provider/builtin/${provider}/oauth/custom-client`,
     }
   }
 
@@ -35,5 +36,6 @@ export const useGetApi = ({ category = AuthCategory.tool, provider }: PluginPayl
     getOauthClientSchema: '',
     setCustomOauthClient: '',
     getCustomOAuthClientValues: '',
+    deleteCustomOAuthClient: '',
   }
 }

web/service/use-plugins-auth.ts

@@ -2,7 +2,7 @@ import {
   useMutation,
   useQuery,
 } from '@tanstack/react-query'
-import { get, post } from './base'
+import { del, get, post } from './base'
 import { useInvalid } from './use-base'
 import type {
   Credential,
@@ -131,6 +131,12 @@ export const useGetPluginOAuthClientSchema = (
   })
 }
 
+export const useInvalidPluginOAuthClientSchema = (
+  url: string,
+) => {
+  return useInvalid([NAME_SPACE, 'oauth-client-schema', url])
+}
+
 export const useSetPluginOAuthCustomClient = (
   url: string,
 ) => {
@@ -143,3 +149,13 @@ export const useSetPluginOAuthCustomClient = (
     },
   })
 }
+
+export const useDeletePluginOAuthCustomClient = (
+  url: string,
+) => {
+  return useMutation({
+    mutationFn: () => {
+      return del<{ result: string }>(url)
+    },
+  })
+}