feat: oauth config init

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

@@ -1,5 +1,5 @@
 'use client'
-import React from 'react'
+import React, { useEffect } from 'react'
 import type { FC } from 'react'
 import DetailHeader from './detail-header'
 import EndpointList from './endpoint-list'
@@ -11,6 +11,7 @@ import { TriggerEventsList } from './trigger-events-list'
 import Drawer from '@/app/components/base/drawer'
 import { type PluginDetail, PluginType } from '@/app/components/plugins/types'
 import cn from '@/utils/classnames'
+import { usePluginStore } from './store'
 
 type Props = {
   detail?: PluginDetail
@@ -28,6 +29,12 @@ const PluginDetailPanel: FC<Props> = ({
       onHide()
     onUpdate()
   }
+  const { setDetail } = usePluginStore()
+
+  useEffect(() => {
+    if (detail)
+      setDetail(detail)
+  }, [detail])
 
   if (!detail)
     return null
@@ -52,8 +59,8 @@ const PluginDetailPanel: FC<Props> = ({
           <div className='grow overflow-y-auto'>
             {detail.declaration.category === PluginType.trigger && (
               <>
-                <SubscriptionList detail={detail} />
-                <TriggerEventsList detail={detail} />
+                <SubscriptionList />
+                <TriggerEventsList />
               </>
             )}
             {!!detail.declaration.tool && <ActionList detail={detail} />}

web/app/components/plugins/plugin-detail-panel/store.ts

@@ -0,0 +1,12 @@
+import { create } from 'zustand'
+import type { PluginDetail } from '../types'
+
+type Shape = {
+  detail: PluginDetail | undefined
+  setDetail: (detail: PluginDetail) => void
+}
+
+export const usePluginStore = create<Shape>(set => ({
+  detail: undefined,
+  setDetail: (detail: PluginDetail) => set({ detail }),
+}))

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

@@ -17,11 +17,10 @@ import {
   useCreateTriggerSubscriptionBuilder,
   useVerifyTriggerSubscriptionBuilder,
 } from '@/service/use-triggers'
-import type { PluginDetail } from '@/app/components/plugins/types'
 import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
+import { usePluginStore } from '../../store'
 
 type Props = {
-  pluginDetail: PluginDetail
   onClose: () => void
   onSuccess: () => void
 }
@@ -31,9 +30,9 @@ enum ApiKeyStep {
   Configuration = 'configuration',
 }
 
-export const ApiKeyCreateModal = ({ pluginDetail, onClose, onSuccess }: Props) => {
+export const ApiKeyCreateModal = ({ onClose, onSuccess }: Props) => {
   const { t } = useTranslation()
-
+  const detail = usePluginStore(state => state.detail)
   // State
   const [currentStep, setCurrentStep] = useState<ApiKeyStep>(ApiKeyStep.Verify)
   const [subscriptionName, setSubscriptionName] = useState('')
@@ -50,9 +49,9 @@ export const ApiKeyCreateModal = ({ pluginDetail, onClose, onSuccess }: Props) =
   const { mutate: buildSubscription, isPending: isBuilding } = useBuildTriggerSubscription()
 
   // Get provider name and schemas
-  const providerName = `${pluginDetail.plugin_id}/${pluginDetail.declaration.name}`
-  const credentialsSchema = pluginDetail.declaration.trigger?.credentials_schema || []
-  const parametersSchema = pluginDetail.declaration.trigger?.subscription_schema?.parameters_schema || []
+  const providerName = `${detail?.plugin_id}/${detail?.declaration.name}`
+  const credentialsSchema = detail?.declaration.trigger?.credentials_schema || []
+  const parametersSchema = detail?.declaration.trigger?.subscription_schema?.parameters_schema || []
 
   const handleVerify = () => {
     const credentialsFormValues = credentialsFormRef.current?.getFormValues({}) || { values: {}, isCheckValidated: false }

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

@@ -0,0 +1,116 @@
+import { ActionButton } from '@/app/components/base/action-button'
+import Modal from '@/app/components/base/modal'
+import { RiAddLine, RiCloseLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { SupportedCreationMethods } from '../../../types'
+import { useTriggerOAuthConfig, useTriggerProviderInfo } from '@/service/use-triggers'
+import { usePluginStore } from '../../store'
+import { useMemo } from 'react'
+import { Button } from '@/app/components/base/button'
+import { CreateTypeDropdown } from './type-dropdown'
+import { useBoolean } from 'ahooks'
+
+export const CreateModal = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Modal
+      isShow
+      // onClose={onClose}
+      className='!max-w-[520px] p-6'
+      wrapperClassName='!z-[1002]'
+    >
+      <div className='flex items-center justify-between pb-3'>
+        <h3 className='text-lg font-semibold text-text-primary'>
+          {t('pluginTrigger.modal.oauth.title')}
+        </h3>
+        <ActionButton
+        // onClick={onClose}
+        >
+          <RiCloseLine className='h-4 w-4' />
+        </ActionButton>
+      </div>
+    </Modal>
+  )
+}
+
+export enum CreateButtonType {
+  FULL_BUTTON = 'full-button',
+  ICON_BUTTON = 'icon-button',
+}
+
+type Props = {
+  // onClick: (type?: SupportedCreationMethods | typeof DEFAULT_METHOD) => void
+  className?: string
+  buttonType?: CreateButtonType
+}
+
+export const DEFAULT_METHOD = 'default'
+
+export const CreateSubscriptionButton = ({ className, buttonType = CreateButtonType.FULL_BUTTON }: Props) => {
+  const { t } = useTranslation()
+
+  const detail = usePluginStore(state => state.detail)
+  const provider = `${detail?.plugin_id}/${detail?.declaration.name}`
+
+  const { data: providerInfo } = useTriggerProviderInfo(provider, !!detail)
+  const supportedMethods = providerInfo?.supported_creation_methods || []
+  const { data: oauthConfig } = useTriggerOAuthConfig(provider, supportedMethods.includes(SupportedCreationMethods.OAUTH))
+
+  const methodType = supportedMethods.length === 1 ? supportedMethods[0] : DEFAULT_METHOD
+
+  const buttonTextMap = useMemo(() => {
+    return {
+      [SupportedCreationMethods.OAUTH]: t('pluginTrigger.subscription.createButton.oauth'),
+      [SupportedCreationMethods.APIKEY]: t('pluginTrigger.subscription.createButton.apiKey'),
+      [SupportedCreationMethods.MANUAL]: t('pluginTrigger.subscription.createButton.manual'),
+      [DEFAULT_METHOD]: t('pluginTrigger.subscription.empty.button'),
+    }
+  }, [t])
+
+  const [isShowCreateDropdown, {
+    setTrue: showCreateDropdown,
+    setFalse: hideCreateDropdown,
+  }] = useBoolean(false)
+
+  const onChooseCreateType = (type: SupportedCreationMethods) => {
+    // setSelectedCreateType(type)
+    hideCreateDropdown()
+    // showCreateModal()
+  }
+
+  const onClickCreate = () => {
+    if (methodType === DEFAULT_METHOD) {
+      showCreateDropdown()
+      return
+    }
+    onChooseCreateType(methodType)
+  }
+
+  if (!supportedMethods.length)
+    return null
+
+  return <div className='relative'>
+    {
+      buttonType === CreateButtonType.FULL_BUTTON ? (
+        <Button
+          variant='primary'
+          size='medium'
+          className={className}
+          onClick={onClickCreate}
+        >
+          <RiAddLine className='mr-2 h-4 w-4' />
+          {buttonTextMap[methodType]}
+        </Button>
+      ) : <ActionButton onClick={onClickCreate}>
+        <RiAddLine className='h-4 w-4' />
+      </ActionButton>
+    }
+    {isShowCreateDropdown && <CreateTypeDropdown
+      onSelect={onChooseCreateType}
+      onClose={hideCreateDropdown}
+      supportedMethods={supportedMethods}
+      oauthConfig={oauthConfig}
+    />}
+  </div>
+}

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

@@ -14,23 +14,23 @@ import {
   useCreateTriggerSubscriptionBuilder,
   useTriggerSubscriptionBuilderLogs,
 } from '@/service/use-triggers'
-import type { PluginDetail } 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 { BaseForm } from '@/app/components/base/form/components/base'
 import ActionButton from '@/app/components/base/action-button'
 import { CopyFeedbackNew } from '@/app/components/base/copy-feedback'
 import type { FormRefObject } from '@/app/components/base/form/types'
-import LogViewer from './log-viewer'
+import LogViewer from '../log-viewer'
+import { usePluginStore } from '../../store'
 
 type Props = {
-  pluginDetail: PluginDetail
   onClose: () => void
   onSuccess: () => void
 }
 
-export const ManualCreateModal = ({ pluginDetail, onClose, onSuccess }: Props) => {
+export const ManualCreateModal = ({ onClose, onSuccess }: Props) => {
   const { t } = useTranslation()
+  const detail = usePluginStore(state => state.detail)
 
   const [subscriptionName, setSubscriptionName] = useState('')
   const [subscriptionBuilder, setSubscriptionBuilder] = useState<TriggerSubscriptionBuilder | undefined>()
@@ -38,8 +38,8 @@ export const ManualCreateModal = ({ pluginDetail, onClose, onSuccess }: Props) =
   const { mutate: createBuilder /* isPending: isCreatingBuilder */ } = useCreateTriggerSubscriptionBuilder()
   const { mutate: buildSubscription, isPending: isBuilding } = useBuildTriggerSubscription()
 
-  const providerName = `${pluginDetail.plugin_id}/${pluginDetail.declaration.name}`
-  const propertiesSchema = pluginDetail.declaration.trigger.subscription_schema.properties_schema || []
+  const providerName = `${detail?.plugin_id}/${detail?.declaration.name}`
+  const propertiesSchema = detail?.declaration.trigger.subscription_schema.properties_schema || []
   const propertiesFormRef = React.useRef<FormRefObject>(null)
 
   const { data: logData } = useTriggerSubscriptionBuilderLogs(
@@ -193,7 +193,7 @@ export const ManualCreateModal = ({ pluginDetail, onClose, onSuccess }: Props) =
               <RiLoader2Line className='h-full w-full animate-spin' />
             </div>
             <div className='system-xs-regular text-text-tertiary'>
-              Awaiting request from {pluginDetail.declaration.name}...
+              Awaiting request from {detail?.declaration.name}...
             </div>
           </div>
 

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

@@ -17,12 +17,11 @@ import {
   useInitiateTriggerOAuth,
   useVerifyTriggerSubscriptionBuilder,
 } from '@/service/use-triggers'
-import type { PluginDetail } from '@/app/components/plugins/types'
 import ActionButton from '@/app/components/base/action-button'
 import type { TriggerOAuthConfig, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import { usePluginStore } from '../../store'
 
 type Props = {
-  pluginDetail: PluginDetail
   oauthConfig?: TriggerOAuthConfig
   onClose: () => void
   onSuccess: () => void
@@ -39,9 +38,9 @@ enum AuthorizationStatusEnum {
   Failed = 'failed',
 }
 
-export const OAuthCreateModal = ({ pluginDetail, oauthConfig, onClose, onSuccess }: Props) => {
+export const OAuthCreateModal = ({ oauthConfig, onClose, onSuccess }: Props) => {
   const { t } = useTranslation()
-
+  const detail = usePluginStore(state => state.detail)
   const [currentStep, setCurrentStep] = useState<OAuthStepEnum>(OAuthStepEnum.Setup)
   const [subscriptionName, setSubscriptionName] = useState('')
   const [authorizationUrl, setAuthorizationUrl] = useState('')
@@ -51,9 +50,9 @@ export const OAuthCreateModal = ({ pluginDetail, oauthConfig, onClose, onSuccess
   const clientFormRef = React.useRef<FormRefObject>(null)
   const parametersFormRef = React.useRef<FormRefObject>(null)
 
-  const providerName = `${pluginDetail.plugin_id}/${pluginDetail.declaration.name}`
-  const clientSchema = pluginDetail.declaration.trigger?.oauth_schema?.client_schema || []
-  const parametersSchema = pluginDetail.declaration.trigger?.subscription_schema?.parameters_schema || []
+  const providerName = `${detail?.plugin_id}/${detail?.declaration.name}`
+  const clientSchema = detail?.declaration.trigger?.oauth_schema?.client_schema || []
+  const parametersSchema = detail?.declaration.trigger?.subscription_schema?.parameters_schema || []
 
   const { mutate: initiateOAuth } = useInitiateTriggerOAuth()
   const { mutate: verifyBuilder } = useVerifyTriggerSubscriptionBuilder()

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

@@ -5,7 +5,7 @@ import { RiEqualizer2Line } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import { ActionButton } from '@/app/components/base/action-button'
-import { SupportedCreationMethods } from '../../types'
+import { SupportedCreationMethods } from '../../../types'
 import type { TriggerOAuthConfig } from '@/app/components/workflow/block-selector/types'
 
 type Props = {

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

@@ -4,22 +4,20 @@ import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import SubscriptionCard from './subscription-card'
 import { SubscriptionCreateModal } from './subscription-create-modal'
-import { CreateTypeDropdown } from './create-type-dropdown'
+import { CreateTypeDropdown } from './create/create-type-dropdown'
 import CreateSubscriptionButton, { ButtonType, DEFAULT_METHOD } from './create-subscription-button'
 import Tooltip from '@/app/components/base/tooltip'
 import { useTriggerOAuthConfig, useTriggerProviderInfo, useTriggerSubscriptions } from '@/service/use-triggers'
-import type { PluginDetail } from '@/app/components/plugins/types'
 import { SupportedCreationMethods } from '@/app/components/plugins/types'
 import cn from '@/utils/classnames'
+import { usePluginStore } from '../store'
 
-type Props = {
-  detail: PluginDetail
-}
-
-export const SubscriptionList = ({ detail }: Props) => {
+export const SubscriptionList = () => {
   const { t } = useTranslation()
-  const showTopBorder = detail.declaration.tool || detail.declaration.endpoint
-  const provider = `${detail.plugin_id}/${detail.declaration.name}`
+  const detail = usePluginStore(state => state.detail)
+
+  const showTopBorder = detail?.declaration.tool || detail?.declaration.endpoint
+  const provider = `${detail?.plugin_id}/${detail?.declaration.name}`
 
   const { data: subscriptions, isLoading, refetch } = useTriggerSubscriptions(provider)
   const { data: providerInfo } = useTriggerProviderInfo(provider)
@@ -133,7 +131,6 @@ export const SubscriptionList = ({ detail }: Props) => {
         <SubscriptionCreateModal
           type={selectedCreateType}
           oauthConfig={oauthConfig}
-          pluginDetail={detail}
           onClose={handleModalClose}
           onSuccess={handleRefreshList}
         />

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

@@ -1,31 +1,24 @@
 'use client'
 import React from 'react'
-// import { useTranslation } from 'react-i18next'
-// import Modal from '@/app/components/base/modal'
-import { ManualCreateModal } from './manual-create-modal'
-import { ApiKeyCreateModal } from './api-key-create-modal'
-import { OAuthCreateModal } from './oauth-create-modal'
-import type { PluginDetail } from '@/app/components/plugins/types'
+import { ManualCreateModal } from './create/manual-create-modal'
+import { ApiKeyCreateModal } from './create/api-key-create-modal'
+import { OAuthCreateModal } from './create/oauth-create-modal'
 import { SupportedCreationMethods } from '@/app/components/plugins/types'
 import type { TriggerOAuthConfig } from '@/app/components/workflow/block-selector/types'
 
 type Props = {
   type: SupportedCreationMethods
-  pluginDetail: PluginDetail
   oauthConfig?: TriggerOAuthConfig
   onClose: () => void
   onSuccess: () => void
 }
 
-export const SubscriptionCreateModal = ({ type, pluginDetail, oauthConfig, onClose, onSuccess }: Props) => {
-  // const { t } = useTranslation()
-
+export const SubscriptionCreateModal = ({ type, oauthConfig, onClose, onSuccess }: Props) => {
   const renderModalContent = () => {
     switch (type) {
       case SupportedCreationMethods.MANUAL:
         return (
           <ManualCreateModal
-            pluginDetail={pluginDetail}
             onClose={onClose}
             onSuccess={onSuccess}
           />
@@ -33,7 +26,6 @@ export const SubscriptionCreateModal = ({ type, pluginDetail, oauthConfig, onClo
       case SupportedCreationMethods.APIKEY:
         return (
           <ApiKeyCreateModal
-            pluginDetail={pluginDetail}
             onClose={onClose}
             onSuccess={onSuccess}
           />
@@ -41,7 +33,6 @@ export const SubscriptionCreateModal = ({ type, pluginDetail, oauthConfig, onClo
       case SupportedCreationMethods.OAUTH:
         return (
           <OAuthCreateModal
-            pluginDetail={pluginDetail}
             oauthConfig={oauthConfig}
             onClose={onClose}
             onSuccess={onSuccess}