chore: upgrade to react-router@6

packages/web/package.json

@@ -16,7 +16,6 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@types/react-router-dom": "^5.3.0",
     "clipboard-copy": "^4.0.1",
     "graphql": "^15.6.0",
     "lodash.template": "^4.5.0",
@@ -25,7 +24,7 @@
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.17.2",
     "react-intl": "^5.20.12",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

packages/web/src/components/AddAppConnection/style.ts

@@ -1,4 +1,4 @@
-import { styled } from "@mui/material/styles";
+import { styled } from '@mui/material/styles';
 import BaseForm from 'components/Form';
 
 export const Form = styled(BaseForm)(({ theme }) => ({

packages/web/src/components/Drawer/index.tsx

@@ -35,19 +35,19 @@ export default function Drawer(props: SwipeableDrawerProps) {
 
       <List>
         <ListItemLink
-          icon={<SwapCallsIcon htmlColor={theme.palette.primary.dark} />}
+          icon={<SwapCallsIcon htmlColor={theme.palette.primary.main} />}
           primary={formatMessage('drawer.flows')}
           to={URLS.FLOWS}
         />
 
         <ListItemLink
-          icon={<AppsIcon htmlColor={theme.palette.primary.dark} />}
+          icon={<AppsIcon htmlColor={theme.palette.primary.main} />}
           primary={formatMessage('drawer.apps')}
           to={URLS.APPS}
         />
 
         <ListItemLink
-          icon={<ExploreIcon htmlColor={theme.palette.primary.dark} />}
+          icon={<ExploreIcon htmlColor={theme.palette.primary.main} />}
           primary={formatMessage('drawer.explore')}
           to={URLS.EXPLORE}
         />

packages/web/src/components/Drawer/style.ts

@@ -4,12 +4,15 @@ import MuiSwipeableDrawer from '@mui/material/SwipeableDrawer';
 const drawerWidth = 300;
 
 const openedMixin = (theme: Theme): CSSObject => ({
-  width: drawerWidth,
   transition: theme.transitions.create('width', {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.enteringScreen,
   }),
   overflowX: 'hidden',
+  width: '100vw',
+  [theme.breakpoints.up('sm')]: {
+    width: drawerWidth,
+  },
 });
 
 const closedMixin = (theme: Theme): CSSObject => ({

packages/web/src/components/Form/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormProvider, useForm, FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { FormProvider, useForm, FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
 
 type FormProps = {
   children: React.ReactNode;

packages/web/src/components/InputCreator/index.tsx

@@ -1,5 +1,5 @@
 import type { AppFields } from 'types/app';
-import { useFormContext } from "react-hook-form";
+import { useFormContext } from 'react-hook-form';
 
 import TextField from 'components/TextField';
 

packages/web/src/components/ListItemLink/index.tsx

@@ -1,5 +1,6 @@
 import { useMemo, forwardRef } from 'react';
-import ListItem from '@mui/material/ListItem';
+import { useMatch } from 'react-router-dom';
+import ListItem from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { Link, LinkProps } from 'react-router-dom';
@@ -12,6 +13,7 @@ type ListItemLinkProps = {
 
 export default function ListItemLink(props: ListItemLinkProps) {
   const { icon, primary, to } = props;
+  const selected = useMatch({ path: to, end: false });
 
   const CustomLink = useMemo(
     () =>
@@ -26,9 +28,9 @@ export default function ListItemLink(props: ListItemLinkProps) {
 
   return (
     <li>
-      <ListItem button component={CustomLink} sx={{ pl: { xs: 2, sm: 3 } }}>
+      <ListItem component={CustomLink} sx={{ pl: { xs: 2, sm: 3 } }} selected={!!selected}>
-        <ListItemIcon>{icon}</ListItemIcon>
+        <ListItemIcon sx={{ minWidth: 52 }}>{icon}</ListItemIcon>
-        <ListItemText primary={primary} primaryTypographyProps={{ variant: 'body1' }} />
+        <ListItemText primary={primary} primaryTypographyProps={{ variant: 'body1', }} />
       </ListItem>
     </li>
   );

packages/web/src/components/Router/index.tsx

@@ -1,5 +1,5 @@
 import {
   BrowserRouter as Router,
-} from "react-router-dom";
+} from 'react-router-dom';
 
 export default Router;

packages/web/src/components/TextField/index.tsx

@@ -1,6 +1,6 @@
-import { useRef } from "react";
+import { useRef } from 'react';
-import { Controller, Control, FieldValues } from "react-hook-form";
+import { Controller, Control, FieldValues } from 'react-hook-form';
-import MuiTextField, { TextFieldProps as MuiTextFieldProps } from "@mui/material/TextField";
+import MuiTextField, { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';

packages/web/src/config/urls.ts

@@ -1,5 +1,6 @@
 export const DASHBOARD = '/dashboard';
 export const APPS = '/apps';
+export const CONNECTIONS = '/connections';
 export const FLOWS = '/flows';
 export const EXPLORE = '/explore';
 export const APP = (appKey: string) => `/app/${appKey}`;

packages/web/src/graphql/link.ts

@@ -1,5 +1,5 @@
-import { HttpLink, from } from "@apollo/client";
+import { HttpLink, from } from '@apollo/client';
-import { onError } from "@apollo/client/link/error";
+import { onError } from '@apollo/client/link/error';
 
 type CreateLinkOptions = {
   uri: string;

packages/web/src/pages/Application/index.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@apollo/client';
-import { Link, Route, Redirect, Switch, RouteComponentProps, useParams, useRouteMatch, useHistory } from 'react-router-dom';
+import { Link, Route, Navigate, Routes, useParams, useMatch, useNavigate } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
@@ -24,17 +24,31 @@ type ApplicationParams = {
   connectionId?: string;
 };
 
+const ReconnectConnection = (props: any) => {
+  const { application, onClose } = props;
+  const { connectionId } = useParams() as ApplicationParams;
+
+  return (
+    <AddAppConnection
+      onClose={onClose}
+      application={application}
+      connectionId={connectionId}
+    />
+  );
+}
+
+
 export default function Application() {
   const formatMessage = useFormatMessage();
-  const routeMatch = useRouteMatch([URLS.APP_CONNECTIONS_PATTERN, URLS.APP_FLOWS_PATTERN, URLS.APP_PATTERN]);
+  const connectionsPathMatch = useMatch({ path: URLS.APP_CONNECTIONS_PATTERN, end: false });
-  const { appKey } = useParams<ApplicationParams>();
+  const flowsPathMatch = useMatch({ path: URLS.APP_FLOWS_PATTERN, end: false });
-  const history = useHistory();
+  const { appKey } = useParams() as ApplicationParams;
+  const navigate = useNavigate();
   const { data } = useQuery(GET_APP, { variables: { key: appKey } });
 
+  const goToApplicationPage = () => navigate('connections');
   const app = data?.getApp || {};
 
-  const goToApplicationPage = () => history.push(URLS.APP(appKey));
-
   return (
     <>
       <Box sx={{ py: 3 }}>
@@ -62,7 +76,7 @@ export default function Application() {
           <Grid container>
             <Grid item xs>
               <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
-                <Tabs value={routeMatch?.path}>
+                <Tabs value={connectionsPathMatch?.pattern?.path || flowsPathMatch?.pattern?.path}>
                   <Tab
                     label={formatMessage('app.connections')}
                     to={URLS.APP_CONNECTIONS(appKey)}
@@ -79,27 +93,34 @@ export default function Application() {
                 </Tabs>
               </Box>
 
-              <Switch>
+              <Routes>
-                <Route path={URLS.APP_FLOWS_PATTERN}>
+                <Route path={`${URLS.FLOWS}/*`} element={<AppFlows appKey={appKey} />} />
-                  <AppFlows appKey={appKey} />
-                </Route>
 
-                <Route path={URLS.APP_CONNECTIONS_PATTERN}>
+                <Route path={`${URLS.CONNECTIONS}/*`} element={<AppConnections appKey={appKey} />} />
-                  <AppConnections appKey={appKey} />
-                </Route>
 
-                <Route exact path={URLS.APP_PATTERN}>
+                <Route path="/" element={<Navigate to={URLS.APP_CONNECTIONS(appKey)} />} />
-                  <Redirect to={URLS.APP_CONNECTIONS(appKey)} />
+              </Routes>
-                </Route>
-              </Switch>
             </Grid>
           </Grid>
         </Container>
       </Box>
 
-      <Route exact path={[URLS.APP_RECONNECT_CONNECTION_PATTERN, URLS.APP_ADD_CONNECTION_PATTERN]} render={({ match }: RouteComponentProps<ApplicationParams>) => (
+      <Routes>
-        <AddAppConnection onClose={goToApplicationPage} application={app} connectionId={match.params.connectionId} />
+        <Route
-      )} />
+          path="/connections/add"
+          element={
+            <AddAppConnection
+              onClose={goToApplicationPage}
+              application={app}
+            />
+          }
+        />
+
+        <Route
+          path="/connections/:connectionId/reconnect"
+          element={<ReconnectConnection application={app} onClose={goToApplicationPage} />}
+        />
+      </Routes>
     </>
   );
 };

packages/web/src/pages/Applications/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { Link, Route, useHistory } from 'react-router-dom';
+import { Link, Routes, Route, useNavigate } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
@@ -16,7 +16,7 @@ import * as URLS from 'config/urls';
 import type { App } from 'types/app';
 
 export default function Applications() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const formatMessage = useFormatMessage();
   const [appName, setAppName] = useState(null);
   const { data } = useQuery(GET_CONNECTED_APPS, { variables: {name: appName } });
@@ -26,8 +26,8 @@ export default function Applications() {
   }, []);
 
   const goToApps = useCallback(() => {
-    history.push(URLS.APPS);
+    navigate(URLS.APPS);
-  }, [history]);
+  }, [navigate]);
 
   return (
     <Box sx={{ py: 3 }}>
@@ -61,9 +61,9 @@ export default function Applications() {
           <AppRow key={app.name} application={app} />
         ))}
 
-        <Route exact path={URLS.NEW_APP_CONNECTION}>
+        <Routes>
-          <AddNewAppConnection onClose={goToApps} />
+          <Route path="/new" element={<AddNewAppConnection onClose={goToApps} />} />
-        </Route>
+        </Routes>
       </Container>
     </Box>
   );

packages/web/src/pages/Explore/index.tsx

@@ -1,3 +1,12 @@
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+
 export default function Explore() {
-  return (<>Explore</>);
+  return (
+    <Box sx={{ py: 3 }}>
+      <Container>
+        Explore
+      </Container>
+    </Box>
+  );
 };

packages/web/src/pages/Flows/index.tsx

@@ -1,3 +1,12 @@
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+
 export default function Flows() {
-  return (<>Flows</>);
+  return (
+    <Box sx={{ py: 3 }}>
+      <Container>
+        Flows
+      </Container>
+    </Box>
+  );
 };

packages/web/src/routes.tsx

@@ -1,4 +1,4 @@
-import { Route, Switch, Redirect } from "react-router";
+import { Route, Routes, Navigate } from 'react-router-dom';
 import Applications from 'pages/Applications';
 import Application from 'pages/Application';
 import Flows from 'pages/Flows';
@@ -6,29 +6,17 @@ import Explore from 'pages/Explore';
 import * as URLS from 'config/urls';
 
 export default (
-  <Switch>
+  <Routes>
-    <Route path={URLS.FLOWS}>
+    <Route path={URLS.FLOWS} element={<Flows />} />
-      <Flows />
-    </Route>
 
-    <Route path={[URLS.APPS, URLS.NEW_APP_CONNECTION]}>
+    <Route path={`${URLS.APPS}/*`} element={<Applications />} />
-      <Applications />
-    </Route>
 
-    <Route path={URLS.EXPLORE}>
+    <Route path={URLS.EXPLORE} element={<Explore />} />
-      <Explore />
-    </Route>
 
-    <Route path={URLS.APP_PATTERN}>
+    <Route path={`${URLS.APP_PATTERN}/*`} element={<Application />} />
-      <Application />
-    </Route>
 
-    <Route exact path="/">
+    <Route path="/" element={<Navigate to={URLS.FLOWS} />} />
-      <Redirect to={URLS.FLOWS} />
-    </Route>
 
-    <Route>
+    <Route element={<div>404</div>} />
-      404
+  </Routes>
-    </Route>
-  </Switch>
 );

packages/web/src/styles/theme.ts

@@ -190,7 +190,7 @@ const extendedTheme = createTheme({
     MuiAppBar: {
       styleOverrides: {
         root: {
-          background: referenceTheme.palette.primary.main,
+          background: referenceTheme.palette.primary.dark,
           zIndex: referenceTheme.zIndex.drawer + 1,
         }
       },