From 4e26101a95eaeadba9affa63854d90be24d867c1 Mon Sep 17 00:00:00 2001 From: Matan Baruch <36934912+matanbaruch@users.noreply.github.com> Date: Fri, 23 May 2025 13:31:20 +0300 Subject: [PATCH] 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 * Update menu-spec.js Signed-off-by: matanbaruch * fix: lint Signed-off-by: matanbaruch * 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 * 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 --------- Signed-off-by: matanbaruch Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> --- lib/units/app/index.js | 2 ++ res/app/app.js | 4 ++++ res/app/menu/menu.css | 11 +++++++++++ res/app/menu/menu.pug | 5 ++++- res/test/e2e/menu/menu-spec.js | 16 ++++++++++++++++ 5 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 res/test/e2e/menu/menu-spec.js diff --git a/lib/units/app/index.js b/lib/units/app/index.js index 2e1d1a41..48355d1b 100644 --- a/lib/units/app/index.js +++ b/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 } diff --git a/res/app/app.js b/res/app/app.js index f5073847..686b7901 100644 --- a/res/app/app.js +++ b/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 + }]) }) diff --git a/res/app/menu/menu.css b/res/app/menu/menu.css index 694ce00a..a6af536b 100644 --- a/res/app/menu/menu.css +++ b/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; } diff --git a/res/app/menu/menu.pug b/res/app/menu/menu.pug index 0de1fbe1..faff2c60 100644 --- a/res/app/menu/menu.pug +++ b/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') diff --git a/res/test/e2e/menu/menu-spec.js b/res/test/e2e/menu/menu-spec.js new file mode 100644 index 00000000..de9f17f3 --- /dev/null +++ b/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+$/) + }) +})