feat: add commit has in page header

Within the header there will now be a shorthash visible that links to
packit/dashboard page

Part of packit#209

Makefile

@@ -4,6 +4,8 @@ TEST_IMAGE ?= packit-dashboard-tests
 TEST_TARGET ?= ./tests/
 CONTAINER_ENGINE ?= $(shell command -v podman 2> /dev/null || echo docker)
 API_STG = "https://stg.packit.dev/api"
+GIT_SHA_FETCH := $(shell git rev-parse HEAD)
+export GIT_SHA=$(GIT_SHA_FETCH)
 
 install-dependencies: .install-logos
 	sudo dnf -y install python3-flask yarnpkg npm
@@ -17,7 +19,7 @@ install-dependencies: .install-logos
 
 # this will transpile jsx into js, minify everything and generate static js for production builds
 transpile-prod:
-	cd frontend && REACT_APP_API_URL=$(API_STG) yarn run build
+	cd frontend && REACT_APP_GIT_SHA=$(GIT_SHA) REACT_APP_API_URL=$(API_STG) yarn run build
 
 
 # For Development Mode Only:
@@ -29,7 +31,7 @@ transpile-prod:
 # if you change flask port for dev, also change it in frontend/package.json in the proxy key/value
 
 run-dev-frontend:
-	cd frontend && REACT_APP_API_URL=$(API_STG) GENERATE_SOURCEMAP=true HTTPS=true yarn start
+	cd frontend && REACT_APP_GIT_SHA=$(GIT_SHA) REACT_APP_API_URL=$(API_STG) GENERATE_SOURCEMAP=true HTTPS=true yarn start
 
 run-dev-flask:
 	FLASK_ENV=development FLASK_APP=packit_dashboard.app flask-3 run --host=0.0.0.0

frontend/public/index.html

@@ -28,6 +28,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Dashboard for Packit Service." />
+    <meta name="ui-version" content="%REACT_APP_GIT_SHA%" />
     <style>
       html,
       body,

frontend/src/components/app_layout.js

@@ -6,12 +6,15 @@ import {
     NavList,
     NavItem,
     Page,
+    PageHeaderTools,
     PageHeader,
     PageSidebar,
+    Button,
     SkipToContent,
 } from "@patternfly/react-core";
 import { routes } from "../routes";
 import packitLogo from "../static/logo.png";
+import { ExternalLinkSquareAltIcon } from "@patternfly/react-icons";
 
 const AppLayout = ({ children }) => {
     const logoProps = {
@@ -29,13 +32,31 @@ const AppLayout = ({ children }) => {
     const onPageResize = (props) => {
         setIsMobileView(props.mobileView);
     };
+
+    const HeaderTools = (
+        <PageHeaderTools>
+            <Button
+                component="a"
+                href={`https://github.com/packit/dashboard/commit/${process.env.REACT_APP_GIT_SHA}`}
+                target="_blank"
+                rel="noreferrer"
+                variant="link"
+                icon={<ExternalLinkSquareAltIcon />}
+                iconPosition="right"
+                aria-label="External link to page source commit"
+            >
+                {process.env.REACT_APP_GIT_SHA.substring(0, 7)}
+            </Button>
+        </PageHeaderTools>
+    );
     const Header = (
         <PageHeader
             logo={<Brand src={packitLogo} alt="Packit Logo" />}
             logoProps={logoProps}
             showNavToggle
             isNavOpen={isNavOpen}
             onNavToggle={isMobileView ? onNavToggleMobile : onNavToggle}
+            headerTools={HeaderTools}
         />
     );