feat: [closes #94] Show build hash (#95)

* feat: show build hash in Drawer
* feat: add link to GitHub commit for build

.env

@@ -1 +1,2 @@
 REACT_APP_NAME=$npm_package_name
+REACT_APP_GITHUB_REPO="https://github.com/jeremyckahn/chitchatter"

package-lock.json

@@ -31,6 +31,7 @@
         "mui-markdown": "^0.5.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-git-info": "^2.0.1",
         "react-markdown": "^8.0.3",
         "react-qrcode-logo": "^2.8.0",
         "react-router-dom": "^6.3.0",
@@ -22233,6 +22234,39 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-git-info": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-git-info/-/react-git-info-2.0.1.tgz",
+      "integrity": "sha512-4g7aksr+Q1+X8BNO4cr/JPRrUwEh54AHdLYJ91And+rI+mXHKRhmZpbV/BTECjxKGzleq/joogVejyviJawa2A==",
+      "dependencies": {
+        "babel-plugin-macros": "^2.8.0"
+      }
+    },
+    "node_modules/react-git-info/node_modules/babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
+    "node_modules/react-git-info/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -43003,6 +43037,38 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-git-info": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-git-info/-/react-git-info-2.0.1.tgz",
+      "integrity": "sha512-4g7aksr+Q1+X8BNO4cr/JPRrUwEh54AHdLYJ91And+rI+mXHKRhmZpbV/BTECjxKGzleq/joogVejyviJawa2A==",
+      "requires": {
+        "babel-plugin-macros": "^2.8.0"
+      },
+      "dependencies": {
+        "babel-plugin-macros": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+          "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+          "requires": {
+            "@babel/runtime": "^7.7.2",
+            "cosmiconfig": "^6.0.0",
+            "resolve": "^1.12.0"
+          }
+        },
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        }
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -27,6 +27,7 @@
     "mui-markdown": "^0.5.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-git-info": "^2.0.1",
     "react-markdown": "^8.0.3",
     "react-qrcode-logo": "^2.8.0",
     "react-router-dom": "^6.3.0",

src/components/Shell/Drawer.tsx

@@ -3,6 +3,8 @@ import { Link } from 'react-router-dom'
 import { Theme } from '@mui/material/styles'
 import MuiDrawer from '@mui/material/Drawer'
 import List from '@mui/material/List'
+import MuiLink from '@mui/material/Link'
+import Typography from '@mui/material/Typography'
 import Divider from '@mui/material/Divider'
 import IconButton from '@mui/material/IconButton'
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
@@ -17,12 +19,15 @@ import QuestionMark from '@mui/icons-material/QuestionMark'
 import Brightness4Icon from '@mui/icons-material/Brightness4'
 import Brightness7Icon from '@mui/icons-material/Brightness7'
 import ReportIcon from '@mui/icons-material/Report'
+import GitInfo from 'react-git-info/macro'
 
 import { routes } from 'config/routes'
 import { SettingsContext } from 'contexts/SettingsContext'
 
 import { DrawerHeader } from './DrawerHeader'
 
+const { commit } = GitInfo()
+
 export const drawerWidth = 240
 
 export interface DrawerProps extends PropsWithChildren {
@@ -129,8 +134,27 @@ export const Drawer = ({
             <ListItemText primary="Change theme" />
           </ListItemButton>
         </ListItem>
+        <Divider />
+        <ListItem>
+          <Typography variant="subtitle2">
+            Build signature:{' '}
+            <Typography
+              sx={{
+                fontFamily: 'monospace',
+                display: 'inline',
+              }}
+            >
+              <MuiLink
+                target="_blank"
+                rel="noopener"
+                href={`${process.env.REACT_APP_GITHUB_REPO}/commit/${commit.hash}`}
+              >
+                {commit.shortHash}
+              </MuiLink>
+            </Typography>
+          </Typography>
+        </ListItem>
       </List>
-      <Divider />
     </MuiDrawer>
   )
 }