add plugin list modal for updating to hb v2.0

CHANGELOG.md

@@ -23,6 +23,10 @@ All notable changes to `homebridge-config-ui-x` will be documented in this file.
 
 ## BETA
 
+### UI Changes
+
+- add plugin list modal for updating to hb v2.0
+
 ### Other Changes
 
 - relocate `disable-plugin` component to `core/plugins` module

ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.html

@@ -0,0 +1,84 @@
+<div class="modal-content">
+  <div class="modal-header">
+    <h5 class="modal-title">Homebridge v2 Update</h5>
+    <button
+      type="button"
+      class="btn-close"
+      data-bs-dismiss="modal"
+      [attr.aria-label]="'form.button_close' | translate"
+      (click)="$activeModal.close('Dismiss')"
+    ></button>
+  </div>
+  <div class="modal-body w-100 text-center">
+    <div *ngIf="loading" class="w-100 text-center primary-text">
+      <i class="fa fa-fw fa-cog fa-spin" style="font-size: 75px"></i>
+    </div>
+    <div *ngIf="!loading">
+      <div *ngIf="allPluginsSupported">
+        <i class="fas fa-fw fa-check-circle primary-text mb-4" style="font-size: 75px"></i>
+        <p>All your plugins are marked as compatible with the new version of Homebridge.</p>
+        <p>You are all set to continue below.</p>
+      </div>
+      <div *ngIf="!allPluginsSupported">
+        <i class="fas fa-fw fa-info-circle primary-text mb-4" style="font-size: 75px"></i>
+        <p>Some of your plugins are not explicitly marked as compatible with the new version of Homebridge.</p>
+        <p>
+          This does <span class="fw-bold">not</span> necessarily mean that they won't work. We just can't guarantee that
+          they will.
+        </p>
+        <p>
+          For more information about this update, please see the
+          <a href="https://github.com/homebridge/homebridge/wiki/Updating-To-Homebridge-v2.0" target="_blank"
+            >wiki page</a
+          >.
+        </p>
+        <p>To ignore this warning and continue with the update, click continue below.</p>
+      </div>
+      <ul class="list-group list-group-box mt-4">
+        <li
+          *ngFor="let plugin of installedPlugins"
+          class="list-group-item d-flex flex-row flex-wrap justify-content-between"
+        >
+          <span class="font-monospace">{{ plugin.name }}</span>
+          <span *ngIf="plugin.hb2Ready === 'supported'">
+            <i
+              class="fas fa-check-circle green-text fa-xl ms-2"
+              aria-label="The developer has specifically marked this plugin as compatible with Homebridge v2.0"
+            ></i>
+          </span>
+          <span *ngIf="plugin.hb2Ready === 'unknown'">
+            <i
+              class="fas fa-question-circle yellow-text fa-xl ms-2"
+              aria-label="The developer has not specifically marked this plugin as compatible with Homebridge v2.0, but it may still work."
+            ></i>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="modal-footer justify-content-between">
+    <div class="text-start">
+      <button
+        type="button"
+        class="btn btn-elegant"
+        data-bs-dismiss="modal"
+        (click)="$activeModal.close('Dismiss')"
+        [attr.aria-label]="'form.button_close' | translate"
+      >
+        {{ 'form.button_close' | translate }}
+      </button>
+    </div>
+    <div class="text-center"></div>
+    <div class="text-end">
+      <button
+        [disabled]="loading"
+        type="button"
+        class="btn btn-primary"
+        data-bs-dismiss="modal"
+        (click)="$activeModal.close('update')"
+      >
+        {{ 'plugins.node_update.continue' | translate }}
+      </button>
+    </div>
+  </div>
+</div>

ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts

@@ -0,0 +1,56 @@
+import { ApiService } from '@/app/core/api.service'
+import { SettingsService } from '@/app/core/settings.service'
+import { Component, OnInit } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslateService } from '@ngx-translate/core'
+import { ToastrService } from 'ngx-toastr'
+import { firstValueFrom } from 'rxjs'
+
+@Component({
+  templateUrl: './hb-update-confirm.component.html',
+})
+export class HbUpdateConfirmComponent implements OnInit {
+  public loading = true
+  public installedPlugins: any = []
+  public allPluginsSupported = true
+
+  constructor(
+    public $activeModal: NgbActiveModal,
+    private $api: ApiService,
+    public $settings: SettingsService,
+    private $toastr: ToastrService,
+    private $translate: TranslateService,
+  ) {}
+
+  ngOnInit() {
+    this.loadInstalledPlugins()
+  }
+
+  async loadInstalledPlugins() {
+    this.installedPlugins = []
+    this.loading = true
+    const homebridgeVersion = this.$settings.env.homebridgeVersion.split('.')[0]
+
+    try {
+      const installedPlugins = await firstValueFrom(this.$api.get('/plugins'))
+      this.installedPlugins = installedPlugins
+        .filter((x: any) => x.name !== 'homebridge-config-ui-x')
+        .map((x: any) => {
+          const hbEngines = x.engines?.homebridge?.split('||').map((x: string) => x.trim()) || []
+          const hb2Ready = homebridgeVersion === '2' ? 'hide' : hbEngines.some((x: string) => (x.startsWith('^2') || x.startsWith('>=2'))) ? 'supported' : 'unknown'
+          if (hb2Ready === 'unknown') {
+            this.allPluginsSupported = false
+          }
+          return {
+            ...x,
+            hb2Ready,
+          }
+        })
+
+      this.loading = false
+    } catch (error) {
+      console.error(error)
+      this.$toastr.error(this.$translate.instant('plugins.toast_failed_to_load_plugins'), this.$translate.instant('toast.title_error'))
+    }
+  }
+}

ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.ts

@@ -1,5 +1,6 @@
 import { ApiService } from '@/app/core/api.service'
 import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
+import { HbUpdateConfirmComponent } from '@/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component'
 import { PluginLogsComponent } from '@/app/core/manage-plugins/plugin-logs/plugin-logs.component'
 import { SettingsService } from '@/app/core/settings.service'
 import { IoNamespace, WsService } from '@/app/core/ws.service'
@@ -199,25 +200,47 @@ export class ManagePluginComponent implements OnInit, OnDestroy {
     })
   }
 
-  upgradeHomebridge() {
-    this.io.request('homebridge-update', {
-      version: this.targetVersion,
-      termCols: this.term.cols,
-      termRows: this.term.rows,
-    }).subscribe({
-      next: () => {
-        this.$activeModal.close()
-        this.$modal.open(RestartHomebridgeComponent, {
-          size: 'lg',
-          backdrop: 'static',
-        })
-      },
-      error: (error) => {
-        this.actionFailed = true
-        console.error(error)
-        this.$toastr.error(error.message, this.$translate.instant('toast.title_error'))
-      },
-    })
+  async upgradeHomebridge() {
+    let res = 'update'
+
+    // Only want to show this modal updating from existing version <2 to 2
+    // This is just some temporary not-so-great logic to determine if the user is updating from <2 to 2
+    if (
+      Number(this.installedVersion.split('.')[0]) < 2
+      && ['2', 'alpha', 'beta'].includes(this.targetVersion.split('.')[0])
+    ) {
+      const ref = this.$modal.open(HbUpdateConfirmComponent, {
+        size: 'lg',
+        backdrop: 'static',
+      })
+      res = await ref.result
+    }
+
+    if (res === 'update') {
+      // Continue selected, so update homebridge
+      this.io.request('homebridge-update', {
+        version: this.targetVersion,
+        termCols: this.term.cols,
+        termRows: this.term.rows,
+      }).subscribe({
+        next: () => {
+          this.$activeModal.close()
+          this.$modal.open(RestartHomebridgeComponent, {
+            size: 'lg',
+            backdrop: 'static',
+          })
+        },
+        error: (error) => {
+          this.actionFailed = true
+          console.error(error)
+          this.$toastr.error(error.message, this.$translate.instant('toast.title_error'))
+          this.$activeModal.close()
+        },
+      })
+    } else {
+      // Modal dismissed, also close the update modal
+      this.$activeModal.close()
+    }
   }
 
   async getChangeLog(): Promise<void> {

ui/src/app/core/manage-plugins/manage-plugins.module.ts

@@ -2,6 +2,7 @@ import { CoreModule } from '@/app/core/core.module'
 import { CustomPluginsModule } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.module'
 import { DisablePluginComponent } from '@/app/core/manage-plugins/disable-plugin/disable-plugin.component'
 import { DonateComponent } from '@/app/core/manage-plugins/donate/donate.component'
+import { HbUpdateConfirmComponent } from '@/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component'
 import { InterpolateMdPipe } from '@/app/core/manage-plugins/interpolate-md.pipe'
 import { ManagePluginComponent } from '@/app/core/manage-plugins/manage-plugin/manage-plugin.component'
 import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
@@ -35,6 +36,7 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
     DonateComponent,
     ResetAccessoriesComponent,
     DisablePluginComponent,
+    HbUpdateConfirmComponent,
   ],
   imports: [
     CommonModule,

ui/src/app/modules/plugins/plugin-card/plugin-card.component.html

@@ -20,7 +20,7 @@
         ></i>
         <i
           *ngIf="hb2Status === 'unknown'"
-          class="fas fa-question-circle orange-text fa-xl"
+          class="fas fa-question-circle yellow-text fa-xl"
           aria-label="The developer has not specifically marked this plugin as compatible with Homebridge v2.0, but it may still work."
         ></i>
       </a>
@@ -112,7 +112,7 @@ <h5 class="card-title mb-2 text-truncate">{{ prettyDisplayName }}</h5>
                 class="fas fa-fw fa-lg ms-3"
                 *ngIf="plugin.installedVersion && !plugin.updateAvailable && plugin.isConfigured && plugin.hasChildBridges && !childBridgeRestartInProgress && !hasUnpairedChildBridges && childBridgeStatus !== 'ok' && !plugin.disabled"
                 [ngClass]="{
-                  'fa-bridge-circle-exclamation orange-text': childBridgeStatus === 'pending',
+                  'fa-bridge-circle-exclamation yellow-text': childBridgeStatus === 'pending',
                   'fa-bridge-circle-xmark red-text': childBridgeStatus === 'down'
                 }"
               ></i>

ui/src/app/modules/plugins/plugin-card/plugin-card.component.ts

@@ -242,7 +242,7 @@ export class PluginCardComponent implements OnInit {
     } else {
       ref.componentInstance.subtitle = `${this.plugin.displayName || this.plugin.name} might not be ready for Homebridge v2.0`
       ref.componentInstance.message = 'The developer has not specifically marked your installed version of the plugin as compatible with Homebridge v2.0, but it may still work.'
-      ref.componentInstance.faIconClass = 'fa-question-circle orange-text'
+      ref.componentInstance.faIconClass = 'fa-question-circle yellow-text'
     }
     ref.componentInstance.ctaButtonLabel = this.$translate.instant('form.button_more_info')
     ref.componentInstance.ctaButtonLink = 'https://github.com/homebridge/homebridge/wiki/Updating-To-Homebridge-v2.0'

ui/src/scss/base/layout.scss

@@ -29,17 +29,17 @@ a:focus {
 
 .green-text,
 .green-text a {
-  color: #00c128 !important;
+  color: #4caf50 !important;
 }
 
 .red-text,
 .red-text a {
-  color: #ff0000 !important;
+  color: #f44336 !important;
 }
 
 .yellow-text,
 .yellow-text a {
-  color: #ffa000 !important;
+  color: #ff9800 !important;
 }
 
 .cyan-text,