bugfixes(fe): fix toolbar tabs selected state (#1588)

Author: AndreyNenashev

odd-platform-ui/package.json

@@ -80,7 +80,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-multi-date-picker": "^4.4.1",
     "react-redux": "^8.1.2",
-    "react-router-dom": "^6.20.1",
+    "react-router-dom": "^6.21.2",
     "react-truncate-markup": "^5.1.2",
     "recharts": "^2.10.2",
     "styled-components": "^6.1.1",

odd-platform-ui/pnpm-lock.yaml

@@ -73,7 +73,7 @@ const App: React.FC = () => {
             <Route path={dataQualityPath()} element={<DataQuality />} />
             <Route path={`${dataModellingPath()}/*`} element={<DataModeling />} />
             <Route
-              path={`${lookupTablesPath()}`}
+              path={lookupTablesPath()}
               element={
                 <WithPermissionsProvider
                   allowedPermissions={[

odd-platform-ui/src/components/App.tsx

@@ -1,20 +1,24 @@
 import type React from 'react';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useLocation, useResolvedPath } from 'react-router-dom';
 import type { AppTabItem } from './AppTabs';
 
 const useSetSelectedTab = (
   tabs: AppTabItem[],
   setSelectedTab: React.Dispatch<React.SetStateAction<number>>
 ) => {
-  const resolvedPath = useResolvedPath(useLocation().pathname);
-  useEffect(() => {
-    const foundIndex = tabs.findIndex(({ link }) => {
-      const { pathname } = resolvedPath;
-      return link ? pathname.includes(link) || link.includes(pathname) : false;
-    });
-    setSelectedTab(foundIndex);
-  }, [tabs, resolvedPath]);
+  const { pathname } = useResolvedPath(useLocation());
+
+  const findTabIndex = useCallback(
+    () =>
+      tabs.findIndex(({ link }) => {
+        if (link) return pathname.includes(link) || link.includes(pathname);
+        return false;
+      }),
+    [tabs, pathname]
+  );
+
+  useEffect(() => setSelectedTab(findTabIndex()), [tabs, pathname]);
 };
 
 export default useSetSelectedTab;

odd-platform-ui/src/components/shared/elements/AppTabs/useSetSelectedTab.ts

@@ -1,5 +1,5 @@
-import React, { type FC, useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { type FC, useCallback, useMemo, useState, useEffect } from 'react';
+import { matchPath, useLocation, useNavigate, useResolvedPath } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useCreateSearch, useQueryParams } from 'lib/hooks';
 import {
@@ -12,6 +12,7 @@ import AppTabs, { type AppTabItem } from 'components/shared/elements/AppTabs/App
 import {
   activityPath,
   alertsPath,
+  dataEntitiesPath,
   dataQualityPath,
   directoryPath,
   lookupTablesPath,
@@ -20,17 +21,17 @@ import {
   searchPath,
   termsSearchPath,
 } from 'routes';
-import useSetSelectedTab from '../../AppTabs/useSetSelectedTab';
 
 const ToolbarTabs: FC = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const navigate = useNavigate();
   const createSearch = useCreateSearch();
+  const { pathname } = useResolvedPath(useLocation());
   const { defaultQueryString: activityQueryString } =
     useQueryParams<ActivityQuery>(defaultActivityQuery);
 
-  const tabs = useMemo<AppTabItem[]>(
+  const tabs = useMemo<AppTabItem<string>[]>(
     () => [
       {
         name: t('Catalog'),
@@ -39,49 +40,74 @@ const ToolbarTabs: FC = () => {
       {
         name: t('Directory'),
         link: directoryPath(),
+        value: 'directory',
       },
       {
         name: t('Data Quality'),
         link: dataQualityPath(),
+        value: 'data-quality',
       },
       {
         name: t('Data Modelling'),
         link: queryExamplesPath(),
         hint: t('BETA'),
         hintType: 'secondary',
+        value: 'data-modelling',
       },
       {
         name: t('Master Data'),
         link: lookupTablesPath(),
+        value: 'master-data',
       },
       {
         name: t('Management'),
         link: managementPath(),
+        value: 'management',
       },
       {
         name: t('Dictionary'),
         link: termsSearchPath(),
+        value: 'dictionary',
       },
       {
         name: t('Alerts'),
         link: alertsPath('all'),
+        value: 'alerts',
       },
       {
         name: t('Activity'),
         link: activityPath(activityQueryString),
+        value: 'activity',
       },
     ],
     [activityQueryString, t]
   );
 
   const [selectedTab, setSelectedTab] = useState(-1);
 
-  useSetSelectedTab(tabs, setSelectedTab);
+  useEffect(() => {
+    if (matchPath('/', pathname)) {
+      setSelectedTab(-1);
+      return;
+    }
+
+    if (
+      matchPath(`${searchPath()}/*`, pathname) ||
+      matchPath(`${dataEntitiesPath()}/*`, pathname)
+    ) {
+      setSelectedTab(0);
+      return;
+    }
+
+    tabs.forEach((tab, idx) => {
+      if (tab.value && pathname.includes(tab.value)) {
+        setSelectedTab(idx);
+      }
+    });
+  }, [pathname]);
 
   const handleTabClick = useCallback(
     (idx: number) => {
-      setSelectedTab(idx);
-
       const initialParams = { query: '', pageSize: 30, filters: {} };
 
       if (tabs[idx].name === t('Dictionary')) {