Add the git commit hash details to the About dialog. #7623

.github/workflows/check-container-build.yml

@@ -18,6 +18,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+      - run: git checkout HEAD^
 
       - name: Build the container
         run: docker build .

.gitignore

@@ -48,6 +48,7 @@ node_modules/
 web/pgAdmin/static/js/generated
 web/pgadmin/static/js/generated
 web/yarn-error.log
+web/commit_hash
 /web/cacert.pem
 auditjs.html
 auditpy.txt

pkg/src/build.sh

@@ -32,6 +32,9 @@ fi
 TARBALL_NAME=$(echo "${APP_NAME}-${APP_LONG_VERSION}" | sed 's/ //g' | awk '{print tolower($0)}')
 DOC_TARBALL_NAME=$(echo "${APP_NAME}-${APP_LONG_VERSION}-docs" | sed 's/ //g' | awk '{print tolower($0)}')
 
+# Get the github timestamp
+git log -1 --format='%H %as' > web/commit_hash
+
 # Output basic details to show we're working
 echo "Building tarballs for ${APP_NAME} version ${APP_LONG_VERSION}..."
 
@@ -69,6 +72,8 @@ do
     tar cf - "${FILE}" | (cd "src-build/${TARBALL_NAME}"; tar xf -)
 done
 
+tar cf - "web/commit_hash" | (cd "src-build/${TARBALL_NAME}"; tar xf -)
+
 # Create the tarball
 echo Creating tarball...
 cd src-build || exit

web/package.json

@@ -168,7 +168,7 @@
     "bundle:watch": "yarn run linter && yarn run webpacker:watch",
     "bundle:dev": "yarn run linter && yarn run webpacker",
     "bundle:analyze": "cross-env NODE_ENV=production ANALYZE=true yarn run bundle:dev",
-    "bundle": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=3072 yarn run bundle:dev",
+    "bundle": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=3072 yarn run bundle:dev && git log -1 --format='%H %as' > commit_hash",
     "test:js-once": "yarn run linter && yarn run jest --maxWorkers=50%",
     "test:js": "yarn run test:js-once --watch",
     "test:js-file": "yarn run test:js-once -t",

web/pgAdmin4.py

@@ -103,6 +103,16 @@ if not os.path.isfile(config.SQLITE_PATH):
 app = create_app()
 app.config['sessions'] = dict()
 
+# We load the file here instead of evaluate config
+# as we don't know the path of this file in evaluate config
+# commit_hash file resides in the web directory
+try:
+    with open(os.path.join(os.path.dirname(os.path.realpath(__file__)),
+                           'commit_hash')) as f:
+        config.COMMIT_HASH = f.readline().strip()
+except FileNotFoundError as _:
+    config.COMMIT_HASH = None
+
 if setup_db_required:
     setup.setup_db(app)
 

web/pgadmin/about/__init__.py

@@ -70,6 +70,7 @@ def index():
     else:
         info['app_mode'] = gettext('Desktop')
 
+    info['commit_hash'] = getattr(config, 'COMMIT_HASH', None)
     info['browser_details'] = browser
     info['version'] = config.APP_VERSION
     info['admin'] = admin

web/pgadmin/about/static/js/AboutComponent.jsx

@@ -8,33 +8,16 @@
 //////////////////////////////////////////////////////////////
 
 import gettext from 'sources/gettext';
-import { styled } from '@mui/material/styles';
 import url_for from 'sources/url_for';
 import React, { useEffect, useState, useRef } from 'react';
 import { Box, Grid, InputLabel } from '@mui/material';
-import { DefaultButton } from '../../../static/js/components/Buttons';
-import { InputText } from '../../../static/js/components/FormComponents';
+import { InputSQL } from '../../../static/js/components/FormComponents';
 import getApiInstance from '../../../static/js/api_instance';
-import { copyToClipboard } from '../../../static/js/clipboard';
-import { useDelayedCaller } from '../../../static/js/custom_hooks';
 import { usePgAdmin } from '../../../static/js/BrowserComponent';
 
-const StyledDefaultButton = styled(DefaultButton)(({theme}) => ({
-  '&.AboutComponent-copyBtn': {
-    marginRight: '1px',
-    float: 'right',
-    borderColor: theme.otherVars.borderColor,
-    fontSize: '13px',
-  }
-}));
-
 export default function AboutComponent() {
   const containerRef = useRef();
   const [aboutData, setAboutData] = useState([]);
-  const [copyText, setCopyText] = useState(gettext('Copy'));
-  const revertCopiedText = useDelayedCaller(()=>{
-    setCopyText(gettext('Copy'));
-  });
   const pgAdmin = usePgAdmin();
 
   useEffect(() => {
@@ -66,6 +49,14 @@ export default function AboutComponent() {
           <InputLabel>{aboutData.app_mode}</InputLabel>
         </Grid>
       </Grid>
+      <Grid container spacing={0} style={{marginBottom: '8px'}}>
+        <Grid item lg={3} md={3} sm={3} xs={12}>
+          <InputLabel style={{fontWeight: 'bold'}}>{gettext('Commit:')}</InputLabel>
+        </Grid>
+        <Grid item lg={9} md={9} sm={9} xs={12}>
+          <InputLabel>{aboutData.commit_hash}</InputLabel>
+        </Grid>
+      </Grid>
       <Grid container spacing={0} style={{marginBottom: '8px'}}>
         <Grid item lg={3} md={3} sm={3} xs={12}>
           <InputLabel style={{fontWeight: 'bold'}}>{gettext('Current User')}</InputLabel>
@@ -123,18 +114,20 @@ export default function AboutComponent() {
         </Grid>
       }
       { aboutData.settings &&
-        <Box flexGrow="1" display="flex" flexDirection="column">
+        <Box flexGrow="1" display="flex" flexDirection="column" minHeight="0">
           <Box>
-            <span style={{fontWeight: 'bold'}}>{gettext('Server Configuration')}</span>
-            <StyledDefaultButton className='AboutComponent-copyBtn' onClick={()=>{
-              copyToClipboard(aboutData.settings);
-              setCopyText(gettext('Copied!'));
-              revertCopiedText(1500);
-            }}>{copyText}</StyledDefaultButton>
+            <InputLabel style={{fontWeight: 'bold'}}>{gettext('pgAdmin Server Configuration')}</InputLabel>
           </Box>
-          <Box flexGrow="1" paddingTop="1px">
-            <InputText style={{height: '100%'}} controlProps={{multiline: true, rows: 8}} inputStyle={{resize: 'none'}}
-              value={aboutData.settings}/>
+          <Box flexGrow="1" paddingTop="1px" minHeight="0">
+            <InputSQL value={aboutData.settings}
+              controlProps={{
+                readonly: true,
+                showCopyBtn: true,
+              }}
+              options={{
+                lineNumbers: false,
+                foldGutter: false
+              }} />
           </Box>
         </Box>
       }