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

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>

web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx

@@ -1,15 +1,19 @@
 'use client'
+import type { FormRefObject } from '@/app/components/base/form/types'
+import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import type { BuildTriggerSubscriptionPayload } from '@/service/use-triggers'
+import { RiLoader2Line } from '@remixicon/react'
+import { debounce } from 'lodash-es'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 // import { CopyFeedbackNew } from '@/app/components/base/copy-feedback'
 import { EncryptedBottom } from '@/app/components/base/encrypted-bottom'
 import { BaseForm } from '@/app/components/base/form/components/base'
-import type { FormRefObject } from '@/app/components/base/form/types'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import Modal from '@/app/components/base/modal/modal'
 import Toast from '@/app/components/base/toast'
 import { SupportedCreationMethods } from '@/app/components/plugins/types'
-import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
 import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
-import type { BuildTriggerSubscriptionPayload } from '@/service/use-triggers'
 import {
   useBuildTriggerSubscription,
   useCreateTriggerSubscriptionBuilder,
@@ -19,12 +23,8 @@ import {
 } from '@/service/use-triggers'
 import { parsePluginErrorMessage } from '@/utils/error-parser'
 import { isPrivateOrLocalAddress } from '@/utils/urlValidation'
-import { RiLoader2Line } from '@remixicon/react'
-import { debounce } from 'lodash-es'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import LogViewer from '../log-viewer'
 import { usePluginStore } from '../../store'
+import LogViewer from '../log-viewer'
 import { useSubscriptionList } from '../use-subscription-list'
 
 type Props = {
@@ -68,24 +68,29 @@ const normalizeFormType = (type: FormTypeEnum | string): FormTypeEnum => {
 }
 
 const StatusStep = ({ isActive, text }: { isActive: boolean, text: string }) => {
-  return <div className={`system-2xs-semibold-uppercase flex items-center gap-1 ${isActive
-    ? 'text-state-accent-solid'
-    : 'text-text-tertiary'}`}>
-    {/* Active indicator dot */}
-    {isActive && (
-      <div className='h-1 w-1 rounded-full bg-state-accent-solid'></div>
-    )}
-    {text}
-  </div>
+  return (
+    <div className={`system-2xs-semibold-uppercase flex items-center gap-1 ${isActive
+      ? 'text-state-accent-solid'
+      : 'text-text-tertiary'}`}
+    >
+      {/* Active indicator dot */}
+      {isActive && (
+        <div className="h-1 w-1 rounded-full bg-state-accent-solid"></div>
+      )}
+      {text}
+    </div>
+  )
 }
 
 const MultiSteps = ({ currentStep }: { currentStep: ApiKeyStep }) => {
   const { t } = useTranslation()
-  return <div className='mb-6 flex w-1/3 items-center gap-2'>
-    <StatusStep isActive={currentStep === ApiKeyStep.Verify} text={t('pluginTrigger.modal.steps.verify')} />
-    <div className='h-px w-3 shrink-0 bg-divider-deep'></div>
-    <StatusStep isActive={currentStep === ApiKeyStep.Configuration} text={t('pluginTrigger.modal.steps.configuration')} />
-  </div>
+  return (
+    <div className="mb-6 flex w-1/3 items-center gap-2">
+      <StatusStep isActive={currentStep === ApiKeyStep.Verify} text={t('pluginTrigger.modal.steps.verify')} />
+      <div className="h-px w-3 shrink-0 bg-divider-deep"></div>
+      <StatusStep isActive={currentStep === ApiKeyStep.Configuration} text={t('pluginTrigger.modal.steps.configuration')} />
+    </div>
+  )
 }
 
 export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
@@ -336,114 +341,120 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
       disabled={isVerifyingCredentials || isBuilding}
       bottomSlot={currentStep === ApiKeyStep.Verify ? <EncryptedBottom /> : null}
       size={createType === SupportedCreationMethods.MANUAL ? 'md' : 'sm'}
-      containerClassName='min-h-[360px]'
+      containerClassName="min-h-[360px]"
       clickOutsideNotClose
     >
       {createType === SupportedCreationMethods.APIKEY && <MultiSteps currentStep={currentStep} />}
       {currentStep === ApiKeyStep.Verify && (
         <>
           {apiKeyCredentialsSchema.length > 0 && (
-            <div className='mb-4'>
+            <div className="mb-4">
               <BaseForm
                 formSchemas={apiKeyCredentialsSchema}
                 ref={apiKeyCredentialsFormRef}
-                labelClassName='system-sm-medium mb-2 flex items-center gap-1 text-text-primary'
+                labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
                 preventDefaultSubmit={true}
-                formClassName='space-y-4'
+                formClassName="space-y-4"
                 onChange={handleApiKeyCredentialsChange}
               />
             </div>
           )}
         </>
       )}
-      {currentStep === ApiKeyStep.Configuration && <div className='max-h-[70vh]'>
-        <BaseForm
-          formSchemas={[
-            {
-              name: 'subscription_name',
-              label: t('pluginTrigger.modal.form.subscriptionName.label'),
-              placeholder: t('pluginTrigger.modal.form.subscriptionName.placeholder'),
-              type: FormTypeEnum.textInput,
-              required: true,
-            },
-            {
-              name: 'callback_url',
-              label: t('pluginTrigger.modal.form.callbackUrl.label'),
-              placeholder: t('pluginTrigger.modal.form.callbackUrl.placeholder'),
-              type: FormTypeEnum.textInput,
-              required: false,
-              default: subscriptionBuilder?.endpoint || '',
-              disabled: true,
-              tooltip: t('pluginTrigger.modal.form.callbackUrl.tooltip'),
-              showCopy: true,
-            },
-          ]}
-          ref={subscriptionFormRef}
-          labelClassName='system-sm-medium mb-2 flex items-center gap-1 text-text-primary'
-          formClassName='space-y-4 mb-4'
-        />
-        {/* <div className='system-xs-regular mb-6 mt-[-1rem] text-text-tertiary'>
+      {currentStep === ApiKeyStep.Configuration && (
+        <div className="max-h-[70vh]">
+          <BaseForm
+            formSchemas={[
+              {
+                name: 'subscription_name',
+                label: t('pluginTrigger.modal.form.subscriptionName.label'),
+                placeholder: t('pluginTrigger.modal.form.subscriptionName.placeholder'),
+                type: FormTypeEnum.textInput,
+                required: true,
+              },
+              {
+                name: 'callback_url',
+                label: t('pluginTrigger.modal.form.callbackUrl.label'),
+                placeholder: t('pluginTrigger.modal.form.callbackUrl.placeholder'),
+                type: FormTypeEnum.textInput,
+                required: false,
+                default: subscriptionBuilder?.endpoint || '',
+                disabled: true,
+                tooltip: t('pluginTrigger.modal.form.callbackUrl.tooltip'),
+                showCopy: true,
+              },
+            ]}
+            ref={subscriptionFormRef}
+            labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+            formClassName="space-y-4 mb-4"
+          />
+          {/* <div className='system-xs-regular mb-6 mt-[-1rem] text-text-tertiary'>
           {t('pluginTrigger.modal.form.callbackUrl.description')}
         </div> */}
-        {createType !== SupportedCreationMethods.MANUAL && autoCommonParametersSchema.length > 0 && (
-          <BaseForm
-            formSchemas={autoCommonParametersSchema.map((schema) => {
-              const normalizedType = normalizeFormType(schema.type as FormTypeEnum | string)
-              return {
-                ...schema,
-                tooltip: schema.description,
-                type: normalizedType,
-                dynamicSelectParams: normalizedType === FormTypeEnum.dynamicSelect ? {
-                  plugin_id: detail?.plugin_id || '',
-                  provider: detail?.provider || '',
-                  action: 'provider',
-                  parameter: schema.name,
-                  credential_id: subscriptionBuilder?.id || '',
-                } : undefined,
-                fieldClassName: schema.type === FormTypeEnum.boolean ? 'flex items-center justify-between' : undefined,
-                labelClassName: schema.type === FormTypeEnum.boolean ? 'mb-0' : undefined,
-              }
-            })}
-            ref={autoCommonParametersFormRef}
-            labelClassName='system-sm-medium mb-2 flex items-center gap-1 text-text-primary'
-            formClassName='space-y-4'
-          />
-        )}
-        {createType === SupportedCreationMethods.MANUAL && <>
-          {manualPropertiesSchema.length > 0 && (
-            <div className='mb-6'>
-              <BaseForm
-                formSchemas={manualPropertiesSchema.map(schema => ({
+          {createType !== SupportedCreationMethods.MANUAL && autoCommonParametersSchema.length > 0 && (
+            <BaseForm
+              formSchemas={autoCommonParametersSchema.map((schema) => {
+                const normalizedType = normalizeFormType(schema.type as FormTypeEnum | string)
+                return {
                   ...schema,
                   tooltip: schema.description,
-                }))}
-                ref={manualPropertiesFormRef}
-                labelClassName='system-sm-medium mb-2 flex items-center gap-1 text-text-primary'
-                formClassName='space-y-4'
-                onChange={handleManualPropertiesChange}
-              />
-            </div>
+                  type: normalizedType,
+                  dynamicSelectParams: normalizedType === FormTypeEnum.dynamicSelect
+                    ? {
+                        plugin_id: detail?.plugin_id || '',
+                        provider: detail?.provider || '',
+                        action: 'provider',
+                        parameter: schema.name,
+                        credential_id: subscriptionBuilder?.id || '',
+                      }
+                    : undefined,
+                  fieldClassName: schema.type === FormTypeEnum.boolean ? 'flex items-center justify-between' : undefined,
+                  labelClassName: schema.type === FormTypeEnum.boolean ? 'mb-0' : undefined,
+                }
+              })}
+              ref={autoCommonParametersFormRef}
+              labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+              formClassName="space-y-4"
+            />
           )}
-          <div className='mb-6'>
-            <div className='mb-3 flex items-center gap-2'>
-              <div className='system-xs-medium-uppercase text-text-tertiary'>
-                {t('pluginTrigger.modal.manual.logs.title')}
-              </div>
-              <div className='h-px flex-1 bg-gradient-to-r from-divider-regular to-transparent' />
-            </div>
+          {createType === SupportedCreationMethods.MANUAL && (
+            <>
+              {manualPropertiesSchema.length > 0 && (
+                <div className="mb-6">
+                  <BaseForm
+                    formSchemas={manualPropertiesSchema.map(schema => ({
+                      ...schema,
+                      tooltip: schema.description,
+                    }))}
+                    ref={manualPropertiesFormRef}
+                    labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+                    formClassName="space-y-4"
+                    onChange={handleManualPropertiesChange}
+                  />
+                </div>
+              )}
+              <div className="mb-6">
+                <div className="mb-3 flex items-center gap-2">
+                  <div className="system-xs-medium-uppercase text-text-tertiary">
+                    {t('pluginTrigger.modal.manual.logs.title')}
+                  </div>
+                  <div className="h-px flex-1 bg-gradient-to-r from-divider-regular to-transparent" />
+                </div>
 
-            <div className='mb-1 flex items-center justify-center gap-1 rounded-lg bg-background-section p-3'>
-              <div className='h-3.5 w-3.5'>
-                <RiLoader2Line className='h-full w-full animate-spin' />
+                <div className="mb-1 flex items-center justify-center gap-1 rounded-lg bg-background-section p-3">
+                  <div className="h-3.5 w-3.5">
+                    <RiLoader2Line className="h-full w-full animate-spin" />
+                  </div>
+                  <div className="system-xs-regular text-text-tertiary">
+                    {t('pluginTrigger.modal.manual.logs.loading', { pluginName: detail?.name || '' })}
+                  </div>
+                </div>
+                <LogViewer logs={logData?.logs || []} />
               </div>
-              <div className='system-xs-regular text-text-tertiary'>
-                {t('pluginTrigger.modal.manual.logs.loading', { pluginName: detail?.name || '' })}
-              </div>
-            </div>
-            <LogViewer logs={logData?.logs || []} />
-          </div>
-        </>}
-      </div>}
+            </>
+          )}
+        </div>
+      )}
     </Modal>
   )
 }

web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx

@@ -1,18 +1,18 @@
-import { ActionButton, ActionButtonState } from '@/app/components/base/action-button'
-import Badge from '@/app/components/base/badge'
-import { Button } from '@/app/components/base/button'
 import type { Option } from '@/app/components/base/select/custom'
-import CustomSelect from '@/app/components/base/select/custom'
-import Toast from '@/app/components/base/toast'
-import Tooltip from '@/app/components/base/tooltip'
 import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
-import { openOAuthPopup } from '@/hooks/use-oauth'
-import { useInitiateTriggerOAuth, useTriggerOAuthConfig, useTriggerProviderInfo } from '@/service/use-triggers'
-import { cn } from '@/utils/classnames'
 import { RiAddLine, RiEqualizer2Line } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { ActionButton, ActionButtonState } from '@/app/components/base/action-button'
+import Badge from '@/app/components/base/badge'
+import { Button } from '@/app/components/base/button'
+import CustomSelect from '@/app/components/base/select/custom'
+import Toast from '@/app/components/base/toast'
+import Tooltip from '@/app/components/base/tooltip'
+import { openOAuthPopup } from '@/hooks/use-oauth'
+import { useInitiateTriggerOAuth, useTriggerOAuthConfig, useTriggerProviderInfo } from '@/service/use-triggers'
+import { cn } from '@/utils/classnames'
 import { SupportedCreationMethods } from '../../../types'
 import { usePluginStore } from '../../store'
 import { useSubscriptionList } from '../use-subscription-list'
@@ -76,14 +76,20 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
       {
         value: SupportedCreationMethods.OAUTH,
         label: t('pluginTrigger.subscription.addType.options.oauth.title'),
-        tag: !showCustomBadge ? null : <Badge className='ml-1 mr-0.5'>
-          {t('plugin.auth.custom')}
-        </Badge>,
-        extra: <Tooltip popupContent={t('pluginTrigger.subscription.addType.options.oauth.clientSettings')}>
-          <ActionButton onClick={onClickClientSettings}>
-            <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
-          </ActionButton>
-        </Tooltip>,
+        tag: !showCustomBadge
+          ? null
+          : (
+              <Badge className="ml-1 mr-0.5">
+                {t('plugin.auth.custom')}
+              </Badge>
+            ),
+        extra: (
+          <Tooltip popupContent={t('pluginTrigger.subscription.addType.options.oauth.clientSettings')}>
+            <ActionButton onClick={onClickClientSettings}>
+              <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
+            </ActionButton>
+          </Tooltip>
+        ),
         show: supportedMethods.includes(SupportedCreationMethods.OAUTH),
       },
       {
@@ -149,94 +155,102 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
   if (!supportedMethods.length)
     return null
 
-  return <>
-    <CustomSelect<Option & { show: boolean; extra?: React.ReactNode; tag?: React.ReactNode }>
-      options={allOptions.filter(option => option.show)}
-      value={methodType}
-      onChange={value => onChooseCreateType(value as any)}
-      containerProps={{
-        open: (methodType === DEFAULT_METHOD || (methodType === SupportedCreationMethods.OAUTH && supportedMethods.length === 1)) ? undefined : false,
-        placement: 'bottom-start',
-        offset: 4,
-        triggerPopupSameWidth: buttonType === CreateButtonType.FULL_BUTTON,
-      }}
-      triggerProps={{
-        className: cn('h-8 bg-transparent px-0 hover:bg-transparent', methodType !== DEFAULT_METHOD && supportedMethods.length > 1 && 'pointer-events-none', buttonType === CreateButtonType.FULL_BUTTON && 'grow'),
-      }}
-      popupProps={{
-        wrapperClassName: 'z-[1000]',
-      }}
-      CustomTrigger={() => {
-        return buttonType === CreateButtonType.FULL_BUTTON ? (
-          <Button
-            variant='primary'
-            size='medium'
-            className='flex w-full items-center justify-between px-0'
-            onClick={onClickCreate}
-          >
-            <div className='flex flex-1 items-center justify-center'>
-              <RiAddLine className='mr-2 size-4' />
-              {buttonTextMap[methodType]}
-              {methodType === SupportedCreationMethods.OAUTH && oauthConfig?.custom_enabled && oauthConfig?.custom_configured && <Badge
-                className='ml-1 mr-0.5 border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface'
-              >
-                {t('plugin.auth.custom')}
-              </Badge>}
-            </div>
-            {methodType === SupportedCreationMethods.OAUTH
-              && <div className='ml-auto flex items-center'>
-                <div className="h-4 w-px bg-text-primary-on-surface opacity-15" />
-                <Tooltip popupContent={t('pluginTrigger.subscription.addType.options.oauth.clientSettings')}>
-                  <div onClick={onClickClientSettings} className='p-2'>
-                    <RiEqualizer2Line className='size-4 text-components-button-primary-text' />
-                  </div>
-                </Tooltip>
-              </div>
-            }
-          </Button>
-        ) : (
-          <Tooltip
-            popupContent={subscriptionCount >= MAX_COUNT ? t('pluginTrigger.subscription.maxCount', { num: MAX_COUNT }) : t(`pluginTrigger.subscription.addType.options.${methodType.toLowerCase()}.description`)}
-            disabled={!(supportedMethods?.length === 1 || subscriptionCount >= MAX_COUNT)}>
-            <ActionButton
-              onClick={onClickCreate}
-              className={cn(
-                'float-right',
-                shape === 'circle' && '!rounded-full border-[0.5px] border-components-button-secondary-border-hover bg-components-button-secondary-bg-hover text-components-button-secondary-accent-text shadow-xs hover:border-components-button-secondary-border-disabled hover:bg-components-button-secondary-bg-disabled hover:text-components-button-secondary-accent-text-disabled',
-              )}
-              state={subscriptionCount >= MAX_COUNT ? ActionButtonState.Disabled : ActionButtonState.Default}
-            >
-              <RiAddLine className='size-4' />
-            </ActionButton>
-          </Tooltip>
-        )
-      }}
-      CustomOption={option => (
-        <>
-          <div className='mr-8 flex grow items-center gap-1 truncate px-1'>
-            {option.label}
-            {option.tag}
-          </div>
-          {option.extra}
-        </>
-      )}
-    />
-    {selectedCreateInfo && (
-      <CommonCreateModal
-        createType={selectedCreateInfo.type}
-        builder={selectedCreateInfo.builder}
-        onClose={() => setSelectedCreateInfo(null)}
-      />
-    )}
-    {isShowClientSettingsModal && (
-      <OAuthClientSettingsModal
-        oauthConfig={oauthConfig}
-        onClose={() => {
-          hideClientSettingsModal()
-          refetchOAuthConfig()
+  return (
+    <>
+      <CustomSelect<Option & { show: boolean, extra?: React.ReactNode, tag?: React.ReactNode }>
+        options={allOptions.filter(option => option.show)}
+        value={methodType}
+        onChange={value => onChooseCreateType(value as any)}
+        containerProps={{
+          open: (methodType === DEFAULT_METHOD || (methodType === SupportedCreationMethods.OAUTH && supportedMethods.length === 1)) ? undefined : false,
+          placement: 'bottom-start',
+          offset: 4,
+          triggerPopupSameWidth: buttonType === CreateButtonType.FULL_BUTTON,
         }}
-        showOAuthCreateModal={builder => setSelectedCreateInfo({ type: SupportedCreationMethods.OAUTH, builder })}
+        triggerProps={{
+          className: cn('h-8 bg-transparent px-0 hover:bg-transparent', methodType !== DEFAULT_METHOD && supportedMethods.length > 1 && 'pointer-events-none', buttonType === CreateButtonType.FULL_BUTTON && 'grow'),
+        }}
+        popupProps={{
+          wrapperClassName: 'z-[1000]',
+        }}
+        CustomTrigger={() => {
+          return buttonType === CreateButtonType.FULL_BUTTON
+            ? (
+                <Button
+                  variant="primary"
+                  size="medium"
+                  className="flex w-full items-center justify-between px-0"
+                  onClick={onClickCreate}
+                >
+                  <div className="flex flex-1 items-center justify-center">
+                    <RiAddLine className="mr-2 size-4" />
+                    {buttonTextMap[methodType]}
+                    {methodType === SupportedCreationMethods.OAUTH && oauthConfig?.custom_enabled && oauthConfig?.custom_configured && (
+                      <Badge
+                        className="ml-1 mr-0.5 border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface"
+                      >
+                        {t('plugin.auth.custom')}
+                      </Badge>
+                    )}
+                  </div>
+                  {methodType === SupportedCreationMethods.OAUTH
+                    && (
+                      <div className="ml-auto flex items-center">
+                        <div className="h-4 w-px bg-text-primary-on-surface opacity-15" />
+                        <Tooltip popupContent={t('pluginTrigger.subscription.addType.options.oauth.clientSettings')}>
+                          <div onClick={onClickClientSettings} className="p-2">
+                            <RiEqualizer2Line className="size-4 text-components-button-primary-text" />
+                          </div>
+                        </Tooltip>
+                      </div>
+                    )}
+                </Button>
+              )
+            : (
+                <Tooltip
+                  popupContent={subscriptionCount >= MAX_COUNT ? t('pluginTrigger.subscription.maxCount', { num: MAX_COUNT }) : t(`pluginTrigger.subscription.addType.options.${methodType.toLowerCase()}.description`)}
+                  disabled={!(supportedMethods?.length === 1 || subscriptionCount >= MAX_COUNT)}
+                >
+                  <ActionButton
+                    onClick={onClickCreate}
+                    className={cn(
+                      'float-right',
+                      shape === 'circle' && '!rounded-full border-[0.5px] border-components-button-secondary-border-hover bg-components-button-secondary-bg-hover text-components-button-secondary-accent-text shadow-xs hover:border-components-button-secondary-border-disabled hover:bg-components-button-secondary-bg-disabled hover:text-components-button-secondary-accent-text-disabled',
+                    )}
+                    state={subscriptionCount >= MAX_COUNT ? ActionButtonState.Disabled : ActionButtonState.Default}
+                  >
+                    <RiAddLine className="size-4" />
+                  </ActionButton>
+                </Tooltip>
+              )
+        }}
+        CustomOption={option => (
+          <>
+            <div className="mr-8 flex grow items-center gap-1 truncate px-1">
+              {option.label}
+              {option.tag}
+            </div>
+            {option.extra}
+          </>
+        )}
       />
-    )}
-  </>
+      {selectedCreateInfo && (
+        <CommonCreateModal
+          createType={selectedCreateInfo.type}
+          builder={selectedCreateInfo.builder}
+          onClose={() => setSelectedCreateInfo(null)}
+        />
+      )}
+      {isShowClientSettingsModal && (
+        <OAuthClientSettingsModal
+          oauthConfig={oauthConfig}
+          onClose={() => {
+            hideClientSettingsModal()
+            refetchOAuthConfig()
+          }}
+          showOAuthCreateModal={builder => setSelectedCreateInfo({ type: SupportedCreationMethods.OAUTH, builder })}
+        />
+      )}
+    </>
+  )
 }

web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx

@@ -1,25 +1,25 @@
 'use client'
-import Button from '@/app/components/base/button'
-import { BaseForm } from '@/app/components/base/form/components/base'
 import type { FormRefObject } from '@/app/components/base/form/types'
-import Modal from '@/app/components/base/modal/modal'
-import Toast from '@/app/components/base/toast'
 import type { TriggerOAuthClientParams, TriggerOAuthConfig, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
-import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
-import { openOAuthPopup } from '@/hooks/use-oauth'
 import type { ConfigureTriggerOAuthPayload } from '@/service/use-triggers'
-import {
-  useConfigureTriggerOAuth,
-  useDeleteTriggerOAuth,
-  useInitiateTriggerOAuth,
-  useVerifyTriggerSubscriptionBuilder,
-} from '@/service/use-triggers'
 import {
   RiClipboardLine,
   RiInformation2Fill,
 } from '@remixicon/react'
 import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import { BaseForm } from '@/app/components/base/form/components/base'
+import Modal from '@/app/components/base/modal/modal'
+import Toast from '@/app/components/base/toast'
+import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
+import { openOAuthPopup } from '@/hooks/use-oauth'
+import {
+  useConfigureTriggerOAuth,
+  useDeleteTriggerOAuth,
+  useInitiateTriggerOAuth,
+  useVerifyTriggerSubscriptionBuilder,
+} from '@/service/use-triggers'
 import { usePluginStore } from '../../store'
 
 type Props = {
@@ -178,23 +178,24 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
   return (
     <Modal
       title={t('pluginTrigger.modal.oauth.title')}
-      confirmButtonText={authorizationStatus === AuthorizationStatusEnum.Pending ? t('pluginTrigger.modal.common.authorizing')
+      confirmButtonText={authorizationStatus === AuthorizationStatusEnum.Pending
+        ? t('pluginTrigger.modal.common.authorizing')
         : authorizationStatus === AuthorizationStatusEnum.Success ? t('pluginTrigger.modal.oauth.authorization.waitingJump') : t('plugin.auth.saveAndAuth')}
       cancelButtonText={t('plugin.auth.saveOnly')}
       extraButtonText={t('common.operation.cancel')}
       showExtraButton
       clickOutsideNotClose
-      extraButtonVariant='secondary'
+      extraButtonVariant="secondary"
       onExtraButtonClick={onClose}
       onClose={onClose}
       onCancel={() => handleSave(false)}
       onConfirm={() => handleSave(true)}
       footerSlot={
         oauthConfig?.custom_enabled && oauthConfig?.params && clientType === ClientTypeEnum.Custom && (
-          <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}
             >
@@ -204,41 +205,44 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
         )
       }
     >
-      <div className='system-sm-medium mb-2 text-text-secondary'>{t('pluginTrigger.subscription.addType.options.oauth.clientTitle')}</div>
-      {oauthConfig?.system_configured && <div className='mb-4 flex w-full items-start justify-between gap-2'>
-        {[ClientTypeEnum.Default, ClientTypeEnum.Custom].map(option => (
-          <OptionCard
-            key={option}
-            title={t(`pluginTrigger.subscription.addType.options.oauth.${option}`)}
-            onSelect={() => setClientType(option)}
-            selected={clientType === option}
-            className="flex-1"
-          />
-        ))}
-      </div>}
+      <div className="system-sm-medium mb-2 text-text-secondary">{t('pluginTrigger.subscription.addType.options.oauth.clientTitle')}</div>
+      {oauthConfig?.system_configured && (
+        <div className="mb-4 flex w-full items-start justify-between gap-2">
+          {[ClientTypeEnum.Default, ClientTypeEnum.Custom].map(option => (
+            <OptionCard
+              key={option}
+              title={t(`pluginTrigger.subscription.addType.options.oauth.${option}`)}
+              onSelect={() => setClientType(option)}
+              selected={clientType === option}
+              className="flex-1"
+            />
+          ))}
+        </div>
+      )}
       {clientType === ClientTypeEnum.Custom && oauthConfig?.redirect_uri && (
-        <div className='mb-4 flex items-start gap-3 rounded-xl bg-background-section-burn p-4'>
-          <div className='rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg p-2 shadow-xs shadow-shadow-shadow-3'>
-            <RiInformation2Fill className='h-5 w-5 shrink-0 text-text-accent' />
+        <div className="mb-4 flex items-start gap-3 rounded-xl bg-background-section-burn p-4">
+          <div className="rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg p-2 shadow-xs shadow-shadow-shadow-3">
+            <RiInformation2Fill className="h-5 w-5 shrink-0 text-text-accent" />
           </div>
-          <div className='flex-1 text-text-secondary'>
-            <div className='system-sm-regular whitespace-pre-wrap leading-4'>
+          <div className="flex-1 text-text-secondary">
+            <div className="system-sm-regular whitespace-pre-wrap leading-4">
               {t('pluginTrigger.modal.oauthRedirectInfo')}
             </div>
-            <div className='system-sm-medium my-1.5 break-all leading-4'>
+            <div className="system-sm-medium my-1.5 break-all leading-4">
               {oauthConfig.redirect_uri}
             </div>
             <Button
-              variant='secondary'
-              size='small'
+              variant="secondary"
+              size="small"
               onClick={() => {
                 navigator.clipboard.writeText(oauthConfig.redirect_uri)
                 Toast.notify({
                   type: 'success',
                   message: t('common.actionMsg.copySuccessfully'),
                 })
-              }}>
-              <RiClipboardLine className='mr-1 h-[14px] w-[14px]' />
+              }}
+            >
+              <RiClipboardLine className="mr-1 h-[14px] w-[14px]" />
               {t('common.operation.copy')}
             </Button>
           </div>
@@ -248,10 +252,10 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
         <BaseForm
           formSchemas={oauthClientSchema}
           ref={clientFormRef}
-          labelClassName='system-sm-medium mb-2 block text-text-secondary'
-          formClassName='space-y-4'
+          labelClassName="system-sm-medium mb-2 block text-text-secondary"
+          formClassName="space-y-4"
         />
       )}
-    </Modal >
+    </Modal>
   )
 }