[254] Display the commit hash in the frontend

Bug: #254
Signed-off-by: Stéphane Bégaudeau <[email protected]>

frontend/svalyn-studio-app/src/navbars/UserMenu.tsx

@@ -24,12 +24,17 @@ import LogoutIcon from '@mui/icons-material/Logout';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
 import PersonIcon from '@mui/icons-material/Person';
 import SettingsIcon from '@mui/icons-material/Settings';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
+import Link from '@mui/material/Link';
 import ListItem from '@mui/material/ListItem';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
 import { useState } from 'react';
 import { Navigate, Link as RouterLink } from 'react-router-dom';
 import { useAuthentication } from '../login/useAuthentication';
@@ -60,7 +65,24 @@ export const UserMenu = ({ viewer, onClose, ...props }: UserMenuProps) => {
   return (
     <Menu onClose={onClose} {...props}>
       <ListItem sx={{ paddingTop: '0', paddingBottom: '0' }}>
-        <ListItemText primary="Signed in as" secondary={viewer.name} />
+        <ListItemAvatar sx={{ minWidth: (theme) => theme.spacing(4.5) }}>
+          <Avatar alt={viewer.name} src={viewer.imageUrl} sx={{ width: 24, height: 24 }} />
+        </ListItemAvatar>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Typography variant="body1" noWrap>
+            {viewer.name} ({viewer.username})
+          </Typography>
+          <Link
+            variant="caption"
+            color="inherit"
+            underline="hover"
+            rel="noreferrer"
+            target="_blank"
+            href={`https://github.com/svalyn/svalyn-studio/commit/${__GIT_COMMIT_HASH__}`}
+          >
+            App version: {__GIT_COMMIT_HASH__.substring(0, 7)}
+          </Link>
+        </Box>
       </ListItem>
       <MenuItem component={RouterLink} to="/" onClick={handleCloseUserMenu}>
         <ListItemIcon>

frontend/svalyn-studio-app/src/navbars/UserMenu.types.ts

@@ -27,6 +27,7 @@ export interface Viewer {
   name: string;
   username: string;
   role: AccountRole;
+  imageUrl: string;
 }
 
 export type AccountRole = 'USER' | 'ADMIN';

frontend/svalyn-studio-app/src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare const __GIT_COMMIT_HASH__: string;

frontend/svalyn-studio-app/vite.config.ts

@@ -1,7 +1,13 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react';
+import { execSync } from 'child_process';
+import { defineConfig } from 'vite';
+
+const commitHash = execSync('git rev-parse HEAD').toString();
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
-})
+  define: {
+    __GIT_COMMIT_HASH__: JSON.stringify(commitHash),
+  },
+  plugins: [react()],
+});