Improve footer version info

src/components/Footer/Footer.jsx

@@ -3,63 +3,55 @@ import { FormattedMessage, injectIntl } from 'react-intl'
 import SvgSymbol from '../SvgSymbol/SvgSymbol'
 import messages from './Messages'
 
-import { version } from '../../../package.json'
-
 class Footer extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      data : null
-    };
-  }
+  state = {
+    serviceInfo: null
+  };
 
   componentDidMount() {
-    this.renderMyData();
-  }
-
-  renderMyData(){
     fetch(`${window.env.REACT_APP_MAP_ROULETTE_SERVER_URL}/api/v2/service/info`)
-        .then((response) => response.json())
-        .then((responseJson) => {
-          this.setState({ data : responseJson })
+        .then((res) => res.json())
+        .then((serviceInfo) => {
+          this.setState({ serviceInfo });
         })
         .catch((error) => {
           console.error(error);
         });
   }
 
   render() {
+    let frontendVersion = __GIT_TAG__ !== '' ? __GIT_TAG__ : __GIT_SHA__.slice(0, 7);
+    let frontendVersionUrl = __GIT_TAG__ !== ''
+      ? `https://github.com/maproulette/maproulette3/releases/tag/${__GIT_TAG__}`
+      : `https://github.com/maproulette/maproulette3/commit/${__GIT_SHA__}`;
+
+    let info = this.state.serviceInfo?.compiletime;
+    let backendVersion = info?.version === info?.gitHeadCommit
+      ? info?.gitHeadCommit.slice(0, 7)
+      : info?.version;
+    let backendVersionUrl = info?.version === info?.gitHeadCommit
+      ? `https://github.com/maproulette/maproulette-backend/commit/${info?.gitHeadCommit}`
+      : `https://github.com/maproulette/maproulette-backend/releases/tag/v${info?.version}`;
+
     return (
-      <footer
-        className="mr-px-4 mr-py-12 md:mr-py-24 mr-links-green-lighter"
-      >
+      <footer className="mr-px-4 mr-py-12 md:mr-py-24 mr-links-green-lighter">
         <div className="mr-max-w-3xl mr-mx-auto mr-overflow-hidden">
           <div className="md:mr-flex md:mr--mx-4">
             <div className="mr-mb-8 md:mr-mb-0 md:mr-px-4 md:mr-flex-1">
               <h3 className="mr-text-white mr-text-md mr-mb-2">
                 <FormattedMessage {...messages.versionLabel} />{' '}
                 <span className="mr-text-green-light mr-font-mono mr-text-base">
-                  <a
-                    href={`https://github.com/maproulette/maproulette3/releases/tag/v${version}`}
-                  >
-                    v{version}
-                  </a>
+                  <a href={frontendVersionUrl}>{frontendVersion}</a>
                 </span>
               </h3>
-             { this.state.data ? 
+             { this.state.serviceInfo && (
               <h3 className="mr-text-white mr-text-md mr-mb-2">
                   <FormattedMessage {...messages.APIVersionLabel} />{' '}
                   <span className="mr-text-green-light mr-font-mono mr-text-base">
-                    <a
-                      href={`https://github.com/maproulette/maproulette-backend/releases/tag/v${this.state.data.compiletime.version}`}
-                    >
-                      v{this.state.data.compiletime.version}
-                    </a>
+                    <a href={backendVersionUrl}>{backendVersion}</a>
                   </span>
-                </h3> : 
-                null 
-              }
+                </h3>
+              )}
             </div>
 
             <div className="mr-mb-8 md:mr-mb-0 md:mr-px-4 md:mr-flex-1">

vite.config.js

@@ -1,6 +1,8 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 
+import { execSync } from 'node:child_process';
+
 // https://vitejs.dev/config/
 export default defineConfig({
   base: '/',
@@ -12,4 +14,8 @@ export default defineConfig({
     port: 3000,
   },
   plugins: [react()],
+  define: {
+    __GIT_SHA__: JSON.stringify(execSync('git rev-parse HEAD').toString()),
+    __GIT_TAG__: JSON.stringify(execSync('git describe --tags --exact-match 2>/dev/null || true').toString()),
+  },
 });

vitest.config.js

@@ -1,12 +1,16 @@
-import { defineConfig } from 'vitest/config';
+import { defineConfig, mergeConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react-swc';
 
+import viteConfig from './vite.config.js';
+
 // https://vitest.dev/config/
-export default defineConfig({
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: ['src/setupTests.jsx'],
-  },
-  plugins: [react()],
-});
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      globals: true,
+      setupFiles: ['src/setupTests.jsx'],
+    },
+  }),
+);