Add git commit to deployed previews

.github/workflows/preview.yaml

@@ -26,6 +26,10 @@ jobs:
           run-id: ${{ github.event.workflow_run.id }}
           github-token: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Get Git Commit Hash
+        id: commit_hash
+        run: echo "::set-output name=commit_hash::$(git rev-parse HEAD)"
+
       - name: Find PR number
         id: pr
         uses: actions/github-script@v7
@@ -44,7 +48,12 @@ jobs:
             console.info("Pull request number is", pullRequestNumber)
             return pullRequestNumber
 
-      # deploy
+      - name: Set React Environment Variable
+        run: echo "REACT_APP_GIT_COMMIT_HASH=${{ steps.commit_hash.outputs.commit_hash }}" >> $GITHUB_ENV
+
+      - name: Inject Git Commit Hash
+        run: sed -i "s/REACT_APP_GIT_COMMIT_HASH/${{ steps.commit_hash.outputs.commit_hash }}/g" ./dist/src/components/AppHeader/AccountMenu.jsx
+
       - name: Deploy to Cloudflare Pages
         id: cloudflare-publish
         uses: cloudflare/[email protected]
@@ -63,9 +72,9 @@ jobs:
             Welcome to connect! Make sure to:
             * read the [contributing guidelines](https://github.com/commaai/connect?tab=readme-ov-file#contributing)
             * mark your PR as a draft until it's ready to review
-            * post the preview on [Discord](https://discord.comma.ai); feedback from users will speedup the PR review
+            * post the preview on [Discord](https://discord.comma.ai); feedback from users will speed up the PR review
 
-            deployed preview: https://${{ steps.pr.outputs.result }}.connect-d5y.pages.dev
+            Deployed preview: https://${{ steps.pr.outputs.result }}.connect-d5y.pages.dev (Commit: ${{ steps.commit_hash.outputs.commit_hash }})
           comment_tag: run_id
           pr_number: ${{ steps.pr.outputs.result }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

src/components/AppHeader/AccountMenu.jsx

@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import dayjs from 'dayjs';
+import React, { useCallback } from 'react';
 
 import {
   Divider,
@@ -18,23 +17,19 @@ const logOut = async () => {
 };
 
 const AccountMenu = ({ profile, open, anchorEl, onClose, ...rest }) => {
-  const [buildTimestamp, setBuildTimestamp] = useState('');
-  const [version, setVersion] = useState('');
-
-  useEffect(() => {
-    setVersion(import.meta.env.VITE_APP_GIT_SHA?.substring(0, 7) || 'dev');
-
-    const buildDate = import.meta.env.VITE_APP_GIT_TIMESTAMP;
-    if (buildDate) {
-      setBuildTimestamp(`, ${dayjs(buildDate).fromNow()}`);
-    }
-  }, []);
-
   const onLogOut = useCallback(() => {
     onClose();
     logOut();
   }, [onClose]);
 
+  const shortenGitHash = fullHash => fullHash ? fullHash.substring(0, 7) : '';
+
+  // Read the commit hash from the environment variable set during the build process
+  const gitCommitHash = process.env.REACT_APP_GIT_COMMIT_HASH || '';
+  const shortGitCommitHash = shortenGitHash(gitCommitHash);
+  const gitCommitUrl = gitCommitHash ? `https://github.com/commaai/openpilot/commit/${gitCommitHash}` : '';
+  console.log(gitCommitHash)
+
   return (
     <Menu
       open={open}
@@ -46,8 +41,10 @@ const AccountMenu = ({ profile, open, anchorEl, onClose, ...rest }) => {
     >
       <ListItem className="text-white py-3 px-4 flex-col items-start">
         <span className="font-bold">{profile.email}</span>
-        <span className="text-xs text-[#ffffff66] pt-2">{ profile.user_id }</span>
-        <span className="text-xs text-[#ffffff66] pt-2">{`Version: ${version}${buildTimestamp}`}</span>
+        <span className="text-xs text-[#ffffff66] pt-2">{profile.user_id}</span>
+        <span className="text-xs text-[#ffffff66] pt-2">
+          Version: <a href={gitCommitUrl} target="_blank" rel="noopener noreferrer" style={{ color: '#007bff' }} >{shortGitCommitHash}</a>
+        </span>
       </ListItem>
       <Divider />
       <MenuItem

src/components/AppHeader/index.jsx

@@ -59,7 +59,7 @@ const styles = () => ({
 
 const AppHeader = ({
   profile, classes, dispatch, drawerIsOpen, annotating, showDrawerButton,
-  forwardRef, handleDrawerStateChanged, primeNav, dongleId,
+  forwardRef, handleDrawerStateChanged, primeNav, dongleId
 }) => {
   const [anchorEl, setAnchorEl] = useState(null);
 
@@ -144,7 +144,7 @@ const stateToProps = Obstruction({
   dongleId: 'dongleId',
   filter: 'filter',
   profile: 'profile',
-  primeNav: 'primeNav',
+  primeNav: 'primeNav'
 });
 
 export default connect(stateToProps)(withStyles(styles)(AppHeader));