Merge pull request #669 from jembi/feature/channels-use-hash-router

feat: use hashRouter

packages/channels-app/src/components/helpers/custom.toolbar.tsx

@@ -6,13 +6,15 @@ import {
   GridToolbarQuickFilter
 } from '@mui/x-data-grid'
 
-
 export function CustomToolbar() {
-
   return (
-    <div style={{display: 'flex',
-      justifyContent: 'space-between',
-      padding: '20px 10px'}}>
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: '20px 10px'
+      }}
+    >
       <div>
         <GridToolbarColumnsButton />
         <GridToolbarFilterButton />

packages/channels-app/src/router/index.tsx

@@ -1,10 +1,10 @@
-import {createMemoryRouter} from 'react-router-dom'
+import {createHashRouter} from 'react-router-dom'
 import ManageChannelsScreen from '../screens/manage.channels.screen'
 import AddChannelScreen from '../screens/add.channel.screen'
 import EditChannelScreen from '../screens/edit.channel.screen'
 import {Routes} from '../types'
 
-const router = createMemoryRouter([
+const router = createHashRouter([
   {
     path: Routes.MANAGE_CHANNELS,
     element: <ManageChannelsScreen />

packages/channels-app/src/screens/add.channel.screen.tsx

@@ -57,7 +57,6 @@ const defaultChannel: Channel = {
   autoRetryPeriodMinutes: 60
 }
 
-
 function AddChannelScreen() {
   const navigate = useNavigate()
   const {showAlert, hideAlert} = useAlert()

packages/channels-app/src/screens/edit.channel.screen.tsx

@@ -1,17 +1,11 @@
 import TabContext from '@mui/lab/TabContext'
 import TabList from '@mui/lab/TabList'
 import TabPanel from '@mui/lab/TabPanel'
-import {
-  Box,
-  Button,
-  Grid,
-  Paper,
-  Typography
-} from '@mui/material'
+import {Box, Button, Grid, Paper, Typography} from '@mui/material'
 import Tab from '@mui/material/Tab'
 import {useMutation} from '@tanstack/react-query'
 import React from 'react'
-import {useLocation, useNavigate} from 'react-router-dom'
+import {useNavigate} from 'react-router-dom'
 import Loader from '../components/helpers/loader.component'
 import {useAlert} from '../contexts/alert.context'
 import {useBasicBackdrop} from '../contexts/backdrop.context'
@@ -21,12 +15,9 @@ import {BasicInfo} from './steps/BasicInfo'
 import {RequestMatching} from './steps/RequestMatching'
 import {ChannelRoutes} from './steps/routes/ChannelRoutes'
 
-
 function EditChannelScreen() {
-
   const navigate = useNavigate()
-  const location = useLocation()
-  const originalChannel = location.state as Channel
+  const originalChannel = window.history.state as Channel
   const {showAlert, hideAlert} = useAlert()
   const {showBackdrop, hideBackdrop} = useBasicBackdrop()
   const [activeTab, setActiveTab] = React.useState('0')
@@ -58,7 +49,7 @@ function EditChannelScreen() {
 
   return (
     <Box padding={1} sx={{backgroundColor: '#F1F1F1'}}>
-      <header style={{ marginBottom: '40px'}}>
+      <header style={{marginBottom: '40px'}}>
         <Typography variant="h4" gutterBottom fontWeight={400}>
           Edit Channel
         </Typography>
@@ -81,8 +72,7 @@ function EditChannelScreen() {
         justifyContent="center"
       >
         <Grid item xs={12}>
-          <Paper style={{   width: '600px',
-    borderRadius: '15px'}} elevation={4}>
+          <Paper style={{width: '600px', borderRadius: '15px'}} elevation={4}>
             <TabContext value={activeTab}>
               <TabList
                 onChange={(e, newValue) => setActiveTab(newValue)}

packages/channels-app/src/screens/manage.channels.screen.tsx

@@ -20,15 +20,14 @@ import {makeStyles} from '@mui/styles'
 import {DataGrid, GridColDef} from '@mui/x-data-grid'
 import {useMutation, useQuery} from '@tanstack/react-query'
 import React from 'react'
-import {useNavigate} from 'react-router-dom'
 import {CustomToolbar} from '../components/helpers/custom.toolbar'
 import {ErrorMessage} from '../components/helpers/error.component'
 import Loader from '../components/helpers/loader.component'
 import {useAlert} from '../contexts/alert.context'
 import {useBasicBackdrop} from '../contexts/backdrop.context'
 import {useConfirmation} from '../contexts/confirmation.context'
 import {getChannels, modifyChannel} from '../services/api'
-import {Channel, Routes} from '../types'
+import {Channel} from '../types'
 
 const useStyles = makeStyles(_theme => ({
   actionsIcon: {
@@ -40,7 +39,6 @@ const useStyles = makeStyles(_theme => ({
 }))
 
 const ManageChannelsScreen: React.FC = () => {
-  const navigate = useNavigate()
   const classes = useStyles()
   const {
     isLoading,
@@ -120,7 +118,7 @@ const ManageChannelsScreen: React.FC = () => {
 
   const handleEditChannel = () => {
     if (selectedChannel) {
-      navigate(Routes.EDIT_CHANNEL, {state: selectedChannel})
+      window.history.pushState(selectedChannel, '', `/#!/channels/edit-channel`)
     }
   }
 
@@ -228,7 +226,7 @@ const ManageChannelsScreen: React.FC = () => {
             variant="contained"
             color="primary"
             startIcon={<AddIcon />}
-            onClick={() => navigate(Routes.CREATE_CHANNEL)}
+            href="/#!/channels/create-channel"
           >
             Add
           </Button>

packages/channels-app/src/screens/steps/BasicInfo.tsx

@@ -18,8 +18,6 @@ import {makeStyles} from '@mui/styles'
 import React from 'react'
 import {Channel, ChannelMethod, ChannelType} from '../../types'
 
-
-
 export function BasicInfo(props: {
   channel: Channel
   onChange: (event: {channel: Channel; isValid: boolean}) => unknown

packages/channels-app/src/screens/steps/RequestMatching.tsx

@@ -29,7 +29,6 @@ export function RequestMatching(props: {
   channel: Channel
   onChange: (event: {channel: Channel; isValid: boolean}) => unknown
 }) {
-
   const navigate = useNavigate()
   const [channel, setChannel] = React.useState(props.channel)
   const [expandOptionalSettings, setExpandOptionalSettings] =
@@ -53,7 +52,7 @@ export function RequestMatching(props: {
         Set criteria for requests to be forwarded to this channel.
       </Typography>
 
-      <Divider style={{ marginTop: '10px', marginBottom: '10px' }} />
+      <Divider style={{marginTop: '10px', marginBottom: '10px'}} />
 
       <Grid container spacing={2}>
         <Grid item xs={12}>
@@ -63,15 +62,11 @@ export function RequestMatching(props: {
             fullWidth
             margin="normal"
             InputProps={{
-              startAdornment: (
-                <span style={{ marginRight: '5px' }}>^</span>
-              ),
-              endAdornment: (
-                <span style={{ marginLeft: '5px' }}>$</span>
-              )
+              startAdornment: <span style={{marginRight: '5px'}}>^</span>,
+              endAdornment: <span style={{marginLeft: '5px'}}>$</span>
             }}
             value={channel.urlPattern}
-            onChange={e => setChannel({ ...channel, urlPattern: e.target.value })}
+            onChange={e => setChannel({...channel, urlPattern: e.target.value})}
             error={channel.urlPattern.trim() === ''}
             helperText={
               channel.urlPattern.trim() === ''
@@ -101,33 +96,33 @@ export function RequestMatching(props: {
         <Grid item xs={12}>
           <TagInputAutocomplete
             tags={channel.txViewAcl}
-            onChange={txViewAcl => setChannel({ ...channel, txViewAcl })}
+            onChange={txViewAcl => setChannel({...channel, txViewAcl})}
             label="Which user groups are allowed to view this channel's transactions?"
           />
         </Grid>
 
         <Grid item xs={12}>
           <TagInputAutocomplete
             tags={channel.txViewAcl}
-            onChange={txViewFullAcl => setChannel({ ...channel, txViewFullAcl })}
+            onChange={txViewFullAcl => setChannel({...channel, txViewFullAcl})}
             label="Which user groups are allowed to view this channel's transactions full request/response body?"
           />
         </Grid>
 
         <Grid item xs={12}>
           <TagInputAutocomplete
             tags={channel.txViewAcl}
-            onChange={txRerunAcl => setChannel({ ...channel, txRerunAcl })}
+            onChange={txRerunAcl => setChannel({...channel, txRerunAcl})}
             label="Which user groups are allowed to rerun this channel's transactions?"
           />
         </Grid>
       </Grid>
 
       <br />
-      <Divider style={{ marginTop: '10px', marginBottom: '30px' }} />
+      <Divider style={{marginTop: '10px', marginBottom: '30px'}} />
       <br />
 
-      <Paper elevation={2} style={{ borderRadius: '20px', padding: '12px' }}>
+      <Paper elevation={2} style={{borderRadius: '20px', padding: '12px'}}>
         <Grid container>
           <Grid item xs={11}>
             <Typography variant="body1">Optional Settings</Typography>
@@ -154,16 +149,16 @@ export function RequestMatching(props: {
                   margin="normal"
                   value={channel.priority}
                   onChange={e =>
-                    setChannel({ ...channel, priority: Number(e.target.value) })
+                    setChannel({...channel, priority: Number(e.target.value)})
                   }
                 />
               </Grid>
-              <Grid item xs={12} style={{ marginBottom: '20px' }}>
+              <Grid item xs={12} style={{marginBottom: '20px'}}>
                 <Typography variant="h6">
                   Is this channel public or private?
                 </Typography>
 
-                <Box style={{ padding: '10px' }}>
+                <Box style={{padding: '10px'}}>
                   <RadioGroup
                     defaultValue="public"
                     value={channel.authType}
@@ -190,16 +185,16 @@ export function RequestMatching(props: {
                   </RadioGroup>
                 </Box>
 
-                <Grid item xs={12} style={{ marginBottom: '20px' }}>
+                <Grid item xs={12} style={{marginBottom: '20px'}}>
                   <TagInputAutocomplete
                     tags={channel.whitelist}
-                    onChange={whitelist => setChannel({ ...channel, whitelist })}
+                    onChange={whitelist => setChannel({...channel, whitelist})}
                     helperText="Should any IP addresses be automatically trusted?"
                     label="Whitelist IP Address"
                   />
                 </Grid>
 
-                <Grid item xs={12} style={{ marginBottom: '20px' }}>
+                <Grid item xs={12} style={{marginBottom: '20px'}}>
                   <FormControlLabel
                     control={
                       <Switch
@@ -218,11 +213,11 @@ export function RequestMatching(props: {
                 {isMatchSpecificRequestContent && (
                   <React.Fragment>
                     <br />
-                    <Grid item xs={12} style={{ marginBottom: '20px' }}>
+                    <Grid item xs={12} style={{marginBottom: '20px'}}>
                       <TagInputAutocomplete
                         tags={channel.matchContentTypes}
                         onChange={matchContentTypes =>
-                          setChannel({ ...channel, matchContentTypes })
+                          setChannel({...channel, matchContentTypes})
                         }
                         label="Which Content-Types should be matched?"
                       />

packages/channels-app/src/screens/steps/routes/ChannelRoutes.tsx

@@ -25,12 +25,10 @@ import {ChannelRoute as ChannelRouteComponent} from './ChannelRoute'
 import {useBasicDialog} from '../../../contexts/dialog.context'
 import {useConfirmation} from '../../../contexts/confirmation.context'
 
-
 export function ChannelRoutes(props: {
   channel: Channel
   onChange: (event: {channel: Channel; isValid: boolean}) => unknown
 }) {
-
   const {showBasicDialog, hideBasicDialog} = useBasicDialog()
   const {showConfirmation, hideConfirmation} = useConfirmation()
   const navigate = useNavigate()
@@ -131,11 +129,15 @@ export function ChannelRoutes(props: {
         the one that is returned to the request sender.
       </Typography>
 
-      <Divider style={{  marginTop: '10px',
-    margin: '0px',
-    width: '100%',
-    marginBottom: '10px',
-    overflow: 'visible'}} />
+      <Divider
+        style={{
+          marginTop: '10px',
+          margin: '0px',
+          width: '100%',
+          marginBottom: '10px',
+          overflow: 'visible'
+        }}
+      />
 
       {channel.routes?.length > 0 ? (
         <TableContainer>
@@ -180,17 +182,21 @@ export function ChannelRoutes(props: {
           </Table>
         </TableContainer>
       ) : (
-        <Box style={{  padding: '20px',
-          textAlign: 'center',
-          color: '#999',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '200px'}}>
-          <InfoOutlinedIcon style={{ fontSize: '48px',
-    marginBottom: '10px',
-    color: '#999'}} />
+        <Box
+          style={{
+            padding: '20px',
+            textAlign: 'center',
+            color: '#999',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '200px'
+          }}
+        >
+          <InfoOutlinedIcon
+            style={{fontSize: '48px', marginBottom: '10px', color: '#999'}}
+          />
           <Typography variant="body1">
             No routes have been added yet. Click{' '}
             <Button variant="text" color="primary" onClick={onClickAddNewRoute}>
@@ -202,7 +208,7 @@ export function ChannelRoutes(props: {
       )}
 
       {channel.routes?.length > 0 && (
-        <Grid container style={{ padding: '10px'}}>
+        <Grid container style={{padding: '10px'}}>
           <Grid item xs={8}></Grid>
           <Grid item xs={4}>
             <Button variant="text" color="primary" onClick={onClickAddNewRoute}>

packages/channels-app/src/services/api.ts

@@ -26,7 +26,18 @@ export async function getChannelById(id: string): Promise<Channel> {
 
 export async function addChannel(channel: Channel): Promise<void> {
   try {
-    await createChannel(channel)
+    const channelPayload = structuredClone(channel)
+
+    if (
+      channelPayload.addAutoRewriteRules &&
+      !channelPayload.urlPattern.trimStart().startsWith('^') &&
+      !channelPayload.urlPattern.trimEnd().endsWith('$')
+    ) {
+      channelPayload._id = undefined
+      channelPayload.urlPattern = `^${channelPayload.urlPattern.trim()}$`
+    }
+
+    await createChannel(channelPayload)
   } catch (err) {
     console.error(err)
     throw err

packages/channels-app/src/types/index.ts

@@ -108,8 +108,7 @@ export type Channel = {
 }
 
 export enum Routes {
-  MANAGE_CHANNELS = '/',
-  CREATE_CHANNEL = '/create-channel',
-  EDIT_CHANNEL = '/edit-channel',
-  CREATE_ROUTE = '/create-route'
+  MANAGE_CHANNELS = '!/channels',
+  CREATE_CHANNEL = '!/channels/create-channel',
+  EDIT_CHANNEL = '!/channels/edit-channel'
 }

packages/root-config/src/microfrontend-layout.html

@@ -90,4 +90,4 @@
     <application name="@jembi/footer-app"></application>
 
   </main>
-</single-spa-router>
+</single-spa-router>