feat: add oss/enterprise version to footer (#245)

frontend/src/component/api/__tests__/__snapshots__/show-api-details-component-test.jsx.snap

@@ -7,11 +7,19 @@ exports[`renders correctly with empty version 1`] = `
 >
   <small>
     (test)
+  </small>
+  <br />
+  <small>
+    
   </small>
   <br />
   <small>
     We are the best!
   </small>
+  <br />
+  <small>
+    
+  </small>
 </react-mdl-FooterSection>
 `;
 
@@ -22,11 +30,19 @@ exports[`renders correctly with ui-config 1`] = `
 >
   <small>
     (test)
+  </small>
+  <br />
+  <small>
+    
   </small>
   <br />
   <small>
     We are the best!
   </small>
+  <br />
+  <small>
+    
+  </small>
 </react-mdl-FooterSection>
 `;
 
@@ -37,8 +53,16 @@ exports[`renders correctly without uiConfig 1`] = `
 >
   <small>
     
+  </small>
+  <br />
+  <small>
+    
   </small>
   <br />
   <small />
+  <br />
+  <small>
+    
+  </small>
 </react-mdl-FooterSection>
 `;

frontend/src/component/api/show-api-details-component.jsx

@@ -8,13 +8,35 @@ class ShowApiDetailsComponent extends Component {
     };
 
     render() {
-        const { slogan, environment, version, name } = this.props.uiConfig;
+        const { slogan, environment, version, versionInfo, name } = this.props.uiConfig;
-
+        let versionStr;
+        let updateNotification;
+        let instanceId;
+        if (versionInfo) {
+            if (versionInfo.current.enterprise) {
+                versionStr = `${name} ${versionInfo.current.enterprise}`;
+                if (versionInfo.latest && !versionInfo.isLatest) {
+                    updateNotification = `Upgrade available - Latest Enterprise release: ${versionInfo.latest.enterprise}`;
+                }
+            } else {
+                versionStr = `${name} ${versionInfo.current.oss}`;
+                if (versionInfo.latest && !versionInfo.isLatest) {
+                    updateNotification = `Upgrade available - Latest OSS release: ${versionInfo.latest.oss}`;
+                }
+            }
+            instanceId = versionInfo.instanceId;
+        } else {
+            versionStr = `${name} ${version}`;
+        }
         return (
-            <FooterSection type="bottom" logo={`${name} ${version}`}>
+            <FooterSection type="bottom" logo={`${versionStr}`}>
                 <small>{environment ? `(${environment})` : ''}</small>
                 <br />
+                <small>{updateNotification ? `${updateNotification}` : ''}</small>
+                <br />
                 <small>{slogan}</small>
+                <br />
+                <small>{instanceId ? `${instanceId}` : ''}</small>
             </FooterSection>
         );
     }