Merge pull request #2686 from bcgov/DESENG-820-footer-version-information

DESENG-820: Add version information to footer

Author: NatSquared

.github/workflows/met-api-cd.yml

@@ -60,7 +60,12 @@ jobs:
 
       - name: Build image
         run: |
-          docker build . --file Dockerfile --tag image
+          docker build . --file Dockerfile \
+            --build-arg MET_BUILD_COMMIT_HASH=${{ github.sha }} \
+            --build-arg MET_BUILD_DATE=$(date -u +'%b %d, %Y') \
+            --build-arg MET_BUILD_BRANCH=${{ github.ref_name }} \
+            --build-arg MET_GITHUB_REPO=https://github.com/${{ github.repository }} \
+            --tag image
 
       - name: Push image
         run: |

.github/workflows/met-web-cd.yml

@@ -73,6 +73,10 @@ jobs:
           docker build . --file Dockerfile \
             --secret id=artifactory_username,src=/tmp/artifactory_username \
             --secret id=artifactory_password,src=/tmp/artifactory_password \
+            --build-arg REACT_APP_BUILD_COMMIT_HASH=${{ github.sha }} \
+            --build-arg REACT_APP_BUILD_DATE=$(date -u +'%b %d, %Y @ %H:%M') \
+            --build-arg REACT_APP_BUILD_BRANCH=${{ github.ref_name }} \
+            --build-arg REACT_APP_GITHUB_REPO=https://github.com/${{ github.repository }} \
             --tag image
 
       - name: Push image

CHANGELOG.MD

@@ -1,3 +1,9 @@
+## November 14, 2025
+
+- **Feature** Added app and API version info to footer [🎟️ DESENG-820](https://citz-gdx.atlassian.net/browse/DESENG-820)
+  - Adjusted GitHub Actions workflow to embed version information into webapp and API at build time.
+  - Version information displays in the footer of the admin view only, for now.
+
 ## August 25, 2025
 
 - **Feature** Implement new CI/CD logic for Helm charts [🎟️ DESENG-849](https://citz-gdx.atlassian.net/browse/DESENG-849)

met-api/Dockerfile

@@ -6,6 +6,18 @@ USER root
 RUN mkdir /opt/app-root && chmod 755 /opt/app-root
 WORKDIR /opt/app-root
 
+# Accept build arguments for version information
+ARG MET_BUILD_COMMIT_HASH=unknown
+ARG MET_BUILD_DATE=unknown
+ARG MET_BUILD_BRANCH=unknown
+ARG MET_GITHUB_REPO=https://github.com/bcgov/met-public
+
+# Set environment variables from build arguments
+ENV MET_BUILD_COMMIT_HASH=${MET_BUILD_COMMIT_HASH}
+ENV MET_BUILD_DATE=${MET_BUILD_DATE}
+ENV MET_BUILD_BRANCH=${MET_BUILD_BRANCH}
+ENV MET_GITHUB_REPO=${MET_GITHUB_REPO}
+
 # Install the requirements
 COPY ./requirements.txt .
 

met-api/src/met_api/resources/__init__.py

@@ -66,6 +66,7 @@
 from .timeline_event_translation import API as TIMELINE_EVENT_TRANSLATION_API
 from .engagement_translation import API as ENGAGEMENT_TRANSLATION_API
 from .engagement_content_translation import API as ENGAGEMENT_CONTENT_TRANSLATION_API
+from .version import API as VERSION_API
 
 __all__ = ('API_BLUEPRINT',)
 
@@ -119,3 +120,4 @@
 API.add_namespace(TIMELINE_EVENT_TRANSLATION_API, path='/timelines/<int:timeline_id>/translations')
 API.add_namespace(ENGAGEMENT_TRANSLATION_API, path='/engagement/<int:engagement_id>/translations')
 API.add_namespace(ENGAGEMENT_CONTENT_TRANSLATION_API, path='/engagement_content/<int:content_id>/translations')
+API.add_namespace(VERSION_API, path='/version')

met-api/src/met_api/resources/version.py

@@ -0,0 +1,43 @@
+# Copyright © 2021 Province of British Columbia
+#
+# Licensed under the Apache License, Version 2.0 (the 'License');
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an 'AS IS' BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+"""Resource for managing version information."""
+import os
+from flask import jsonify
+from flask_restx import Namespace, Resource
+from met_api.utils.util import cors_preflight
+
+
+API = Namespace('version', description='Version endpoints')
+
+
+@cors_preflight('GET')
+@API.route('/')
+class Version(Resource):
+    """Resource for returning version information."""
+
+    @staticmethod
+    def get():
+        """Return version information including commit hash."""
+        commit_hash = os.getenv('MET_BUILD_COMMIT_HASH', 'unknown')
+        build_date = os.getenv('MET_BUILD_DATE', 'unknown')
+        branch = os.getenv('MET_BUILD_BRANCH', 'unknown')
+        repo_url = os.getenv('MET_GITHUB_REPO', 'https://github.com/bcgov/met-public')
+
+        return jsonify({
+            'commit': commit_hash,
+            'build_date': build_date,
+            'branch': branch,
+            'version': f'{commit_hash[:7]}' if commit_hash != 'unknown' else 'dev',
+            'commit_url': f'{repo_url}/commit/{commit_hash}' if commit_hash != 'unknown' else None,
+        })

met-api/tests/unit/api/test_version.py

@@ -0,0 +1,71 @@
+# Copyright © 2019 Province of British Columbia
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+"""Tests to verify the Version API end-point.
+
+Test-Suite to ensure that the /version endpoint is working as expected.
+"""
+import json
+from http import HTTPStatus
+from unittest.mock import patch
+
+
+def test_get_version_default(client, session):  # pylint:disable=unused-argument
+    """Assert that version endpoint returns default values when env vars not set."""
+    rv = client.get('/api/version/')
+    assert rv.status_code == HTTPStatus.OK
+
+    data = json.loads(rv.data)
+    assert 'commit' in data
+    assert 'build_date' in data
+    assert 'branch' in data
+    assert 'version' in data
+    assert 'commit_url' in data
+
+    # Default values when env vars not set
+    assert data['commit'] == 'unknown'
+    assert data['build_date'] == 'unknown'
+    assert data['branch'] == 'unknown'
+    assert data['version'] == 'dev'
+    assert data['commit_url'] is None
+
+
+@patch('os.getenv')
+def test_get_version_with_env_vars(mock_getenv, client, session):  # pylint:disable=unused-argument
+    """Assert that version endpoint returns values from environment variables."""
+    test_commit = 'abc123def456'
+    test_date = '2025-11-14T12:00:00Z'
+    test_branch = 'main'
+    test_repo = 'https://github.com/bcgov/met-public'
+
+    def getenv_side_effect(key, default=None):
+        env_vars = {
+            'MET_BUILD_COMMIT_HASH': test_commit,
+            'MET_BUILD_DATE': test_date,
+            'MET_BUILD_BRANCH': test_branch,
+            'MET_GITHUB_REPO': test_repo,
+        }
+        return env_vars.get(key, default)
+
+    mock_getenv.side_effect = getenv_side_effect
+
+    rv = client.get('/api/version/')
+    assert rv.status_code == HTTPStatus.OK
+
+    data = json.loads(rv.data)
+    assert data['commit'] == test_commit
+    assert data['build_date'] == test_date
+    assert data['branch'] == test_branch
+    assert data['version'].startswith(test_commit[:7])
+    assert data['commit_url'] == f'{test_repo}/commit/{test_commit}'

met-web/Dockerfile

@@ -31,6 +31,19 @@ RUN npm run build
 
 # Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
 FROM nginx:1.17 AS production-stage
+
+# Accept build arguments for version information to pass to runtime
+ARG REACT_APP_BUILD_COMMIT_HASH=dev
+ARG REACT_APP_BUILD_DATE=unknown
+ARG REACT_APP_BUILD_BRANCH=unknown
+ARG REACT_APP_GITHUB_REPO=https://github.com/bcgov/met-public
+
+# Set as environment variables for runtime access
+ENV REACT_APP_BUILD_COMMIT_HASH=${REACT_APP_BUILD_COMMIT_HASH}
+ENV REACT_APP_BUILD_DATE=${REACT_APP_BUILD_DATE}
+ENV REACT_APP_BUILD_BRANCH=${REACT_APP_BUILD_BRANCH}
+ENV REACT_APP_GITHUB_REPO=${REACT_APP_GITHUB_REPO}
+
 RUN mkdir /app
 
 # RUN  touch /var/run/nginx.pid && \

met-web/src/apiManager/endpoints/index.ts

@@ -208,6 +208,9 @@ const Endpoints = {
         GET_TENANT_LANGUAGES: `${AppConfig.apiUrl}/languages/tenant/tenant_id`,
         CREATE_OR_DELETE_TENANT_MAPPING: `${AppConfig.apiUrl}/languages/language_id/tenant/tenant_id`,
     },
+    Version: {
+        GET: `${AppConfig.apiUrl}/version/`,
+    },
 };
 
 export default Endpoints;

met-web/src/components/common/Input/Button.tsx

@@ -1,16 +1,14 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
     Button as MuiButton,
     ButtonProps as MuiButtonProps,
-    Stack,
     IconButton as MuiIconButton,
     useTheme,
 } from '@mui/material';
 import { globalFocusShadow, colors, elevations } from '../../common';
 import { isDarkColor } from 'utils';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconParams, IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { styled } from '@mui/system';
 import { RouterLinkRenderer } from '../Navigation/Link';
 
 const buttonStyles = {
@@ -213,7 +211,7 @@ const TertiaryButton = ({
 }: ButtonProps) => {
     const height: string = sizeMap[size];
     const customColor = colors.notification[color as keyof typeof colors.notification]?.shade ?? color;
-    const activeColor = color !== 'default' ? `color-mix(in srgb, ${customColor}, white 90%)` : colors.surface.blue[10];
+    const activeColor = color == 'default' ? colors.surface.blue[10] : `color-mix(in srgb, ${customColor}, white 90%)`;
 
     return (
         <MuiButton
@@ -284,58 +282,77 @@ type IconButtonProps = {
     icon: IconProp;
     onClick?: () => void;
     title?: string;
-    sx?: React.CSSProperties; // Add sx prop
+    sx?: React.CSSProperties;
+    size?: string;
+    iconSize?: string;
+    color?: string;
     backgroundColor?: string;
+    hoverBackgroundColor?: string;
+    disabled?: boolean;
+    iconProps?: IconParams;
 };
 
-const StyledIconButton = styled(MuiIconButton)(() => ({
-    color: '#494949',
-    borderRadius: '50%', // Make it round
-    width: '40px', // Set width to maintain circle shape
-    height: '40px', // Set height to maintain circle shape
-}));
-
 /**
  * IconButton component that renders a circular button with an icon.
- * It supports focus styles and hover effects.
+ * Provides full customization of size, colors, and positioning while maintaining
+ * consistent focus and hover behavior.
+ *
  * @param {IconButtonProps} props - The properties for the icon button.
  * @param {IconProp} props.icon - The icon to display in the button.
  * @param {() => void} props.onClick - The function to call when the button is clicked.
  * @param {string} props.title - The title for the button, used for accessibility.
  * @param {React.CSSProperties} props.sx - Additional styles to apply to the button.
- * @param {string} props.backgroundColor - Optional background color for the button.
+ * @param {string} props.size - Button diameter (e.g., '40px', '3rem'). Default is '40px'.
+ * @param {string} props.iconSize - Icon font size (e.g., '20px', '1.5rem'). Default is '20px'.
+ * @param {string} props.color - Icon color. Default is '#494949'.
+ * @param {string} props.backgroundColor - Button background color. Default is colors.focus.regular.inner.
+ * @param {string} props.hoverBackgroundColor - Background color on hover/focus. Default is '#F2F2F2'.
+ * @param {boolean} props.disabled - Whether the button is disabled.
+ * @param {IconParams} props.iconProps - Additional properties for the FontAwesomeIcon.
  * @returns A styled icon button component.
  */
-export const IconButton: React.FC<IconButtonProps> = ({ icon, onClick, title, sx, backgroundColor }) => {
-    const [focused, setFocused] = useState(false);
-
+export const IconButton: React.FC<IconButtonProps> = ({
+    icon,
+    onClick,
+    title,
+    sx,
+    size = '40px',
+    iconSize = '20px',
+    color = '#494949',
+    backgroundColor = colors.focus.regular.inner,
+    hoverBackgroundColor = '#F2F2F2',
+    disabled = false,
+    iconProps,
+}) => {
     return (
-        <Stack
-            direction="row"
-            justifyContent="center"
-            alignItems="center"
+        <MuiIconButton
+            onClick={onClick}
+            title={title}
+            aria-label={title}
+            disabled={disabled}
             sx={{
-                backgroundColor: backgroundColor ?? `${colors.focus.regular.inner}`,
-                cursor: 'pointer',
+                width: size,
+                height: size,
                 borderRadius: '50%',
-                boxShadow: focused ? `0 0 0 2px white, 0 0 0 4px ${colors.focus.regular.outer}` : 'none',
+                backgroundColor: backgroundColor,
+                color: color,
                 '&:hover': {
-                    backgroundColor: '#F2F2F2',
+                    backgroundColor: hoverBackgroundColor,
                 },
                 '&:focus-visible': {
-                    backgroundColor: '#F2F2F2',
-                    outline: 'white 2px dashed', // Remove default outline
+                    backgroundColor: hoverBackgroundColor,
+                    outline: `2px solid ${colors.focus.regular.outer}`,
                     outlineOffset: '2px',
+                    boxShadow: globalFocusShadow,
+                },
+                '&:disabled': {
+                    backgroundColor: colors.surface.gray[40],
+                    color: colors.type.regular.disabled,
                 },
                 ...sx,
             }}
-            onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
-            tabIndex={focused ? 0 : -1} // Set tabIndex to -1 when not focused
         >
-            <StyledIconButton onClick={onClick} title={title} aria-label={title}>
-                <FontAwesomeIcon icon={icon} style={{ fontSize: '20px', color: '#494949' }} />
-            </StyledIconButton>
-        </Stack>
+            <FontAwesomeIcon icon={icon} style={{ fontSize: iconSize }} {...iconProps} />
+        </MuiIconButton>
     );
 };