fix

7 months ago · 3f273cae73
parent 964e29b27f
commit 3f273cae73
9 changed files with 110 additions and 14 deletions
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/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>
          )
        }
--- a/web/app/components/base/form/components/base/base-form.tsx
+++ b/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>
--- a/web/app/components/base/form/form-scenarios/auth/index.tsx
+++ b/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}
    />
  )
 }
--- a/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
+++ b/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}
--- a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
+++ b/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}
          />
        )
      }
--- a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
+++ b/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}
--- a/web/app/components/plugins/plugin-auth/hooks/use-credential.ts
+++ b/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)
+}
--- a/web/app/components/plugins/plugin-auth/hooks/use-get-api.ts
+++ b/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: '',
  }
 }
--- a/web/service/use-plugins-auth.ts
+++ b/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)
+    },
+  })
+}