From ebebbb684b28da917cb17f63d1450ce525ec0a17 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sat, 2 Nov 2024 15:23:04 +0800
Subject: [PATCH] endpoints list

---
 .../plugin-detail-panel/endpoint-list.tsx     | 38 +++++++++++--------
 .../plugins/plugin-detail-panel/index.tsx     | 25 +++++-------
 .../plugins/plugin-page/plugins-panel.tsx     | 20 ++--------
 3 files changed, 35 insertions(+), 48 deletions(-)

diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
index de87750ad4..a610d3dc25 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -1,30 +1,35 @@
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
 import { useBoolean } from 'ahooks'
 import { RiAddLine } from '@remixicon/react'
-import type { EndpointListItem, PluginEndpointDeclaration } from '../types'
 import EndpointModal from './endpoint-modal'
 import EndpointCard from './endpoint-card'
 import { toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
+import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
 import {
   createEndpoint,
+  fetchEndpointList,
 } from '@/service/plugins'
 
-type Props = {
-  pluginUniqueID: string
-  declaration: PluginEndpointDeclaration
-  list: EndpointListItem[]
-}
-
-const EndpointList = ({
-  pluginUniqueID,
-  declaration,
-  list,
-}: Props) => {
+const EndpointList = () => {
   const { t } = useTranslation()
-
+  const pluginDetail = usePluginPageContext(v => v.currentPluginDetail)
+  const pluginUniqueID = pluginDetail.plugin_unique_identifier
+  const declaration = pluginDetail.declaration.endpoint
+  const { data } = useSWR(
+    {
+      url: '/workspaces/current/endpoints/list/plugin',
+      params: {
+        plugin_id: pluginDetail.plugin_id,
+        page: 1,
+        limit: 100,
+      },
+    },
+    fetchEndpointList,
+  )
   const [isShowEndpointModal, {
     setTrue: showEndpointModal,
     setFalse: hideEndpointModal,
@@ -50,6 +55,9 @@ const EndpointList = ({
     }
   }
 
+  if (!data)
+    return null
+
   return (
     <div className='px-4 py-2 border-t border-divider-subtle'>
       <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
@@ -65,11 +73,11 @@ const EndpointList = ({
           <RiAddLine className='w-4 h-4' />
         </ActionButton>
       </div>
-      {list.length === 0 && (
+      {data.endpoints.length === 0 && (
         <div className='mb-1 p-3 flex justify-center rounded-[10px] bg-background-section text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointsEmpty')}</div>
       )}
       <div className='flex flex-col gap-2'>
-        {list.map((item, index) => (
+        {data.endpoints.map((item, index) => (
           <EndpointCard
             key={index}
             data={item}
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 3444cc8d1a..0dd85a4f87 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -1,27 +1,26 @@
 'use client'
 import React from 'react'
 import type { FC } from 'react'
-import type { EndpointListItem, InstalledPlugin } from '../types'
 import DetailHeader from './detail-header'
 import EndpointList from './endpoint-list'
 import ActionList from './action-list'
 import ModelList from './model-list'
 import Drawer from '@/app/components/base/drawer'
+import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
 import cn from '@/utils/classnames'
 
 type Props = {
-  pluginDetail: InstalledPlugin | undefined
-  endpointList: EndpointListItem[]
-  onHide: () => void
   onDelete: () => void
 }
 
 const PluginDetailPanel: FC<Props> = ({
-  pluginDetail,
-  endpointList = [],
-  onHide,
   onDelete,
 }) => {
+  const pluginDetail = usePluginPageContext(v => v.currentPluginDetail)
+  const setCurrentPluginDetail = usePluginPageContext(v => v.setCurrentPluginDetail)
+
+  const handleHide = () => setCurrentPluginDetail(undefined)
+
   if (!pluginDetail)
     return null
 
@@ -29,7 +28,7 @@ const PluginDetailPanel: FC<Props> = ({
     <Drawer
       isOpen={!!pluginDetail}
       clickOutsideNotOpen={false}
-      onClose={onHide}
+      onClose={handleHide}
       footer={null}
       mask={false}
       positionCenter={false}
@@ -39,17 +38,11 @@ const PluginDetailPanel: FC<Props> = ({
         <>
           <DetailHeader
             detail={pluginDetail}
-            onHide={onHide}
+            onHide={handleHide}
             onDelete={onDelete}
           />
           <div className='grow overflow-y-auto'>
-            {!!pluginDetail.declaration.endpoint && (
-              <EndpointList
-                pluginUniqueID={pluginDetail.plugin_unique_identifier}
-                list={endpointList}
-                declaration={pluginDetail.declaration.endpoint}
-              />
-            )}
+            {!!pluginDetail.declaration.endpoint && <EndpointList />}
             {!!pluginDetail.declaration.tool && <ActionList />}
             {!!pluginDetail.declaration.model && <ModelList />}
           </div>
diff --git a/web/app/components/plugins/plugin-page/plugins-panel.tsx b/web/app/components/plugins/plugin-page/plugins-panel.tsx
index 862576d48f..77f531b122 100644
--- a/web/app/components/plugins/plugin-page/plugins-panel.tsx
+++ b/web/app/components/plugins/plugin-page/plugins-panel.tsx
@@ -1,11 +1,10 @@
 'use client'
-import { useMemo, useState } from 'react'
-import type { EndpointListItem, InstalledPlugin } from '../types'
+import { useMemo } from 'react'
+import type { InstalledPlugin } from '../types'
 import type { FilterState } from './filter-management'
 import FilterManagement from './filter-management'
 import List from './list'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
-import { toolNotionEndpoints } from '@/app/components/plugins/plugin-detail-panel/mock'
 import { usePluginPageContext } from './context'
 import { useDebounceFn } from 'ahooks'
 
@@ -13,8 +12,6 @@ const PluginsPanel = () => {
   const [filters, setFilters] = usePluginPageContext(v => [v.filters, v.setFilters])
   const pluginList = usePluginPageContext(v => v.installedPluginList) as InstalledPlugin[]
   const mutateInstalledPluginList = usePluginPageContext(v => v.mutateInstalledPluginList)
-  const currentPluginDetail = usePluginPageContext(v => v.currentPluginDetail)
-  const setCurrentPluginDetail = usePluginPageContext(v => v.setCurrentPluginDetail)
 
   const { run: handleFilterChange } = useDebounceFn((filters: FilterState) => {
     setFilters(filters)
@@ -32,7 +29,6 @@ const PluginsPanel = () => {
     return filteredList
   }, [pluginList, filters])
 
-  const [currentPluginEndpoints, setCurrentEndpoints] = useState<EndpointListItem[]>(toolNotionEndpoints as any)
   return (
     <>
       <div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
@@ -46,17 +42,7 @@ const PluginsPanel = () => {
           <List pluginList={filteredList} />
         </div>
       </div>
-      <PluginDetailPanel
-        pluginDetail={currentPluginDetail}
-        endpointList={currentPluginEndpoints}
-        onHide={() => {
-          setCurrentPluginDetail(undefined)
-        }}
-        onDelete={() => {
-          setCurrentPluginDetail(undefined)
-          mutateInstalledPluginList()
-        }}
-      />
+      <PluginDetailPanel onDelete={() => mutateInstalledPluginList()}/>
     </>
   )
 }