Enhancement: Explain behavior of unset app config boolean to user (#5345)

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>

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()
+  })
 })

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
+  }
 }