Add change origin to assist form control directive (#3676)

* Add change origin to assist form control directive Signed-off-by: seajamied <jdegnan@chef.io> * Add mock selector for tests Signed-off-by: seajamied <jdegnan@chef.io> * Rebase master and make small spec fix Signed-off-by: seajamied <jdegnan@chef.io> * Fix html structure and comments based on feedback Signed-off-by: seajamied <jdegnan@chef.io>
chef · May 29, 2020 · 0efe530 · 0efe530
1 parent 38bb529
commit 0efe530
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 20 deletions.
diff --git a/components/automate-ui/src/app/pages/automate-settings/automate-settings.component.html b/components/automate-ui/src/app/pages/automate-settings/automate-settings.component.html
@@ -38,7 +38,7 @@ <h2>Event Feed</h2>
               </chef-checkbox>
             </div>
             <p>Remove event feed data after
-              <input chefInput formControlName="threshold" type="number" min="0" 
+              <input chefInput formControlName="threshold" [resetOrigin]="shouldResetValues" type="number" min="0" 
                 (keydown)="preventNegatives($event.key)"/>days
             </p>
           </div>
@@ -51,7 +51,7 @@ <h2>Event Feed</h2>
               </chef-checkbox>
             </div>
             <p>Remove Chef Server actions after
-              <input chefInput type="number" min="0" formControlName="threshold" 
+              <input chefInput formControlName="threshold" [resetOrigin]="shouldResetValues" type="number" min="0"
                 (keydown)="preventNegatives($event.key)"/>days
             </p>
           </div>
@@ -74,10 +74,10 @@ <h2>Service Groups</h2>
             </div>
 
             <p>When no health check reports have been received for a service in
-              <input chefInput type="number" min="0" formControlName="threshold" 
+              <input chefInput formControlName="threshold" [resetOrigin]="shouldResetValues" type="number" min="0"
                 (keydown)="preventNegatives($event.key)" />
               <mat-form-field appearance="none">
-                <mat-select panelClass="chef-dropdown" formControlName="unit">
+                <mat-select panelClass="chef-dropdown" formControlName="unit" [resetOrigin]="shouldResetValues">
                   <mat-option value="m">minutes</mat-option>
                   <mat-option value="h">hours</mat-option>
                   <mat-option value="d">days</mat-option>
@@ -101,10 +101,10 @@ <h2>Service Groups</h2>
               </span>
             </div>
             <p>Remove services labeled as disconnected after
-              <input chefInput type="number" min="0" formControlName="threshold"
+              <input chefInput formControlName="threshold" [resetOrigin]="shouldResetValues" type="number" min="0"
                 (keydown)="preventNegatives($event.key)" />
               <mat-form-field appearance="none">
-                <mat-select panelClass="chef-dropdown" formControlName="unit">
+                <mat-select panelClass="chef-dropdown" formControlName="unit" [resetOrigin]="shouldResetValues">
                   <mat-option value="m">minutes</mat-option>
                   <mat-option value="h">hours</mat-option>
                   <mat-option value="d">days</mat-option>
@@ -124,7 +124,7 @@ <h2>Client Runs</h2>
               </chef-checkbox>
             </div>
             <p>Remove data for Chef Infra Client runs after
-              <input chefInput type="number" min="0" formControlName="threshold"
+              <input chefInput formControlName="threshold" [resetOrigin]="shouldResetValues" type="number" min="0"
                 (keydown)="preventNegatives($event.key)" />days
             </p>
           </div>
@@ -139,13 +139,10 @@ <h2>Client Runs</h2>
             </div>
 
             <p>When no Chef Infra Client run data has been received from a node in
-              <input chefInput 
-                type="number" 
-                min="0" 
-                formControlName="threshold" 
-                (keydown)="preventNegatives($event.key)" />
+              <input chefInput formControlName="threshold" [resetOrigin]="shouldResetValues"
+                type="number" min="0" (keydown)="preventNegatives($event.key)" />
               <mat-form-field appearance="none">
-                <mat-select panelClass="chef-dropdown" formControlName="unit">
+                <mat-select panelClass="chef-dropdown" formControlName="unit" [resetOrigin]="shouldResetValues">
                   <mat-option value="m">minutes</mat-option>
                   <mat-option value="h">hours</mat-option>
                   <mat-option value="d">days</mat-option>
@@ -164,7 +161,7 @@ <h2>Client Runs</h2>
               </chef-checkbox>
             </div>
             <p>Remove nodes labeled as missing after
-              <input chefInput type="number" min="0" formControlName="threshold" 
+              <input chefInput formControlName="threshold" [resetOrigin]="shouldResetValues" type="number" min="0"
                 (keydown)="preventNegatives($event.key)" />days
             </p>
           </div>
@@ -180,7 +177,7 @@ <h2>Compliance</h2>
               </chef-checkbox>
             </div>
             <p>Remove compliance reports after
-              <input chefInput type="number" min="0" formControlName="threshold" 
+              <input chefInput formControlName="threshold" [resetOrigin]="shouldResetValues" type="number" min="0"
                 (keydown)="preventNegatives($event.key)" />days
             </p>
           </div>
@@ -193,7 +190,7 @@ <h2>Compliance</h2>
               </chef-checkbox>
             </div>
             <p>Remove compliance scans after
-              <input chefInput type="number" min="0" formControlName="threshold" 
+              <input chefInput formControlName="threshold" [resetOrigin]="shouldResetValues" type="number" min="0"
                 (keydown)="preventNegatives($event.key)" />days
             </p>
           </div>

diff --git a/components/automate-ui/src/app/pages/automate-settings/automate-settings.component.spec.ts b/components/automate-ui/src/app/pages/automate-settings/automate-settings.component.spec.ts
@@ -6,6 +6,7 @@ import { FormGroup, FormBuilder, FormsModule, ReactiveFormsModule } from '@angul
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MockComponent } from 'ng2-mock-component';
 
 import { ngrxReducers, runtimeChecks } from 'app/ngrx.reducers';
 import {
@@ -75,7 +76,8 @@ describe('AutomateSettingsComponent', () => {
           StoreModule.forRoot(ngrxReducers, { runtimeChecks })
         ],
         declarations: [
-          AutomateSettingsComponent
+          AutomateSettingsComponent,
+          MockComponent({ selector: 'input', inputs: ['resetOrigin'] })
         ],
         providers: [
           FormBuilder,
@@ -129,7 +131,8 @@ describe('AutomateSettingsComponent', () => {
           StoreModule.forRoot(ngrxReducers, { runtimeChecks })
         ],
         declarations: [
-          AutomateSettingsComponent
+          AutomateSettingsComponent,
+          MockComponent({ selector: 'input', inputs: ['resetOrigin'] })
         ],
         providers: [
           FormBuilder,

diff --git a/components/automate-ui/src/app/pages/automate-settings/automate-settings.component.ts b/components/automate-ui/src/app/pages/automate-settings/automate-settings.component.ts
@@ -59,6 +59,9 @@ export class AutomateSettingsComponent implements OnInit, OnDestroy {
   // Are settings currently saving
   saving = false;
 
+  // Change origin boolean for formControl directive
+  shouldResetValues = false;
+
   // Notification bits
   notificationVisible = false;
   notificationType = 'info';
@@ -151,8 +154,11 @@ export class AutomateSettingsComponent implements OnInit, OnDestroy {
             this.saving = false;
           } else if (changeConfigurationSelector.status === 'loadingSuccess') {
             this.showSuccessNotification();
-            this.automateSettingsForm.markAsPristine();
             this.saving = false;
+            // After a successful save, trigger a notification to FormControlDirective
+            // to consider the newly updated values as the new "original" values
+            this.shouldResetValues = true;
+            this.automateSettingsForm.markAsPristine();
           }
         });
   }
@@ -200,6 +206,7 @@ export class AutomateSettingsComponent implements OnInit, OnDestroy {
   // Apply the changes that the user updated in the forms
   public applyChanges() {
     this.saving = true;
+    this.shouldResetValues = false;
     // Note: Services are currently not enabled through the form
     const jobs: IngestJob[] = [
       // Event Feed
@@ -287,7 +294,6 @@ export class AutomateSettingsComponent implements OnInit, OnDestroy {
 
   // Update forms until we get the job scheduler status
   public updateForm(jobSchedulerStatus: JobSchedulerStatus) {
-
     if (jobSchedulerStatus === null) {
       return;
     }
@@ -310,6 +316,10 @@ export class AutomateSettingsComponent implements OnInit, OnDestroy {
           break;
       }
     });
+    // After a successful load of initial values, trigger a notification
+    // to FormControlDirective to treat them as the "original" values.
+    this.shouldResetValues = true;
+    this.automateSettingsForm.markAsPristine();
   }
 
   // Splits a packed threshold into a number and a unit, where unit is a single character