fix: make back button on app settings subpages functional (#554)

Follow up to #536 to make the back button in the settings subpages
navigation functional.

Author: achou11

messages/renderer/en.json

@@ -1179,6 +1179,10 @@
     "description": "Label for save button.",
     "message": "Save"
   },
+  "routes.app.settings.goBackAccessibleLabel": {
+    "description": "Accessible label for back button",
+    "message": "Go back."
+  },
   "routes.app.settings.index.aboutCoMapeoVersionLabel": {
     "description": "Label for CoMapeo version",
     "message": "CoMapeo Version"

src/renderer/src/routes/app/settings/_nested/route.tsx

@@ -1,12 +1,14 @@
 import Box from '@mui/material/Box'
 import Breadcrumbs from '@mui/material/Breadcrumbs'
 import Divider from '@mui/material/Divider'
+import IconButton from '@mui/material/IconButton'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import {
 	Outlet,
 	createFileRoute,
 	useChildMatches,
+	useRouter,
 } from '@tanstack/react-router'
 import { defineMessages, useIntl } from 'react-intl'
 
@@ -21,6 +23,8 @@ export const Route = createFileRoute('/app/settings/_nested')({
 })
 
 function RouteComponent() {
+	const router = useRouter()
+
 	const { formatMessage: t } = useIntl()
 
 	const currentRoute = useChildMatches({
@@ -46,11 +50,23 @@ function RouteComponent() {
 		<Stack direction="column" flex={1} overflow="auto">
 			<Stack direction="column" gap={6} padding={6}>
 				<Stack direction="row" gap={4} alignItems="center" flex={1}>
-					<Icon
-						name="material-arrow-back"
-						size={headerIconHeight}
-						htmlColor={DARK_GREY}
-					/>
+					<IconButton
+						onClick={() => {
+							if (router.history.canGoBack()) {
+								router.history.back()
+								return
+							}
+
+							router.navigate({ to: '/app/settings', replace: true })
+						}}
+						aria-label={t(m.goBackAccessibleLabel)}
+					>
+						<Icon
+							name="material-arrow-back"
+							size={headerIconHeight}
+							htmlColor={DARK_GREY}
+						/>
+					</IconButton>
 
 					<Breadcrumbs
 						component="nav"
@@ -103,4 +119,9 @@ const m = defineMessages({
 		description:
 			'Text for breadcrumb link to go to main CoMapeo settings page when viewing nested settings page.',
 	},
+	goBackAccessibleLabel: {
+		id: 'routes.app.settings.goBackAccessibleLabel',
+		defaultMessage: 'Go back.',
+		description: 'Accessible label for back button',
+	},
 })

tests-e2e/specs/app/settings.spec.ts

@@ -254,8 +254,12 @@ test.describe('device name', () => {
 
 			/// Main
 
-			// Breadcrumb
+			// Subpage navigation
 			{
+				await expect(
+					main.getByRole('button', { name: 'Go back.', exact: true }),
+				).toBeVisible()
+
 				const breadcrumbNav = main.getByRole('navigation', {
 					name: 'breadcrumb',
 					exact: true,
@@ -498,8 +502,12 @@ test('language', async ({ appInfo, userParams }) => {
 
 		/// Main
 
-		// Breadcrumb
+		// Subpage navigation
 		{
+			await expect(
+				main.getByRole('button', { name: 'Go back.', exact: true }),
+			).toBeVisible()
+
 			const breadcrumbNav = main.getByRole('navigation', {
 				name: 'breadcrumb',
 				exact: true,
@@ -671,8 +679,12 @@ test('coordinate system', async ({ appInfo, userParams }) => {
 
 		/// Main
 
-		// Breadcrumb
+		// Subpage navigation
 		{
+			await expect(
+				main.getByRole('button', { name: 'Go back.', exact: true }),
+			).toBeVisible()
+
 			const breadcrumbNav = main.getByRole('navigation', {
 				name: 'breadcrumb',
 				exact: true,
@@ -821,8 +833,12 @@ test('background map', async ({ appInfo, userParams }) => {
 
 		/// Main
 
-		// Breadcrumb
+		// Subpage navigation
 		{
+			await expect(
+				main.getByRole('button', { name: 'Go back.', exact: true }),
+			).toBeVisible()
+
 			const breadcrumbNav = main.getByRole('navigation', {
 				name: 'breadcrumb',
 				exact: true,