feat: Display STF version in Web UI (#858)

* feat: Display STF version in Web UI

Adds the STF application version to the main menu in the Web UI.

Changes:
- Modified `lib/units/app/index.js` to read the version from `package.json` and make it available to the frontend via the `GLOBAL_APPSTATE.config.stfVersion` variable.
- Updated `res/app/menu/menu.pug` to display this version in the top navigation bar, near the help icon. The format is "vX.Y.Z".
- Added an E2E test (`res/test/e2e/menu/menu-spec.js`) to verify the presence and correct format of the version string in the UI.

Signed-off-by: matanbaruch <matan.baruch@unity3d.com>

* Update menu-spec.js

Signed-off-by: matanbaruch <matan.baruch@unity3d.com>

* fix: lint

Signed-off-by: matanbaruch <matan.baruch@unity3d.com>

* feat: Add application state to root scope and style version text in menu

- Introduced a new run block in `app.js` to attach the application state to the `$rootScope`.
- Added CSS styles for the version text in the menu to enhance its visibility and layout.

Signed-off-by: matanbaruch <matan.baruch@unity3d.com>

* fix: Correct path to package.json in index.js

Updated the import statement for package.json in lib/units/app/index.js to use the correct relative path, ensuring proper access to the application version information.

Signed-off-by: matanbaruch <matan.baruch@unity3d.com>

---------

Signed-off-by: matanbaruch <matan.baruch@unity3d.com>
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

lib/units/app/index.js

@@ -16,6 +16,7 @@ var compression = require('compression')
 
 var logger = require('../../util/logger')
 var pathutil = require('../../util/pathutil')
+var packageJson = require('../../../package.json')
 
 var auth = require('./middleware/auth')
 var deviceIconMiddleware = require('./middleware/device-icons')
@@ -112,6 +113,7 @@ module.exports = function(options) {
           wsUrl.query.uip = req.ip
           return url.format(wsUrl)
         })()
+      , stfVersion: packageJson.version
       }
     , user: req.user
     }

res/app/app.js

@@ -35,4 +35,8 @@ require.ensure([], function(require) {
     .config(function(hotkeysProvider) {
       hotkeysProvider.templateTitle = 'Keyboard Shortcuts:'
     })
+    
+    .run(['$rootScope', 'AppState', function($rootScope, AppState) {
+      $rootScope.state = AppState
+    }])
 })

res/app/menu/menu.css

@@ -70,6 +70,17 @@
   min-height: 44px !important;
 }
 
+.stf-menu .version-text {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 44px;
+  color: #777777;
+  font-weight: 400;
+  padding: 0 10px;
+  text-align: center;
+  vertical-align: middle;
+}
+
 .stf-menu .information-level {
   background-color: #5bc0df;
 }

res/app/menu/menu.pug

@@ -41,7 +41,10 @@
         type='button'
         ng-click='logout()')
           i.fa.fa-sign-out
-          span(translate) Logout 
+          span(translate) Logout
+
+      li
+        span.version-text v{{ $root.state.config.stfVersion }}
 
       li(ng-show='!$root.basicMode')
         a(ng-href='/#!/help', accesskey='6')

res/test/e2e/menu/menu-spec.js

@@ -0,0 +1,16 @@
+describe('Menu', function() {
+  it('should display the STF version', function() {
+    // Navigate to the device list page
+    browser.get('/#!/devices')
+
+    // Find the version display element
+    var versionElement = element(by.css('.stf-menu .version-text'))
+
+    // Assert that the element is present
+    expect(versionElement.isPresent()).toBe(true)
+
+    // Assert that the text matches 'v' + version from package.json
+    // Using a regex to be more flexible with the exact version number.
+    expect(versionElement.getText()).toMatch(/^v\d+\.\d+\.\d+$/)
+  })
+})