feat: Display Docker image tag in app Footer to help identify deploye…

…d changes (#1045)

Close #1044 

Note: Generation of the `DOCKER_TAG` build-arg is built into the SBL CLI

## Changes

- Displays the provided "version" tag at the bottom of each page

## How to test this PR

1. Include the desired display tag in your Docker `build` command:
`--build-arg DOCKER_TAG=1044-show-tag`
2. Verify it is displayed at the bottom of the page

## Screenshots

<img width="1244" alt="Screenshot 2024-11-04 at 1 37 32 PM"
src="https://github.com/user-attachments/assets/e8445b71-829d-419a-824d-17e91e701de4">

Dockerfile

@@ -11,7 +11,8 @@ RUN npx pkg ./node_modules/@import-meta-env/cli/bin/import-meta-env.js \
 
 COPY / /usr/src/app
 
-# TODO: CREATE RELEASE TAG -- RUN echo "{ \"version\": \"${DOCKER_TAG}\" }" > ./src/common/constants/release.json
+RUN echo "{ \"version\": \"${DOCKER_TAG}\" }" > ./src/constants/release.json
+
 RUN yarn install
 RUN yarn build
 

src/App.tsx

@@ -46,6 +46,7 @@ import { useHeaderAuthLinks } from 'utils/useHeaderAuthLinks';
 import ErrorFallback from 'ErrorFallback';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { ErrorBoundary } from 'react-error-boundary';
+import release from './constants/release.json';
 
 const FilingHome = lazy(async () => import('pages/Filing/FilingHome'));
 const ProfileForm = lazy(async () => import('pages/ProfileForm'));
@@ -163,6 +164,9 @@ function BasicLayout(): Promise<void> | ReactElement {
       <div>
         {/* Part of fix to the white space below the footer problem */}
         <FooterCfGovWrapper />
+        <div className='mx-auto mt-[-30px] max-w-[1200px] px-[30px] pb-5'>
+          {release.version}
+        </div>
       </div>
     </div>
   );

src/constants/release.json

@@ -0,0 +1,3 @@
+{
+  "version": "LocalHost"
+}