refactor: improve layout and event handling in Header and FieldItem components

web/app/components/datasets/create/website/base/header.tsx

@@ -30,21 +30,23 @@ const Header = ({
         )}>
           {title}
         </div>
-        <Divider type='vertical' className='mx-1 h-3.5' />
         {!isInPipeline && (
-          <Button
-            variant='secondary'
-            size='small'
-            className='px-1.5'
-          >
-            <RiEqualizer2Line
-              className='h-4 w-4'
-              onClick={onClickConfiguration}
-            />
-            <span className='system-xs-medium'>
-              {buttonText}
-            </span>
-          </Button>
+          <>
+            <Divider type='vertical' className='mx-1 h-3.5' />
+            <Button
+              variant='secondary'
+              size='small'
+              className='px-1.5'
+            >
+              <RiEqualizer2Line
+                className='h-4 w-4'
+                onClick={onClickConfiguration}
+              />
+              <span className='system-xs-medium'>
+                {buttonText}
+              </span>
+            </Button>
+          </>
         )}
       </div>
       <a

web/app/components/rag-pipeline/components/input-field/field-list/field-item.tsx

@@ -35,12 +35,14 @@ const FieldItem = ({
   const ref = useRef(null)
   const isHovering = useHover(ref)
 
-  const handleOnClickEdit = useCallback(() => {
+  const handleOnClickEdit = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
     if (readonly) return
     onClickEdit(payload.variable)
   }, [onClickEdit, payload.variable, readonly])
 
-  const handleRemove = useCallback(() => {
+  const handleRemove = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
     if (readonly) return
     onRemove(index)
   }, [index, onRemove, readonly])

web/app/components/rag-pipeline/components/panel/test-run/data-source/notion/notion-page-selector.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import WorkspaceSelector from '@/app/components/base/notion-page-selector/workspace-selector'
-import SearchInput from '@/app/education-apply/search-input'
+import SearchInput from '@/app/components/base/notion-page-selector/search-input'
 import PageSelector from '@/app/components/base/notion-page-selector/page-selector'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
 import Header from '@/app/components/datasets/create/website/base/header'
@@ -36,12 +36,15 @@ const NotionPageSelector = ({
 
   const getNotionData = useCallback(async () => {
     if (pipeline_id) {
-      const notionData = await getNotionPages({
+      await getNotionPages({
         pipeline_id,
         node_id: nodeId,
         inputs: {},
-      }) as DataSourceNotionWorkspace[]
-      setNotionData(notionData)
+      }, {
+        onSuccess(notionData) {
+          setNotionData(notionData as DataSourceNotionWorkspace[])
+        },
+      })
     }
   }, [getNotionPages, nodeId, pipeline_id])