feat: display the build number as extra data (#8022)

## About the changes
Show the build number between parenthesis separated from the version.

When there's no build number:

![image](https://github.com/user-attachments/assets/408c6953-9af5-4c8d-88e2-50eb17016ee1)

When there is:

![image](https://github.com/user-attachments/assets/b5481294-651a-422c-9699-b93b3d8cf4be)

frontend/src/component/menu/Footer/ApiDetails/ApiDetails.tsx

@@ -13,17 +13,18 @@ interface IApiDetailsProps {
 
 export const ApiDetails = (props: IApiDetailsProps): ReactElement => {
     const instanceId = props.uiConfig.versionInfo?.instanceId;
-    const currentVersion = formatCurrentVersion(props.uiConfig);
+    const { name, version, buildNumber } = formatCurrentVersion(props.uiConfig);
     const environment = props.uiConfig.environment;
     const updateNotification = formatUpdateNotification(props.uiConfig);
 
+    const buildInfo = buildNumber ? <small> ({buildNumber})</small> : '';
     return (
         <section title='API details'>
             <FooterTitle>
-                {currentVersion}{' '}
+                {name} {version} {buildInfo}
                 <ConditionallyRender
                     condition={Boolean(environment)}
-                    show={<small>({environment})</small>}
+                    show={<small> ({environment})</small>}
                 />
             </FooterTitle>
             <ConditionallyRender

frontend/src/component/menu/Footer/ApiDetails/__snapshots__/ApiDetails.test.tsx.snap

@@ -9,10 +9,11 @@ exports[`renders correctly with empty version 1`] = `
       <h2
         class="css-gtu1fw"
       >
-        Unleash 
+        Unleash
+         
          
         <small>
-          (
+           (
           test
           )
         </small>
@@ -43,10 +44,12 @@ exports[`renders correctly with ui-config 1`] = `
       <h2
         class="css-gtu1fw"
       >
-        Unleash 1.1.0
+        Unleash
+         
+        1.1.0
          
         <small>
-          (
+           (
           test
           )
         </small>
@@ -77,7 +80,9 @@ exports[`renders correctly with versionInfo 1`] = `
       <h2
         class="css-gtu1fw"
       >
-        Unleash 1.2.3
+        Unleash
+         
+        1.2.3
          
       </h2>
       <small>
@@ -111,7 +116,9 @@ exports[`renders correctly without uiConfig 1`] = `
       <h2
         class="css-gtu1fw"
       >
-        Unleash 1.1.0
+        Unleash
+         
+        1.1.0
          
       </h2>
       <br />

frontend/src/component/menu/Footer/ApiDetails/apidetails.helpers.tsx

@@ -8,18 +8,21 @@ export interface IPartialUiConfig {
     versionInfo?: IVersionInfo;
 }
 
-export const formatCurrentVersion = (uiConfig: IPartialUiConfig): string => {
+export const formatCurrentVersion = (
+    uiConfig: IPartialUiConfig,
+): { name: string; version: string; buildNumber?: string } => {
     const current = uiConfig.versionInfo?.current;
-
-    if (current?.enterprise) {
-        return `${uiConfig.name} ${current.enterprise}`;
-    }
-
-    if (current?.oss) {
-        return `${uiConfig.name} ${current.oss}`;
-    }
-
-    return `${uiConfig.name} ${uiConfig.version}`;
+    const [version, buildNumber] = (
+        current?.enterprise ||
+        current?.oss ||
+        uiConfig.version ||
+        ''
+    ).split('+');
+    return {
+        name: uiConfig.name,
+        version,
+        buildNumber,
+    };
 };
 
 export const formatUpdateNotification = (

frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap

@@ -22,7 +22,9 @@ exports[`should render DrawerMenu 1`] = `
           <h2
             className="css-gtu1fw"
           >
-            Unleash 5.x
+            Unleash
+             
+            5.x
              
           </h2>
           <br />
@@ -566,7 +568,9 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
           <h2
             className="css-gtu1fw"
           >
-            Unleash 5.x
+            Unleash
+             
+            5.x
              
           </h2>
           <br />