From 8ba41c5e2b082c11ab07a9f431c4945e83c80f9d Mon Sep 17 00:00:00 2001 From: Patrick Nawracay Date: Thu, 6 Sep 2018 20:57:50 +0200 Subject: [PATCH] mgr/dashboard: Refactoring of `DeletionModalComponent` - Simpler variable names: Examples: - `actionDescription` and `itemDescription` 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 --- .../ceph/block/rbd-list/rbd-list.component.ts | 25 ++-- .../rbd-snapshot-list.component.ts | 10 +- .../rgw-bucket-list.component.ts | 58 ++++---- .../rgw-user-list/rgw-user-list.component.ts | 58 ++++---- .../auth/role-list/role-list.component.ts | 10 +- .../auth/user-list/user-list.component.ts | 10 +- .../deletion-modal.component.html | 16 +-- .../deletion-modal.component.spec.ts | 136 +++++------------- .../deletion-modal.component.ts | 53 ++----- 9 files changed, 139 insertions(+), 237 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts index 2a4ac07d79e..eafb9bda73f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts @@ -198,18 +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', - 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: { + itemDescription: 'RBD', + submitActionObservable: () => + this.taskWrapper.wrapTaskAroundCall({ + task: new FinishedTask('rbd/delete', { + pool_name: poolName, + image_name: imageName + }), + call: this.rbdService.delete(poolName, imageName) + }) + } }); } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.ts index c22ace30b2e..f001b29cdd8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.ts @@ -253,11 +253,11 @@ 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', - deletionMethod: () => this._asyncTask('deleteSnapshot', 'rbd/snap/delete', snapshotName), - modalRef: this.modalRef + this.modalRef = this.modalService.show(DeletionModalComponent, { + initialState: { + itemDescription: 'RBD snapshot', + submitAction: () => this._asyncTask('deleteSnapshot', 'rbd/snap/delete', snapshotName) + } }); } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.ts index 3ba427dbdd0..ea848143a2a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.ts +++ b/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 => { - return new Observable((observer: Subscriber) => { - // 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: { + itemDescription: this.selection.hasSingleSelection ? 'bucket' : 'buckets', + submitActionObservable: () => { + return new Observable((observer: Subscriber) => { + // 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(); + } + ); + }); + } + } }); } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts index 71c3b8fae92..8d33bc3e27c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.ts +++ b/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 => { - return new Observable((observer: Subscriber) => { - // 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: { + itemDescription: this.selection.hasSingleSelection ? 'user' : 'users', + submitActionObservable: (): Observable => { + return new Observable((observer: Subscriber) => { + // 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(); + } + ); + }); + } + } }); } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-list/role-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-list/role-list.component.ts index cc668434e3b..c9dffee279c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-list/role-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-list/role-list.component.ts @@ -90,12 +90,12 @@ export class RoleListComponent implements OnInit { } deleteRoleModal() { - this.modalRef = this.modalService.show(DeletionModalComponent); const name = this.selection.first().name; - this.modalRef.content.setUp({ - metaType: 'Role', - deletionMethod: () => this.deleteRole(name), - modalRef: this.modalRef + this.modalRef = this.modalService.show(DeletionModalComponent, { + initialState: { + itemDescription: 'Role', + submitAction: () => this.deleteRole(name) + } }); } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-list/user-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-list/user-list.component.ts index ea62fc24a6c..37a3d77486a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-list/user-list.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-list/user-list.component.ts @@ -100,11 +100,11 @@ export class UserListComponent implements OnInit { ); return; } - this.modalRef = this.modalService.show(DeletionModalComponent); - this.modalRef.content.setUp({ - metaType: 'User', - deletionMethod: () => this.deleteUser(username), - modalRef: this.modalRef + this.modalRef = this.modalService.show(DeletionModalComponent, { + initialState: { + itemDescription: 'User', + submitAction: () => this.deleteUser(username) + } }); } } 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 a6dc08babda..ee4532677f9 100644 --- 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 @@ -10,13 +10,10 @@ [formGroup]="deletionForm" novalidate>
- +
-

- - Are you sure you want to delete the selected - - {{ metaType }}? +

+ Are you sure that you want to {{ actionDescription | lowercase }} the selected {{ itemDescription }}?

@@ -28,7 +25,7 @@ autofocus>
@@ -37,7 +34,7 @@
+ (submitAction)="callSubmitAction()">