From 106169ed7fbf63eadd2ce560b94ece0b9b84492b Mon Sep 17 00:00:00 2001
From: GuanMu <ballmanjq@gmail.com>
Date: Wed, 19 Mar 2025 20:44:43 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20improve=20layout=20structure=20in?=
 =?UTF-8?q?=20StepOne=20component=20for=20better=20re=E2=80=A6=20(#16209)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../datasets/create/step-one/index.tsx        | 354 +++++++++---------
 1 file changed, 178 insertions(+), 176 deletions(-)

diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index f2e9349b7e..9337b15b8a 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -132,189 +132,191 @@ const StepOne = ({
   }, [files, isShowVectorSpaceFull])
 
   return (
-    <div className='flex w-full h-full'>
-      <div className='w-1/2 h-full overflow-y-auto relative'>
-        <div className='flex justify-end'>
-          <div className={classNames(s.form)}>
-            {
-              shouldShowDataSourceTypeList && (
-                <div className={classNames(s.stepHeader, 'text-text-secondary system-md-semibold')}>
-                  {t('datasetCreation.steps.one')}
-                </div>
-              )
-            }
-            {
-              shouldShowDataSourceTypeList && (
-                <div className='grid grid-cols-3 mb-8 gap-4'>
-                  <div
-                    className={cn(
-                      s.dataSourceItem,
-                      'system-sm-medium',
-                      dataSourceType === DataSourceType.FILE && s.active,
-                      dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
-                    )}
-                    onClick={() => {
-                      if (dataSourceTypeDisable)
-                        return
-                      changeType(DataSourceType.FILE)
-                      hideFilePreview()
-                      hideNotionPagePreview()
-                    }}
-                  >
-                    <span className={cn(s.datasetIcon)} />
-                    <span
-                      title={t('datasetCreation.stepOne.dataSourceType.file')}
-                      className='truncate'
+    <div className='w-full h-full overflow-x-auto'>
+      <div className='flex w-full h-full min-w-[1440px]'>
+        <div className='w-1/2 h-full overflow-y-auto relative'>
+          <div className='flex justify-end'>
+            <div className={classNames(s.form)}>
+              {
+                shouldShowDataSourceTypeList && (
+                  <div className={classNames(s.stepHeader, 'text-text-secondary system-md-semibold')}>
+                    {t('datasetCreation.steps.one')}
+                  </div>
+                )
+              }
+              {
+                shouldShowDataSourceTypeList && (
+                  <div className='grid grid-cols-3 mb-8 gap-4'>
+                    <div
+                      className={cn(
+                        s.dataSourceItem,
+                        'system-sm-medium',
+                        dataSourceType === DataSourceType.FILE && s.active,
+                        dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
+                      )}
+                      onClick={() => {
+                        if (dataSourceTypeDisable)
+                          return
+                        changeType(DataSourceType.FILE)
+                        hideFilePreview()
+                        hideNotionPagePreview()
+                      }}
                     >
-                      {t('datasetCreation.stepOne.dataSourceType.file')}
-                    </span>
-                  </div>
-                  <div
-                    className={cn(
-                      s.dataSourceItem,
-                      'system-sm-medium',
-                      dataSourceType === DataSourceType.NOTION && s.active,
-                      dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
-                    )}
-                    onClick={() => {
-                      if (dataSourceTypeDisable)
-                        return
-                      changeType(DataSourceType.NOTION)
-                      hideFilePreview()
-                      hideNotionPagePreview()
-                    }}
-                  >
-                    <span className={cn(s.datasetIcon, s.notion)} />
-                    <span
-                      title={t('datasetCreation.stepOne.dataSourceType.notion')}
-                      className='truncate'
-                    >
-                      {t('datasetCreation.stepOne.dataSourceType.notion')}
-                    </span>
-                  </div>
-                  <div
-                    className={cn(
-                      s.dataSourceItem,
-                      'system-sm-medium',
-                      dataSourceType === DataSourceType.WEB && s.active,
-                      dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
-                    )}
-                    onClick={() => changeType(DataSourceType.WEB)}
-                  >
-                    <span className={cn(s.datasetIcon, s.web)} />
-                    <span
-                      title={t('datasetCreation.stepOne.dataSourceType.web')}
-                      className='truncate'
-                    >
-                      {t('datasetCreation.stepOne.dataSourceType.web')}
-                    </span>
-                  </div>
-                </div>
-              )
-            }
-            {dataSourceType === DataSourceType.FILE && (
-              <>
-                <FileUploader
-                  fileList={files}
-                  titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg' : undefined}
-                  prepareFileList={updateFileList}
-                  onFileListUpdate={updateFileList}
-                  onFileUpdate={updateFile}
-                  onPreview={updateCurrentFile}
-                  notSupportBatchUpload={notSupportBatchUpload}
-                />
-                {isShowVectorSpaceFull && (
-                  <div className='max-w-[640px] mb-4'>
-                    <VectorSpaceFull />
-                  </div>
-                )}
-                <div className="flex justify-end gap-2 max-w-[640px]">
-                  {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
-                  <Button disabled={nextDisabled} variant='primary' onClick={onStepChange}>
-                    <span className="flex gap-0.5 px-[10px]">
-                      <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
-                      <RiArrowRightLine className="size-4" />
-                    </span>
-                  </Button>
-                </div>
-              </>
-            )}
-            {dataSourceType === DataSourceType.NOTION && (
-              <>
-                {!hasConnection && <NotionConnector onSetting={onSetting} />}
-                {hasConnection && (
-                  <>
-                    <div className='mb-8 w-[640px]'>
-                      <NotionPageSelector
-                        value={notionPages.map(page => page.page_id)}
-                        onSelect={updateNotionPages}
-                        onPreview={updateCurrentPage}
-                      />
+                      <span className={cn(s.datasetIcon)} />
+                      <span
+                        title={t('datasetCreation.stepOne.dataSourceType.file')}
+                        className='truncate'
+                      >
+                        {t('datasetCreation.stepOne.dataSourceType.file')}
+                      </span>
                     </div>
-                    {isShowVectorSpaceFull && (
-                      <div className='max-w-[640px] mb-4'>
-                        <VectorSpaceFull />
-                      </div>
-                    )}
-                    <div className="flex justify-end gap-2 max-w-[640px]">
-                      {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
-                      <Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}>
-                        <span className="flex gap-0.5 px-[10px]">
-                          <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
-                          <RiArrowRightLine className="size-4" />
-                        </span>
-                      </Button>
+                    <div
+                      className={cn(
+                        s.dataSourceItem,
+                        'system-sm-medium',
+                        dataSourceType === DataSourceType.NOTION && s.active,
+                        dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
+                      )}
+                      onClick={() => {
+                        if (dataSourceTypeDisable)
+                          return
+                        changeType(DataSourceType.NOTION)
+                        hideFilePreview()
+                        hideNotionPagePreview()
+                      }}
+                    >
+                      <span className={cn(s.datasetIcon, s.notion)} />
+                      <span
+                        title={t('datasetCreation.stepOne.dataSourceType.notion')}
+                        className='truncate'
+                      >
+                        {t('datasetCreation.stepOne.dataSourceType.notion')}
+                      </span>
                     </div>
-                  </>
-                )}
-              </>
-            )}
-            {dataSourceType === DataSourceType.WEB && (
-              <>
-                <div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}>
-                  <Website
-                    onPreview={setCurrentWebsite}
-                    checkedCrawlResult={websitePages}
-                    onCheckedCrawlResultChange={updateWebsitePages}
-                    onCrawlProviderChange={onWebsiteCrawlProviderChange}
-                    onJobIdChange={onWebsiteCrawlJobIdChange}
-                    crawlOptions={crawlOptions}
-                    onCrawlOptionsChange={onCrawlOptionsChange}
+                    <div
+                      className={cn(
+                        s.dataSourceItem,
+                        'system-sm-medium',
+                        dataSourceType === DataSourceType.WEB && s.active,
+                        dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
+                      )}
+                      onClick={() => changeType(DataSourceType.WEB)}
+                    >
+                      <span className={cn(s.datasetIcon, s.web)} />
+                      <span
+                        title={t('datasetCreation.stepOne.dataSourceType.web')}
+                        className='truncate'
+                      >
+                        {t('datasetCreation.stepOne.dataSourceType.web')}
+                      </span>
+                    </div>
+                  </div>
+                )
+              }
+              {dataSourceType === DataSourceType.FILE && (
+                <>
+                  <FileUploader
+                    fileList={files}
+                    titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg' : undefined}
+                    prepareFileList={updateFileList}
+                    onFileListUpdate={updateFileList}
+                    onFileUpdate={updateFile}
+                    onPreview={updateCurrentFile}
+                    notSupportBatchUpload={notSupportBatchUpload}
                   />
-                </div>
-                {isShowVectorSpaceFull && (
-                  <div className='max-w-[640px] mb-4'>
-                    <VectorSpaceFull />
+                  {isShowVectorSpaceFull && (
+                    <div className='max-w-[640px] mb-4'>
+                      <VectorSpaceFull />
+                    </div>
+                  )}
+                  <div className="flex justify-end gap-2 max-w-[640px]">
+                    {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                    <Button disabled={nextDisabled} variant='primary' onClick={onStepChange}>
+                      <span className="flex gap-0.5 px-[10px]">
+                        <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                        <RiArrowRightLine className="size-4" />
+                      </span>
+                    </Button>
                   </div>
-                )}
-                <div className="flex justify-end gap-2 max-w-[640px]">
-                  {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
-                  <Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}>
-                    <span className="flex gap-0.5 px-[10px]">
-                      <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
-                      <RiArrowRightLine className="size-4" />
-                    </span>
-                  </Button>
-                </div>
-              </>
-            )}
-            {!datasetId && (
-              <>
-                <div className={s.dividerLine} />
-                <span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
-                  <RiFolder6Line className="size-4 mr-1" />
-                  {t('datasetCreation.stepOne.emptyDatasetCreation')}
-                </span>
-              </>
-            )}
+                </>
+              )}
+              {dataSourceType === DataSourceType.NOTION && (
+                <>
+                  {!hasConnection && <NotionConnector onSetting={onSetting} />}
+                  {hasConnection && (
+                    <>
+                      <div className='mb-8 w-[640px]'>
+                        <NotionPageSelector
+                          value={notionPages.map(page => page.page_id)}
+                          onSelect={updateNotionPages}
+                          onPreview={updateCurrentPage}
+                        />
+                      </div>
+                      {isShowVectorSpaceFull && (
+                        <div className='max-w-[640px] mb-4'>
+                          <VectorSpaceFull />
+                        </div>
+                      )}
+                      <div className="flex justify-end gap-2 max-w-[640px]">
+                        {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                        <Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}>
+                          <span className="flex gap-0.5 px-[10px]">
+                            <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                            <RiArrowRightLine className="size-4" />
+                          </span>
+                        </Button>
+                      </div>
+                    </>
+                  )}
+                </>
+              )}
+              {dataSourceType === DataSourceType.WEB && (
+                <>
+                  <div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}>
+                    <Website
+                      onPreview={setCurrentWebsite}
+                      checkedCrawlResult={websitePages}
+                      onCheckedCrawlResultChange={updateWebsitePages}
+                      onCrawlProviderChange={onWebsiteCrawlProviderChange}
+                      onJobIdChange={onWebsiteCrawlJobIdChange}
+                      crawlOptions={crawlOptions}
+                      onCrawlOptionsChange={onCrawlOptionsChange}
+                    />
+                  </div>
+                  {isShowVectorSpaceFull && (
+                    <div className='max-w-[640px] mb-4'>
+                      <VectorSpaceFull />
+                    </div>
+                  )}
+                  <div className="flex justify-end gap-2 max-w-[640px]">
+                    {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                    <Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}>
+                      <span className="flex gap-0.5 px-[10px]">
+                        <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                        <RiArrowRightLine className="size-4" />
+                      </span>
+                    </Button>
+                  </div>
+                </>
+              )}
+              {!datasetId && (
+                <>
+                  <div className={s.dividerLine} />
+                  <span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
+                    <RiFolder6Line className="size-4 mr-1" />
+                    {t('datasetCreation.stepOne.emptyDatasetCreation')}
+                  </span>
+                </>
+              )}
+            </div>
+            <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
           </div>
-          <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
         </div>
-      </div>
-      <div className='w-1/2 h-full overflow-y-auto'>
-        {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
-        {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
-        {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
+        <div className='w-1/2 h-full overflow-y-auto'>
+          {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
+          {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
+          {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
+        </div>
       </div>
     </div>
   )