next-gen-gui: Add button to restore default theme (#7433)

This adds a button in the top right that changes the config back to the
default theme.

Code wise, it takes the header that was previously a part of the
dashboard component and moves it to the app component, and then adds the
button there. Possibly the header should be a component of it's own, but
that's more of refactor that can happen separately I think.

The config change uses the new config API to just patch the relevant
setting.

I'm not doing an automatic reload because 1) I don't want to figure out
how to do it correctly and 2) this doesn't work reliably anyway, as
for example the current gen GUI does a reload and ends up with
connection refused as the API service is still reloading...

next-gen-gui/src/app/app.component.html

@@ -1 +1,9 @@
-<app-dashboard></app-dashboard>
+<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
+    <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="start center">
+        <img src="assets/logo-horizontal.svg" width="150px" />
+        <span>Tech UI</span>
+    </div>
+    <button mat-stroked-button (click)="restoreDefaultTheme()">Restore default theme</button>
+</div>
+
+<app-dashboard></app-dashboard>

next-gen-gui/src/app/app.component.scss

@@ -1,4 +1,8 @@
-/* Structure */
+.header {
+    margin: 15px 3vw 12px 3vw;
+    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+}
+
 table {
     width: 100%;
 }

next-gen-gui/src/app/app.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { SystemConfigService } from './services/system-config.service';
+import { MessageService } from './services/message.service';
 
 @Component({
   selector: 'app-root',
@@ -6,5 +8,16 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  constructor() { }
+  constructor(
+    private systemConfigService: SystemConfigService,
+    private messageService: MessageService,
+  ) { }
+
+  restoreDefaultTheme(): void {
+    this.systemConfigService
+      .setGUITheme('default')
+      .subscribe(() => {
+        this.messageService.add('The default GUI theme has been selected. Please hit "Reload" in your browser.')
+      })
+  }
 }

next-gen-gui/src/app/dashboard/dashboard.component.html

@@ -1,12 +1,7 @@
 <!--<div class="grid-container" gdAreas="header header | folders devices | status-list status-list | footer footer"
   gdGap="16px" gdRows="auto auto auto"> -->
 <!--<div class="grid-container" fxLayout="row" fxLayoutGap="16px grid" fxLayoutAlign="stretch">-->
-<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
-  <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="start center">
-    <img src="assets/logo-horizontal.svg" width="150px" />
-    <span>Tech UI</span>
-  </div>
-</div>
+
 <div class="progress">
   <mat-progress-bar mode="determinate" value="{{progressValue}}" [@progressBar]="isLoading ? 'start' : 'done'">
   </mat-progress-bar>

next-gen-gui/src/app/dashboard/dashboard.component.scss

@@ -1,8 +1,3 @@
-.header {
-  margin: 15px 3vw 12px 3vw;
-  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-}
-
 .progress {
   margin: 0 3vw 0 3vw;
 }

next-gen-gui/src/app/services/system-config.service.ts

@@ -20,6 +20,7 @@ export class SystemConfigService {
   private devicesSubject: ReplaySubject<Device[]> = new ReplaySubject(1);
 
   private systemConfigUrl = environment.production ? apiURL + 'rest/system/config' : 'api/config';
+  private guiConfigUrl = environment.production ? apiURL + 'rest/config/gui' : 'api/config/gui';
 
   constructor(
     private http: HttpClient,
@@ -52,4 +53,8 @@ export class SystemConfigService {
   getDevices(): Observable<Device[]> {
     return this.devicesSubject.asObservable();
   }
+
+  setGUITheme(theme: String): Observable<any> {
+    return this.http.patch(this.guiConfigUrl, { theme: theme })
+  }
 }