mgr/dashboard: Refactoring of DeletionModalComponent

- Simpler variable names:

    Examples:

	- `actionDescription` instead of `metaType`
	- `bodyTemplate` instead of `description`
	- `validationPattern` instead of `pattern`

    Some of these variable names have been generalized to ease the
    unification/generalization of dialog components:

	- `submitAction` instead of `deletionMethod`

- Removed unique `setUp` method.

    Benefits:

    - Creation of the component is done as intended by the developers of
    the `ngx-boostrap` package and as expected by developers which use
    the package. The `setUp` method does not have to be called anymore
    on the `DeletionModalComponent` exclusively but instead the
    component is instantiated as all other modals. Property assignment
    on the instantiated object isn't handled by the `setUp` method
    anymore but by the `modalService`.

    - With the removal of the `setUp` method, some tests could be
    removed as well.

    - No need to pass the reference of the created modal to the modal
    manually.

    Preserved:

    - The provided check within the `setUp` method, which checked if the
    component had been correctly instantiated, has been moved to the
    `ngOnInit` method of the component.

Signed-off-by: Patrick Nawracay <pnawracay@suse.com>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts

@@ -198,19 +198,19 @@ export class RbdListComponent implements OnInit {
   deleteRbdModal() {
     const poolName = this.selection.first().pool_name;
     const imageName = this.selection.first().name;
-    this.modalRef = this.modalService.show(DeletionModalComponent);
-    this.modalRef.content.setUp({
-      metaType: 'RBD',
-      pattern: `${poolName}/${imageName}`,
-      deletionObserver: () =>
-        this.taskWrapper.wrapTaskAroundCall({
-          task: new FinishedTask('rbd/delete', {
-            pool_name: poolName,
-            image_name: imageName
-          }),
-          call: this.rbdService.delete(poolName, imageName)
-        }),
-      modalRef: this.modalRef
+    this.modalRef = this.modalService.show(DeletionModalComponent, {
+      initialState: {
+        actionDescription: 'Delete RBD',
+        validationPattern: `${poolName}/${imageName}`,
+        submitActionObservable: () =>
+          this.taskWrapper.wrapTaskAroundCall({
+            task: new FinishedTask('rbd/delete', {
+              pool_name: poolName,
+              image_name: imageName
+            }),
+            call: this.rbdService.delete(poolName, imageName)
+          })
+      }
     });
   }
 

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.ts

@@ -253,12 +253,12 @@ export class RbdSnapshotListComponent implements OnInit, OnChanges {
 
   deleteSnapshotModal() {
     const snapshotName = this.selection.selected[0].name;
-    this.modalRef = this.modalService.show(DeletionModalComponent);
-    this.modalRef.content.setUp({
-      metaType: 'RBD snapshot',
-      pattern: snapshotName,
-      deletionMethod: () => this._asyncTask('deleteSnapshot', 'rbd/snap/delete', snapshotName),
-      modalRef: this.modalRef
+    this.modalRef = this.modalService.show(DeletionModalComponent, {
+      initialState: {
+        actionDescription: 'Delete RBD snapshot',
+        validationPattern: snapshotName,
+        submitAction: () => this._asyncTask('deleteSnapshot', 'rbd/snap/delete', snapshotName)
+      }
     });
   }
 

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.ts

@@ -62,35 +62,35 @@ export class RgwBucketListComponent {
   }
 
   deleteAction() {
-    const modalRef = this.bsModalService.show(DeletionModalComponent);
-    modalRef.content.setUp({
-      metaType: this.selection.hasSingleSelection ? 'bucket' : 'buckets',
-      deletionObserver: (): Observable<any> => {
-        return new Observable((observer: Subscriber<any>) => {
-          // Delete all selected data table rows.
-          observableForkJoin(
-            this.selection.selected.map((bucket: any) => {
-              return this.rgwBucketService.delete(bucket.bucket);
-            })
-          ).subscribe(
-            null,
-            (error) => {
-              // Forward the error to the observer.
-              observer.error(error);
-              // Reload the data table content because some deletions might
-              // have been executed successfully in the meanwhile.
-              this.table.refreshBtn();
-            },
-            () => {
-              // Notify the observer that we are done.
-              observer.complete();
-              // Reload the data table content.
-              this.table.refreshBtn();
-            }
-          );
-        });
-      },
-      modalRef: modalRef
+    this.bsModalService.show(DeletionModalComponent, {
+      initialState: {
+        actionDescription: 'Delete ' + (this.selection.hasSingleSelection ? 'bucket' : 'buckets'),
+        submitActionObservable: () => {
+          return new Observable((observer: Subscriber<any>) => {
+            // Delete all selected data table rows.
+            observableForkJoin(
+              this.selection.selected.map((bucket: any) => {
+                return this.rgwBucketService.delete(bucket.bucket);
+              })
+            ).subscribe(
+              null,
+              (error) => {
+                // Forward the error to the observer.
+                observer.error(error);
+                // Reload the data table content because some deletions might
+                // have been executed successfully in the meanwhile.
+                this.table.refreshBtn();
+              },
+              () => {
+                // Notify the observer that we are done.
+                observer.complete();
+                // Reload the data table content.
+                this.table.refreshBtn();
+              }
+            );
+          });
+        }
+      }
     });
   }
 }

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts

@@ -79,35 +79,35 @@ export class RgwUserListComponent {
   }
 
   deleteAction() {
-    const modalRef = this.bsModalService.show(DeletionModalComponent);
-    modalRef.content.setUp({
-      metaType: this.selection.hasSingleSelection ? 'user' : 'users',
-      deletionObserver: (): Observable<any> => {
-        return new Observable((observer: Subscriber<any>) => {
-          // Delete all selected data table rows.
-          observableForkJoin(
-            this.selection.selected.map((user: any) => {
-              return this.rgwUserService.delete(user.user_id);
-            })
-          ).subscribe(
-            null,
-            (error) => {
-              // Forward the error to the observer.
-              observer.error(error);
-              // Reload the data table content because some deletions might
-              // have been executed successfully in the meanwhile.
-              this.table.refreshBtn();
-            },
-            () => {
-              // Notify the observer that we are done.
-              observer.complete();
-              // Reload the data table content.
-              this.table.refreshBtn();
-            }
-          );
-        });
-      },
-      modalRef: modalRef
+    const modalRef = this.bsModalService.show(DeletionModalComponent, {
+      initialState: {
+        actionDescription: 'Delete ' + (this.selection.hasSingleSelection ? 'user' : 'users'),
+        submitActionObservable: (): Observable<any> => {
+          return new Observable((observer: Subscriber<any>) => {
+            // Delete all selected data table rows.
+            observableForkJoin(
+              this.selection.selected.map((user: any) => {
+                return this.rgwUserService.delete(user.user_id);
+              })
+            ).subscribe(
+              null,
+              (error) => {
+                // Forward the error to the observer.
+                observer.error(error);
+                // Reload the data table content because some deletions might
+                // have been executed successfully in the meanwhile.
+                this.table.refreshBtn();
+              },
+              () => {
+                // Notify the observer that we are done.
+                observer.complete();
+                // Reload the data table content.
+                this.table.refreshBtn();
+              }
+            );
+          });
+        }
+      }
     });
   }
 }

src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-list/role-list.component.ts

@@ -90,13 +90,13 @@ export class RoleListComponent implements OnInit {
   }
 
   deleteRoleModal() {
-    this.modalRef = this.modalService.show(DeletionModalComponent);
     const name = this.selection.first().name;
-    this.modalRef.content.setUp({
-      metaType: 'Role',
-      pattern: `${name}`,
-      deletionMethod: () => this.deleteRole(name),
-      modalRef: this.modalRef
+    this.modalRef = this.modalService.show(DeletionModalComponent, {
+      initialState: {
+        actionDescription: 'Role',
+        pattern: `${name}`,
+        submitAction: () => this.deleteRole(name)
+      }
     });
   }
 }

src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-list/user-list.component.ts

@@ -100,12 +100,12 @@ export class UserListComponent implements OnInit {
       );
       return;
     }
-    this.modalRef = this.modalService.show(DeletionModalComponent);
-    this.modalRef.content.setUp({
-      metaType: 'User',
-      pattern: `${username}`,
-      deletionMethod: () => this.deleteUser(username),
-      modalRef: this.modalRef
+    this.modalRef = this.modalService.show(DeletionModalComponent, {
+      initialState: {
+        actionDescription: 'Delete User',
+        validationPattern: `${username}`,
+        submitAction: () => this.deleteUser(username)
+      }
     });
   }
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/components/deletion-modal/deletion-modal.component.html

@@ -10,12 +10,12 @@
           [formGroup]="deletionForm"
           novalidate>
       <div class="modal-body">
-        <ng-container *ngTemplateOutlet="description"></ng-container>
+        <ng-container *ngTemplateOutlet="bodyTemplate"></ng-container>
         <p>
           <ng-container i18n>
             To confirm the deletion, enter
           </ng-container>
-          <kbd>{{ pattern }}</kbd>
+          <kbd>{{ validationPattern }}</kbd>
           <ng-container i18n>
             and click on
           </ng-container>
@@ -29,8 +29,8 @@
                  class="form-control"
                  name="confirmation"
                  id="confirmation"
-                 [placeholder]="pattern"
-                 [pattern]="escapeRegExp(pattern)"
+                 [placeholder]="validationPattern"
+                 [pattern]="escapeRegExp(validationPattern)"
                  autocomplete="off"
                  (keyup)="updateConfirmation($event)"
                  formControlName="confirmation"
@@ -51,7 +51,7 @@
       <div class="modal-footer">
         <cd-submit-button #submitButton
                           [form]="deletionForm"
-                          (submitAction)="deletionCall()">
+                          (submitAction)="callSubmitAction()">
           <ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
         </cd-submit-button>
         <button class="btn btn-link btn-sm"
@@ -65,8 +65,5 @@
 </cd-modal>
 
 <ng-template #deletionHeading>
-  <ng-container i18n>
-    Delete
-  </ng-container>
-  {{ metaType }}
+  {{ actionDescription }}
 </ng-template>