refactoring

ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.html

@@ -23,17 +23,10 @@
         [disabled]="disabled"
         (click)="openDebugStrategyPanel($event, matButton)">
   <mat-icon [color]="debugSettingsFormGroup.disabled ? 'inherit' : 'primary'">bug_report</mat-icon>
-  @if (failuresEnabled) {
+  <span *ngIf="!failuresEnabled && !(isDebugAllActive$ | async)" translate>common.disabled</span>
-    @if (isDebugAllActive$ | async) {
+  <span *ngIf="(isDebugAllActive$ | async) && failuresEnabled" translate>debug-config.all</span>
-      {{ 'debug-config.all' | translate }}
+  <span *ngIf="(isDebugAllActive$ | async) && !failuresEnabled">
-    } @else {
+    {{ !allEnabled ? (allEnabledUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) }}
-      {{ 'debug-config.failures' | translate }}
+  </span>
-    }
+  <span *ngIf="!(isDebugAllActive$ | async) && failuresEnabled" translate>debug-config.failures</span>
-  } @else {
-    @if (isDebugAllActive$ | async) {
-      {{ !allEnabled ? (allEnabledUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) }}
-    } @else {
-      {{ 'common.disabled' | translate }}
-    }
-  }
 </button>

ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-button.component.ts

@@ -41,7 +41,6 @@ import {
   ControlValueAccessor,
   FormBuilder,
   NG_VALUE_ACCESSOR,
-  UntypedFormGroup,
 } from '@angular/forms';
 
 @Component({
@@ -66,13 +65,18 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
 
   @Input() debugLimitsConfiguration: string;
 
-  debugSettingsFormGroup: UntypedFormGroup;
+  debugSettingsFormGroup = this.fb.group({
+    failuresEnabled: [false],
+    allEnabled: [false],
+    allEnabledUntil: []
+  });
+
   disabled = false;
   isDebugAllActive$ = timer(0, SECOND).pipe(map(() => this.allEnabledUntil > new Date().getTime() || this.allEnabled), shareReplay(1));
 
   readonly maxDebugModeDurationMinutes = getCurrentAuthState(this.store).maxDebugModeDurationMinutes;
 
-  private onChange: (settings: DebugSettings) => void;
+  private propagateChange: (settings: DebugSettings) => void;
 
   constructor(private popoverService: TbPopoverService,
               private renderer: Renderer2,
@@ -81,14 +85,8 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
               private destroyRef: DestroyRef,
               private fb: FormBuilder,
   ) {
-    this.debugSettingsFormGroup = this.fb.group({
-      failuresEnabled: [false],
-      allEnabled: [false],
-      allEnabledUntil: []
-    });
-
     this.debugSettingsFormGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
-      this.onChange(value);
+      this.propagateChange(value);
     })
   }
 
@@ -132,7 +130,7 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
   }
 
   registerOnChange(fn: (settings: DebugSettings) => void): void {
-    this.onChange = fn;
+    this.propagateChange = fn;
   }
 
   registerOnTouched(_: () => void): void {}
@@ -143,6 +141,10 @@ export class DebugSettingsButtonComponent implements ControlValueAccessor {
 
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
-    this.debugSettingsFormGroup[isDisabled ? 'disable' : 'enable']({emitEvent: false});
+    if (isDisabled) {
+      this.debugSettingsFormGroup.disable({emitEvent: false});
+    } else {
+      this.debugSettingsFormGroup.enable({emitEvent: false});
+    }
   }
 }

ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.html

@@ -38,16 +38,14 @@
           {{ 'debug-config.all-messages' | translate: { time: (isDebugAllActive$ | async) && !allEnabled ? (allEnabledUntil | durationLeft) : ('debug-config.min' | translate: { number:  maxDebugModeDurationMinutes }) } }}
         </div>
       </mat-slide-toggle>
-      @if ((isDebugAllActive$ | async) && !allEnabled) {
+      <button mat-icon-button *ngIf="(isDebugAllActive$ | async) && !allEnabled"
-        <button mat-icon-button
+              class="tb-mat-20"
-                class="tb-mat-20"
+              matTooltip="{{ 'action.reset' | translate }}"
-                matTooltip="{{ 'action.reset' | translate }}"
+              matTooltipPosition="above"
-                matTooltipPosition="above"
+              color="primary"
-                color="primary"
+              (click)="onReset()">
-                (click)="onReset()">
+        <mat-icon class="material-icons">refresh</mat-icon>
-          <mat-icon class="material-icons">refresh</mat-icon>
+      </button>
-        </button>
-      }
     </div>
   </div>
   <div class="flex justify-end">

ui-ngx/src/app/modules/home/components/debug-settings/debug-settings-panel.component.ts

@@ -15,6 +15,7 @@
 ///
 
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -33,7 +34,6 @@ import { shareReplay, timer } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DebugSettings } from '@shared/models/entity.models';
 import { distinctUntilChanged, map, tap } from 'rxjs/operators';
-import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-debug-settings-panel',
@@ -49,8 +49,8 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 export class DebugSettingsPanelComponent extends PageComponent implements OnInit {
 
   @Input() popover: TbPopoverComponent<DebugSettingsPanelComponent>;
-  @Input() @coerceBoolean() failuresEnabled = false;
+  @Input({ transform: booleanAttribute }) failuresEnabled = false;
-  @Input() @coerceBoolean() allEnabled = false;
+  @Input({ transform: booleanAttribute }) allEnabled = false;
   @Input() allEnabledUntil = 0;
   @Input() maxDebugModeDurationMinutes: number;
   @Input() debugLimitsConfiguration: string;