Merge pull request #155 from cqse/ts/45910_project_and_baseline_selector_not_working

krgebhardt · web-flow · commit 9e4de715e15b · 2026-05-19T13:58:06.000+02:00
TS-45910: Azure DevOps extension: Dashboard widget only offers one project in dropdown
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,9 @@ We use [semantic versioning](http://semver.org/):
 - MINOR version when you add functionality in a backwards-compatible manner, and
 - PATCH version when you make backwards compatible bug fixes.
 
+# 1.5.4
+- [fix] dashboard widget: project and baseline dropdowns only offered one element
+
 # 1.5.3
 - [fix] work item integration: findings and test gap badges had outdated links to Teamscale
 - [fix] work item integration: spec-item findings badges always showed an "unchanged" findings churn and clicking them led to an error page in Teamscale
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,10 +26,9 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@types/chosen-js": "^1.8.6",
-    "chosen-js": "^1.8.7",
     "jquery": "^4.0.0",
     "jquery-ui-dist": "^1.13.3",
+    "tom-select": "^2.6.0",
     "vss-web-extension-sdk": "^5.141.0"
   },
   "overrides": {
diff --git a/sites/widget-configuration.html b/sites/widget-configuration.html
@@ -4,10 +4,10 @@
     <script src="../lib/VSS.SDK.min.js"></script>
     <script src="../lib/jquery.min.js"></script>
     <script src="../lib/jquery-ui.min.js"></script>
-    <script src="../lib/chosen.jquery.min.js"></script>
+    <script src="../lib/tom-select.complete.min.js"></script>
     <link rel="stylesheet" type="text/css" href="../styles/settings.css">
     <link rel="stylesheet" type="text/css" href="../styles/jquery-ui.min.css">
-    <link rel="stylesheet" type="text/css" href="../styles/chosen.min.css">
+    <link rel="stylesheet" type="text/css" href="../styles/tom-select.default.min.css">
 </head>
 <body>
 <div class="container">
diff --git a/src/DashboardWidgetExtension/WidgetConfiguration.ts b/src/DashboardWidgetExtension/WidgetConfiguration.ts
@@ -14,6 +14,8 @@ import NotificationUtils from '../Utils/NotificationUtils';
 import {ExtensionSetting} from "../Settings/ExtensionSetting";
 import UiUtils = require('../Utils/UiUtils');
 
+declare const TomSelect: any;
+
 export class Configuration {
     private projectSettings: ProjectSettings = null;
     private organizationSettings: Settings = null;
@@ -22,18 +24,19 @@ export class Configuration {
 
     private teamscaleClient: TeamscaleClient = null;
     private tgaTeamscaleClient: TeamscaleClient = null;
-    private teamscaleTgaProjectSelect = document.getElementById('teamscale-tga-project-select') as HTMLSelectElement;
 
     private notificationUtils: NotificationUtils = null;
     private emailContact: string = '';
 
-    private teamscaleProjectSelect = document.getElementById('teamscale-project-select') as HTMLSelectElement;
-    private teamscaleBaselineSelect = document.getElementById('ts-baseline-select') as HTMLSelectElement;
     private baselineDaysInput = document.getElementById('baseline-days-input') as HTMLInputElement;
     private datepicker = $('#datepicker');
     private testGapCheckbox = $('#show-test-gap');
     private separateTgaServerCheckbox = $('#separate-tga-server');
 
+    private tsProjectSelect: any;
+    private tsTgaProjectSelect: any;
+    private tsBaselineSelect: any;
+
     private widgetHelpers: any;
     private readonly notificationService: any;
     private readonly controlService: any;
@@ -63,10 +66,15 @@ export class Configuration {
             this.separateTgaServerCheckbox.prop('checked', this.widgetSettings.useSeparateTgaServer);
         }
         this.zipTgaConfiguration();
-        $('#teamscale-project-select').chosen({width: '100%'}).on('change',
-            () => this.fillDropdownWithTeamscaleBaselines(notifyWidgetChange));
-        $('#teamscale-tga-project-select').chosen({width: '100%'}).on('change', notifyWidgetChange);
-        $('#ts-baseline-select').chosen({width: '95%'}).on('change', notifyWidgetChange);
+
+        this.tsProjectSelect = new TomSelect('#teamscale-project-select', {});
+        this.tsProjectSelect.on('change', () => this.fillDropdownWithTeamscaleBaselines(notifyWidgetChange));
+
+        this.tsTgaProjectSelect = new TomSelect('#teamscale-tga-project-select', {});
+        this.tsTgaProjectSelect.on('change', notifyWidgetChange);
+
+        this.tsBaselineSelect = new TomSelect('#ts-baseline-select', {});
+        this.tsBaselineSelect.on('change', notifyWidgetChange);
 
         this.loadAndCheckConfiguration().then(() => this.fillDropdownsWithProjects())
             .then(() => this.fillDropdownWithTeamscaleBaselines(notifyWidgetChange))
@@ -118,7 +126,7 @@ export class Configuration {
         if (this.separateTgaServerCheckbox.is(':checked')) {
             displayAttribute = 'block';
 
-            if (!this.teamscaleTgaProjectSelect.firstChild) {
+            if (Object.keys(this.tsTgaProjectSelect.options).length === 0) {
                 this.fillTgaDropdownWithProjects();
             }
         }
@@ -129,12 +137,12 @@ export class Configuration {
     }
 
     private handleMissingTgaServerConfig() {
-        const element = document.createElement('option');
-        element.textContent = 'Error: No TGA server configured. Deactivate separate Server option or' +
-            ' configure TGA Server.';
-        this.teamscaleTgaProjectSelect.appendChild(element);
-        $('#' + this.teamscaleTgaProjectSelect.id).prop('disabled', true);
-        $('#' + this.teamscaleTgaProjectSelect.id).trigger('chosen:updated');
+        const message = 'Error: No TGA server configured. Deactivate separate Server option or configure TGA Server.';
+        this.tsTgaProjectSelect.clear(true);
+        this.tsTgaProjectSelect.clearOptions();
+        this.tsTgaProjectSelect.addOption({value: message, text: message});
+        this.tsTgaProjectSelect.setValue(message, true);
+        this.tsTgaProjectSelect.disable();
         return Promise.resolve();
     }
 
@@ -149,7 +157,7 @@ export class Configuration {
      * Loads a list of accessible projects from the Teamscale server and appends them to the TQE dropdown menu.
      */
     private async fillTqeDropdownWithProjects() {
-        return this.fillDropdownWithProjects(this.teamscaleClient, this.teamscaleProjectSelect, '#teamscale-project-select');
+        return this.fillDropdownWithProjects(this.teamscaleClient, this.tsProjectSelect, 'teamscaleProject');
     }
 
     /**
@@ -164,13 +172,13 @@ export class Configuration {
             }
             this.tgaTeamscaleClient = new TeamscaleClient(tgaUrl);
         }
-        return this.fillDropdownWithProjects(this.tgaTeamscaleClient, this.teamscaleTgaProjectSelect, '#teamscale-tga-project-select');
+        return this.fillDropdownWithProjects(this.tgaTeamscaleClient, this.tsTgaProjectSelect, 'tgaTeamscaleProject');
     }
 
     /**
      * Loads a list of accessible projects from the Teamscale server and appends them to the dropdown menu.
      */
-    private async fillDropdownWithProjects(teamscaleClient: TeamscaleClient, selectElement: HTMLSelectElement, selectElementId: string) {
+    private async fillDropdownWithProjects(teamscaleClient: TeamscaleClient, projectSelect: any, settingsKey: string) {
         let projects: string[];
         try {
             projects = await teamscaleClient.retrieveTeamscaleProjects();
@@ -179,26 +187,31 @@ export class Configuration {
             return Promise.reject(error);
         }
 
+        projectSelect.clear(true);
+        projectSelect.clearOptions();
+        projectSelect.enable();
         for (const project of projects) {
-            const element = document.createElement('option');
-            element.textContent = project;
-            element.value = project;
-            if (this.widgetSettings) {
-                element.selected = this.widgetSettings.teamscaleProject === project;
-            }
-            selectElement.appendChild(element);
+            projectSelect.addOption({value: project, text: project});
         }
 
-        $(selectElementId).trigger('chosen:updated');
+        const savedValue = this.widgetSettings && this.widgetSettings[settingsKey];
+        if (savedValue && projects.indexOf(savedValue) !== -1) {
+            projectSelect.setValue(savedValue, true);
+        } else if (projects.length > 0) {
+            projectSelect.setValue(projects[0], true);
+        }
     }
 
     /**
      * Loads the list configured baselines for a project from the Teamscale server and appends them to the dropdown menu.
      */
     private async fillDropdownWithTeamscaleBaselines(notifyWidgetChange) {
         // use input value and not widgetSetting Object which might hold an outdated project name
-        // since the chosen change event of the project selector is fired before the settings object update
-        const teamscaleProject: string = this.teamscaleProjectSelect.value;
+        // since the change event of the project selector is fired before the settings object update
+        const teamscaleProject: string = this.tsProjectSelect.getValue();
+        if (!teamscaleProject) {
+            return;
+        }
 
         let baselines: ITeamscaleBaseline[];
         try {
@@ -209,43 +222,31 @@ export class Configuration {
             return Promise.reject(error);
         }
 
-        while (this.teamscaleBaselineSelect.firstChild) {
-            this.teamscaleBaselineSelect.removeChild(this.teamscaleBaselineSelect.firstChild);
-        }
-
-        this.disableBaselineDropdownForProjectsWithoutBaselines(baselines, teamscaleProject);
+        this.tsBaselineSelect.clear(true);
+        this.tsBaselineSelect.clearOptions();
 
-        for (const baseline of baselines) {
-            const element = document.createElement('option');
-            const date = new Date(baseline.timestamp);
-            element.textContent = baseline.name + ' (' + date.toLocaleDateString() + ')';
-            element.value = baseline.name;
-            if (this.widgetSettings) {
-                element.selected = this.widgetSettings.tsBaseline === baseline.name;
+        if (baselines.length === 0) {
+            const message = 'No baseline configured for project »' + teamscaleProject + '«';
+            this.tsBaselineSelect.addOption({value: message, text: message});
+            this.tsBaselineSelect.setValue(message, true);
+            this.tsBaselineSelect.disable();
+        } else {
+            this.tsBaselineSelect.enable();
+            for (const baseline of baselines) {
+                const date = new Date(baseline.timestamp);
+                const text = baseline.name + ' (' + date.toLocaleDateString() + ')';
+                this.tsBaselineSelect.addOption({value: baseline.name, text: text});
+            }
+            if (this.widgetSettings && this.widgetSettings.tsBaseline) {
+                this.tsBaselineSelect.setValue(this.widgetSettings.tsBaseline, true);
             }
-            this.teamscaleBaselineSelect.appendChild(element);
         }
 
-        // update widget settings to get rid of a baseline which belongs to the formally chosen project
+        // update widget settings to get rid of a baseline which belongs to the formerly chosen project
         this.getAndUpdateCustomSettings();
-        $('#ts-baseline-select').trigger('chosen:updated');
         notifyWidgetChange();
     }
 
-    /**
-     * Disables the baseline chooser for projects without configured Teamscale baselines.
-     */
-    private disableBaselineDropdownForProjectsWithoutBaselines(baselines: ITeamscaleBaseline[], teamscaleProject: string) {
-        if (baselines.length === 0) {
-            const element = document.createElement('option');
-            element.textContent = 'No baseline configured for project »' + teamscaleProject + '«';
-            this.teamscaleBaselineSelect.appendChild(element);
-            $('#ts-baseline-select').prop('disabled', true);
-        } else {
-            $('#ts-baseline-select').prop('disabled', false);
-        }
-    }
-
     /**
      * Loads the Teamscale email contact from the organization settings and assures that a Teamscale server url and project
      * name is set in the Azure DevOps project settings.
@@ -304,14 +305,14 @@ export class Configuration {
      * Read the current configuration as specified in the configuration form. Stores it as class member and returns it.
      */
     private getAndUpdateCustomSettings(): ITeamscaleWidgetSettings {
-        const teamscaleProject: string = this.teamscaleProjectSelect.value;
-        const tgaTeamscaleProject: string = this.teamscaleTgaProjectSelect.value;
+        const teamscaleProject: string = this.tsProjectSelect ? this.tsProjectSelect.getValue() : '';
+        const tgaTeamscaleProject: string = this.tsTgaProjectSelect ? this.tsTgaProjectSelect.getValue() : '';
         const baselineDays: number = Number(this.baselineDaysInput.value);
         let startFixedDate: number;
         if (this.datepicker.datepicker('getDate')) {
             startFixedDate = this.datepicker.datepicker('getDate').getTime();
         }
-        const tsBaseline: string = this.teamscaleBaselineSelect.value;
+        const tsBaseline: string = this.tsBaselineSelect ? this.tsBaselineSelect.getValue() : '';
         const showTestGapBadge: boolean = document.getElementById('show-test-gap').checked;
         const useSeparateTgaServer: boolean = document.getElementById('separate-tga-server').checked;
 
diff --git a/tsconfig.json b/tsconfig.json
@@ -9,8 +9,7 @@
         "rootDir": "src/",
         "outDir": "dist/",
         "types": [
-            "vss-web-extension-sdk",
-            "chosen-js"
+            "vss-web-extension-sdk"
         ],
         "lib": [ "es2015", "dom" ]
     }
diff --git a/vss-extension.json b/vss-extension.json
@@ -168,14 +168,14 @@
             "packagePath": "lib/VSS.SDK.min.js"
         },
         {
-            "path": "node_modules/chosen-js/chosen.jquery.min.js",
+            "path": "node_modules/tom-select/dist/js/tom-select.complete.min.js",
             "addressable": true,
-            "packagePath": "lib/chosen.jquery.min.js"
+            "packagePath": "lib/tom-select.complete.min.js"
         },
         {
-            "path": "node_modules/chosen-js/chosen.min.css",
+            "path": "node_modules/tom-select/dist/css/tom-select.default.min.css",
             "addressable": true,
-            "packagePath": "styles/chosen.min.css"
+            "packagePath": "styles/tom-select.default.min.css"
         },
         {
             "path": "node_modules/jquery/dist/jquery.min.js",
@@ -197,11 +197,6 @@
             "addressable": true,
             "packagePath": "styles/images/ui-icons_444444_256x240.png"
         },
-        {
-            "path": "node_modules/chosen-js/chosen-sprite.png",
-            "addressable": true,
-            "packagePath": "styles/chosen-sprite.png"
-        },
         {
             "path": "scripts/require.js",
             "addressable": true
