Merge pull request #4705 from thornbill/add-back-button-x

src/apps/experimental/components/AppToolbar/index.tsx

@@ -1,3 +1,4 @@
+import ArrowBack from '@mui/icons-material/ArrowBack';
 import MenuIcon from '@mui/icons-material/Menu';
 import SearchIcon from '@mui/icons-material/Search';
 import Box from '@mui/material/Box';
@@ -9,6 +10,7 @@ import React, { FC } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 import appIcon from 'assets/img/icon-transparent.png';
+import { appRouter } from 'components/router/appRouter';
 import { useApi } from 'hooks/useApi';
 import globalize from 'scripts/globalize';
 
@@ -23,6 +25,13 @@ interface AppToolbarProps {
     onDrawerButtonClick: (event: React.MouseEvent<HTMLElement>) => void
 }
 
+const onBackButtonClick = () => {
+    appRouter.back()
+        .catch(err => {
+            console.error('[AppToolbar] error calling appRouter.back', err);
+        });
+};
+
 const AppToolbar: FC<AppToolbarProps> = ({
     isDrawerOpen,
     onDrawerButtonClick
@@ -32,6 +41,7 @@ const AppToolbar: FC<AppToolbarProps> = ({
     const location = useLocation();
 
     const isDrawerAvailable = isDrawerPath(location.pathname);
+    const isBackButtonAvailable = appRouter.canGoBack();
 
     return (
         <Toolbar
@@ -50,7 +60,6 @@ const AppToolbar: FC<AppToolbarProps> = ({
                         edge='start'
                         color='inherit'
                         aria-label={globalize.translate(isDrawerOpen ? 'MenuClose' : 'MenuOpen')}
-                        sx={{ mr: 2 }}
                         onClick={onDrawerButtonClick}
                     >
                         <MenuIcon />
@@ -58,12 +67,28 @@ const AppToolbar: FC<AppToolbarProps> = ({
                 </Tooltip>
             )}
 
+            {isBackButtonAvailable && (
+                <Tooltip title={globalize.translate('ButtonBack')}>
+                    <IconButton
+                        size='large'
+                        // Set the edge if the drawer button is not shown
+                        edge={!(isUserLoggedIn && isDrawerAvailable) ? 'start' : undefined}
+                        color='inherit'
+                        aria-label={globalize.translate('ButtonBack')}
+                        onClick={onBackButtonClick}
+                    >
+                        <ArrowBack />
+                    </IconButton>
+                </Tooltip>
+            )}
+
             <Box
                 component={Link}
                 to='/'
                 color='inherit'
                 aria-label={globalize.translate('Home')}
                 sx={{
+                    ml: 2,
                     display: 'inline-flex',
                     textDecoration: 'none'
                 }}

src/components/router/appRouter.js

@@ -167,12 +167,13 @@ class AppRouter {
 
     canGoBack() {
         const { path, route } = this.currentRouteInfo;
+        const pathOnly = path?.split('?')[0] ?? '';
 
         if (!route) {
             return false;
         }
 
-        if (!document.querySelector('.dialogContainer') && (START_PAGE_TYPES.includes(route.type) || START_PAGE_PATHS.includes(path))) {
+        if (!document.querySelector('.dialogContainer') && (START_PAGE_TYPES.includes(route.type) || START_PAGE_PATHS.includes(pathOnly))) {
             return false;
         }