From 8d0053f8e1d195d2d8ae50946986b650f73c1c13 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste WATENBERG <jean-baptiste.watenberg@scality.com>
Date: Tue, 24 Dec 2024 15:00:11 +0100
Subject: [PATCH] Fix query params routing for tabs

---
 package-lock.json                              | 18 +++++++++---------
 package.json                                   |  4 ++--
 src/lib/components/tabsv2/Tabsv2.component.tsx | 12 +++++++++---
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eb74a8a8fd..460e5c8442 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,8 +27,8 @@
         "react-dropzone": "^14.2.3",
         "react-hook-form": "^7.49.2",
         "react-query": "^3.34.0",
-        "react-router": "^7.0.1",
-        "react-router-dom": "^7.0.1",
+        "react-router": "7.0.1",
+        "react-router-dom": "7.0.1",
         "react-select": "4.3.1",
         "react-table": "^7.7.0",
         "react-test-renderer": "^18.3.1",
@@ -18863,9 +18863,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz",
-      "integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.1.tgz",
+      "integrity": "sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==",
       "dependencies": {
         "@types/cookie": "^0.6.0",
         "cookie": "^1.0.1",
@@ -18886,11 +18886,11 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.2.tgz",
-      "integrity": "sha512-VJOQ+CDWFDGaWdrG12Nl+d7yHtLaurNgAQZVgaIy7/Xd+DojgmYLosFfZdGz1wpxmjJIAkAMVTKWcvkx1oggAw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.1.tgz",
+      "integrity": "sha512-duBzwAAiIabhFPZfDjcYpJ+f08TMbPMETgq254GWne2NW1ZwRHhZLj7tpSp8KGb7JvZzlLcjGUnqLxpZQVEPng==",
       "dependencies": {
-        "react-router": "7.0.2"
+        "react-router": "7.0.1"
       },
       "engines": {
         "node": ">=20.0.0"
diff --git a/package.json b/package.json
index e20df5e5bc..099fa7463d 100644
--- a/package.json
+++ b/package.json
@@ -115,8 +115,8 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.49.2",
     "react-query": "^3.34.0",
-    "react-router": "^7.0.1",
-    "react-router-dom": "^7.0.1",
+    "react-router": "7.0.1",
+    "react-router-dom": "7.0.1",
     "react-select": "4.3.1",
     "react-table": "^7.7.0",
     "react-test-renderer": "^18.3.1",
diff --git a/src/lib/components/tabsv2/Tabsv2.component.tsx b/src/lib/components/tabsv2/Tabsv2.component.tsx
index 00f4fc28e0..11d0d31128 100644
--- a/src/lib/components/tabsv2/Tabsv2.component.tsx
+++ b/src/lib/components/tabsv2/Tabsv2.component.tsx
@@ -12,6 +12,7 @@ import {
   Routes,
   useLocation,
   useNavigate,
+  useRoutes,
 } from 'react-router';
 import styled from 'styled-components';
 import { ButtonIcon } from '../buttonv2/Buttonv2.component';
@@ -115,10 +116,10 @@ function Tabs({
     filteredTabsChildren.forEach((child, index) => {
       const isSelected =
         !!matchPath(
-          location.pathname,
-          child.props.path.startsWith('/')
+          (child.props.path.startsWith('/')
             ? child.props.path
-            : url + '/' + child.props.path,
+            : url + '/' + child.props.path) + '*',
+          location.pathname,
         ) && (child.props.query ? matchQuery(child.props.query) : true);
 
       if (isSelected) {
@@ -140,6 +141,7 @@ function Tabs({
     handleKeyDown,
     displayScroll,
   } = useScrollingTabs(selectedTabIndex);
+
   const tabItems = filteredTabsChildren.map((child, index) => {
     const {
       path,
@@ -225,6 +227,10 @@ function Tabs({
           {filteredTabsChildren.map((tab, index) => {
             const path = tab.props.path.split('/').pop();
 
+            if (tab.props.query && !matchQuery(tab.props.query)) {
+              return <></>;
+            }
+
             return (
               <Route
                 key={index}