Add build revision and copyright to the UI (#35)

* add build revision to appshell

* fix README

* fix revision on mobile

Author: devksingh4

Makefile

@@ -24,6 +24,8 @@ common_params = --no-confirm-changeset \
 				--s3-prefix $(application_key) \
 				--resolve-s3
 
+GIT_HASH := $(shell git rev-parse --short HEAD)
+
 .PHONY: build clean
 
 check_account_prod:
@@ -49,11 +51,11 @@ clean:
 
 build: src/ cloudformation/ docs/
 	yarn -D
-	yarn build
+	VITE_BUILD_HASH=$(GIT_HASH) yarn build
 	sam build --template-file cloudformation/main.yml
 
 local:
-	yarn run dev
+	VITE_BUILD_HASH=$(GIT_HASH) yarn run dev
 
 deploy_prod: check_account_prod build
 	aws sts get-caller-identity --query Account --output text
@@ -62,19 +64,19 @@ deploy_prod: check_account_prod build
 deploy_dev: check_account_dev build
 	sam deploy $(common_params) --parameter-overrides $(run_env)=dev $(set_application_prefix)=$(application_key) $(set_application_name)="$(application_name)"
 
-install_test_deps:
+install:
 	yarn -D
 
-test_live_integration: install_test_deps
+test_live_integration: install
 	yarn test:live
 
-test_unit: install_test_deps
+test_unit: install
 	yarn typecheck
 	yarn lint
 	yarn prettier
 	yarn test:unit
 
-test_e2e: install_test_deps
+test_e2e: install
 	yarn playwright install
 	yarn test:e2e
 

README.md

@@ -7,6 +7,6 @@ This repository is split into multiple parts:
 ## Getting Started
 You will need node>=20 installed, as well as the AWS CLI and the AWS SAM CLI. The best way to work with all of this is to open the environment in a container within your IDE (VS Code should prompt you to do so: use "Clone in Container" for best performance). This container will have all needed software installed.
 
-Then, run `yarn` to install all packages, and `yarn dev` to start the UI and API servers! The UI will be accessible on `http://localhost:5173/` and the API on `http://localhost:8080/`.
+Then, run `make install` to install all packages, and `make local` to start the UI and API servers! The UI will be accessible on `http://localhost:5173/` and the API on `http://localhost:8080/`.
 
 **Note: there is currently a known performance issue with running the UI development server in a container. If your requests are timing out, try going to `src/ui` and running `yarn preview` to generate a non development server build.**

src/ui/App.tsx

@@ -14,7 +14,6 @@ export default function App() {
     key: 'acm-manage-color-scheme',
     defaultValue: preferredColorScheme,
   });
-
   return (
     <ColorSchemeContext.Provider value={{ colorScheme, onChange: setColorScheme }}>
       <MantineProvider withGlobalClasses withCssVariables forceColorScheme={colorScheme}>

src/ui/components/AppShell/index.tsx

@@ -23,6 +23,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../AuthContext/index.js';
 import { HeaderNavbar } from '../Navbar/index.js';
 import { AuthenticatedProfileDropdown } from '../ProfileDropdown/index.js';
+import { getCurrentRevision } from '@ui/util/revision.js';
 
 interface AcmAppShellProps {
   children: ReactNode;
@@ -172,14 +173,24 @@ const AcmAppShell: React.FC<AcmAppShellProps> = ({
         <HeaderNavbar />
       </AppShell.Header>
       <AppShell.Navbar p="sm">
-        <SidebarNavItems items={navItems} visible={showSidebar} active={active} />
-        <br />
-        <Divider label="Other Services" />
-        <SidebarNavItems items={extLinks} visible={showSidebar} active={active} />
-        <Group hiddenFrom="sm">
-          <Divider />
-          <AuthenticatedProfileDropdown userData={userData || {}} />
-        </Group>
+        <AppShell.Section grow>
+          <SidebarNavItems items={navItems} visible={showSidebar} active={active} />
+          <br />
+          <Divider label="Other Services" />
+          <SidebarNavItems items={extLinks} visible={showSidebar} active={active} />
+          <Group hiddenFrom="sm">
+            <Divider />
+            <AuthenticatedProfileDropdown userData={userData || {}} />
+          </Group>
+        </AppShell.Section>
+        <AppShell.Section>
+          <Text size="xs" fw={500}>
+            &copy; {new Date().getFullYear()} ACM @ UIUC
+          </Text>
+          <Text size="xs" fw={500}>
+            Revision <code>{getCurrentRevision()}</code>
+          </Text>
+        </AppShell.Section>
       </AppShell.Navbar>
       <AppShell.Main>
         {showLoader ? (

src/ui/components/Navbar/index.tsx

@@ -1,20 +1,31 @@
 'use client';
 
-import { Group, Divider, Box, Burger, Drawer, ScrollArea, rem } from '@mantine/core';
+import {
+  Group,
+  Divider,
+  Box,
+  Burger,
+  Drawer,
+  ScrollArea,
+  rem,
+  AppShell,
+  Text,
+} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useNavigate } from 'react-router-dom';
 
 import { extLinks, navItems, renderNavItems } from '../AppShell/index.js';
-import { AuthContextData, useAuth } from '../AuthContext/index.js';
+import { useAuth } from '../AuthContext/index.js';
 import { DarkModeSwitch } from '../DarkModeSwitch/index.js';
 import { AuthenticatedProfileDropdown } from '../ProfileDropdown/index.js';
 
 import LogoBadge from './Logo.js';
 import classes from './index.module.css';
+import { getCurrentRevision } from '@ui/util/revision.js';
 
 const HeaderNavbar: React.FC = () => {
   const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = useDisclosure(false);
-  const { isLoggedIn, userData } = useAuth();
+  const { userData } = useAuth();
   const navigate = useNavigate();
   return (
     <Box>
@@ -46,6 +57,14 @@ const HeaderNavbar: React.FC = () => {
           {renderNavItems(extLinks, '', navigate)}
           <Divider my="sm" />
           {userData ? <AuthenticatedProfileDropdown userData={userData} /> : null}
+          <Box px={{ base: 'md' }}>
+            <Text size="xs" fw={500}>
+              &copy; {new Date().getFullYear()} ACM @ UIUC
+            </Text>
+            <Text size="xs" fw={500}>
+              Revision <code>{getCurrentRevision()}</code>
+            </Text>
+          </Box>
         </ScrollArea>
       </Drawer>
     </Box>

src/ui/util/revision.ts

@@ -0,0 +1,5 @@
+export function getCurrentRevision() {
+  return import.meta.env.VITE_BUILD_HASH
+    ? import.meta.env.VITE_BUILD_HASH.substring(0, 7)
+    : 'unknown';
+}

src/ui/vite.config.mjs

@@ -6,7 +6,7 @@ import path from 'path';
 
 
 export default defineConfig({
-  define:{'process.env': process.env},
+  define: {'process.env': {AWS_REGION: process.env.AWS_REGION}},
   plugins: [react(), tsconfigPaths()],
   resolve: {
     preserveSymlinks: true,