From 9f724c19db70ac4114abc5110724ce85ecb20968 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 29 May 2025 17:33:04 +0800
Subject: [PATCH] refactor: refactor navigation components to use Link for
 improved routing

---
 .../datasets/create-from-pipeline/header.tsx  | 18 ++++++-------
 .../create-from-pipeline/left-header.tsx      | 27 +++++++++----------
 .../components/datasets/documents/index.tsx   |  1 +
 .../datasets/list/new-dataset-card/index.tsx  |  8 +++---
 .../new-dataset-card/{link.tsx => option.tsx} | 22 ++++++---------
 5 files changed, 34 insertions(+), 42 deletions(-)
 rename web/app/components/datasets/list/new-dataset-card/{link.tsx => option.tsx} (65%)

diff --git a/web/app/components/datasets/create-from-pipeline/header.tsx b/web/app/components/datasets/create-from-pipeline/header.tsx
index 78e2606051..278b7c76e6 100644
--- a/web/app/components/datasets/create-from-pipeline/header.tsx
+++ b/web/app/components/datasets/create-from-pipeline/header.tsx
@@ -1,28 +1,26 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 import { RiArrowLeftLine } from '@remixicon/react'
 import Button from '../../base/button'
 import { useTranslation } from 'react-i18next'
-import { useRouter } from 'next/navigation'
+import Link from 'next/link'
 
 const Header = () => {
   const { t } = useTranslation()
-  const { push } = useRouter()
-
-  const goBack = useCallback(() => {
-    push('/datasets')
-  }, [push])
 
   return (
-    <div className='system-md-semibold relative flex px-16 pb-2 pt-5 text-text-primary'>
+    <Link
+      className='system-md-semibold relative flex px-16 pb-2 pt-5 text-text-primary'
+      href={'/datasets'}
+      replace
+    >
       <span>{t('datasetPipeline.creation.title')}</span>
       <Button
         variant='secondary-accent'
         className='absolute bottom-0 left-5 size-9 rounded-full p-0'
-        onClick={goBack}
       >
         <RiArrowLeftLine className='size-5 ' />
       </Button>
-    </div>
+    </Link>
   )
 }
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx b/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
index 76e9c38eaa..b115bdc619 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
@@ -1,10 +1,11 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 import { RiArrowLeftLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
-import { useParams, useRouter } from 'next/navigation'
+import { useParams } from 'next/navigation'
 import Effect from '@/app/components/base/effect'
 import type { Step } from './step-indicator'
 import StepIndicator from './step-indicator'
+import Link from 'next/link'
 
 type LeftHeaderProps = {
   steps: Array<Step>
@@ -18,12 +19,6 @@ const LeftHeader = ({
   currentStep,
 }: LeftHeaderProps) => {
   const { datasetId } = useParams()
-  const { push } = useRouter()
-
-  const goBack = useCallback(() => {
-    if (datasetId)
-      push(`/datasets/${datasetId}/documents`)
-  }, [datasetId, push])
 
   return (
     <div className='relative flex flex-col gap-y-0.5 pb-2 pt-4'>
@@ -38,13 +33,17 @@ const LeftHeader = ({
         {steps[currentStep - 1]?.label}
       </div>
       {currentStep !== steps.length && (
-        <Button
-          variant='secondary-accent'
-          className='absolute -left-11 top-3.5 size-9 rounded-full p-0'
-          onClick={goBack}
+        <Link
+          href={`/datasets/${datasetId}/documents`}
+          replace
         >
-          <RiArrowLeftLine className='size-5 ' />
-        </Button>
+          <Button
+            variant='secondary-accent'
+            className='absolute -left-11 top-3.5 size-9 rounded-full p-0'
+          >
+            <RiArrowLeftLine className='size-5 ' />
+          </Button>
+        </Link>
       )}
       <Effect className='left-8 top-[-34px] opacity-20' />
     </div>
diff --git a/web/app/components/datasets/documents/index.tsx b/web/app/components/datasets/documents/index.tsx
index 2912c07530..4b74a00726 100644
--- a/web/app/components/datasets/documents/index.tsx
+++ b/web/app/components/datasets/documents/index.tsx
@@ -322,6 +322,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
         </div>
         {isListLoading
           ? <Loading type='app' />
+          // eslint-disable-next-line sonarjs/no-nested-conditional
           : total > 0
             ? <List
               embeddingAvailable={embeddingAvailable}
diff --git a/web/app/components/datasets/list/new-dataset-card/index.tsx b/web/app/components/datasets/list/new-dataset-card/index.tsx
index 2cdb213fb9..b268f25a3d 100644
--- a/web/app/components/datasets/list/new-dataset-card/index.tsx
+++ b/web/app/components/datasets/list/new-dataset-card/index.tsx
@@ -5,7 +5,7 @@ import {
   RiAddLine,
   RiFunctionAddLine,
 } from '@remixicon/react'
-import Link from './link'
+import Option from './option'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 
 const CreateAppCard = () => {
@@ -14,19 +14,19 @@ const CreateAppCard = () => {
   return (
     <div className='flex h-[166px] flex-col gap-y-0.5 rounded-xl bg-background-default-dimmed'>
       <div className='flex grow flex-col items-center justify-center p-2'>
-        <Link
+        <Option
           href={'/datasets/create-from-pipeline'}
           Icon={RiFunctionAddLine}
           text={t('dataset.createFromPipeline')}
         />
-        <Link
+        <Option
           href={'/datasets/create'}
           Icon={RiAddLine}
           text={t('dataset.createDataset')}
         />
       </div>
       <div className='border-t-[0.5px] border-divider-subtle p-2'>
-        <Link
+        <Option
           href={'/datasets/connect'}
           Icon={ApiConnectionMod}
           text={t('dataset.connectDataset')}
diff --git a/web/app/components/datasets/list/new-dataset-card/link.tsx b/web/app/components/datasets/list/new-dataset-card/option.tsx
similarity index 65%
rename from web/app/components/datasets/list/new-dataset-card/link.tsx
rename to web/app/components/datasets/list/new-dataset-card/option.tsx
index 21d613c315..dfef389f4d 100644
--- a/web/app/components/datasets/list/new-dataset-card/link.tsx
+++ b/web/app/components/datasets/list/new-dataset-card/option.tsx
@@ -1,33 +1,27 @@
-import { useRouter } from 'next/navigation'
+import Link from 'next/link'
 import React from 'react'
 
-type LinkProps = {
+type OptionProps = {
   Icon: React.ComponentType<{ className?: string }>
   text: string
   href: string
 }
 
-const Link = ({
+const Option = ({
   Icon,
   text,
   href,
-}: LinkProps) => {
-  const { push } = useRouter()
-
-  const navigateTo = () => {
-    push(href)
-  }
-
+}: OptionProps) => {
   return (
-    <button
+    <Link
       type='button'
       className='flex w-full items-center gap-x-2 rounded-lg bg-transparent px-4 py-2 text-text-tertiary shadow-shadow-shadow-3 hover:bg-background-default-dodge hover:text-text-secondary hover:shadow-xs'
-      onClick={navigateTo}
+      href={href}
     >
       <Icon className='h-4 w-4 shrink-0' />
       <span className='system-sm-medium grow text-left'>{text}</span>
-    </button>
+    </Link>
   )
 }
 
-export default React.memo(Link)
+export default React.memo(Option)