upgrade to react router 7

ui/src/views/jobs/Jobs.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import JobTable from '../../components/table/JobTable';
 import { useSelector, useDispatch } from 'react-redux';
 import { xhrDelete, xhrPut } from '../../services/xhr';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import ProcessingTimes from './ProcessingTimes';
 import { Button, Toast } from '@douyinfe/semi-ui';
 import { IconPlusCircle } from '@douyinfe/semi-icons';
@@ -12,7 +12,7 @@ import './Jobs.less';
 export default function Jobs() {
   const jobs = useSelector((state) => state.jobs.jobs);
   const processingTimes = useSelector((state) => state.jobs.processingTimes);
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const onJobRemoval = async (jobId) => {
@@ -43,7 +43,7 @@ export default function Jobs() {
           type="primary"
           icon={<IconPlusCircle />}
           className="jobs__newButton"
-          onClick={() => history.push('/jobs/new')}
+          onClick={() => navigate('/jobs/new')}
         >
           New Job
         </Button>
@@ -53,8 +53,8 @@ export default function Jobs() {
         jobs={jobs || []}
         onJobRemoval={onJobRemoval}
         onJobStatusChanged={onJobStatusChanged}
-        onJobInsight={(jobId) => history.push(`/jobs/insights/${jobId}`)}
-        onJobEdit={(jobId) => history.push(`/jobs/edit/${jobId}`)}
+        onJobInsight={(jobId) => navigate(`/jobs/insights/${jobId}`)}
+        onJobEdit={(jobId) => navigate(`/jobs/edit/${jobId}`)}
       />
     </div>
   );

ui/src/views/jobs/insights/JobInsight.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { roundToNext5Minute } from '../../../services/time/timeService';
 import Headline from '../../../components/headline/Headline';
 import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router';
+import { useParams } from 'react-router-dom';
 import Linechart from './Linechart';
 
 const JobInsight = function JobInsight() {

ui/src/views/jobs/mutation/JobMutation.jsx

@@ -7,8 +7,7 @@ import ProviderMutator from './components/provider/ProviderMutator';
 import Headline from '../../../components/headline/Headline';
 import { useDispatch, useSelector } from 'react-redux';
 import { xhrPost } from '../../../services/xhr';
-import { useHistory } from 'react-router-dom';
-import { useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Divider, Input, Switch, Button, TagInput, Toast } from '@douyinfe/semi-ui';
 import './JobMutation.less';
 import { SegmentPart } from '../../../components/segment/SegmentPart';
@@ -34,7 +33,7 @@ export default function JobMutator() {
   const [blacklist, setBlacklist] = useState(defaultBlacklist);
   const [notificationAdapterData, setNotificationAdapterData] = useState(defaultNotificationAdapter);
   const [enabled, setEnabled] = useState(defaultEnabled);
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const isSavingEnabled = () => {
@@ -53,7 +52,7 @@ export default function JobMutator() {
       });
       await dispatch.jobs.getJobs();
       Toast.success('Job successfully saved...');
-      history.push('/jobs');
+      navigate('/jobs');
     } catch (Exception) {
       console.error(Exception.json.message);
       Toast.error(Exception.json != null ? Exception.json.message : Exception);
@@ -177,7 +176,7 @@ export default function JobMutator() {
           <Switch className="jobMutation__spaceTop" onChange={(checked) => setEnabled(checked)} checked={enabled} />
         </SegmentPart>
         <Divider margin="1rem" />
-        <Button type="danger" style={{ marginRight: '1rem' }} onClick={() => history.push('/jobs')}>
+        <Button type="danger" style={{ marginRight: '1rem' }} onClick={() => navigate('/jobs')}>
           Cancel
         </Button>
         <Button type="primary" icon={<IconPlusCircle />} disabled={!isSavingEnabled()} onClick={mutateJob}>

ui/src/views/login/Login.jsx

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import cityBackground from '../../assets/city_background.jpg';
 import Logo from '../../components/logo/Logo';
 import { xhrPost } from '../../services/xhr';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { Input, Button, Banner, Toast } from '@douyinfe/semi-ui';
 
@@ -16,7 +16,7 @@ export default function Login() {
   const [password, setPassword] = React.useState('');
   const [error, setError] = React.useState(null);
   const demoMode = useSelector((state) => state.demoMode.demoMode || false);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     async function init() {
@@ -46,7 +46,7 @@ export default function Login() {
     Toast.success('Login successful!');
 
     await dispatch.user.getCurrentUser();
-    history.push('/jobs');
+    navigate('/jobs');
   };
 
   return (

ui/src/views/user/Users.jsx

@@ -7,7 +7,7 @@ import { IconPlus } from '@douyinfe/semi-icons';
 import { Button } from '@douyinfe/semi-ui';
 import UserRemovalModal from './UserRemovalModal';
 import { xhrDelete } from '../../services/xhr';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 
 import './Users.less';
 
@@ -16,7 +16,7 @@ const Users = function Users() {
   const [loading, setLoading] = React.useState(true);
   const users = useSelector((state) => state.user.users);
   const [userIdToBeRemoved, setUserIdToBeRemoved] = React.useState(null);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   React.useEffect(() => {
     async function init() {
@@ -50,7 +50,7 @@ const Users = function Users() {
             type="primary"
             className="users__newButton"
             icon={<IconPlus />}
-            onClick={() => history.push('/users/new')}
+            onClick={() => navigate('/users/new')}
           >
             Create new User
           </Button>
@@ -58,7 +58,7 @@ const Users = function Users() {
           <UserTable
             user={users}
             onUserEdit={(userId) => {
-              history.push(`/users/edit/${userId}`);
+              navigate(`/users/edit/${userId}`);
             }}
             onUserRemoval={(userId) => {
               setUserIdToBeRemoved(userId);

ui/src/views/user/mutation/UserMutator.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { xhrGet, xhrPost } from '../../../services/xhr';
-import { useHistory, useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { Divider, Input, Switch, Button, Toast } from '@douyinfe/semi-ui';
 import './UserMutator.less';
@@ -15,7 +15,7 @@ const UserMutator = function UserMutator() {
   const [password2, setPassword2] = React.useState('');
   const [isAdmin, setIsAdmin] = React.useState(false);
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
 
   React.useEffect(() => {
@@ -50,7 +50,7 @@ const UserMutator = function UserMutator() {
       });
       await dispatch.user.getUsers();
       Toast.success('User successfully saved...');
-      history.push('/users');
+      navigate('/users');
     } catch (error) {
       console.error(error);
       Toast.error(error.json.message);
@@ -98,7 +98,7 @@ const UserMutator = function UserMutator() {
         <Switch checked={isAdmin} onChange={(checked) => setIsAdmin(checked)} />
       </SegmentPart>
       <Divider margin="1rem" />
-      <Button type="danger" style={{ marginRight: '1rem' }} onClick={() => history.push('/users')}>
+      <Button type="danger" style={{ marginRight: '1rem' }} onClick={() => navigate('/users')}>
         Cancel
       </Button>
       <Button type="primary" icon={<IconPlusCircle />} onClick={saveUser}>