From 4ae936b2636a5551fce555dd3dbfd968c34b5c6a Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 29 May 2025 15:48:54 +0800
Subject: [PATCH] refactor: refactor navigation handling in dataset components
 to use button elements

---
 .../datasets/create-from-pipeline/header.tsx  | 29 +++++++++++--------
 .../create-from-pipeline/left-header.tsx      | 23 +++++++++------
 .../datasets/list/new-dataset-card/index.tsx  | 19 +++++++++---
 .../datasets/list/new-dataset-card/link.tsx   | 19 +++++++-----
 4 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/web/app/components/datasets/create-from-pipeline/header.tsx b/web/app/components/datasets/create-from-pipeline/header.tsx
index 48c7612b7a..78e2606051 100644
--- a/web/app/components/datasets/create-from-pipeline/header.tsx
+++ b/web/app/components/datasets/create-from-pipeline/header.tsx
@@ -1,23 +1,28 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { RiArrowLeftLine } from '@remixicon/react'
 import Button from '../../base/button'
 import { useTranslation } from 'react-i18next'
+import { useRouter } from 'next/navigation'
 
 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'>
-        <span>{t('datasetPipeline.creation.title')}</span>
-        <a
-          className='absolute bottom-0 left-5'
-          href='/datasets'
-        >
-          <Button variant='secondary-accent' className='size-9 rounded-full p-0'>
-            <RiArrowLeftLine className='size-5 ' />
-          </Button>
-        </a>
-      </div>
+    <div className='system-md-semibold relative flex px-16 pb-2 pt-5 text-text-primary'>
+      <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>
   )
 }
 
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 6ea4f3ace5..76e9c38eaa 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,7 +1,7 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { RiArrowLeftLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
-import { useParams } from 'next/navigation'
+import { useParams, useRouter } from 'next/navigation'
 import Effect from '@/app/components/base/effect'
 import type { Step } from './step-indicator'
 import StepIndicator from './step-indicator'
@@ -18,6 +18,12 @@ 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'>
@@ -32,14 +38,13 @@ const LeftHeader = ({
         {steps[currentStep - 1]?.label}
       </div>
       {currentStep !== steps.length && (
-        <a
-          className='absolute -left-11 top-3.5'
-          href={`/datasets/${datasetId}/documents`}
+        <Button
+          variant='secondary-accent'
+          className='absolute -left-11 top-3.5 size-9 rounded-full p-0'
+          onClick={goBack}
         >
-          <Button variant='secondary-accent' className='size-9 rounded-full p-0'>
-            <RiArrowLeftLine className='size-5 ' />
-          </Button>
-        </a>
+          <RiArrowLeftLine className='size-5 ' />
+        </Button>
       )}
       <Effect className='left-8 top-[-34px] opacity-20' />
     </div>
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 541c9d38ab..2cdb213fb9 100644
--- a/web/app/components/datasets/list/new-dataset-card/index.tsx
+++ b/web/app/components/datasets/list/new-dataset-card/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { basePath } from '@/utils/var'
 import {
   RiAddLine,
   RiFunctionAddLine,
@@ -15,11 +14,23 @@ 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 href={`${basePath}/datasets/create-from-pipeline`} Icon={RiFunctionAddLine} text={t('dataset.createFromPipeline')} />
-        <Link href={`${basePath}/datasets/create`} Icon={RiAddLine} text={t('dataset.createDataset')} />
+        <Link
+          href={'/datasets/create-from-pipeline'}
+          Icon={RiFunctionAddLine}
+          text={t('dataset.createFromPipeline')}
+        />
+        <Link
+          href={'/datasets/create'}
+          Icon={RiAddLine}
+          text={t('dataset.createDataset')}
+        />
       </div>
       <div className='border-t-[0.5px] border-divider-subtle p-2'>
-        <Link href={`${basePath}/datasets/connect`} Icon={ApiConnectionMod} text={t('dataset.connectDataset')} />
+        <Link
+          href={'/datasets/connect'}
+          Icon={ApiConnectionMod}
+          text={t('dataset.connectDataset')}
+        />
       </div>
     </div>
   )
diff --git a/web/app/components/datasets/list/new-dataset-card/link.tsx b/web/app/components/datasets/list/new-dataset-card/link.tsx
index 696a11a01e..21d613c315 100644
--- a/web/app/components/datasets/list/new-dataset-card/link.tsx
+++ b/web/app/components/datasets/list/new-dataset-card/link.tsx
@@ -1,27 +1,32 @@
+import { useRouter } from 'next/navigation'
 import React from 'react'
 
 type LinkProps = {
   Icon: React.ComponentType<{ className?: string }>
   text: string
   href: string
-  ref?: React.RefObject<HTMLAnchorElement>
 }
 
 const Link = ({
   Icon,
   text,
   href,
-  ref,
 }: LinkProps) => {
+  const { push } = useRouter()
+
+  const navigateTo = () => {
+    push(href)
+  }
+
   return (
-    <a
-      ref={ref}
+    <button
+      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'
-      href={href}
+      onClick={navigateTo}
     >
       <Icon className='h-4 w-4 shrink-0' />
-      <span className='system-sm-medium grow'>{text}</span>
-    </a>
+      <span className='system-sm-medium grow text-left'>{text}</span>
+    </button>
   )
 }