From 8e9d7a229d063640a456fcf7011756b4ae2ee3f0 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Oct 2024 18:21:45 +0800
Subject: [PATCH] feat: scroll to view and fix action hidden

---
 .../workflow/block-selector/all-tools.tsx          |  1 +
 .../block-selector/market-place-plugin/action.tsx  | 14 +++++++++-----
 .../block-selector/market-place-plugin/item.tsx    |  9 +++++++--
 .../block-selector/market-place-plugin/list.tsx    | 10 +++++++++-
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index a9a316b272..67c30f4aea 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -89,6 +89,7 @@ const AllTools = ({
           onSelect={onSelect}
           viewType={activeView}
         />
+        {/* Plugins from marketplace */}
         <PluginList wrapElemRef={wrapElemRef} list={[toolNotion, extensionDallE, modelGPT4] as any} ref={pluginRef} />
       </div>
     </div>
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
index df606fdb41..d77ea248fe 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useRef, useState } from 'react'
+import React, { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiMoreFill } from '@remixicon/react'
 import ActionButton from '@/app/components/base/action-button'
@@ -13,16 +13,20 @@ import {
 import cn from '@/utils/classnames'
 
 type Props = {
+  open: boolean
+  onOpenChange: (v: boolean) => void
 }
 
-const OperationDropdown: FC<Props> = () => {
+const OperationDropdown: FC<Props> = ({
+  open,
+  onOpenChange,
+}) => {
   const { t } = useTranslation()
-  const [open, doSetOpen] = useState(false)
   const openRef = useRef(open)
   const setOpen = useCallback((v: boolean) => {
-    doSetOpen(v)
+    onOpenChange(v)
     openRef.current = v
-  }, [doSetOpen])
+  }, [onOpenChange])
 
   const handleTrigger = useCallback(() => {
     setOpen(!openRef.current)
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
index 8d3dff4cc6..b5a73b9743 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 import Action from './action'
 import type { Plugin } from '@/app/components/plugins/types.ts'
 import I18n from '@/context/i18n'
+import cn from '@/utils/classnames'
 
 import { formatNumber } from '@/utils/format'
 
@@ -23,6 +24,7 @@ const Item: FC<Props> = ({
   payload,
 }) => {
   const { t } = useTranslation()
+  const [open, setOpen] = React.useState(false)
   const { locale } = useContext(I18n)
 
   return (
@@ -42,9 +44,12 @@ const Item: FC<Props> = ({
           </div>
         </div>
         {/* Action */}
-        <div className='hidden group-hover/plugin:flex  items-center space-x-1 h-4 text-components-button-secondary-accent-text system-xs-medium'>
+        <div className={cn(!open ? 'hidden' : 'flex', 'group-hover/plugin:flex  items-center space-x-1 h-4 text-components-button-secondary-accent-text system-xs-medium')}>
           <div className='px-1.5'>{t('plugin.installAction')}</div>
-          <Action />
+          <Action
+            open={open}
+            onOpenChange={setOpen}
+          />
         </div>
       </div>
 
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index baf506c7d4..9861cf2a9e 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -39,17 +39,25 @@ const List = ({
     handleScroll,
   }))
 
+  const scrollToView = () => {
+    if (scrollPosition !== ScrollPosition.belowTheWrap)
+      return
+
+    nextToStickyELemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+
   return (
     <>
       <div
         className={cn('sticky z-10 flex h-8 px-4 py-1 text-text-primary system-sm-medium', stickyClassName)}
+        onClick={scrollToView}
       >
         <span>{t('plugin.fromMarketplace')}</span>
         {/* {scrollPosition === ScrollPosition.belowTheWrap && (
           <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
         )} */}
       </div>
-      <div className='p-1 pb-[500px]' ref={nextToStickyELemRef}>
+      <div className='p-1' ref={nextToStickyELemRef}>
         {list.map((item, index) => (
           <Item
             key={index}