datasource oauth

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

@@ -1,20 +1,39 @@
 import { memo } from 'react'
 import Item from './item'
 import Configure from './configure'
+import type { DataSourceAuth } from './types'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+
+type CardProps = {
+  item: DataSourceAuth
+}
+const Card = ({
+  item,
+}: CardProps) => {
+  const renderI18nObject = useRenderI18nObject()
+  const {
+    icon,
+    label,
+    author,
+    provider,
+    credentials_list,
+  } = item
 
-const Card = () => {
   return (
     <div className='rounded-xl bg-background-section-burn'>
       <div className='flex items-center p-3 pb-2'>
-        <div className='mr-3 flex h-10 w-10 shrink-0 items-center justify-center'></div>
+        <img
+          src={icon}
+          className='mr-3 flex h-10 w-10 shrink-0 items-center justify-center'
+        />
         <div className='grow'>
           <div className='system-md-semibold text-text-primary'>
-            Notion Data Source
+            {renderI18nObject(label)}
           </div>
           <div className='system-xs-regular flex h-4 items-center text-text-tertiary'>
-            langgenius
+            {author}
             <div className='text-text-quaternary'>/</div>
-            notion-data-source
+            {provider}
           </div>
         </div>
         <Configure />
@@ -23,16 +42,24 @@ const Card = () => {
         Connected workspace
         <div className='ml-3 h-[1px] grow bg-divider-subtle'></div>
       </div>
-      <div className='space-y-1 p-3 pt-2'>
-        <Item />
-        <Item />
-        <Item />
-      </div>
-      <div className='p-3 pt-1'>
-        <div className='system-xs-regular flex h-10 items-center justify-center rounded-[10px] bg-background-section text-text-tertiary'>
-          Please configure authentication
-        </div>
-      </div>
+      {
+        !!credentials_list.length && (
+          <div className='space-y-1 p-3 pt-2'>
+            <Item />
+            <Item />
+            <Item />
+          </div>
+        )
+      }
+      {
+        !credentials_list.length && (
+          <div className='p-3 pt-1'>
+            <div className='system-xs-regular flex h-10 items-center justify-center rounded-[10px] bg-background-section text-text-tertiary'>
+              Please configure authentication
+            </div>
+          </div>
+        )
+      }
     </div>
   )
 }

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

@@ -2,14 +2,23 @@ import { memo } from 'react'
 import Card from './card'
 import InstallFromMarketplace from './install-from-marketplace'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useGetDataSourceListAuth } from '@/service/use-datasource'
 
 const DataSourcePage = () => {
   const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
+  const { data } = useGetDataSourceListAuth()
+
   return (
     <div>
       <div className='space-y-2'>
-        <Card />
-        <Card />
+        {
+          data?.result.map(item => (
+            <Card
+              key={item.plugin_unique_identifier}
+              item={item}
+            />
+          ))
+        }
       </div>
       {
         enable_marketplace && (

web/app/components/header/account-setting/data-source-page-new/types.ts

@@ -0,0 +1,22 @@
+export type DataSourceCredential = {
+  credential: Record<string, any>
+  type: string
+  name: string
+  id: string
+}
+export type DataSourceAuth = {
+  author: string
+  provider: string
+  plugin_id: string
+  plugin_unique_identifier: string
+  icon: any
+  name: string
+  label: any
+  description: any
+  credential_schema?: any[]
+  oauth_schema?: {
+    client_schema?: any[]
+    credentials_schema?: any[]
+  }
+  credentials_list: DataSourceCredential[]
+}