Support OAuth Integration for Plugin Tools (#22550)

Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -59,6 +59,12 @@ import { useLogs } from '@/app/components/workflow/run/hooks'
 import PanelWrap from '../before-run-form/panel-wrap'
 import SpecialResultPanel from '@/app/components/workflow/run/special-result-panel'
 import { Stop } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import {
+  AuthorizedInNode,
+  PluginAuth,
+} from '@/app/components/plugins/plugin-auth'
+import { AuthCategory } from '@/app/components/plugins/plugin-auth'
+import { canFindTool } from '@/utils'
 
 type BasePanelProps = {
   children: ReactNode
@@ -221,6 +227,22 @@ const BasePanel: FC<BasePanelProps> = ({
     return {}
   })()
 
+  const buildInTools = useStore(s => s.buildInTools)
+  const currCollection = useMemo(() => {
+    return buildInTools.find(item => canFindTool(item.id, data.provider_id))
+  }, [buildInTools, data.provider_id])
+  const showPluginAuth = useMemo(() => {
+    return data.type === BlockEnum.Tool && currCollection?.allow_delete
+  }, [currCollection, data.type])
+  const handleAuthorizationItemClick = useCallback((credential_id: string) => {
+    handleNodeDataUpdateWithSyncDraft({
+      id,
+      data: {
+        credential_id,
+      },
+    })
+  }, [handleNodeDataUpdateWithSyncDraft, id])
+
   if(logParams.showSpecialResultPanel) {
     return (
     <div className={cn(
@@ -353,12 +375,42 @@ const BasePanel: FC<BasePanelProps> = ({
               onChange={handleDescriptionChange}
             />
           </div>
-          <div className='pl-4'>
-            <Tab
-              value={tabType}
-              onChange={setTabType}
-            />
-          </div>
+          {
+            showPluginAuth && (
+              <PluginAuth
+                className='px-4 pb-2'
+                pluginPayload={{
+                  provider: currCollection?.name || '',
+                  category: AuthCategory.tool,
+                }}
+              >
+                <div className='flex items-center justify-between pl-4 pr-3'>
+                  <Tab
+                    value={tabType}
+                    onChange={setTabType}
+                  />
+                  <AuthorizedInNode
+                    pluginPayload={{
+                      provider: currCollection?.name || '',
+                      category: AuthCategory.tool,
+                    }}
+                    onAuthorizationItemClick={handleAuthorizationItemClick}
+                    credentialId={data.credential_id}
+                  />
+                </div>
+              </PluginAuth>
+            )
+          }
+          {
+            !showPluginAuth && (
+              <div className='flex items-center justify-between pl-4 pr-3'>
+                <Tab
+                  value={tabType}
+                  onChange={setTabType}
+                />
+              </div>
+            )
+          }
           <Split />
         </div>
 

web/app/components/workflow/nodes/tool/panel.tsx

@@ -5,10 +5,8 @@ import Split from '../_base/components/split'
 import type { ToolNodeType } from './types'
 import useConfig from './use-config'
 import ToolForm from './components/tool-form'
-import Button from '@/app/components/base/button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import type { NodePanelProps } from '@/app/components/workflow/types'
-import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
 import Loading from '@/app/components/base/loading'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import StructureOutputItem from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
@@ -32,10 +30,6 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
     setToolSettingValue,
     currCollection,
     isShowAuthBtn,
-    showSetAuth,
-    showSetAuthModal,
-    hideSetAuthModal,
-    handleSaveAuth,
     isLoading,
     outputSchema,
     hasObjectOutput,
@@ -52,19 +46,6 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
 
   return (
     <div className='pt-2'>
-      {!readOnly && isShowAuthBtn && (
-        <>
-          <div className='px-4'>
-            <Button
-              variant='primary'
-              className='w-full'
-              onClick={showSetAuthModal}
-            >
-              {t(`${i18nPrefix}.authorize`)}
-            </Button>
-          </div>
-        </>
-      )}
       {!isShowAuthBtn && (
         <div className='relative'>
           {toolInputVarSchema.length > 0 && (
@@ -109,15 +90,6 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
         </div>
       )}
 
-      {showSetAuth && (
-        <ConfigCredential
-          collection={currCollection!}
-          onCancel={hideSetAuthModal}
-          onSaved={handleSaveAuth}
-          isHideRemoveBtn
-        />
-      )}
-
       <div>
         <OutputVars>
           <>