mgr/dashboard: Fix for form inside form closing issue

After the angular 11 upgrade the form in form behaviour got broken when
one tries to close that "embedded" form. This commit is to fix that
behaviour.

Fixes: https://tracker.ceph.com/issues/53020
Signed-off-by: Nizamudeen A <nia@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/workflow/nfs/nfs-export.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/workflow/nfs/nfs-export.po.ts
index 91dfdf48d1015bf8ab9d6742a348565c33d91976..03b3bb18dac84b27dc6ebd71a98fd131dddfd8a9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/workflow/nfs/nfs-export.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/orchestrator/workflow/nfs/nfs-export.po.ts
@@ -28,6 +28,11 @@ export class NFSPageHelper extends PageHelper {
     cy.get('button[name=add_client]').click({ force: true });
     cy.get('input[name=addresses]').type(client['addresses']);
 
+    // Check if we can remove clients and add it again
+    cy.get('span[name=remove_client]').click({ force: true });
+    cy.get('button[name=add_client]').click({ force: true });
+    cy.get('input[name=addresses]').type(client['addresses']);
+
     cy.get('cd-submit-button').click();
   }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
index eb4b9e3a6d04853d9762122ff9c8e6e2b4339c88..852866a86db2c4fa0961ae7321081e2cfc5fb6e4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-form/iscsi-target-form.component.html
@@ -337,7 +337,7 @@
                formArrayName="initiators">
             <div class="card mb-2"
                  *ngFor="let initiator of initiators.controls; let ii = index"
-                 [formGroupName]="ii">
+                 [formGroup]="initiator">
               <div class="card-header">
                 <ng-container i18n>Initiator</ng-container>: {{ initiator.getValue('client_iqn') }}
                 <button type="button"
@@ -559,7 +559,7 @@
                formArrayName="groups">
             <div class="card mb-2"
                  *ngFor="let group of groups.controls; let gi = index"
-                 [formGroupName]="gi">
+                 [formGroup]="group">
               <div class="card-header">
                 <ng-container i18n>Group</ng-container>: {{ group.getValue('group_id') }}
                 <button type="button"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html
index 137cc43fa4b4f95bff5dd3168b38b62b46b0dfdf..074bb8d79ce943f9f5427e8efa1677e098dfda6f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.html
@@ -12,12 +12,13 @@
     </span>
 
     <ng-container formArrayName="clients">
-      <div *ngFor="let item of form.get('clients').value; let index = index; trackBy: trackByFn">
+      <div *ngFor="let item of clientsFormArray.controls; let index = index; trackBy: trackByFn">
         <div class="card"
-             [formGroupName]="index">
+             [formGroup]="item">
           <div class="card-header">
             {{ (index + 1) | ordinal }}
             <span class="float-right clickable"
+                  name="remove_client"
                   (click)="removeClient(index)"
                   ngbTooltip="Remove">&times;</span>
           </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.ts
index 987acc957817fe95e066a647e808400b6339b310..942e96e2eb9674aef87266bcab7beaf624878f83 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/nfs/nfs-form-client/nfs-form-client.component.ts
@@ -24,6 +24,7 @@ export class NfsFormClientComponent implements OnInit {
   nfsSquash: any[] = this.nfsService.nfsSquash;
   nfsAccessType: any[] = this.nfsService.nfsAccessType;
   icons = Icons;
+  clientsFormArray: FormArray;
 
   constructor(private nfsService: NfsService) {}
 
@@ -32,6 +33,7 @@ export class NfsFormClientComponent implements OnInit {
       const fg = this.addClient();
       fg.patchValue(client);
     });
+    this.clientsFormArray = this.form.get('clients') as FormArray;
   }
 
   getNoAccessTypeDescr() {
@@ -56,11 +58,10 @@ export class NfsFormClientComponent implements OnInit {
   }
 
   addClient() {
-    const clients = this.form.get('clients') as FormArray;
+    this.clientsFormArray = this.form.get('clients') as FormArray;
 
     const REGEX_IP = `(([0-9]{1,3})\\.([0-9]{1,3})\\.([0-9]{1,3})\.([0-9]{1,3})([/](\\d|[1-2]\\d|3[0-2]))?)`;
     const REGEX_LIST_IP = `${REGEX_IP}([ ,]{1,2}${REGEX_IP})*`;
-
     const fg = new CdFormGroup({
       addresses: new FormControl('', {
         validators: [Validators.required, Validators.pattern(REGEX_LIST_IP)]
@@ -69,13 +70,13 @@ export class NfsFormClientComponent implements OnInit {
       squash: new FormControl('')
     });
 
-    clients.push(fg);
+    this.clientsFormArray.push(fg);
     return fg;
   }
 
   removeClient(index: number) {
-    const clients = this.form.get('clients') as FormArray;
-    clients.removeAt(index);
+    this.clientsFormArray = this.form.get('clients') as FormArray;
+    this.clientsFormArray.removeAt(index);
   }
 
   showError(index: number, control: string, formDir: NgForm, x: string) {
@@ -83,8 +84,8 @@ export class NfsFormClientComponent implements OnInit {
   }
 
   getValue(index: number, control: string) {
-    const clients = this.form.get('clients') as FormArray;
-    const client = clients.at(index) as CdFormGroup;
+    this.clientsFormArray = this.form.get('clients') as FormArray;
+    const client = this.clientsFormArray.at(index) as CdFormGroup;
     return client.getValue(control);
   }