(feat)O3-4671: Adding config to enable implementors add version number.

packages/apps/esm-login-app/__mocks__/config.mock.ts

@@ -21,6 +21,8 @@ export const mockConfig: ConfigSchema = {
   },
   footer: {
     additionalLogos: [],
+    version: '3.0.0',
+    showVersion: false,
   },
   showPasswordOnSeparateScreen: true,
 };

packages/apps/esm-login-app/src/config-schema.ts

@@ -77,21 +77,33 @@ export const configSchema = {
       _type: Type.Array,
       _elements: {
         _type: Type.Object,
-        src: {
-          _type: Type.String,
-          _required: true,
-          _description: 'The source URL of the logo image',
-          _validators: [validators.isUrl],
-        },
-        alt: {
-          _type: Type.String,
-          _required: true,
-          _description: 'The alternative text for the logo image',
+        _properties: {
+          src: {
+            _type: Type.String,
+            _required: true,
+            _description: 'The source URL of the logo image',
+            _validators: [validators.isUrl],
+          },
+          alt: {
+            _type: Type.String,
+            _required: true,
+            _description: 'The alternative text for the logo image',
+          },
         },
       },
       _default: [],
       _description: 'An array of logos to be displayed in the footer next to the OpenMRS logo.',
     },
+    version: {
+      _type: Type.String,
+      _default: null,
+      _description: 'Version number to display in the footer (e.g., "3.0.0")',
+    },
+    showVersion: {
+      _type: Type.Boolean,
+      _default: false,
+      _description: 'Whether to display the version information in the footer.',
+    },
   },
   showPasswordOnSeparateScreen: {
     _type: Type.Boolean,
@@ -113,6 +125,8 @@ export interface ConfigSchema {
       alt: string;
       src: string;
     }>;
+    version: string;
+    showVersion: boolean;
   };
   links: {
     loginSuccess: string;

packages/apps/esm-login-app/src/footer.component.tsx

@@ -28,8 +28,14 @@ const Footer: React.FC = () => {
             <use href="#omrs-logo-full-color"></use>
           </svg>
           <span className={styles.poweredByText}>
-            {t('poweredBySubtext', 'An open-source medical record system and global community')}
+            {t('poweredBySubtext', 'An open-source medical record system and global community.')}
           </span>
+          {/* Only show version section if enabled in config and version is provided */}
+          {config.footer.showVersion && config.footer.version && (
+            <span className={styles.versionText}>
+              {t('version', 'Version')} {config.footer.version}
+            </span>
+          )}
           <Link
             className={styles.learnMoreButton}
             href="https://openmrs.org"

packages/apps/esm-login-app/src/footer.scss

@@ -23,6 +23,13 @@
   opacity: 80%;
 }
 
+.versionText {
+  font-size: layout.$spacing-05;
+  color: var(--brand-03);
+  text-align: right;
+  flex-shrink: 0;
+}
+
 @media only screen and (max-width: 1024px) {
   .footer {
     flex-direction: row;

packages/apps/esm-login-app/translations/en.json

@@ -30,12 +30,13 @@
   "passwordChangedSuccessfully": "Password changed successfully",
   "passwordConfirmationRequired": "Password confirmation is required",
   "passwordsDoNotMatch": "Passwords do not match",
-  "poweredBySubtext": "An open-source medical record system and global community",
+  "poweredBySubtext": "An open-source medical record system and global community.",
   "rememberLocationForFutureLogins": "Remember my location for future logins",
   "selectYourLocation": "Select your location from the list below. Use the search bar to find your location.",
   "showPassword": "Show password",
   "submitting": "Submitting",
   "username": "Username",
   "validValueRequired": "A valid value is required",
+  "version": "Version",
   "welcome": "Welcome"
 }