plugin detail selecting

web/app/components/plugins/plugin-detail-panel/detail-header.tsx

@@ -8,7 +8,7 @@ import {
   RiHardDrive3Line,
   RiVerifiedBadgeLine,
 } from '@remixicon/react'
-import type { PluginDetail } from '../types'
+import type { InstalledPlugin } from '../types'
 import { PluginSource } from '../types'
 import Description from '../card/base/description'
 import Icon from '../card/base/card-icon'
@@ -29,7 +29,7 @@ import cn from '@/utils/classnames'
 const i18nPrefix = 'plugin.action'
 
 type Props = {
-  detail: PluginDetail
+  detail: InstalledPlugin
   onHide: () => void
   onDelete: () => void
 }

web/app/components/plugins/plugin-detail-panel/index.tsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import type { EndpointListItem, PluginDetail } from '../types'
+import type { EndpointListItem, InstalledPlugin } from '../types'
 import DetailHeader from './detail-header'
 import EndpointList from './endpoint-list'
 import ActionList from './action-list'
@@ -11,7 +11,7 @@ import Drawer from '@/app/components/base/drawer'
 import cn from '@/utils/classnames'
 
 type Props = {
-  pluginDetail: PluginDetail | undefined
+  pluginDetail: InstalledPlugin | undefined
   endpointList: EndpointListItem[]
   onHide: () => void
 }

web/app/components/plugins/plugin-item/index.tsx

@@ -10,6 +10,7 @@ import {
   RiVerifiedBadgeLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import { usePluginPageContext } from '../plugin-page/context'
 import { Github } from '../../base/icons/src/public/common'
 import Badge from '../../base/badge'
 import { type InstalledPlugin, PluginSource } from '../types'
@@ -20,6 +21,7 @@ import Title from '../card/base/title'
 import Action from './action'
 import cn from '@/utils/classnames'
 import I18n from '@/context/i18n'
+
 import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
 
 type Props = {
@@ -33,6 +35,8 @@ const PluginItem: FC<Props> = ({
 }) => {
   const { locale } = useContext(I18n)
   const { t } = useTranslation()
+  const currentPluginDetail = usePluginPageContext(v => v.currentPluginDetail)
+  const setCurrentPluginDetail = usePluginPageContext(v => v.setCurrentPluginDetail)
 
   const {
     source,
@@ -42,6 +46,7 @@ const PluginItem: FC<Props> = ({
     meta,
     version,
     latest_version,
+    plugin_id,
   } = plugin
   const { category, author, name, label, description, icon, verified } = plugin.declaration
   // Only plugin installed from GitHub need to check if it's the new version
@@ -57,10 +62,15 @@ const PluginItem: FC<Props> = ({
     return locale.replace('-', '_')
   }, [locale])
   return (
-    <div className={`p-1 ${source === PluginSource.debugging
+    <div
-      ? 'bg-[repeating-linear-gradient(-45deg,rgba(16,24,40,0.04),rgba(16,24,40,0.04)_5px,rgba(0,0,0,0.02)_5px,rgba(0,0,0,0.02)_10px)]'
+      className={cn(
-      : 'bg-background-section-burn'} 
+        'p-1 rounded-xl border-[1.5px] border-background-section-burn',
-      rounded-xl`}
+        currentPluginDetail?.plugin_id === plugin_id && 'border-components-option-card-option-selected-border',
+        source === PluginSource.debugging
+          ? 'bg-[repeating-linear-gradient(-45deg,rgba(16,24,40,0.04),rgba(16,24,40,0.04)_5px,rgba(0,0,0,0.02)_5px,rgba(0,0,0,0.02)_10px)]'
+          : 'bg-background-section-burn',
+      )}
+      onClick={() => setCurrentPluginDetail(plugin)}
     >
       <div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
         <CornerMark text={category} />
@@ -80,16 +90,18 @@ const PluginItem: FC<Props> = ({
             </div>
             <div className='flex items-center justify-between'>
               <Description text={description[tLocale]} descriptionLineRows={1}></Description>
-              <Action
+              <div onClick={e => e.stopPropagation()}>
-                pluginId={installation_id}
+                <Action
-                pluginName={label[tLocale]}
+                  pluginId={installation_id}
-                usedInApps={5}
+                  pluginName={label[tLocale]}
-                isShowFetchNewVersion={hasNewVersion}
+                  usedInApps={5}
-                isShowInfo={source === PluginSource.github}
+                  isShowFetchNewVersion={hasNewVersion}
-                isShowDelete
+                  isShowInfo={source === PluginSource.github}
-                meta={meta}
+                  isShowDelete
-                onDelete={() => {}}
+                  meta={meta}
-              />
+                  onDelete={() => {}}
+                />
+              </div>
             </div>
           </div>
         </div>

web/app/components/plugins/plugin-page/context.tsx

@@ -19,6 +19,8 @@ export type PluginPageContextValue = {
   containerRef: React.RefObject<HTMLDivElement>
   permissions: Permissions
   setPermissions: (permissions: PluginPageContextValue['permissions']) => void
+  currentPluginDetail: InstalledPlugin | undefined
+  setCurrentPluginDetail: (plugin: InstalledPlugin) => void
   installedPluginList: InstalledPlugin[]
   mutateInstalledPluginList: () => void
   filters: FilterState
@@ -31,7 +33,9 @@ export const PluginPageContext = createContext<PluginPageContextValue>({
     install_permission: PermissionType.noOne,
     debug_permission: PermissionType.noOne,
   },
-  setPermissions: () => { },
+  setPermissions: () => {},
+  currentPluginDetail: undefined,
+  setCurrentPluginDetail: () => {},
   installedPluginList: [],
   mutateInstalledPluginList: () => {},
   filters: {
@@ -64,6 +68,7 @@ export const PluginPageContextProvider = ({
     searchQuery: '',
   })
   const { data, mutate: mutateInstalledPluginList } = useSWR({ url: '/workspaces/current/plugin/list' }, fetchInstalledPluginList)
+  const [currentPluginDetail, setCurrentPluginDetail] = useState<InstalledPlugin | undefined>()
 
   return (
     <PluginPageContext.Provider
@@ -71,6 +76,8 @@ export const PluginPageContextProvider = ({
         containerRef,
         permissions,
         setPermissions,
+        currentPluginDetail,
+        setCurrentPluginDetail,
         installedPluginList: data?.plugins || [],
         mutateInstalledPluginList,
         filters,

web/app/components/plugins/plugin-page/plugins-panel.tsx

@@ -1,17 +1,19 @@
 'use client'
 import { useMemo, useState } from 'react'
-import type { EndpointListItem, InstalledPlugin, PluginDetail } from '../types'
+import type { EndpointListItem, 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 { toolNotion, toolNotionEndpoints } from '@/app/components/plugins/plugin-detail-panel/mock'
+import { toolNotionEndpoints } from '@/app/components/plugins/plugin-detail-panel/mock'
 import { usePluginPageContext } from './context'
 import { useDebounceFn } from 'ahooks'
 
 const PluginsPanel = () => {
   const [filters, setFilters] = usePluginPageContext(v => [v.filters, v.setFilters])
   const pluginList = usePluginPageContext(v => v.installedPluginList) as InstalledPlugin[]
+  const currentPluginDetail = usePluginPageContext(v => v.currentPluginDetail)
+  const setCurrentPluginDetail = usePluginPageContext(v => v.setCurrentPluginDetail)
 
   const { run: handleFilterChange } = useDebounceFn((filters: FilterState) => {
     setFilters(filters)
@@ -29,7 +31,6 @@ const PluginsPanel = () => {
     return filteredList
   }, [pluginList, filters])
 
-  const [currentPluginDetail, setCurrentPluginDetail] = useState<PluginDetail | undefined>(toolNotion as any)
   const [currentPluginEndpoints, setCurrentEndpoints] = useState<EndpointListItem[]>(toolNotionEndpoints as any)
   return (
     <>

web/app/components/plugins/types.ts

@@ -83,23 +83,6 @@ export type PluginManifestInMarket = {
   install_count: number
 }
 
-export type PluginDetail = {
-  id: string
-  created_at: string
-  updated_at: string
-  name: string
-  plugin_id: string
-  plugin_unique_identifier: string
-  declaration: PluginDeclaration
-  installation_id: string
-  tenant_id: string
-  endpoints_setups: number
-  endpoints_active: number
-  version: string
-  source: PluginSource
-  meta?: any
-}
-
 export type Plugin = {
   type: PluginType
   org: string
@@ -257,6 +240,7 @@ export type MetaData = {
 
 export type InstalledPlugin = {
   plugin_id: string
+  plugin_unique_identifier: string
   installation_id: string
   declaration: PluginDeclaration
   source: PluginSource