From 32c3a877574f82acbe14c9a82dc2a33ed746ffa7 Mon Sep 17 00:00:00 2001
From: Ben <43026681+bwp91@users.noreply.github.com>
Date: Wed, 15 Nov 2023 19:17:34 +0000
Subject: [PATCH] improvements to bridge settings flow

---
 .../bridge-plugins-modal.component.html       | 14 +++++-----
 .../bridge-plugins-modal.component.ts         | 14 ++++++++++
 .../custom-plugins.component.html             | 27 ++++++++++++-------
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/ui/src/app/core/manage-plugins/bridge-plugins-modal/bridge-plugins-modal.component.html b/ui/src/app/core/manage-plugins/bridge-plugins-modal/bridge-plugins-modal.component.html
index 022c0f4a8..f86c756a2 100644
--- a/ui/src/app/core/manage-plugins/bridge-plugins-modal/bridge-plugins-modal.component.html
+++ b/ui/src/app/core/manage-plugins/bridge-plugins-modal/bridge-plugins-modal.component.html
@@ -109,8 +109,7 @@ <h5 class="primary-text">
   </div>
   <div class="modal-footer justify-content-between">
     <div class="text-left">
-      <button type="button" class="btn btn-elegant" data-dismiss="modal" (click)="activeModal.close('Dismiss')"
-        *ngIf="configBlocks.length">
+      <button type="button" class="btn btn-elegant" data-dismiss="modal" (click)="activeModal.close('Dismiss')">
         {{ 'form.button_close' | translate }}
       </button>
     </div>
@@ -122,16 +121,15 @@ <h5 class="primary-text">
         <i [ngClass]="plugin.links.homepage | externalLinkIcon"></i>
       </a>
     </div>
-    <div class="text-center" *ngIf="!configBlocks.length">
-      <button type="button" class="btn btn-elegant" data-dismiss="modal" (click)="activeModal.close('Dismiss')">
-        {{ 'form.button_close' | translate }}
-      </button>
-    </div>
+    <div class="text-center" *ngIf="!configBlocks.length"></div>
     <div class="text-right">
       <button type="button" class="btn btn-primary" (click)="save()" [disabled]="saveInProgress"
         *ngIf="configBlocks.length">
         {{ 'form.button_save' | translate }} <i *ngIf="saveInProgress" class="fas fa-fw fa-spinner fa-pulse"></i>
       </button>
+      <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="openPluginConfig()" *ngIf="!configBlocks.length">
+        {{ 'plugins.button_settings' | translate }}
+      </button>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/core/manage-plugins/bridge-plugins-modal/bridge-plugins-modal.component.ts b/ui/src/app/core/manage-plugins/bridge-plugins-modal/bridge-plugins-modal.component.ts
index e781c4b82..67d44a30e 100644
--- a/ui/src/app/core/manage-plugins/bridge-plugins-modal/bridge-plugins-modal.component.ts
+++ b/ui/src/app/core/manage-plugins/bridge-plugins-modal/bridge-plugins-modal.component.ts
@@ -3,6 +3,7 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
 import { ToastrService } from 'ngx-toastr';
 import { ApiService } from '@/app/core/api.service';
+import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service';
 import { NotificationService } from '@/app/core/notification.service';
 import { SettingsService } from '@/app/core/settings.service';
 
@@ -29,6 +30,7 @@ export class BridgePluginsModalComponent implements OnInit {
     public $settings: SettingsService,
     private $notification: NotificationService,
     private $api: ApiService,
+    private $plugins: ManagePluginsService,
     private $toastr: ToastrService,
     private $translate: TranslateService,
   ) { }
@@ -107,6 +109,18 @@ export class BridgePluginsModalComponent implements OnInit {
     }
   }
 
+  openPluginConfig() {
+    // Close the existing modal
+    this.activeModal.close();
+
+    // Open the plugin config modal
+    this.$plugins.settings({
+      name: this.plugin.name,
+      settingsSchema: true,
+      links: {},
+    });
+  }
+
   async restartChildBridge(username: string) {
     this.restartInProgress[username] = true;
     try {
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
index 3e266f356..f1dbfc2f0 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
@@ -19,15 +19,6 @@ <h5 class="modal-title">
        [translate]="'plugins.manage.message_thanks_for_updating_restart_child_bridges'">
       Please restart the plugin's child bridges for the changes to apply.
     </p>
-    <div class="text-center">
-      <button type="button" class="btn btn-primary" *ngIf="!['homebridge', 'homebridge-config-ui-x'].includes(plugin.name) && childBridges.length > 0"
-        (click)="onRestartChildBridgeClick()">
-        {{ (childBridges.length === 1 ? 'plugins.manage.child_bridge_button_restart_now_one' : 'plugins.manage.child_bridge_button_restart_now') | translate }}
-      </button>
-      <button type="button" class="btn btn-primary"
-        *ngIf="['homebridge', 'homebridge-config-ui-x'].includes(plugin.name) || childBridges.length === 0" (click)="onRestartHomebridgeClick()"
-        [translate]="'plugins.manage.button_restart_now'">Restart Homebridge</button>
-    </div>
   </div>
 
   <div class="modal-body" style="min-height: 110px;" [hidden]="justSavedAndExited">
@@ -92,5 +83,21 @@ <h5 class="modal-title">
       </button>
     </div>
   </div>
-  <div class="modal-footer"  [hidden]="!justSavedAndExited"></div>
+  <div class="modal-footer justify-content-between" [hidden]="!justSavedAndExited">
+    <div class="text-left">
+      <button type="button" class="btn btn-elegant" data-dismiss="modal" (click)="activeModal.close('Dismiss')">
+        {{ 'form.button_close' | translate }}
+      </button>
+    </div>
+    <div class="text-center"></div>
+    <div class="text-right">
+      <button type="button" class="btn btn-primary" *ngIf="!['homebridge', 'homebridge-config-ui-x'].includes(plugin.name) && childBridges.length > 0"
+              (click)="onRestartChildBridgeClick()">
+        {{ (childBridges.length === 1 ? 'plugins.manage.child_bridge_button_restart_now_one' : 'plugins.manage.child_bridge_button_restart_now') | translate }}
+      </button>
+      <button type="button" class="btn btn-primary"
+              *ngIf="['homebridge', 'homebridge-config-ui-x'].includes(plugin.name) || childBridges.length === 0" (click)="onRestartHomebridgeClick()"
+              [translate]="'plugins.manage.button_restart_now'">Restart Homebridge</button>
+    </div>
+  </div>
 </div>