upgrade react router to v6 (#4975)

ts/webui/package.json

@@ -43,8 +43,7 @@
     "react-monaco-editor": "^0.32.1",
     "react-paginate": "^6.3.2",
     "react-responsive": "^8.1.1",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.3.0",
     "react-table": "^7.0.0-rc.15",
     "resolve": "^1.10.0",
     "sass-loader": "^12.1.0",

ts/webui/src/App.tsx

 import * as React from 'react';
+import { Outlet } from 'react-router-dom';
 import { Stack } from '@fluentui/react';
 import { SlideNavBtns } from '@components/nav/slideNav/SlideNavBtns';
 import { EXPERIMENT, TRIALS } from '@static/datamodel';
@@ -166,6 +167,7 @@ class App extends React.Component<{}, AppState> {
                                         closeTimer: this.closeTimer
                                     }}
                                 >
+                                    <Outlet />
                                     {this.props.children}
                                 </AppContext.Provider>
                             </Stack>

ts/webui/src/components/experiment/trialdetail/ChangeColumnComponent.tsx

@@ -118,7 +118,7 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
                         <PrimaryButton
                             text='Save'
                             onClick={this.saveUserSelectColumn}
-                            disabled={currentSelected.length < (minSelected === undefined ? 1 : minSelected)}
+                            disabled={currentSelected.length < (minSelected ?? 1)}
                         />
                         <DefaultButton text='Cancel' onClick={this.cancelOption} />
                     </DialogFooter>

ts/webui/src/components/nav/slideNav/NNItabs.tsx

@@ -2,16 +2,17 @@ import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 
 import { getPrefix } from '@static/function';
+const activeClassName = 'selected';
 
 const OVERVIEWTABS = (
-    <NavLink to='/oview' activeClassName='selected' className='common-tabs'>
-        Overview
+    <NavLink to='/oview' className={({ isActive }) => (isActive ? `${activeClassName} link` : 'link')}>
+        <span className='common-tabs'>Overview</span>
     </NavLink>
 );
 
 const DETAILTABS = (
-    <NavLink to='/detail' activeClassName='selected' className='common-tabs'>
-        Trials detail
+    <NavLink to='/detail' className={({ isActive }) => (isActive ? `${activeClassName} link` : 'link')}>
+        <span className='common-tabs'>Trials detail</span>
     </NavLink>
 );
 

ts/webui/src/index.tsx

@@ -2,7 +2,7 @@ import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import { getPrefix } from './static/function';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 const Overview = lazy(() => import('./components/experiment/overview/Overview'));
 const TrialsDetail = lazy(() => import('./components/experiment/trialdetail/TrialsDetail'));
 const ExperimentManagerIndex = lazy(() => import('./components/experimentManagement/ExperimentManagerIndex'));
@@ -13,24 +13,24 @@ import * as serviceWorker from './serviceWorker';
 const path = getPrefix();
 
 ReactDOM.render(
-    <Router basename={path === undefined ? null : path}>
     <Suspense
         fallback={
             <div className='loading'>
-                    <img title='loading-graph' src={(path || '') + '/loading.gif'} />
+                <img title='loading-graph' src={(path ?? '') + '/loading.gif'} />
             </div>
         }
     >
-            <Route path='/experiment' component={ExperimentManagerIndex} exact />
-            <Switch>
-                <App>
-                    <Route path='/' component={Overview} exact />
-                    <Route path='/oview' component={Overview} />
-                    <Route path='/detail' component={TrialsDetail} />
-                </App>
-            </Switch>
-        </Suspense>
-    </Router>,
+        <Router basename={path ?? ''}>
+            <Routes>
+                <Route path='/experiment' element={<ExperimentManagerIndex />} />
+                <Route element={<App />}>
+                    <Route path='/oview' element={<Overview />} />
+                    <Route path='/detail' element={<TrialsDetail />} />
+                    <Route path='/*' element={<Navigate to='/oview' />} />
+                </Route>
+            </Routes>
+        </Router>
+    </Suspense>,
 
     document.getElementById('root')
 );

ts/webui/src/static/model/experiment.ts

@@ -128,11 +128,11 @@ class Experiment {
     }
 
     get profile(): ExperimentProfile {
-        return this.profileField === undefined ? emptyProfile : this.profileField;
+        return this.profileField ?? emptyProfile;
     }
 
     get metadata(): ExperimentMetadata {
-        return this.metadataField === undefined ? emptyMetadata : this.metadataField;
+        return this.metadataField ?? emptyMetadata;
     }
 
     get config(): ExperimentConfig {
@@ -146,7 +146,7 @@ class Experiment {
 
     get maxTrialNumber(): number {
         const value = this.config.maxTrialNumber || (this.config as any).maxTrialNum;
-        return value === undefined ? Infinity : value;
+        return value ?? Infinity;
     }
 
     get trialConcurrency(): number {

ts/webui/src/static/style/experiment/overview/succTable.scss

@@ -20,9 +20,9 @@ $tableHeight: 432px;
         top: 50%;
         transform: translate(-50%, -50%);
 
-        a {
+        .common-tabs {
+            color: #0071bc;
             font-weight: 500;
-            color: blue;
         }
     }
 

ts/webui/src/static/style/nav/nav.scss

@@ -72,25 +72,20 @@ $barHeight: 56px;
 }
 
 /* overview and detail tabs common style */
-a.common-tabs {
+.common-tabs {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 16px;
     color: #b8c7ce;
     text-decoration: none;
 }
 
-.common-tabs:visited,
-.selected:hover {
-    color: #fff;
-    text-decoration: none;
-}
-
-.common-tabs:hover,
-.selected {
+.selected .common-tabs {
     color: #fff;
+    padding-bottom: 2px;
     border-bottom: 1px solid #fff;
 }
 
+
 .left-right-margin {
     margin-left: 20px;
     margin-right: 20px;