From b9d9492444c4071af4d0d72672cf4a83713984b3 Mon Sep 17 00:00:00 2001 From: Lijiaoa <61399850+Lijiaoa@users.noreply.github.com> Date: Fri, 30 Jun 2023 10:34:44 +0800 Subject: [PATCH] [bug fix] fix prefix experiment nav highlight issue (#5575) Co-authored-by: Ubuntu --- ts/webui/src/components/nav/Nav.tsx | 15 ++++++-- .../src/components/nav/TooltipHostForIcon.tsx | 11 +++--- ts/webui/src/components/nav/WebsiteRouter.tsx | 34 +++++++++---------- 3 files changed, 34 insertions(+), 26 deletions(-) diff --git a/ts/webui/src/components/nav/Nav.tsx b/ts/webui/src/components/nav/Nav.tsx index c5c1c198c..f0aacbec3 100644 --- a/ts/webui/src/components/nav/Nav.tsx +++ b/ts/webui/src/components/nav/Nav.tsx @@ -24,13 +24,22 @@ const navMaintoken: IStackTokens = { childrenGap: 16 }; +export const getRouter = (): string => { + const page = window.location.pathname; + if (page.endsWith('/oview') || page.endsWith('/')) { + return '/oview'; + } + if (page.endsWith('/detail')) { + return '/detail'; + } + return ''; +}; const NavCon = (): any => { const [version, setVersion] = useState('999' as string); const { changeInterval, refreshPage } = useContext(NavContext); + const router = getRouter(); const [currentPage, setcurrentPage] = useState( - window.location.pathname === '/oview' || window.location.pathname === '/' - ? 'Overview' - : ('Trials detail' as 'Overview' | 'Trials detail') + router === '/oview' ? 'Overview' : ('Trials detail' as 'Overview' | 'Trials detail') ); const [visibleExperimentPanel, setVisibleExperimentPanel] = useState(false); const [refreshBtnDisabled, setRefreshBtnDisabled] = useState(false); diff --git a/ts/webui/src/components/nav/TooltipHostForIcon.tsx b/ts/webui/src/components/nav/TooltipHostForIcon.tsx index 9979f64d6..ccdd921ae 100644 --- a/ts/webui/src/components/nav/TooltipHostForIcon.tsx +++ b/ts/webui/src/components/nav/TooltipHostForIcon.tsx @@ -15,18 +15,19 @@ interface TooltipHostIndexProps { const TooltipHostForIcon = (props: TooltipHostIndexProps): any => { const { iconName, tooltip, pageURL } = props; const [isActivePage, setIsActivePage] = useState(window.location.pathname === pageURL); + const prefix = getPrefix() || ''; const [overview, setOverview] = useState( - isActivePage ? `${getPrefix() || ''}/icons/${iconName}-1.png` : `${getPrefix() || ''}/icons/${iconName}.png` + isActivePage ? `${prefix}/icons/${iconName}-1.png` : `${prefix}/icons/${iconName}.png` ); const [mouHover, setMouhover] = useState(false); useEffect(() => { if (mouHover === true) { - setOverview(`${getPrefix() || ''}/icons/${iconName}-1.png`); + setOverview(`${prefix}/icons/${iconName}-1.png`); } else { if (window.location.pathname === pageURL) { - setOverview(`${getPrefix() || ''}/icons/${iconName}-1.png`); + setOverview(`${prefix}/icons/${iconName}-1.png`); } else { - setOverview(`${getPrefix() || ''}/icons/${iconName}.png`); + setOverview(`${prefix}/icons/${iconName}.png`); } } }, [mouHover, isActivePage]); @@ -46,7 +47,7 @@ const TooltipHostForIcon = (props: TooltipHostIndexProps): any => { onMouseLeave={() => setMouhover(false)} onClick={() => { setIsActivePage(window.location.pathname === pageURL); - setOverview(`${getPrefix() || ''}/icons/${iconName}-1.png`); + setOverview(`${prefix}/icons/${iconName}-1.png`); }} > {iconName.toString()} diff --git a/ts/webui/src/components/nav/WebsiteRouter.tsx b/ts/webui/src/components/nav/WebsiteRouter.tsx index 1bb94bd9f..d2a5168fd 100644 --- a/ts/webui/src/components/nav/WebsiteRouter.tsx +++ b/ts/webui/src/components/nav/WebsiteRouter.tsx @@ -3,6 +3,7 @@ import { NavLink } from 'react-router-dom'; import { getPrefix } from '@static/function'; import { TOOLTIPSTYLE } from '@static/const'; import { DirectionalHint, TooltipHost } from '@fluentui/react'; +import { getRouter } from './Nav'; // feedback, document, version btns type pagesType = 'Overview' | 'Trials detail'; @@ -10,32 +11,29 @@ interface WebRoutersInterface { currentPage: pagesType; changeCurrentPage: (value: pagesType) => void; } + const WebRouters = (props: WebRoutersInterface): any => { const { currentPage, changeCurrentPage } = props; // Overview or Trials detail + const prefix = getPrefix() || ''; const [overviewImgsrc, setOverviewImgsrc] = useState( - // window.location.pathname === '/oview' - currentPage === 'Overview' - ? `${getPrefix() || ''}/icons/overview-1.png` - : `${getPrefix() || ''}/icons/overivew.png` + currentPage === 'Overview' ? `${prefix}/icons/overview-1.png` : `${prefix}/icons/overivew.png` ); const [detailImgsrc, setdetailImgsrc] = useState( - // window.location.pathname === '/detail' - currentPage === 'Trials detail' - ? `${getPrefix() || ''}/icons/detail-1.png` - : `${getPrefix() || ''}/icons/detail.png` + currentPage === 'Trials detail' ? `${prefix}/icons/detail-1.png` : `${prefix}/icons/detail.png` ); const [overviewMouhover, setOverviewMouhover] = useState(false); const [detailMouhover, setDetailMouhover] = useState(false); useEffect(() => { - if (overviewMouhover === false && window.location.pathname !== '/oview') { - setOverviewImgsrc(`${getPrefix() || ''}/icons/overview.png`); + const result = getRouter(); + if (overviewMouhover === false && !(result === '/oview')) { + setOverviewImgsrc(`${prefix}/icons/overview.png`); } else { - setOverviewImgsrc(`${getPrefix() || ''}/icons/overview-1.png`); + setOverviewImgsrc(`${prefix}/icons/overview-1.png`); } - if (detailMouhover === false && window.location.pathname !== '/detail') { - setdetailImgsrc(`${getPrefix() || ''}/icons/detail.png`); + if (detailMouhover === false && !(result === '/detail')) { + setdetailImgsrc(`${prefix}/icons/detail.png`); } else { - setdetailImgsrc(`${getPrefix() || ''}/icons/detail-1.png`); + setdetailImgsrc(`${prefix}/icons/detail-1.png`); } }, [overviewMouhover, detailMouhover]); @@ -53,8 +51,8 @@ const WebRouters = (props: WebRoutersInterface): any => { onMouseEnter={() => setOverviewMouhover(true)} onMouseLeave={() => setOverviewMouhover(false)} onClick={() => { - setOverviewImgsrc(`${getPrefix() || ''}/icons/overview-1.png`); - setdetailImgsrc(`${getPrefix() || ''}/icons/detail.png`); + setOverviewImgsrc(`${prefix}/icons/overview-1.png`); + setdetailImgsrc(`${prefix}/icons/detail.png`); changeCurrentPage('Overview'); }} > @@ -74,8 +72,8 @@ const WebRouters = (props: WebRoutersInterface): any => { onMouseEnter={() => setDetailMouhover(true)} onMouseLeave={() => setDetailMouhover(false)} onClick={() => { - setdetailImgsrc(`${getPrefix() || ''}/icons/detail-1.png`); - setOverviewImgsrc(`${getPrefix() || ''}/icons/overview.png`); + setdetailImgsrc(`${prefix}/icons/detail-1.png`); + setOverviewImgsrc(`${prefix}/icons/overview.png`); changeCurrentPage('Trials detail'); }} >