Support OAuth Integration for Plugin Tools (#22550)

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

web/app/components/plugins/plugin-auth/plugin-auth.tsx

@@ -0,0 +1,59 @@
+import { memo } from 'react'
+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
+  children?: React.ReactNode
+  className?: string
+}
+const PluginAuth = ({
+  pluginPayload,
+  children,
+  className,
+}: PluginAuthProps) => {
+  const {
+    isAuthorized,
+    canOAuth,
+    canApiKey,
+    credentials,
+    disabled,
+    invalidPluginCredentialInfo,
+  } = usePluginAuth(pluginPayload, !!pluginPayload.provider)
+
+  return (
+    <div className={cn(!isAuthorized && className)}>
+      {
+        !isAuthorized && (
+          <Authorize
+            pluginPayload={pluginPayload}
+            canOAuth={canOAuth}
+            canApiKey={canApiKey}
+            disabled={disabled}
+            onUpdate={invalidPluginCredentialInfo}
+          />
+        )
+      }
+      {
+        isAuthorized && !children && (
+          <Authorized
+            pluginPayload={pluginPayload}
+            credentials={credentials}
+            canOAuth={canOAuth}
+            canApiKey={canApiKey}
+            disabled={disabled}
+            onUpdate={invalidPluginCredentialInfo}
+          />
+        )
+      }
+      {
+        isAuthorized && children
+      }
+    </div>
+  )
+}
+
+export default memo(PluginAuth)