From: Nizamudeen A <nia@redhat.com>
Date: Sat, 23 Oct 2021 19:06:51 +0000 (+0530)
Subject: mgr/dashboard: Fix for form inside form closing issue
X-Git-Tag: v17.1.0~601^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F43639%2Fhead;p=ceph.git

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 91dfdf48d1015..03b3bb18dac84 100644
--- 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 eb4b9e3a6d048..852866a86db2c 100644
--- 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 137cc43fa4b4f..074bb8d79ce94 100644
--- 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 987acc957817f..942e96e2eb967 100644
--- 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);
   }