From 3dcb973adb51bd1ffd9ff5c92553340416a581d3 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:34:20 -0800
Subject: [PATCH] Enhancement: Explain behavior of unset app config boolean to
 user (#5345)

---
 src-ui/messages.xlf                           |  9 +++++++-
 .../admin/config/config.component.html        |  2 +-
 .../common/input/switch/switch.component.html | 23 +++++++++++++++++--
 .../input/switch/switch.component.spec.ts     |  8 ++++++-
 .../common/input/switch/switch.component.ts   |  9 +++++++-
 5 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index 4b5c56150..9581095ad 100644
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -3706,7 +3706,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/input/switch/switch.component.html</context>
-          <context context-type="linenumber">10</context>
+          <context context-type="linenumber">17</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/common/input/text/text.component.html</context>
@@ -3827,6 +3827,13 @@
           <context context-type="linenumber">92</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="6541407358060244620" datatype="html">
+        <source>Note: value has not yet been set and will not apply until explicitly changed</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/components/common/input/switch/switch.component.html</context>
+          <context context-type="linenumber">45</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="6560126119609945418" datatype="html">
         <source>Add tag</source>
         <context-group purpose="location">
diff --git a/src-ui/src/app/components/admin/config/config.component.html b/src-ui/src/app/components/admin/config/config.component.html
index 493ee4737..6f5fc4bac 100644
--- a/src-ui/src/app/components/admin/config/config.component.html
+++ b/src-ui/src/app/components/admin/config/config.component.html
@@ -27,7 +27,7 @@
                                                 @switch (option.type) {
                                                     @case (ConfigOptionType.Select) { <pngx-input-select [formControlName]="option.key" [error]="errors[option.key]" [items]="option.choices" [allowNull]="true"></pngx-input-select> }
                                                     @case (ConfigOptionType.Number) { <pngx-input-number [formControlName]="option.key" [error]="errors[option.key]" [showAdd]="false"></pngx-input-number> }
-                                                    @case (ConfigOptionType.Boolean) { <pngx-input-switch [formControlName]="option.key" [error]="errors[option.key]" [horizontal]="true" title="Enable" i18n-title></pngx-input-switch> }
+                                                    @case (ConfigOptionType.Boolean) { <pngx-input-switch [formControlName]="option.key" [error]="errors[option.key]" [showUnsetNote]="true" [horizontal]="true" title="Enable" i18n-title></pngx-input-switch> }
                                                     @case (ConfigOptionType.String) { <pngx-input-text [formControlName]="option.key" [error]="errors[option.key]"></pngx-input-text> }
                                                     @case (ConfigOptionType.JSON) { <pngx-input-text [formControlName]="option.key" [error]="errors[option.key]"></pngx-input-text> }
                                                 }
diff --git a/src-ui/src/app/components/common/input/switch/switch.component.html b/src-ui/src/app/components/common/input/switch/switch.component.html
index 189aa937f..e0b63c5f7 100644
--- a/src-ui/src/app/components/common/input/switch/switch.component.html
+++ b/src-ui/src/app/components/common/input/switch/switch.component.html
@@ -2,7 +2,14 @@
   <div class="row">
     @if (!horizontal) {
       <div class="d-flex align-items-center position-relative hidden-button-container col-md-3">
-        <label class="form-label" [for]="inputId">{{title}}</label>
+        <label class="form-label" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
+          {{title}}
+          @if (showUnsetNote && isUnset) {
+            <svg class="sidebaricon-sm ms-1" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#exclamation-triangle"/>
+              </svg>
+          }
+        </label>
         @if (removable) {
           <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
             <svg class="sidebaricon" fill="currentColor">
@@ -16,7 +23,14 @@
       <div class="form-check form-switch">
         <input #inputField type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
         @if (horizontal) {
-          <label class="form-check-label" [for]="inputId">{{title}}</label>
+          <label class="form-check-label" [class.text-muted]="showUnsetNote && isUnset" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
+            {{title}}
+            @if (showUnsetNote && isUnset) {
+              <svg class="sidebaricon-sm ms-1" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#exclamation-triangle"/>
+              </svg>
+            }
+          </label>
         }
         @if (hint) {
           <div class="form-text text-muted">{{hint}}</div>
@@ -25,3 +39,8 @@
     </div>
   </div>
 </div>
+
+
+<ng-template #tipContent>
+  <span class="text-light fst-italic" i18n>Note: value has not yet been set and will not apply until explicitly changed</span>
+</ng-template>
diff --git a/src-ui/src/app/components/common/input/switch/switch.component.spec.ts b/src-ui/src/app/components/common/input/switch/switch.component.spec.ts
index 08a4598a3..372bfd8ab 100644
--- a/src-ui/src/app/components/common/input/switch/switch.component.spec.ts
+++ b/src-ui/src/app/components/common/input/switch/switch.component.spec.ts
@@ -5,6 +5,7 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 
 describe('SwitchComponent', () => {
   let component: SwitchComponent
@@ -15,7 +16,7 @@ describe('SwitchComponent', () => {
     TestBed.configureTestingModule({
       declarations: [SwitchComponent],
       providers: [],
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [FormsModule, ReactiveFormsModule, NgbTooltipModule],
     }).compileComponents()
 
     fixture = TestBed.createComponent(SwitchComponent)
@@ -36,4 +37,9 @@ describe('SwitchComponent', () => {
     fixture.detectChanges()
     expect(component.value).toBeFalsy()
   })
+
+  it('should show note if unset', () => {
+    component.value = null
+    expect(component.isUnset).toBeTruthy()
+  })
 })
diff --git a/src-ui/src/app/components/common/input/switch/switch.component.ts b/src-ui/src/app/components/common/input/switch/switch.component.ts
index 44e095baa..312c98936 100644
--- a/src-ui/src/app/components/common/input/switch/switch.component.ts
+++ b/src-ui/src/app/components/common/input/switch/switch.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef } from '@angular/core'
+import { Component, Input, forwardRef } from '@angular/core'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
 import { AbstractInputComponent } from '../abstract-input'
 
@@ -15,7 +15,14 @@ import { AbstractInputComponent } from '../abstract-input'
   styleUrls: ['./switch.component.scss'],
 })
 export class SwitchComponent extends AbstractInputComponent<boolean> {
+  @Input()
+  showUnsetNote: boolean = false
+
   constructor() {
     super()
   }
+
+  get isUnset(): boolean {
+    return this.value === null || this.value === undefined
+  }
 }