Merge branch 'feat/plugins' into dev/plugin-deploy

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

@@ -11,15 +11,14 @@ import {
   useContextSelector,
 } from 'use-context-selector'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
-import type { PluginDetail } from '../types'
 import type { FilterState } from './filter-management'
 import { useTranslation } from 'react-i18next'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 
 export type PluginPageContextValue = {
   containerRef: React.RefObject<HTMLDivElement>
-  currentPluginDetail: PluginDetail | undefined
-  setCurrentPluginDetail: (plugin: PluginDetail) => void
+  currentPluginID: string | undefined
+  setCurrentPluginID: (pluginID?: string) => void
   filters: FilterState
   setFilters: (filter: FilterState) => void
   activeTab: string
@@ -29,8 +28,8 @@ export type PluginPageContextValue = {
 
 export const PluginPageContext = createContext<PluginPageContextValue>({
   containerRef: { current: null },
-  currentPluginDetail: undefined,
-  setCurrentPluginDetail: () => { },
+  currentPluginID: undefined,
+  setCurrentPluginID: () => { },
   filters: {
     categories: [],
     tags: [],
@@ -60,7 +59,7 @@ export const PluginPageContextProvider = ({
     tags: [],
     searchQuery: '',
   })
-  const [currentPluginDetail, setCurrentPluginDetail] = useState<PluginDetail | undefined>()
+  const [currentPluginID, setCurrentPluginID] = useState<string | undefined>()
 
   const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
   const options = useMemo(() => {
@@ -81,8 +80,8 @@ export const PluginPageContextProvider = ({
     <PluginPageContext.Provider
       value={{
         containerRef,
-        currentPluginDetail,
-        setCurrentPluginDetail,
+        currentPluginID,
+        setCurrentPluginID,
         filters,
         setFilters,
         activeTab,

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

@@ -84,6 +84,7 @@ const PluginPage = ({
         showInstallFromMarketplace()
       }
     })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [packageId])
 
   const {

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

@@ -14,6 +14,8 @@ const PluginsPanel = () => {
   const [filters, setFilters] = usePluginPageContext(v => [v.filters, v.setFilters]) as [FilterState, (filter: FilterState) => void]
   const { data: pluginList, isLoading: isPluginListLoading } = useInstalledPluginList()
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const currentPluginID = usePluginPageContext(v => v.currentPluginID)
+  const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
 
   const { run: handleFilterChange } = useDebounceFn((filters: FilterState) => {
     setFilters(filters)
@@ -31,6 +33,13 @@ const PluginsPanel = () => {
     return filteredList
   }, [pluginList, filters])
 
+  const currentPluginDetail = useMemo(() => {
+    const detail = pluginList?.plugins.find(plugin => plugin.plugin_id === currentPluginID)
+    return detail
+  }, [currentPluginID, pluginList?.plugins])
+
+  const handleHide = () => setCurrentPluginID(undefined)
+
   return (
     <>
       <div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
@@ -40,7 +49,7 @@ const PluginsPanel = () => {
         />
       </div>
       {isPluginListLoading ? <Loading type='app' /> : (filteredList?.length ?? 0) > 0 ? (
-        <div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
+        <div className='flex px-12 items-start content-start gap-2 grow self-stretch flex-wrap'>
           <div className='w-full'>
             <List pluginList={filteredList || []} />
           </div>
@@ -48,7 +57,11 @@ const PluginsPanel = () => {
       ) : (
         <Empty />
       )}
-      <PluginDetailPanel onUpdate={() => invalidateInstalledPluginList()}/>
+      <PluginDetailPanel
+        detail={currentPluginDetail}
+        onUpdate={() => invalidateInstalledPluginList()}
+        onHide={handleHide}
+      />
     </>
   )
 }