feat: add footer component to AdminSettingsLayout with version display

packages/web/src/components/AdminSettingsLayout/Footer/index.jsx

@@ -0,0 +1,35 @@
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+
+import useFormatMessage from 'hooks/useFormatMessage';
+import useVersion from 'hooks/useVersion';
+
+const Footer = () => {
+  const version = useVersion();
+  const formatMessage = useFormatMessage();
+
+  return (
+    typeof version?.version === 'string' && (
+      <Box mt="auto">
+        <Box bgcolor="common.white" mt={4}>
+          <Divider />
+          <Typography
+            variant="caption"
+            component="div"
+            color="text.secondary"
+            px={3}
+            py={2}
+            align="right"
+          >
+            {formatMessage('adminSettingsFooter.version', {
+              version: version.version,
+            })}
+          </Typography>
+        </Box>
+      </Box>
+    )
+  );
+};
+
+export default Footer;

packages/web/src/components/AdminSettingsLayout/index.jsx

@@ -5,12 +5,13 @@ import LockIcon from '@mui/icons-material/LockPerson';
 import BrushIcon from '@mui/icons-material/Brush';
 import AppsIcon from '@mui/icons-material/Apps';
 import { Outlet } from 'react-router-dom';
-
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Toolbar from '@mui/material/Toolbar';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
+
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
 import Can from 'components/Can';
@@ -18,6 +19,8 @@ import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
 
+import Footer from './Footer';
+
 function createDrawerLinks({
   canReadRole,
   canReadUser,
@@ -103,7 +106,7 @@ function SettingsLayout() {
         onDrawerOpen={openDrawer}
         onDrawerClose={closeDrawer}
       />
-      <Box sx={{ display: 'flex' }}>
+      <Box sx={{ display: 'flex', flex: 1 }}>
         <Drawer
           links={drawerLinks}
           bottomLinks={drawerBottomLinks}
@@ -111,10 +114,11 @@ function SettingsLayout() {
           onOpen={openDrawer}
           onClose={closeDrawer}
         />
-        <Box sx={{ flex: 1 }}>
+        <Stack sx={{ flex: 1 }}>
           <Toolbar />
           <Outlet />
-        </Box>
+          <Footer />
+        </Stack>
       </Box>
     </Can>
   );

packages/web/src/locales/en.json

@@ -20,6 +20,7 @@
   "adminSettingsDrawer.userInterface": "User Interface",
   "adminSettingsDrawer.goBack": "Go to the dashboard",
   "adminSettingsDrawer.apps": "Applications",
+  "adminSettingsFooter.version": "Version {version}",
   "app.connectionCount": "{count} connections",
   "app.flowCount": "{count} flows",
   "app.addConnection": "Add connection",