Improve plugins Manage Version's select UI #2424

apexskier · 2025-04-30T20:43:19Z

♻️ Current situation

The plugin "Manage Version" window has a couple minor (extremely minor) issues.

This screenshot shows it immediately after opening with no subsequent interaction.

The install button next to the select element should be enabled, as the selected version is 1.0.8, which is newer than the currently installed version of 1.0.6. I realize that the prior row is the latest version, which is the intended option here.
To that point, the default selected version in the select element I selected is always going to be the same as one of the tagged versions (I think always latest), so it's kind of redundant here.

💡 Proposed solution

This PR proposes selecting the currently installed version by default in the select element, which makes the disabling of the install button make sense. It also adds a checkmark within the option element to indicate which is installed, which is nice when interacting with the control.

⚙️ Release Notes

No breaking changes.

Select and highlight current version in the plugin Manage Versions window.

➕ Additional Information

I also cleaned up some of the angular conditionals in this template. There were a lot of cases of if (condition); if (!condition) that could be replaced with if (condition) else (This is a code smell, as it's not clear from reading only the second conditional that it's mutually exclusive with the prior).

A couple notes as a first time contributor:

npm run lint fails locally (and I can't rely on the PR since running requires maintainer kickoff).

❯ npm run lint

> [email protected] lint
> eslint . --max-warnings=0


Oops! Something went wrong! :(

ESLint: 9.25.0

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/cameronlittle/Developer/homebridge-config-ui-x/node_modules/@antfu/eslint-config/dist/index.js from /Users/cameronlittle/Developer/homebridge-config-ui-x/eslint.config.js not supported.
Instead change the require of index.js in /Users/cameronlittle/Developer/homebridge-config-ui-x/eslint.config.js to a dynamic import() which is available in all CommonJS modules.
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at Object.<anonymous> (/Users/cameronlittle/Developer/homebridge-config-ui-x/eslint.config.js:1:19)

formatOnSave is enabled in vscode (great!) but the file I'm working on here isn't formatted already, which leads to a ton of mess in the PR without disabling or manually reverting changes. Ideally a big PR would go through formatting everything and requiring formatting in PR checks so I wouldn't have to worry about this.

Testing

No tests added or changed (didn't see any existing test patterns for this detailed a UI concern). Manually tested locally.

Reviewer Nudging

See inline comments.

apexskier · 2025-04-30T20:46:26Z

ui/src/app/core/manage-plugins/manage-version/manage-version.component.html

-          <button class="btn btn-primary m-0 ms-3" [disabled]="!versionSelect" (click)="doInstall(versionSelect)">
-            <i class="fas fa-fw fa-arrow-alt-circle-down"></i>
-          </button>
-          } @if (versionSelect && versionSelect === plugin.installedVersion) {


This conditional felt confusingly complicated. Hopefully the new version is simpler: a single conditional controls both changes in logic (inner icon and enablement)

apexskier · 2025-04-30T20:46:49Z

ui/src/app/core/manage-plugins/manage-version/manage-version.component.html

@@ -51,17 +51,22 @@ <h6 class="mb-3">{{ 'plugins.manage.select_version' | translate }}</h6>
            <br />
            <select class="custom-select w-100" style="font-size: 0.875rem" [(ngModel)]="versionSelect">
              @for (version of versions; track version) {
-              <option [value]="version.version">v{{ version.version }}</option>
+              <option [value]="version.version" [selected]="versionSelect == version.version">


The new selected attribute is the main functional change here.

bwp91 · 2025-05-03T14:10:03Z

hi @apexskier im happy to fix the lint issues if it is easier for you

apexskier · 2025-05-04T02:22:33Z

@bwp91 Just pushed an attempt (though wasn't able to run locally still), but if that doesn't work, feel free.

apexskier · 2025-05-04T02:24:28Z

The test failure doesn't look related to me - only 1 / 10 in the matrix failed, timeout on gateway.

Copilot

Pull Request Overview

This PR improves the Manage Version UI for plugins by selecting the currently installed version by default and cleaning up conditional logic in the Angular template.

Updates the button logic to properly enable/disable the install button depending on whether the selected version matches the installed version.
Enhances the version select options by adding a checkmark for the installed version and refactoring conditional blocks for better clarity.

Comments suppressed due to low confidence (1)

ui/src/app/core/manage-plugins/manage-version/manage-version.component.html:52

[nitpick] Consider renaming the 'versionSelect' variable to 'selectedVersion' to better reflect its role as the currently selected version in the UI.

<select class="custom-select w-100" style="font-size: 0.875rem" [(ngModel)]="versionSelect">

Copilot · 2025-05-04T10:41:04Z

ui/src/app/core/manage-plugins/manage-version/manage-version.component.html

@@ -51,17 +51,23 @@ <h6 class="mb-3">{{ 'plugins.manage.select_version' | translate }}</h6>
            <br />
            <select class="custom-select w-100" style="font-size: 0.875rem" [(ngModel)]="versionSelect">
              @for (version of versions; track version) {
-              <option [value]="version.version">v{{ version.version }}</option>
+              <option [value]="version.version" [selected]="versionSelect == version.version">


[nitpick] The option element uses both ngModel binding and the [selected] attribute, which can be redundant. Consider relying solely on ngModel to manage the selected state and remove the [selected] attribute for simpler, clearer code.

Suggested change

<option [value]="version.version" [selected]="versionSelect == version.version">

<option [value]="version.version">

could be true that [selected] is not needed when there is an [(ngModel)] on the select attribute.

@apexskier was there a particular situation where it was not working before but adding the [selected] made it work here?

My first screenshot demonstrates this not working in Safari. However, I'm having trouble reproducing this now (I've done that update since) so I'm not 100% confident.

I haven't used angular 2 much at all, but reading the docs for ngModel, I don't see any indication that it manages the select attribute.

apexskier added 3 commits April 30, 2025 14:23

Clean up conditionals

b0d6134

Auto-select current version, add visual indicator

a9e7c3b

Simplify version select button

efd6e68

github-actions bot added the latest Related to Latest Branch label Apr 30, 2025

Clean up

6f0bc9d

apexskier commented Apr 30, 2025

View reviewed changes

apexskier marked this pull request as ready for review April 30, 2025 20:58

apexskier changed the title ~~Manage version select~~ Improve plugin's Manage Version's select UI Apr 30, 2025

apexskier changed the title ~~Improve plugin's Manage Version's select UI~~ Improve plugins Manage Version's select UI Apr 30, 2025

Fix lint errors

5c05b5d

bwp91 requested review from Copilot and bwp91 May 4, 2025 10:40

Copilot AI reviewed May 4, 2025

View reviewed changes

bwp91 approved these changes May 17, 2025

View reviewed changes

bwp91 merged commit 11f28b1 into homebridge:latest May 17, 2025
13 of 81 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve plugins Manage Version's select UI #2424

Improve plugins Manage Version's select UI #2424

apexskier commented Apr 30, 2025 •

edited

Loading

apexskier Apr 30, 2025

apexskier Apr 30, 2025

bwp91 commented May 3, 2025

apexskier commented May 4, 2025

apexskier commented May 4, 2025

Copilot AI left a comment

Copilot AI May 4, 2025

bwp91 May 4, 2025

apexskier May 4, 2025

	<option [value]="version.version" [selected]="versionSelect == version.version">
	<option [value]="version.version">

Improve plugins Manage Version's select UI #2424

Improve plugins Manage Version's select UI #2424

Conversation

apexskier commented Apr 30, 2025 • edited Loading

♻️ Current situation

💡 Proposed solution

⚙️ Release Notes

➕ Additional Information

Testing

Reviewer Nudging

apexskier Apr 30, 2025

Choose a reason for hiding this comment

apexskier Apr 30, 2025

Choose a reason for hiding this comment

bwp91 commented May 3, 2025

apexskier commented May 4, 2025

apexskier commented May 4, 2025

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Copilot AI May 4, 2025

Choose a reason for hiding this comment

bwp91 May 4, 2025

Choose a reason for hiding this comment

apexskier May 4, 2025

Choose a reason for hiding this comment

apexskier commented Apr 30, 2025 •

edited

Loading