From 2a01fe8eceeb2d5a466c1b00c4197d1b3f543d0c Mon Sep 17 00:00:00 2001
From: Damien de Lemeny <contact@ddelemeny.me>
Date: Tue, 26 Dec 2023 15:42:39 -0500
Subject: [PATCH] Fix indexes breadcrum link, fixes #4326 (#4327)

* Fix indexes breadcrum link, fixes #4326

* Wrap indexView in router in test
---
 .../quickwit-ui/src/views/IndexView.test.jsx  | 22 ++++---------------
 quickwit/quickwit-ui/src/views/IndexView.tsx  | 19 ++++++++++++----
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/quickwit/quickwit-ui/src/views/IndexView.test.jsx b/quickwit/quickwit-ui/src/views/IndexView.test.jsx
index 0894b2a3dcd..5a91a289e0e 100644
--- a/quickwit/quickwit-ui/src/views/IndexView.test.jsx
+++ b/quickwit/quickwit-ui/src/views/IndexView.test.jsx
@@ -17,12 +17,12 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <http://www.gnu.org/licenses/>.
 
-import { render, unmountComponentAtNode } from "react-dom";
-import { waitFor } from "@testing-library/react";
-import { screen } from '@testing-library/dom';
+import { unmountComponentAtNode } from "react-dom";
+import { render, waitFor, screen } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
 import { Client } from "../services/client";
 import IndexView from "./IndexView";
+import { BrowserRouter } from "react-router-dom";
 
 jest.mock('../services/client');
 const mockedUsedNavigate = jest.fn();
@@ -33,20 +33,6 @@ jest.mock('react-router-dom', () => ({
   })
 }));
 
-let container = null;
-beforeEach(() => {
-  // setup a DOM element as a render target
-  container = document.createElement("div");
-  document.body.appendChild(container);
-});
-
-afterEach(() => {
-  // cleanup on exiting
-  unmountComponentAtNode(container);
-  container.remove();
-  container = null;
-});
-
 test('renders IndexView', async () => {
   const index = {
     metadata: {
@@ -59,7 +45,7 @@ test('renders IndexView', async () => {
   Client.prototype.getIndex.mockImplementation(() => Promise.resolve(index));
 
   await act(async () => {
-    render(<IndexView />, container);
+    render( <IndexView /> , {wrapper: BrowserRouter});
   });
 
   await waitFor(() => expect(screen.getByText(/my-new-fresh-index-uri/)).toBeInTheDocument());
diff --git a/quickwit/quickwit-ui/src/views/IndexView.tsx b/quickwit/quickwit-ui/src/views/IndexView.tsx
index 59478b90721..26b81e5082f 100644
--- a/quickwit/quickwit-ui/src/views/IndexView.tsx
+++ b/quickwit/quickwit-ui/src/views/IndexView.tsx
@@ -17,11 +17,12 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <http://www.gnu.org/licenses/>.
 
-import { Box, styled, Typography, Link, Tab } from '@mui/material';
+import { Box, styled, Typography, Tab } from '@mui/material';
+import Link, { LinkProps } from '@mui/material/Link';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Client } from '../services/client';
 import Loader from '../components/Loader';
-import { useParams } from 'react-router-dom';
+import { Link as RouterLink, useParams } from 'react-router-dom';
 import { Index } from '../utils/models';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
 import { IndexSummary } from '../components/IndexSummary';
@@ -39,6 +40,16 @@ padding-right: 0;
 height: 100%;
 `;
 
+// NOTE : https://mui.com/material-ui/react-breadcrumbs/#integration-with-react-router
+interface LinkRouterProps extends LinkProps {
+  to: string;
+  replace?: boolean;
+}
+
+function LinkRouter(props: LinkRouterProps) {
+  return <Link {...props} component={RouterLink} />;
+}
+
 function IndexView() {
   const { indexId } = useParams();
   const [loading, setLoading] = useState(false)
@@ -123,9 +134,9 @@ function IndexView() {
     <ViewUnderAppBarBox>
       <FullBoxContainer>
         <QBreadcrumbs aria-label="breadcrumb">
-          <Link underline="hover" color="inherit" href="../indexes">
+          <LinkRouter underline="hover" color="inherit" to="/indexes">
             <Typography color="text.primary">Indexes</Typography>
-          </Link>
+          </LinkRouter>
           <Typography color="text.primary">{indexId}</Typography>
         </QBreadcrumbs>
         { renderFetchIndexResult() }