From e568dfe73e9ee3db93df255d2d5a9a76fd56cc1f Mon Sep 17 00:00:00 2001 From: Dev Singh Date: Fri, 10 Jan 2025 22:41:31 -0600 Subject: [PATCH 1/3] add build revision to appshell --- Makefile | 14 ++++++++------ README.md | 2 +- src/ui/App.tsx | 1 - src/ui/components/AppShell/index.tsx | 27 +++++++++++++++++++-------- src/ui/util/revision.ts | 5 +++++ src/ui/vite.config.mjs | 2 +- 6 files changed, 34 insertions(+), 17 deletions(-) create mode 100644 src/ui/util/revision.ts diff --git a/Makefile b/Makefile index 92abb953..6a262f35 100644 --- a/Makefile +++ b/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 diff --git a/README.md b/README.md index 58668053..68a9cfa2 100644 --- a/README.md +++ b/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 `yarn 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.** diff --git a/src/ui/App.tsx b/src/ui/App.tsx index b8d99486..bd81b5e8 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -14,7 +14,6 @@ export default function App() { key: 'acm-manage-color-scheme', defaultValue: preferredColorScheme, }); - return ( diff --git a/src/ui/components/AppShell/index.tsx b/src/ui/components/AppShell/index.tsx index 682843c0..c5a4abaa 100644 --- a/src/ui/components/AppShell/index.tsx +++ b/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 = ({ - -
- - - - - - + + +
+ + + + + + + + + + © {new Date().getFullYear()} ACM @ UIUC + + + Revision {getCurrentRevision()} + + {showLoader ? ( diff --git a/src/ui/util/revision.ts b/src/ui/util/revision.ts new file mode 100644 index 00000000..99b3fc88 --- /dev/null +++ b/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'; +} diff --git a/src/ui/vite.config.mjs b/src/ui/vite.config.mjs index 91ee6eea..c2839606 100644 --- a/src/ui/vite.config.mjs +++ b/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, From 801b2ce2467493420cd3fc50231e3cb945a44903 Mon Sep 17 00:00:00 2001 From: Dev Singh Date: Fri, 10 Jan 2025 22:42:51 -0600 Subject: [PATCH 2/3] fix README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 68a9cfa2..b18953d8 100644 --- a/README.md +++ b/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 `make install` to install all packages, and `yarn local` 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.** From a34bc62b76998f0bfbebcaa1fc24f1c2b952243c Mon Sep 17 00:00:00 2001 From: Dev Singh Date: Fri, 10 Jan 2025 22:56:23 -0600 Subject: [PATCH 3/3] fix revision on mobile --- src/ui/components/Navbar/index.tsx | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/ui/components/Navbar/index.tsx b/src/ui/components/Navbar/index.tsx index 03cf205b..da4139c6 100644 --- a/src/ui/components/Navbar/index.tsx +++ b/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 ( @@ -46,6 +57,14 @@ const HeaderNavbar: React.FC = () => { {renderNavItems(extLinks, '', navigate)} {userData ? : null} + + + © {new Date().getFullYear()} ACM @ UIUC + + + Revision {getCurrentRevision()} + +