datasource change authed page

web/app/components/header/account-setting/data-source-page-new/card.tsx

@@ -1,6 +1,7 @@
 import {
   memo,
   useCallback,
+  useRef,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Item from './item'
@@ -17,6 +18,8 @@ import {
 } from '@/app/components/plugins/plugin-auth'
 import { useDataSourceAuthUpdate } from './hooks'
 import Confirm from '@/app/components/base/confirm'
+import { useGetDataSourceOAuthUrl } from '@/service/use-datasource'
+import { openOAuthPopup } from '@/hooks/use-oauth'
 
 type CardProps = {
   item: DataSourceAuth
@@ -55,6 +58,20 @@ const Card = ({
     closeConfirm,
     pendingOperationCredentialId,
   } = usePluginAuthAction(pluginPayload, handleAuthUpdate)
+  const changeCredentialIdRef = useRef<string | undefined>(undefined)
+  const {
+    mutateAsync: getPluginOAuthUrl,
+  } = useGetDataSourceOAuthUrl(pluginPayload.provider)
+  const handleOAuth = useCallback(async () => {
+    const { authorization_url } = await getPluginOAuthUrl(changeCredentialIdRef.current)
+
+    if (authorization_url) {
+      openOAuthPopup(
+        authorization_url,
+        handleAuthUpdate,
+      )
+    }
+  }, [getPluginOAuthUrl, handleAuthUpdate])
   const handleAction = useCallback((
     action: string,
     credentialItem: DataSourceCredential,
@@ -78,6 +95,11 @@ const Card = ({
 
     if (action === 'rename')
       handleRename(renamePayload as any)
+
+    if (action === 'change') {
+      changeCredentialIdRef.current = credentialItem.id
+      handleOAuth()
+    }
   }, [
     openConfirm,
     handleEdit,

web/service/use-datasource.ts

@@ -1,4 +1,7 @@
-import { useQuery } from '@tanstack/react-query'
+import {
+  useMutation,
+  useQuery,
+} from '@tanstack/react-query'
 import { get } from './base'
 import { useInvalid } from './use-base'
 import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
@@ -31,3 +34,18 @@ export const useInvalidDefaultDataSourceListAuth = (
 ) => {
   return useInvalid([NAME_SPACE, 'default-list'])
 }
+export const useGetDataSourceOAuthUrl = (
+  provider: string,
+) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'oauth-url', provider],
+    mutationFn: (credentialId?: string) => {
+      return get<
+      {
+        authorization_url: string
+        state: string
+        context_id: string
+      }>(`/oauth/plugin/${provider}/datasource/get-authorization-url?credential_id=${credentialId}`)
+    },
+  })
+}