add plugin config validation functionality

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to `homebridge-config-ui-x` will be documented in this file.
 
 - implement and allow switching to scoped plugins
 - fix widget config saving on dashboard
+- add plugin config validation functionality
 
 ### Other Changes
 

package.json

@@ -85,14 +85,14 @@
     "@homebridge/hap-client": "1.10.2",
     "@homebridge/node-pty-prebuilt-multiarch": "0.11.14",
     "@nestjs/axios": "3.1.0",
-    "@nestjs/common": "10.4.5",
-    "@nestjs/core": "10.4.5",
+    "@nestjs/common": "10.4.6",
+    "@nestjs/core": "10.4.6",
     "@nestjs/jwt": "10.2.0",
     "@nestjs/passport": "10.0.3",
-    "@nestjs/platform-fastify": "10.4.5",
-    "@nestjs/platform-socket.io": "10.4.5",
+    "@nestjs/platform-fastify": "10.4.6",
+    "@nestjs/platform-socket.io": "10.4.6",
     "@nestjs/swagger": "7.4.2",
-    "@nestjs/websockets": "10.4.5",
+    "@nestjs/websockets": "10.4.6",
     "axios": "1.7.7",
     "bash-color": "0.0.4",
     "buffer-shims": "1.0.0",
@@ -122,7 +122,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.8.0",
-    "@nestjs/testing": "^10.4.5",
+    "@nestjs/testing": "^10.4.6",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.12",
     "@types/node": "^22.7.9",

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

@@ -33,6 +33,7 @@ <h5 class="modal-title">
         [configSchema]="schema"
         [(data)]="pluginConfig[0]"
         (dataChanged)="schemaFormUpdatedSubject.next($event)"
+        (isValid)="onIsValid($event)"
       >
       </app-schema-form>
     </div>
@@ -79,25 +80,23 @@ <h5 class="modal-title">
       </button>
     </div>
     <div class="text-center"></div>
-    <div class="text-right">
-      <button
-        *ngIf="plugin.name !== 'homebridge-config-ui-x'"
-        class="btn btn-danger"
-        [ngbTooltip]="'form.button_delete' | translate"
+    <div class="text-right d-flex align-items-center justify-content-end">
+      <i
+        *ngIf="showSchemaForm"
+        class="fa fa-fw fa-xl"
+        [ngClass]="formIsValid ? 'fa-circle-check green-text' : (strictValidation ? 'fa-circle-exclamation red-text' : 'fa-circle-exclamation orange-text')"
+        [ngbTooltip]="(formIsValid ? 'form.label_valid' : (strictValidation ? 'form.label_invalid_strict' : 'form.label_invalid')) | translate"
         container="modal"
+        placement="top"
         openDelay="150"
         triggers="hover"
-        [disabled]="saveInProgress"
-        (click)="deletePluginConfig()"
-      >
-        <i class="fa fa-fw fa-trash"></i>
-      </button>
+      ></i>
       <button
         type="button"
         class="btn btn-primary"
         data-dismiss="modal"
         (click)="savePluginConfig(true)"
-        [disabled]="saveInProgress"
+        [disabled]="saveInProgress || !showSchemaForm || (showSchemaForm && strictValidation && !formIsValid)"
       >
         <span *ngIf="!saveInProgress">{{ 'form.button_save' | translate }}</span>
         <i *ngIf="saveInProgress" class="fas fa-fw fa-spinner fa-pulse"></i>

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

@@ -40,6 +40,8 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
   public formActionSubject = new Subject()
   public childBridges: any[] = []
   public isFirstSave = false
+  public formIsValid = true
+  public strictValidation = false
 
   private io: IoNamespace
   private basePath: string
@@ -63,6 +65,7 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
     this.io = this.$ws.connectToNamespace('plugins/settings-ui')
     this.pluginAlias = this.schema.pluginAlias
     this.pluginType = this.schema.pluginType
+    this.strictValidation = this.schema.strictValidation
 
     if (this.pluginConfig.length === 0) {
       this.isFirstSave = true
@@ -481,9 +484,8 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
     }
   }
 
-  deletePluginConfig() {
-    this.updateConfigBlocks([])
-    this.savePluginConfig(true)
+  onIsValid($event: boolean) {
+    this.formIsValid = $event
   }
 
   ngOnDestroy() {

ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html

@@ -58,7 +58,7 @@ <h4 class="mt-2">
     </div>
 
     <div class="mt-3" *ngIf="gshConfig && gshConfig.token">
-      <markdown class="plugin-md" [data]="schema.footerDisplay" *ngIf="schema.footerDisplay"> </markdown>
+      <markdown class="plugin-md" [data]="schema.footerDisplay" *ngIf="schema.footerDisplay"></markdown>
     </div>
 
     <div *ngIf="gshConfig && gshConfig.token" class="card p-2 pt-3 mt-4">