ui: migrate routed pages to react-router v6

Author: zerbitx

ui/src/components/advanced/ConditionalRoute/ConditionalRoute.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styles from './UserMenu.module.scss';
 import withPopup, { PopupContext } from 'contexts/withPopup/withPopup';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
 import ErrorBoundary from 'components/basic/ErrorBoundary/ErrorBoundary';
 import Tooltip from 'components/basic/Tooltip/Tooltip';
 import GitHubButton from 'components/basic/GitHubButton/GitHubButton';
@@ -11,7 +10,7 @@ interface State {
   menuOpen: boolean;
 }
 
-class UserMenu extends React.PureComponent<Props & RouteComponentProps, State> {
+class UserMenu extends React.PureComponent<Props, State> {
   state: State = {
     menuOpen: false,
   };
@@ -30,4 +29,4 @@ class UserMenu extends React.PureComponent<Props & RouteComponentProps, State> {
   }
 }
 
-export default withRouter(withPopup(UserMenu));
+export default withPopup(UserMenu);

ui/src/components/basic/PageLayout/Header/UserMenu/UserMenu.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { withRouter, RouteComponentProps } from 'react-router';
 import styles from './commands.module.scss';
 import PageLayout from 'components/basic/PageLayout/PageLayout';
 import withPopup, { PopupContext } from 'contexts/withPopup/withPopup';
@@ -12,7 +11,7 @@ import InteractiveTerminal, { InteractiveTerminalProps } from 'components/advanc
 import AdvancedCodeLine from 'components/basic/CodeSnippet/AdvancedCodeLine/AdvancedCodeLine';
 import Button from '../../components/basic/Button/Button';
 
-interface Props extends DevSpaceConfigContext, PopupContext, WarningContext, RouteComponentProps {}
+interface Props extends DevSpaceConfigContext, PopupContext, WarningContext {}
 
 interface State {
   podList?: V1PodList;
@@ -139,4 +138,4 @@ class Commands extends React.PureComponent<Props, State> {
   }
 }
 
-export default withRouter(withPopup(withDevSpaceConfig(withWarning(Commands))));
+export default withPopup(withDevSpaceConfig(withWarning(Commands)));

ui/src/pages/commands/commands.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { withRouter, RouteComponentProps } from 'react-router';
 import styles from './containers.module.scss';
 import PageLayout from 'components/basic/PageLayout/PageLayout';
 import withPopup, { PopupContext } from 'contexts/withPopup/withPopup';
@@ -13,7 +12,7 @@ import withWarning, { WarningContext } from 'contexts/withWarning/withWarning';
 import ChangeNamespace from 'components/views/Logs/ChangeNamespace/ChangeKubeContext';
 import authFetch from "../../lib/fetch";
 
-interface Props extends DevSpaceConfigContext, PopupContext, WarningContext, RouteComponentProps {}
+interface Props extends DevSpaceConfigContext, PopupContext, WarningContext {}
 
 interface State {
   podList?: V1PodList;
@@ -190,4 +189,4 @@ class LogsContainers extends React.PureComponent<Props, State> {
   }
 }
 
-export default withRouter(withPopup(withDevSpaceConfig(withWarning(LogsContainers))));
+export default withPopup(withDevSpaceConfig(withWarning(LogsContainers)));

ui/src/pages/logs/containers.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { withRouter, RouteComponentProps } from 'react-router';
 import styles from './configuration.module.scss';
 import PageLayout from 'components/basic/PageLayout/PageLayout';
 import withPopup, { PopupContext } from 'contexts/withPopup/withPopup';
@@ -13,7 +12,7 @@ import ProfilePortlet from 'components/views/Stack/Configuration/ProfilePortlet/
 import ConfigVariablesPortlet from 'components/views/Stack/Configuration/ConfigVariablesPortlet/ConfigVariablesPortlet';
 import { configToYAML } from 'lib/utils';
 
-interface Props extends DevSpaceConfigContext, PopupContext, WarningContext, RouteComponentProps {}
+interface Props extends DevSpaceConfigContext, PopupContext, WarningContext {}
 
 interface State {
   podList?: V1PodList;
@@ -58,4 +57,4 @@ class StackConfiguration extends React.PureComponent<Props, State> {
   }
 }
 
-export default withRouter(withPopup(withDevSpaceConfig(withWarning(StackConfiguration))));
+export default withPopup(withDevSpaceConfig(withWarning(StackConfiguration)));

ui/src/pages/stack/configuration.tsx

@@ -1,8 +1,7 @@
 // prettier-ignore
 import React from 'react';
-import { Route, Switch, BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, Navigate, Route, Routes as RouterRoutes } from 'react-router-dom';
 import LogsContainers from 'pages/logs/containers';
-import ConditionalRoute from 'components/advanced/ConditionalRoute/ConditionalRoute';
 import StackConfiguration from 'pages/stack/configuration';
 import Commands from 'pages/commands/commands';
 
@@ -11,13 +10,13 @@ interface Props {}
 const Routes = (_: Props) => {
   return (
     <BrowserRouter>
-      <Switch>
-        <Route exact path="/logs/containers" component={LogsContainers} />
-        <Route exact path="/stack/configuration" component={StackConfiguration} />
-        <Route exact path="/commands/commands" component={Commands} />
-        <ConditionalRoute exact path="/" redirectTo="/logs/containers" when={true} component={LogsContainers} />
-        <Route render={() => <h1>Page not found</h1>} />
-      </Switch>
+      <RouterRoutes>
+        <Route path="/logs/containers" element={<LogsContainers />} />
+        <Route path="/stack/configuration" element={<StackConfiguration />} />
+        <Route path="/commands/commands" element={<Commands />} />
+        <Route path="/" element={<Navigate replace to="/logs/containers" />} />
+        <Route path="*" element={<h1>Page not found</h1>} />
+      </RouterRoutes>
     </BrowserRouter>
   );
 };