[bug fix] fix prefix experiment nav highlight issue (#5575)

Co-authored-by: Ubuntu <core@lijiao-vm.blbee4diapvedlj52zlxs1ydub.phxx.internal.cloudapp.net>

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);

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`);
                         }}
                     >
                         <img src={overview} alt={iconName.toString()} />

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');
                         }}
                     >