#910 - show diff when rolling back config.json

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file. This projec
   * Users can customise the directory that backups are saved to by setting the [`scheduledBackupPath`](https://github.com/oznu/homebridge-config-ui-x/wiki/Config-Options#scheduledbackuppath) option - this allows you to have the automated backups archives saved to a network share or backup drive
   * Added [REST API endpoints](https://github.com/oznu/homebridge-config-ui-x/wiki/API-Reference) for getting the list of automated backups, and downloading an existing backup archive
   * See the [Homebridge Backup and Restore](https://github.com/homebridge/homebridge/wiki/Backup-and-Restore) wiki article for further information about instance backups
+* **Config Editor:** When loading a previous version of the config, a diff will be shown to highlight the changes from the current config and the one that will be restored ([#910](https://github.com/oznu/homebridge-config-ui-x/issues/910))
 * **hb-service:** Added full support for Enterprise / Red Hat / CentOS / Fedora Linux distributions
 
 ## 4.30.0 (2020-10-21)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebridge-config-ui-x",
   "displayName": "Homebridge Config UI X",
-  "version": "4.31.0-test.10",
+  "version": "4.31.0-test.11",
   "description": "A web based management, configuration and control platform for Homebridge",
   "license": "MIT",
   "author": "oznu <dev@oz.nu>",

src/modules/config-editor/config-editor.service.ts

@@ -96,8 +96,7 @@ export class ConfigEditorService {
     this.logger.log('Changes to config.json saved.');
 
     // parse the config for ui settings
-    const configCopy = {};
-    Object.assign(configCopy, config);
+    const configCopy = JSON.parse(JSON.stringify(config));
     this.configService.parseConfig(configCopy);
 
     return config;

ui/src/app/core/backup-restore/scheduled-backups/scheduled-backups.component.html

@@ -24,7 +24,7 @@ <h5 class="modal-title" translate="backup.title_scheduled_backups"></h5>
           </a>
         </span>
         <span>
-          {{ backup.timestamp | date:'short' }}
+          {{ backup.timestamp | date:'medium' }}
         </span>
       </li>
     </ul>

ui/src/app/modules/config-editor/config-editor.component.html

@@ -10,17 +10,25 @@ <h3 class="primary-text m-0">
         [translate]="'config.button_restore'">Restore</button>
       <button class="btn btn-elegant waves-effect" (click)="onExportConfig()"
         [translate]="'config.button_backup'">Backup</button>
+      <button class="btn btn-danger waves-effect" (click)="onCancelRestore()" [disabled]="saveInProgress"
+        *ngIf="originalConfig" translate="form.button_cancel">Cancel</button>
       <button class="btn btn-primary waves-effect" (click)="onSave()" [disabled]="saveInProgress">
         {{ 'form.button_save' | translate }} <i *ngIf="saveInProgress" class="fas fa-spinner fa-pulse"></i>
       </button>
     </div>
   </div>
 
-  <ngx-monaco-editor *ngIf="!isMobile" class="flex-grow-1 h-100 w-100 mb-3 mt-3" [options]="editorOptions"
-    [model]="monacoEditorModel" (onInit)="onEditorInit($event)" (keydown.control.s)="$event.preventDefault(); onSave()"
-    (keydown.meta.s)="$event.preventDefault(); onSave()">
+  <ngx-monaco-editor *ngIf="!isMobile && !originalConfig" class="flex-grow-1 h-100 w-100 mb-3 mt-3"
+    [options]="editorOptions" [model]="monacoEditorModel" (onInit)="onEditorInit($event)"
+    (keydown.control.s)="$event.preventDefault(); onSave()" (keydown.meta.s)="$event.preventDefault(); onSave()">
   </ngx-monaco-editor>
 
+  <ngx-monaco-diff-editor *ngIf="!isMobile && originalConfig" class="flex-grow-1 h-100 w-100 mb-3 mt-3"
+    [options]="editorOptions" [originalModel]="monacoEditorModel" [modifiedModel]="monacoEditorModel"
+    (onInit)="onInitDiffEditor($event)" (keydown.control.s)="$event.preventDefault(); onSave()"
+    (keydown.meta.s)="$event.preventDefault(); onSave()">
+  </ngx-monaco-diff-editor>
+
   <textarea wrap="off" *ngIf="isMobile" class="hb-plain-text-editor align-self-end h-100 w-100 mb-3 mt-3"
     autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" [(ngModel)]="homebridgeConfig">
   </textarea>

ui/src/app/modules/config-editor/config-editor.component.ts

@@ -19,6 +19,7 @@ import { ConfigRestoreBackupComponent } from './config-restore-backup/config.res
 })
 export class ConfigEditorComponent implements OnInit, OnDestroy {
   public homebridgeConfig: string;
+  public originalConfig: string;
   public saveInProgress: boolean;
   public isMobile: any = false;
   public backupUrl: string;
@@ -93,6 +94,15 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
     window['editor'] = editor;
   }
 
+  onInitDiffEditor(editor) {
+    this.monacoEditor = editor.modifiedEditor;
+
+    editor.getModel().original.setValue(this.originalConfig);
+    editor.getModel().modified.setValue(this.homebridgeConfig);
+
+    window['editor'] = editor;
+  }
+
   async onSave() {
     if (this.saveInProgress) {
       return;
@@ -165,6 +175,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
         // handled in validator function
       } else {
         await this.saveConfig(config);
+        this.originalConfig = '';
       }
     } catch (e) {
       this.$toastr.error(
@@ -207,6 +218,10 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
     })
       .result
       .then((backupId) => {
+        if (!this.originalConfig) {
+          this.originalConfig = this.homebridgeConfig;
+        }
+
         this.$api.get(`/config-editor/backups/${backupId}`).subscribe(
           json => {
             this.$toastr.warning(
@@ -217,7 +232,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
             this.homebridgeConfig = JSON.stringify(json, null, 4);
 
             // update the editor
-            if (this.monacoEditor) {
+            if (this.monacoEditor && window['editor'].modifiedEditor) {
               // remove all decorations
               this.editorDecoractions = this.monacoEditor.deltaDecorations(this.editorDecoractions, []);
 
@@ -258,6 +273,11 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
     downloadAnchorNode.remove();
   }
 
+  onCancelRestore() {
+    this.homebridgeConfig = this.originalConfig;
+    this.originalConfig = '';
+  }
+
   validateSection(sections: any[], type: 'accessory' | 'platform') {
     for (const section of sections) {
       // check section is an object

ui/src/app/modules/config-editor/config-restore-backup/config.restore-backup.component.html

@@ -1,17 +1,21 @@
 <div class="modal-content">
   <div class="modal-header">
-    <h5 class="modal-title" [translate]="'config.restore.title_restore_homebridge_backup'">Restore Homebridge Config Backup</h5>
-    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
+    <h5 class="modal-title" [translate]="'config.restore.title_restore_homebridge_backup'">
+      Restore Homebridge Config Backup
+    </h5>
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
+      (click)="activeModal.dismiss('Cross click')">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
   <div class="modal-body">
-    <table class="table table-borderless table-hover" *ngIf="backupList && backupList.length">
+    <table class="table table-borderless table-hover table-sm" *ngIf="backupList && backupList.length">
       <tbody>
         <tr *ngFor="let backup of backupList">
-          <td class="w-100">{{ backup.timestamp | date:'full' }}</td>
+          <td class="w-100">{{ backup.timestamp | date:'medium' }}</td>
           <td nowrap>
-            <a class="card-link" (click)="restore(backup.id)">{{'config.restore.message_copy_to_editor' | translate}} <i class="fas fa-arrow-right"></i></a>
+            <a class="card-link" (click)="restore(backup.id)">{{'config.restore.message_copy_to_editor' | translate}} <i
+                class="fas fa-arrow-right"></i></a>
           </td>
         </tr>
       </tbody>
@@ -21,7 +25,9 @@ <h3 class="text-center" [translate]="'config.restore.message_no_backups'">No Bac
     </div>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-elegant mr-auto" (click)="deleteAllBackups()" [translate]="'config.restore.button_remote_all_backups'">Remove All Backups</button>
-    <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="activeModal.dismiss('Cross click')" [translate]="'form.button_cancel'">Cancel</button>
+    <button type="button" class="btn btn-elegant mr-auto" (click)="deleteAllBackups()"
+      [translate]="'config.restore.button_remote_all_backups'">Remove All Backups</button>
+    <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="activeModal.dismiss('Cross click')"
+      [translate]="'form.button_cancel'">Cancel</button>
   </div>
 </div>