refactor: streamline route matching in InternalRoutes, enhance breadc…

…rumb functionality with basePath, and update object management components for improved navigation consistency
scality · Jan 20, 2025 · eb27789 · eb27789
1 parent a2b2830
commit eb27789
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 29 deletions.
diff --git a/src/react/Routes.tsx b/src/react/Routes.tsx
@@ -302,10 +302,8 @@ function InternalRoutes() {
         },
         active:
           doesRouteMatch('/buckets') ||
-          doesRouteMatch('/accounts/:accountName/buckets') ||
-          doesRouteMatch('/accounts/:accountName/data/buckets') ||
-          doesRouteMatch('/accounts/:accountName/data/buckets/:bucketName') ||
-          doesRouteMatch('/accounts/:accountName/buckets/:bucketName'),
+          doesRouteMatch('/accounts/:accountName/buckets/*') ||
+          doesRouteMatch('/accounts/:accountName/data/buckets/*'),
       },
       {
         label: 'Workflows',
@@ -315,8 +313,8 @@ function InternalRoutes() {
         },
         active:
           doesRouteMatch('/workflows') ||
-          doesRouteMatch('/accounts/:accountName/workflows') ||
-          doesRouteMatch('/accounts/:accountName/data/workflows'),
+          doesRouteMatch('/accounts/:accountName/workflows/*') ||
+          doesRouteMatch('/accounts/:accountName/data/workflows/*'),
       },
       ...(isStorageManager
         ? [

diff --git a/src/react/databrowser/DataBrowser.tsx b/src/react/databrowser/DataBrowser.tsx
@@ -87,6 +87,7 @@ export default function DataBrowser() {
               pathname,
               prefixPath,
               accountName,
+              basePath,
             )}
           />
           <Routes>

diff --git a/src/react/databrowser/objects/Objects.tsx b/src/react/databrowser/objects/Objects.tsx
@@ -1,28 +1,32 @@
+import { AppContainer, TwoPanelLayout } from '@scality/core-ui';
+import { Box } from '@scality/core-ui/dist/next';
 import { useEffect, useMemo, useState } from 'react';
-import { Navigate, useParams } from 'react-router';
+import { useDispatch, useSelector } from 'react-redux';
+import { Navigate, useLocation, useParams } from 'react-router';
+import { AppState } from '../../../types/state';
 import {
   getObjectMetadata,
   listObjects,
-  resetObjectMetadata,
   newSearchListing,
+  resetObjectMetadata,
 } from '../../actions';
 import { UPLOADING_OBJECT } from '../../actions/s3object';
-import { useDispatch, useSelector } from 'react-redux';
-import { AppState } from '../../../types/state';
-import FolderCreate from './FolderCreate';
+import {
+  Breadcrumb,
+  breadcrumbPathsBuckets,
+} from '../../ui-elements/Breadcrumb';
+import { usePrefixWithSlash, useQueryParams } from '../../utils/hooks';
 import {
   LIST_OBJECTS_S3_TYPE,
   LIST_OBJECT_VERSIONS_S3_TYPE,
 } from '../../utils/s3';
+import FolderCreate from './FolderCreate';
 import ObjectDelete from './ObjectDelete';
 import ObjectDetails from './ObjectDetails';
+import ObjectHead from './ObjectHead';
 import ObjectList from './ObjectList';
 import ObjectUpload from './ObjectUpload';
-import { usePrefixWithSlash, useQueryParams } from '../../utils/hooks';
-import { AppContainer, TwoPanelLayout } from '@scality/core-ui';
-import ObjectHead from './ObjectHead';
-import { useBasenameRelativeNavigate } from '@scality/module-federation';
-
+import { useConfig } from '../../next-architecture/ui/ConfigProvider';
 export default function Objects() {
   const dispatch = useDispatch();
   const [loaded, setLoaded] = useState(false);
@@ -50,7 +54,6 @@ export default function Objects() {
   const searchInput = query.get('metadatasearch');
   const objectKey = query.get('prefix');
   const versionId = query.get('versionId');
-  const navigate = useBasenameRelativeNavigate();
   const toggled = useMemo(
     () =>
       objects.filter(
@@ -61,8 +64,16 @@ export default function Objects() {
       ),
     [objects, isShowVersions, objectKey, versionId],
   );
-  const { bucketName: bucketNameParam } = useParams<{ bucketName: string }>();
+  const { bucketName: bucketNameParam, accountName } = useParams<{
+    bucketName: string;
+    accountName: string;
+  }>();
   const prefixWithSlash = usePrefixWithSlash();
+  const prefixPath = query.get('prefix');
+
+  const { pathname } = useLocation();
+  const { basePath } = useConfig();
+
   useEffect(() => {
     if (searchInput) {
       dispatch(
@@ -132,6 +143,18 @@ export default function Objects() {
   // }
   return (
     <>
+      <AppContainer.ContextContainer>
+        <Box display="flex" alignItems="center" justifyContent="space-between">
+          <Breadcrumb
+            breadcrumbPaths={breadcrumbPathsBuckets(
+              pathname,
+              prefixPath,
+              accountName,
+              basePath,
+            )}
+          />
+        </Box>
+      </AppContainer.ContextContainer>
       <AppContainer.OverallSummary>
         <ObjectHead bucketName={bucketNameParam} />
       </AppContainer.OverallSummary>

diff --git a/src/react/ui-elements/Breadcrumb.tsx b/src/react/ui-elements/Breadcrumb.tsx
@@ -53,19 +53,19 @@ export const breadcrumbPathsBuckets = (
   pathname: string,
   prefixPath: string,
   accountName: string,
+  basePath: string,
 ): JSX.IntrinsicElements['label'][] => {
   const accountsURLPrefix = `/accounts/:accountName`;
   const matchCreateBucketRoute = matchPath(
     `${accountsURLPrefix}/create-bucket`,
     pathname,
   );
-  const config = useConfig();
   if (matchCreateBucketRoute) {
     return [<label key="buckets">create bucket</label>];
   }
 
   const matchObjectRoutes = matchPath(
-    config.basePath + `${accountsURLPrefix}/buckets/:bucketName/objects*`,
+    basePath + `${accountsURLPrefix}/buckets/:bucketName/objects*`,
     pathname,
   );
 
@@ -82,7 +82,7 @@ export const breadcrumbPathsBuckets = (
 
     if (
       matchPath(
-        config.basePath +
+        basePath +
           `${accountsURLPrefix}/buckets/:bucketName/objects/retention-setting`,
         pathname,
       )
@@ -113,7 +113,7 @@ export const breadcrumbPathsBuckets = (
             <Link
               to={{
                 pathname:
-                  config.basePath +
+                  basePath +
                   `${accountsURLPrefix}/buckets/${bucketName}/objects`,
                 search: `?prefix=${prefix}/`,
               }}
@@ -129,7 +129,7 @@ export const breadcrumbPathsBuckets = (
         {' '}
         <Link
           to={{
-            pathname: config.basePath + '/buckets',
+            pathname: basePath + '/buckets',
           }}
         >
           {' '}
@@ -141,8 +141,7 @@ export const breadcrumbPathsBuckets = (
         <Link
           to={{
             pathname:
-              config.basePath +
-              `${accountsURLPrefix}/buckets/${bucketName}/objects`,
+              basePath + `${accountsURLPrefix}/buckets/${bucketName}/objects`,
           }}
         >
           {' '}
@@ -177,8 +176,7 @@ export const breadcrumbPathsBuckets = (
   }
 
   const matchBucketRetensionSettingRoute = matchPath(
-    config.basePath +
-      `${accountsURLPrefix}buckets/:bucketName/retention-setting`,
+    basePath + `${accountsURLPrefix}buckets/:bucketName/retention-setting`,
     pathname,
   );
 
@@ -187,7 +185,7 @@ export const breadcrumbPathsBuckets = (
       <label key="buckets">
         <Link
           to={{
-            pathname: config.basePath + '/buckets',
+            pathname: basePath + '/buckets',
           }}
         >
           <ConstrainedText
@@ -202,7 +200,7 @@ export const breadcrumbPathsBuckets = (
   }
 
   const matchBucketsRoute = matchPath(
-    config.basePath + '/accounts/:accountName/buckets/:bucketName',
+    basePath + '/accounts/:accountName/buckets/:bucketName',
     pathname,
   );