chore(web): new lint setup (#30020)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
2026-05-03 08:58:09 +08:00 · 2025-12-23 16:58:55 +08:00
parent 9701a2994b
commit f2842da397
3356 changed files with 85046 additions and 81278 deletions
--- 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
@ -1,12 +1,12 @@
+import type { PluginPayload } from '../types'
+import type { ButtonProps } from '@/app/components/base/button'
+import type { FormSchema } from '@/app/components/base/form/types'
 import {
  memo,
  useState,
 } from 'react'
 import Button from '@/app/components/base/button'
-import type { ButtonProps } from '@/app/components/base/button'
 import ApiKeyModal from './api-key-modal'
-import type { PluginPayload } from '../types'
-import type { FormSchema } from '@/app/components/base/form/types'

 export type AddApiKeyButtonProps = {
  pluginPayload: PluginPayload
@ -29,7 +29,7 @@ const AddApiKeyButton = ({
  return (
    <>
      <Button
-        className='w-full'
+        className="w-full"
        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
@ -1,3 +1,11 @@
+import type { PluginPayload } from '../types'
+import type { ButtonProps } from '@/app/components/base/button'
+import type { FormSchema } from '@/app/components/base/form/types'
+import {
+  RiClipboardLine,
+  RiEqualizer2Line,
+  RiInformation2Fill,
+} from '@remixicon/react'
 import {
  memo,
  useCallback,
@ -5,26 +13,18 @@ import {
  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  RiClipboardLine,
-  RiEqualizer2Line,
-  RiInformation2Fill,
-} from '@remixicon/react'
-import Button from '@/app/components/base/button'
-import type { ButtonProps } from '@/app/components/base/button'
-import OAuthClientSettings from './oauth-client-settings'
-import { cn } from '@/utils/classnames'
-import type { PluginPayload } from '../types'
-import { openOAuthPopup } from '@/hooks/use-oauth'
+import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
+import { FormTypeEnum } from '@/app/components/base/form/types'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+import { openOAuthPopup } from '@/hooks/use-oauth'
+import { cn } from '@/utils/classnames'
 import {
  useGetPluginOAuthClientSchemaHook,
  useGetPluginOAuthUrlHook,
 } from '../hooks/use-credential'
-import type { FormSchema } from '@/app/components/base/form/types'
-import { FormTypeEnum } from '@/app/components/base/form/types'
-import ActionButton from '@/app/components/base/action-button'
-import { useRenderI18nObject } from '@/hooks/use-i18n'
+import OAuthClientSettings from './oauth-client-settings'

 export type AddOAuthButtonProps = {
  pluginPayload: PluginPayload
@ -88,37 +88,37 @@ const AddOAuthButton = ({

  const renderCustomLabel = useCallback((item: FormSchema) => {
    return (
-      <div className='w-full'>
-        <div className='mb-4 flex rounded-xl bg-background-section-burn p-4'>
-          <div className='mr-3 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg'>
-            <RiInformation2Fill className='h-5 w-5 text-text-accent' />
+      <div className="w-full">
+        <div className="mb-4 flex rounded-xl bg-background-section-burn p-4">
+          <div className="mr-3 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg">
+            <RiInformation2Fill className="h-5 w-5 text-text-accent" />
          </div>
-          <div className='w-0 grow'>
-            <div className='system-sm-regular mb-1.5'>
+          <div className="w-0 grow">
+            <div className="system-sm-regular mb-1.5">
              {t('plugin.auth.clientInfo')}
            </div>
            {
              redirect_uri && (
-                <div className='system-sm-medium flex w-full py-0.5'>
-                  <div className='w-0 grow break-words break-all'>{redirect_uri}</div>
+                <div className="system-sm-medium flex w-full py-0.5">
+                  <div className="w-0 grow break-words break-all">{redirect_uri}</div>
                  <ActionButton
-                    className='shrink-0'
+                    className="shrink-0"
                    onClick={() => {
                      navigator.clipboard.writeText(redirect_uri || '')
                    }}
                  >
-                    <RiClipboardLine className='h-4 w-4' />
+                    <RiClipboardLine className="h-4 w-4" />
                  </ActionButton>
                </div>
              )
            }
          </div>
        </div>
-        <div className='system-sm-medium flex h-6 items-center text-text-secondary'>
+        <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>
+              <span className="ml-1 text-text-destructive-secondary">*</span>
            )
          }
        </div>
@ -197,9 +197,10 @@ const AddOAuthButton = ({
            <div className={cn(
              'flex h-full w-0 grow items-center justify-center rounded-l-lg pl-0.5 hover:bg-components-button-primary-bg-hover',
              buttonLeftClassName,
-            )}>
+            )}
+            >
              <div
-                className='truncate'
+                className="truncate"
                title={buttonText}
              >
                {buttonText}
@ -220,7 +221,9 @@ const AddOAuthButton = ({
            <div className={cn(
              'h-4 w-[1px] shrink-0 bg-text-primary-on-surface opacity-[0.15]',
              dividerClassName,
-            )}></div>
+            )}
+            >
+            </div>
            <div
              className={cn(
                'flex h-full w-8 shrink-0 items-center justify-center rounded-r-lg hover:bg-components-button-primary-bg-hover',
@ -231,7 +234,7 @@ const AddOAuthButton = ({
                setIsOAuthSettingsOpen(true)
              }}
            >
-              <RiEqualizer2Line className='h-4 w-4' />
+              <RiEqualizer2Line className="h-4 w-4" />
            </div>
          </Button>
        )
@ -242,9 +245,9 @@ const AddOAuthButton = ({
            variant={buttonVariant}
            onClick={() => setIsOAuthSettingsOpen(true)}
            disabled={disabled}
-            className='w-full'
+            className="w-full"
          >
-            <RiEqualizer2Line className='mr-0.5 h-4 w-4' />
+            <RiEqualizer2Line className="mr-0.5 h-4 w-4" />
            {t('plugin.auth.setupOAuth')}
          </Button>
        )
--- a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
@ -1,3 +1,8 @@
+import type { PluginPayload } from '../types'
+import type {
+  FormRefObject,
+  FormSchema,
+} from '@/app/components/base/form/types'
 import {
  memo,
  useCallback,
@ -6,25 +11,20 @@ import {
  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal/modal'
-import { CredentialTypeEnum } from '../types'
+import { EncryptedBottom } from '@/app/components/base/encrypted-bottom'
 import AuthForm from '@/app/components/base/form/form-scenarios/auth'
-import type {
-  FormRefObject,
-  FormSchema,
-} from '@/app/components/base/form/types'
 import { FormTypeEnum } from '@/app/components/base/form/types'
-import { useToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
-import type { PluginPayload } from '../types'
+import Modal from '@/app/components/base/modal/modal'
+import { useToastContext } from '@/app/components/base/toast'
+import { ReadmeEntrance } from '../../readme-panel/entrance'
+import { ReadmeShowType } from '../../readme-panel/store'
 import {
  useAddPluginCredentialHook,
  useGetPluginCredentialSchemaHook,
  useUpdatePluginCredentialHook,
 } from '../hooks/use-credential'
-import { ReadmeEntrance } from '../../readme-panel/entrance'
-import { ReadmeShowType } from '../../readme-panel/store'
-import { EncryptedBottom } from '@/app/components/base/encrypted-bottom'
+import { CredentialTypeEnum } from '../types'

 export type ApiKeyModalProps = {
  pluginPayload: PluginPayload
@ -128,7 +128,7 @@ const ApiKeyModal = ({

  return (
    <Modal
-      size='md'
+      size="md"
      title={t('plugin.auth.useApiAuth')}
      subTitle={t('plugin.auth.useApiAuthDesc')}
      onClose={onClose}
@ -142,14 +142,14 @@ const ApiKeyModal = ({
      onExtraButtonClick={onRemove}
      disabled={disabled || isLoading || doingAction}
      clickOutsideNotClose={true}
-      wrapperClassName='!z-[101]'
+      wrapperClassName="!z-[101]"
    >
      {pluginPayload.detail && (
        <ReadmeEntrance pluginDetail={pluginPayload.detail} showType={ReadmeShowType.modal} />
      )}
      {
        isLoading && (
-          <div className='flex h-40 items-center justify-center'>
+          <div className="flex h-40 items-center justify-center">
            <Loading />
          </div>
        )
--- a/web/app/components/plugins/plugin-auth/authorize/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/index.tsx
@ -1,15 +1,15 @@
+import type { PluginPayload } from '../types'
+import type { AddApiKeyButtonProps } from './add-api-key-button'
+import type { AddOAuthButtonProps } from './add-oauth-button'
 import {
  memo,
  useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import AddOAuthButton from './add-oauth-button'
-import type { AddOAuthButtonProps } from './add-oauth-button'
-import AddApiKeyButton from './add-api-key-button'
-import type { AddApiKeyButtonProps } from './add-api-key-button'
-import type { PluginPayload } from '../types'
-import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
+import { cn } from '@/utils/classnames'
+import AddApiKeyButton from './add-api-key-button'
+import AddOAuthButton from './add-oauth-button'

 type AuthorizeProps = {
  pluginPayload: PluginPayload
@ -110,7 +110,7 @@ const Authorize = ({

  return (
    <>
-      <div className='flex items-center space-x-1.5'>
+      <div className="flex items-center space-x-1.5">
        {
          canOAuth && (
            OAuthButton
@ -118,10 +118,10 @@ const Authorize = ({
        }
        {
          showDivider && canOAuth && canApiKey && (
-            <div className='system-2xs-medium-uppercase flex shrink-0 flex-col items-center justify-between text-text-tertiary'>
-              <div className='h-2 w-[1px] bg-divider-subtle'></div>
+            <div className="system-2xs-medium-uppercase flex shrink-0 flex-col items-center justify-between text-text-tertiary">
+              <div className="h-2 w-[1px] bg-divider-subtle"></div>
              or
-              <div className='h-2 w-[1px] bg-divider-subtle'></div>
+              <div className="h-2 w-[1px] bg-divider-subtle"></div>
            </div>
          )
        }
--- a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
@ -1,30 +1,30 @@
+import type { PluginPayload } from '../types'
+import type {
+  FormRefObject,
+  FormSchema,
+} from '@/app/components/base/form/types'
+import {
+  useForm,
+  useStore,
+} from '@tanstack/react-form'
 import {
  memo,
  useCallback,
  useRef,
  useState,
 } from 'react'
-import {
-  useForm,
-  useStore,
-} from '@tanstack/react-form'
 import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import Modal from '@/app/components/base/modal/modal'
+import { useToastContext } from '@/app/components/base/toast'
+import { ReadmeEntrance } from '../../readme-panel/entrance'
+import { ReadmeShowType } from '../../readme-panel/store'
 import {
  useDeletePluginOAuthCustomClientHook,
  useInvalidPluginOAuthClientSchemaHook,
  useSetPluginOAuthCustomClientHook,
 } from '../hooks/use-credential'
-import type { PluginPayload } from '../types'
-import AuthForm from '@/app/components/base/form/form-scenarios/auth'
-import type {
-  FormRefObject,
-  FormSchema,
-} from '@/app/components/base/form/types'
-import { useToastContext } from '@/app/components/base/toast'
-import Button from '@/app/components/base/button'
-import { ReadmeEntrance } from '../../readme-panel/entrance'
-import { ReadmeShowType } from '../../readme-panel/store'

 type OAuthClientSettingsProps = {
  pluginPayload: PluginPayload
@ -136,7 +136,7 @@ const OAuthClientSettings = ({
      cancelButtonText={t('plugin.auth.saveOnly')}
      extraButtonText={t('common.operation.cancel')}
      showExtraButton
-      extraButtonVariant='secondary'
+      extraButtonVariant="secondary"
      onExtraButtonClick={onClose}
      onClose={onClose}
      onCancel={handleConfirm}
@ -144,10 +144,10 @@ const OAuthClientSettings = ({
      disabled={disabled || doingAction}
      footerSlot={
        __oauth_client__ === 'custom' && hasOriginalClientParams && (
-          <div className='grow'>
+          <div className="grow">
            <Button
-              variant='secondary'
-              className='text-components-button-destructive-secondary-text'
+              variant="secondary"
+              className="text-components-button-destructive-secondary-text"
              disabled={disabled || doingAction || !editValues}
              onClick={handleRemove}
            >
@ -156,8 +156,8 @@ const OAuthClientSettings = ({
          </div>
        )
      }
-      containerClassName='pt-0'
-      wrapperClassName='!z-[101]'
+      containerClassName="pt-0"
+      wrapperClassName="!z-[101]"
      clickOutsideNotClose={true}
    >
      {pluginPayload.detail && (
--- a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
@ -1,8 +1,8 @@
+import { RiEqualizer2Line } from '@remixicon/react'
 import {
  memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiEqualizer2Line } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
@ -19,12 +19,12 @@ const AuthorizedInDataSourceNode = ({

  return (
    <Button
-      size='small'
+      size="small"
      onClick={onJumpToDataSourcePage}
    >
      <Indicator
-        className='mr-1.5'
-        color='green'
+        className="mr-1.5"
+        color="green"
      />
      {
        authorizationsNum > 1
--- a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
@ -1,17 +1,17 @@
+import type {
+  Credential,
+  PluginPayload,
+} from './types'
+import { RiArrowDownSLine } from '@remixicon/react'
 import {
  memo,
  useCallback,
  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiArrowDownSLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
-import type {
-  Credential,
-  PluginPayload,
-} from './types'
 import {
  Authorized,
  usePluginAuth,
@ -66,7 +66,7 @@ const AuthorizedInNode = ({
    }
    return (
      <Button
-        size='small'
+        size="small"
        className={cn(
          open && !removed && 'bg-components-button-ghost-bg-hover',
          removed && 'bg-transparent text-text-destructive',
@ -74,7 +74,7 @@ const AuthorizedInNode = ({
        variant={(defaultUnavailable || unavailable) ? 'ghost' : 'secondary'}
      >
        <Indicator
-          className='mr-1.5'
+          className="mr-1.5"
          color={color as any}
        />
        {label}
@ -124,9 +124,9 @@ const AuthorizedInNode = ({
      isOpen={isOpen}
      onOpenChange={setIsOpen}
      offset={4}
-      placement='bottom-end'
+      placement="bottom-end"
      triggerPopupSameWidth={false}
-      popupClassName='w-[360px]'
+      popupClassName="w-[360px]"
      disabled={disabled}
      disableSetDefault
      onItemClick={handleAuthorizationItemClick}
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@ -1,37 +1,36 @@
+import type { Credential, PluginPayload } from '../types'
+import type {
+  PortalToFollowElemOptions,
+} from '@/app/components/base/portal-to-follow-elem'
+import {
+  RiArrowDownSLine,
+} from '@remixicon/react'
 import {
  memo,
  useCallback,
  useRef,
  useState,
 } from 'react'
-import {
-  RiArrowDownSLine,
-} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import Confirm from '@/app/components/base/confirm'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import type {
-  PortalToFollowElemOptions,
-} from '@/app/components/base/portal-to-follow-elem'
-import Button from '@/app/components/base/button'
+import { useToastContext } from '@/app/components/base/toast'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
-import Confirm from '@/app/components/base/confirm'
 import Authorize from '../authorize'
-import type { Credential } from '../types'
-import { CredentialTypeEnum } from '../types'
 import ApiKeyModal from '../authorize/api-key-modal'
-import Item from './item'
-import { useToastContext } from '@/app/components/base/toast'
-import type { PluginPayload } from '../types'
 import {
  useDeletePluginCredentialHook,
  useSetPluginDefaultCredentialHook,
  useUpdatePluginCredentialHook,
 } from '../hooks/use-credential'
+import { CredentialTypeEnum } from '../types'
+import Item from './item'

 type AuthorizedProps = {
  pluginPayload: PluginPayload
@ -193,37 +192,40 @@ const Authorized = ({
            renderTrigger
              ? renderTrigger(mergedIsOpen)
              : (
-                <Button
-                  className={cn(
-                    'w-full',
-                    isOpen && 'bg-components-button-secondary-bg-hover',
-                  )}>
-                  <Indicator className='mr-2' color={unavailableCredential ? 'gray' : 'green'} />
-                  {credentials.length}&nbsp;
-                  {
-                    credentials.length > 1
-                      ? t('plugin.auth.authorizations')
-                      : t('plugin.auth.authorization')
-                  }
-                  {
-                    !!unavailableCredentials.length && (
-                      ` (${unavailableCredentials.length} ${t('plugin.auth.unavailable')})`
-                    )
-                  }
-                  <RiArrowDownSLine className='ml-0.5 h-4 w-4' />
-                </Button>
-              )
+                  <Button
+                    className={cn(
+                      'w-full',
+                      isOpen && 'bg-components-button-secondary-bg-hover',
+                    )}
+                  >
+                    <Indicator className="mr-2" color={unavailableCredential ? 'gray' : 'green'} />
+                    {credentials.length}
+&nbsp;
+                    {
+                      credentials.length > 1
+                        ? t('plugin.auth.authorizations')
+                        : t('plugin.auth.authorization')
+                    }
+                    {
+                      !!unavailableCredentials.length && (
+                        ` (${unavailableCredentials.length} ${t('plugin.auth.unavailable')})`
+                      )
+                    }
+                    <RiArrowDownSLine className="ml-0.5 h-4 w-4" />
+                  </Button>
+                )
          }
        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className='z-[100]'>
+        <PortalToFollowElemContent className="z-[100]">
          <div className={cn(
            'max-h-[360px] overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg',
            popupClassName,
-          )}>
-            <div className='py-1'>
+          )}
+          >
+            <div className="py-1">
              {
                !!extraAuthorizationItems?.length && (
-                  <div className='p-1'>
+                  <div className="p-1">
                    {
                      extraAuthorizationItems.map(credential => (
                        <Item
@ -245,11 +247,12 @@ const Authorized = ({
              }
              {
                !!oAuthCredentials.length && (
-                  <div className='p-1'>
+                  <div className="p-1">
                    <div className={cn(
                      'system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary',
                      showItemSelectedIcon && 'pl-7',
-                    )}>
+                    )}
+                    >
                      OAuth
                    </div>
                    {
@ -274,11 +277,12 @@ const Authorized = ({
              }
              {
                !!apiKeyCredentials.length && (
-                  <div className='p-1'>
+                  <div className="p-1">
                    <div className={cn(
                      'system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary',
                      showItemSelectedIcon && 'pl-7',
-                    )}>
+                    )}
+                    >
                      API Keys
                    </div>
                    {
@ -306,11 +310,11 @@ const Authorized = ({
            {
              !notAllowCustomCredential && (
                <>
-                  <div className='h-[1px] bg-divider-subtle'></div>
-                  <div className='p-2'>
+                  <div className="h-[1px] bg-divider-subtle"></div>
+                  <div className="p-2">
                    <Authorize
                      pluginPayload={pluginPayload}
-                      theme='secondary'
+                      theme="secondary"
                      showDivider={false}
                      canOAuth={canOAuth}
                      canApiKey={canApiKey}
--- a/web/app/components/plugins/plugin-auth/authorized/item.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/item.tsx
@ -1,23 +1,23 @@
-import {
-  memo,
-  useMemo,
-  useState,
-} from 'react'
-import { useTranslation } from 'react-i18next'
+import type { Credential } from '../types'
 import {
  RiCheckLine,
  RiDeleteBinLine,
  RiEditLine,
  RiEqualizer2Line,
 } from '@remixicon/react'
-import Indicator from '@/app/components/header/indicator'
-import Badge from '@/app/components/base/badge'
+import {
+  memo,
+  useMemo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Tooltip from '@/app/components/base/tooltip'
+import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import Tooltip from '@/app/components/base/tooltip'
+import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
-import type { Credential } from '../types'
 import { CredentialTypeEnum } from '../types'

 type ItemProps = {
@ -77,18 +77,18 @@ const Item = ({
    >
      {
        renaming && (
-          <div className='flex w-full items-center space-x-1'>
+          <div className="flex w-full items-center space-x-1">
            <Input
-              wrapperClassName='grow rounded-[6px]'
-              className='h-6'
+              wrapperClassName="grow rounded-[6px]"
+              className="h-6"
              value={renameValue}
              onChange={e => setRenameValue(e.target.value)}
              placeholder={t('common.placeholder.input')}
              onClick={e => e.stopPropagation()}
            />
            <Button
-              size='small'
-              variant='primary'
+              size="small"
+              variant="primary"
              onClick={(e) => {
                e.stopPropagation()
                onRename?.({
@ -101,7 +101,7 @@ const Item = ({
              {t('common.operation.save')}
            </Button>
            <Button
-              size='small'
+              size="small"
              onClick={(e) => {
                e.stopPropagation()
                setRenaming(false)
@ -114,31 +114,31 @@ const Item = ({
      }
      {
        !renaming && (
-          <div className='flex w-0 grow items-center space-x-1.5'>
+          <div className="flex w-0 grow items-center space-x-1.5">
            {
              showSelectedIcon && (
-                <div className='h-4 w-4'>
+                <div className="h-4 w-4">
                  {
                    selectedCredentialId === credential.id && (
-                      <RiCheckLine className='h-4 w-4 text-text-accent' />
+                      <RiCheckLine className="h-4 w-4 text-text-accent" />
                    )
                  }
                </div>
              )
            }
            <Indicator
-              className='ml-2 mr-1.5 shrink-0'
+              className="ml-2 mr-1.5 shrink-0"
              color={credential.not_allowed_to_use ? 'gray' : 'green'}
            />
            <div
-              className='system-md-regular truncate text-text-secondary'
+              className="system-md-regular truncate text-text-secondary"
              title={credential.name}
            >
              {credential.name}
            </div>
            {
              credential.is_default && (
-                <Badge className='shrink-0'>
+                <Badge className="shrink-0">
                  {t('plugin.auth.default')}
                </Badge>
              )
@ -148,18 +148,18 @@ const Item = ({
      }
      {
        credential.from_enterprise && (
-          <Badge className='shrink-0'>
+          <Badge className="shrink-0">
            Enterprise
          </Badge>
        )
      }
      {
        showAction && !renaming && (
-          <div className='ml-2 hidden shrink-0 items-center group-hover:flex'>
+          <div className="ml-2 hidden shrink-0 items-center group-hover:flex">
            {
              !credential.is_default && !disableSetDefault && !credential.not_allowed_to_use && (
                <Button
-                  size='small'
+                  size="small"
                  disabled={disabled}
                  onClick={(e) => {
                    e.stopPropagation()
@ -181,7 +181,7 @@ const Item = ({
                      setRenameValue(credential.name)
                    }}
                  >
-                    <RiEditLine className='h-4 w-4 text-text-tertiary' />
+                    <RiEditLine className="h-4 w-4 text-text-tertiary" />
                  </ActionButton>
                </Tooltip>
              )
@ -203,7 +203,7 @@ const Item = ({
                      )
                    }}
                  >
-                    <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
+                    <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
                  </ActionButton>
                </Tooltip>
              )
@ -212,14 +212,14 @@ const Item = ({
              !disableDelete && !credential.from_enterprise && (
                <Tooltip popupContent={t('common.operation.delete')}>
                  <ActionButton
-                    className='hover:bg-transparent'
+                    className="hover:bg-transparent"
                    disabled={disabled}
                    onClick={(e) => {
                      e.stopPropagation()
                      onDelete?.(credential.id)
                    }}
                  >
-                    <RiDeleteBinLine className='h-4 w-4 text-text-tertiary hover:text-text-destructive' />
+                    <RiDeleteBinLine className="h-4 w-4 text-text-tertiary hover:text-text-destructive" />
                  </ActionButton>
                </Tooltip>
              )
--- a/web/app/components/plugins/plugin-auth/hooks/use-credential.ts
+++ b/web/app/components/plugins/plugin-auth/hooks/use-credential.ts
@ -1,3 +1,4 @@
+import type { CredentialTypeEnum, PluginPayload } from '../types'
 import {
  useAddPluginCredential,
  useDeletePluginCredential,
@ -12,10 +13,8 @@ import {
  useSetPluginOAuthCustomClient,
  useUpdatePluginCredential,
 } from '@/service/use-plugins-auth'
-import { useGetApi } from './use-get-api'
-import type { PluginPayload } from '../types'
-import type { CredentialTypeEnum } from '../types'
 import { useInvalidToolsByType } from '@/service/use-tools'
+import { useGetApi } from './use-get-api'

 export const useGetPluginCredentialInfoHook = (pluginPayload: PluginPayload, enable?: boolean) => {
  const apiMap = useGetApi(pluginPayload)
--- a/web/app/components/plugins/plugin-auth/hooks/use-get-api.ts
+++ b/web/app/components/plugins/plugin-auth/hooks/use-get-api.ts
@ -1,10 +1,10 @@
-import {
-  AuthCategory,
-} from '../types'
 import type {
  CredentialTypeEnum,
  PluginPayload,
 } from '../types'
+import {
+  AuthCategory,
+} from '../types'

 export const useGetApi = ({ category = AuthCategory.tool, provider }: PluginPayload) => {
  if (category === AuthCategory.tool) {
--- a/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.ts
+++ b/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.ts
@ -1,3 +1,4 @@
+import type { PluginPayload } from '../types'
 import {
  useCallback,
  useRef,
@ -5,7 +6,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useToastContext } from '@/app/components/base/toast'
-import type { PluginPayload } from '../types'
 import {
  useDeletePluginCredentialHook,
  useSetPluginDefaultCredentialHook,
--- a/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth.ts
+++ b/web/app/components/plugins/plugin-auth/hooks/use-plugin-auth.ts
@ -1,10 +1,10 @@
+import type { PluginPayload } from '../types'
 import { useAppContext } from '@/context/app-context'
+import { CredentialTypeEnum } from '../types'
 import {
  useGetPluginCredentialInfoHook,
  useInvalidPluginCredentialInfoHook,
 } from './use-credential'
-import { CredentialTypeEnum } from '../types'
-import type { PluginPayload } from '../types'

 export const usePluginAuth = (pluginPayload: PluginPayload, enable?: boolean) => {
  const { data } = useGetPluginCredentialInfoHook(pluginPayload, enable)
--- a/web/app/components/plugins/plugin-auth/index.tsx
+++ b/web/app/components/plugins/plugin-auth/index.tsx
@ -1,12 +1,12 @@
-export { default as PluginAuth } from './plugin-auth'
-export { default as Authorized } from './authorized'
-export { default as AuthorizedInNode } from './authorized-in-node'
-export { default as PluginAuthInAgent } from './plugin-auth-in-agent'
-export { usePluginAuth } from './hooks/use-plugin-auth'
-export { default as PluginAuthInDataSourceNode } from './plugin-auth-in-datasource-node'
-export { default as AuthorizedInDataSourceNode } from './authorized-in-data-source-node'
-export { default as AddOAuthButton } from './authorize/add-oauth-button'
 export { default as AddApiKeyButton } from './authorize/add-api-key-button'
+export { default as AddOAuthButton } from './authorize/add-oauth-button'
 export { default as ApiKeyModal } from './authorize/api-key-modal'
+export { default as Authorized } from './authorized'
+export { default as AuthorizedInDataSourceNode } from './authorized-in-data-source-node'
+export { default as AuthorizedInNode } from './authorized-in-node'
+export { usePluginAuth } from './hooks/use-plugin-auth'
 export * from './hooks/use-plugin-auth-action'
+export { default as PluginAuth } from './plugin-auth'
+export { default as PluginAuthInAgent } from './plugin-auth-in-agent'
+export { default as PluginAuthInDataSourceNode } from './plugin-auth-in-datasource-node'
 export * from './types'
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
@ -1,20 +1,20 @@
+import type {
+  Credential,
+  PluginPayload,
+} from './types'
+import { RiArrowDownSLine } from '@remixicon/react'
 import {
  memo,
  useCallback,
  useState,
 } from 'react'
-import { RiArrowDownSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Authorize from './authorize'
-import Authorized from './authorized'
-import type {
-  Credential,
-  PluginPayload,
-} from './types'
-import { usePluginAuth } from './hooks/use-plugin-auth'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
+import Authorize from './authorize'
+import Authorized from './authorized'
+import { usePluginAuth } from './hooks/use-plugin-auth'

 type PluginAuthInAgentProps = {
  pluginPayload: PluginPayload
@ -80,16 +80,17 @@ const PluginAuthInAgent = ({
          'w-full',
          isOpen && 'bg-components-button-secondary-bg-hover',
          removed && 'text-text-destructive',
-        )}>
+        )}
+      >
        <Indicator
-          className='mr-2'
+          className="mr-2"
          color={color as any}
        />
        {label}
        {
          unavailable && t('plugin.auth.unavailable')
        }
-        <RiArrowDownSLine className='ml-0.5 h-4 w-4' />
+        <RiArrowDownSLine className="ml-0.5 h-4 w-4" />
      </Button>
    )
  }, [credentialId, credentials, t])
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
@ -1,7 +1,7 @@
-import { memo } from 'react'
 import type { ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
 import { RiAddLine } from '@remixicon/react'
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'

 type PluginAuthInDataSourceNodeProps = {
@ -19,13 +19,13 @@ const PluginAuthInDataSourceNode = ({
    <>
      {
        !isAuthorized && (
-          <div className='px-4 pb-2'>
+          <div className="px-4 pb-2">
            <Button
-              className='w-full'
-              variant='primary'
+              className="w-full"
+              variant="primary"
              onClick={onJumpToDataSourcePage}
            >
-              <RiAddLine className='mr-1 h-4 w-4' />
+              <RiAddLine className="mr-1 h-4 w-4" />
              {t('common.integrations.connect')}
            </Button>
          </div>
--- a/web/app/components/plugins/plugin-auth/plugin-auth.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth.tsx
@ -1,9 +1,9 @@
+import type { PluginPayload } from './types'
 import { memo } from 'react'
+import { cn } from '@/utils/classnames'
 import Authorize from './authorize'
 import Authorized from './authorized'
-import type { PluginPayload } from './types'
 import { usePluginAuth } from './hooks/use-plugin-auth'
-import { cn } from '@/utils/classnames'

 type PluginAuthProps = {
  pluginPayload: PluginPayload