Revert "Migration react-router-dom 5 to 6, fixes Hyperfoil#723"

This reverts commit bfbb360.

horreum-web/package.json

@@ -35,7 +35,7 @@
     "react-markdown": "8.0.7",
     "react-redux": "7.2.7",
     "react-router": "5.3.4",
-    "react-router-dom": "6.0.0",
+    "react-router-dom": "5.3.4",
     "react-table": "7.8.0",
     "react-to-print": "2.14.15",
     "recharts": "2.10.4",

horreum-web/src/404.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { NavLink } from "react-router-dom";
 
 

horreum-web/src/App.tsx

@@ -2,10 +2,10 @@ import "@patternfly/patternfly/patternfly.css" //have to use this import to cust
 
 import {Nav, NavItem, NavList, Page, PageHeader, PageHeaderTools} from "@patternfly/react-core"
 
-import {NavLink, Route, Routes} from "react-router-dom"
-import {Router} from "react-router"
+import {Router, NavLink} from "react-router-dom"
 
 import {Provider, useSelector} from "react-redux"
+import {Route, Switch} from "react-router"
 
 import store from "./store"
 import {isAdminSelector, LoginLogout} from "./auth"
@@ -95,31 +95,29 @@ function Main() {
                 }
             >
                 <Alerts/>
-
-                <Routes>
-                    <Route  path="/" element={<AllTests />} />
-                    <Route  path="/test" element={<AllTests />} />
-                    <Route  path="/test/:testId" element={<Test />} />
-
-                    <Route  path="/run/list/:testId" element={<RunList />} />
-                    <Route  path="/run/dataset/list/:testId" element={<TestDatasets />} />
-                    <Route  path="/run/:id" element={<Run />} />
-                    <Route  path="/dataset/comparison"element={<DatasetComparison />} />
-
-                    <Route  path="/schema" element={<SchemaList />} />
-                    <Route path="/schema/:schemaId" element={<Schema />} />
-
-                    <Route  path="/changes" element={<Changes />} />
-
-                    <Route  path="/reports" element={<Reports />} />
-                    <Route  path="/reports/table/config/:configId" element={<TableReportConfigPage />} />
-                    <Route  path="/reports/table/:id" element={<TableReportPage />} />
-
-                    <Route  path="/admin" element={<Admin />} />
-                    <Route  path="/usersettings" element={<UserSettings />} />
-                    <Route element={<NotFound />} />
-                </Routes>
-
+                <Switch>
+                    <Route exact path="/" component={AllTests} />
+                    <Route exact path="/test" component={AllTests} />
+                    <Route exact path="/test/:testId" component={Test} />
+
+                    <Route exact path="/run/list/:testId" component={RunList} />
+                    <Route exact path="/run/dataset/list/:testId" component={TestDatasets} />
+                    <Route exact path="/run/:id" component={Run} />
+                    <Route exact path="/dataset/comparison" component={DatasetComparison} />
+
+                    <Route exact path="/schema" component={SchemaList} />
+                    <Route path="/schema/:schemaId" component={Schema} />
+
+                    <Route exact path="/changes" component={Changes} />
+
+                    <Route exact path="/reports" component={Reports} />
+                    <Route exact path="/reports/table/config/:configId" component={TableReportConfigPage} />
+                    <Route exact path="/reports/table/:id" component={TableReportPage} />
+
+                    <Route exact path="/admin" component={Admin} />
+                    <Route exact path="/usersettings" component={UserSettings} />
+                    <Route component={NotFound} />
+                </Switch>
             </Page>
             {/* <ContextHelp /> */}
         </Router>

horreum-web/src/components/IndirectLink.tsx

@@ -1,5 +1,5 @@
 import { HTMLProps, ReactNode } from "react"
-import { useNavigate } from "react-router-dom"
+import { useHistory } from "react-router-dom"
 
 import { noop } from "../utils"
 import { Button } from "@patternfly/react-core"
@@ -11,15 +11,15 @@ type IndirectLinkProps = {
 } & Omit<HTMLProps<HTMLButtonElement>, "ref">
 
 export default function IndirectLink({ variant = "link", onNavigate, children, ...props }: IndirectLinkProps) {
-    const navigate  = useNavigate()
+    const history = useHistory()
     return (
         <Button
             {...props}
             type="button"
             variant={variant}
             onClick={() =>
                 onNavigate()
-                    .then((path) => navigate(path))
+                    .then(path => history.push(path))
                     .catch(noop)
             }
         >

horreum-web/src/domain/alerting/Changes.tsx

@@ -39,7 +39,7 @@ import {
     Spinner,
     Title,
 } from "@patternfly/react-core"
-import { NavLink, useNavigate } from "react-router-dom"
+import { NavLink, useHistory } from "react-router-dom"
 import {AppContext} from "../../context/appContext";
 import {AppContextType} from "../../context/@types/appContextTypes";
 
@@ -206,8 +206,8 @@ export const flattenNode = (arr : Array<any> | undefined) => {
 
 export default function Changes() {
     const { alerting } = useContext(AppContext) as AppContextType;
-    const navigate = useNavigate()
-    const params = new URLSearchParams(location.search)
+    const history = useHistory()
+    const params = new URLSearchParams(history.location.search)
     // eslint-disable-next-line
     const paramTest = useMemo(() => params.get("test") || undefined, [])
     const paramFingerprint = params.get("fingerprint")
@@ -265,7 +265,7 @@ export default function Changes() {
             return
         }
         document.title = `${selectedTest} | Horreum`
-        navigate(location.pathname + createQuery(false))
+        history.replace(history.location.pathname + createQuery(false))
     }, [selectedTest, selectedFingerprint, endTime, timespan, lineType, firstNow, history])
     useEffect(() => {
         setPanels([])

horreum-web/src/domain/reports/TableReportView.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { useNavigate } from "react-router-dom"
+import { useHistory } from "react-router-dom"
 
 import {
     ActionGroup,
@@ -395,12 +395,12 @@ export default function TableReportView(props: TableReportViewProps) {
     const categoryFormatter = formatter(config.categoryFormatter)
     const comment0 = props.report.comments.find(c => c.level === 0)
 
-    const navigate = useNavigate()
-    const queryParams = new URLSearchParams(location.search)
+    const history = useHistory()
+    const queryParams = new URLSearchParams(history.location.search)
     const [baseline, setBaseline] = useState<string | undefined>(queryParams.get("baseline") || undefined)
     const onBaselineChange = (scale: string | undefined) => {
         setBaseline(scale)
-        navigate(location.pathname + (scale ? "?baseline=" + scale : ""))
+        history.replace(history.location.pathname + (scale ? "?baseline=" + scale : ""))
     }
 
     return (

horreum-web/src/domain/runs/DatasetComparison.tsx

@@ -11,7 +11,7 @@ import {
     Spinner,
 } from "@patternfly/react-core"
 import { expandable, ICell, IRow, Table, TableHeader, TableBody } from "@patternfly/react-table"
-import { NavLink } from "react-router-dom"
+import { useHistory, NavLink } from "react-router-dom"
 import { Bar, BarChart, CartesianGrid, ResponsiveContainer, YAxis } from "recharts"
 
 import {datasetApi, fetchTest, fetchViews, Test, View} from "../../api"
@@ -35,9 +35,8 @@ type Ds = {
 export default function DatasetComparison() {
     const { alerting } = useContext(AppContext) as AppContextType;
     window.document.title = "Dataset comparison: Horreum"
-
-
-    const params = new URLSearchParams(window.location.search)
+    const history = useHistory()
+    const params = new URLSearchParams(history.location.search)
     const testId = parseInt(params.get("testId") || "-1")
     const [views, setViews] = useState<View[]>([])
     const [test, setTest] = useState<Test>()

horreum-web/src/domain/runs/JsonPathSearchToolbar.tsx

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useRef, useState} from "react"
-import { useNavigate } from "react-router-dom"
+import { useHistory } from "react-router-dom"
 import jsonpath from "jsonpath"
 
 import {
@@ -62,7 +62,7 @@ export default function JsonPathSearchToolbar(props: ToolbarProps) {
         }
     }, [props.originalData])
 
-    const navigate = useNavigate()
+    const history = useHistory()
     function onQueryUpdate(type: string, query: string) {
         const loc = window.location
         const urlParams = new URLSearchParams(window.location.search)
@@ -72,7 +72,7 @@ export default function JsonPathSearchToolbar(props: ToolbarProps) {
         } else {
             urlParams.delete("query")
         }
-        navigate(`${loc.pathname}?${urlParams.toString()}${loc.hash}`)
+        history.replace(`${loc.pathname}?${urlParams.toString()}${loc.hash}`)
     }
 
     const inputProps: InputProps<string> = {

horreum-web/src/domain/schemas/Labels.tsx

@@ -1,6 +1,6 @@
 import {useState, useEffect, useContext} from "react"
 import { useSelector } from "react-redux"
- 
+import { useHistory } from "react-router-dom"
 
 import { Button, Checkbox, Flex, FlexItem, FormGroup, FormSection, TextInput } from "@patternfly/react-core"
 
@@ -94,14 +94,15 @@ export default function Labels({ schemaId, schemaUri, funcsRef }: LabelsProps) {
         setLabels(labels.map(l => (l.id == label.id ? label : l)))
     }
 
+    const history = useHistory()
     useEffect(() => {
         setLoading(true)
         schemaApi
             .labels(schemaId)
             .then(
                 labels => {
                     setLabels(labels)
-                    const fragmentParts = window.location.hash.split("+")
+                    const fragmentParts = history.location.hash.split("+")
                     if (fragmentParts.length === 2 && fragmentParts[0] === "#labels") {
                         const decoded = decodeURIComponent(fragmentParts[1])
                         const label = labels.find(l => l.name === decoded)

horreum-web/src/domain/schemas/Transformers.tsx

@@ -1,6 +1,6 @@
 import {useContext, useEffect, useState} from "react"
 import { useSelector } from "react-redux"
- 
+import { useHistory } from "react-router-dom"
 
 import { Button, FormGroup, FormSection, Popover, TextArea, TextInput } from "@patternfly/react-core"
 import { HelpIcon } from "@patternfly/react-icons"
@@ -109,7 +109,7 @@ export default function Transformers(props: TransformersProps) {
         },
         modified: () => transformers.some(t => t.modified) || deleted.length > 0,
     }
-     
+    const history = useHistory()
     useEffect(() => {
         if (typeof props.schemaId !== "number") {
             return
@@ -121,7 +121,7 @@ export default function Transformers(props: TransformersProps) {
             .then(
                 ts => {
                     setTransformers(ts)
-                    const fragmentParts = location.hash.split("+")
+                    const fragmentParts = history.location.hash.split("+")
                     if (fragmentParts.length === 2 && fragmentParts[0] === "#transformers") {
                         const decoded = decodeURIComponent(fragmentParts[1])
                         const transformer = ts.find(t => t.name === decoded)

horreum-web/src/domain/tests/ActionsUI.tsx

@@ -18,7 +18,7 @@ import { TabFunctionsRef } from "../../components/SavedTabs"
 import { testEventTypes } from "../actions/reducers"
 import ActionComponentForm from "../actions/ActionComponentForm"
 import ActionLogModal from "./ActionLogModal"
-import { useNavigate } from "react-router-dom"
+import { Redirect } from "react-router-dom"
 import {AppContext} from "../../context/appContext";
 import {AppContextType} from "../../context/@types/appContextTypes";
 
@@ -52,11 +52,8 @@ export default function ActionsUI({ testId, testOwner, funcsRef, onModified }: A
         },
     }
 
-    const navigate = useNavigate()
-
     if (!isTester) {
-        navigate('/')
-        return  null
+        return <Redirect to="/" />
     }
     return (
         <>

horreum-web/src/domain/tests/ChangeDetectionForm.tsx

@@ -1,5 +1,5 @@
 import {useMemo, useState, useEffect, useContext} from "react"
- 
+import { useHistory } from "react-router"
 
 import { useTester } from "../../auth"
 import {ChangeDetection, ConditionConfig, Variable, alertingApi, updateChangeDetection} from "../../api"
@@ -357,8 +357,9 @@ export default function ChangeDetectionForm({ test, onModified, funcsRef }: Chan
     const [isLogOpen, setLogOpen] = useState(false)
     const subscriptions: string[] = [] //useSelector(subscriptionsSelector(test?.id || -1))?.filter(s => !s.startsWith("!"))
 
+    const history = useHistory()
     useEffect(() => {
-        const fragmentParts = window.location.hash.split("+")
+        const fragmentParts = history.location.hash.split("+")
         if (fragmentParts.length === 2 && fragmentParts[0] === "#vars") {
             const component = document.getElementById("variable-" + fragmentParts[1])
             if (component) {

horreum-web/src/index.tsx

@@ -1,18 +1,14 @@
-import React from "react"
 import ReactDOM from "react-dom/client"
 
 import "./index.css"
 import App from "./App"
 import * as serviceWorker from "./serviceWorker"
 
-import jsonpath from "jsonpath" 
-import { BrowserRouter } from 'react-router-dom' 
+import jsonpath from "jsonpath"
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
-root.render(  
-    <BrowserRouter>
-      <App />
-    </BrowserRouter> 
+root.render(
+    <App />
 )
 
 // If you want your app to work offline and load faster, you can change