mgr/dashboard: Use forms in deletion modal

Signed-off-by: Stephan Müller <smueller@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.html
index 5054785be89aaba6347aa8878881574248555ac2..365686522c5b2d1d79bb9ea4148244807712e98a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.html
@@ -24,7 +24,7 @@
           </kbd>.
         </p>
         <div class="form-group"
-             [ngClass]="{'has-error': invalidControl(formDir.submitted)}">
+             [ngClass]="{'has-error': deletionForm.showError('confirmation', formDir)}">
           <input type="text"
                  class="form-control"
                  name="confirmation"
@@ -36,12 +36,12 @@
                  formControlName="confirmation"
                  autofocus>
           <span class="help-block"
-                *ngIf="invalidControl(formDir.submitted,'required')"
+                *ngIf="deletionForm.showError('confirmation', formDir, 'required')"
                 i18n>
           This field is required.
         </span>
           <span class="help-block"
-                *ngIf="invalidControl(formDir.submitted, 'pattern')">
+                *ngIf="deletionForm.showError('confirmation', formDir, 'pattern')">
           '{{ confirmation.value }}'
           <span i18n>doesn't match</span>
           '{{ pattern }}'.

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.spec.ts
index 2f2d3e60b9eadac0dbac04b92c997fafb9870cfa..3e76508553a38ce594040beda49871d94dcdbb31 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.spec.ts
@@ -1,6 +1,6 @@
 import { Component, NgModule, NO_ERRORS_SCHEMA, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
+import { NgForm, ReactiveFormsModule } from '@angular/forms';
 
 import { BsModalRef, BsModalService, ModalModule } from 'ngx-bootstrap';
 import { Observable, Subscriber, timer as observableTimer } from 'rxjs';
@@ -258,9 +258,11 @@ describe('DeletionModalComponent', () => {
       expect(component.modalRef.hide).toHaveBeenCalled();
     });
 
-    describe('invalid control', () => {
-      const testInvalidControl = (submitted: boolean, error: string, expected: boolean) => {
-        expect(component.invalidControl(submitted, error)).toBe(expected);
+    describe('validate confirmation', () => {
+      const testValidation = (submitted: boolean, error: string, expected: boolean) => {
+        expect(
+          component.deletionForm.showError('confirmation', <NgForm>{ submitted: submitted }, error)
+        ).toBe(expected);
       };
 
       beforeEach(() => {
@@ -268,22 +270,21 @@ describe('DeletionModalComponent', () => {
       });
 
       it('should test empty values', () => {
-        expect(component.invalidControl).toBeTruthy();
         component.deletionForm.reset();
-        testInvalidControl(false, undefined, false);
-        testInvalidControl(true, 'required', true);
+        testValidation(false, undefined, false);
+        testValidation(true, 'required', true);
         component.deletionForm.reset();
         changeValue('let-me-pass');
         changeValue('');
-        testInvalidControl(true, 'required', true);
+        testValidation(true, 'required', true);
       });
 
       it('should test pattern', () => {
         changeValue('let-me-pass');
-        testInvalidControl(false, 'pattern', true);
+        testValidation(false, 'pattern', true);
         changeValue('ctrl-test');
-        testInvalidControl(false, undefined, false);
-        testInvalidControl(true, undefined, false);
+        testValidation(false, undefined, false);
+        testValidation(true, undefined, false);
       });
     });
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.ts
index a4a9b34895428aa69e27801b4a2fd3ad38861837..caf9d08b38f05802a85c96da88bbb3aef54fafea 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.ts
@@ -1,11 +1,10 @@
-import {
-  Component, OnInit, TemplateRef, ViewChild
-} from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
 
 import { BsModalRef } from 'ngx-bootstrap';
 import { Observable } from 'rxjs';
 
+import { CdFormGroup } from '../../forms/cd-form-group';
 import { SubmitButtonComponent } from '../submit-button/submit-button.component';
 
 @Component({
@@ -22,13 +21,25 @@ export class DeletionModalComponent implements OnInit {
   deletionMethod: Function;
   modalRef: BsModalRef;
 
-  deletionForm: FormGroup;
+  deletionForm: CdFormGroup;
   confirmation: FormControl;
 
   // Parameters are destructed here than assigned to specific types and marked as optional
-  setUp({modalRef, metaType, deletionMethod, pattern, deletionObserver, description}:
-          { modalRef: BsModalRef, metaType: string, deletionMethod?: Function, pattern?: string,
-            deletionObserver?: () => Observable<any>, description?: TemplateRef<any>}) {
+  setUp({
+    modalRef,
+    metaType,
+    deletionMethod,
+    pattern,
+    deletionObserver,
+    description
+  }: {
+    modalRef: BsModalRef;
+    metaType: string;
+    deletionMethod?: Function;
+    pattern?: string;
+    deletionObserver?: () => Observable<any>;
+    description?: TemplateRef<any>;
+  }) {
     if (!modalRef) {
       throw new Error('No modal reference');
     } else if (!metaType) {
@@ -46,25 +57,14 @@ export class DeletionModalComponent implements OnInit {
 
   ngOnInit() {
     this.confirmation = new FormControl('', {
-      validators: [
-        Validators.required
-      ],
+      validators: [Validators.required],
       updateOn: 'blur'
     });
-    this.deletionForm = new FormGroup({
+    this.deletionForm = new CdFormGroup({
       confirmation: this.confirmation
     });
   }
 
-  invalidControl(submitted: boolean, error?: string): boolean {
-    const control = this.confirmation;
-    return !!(
-      (submitted || control.dirty) &&
-      control.invalid &&
-      (error ? control.errors[error] : true)
-    );
-  }
-
   updateConfirmation($e) {
     if ($e.key !== 'Enter') {
       return;
@@ -91,6 +91,6 @@ export class DeletionModalComponent implements OnInit {
   }
 
   stopLoadingSpinner() {
-    this.deletionForm.setErrors({'cdSubmitButton': true});
+    this.deletionForm.setErrors({ cdSubmitButton: true });
   }
 }