From 03799dffc66ce95b56073170f76659b5eaf2bfe5 Mon Sep 17 00:00:00 2001
From: agatha197 <28584164+agatha197@users.noreply.github.com>
Date: Wed, 2 Oct 2024 03:48:25 +0000
Subject: [PATCH] feat: change redirect path of `VfolderLazyView` to current
 page (#2731)

**Changes:**

This PR modifies the `VFolderLazyView` component to use the current location's pathname when navigating to a folder. Specifically:

- Imports the `useLocation` hook from `react-router-dom`
- Adds `const location = useLocation();` to get the current location
- Updates the `onClick` handler of the `Typography.Link` component to use `location.pathname` instead of the hardcoded '/data' path

**Rationale:**

This change allows the component to maintain the current route context when navigating to a folder, improving navigation consistency across different pages or sections of the application.

**Effects:**

Users will experience more predictable navigation behavior when interacting with folders, as the component will preserve the current route context instead of always redirecting to '/data'.

**How to test:**
1. make a new service with mounting any folder.
2. go to the serving page.
3. click the folder icon of the mounted folder of service.

**Checklist for reviewer:**
- [ ] Verify that the folder dialog appears while the current path is maintained

**Screenshot:**
![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/a8fb98ef-279e-4da7-a718-0dcec8568a5d.png)

**Checklist:**

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after
---
 react/src/components/VFolderLazyView.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/react/src/components/VFolderLazyView.tsx b/react/src/components/VFolderLazyView.tsx
index 0a59fed53..3efe967a8 100644
--- a/react/src/components/VFolderLazyView.tsx
+++ b/react/src/components/VFolderLazyView.tsx
@@ -6,6 +6,7 @@ import { VFolder } from './VFolderSelect';
 import { FolderOutlined } from '@ant-design/icons';
 import { Typography } from 'antd';
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 
 interface VFolderLazyViewProps {
   uuid: string;
@@ -17,6 +18,7 @@ const VFolderLazyView: React.FC<VFolderLazyViewProps> = ({
 }) => {
   const currentProject = useCurrentProjectValue();
   const baiRequestWithPromise = useBaiSignedRequestWithPromise();
+  const location = useLocation();
 
   const webuiNavigate = useWebUINavigate();
   const { data: vFolders } = useSuspenseTanQuery({
@@ -43,7 +45,7 @@ const VFolderLazyView: React.FC<VFolderLazyViewProps> = ({
       <Typography.Link
         onClick={() => {
           webuiNavigate({
-            pathname: '/data',
+            pathname: location.pathname,
             search: `?folder=${vFolder.id}`,
           });
         }}