diff --git a/odd-platform-ui/package.json b/odd-platform-ui/package.json index dd2aad749..80c14b53a 100644 --- a/odd-platform-ui/package.json +++ b/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", diff --git a/odd-platform-ui/pnpm-lock.yaml b/odd-platform-ui/pnpm-lock.yaml index aedd65a87..fd2ac1be6 100644 --- a/odd-platform-ui/pnpm-lock.yaml +++ b/odd-platform-ui/pnpm-lock.yaml @@ -133,8 +133,8 @@ dependencies: specifier: ^8.1.2 version: 8.1.2(@types/react-dom@18.2.17)(@types/react@18.2.39)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1) react-router-dom: - specifier: ^6.20.1 - version: 6.20.1(react-dom@18.2.0)(react@18.2.0) + specifier: ^6.21.2 + version: 6.21.2(react-dom@18.2.0)(react@18.2.0) react-truncate-markup: specifier: ^5.1.2 version: 5.1.2(react@18.2.0) @@ -1427,8 +1427,8 @@ packages: reselect: 4.1.8 dev: false - /@remix-run/router@1.13.1: - resolution: {integrity: sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==} + /@remix-run/router@1.14.2: + resolution: {integrity: sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==} engines: {node: '>=14.0.0'} dev: false @@ -6334,26 +6334,26 @@ packages: engines: {node: '>=0.10.0'} dev: true - /react-router-dom@6.20.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==} + /react-router-dom@6.21.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-tE13UukgUOh2/sqYr6jPzZTzmzc70aGRP4pAjG2if0IP3aUT+sBtAKUJh0qMh0zylJHGLmzS+XWVaON4UklHeg==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' react-dom: '>=16.8' dependencies: - '@remix-run/router': 1.13.1 + '@remix-run/router': 1.14.2 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-router: 6.20.1(react@18.2.0) + react-router: 6.21.2(react@18.2.0) dev: false - /react-router@6.20.1(react@18.2.0): - resolution: {integrity: sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==} + /react-router@6.21.2(react@18.2.0): + resolution: {integrity: sha512-jJcgiwDsnaHIeC+IN7atO0XiSRCrOsQAHHbChtJxmgqG2IaYQXSnhqGb5vk2CU/wBQA12Zt+TkbuJjIn65gzbA==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' dependencies: - '@remix-run/router': 1.13.1 + '@remix-run/router': 1.14.2 react: 18.2.0 dev: false diff --git a/odd-platform-ui/src/components/App.tsx b/odd-platform-ui/src/components/App.tsx index 25e9cd27c..ec821e6c5 100644 --- a/odd-platform-ui/src/components/App.tsx +++ b/odd-platform-ui/src/components/App.tsx @@ -73,7 +73,7 @@ const App: React.FC = () => { } /> } /> > ) => { - 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; diff --git a/odd-platform-ui/src/components/shared/elements/AppToolbar/ToolbarTabs/ToolbarTabs.tsx b/odd-platform-ui/src/components/shared/elements/AppToolbar/ToolbarTabs/ToolbarTabs.tsx index ac6dffdeb..8b5aebadd 100644 --- a/odd-platform-ui/src/components/shared/elements/AppToolbar/ToolbarTabs/ToolbarTabs.tsx +++ b/odd-platform-ui/src/components/shared/elements/AppToolbar/ToolbarTabs/ToolbarTabs.tsx @@ -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(defaultActivityQuery); - const tabs = useMemo( + const tabs = useMemo[]>( () => [ { name: t('Catalog'), @@ -39,36 +40,44 @@ 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] @@ -76,12 +85,29 @@ const ToolbarTabs: FC = () => { 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')) {