feat: Refactor Notion and LocalFile components to remove unused VectorSpaceFull prop and improve step indicator logic

web/app/components/rag-pipeline/components/panel/test-run/data-source/local-file/index.tsx

@@ -1,4 +1,3 @@
-import VectorSpaceFull from '@/app/components/billing/vector-space-full'
 import type { FileItem } from '@/models/datasets'
 import FileUploader from './file-uploader'
 
@@ -7,7 +6,6 @@ type LocalFileProps = {
   updateFileList: (files: FileItem[]) => void
   updateFile: (fileItem: FileItem, progress: number, list: FileItem[]) => void
   notSupportBatchUpload: boolean
-  isShowVectorSpaceFull: boolean
 }
 
 const LocalFile = ({
@@ -15,21 +13,15 @@ const LocalFile = ({
   updateFileList,
   updateFile,
   notSupportBatchUpload,
-  isShowVectorSpaceFull,
 }: LocalFileProps) => {
   return (
-    <>
+    <FileUploader
-      <FileUploader
+      fileList={files}
-        fileList={files}
+      prepareFileList={updateFileList}
-        prepareFileList={updateFileList}
+      onFileListUpdate={updateFileList}
-        onFileListUpdate={updateFileList}
+      onFileUpdate={updateFile}
-        onFileUpdate={updateFile}
+      notSupportBatchUpload={notSupportBatchUpload}
-        notSupportBatchUpload={notSupportBatchUpload}
+    />
-      />
-      {isShowVectorSpaceFull && (
-        <VectorSpaceFull />
-      )}
-    </>
   )
 }
 

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

@@ -2,20 +2,17 @@ import { useDataSources } from '@/service/use-common'
 import { useCallback, useMemo } from 'react'
 import { NotionPageSelector } from '@/app/components/base/notion-page-selector'
 import type { NotionPage } from '@/models/common'
-import VectorSpaceFull from '@/app/components/billing/vector-space-full'
 import { NotionConnector } from '@/app/components/base/notion-connector'
 import { useModalContextSelector } from '@/context/modal-context'
 
 type NotionProps = {
   notionPages: NotionPage[]
   updateNotionPages: (value: NotionPage[]) => void
-  isShowVectorSpaceFull: boolean
 }
 
 const Notion = ({
   notionPages,
   updateNotionPages,
-  isShowVectorSpaceFull,
 }: NotionProps) => {
   const { data: dataSources } = useDataSources()
   const setShowAccountSettingModal = useModalContextSelector(state => state.setShowAccountSettingModal)
@@ -33,16 +30,11 @@ const Notion = ({
     <>
       {!hasConnection && <NotionConnector onSetting={handleConnect} />}
       {hasConnection && (
-        <>
+        <NotionPageSelector
-          <NotionPageSelector
+          value={notionPages.map(page => page.page_id)}
-            value={notionPages.map(page => page.page_id)}
+          onSelect={updateNotionPages}
-            onSelect={updateNotionPages}
+          canPreview={false}
-            canPreview={false}
+        />
-          />
-          {isShowVectorSpaceFull && (
-            <VectorSpaceFull />
-          )}
-        </>
       )}
     </>
   )

web/app/components/rag-pipeline/components/panel/test-run/index.tsx

@@ -13,10 +13,11 @@ import { useTranslation } from 'react-i18next'
 import { useProviderContextSelector } from '@/context/provider-context'
 import type { NotionPage } from '@/models/common'
 import Notion from './data-source/notion'
+import VectorSpaceFull from '@/app/components/billing/vector-space-full'
 
 const TestRunPanel = () => {
   const { t } = useTranslation()
-  const [currentStep, setCurrentStep] = useState(0)
+  const [currentStep, setCurrentStep] = useState(1)
   const [dataSourceType, setDataSourceType] = useState<string>(DataSourceType.FILE)
   const [fileList, setFiles] = useState<FileItem[]>([])
   const [notionPages, setNotionPages] = useState<NotionPage[]>([])
@@ -40,6 +41,14 @@ const TestRunPanel = () => {
     return isShowVectorSpaceFull
   }, [fileList, isShowVectorSpaceFull])
 
+  const nextBtnDisabled = useMemo(() => {
+    if (dataSourceType === DataSourceType.FILE)
+      return nextDisabled
+    if (dataSourceType === DataSourceType.NOTION)
+      return isShowVectorSpaceFull || !notionPages.length
+    return false
+  }, [dataSourceType, nextDisabled, isShowVectorSpaceFull, notionPages.length])
+
   const handleClose = () => {
     setShowTestRunPanel?.(false)
   }
@@ -87,7 +96,7 @@ const TestRunPanel = () => {
         <StepIndicator steps={steps} currentStep={currentStep} />
       </div>
       {
-        currentStep === 0 && (
+        currentStep === 1 && (
           <>
             <div className='flex flex-col gap-y-4 px-4 py-2'>
               <DataSourceOptions
@@ -101,28 +110,22 @@ const TestRunPanel = () => {
                   updateFile={updateFile}
                   updateFileList={updateFileList}
                   notSupportBatchUpload={notSupportBatchUpload}
-                  isShowVectorSpaceFull={isShowVectorSpaceFull}
                 />
               )}
               {dataSourceType === DataSourceType.NOTION && (
                 <Notion
                   notionPages={notionPages}
                   updateNotionPages={updateNotionPages}
-                  isShowVectorSpaceFull={isShowVectorSpaceFull}
                 />
               )}
+              {isShowVectorSpaceFull && (
+                <VectorSpaceFull />
+              )}
             </div>
             <div className='flex justify-end p-4 pt-2'>
-              {dataSourceType === DataSourceType.FILE && (
+              <Button disabled={nextBtnDisabled} variant='primary' onClick={handleNextStep}>
-                <Button disabled={nextDisabled} variant='primary' onClick={handleNextStep}>
+                <span className='px-0.5'>{t('datasetCreation.stepOne.button')}</span>
-                  <span className='px-0.5'>{t('datasetCreation.stepOne.button')}</span>
+              </Button>
-                </Button>
-              )}
-              {dataSourceType === DataSourceType.NOTION && (
-                <Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={handleNextStep}>
-                  <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
-                </Button>
-              )}
             </div>
           </>
         )

web/app/components/rag-pipeline/components/panel/test-run/step-indicator.tsx

@@ -19,7 +19,7 @@ const StepIndicator = ({
   return (
     <div className='flex items-center gap-x-2 px-1'>
       {steps.map((step, index) => {
-        const isCurrentStep = index === currentStep
+        const isCurrentStep = index === currentStep - 1
         const isLastStep = index === steps.length - 1
         return (
           <div key={index} className='flex items-center gap-x-2'>