From 24a2495ba375e61a40a78c1741046cfa5e9c4255 Mon Sep 17 00:00:00 2001
From: Volker Theile <vtheile@suse.com>
Date: Wed, 11 Nov 2020 09:02:23 +0100
Subject: [PATCH] mgr/dashboard: Use pipe instead of calling function within
 template wherever possible

https://tracker.ceph.com/issues/48181

Signed-off-by: Volker Theile <vtheile@suse.com>
---
 .../src/app/ceph/block/block.module.ts        |  2 +
 .../rbd-configuration-list.component.html     |  1 -
 .../rbd-configuration-list.component.spec.ts  |  7 ++--
 .../rbd-trash-list.component.html             |  5 ++-
 .../rbd-trash-list.component.spec.ts          |  2 +
 .../rbd-trash-list.component.ts               |  7 +---
 .../cephfs-directories.component.spec.ts      |  5 ++-
 .../src/app/ceph/cluster/cluster.module.ts    |  4 +-
 .../osd/osd-list/osd-list.component.html      |  5 ++-
 .../osd/osd-list/osd-list.component.spec.ts   |  2 +-
 .../osd/osd-list/osd-list.component.ts        |  9 ++++-
 .../service-daemon-list.component.html        |  2 +-
 .../service-daemon-list.component.spec.ts     |  3 +-
 .../service-daemon-list.component.ts          |  4 +-
 .../service-details.component.spec.ts         |  9 ++++-
 .../pool/pool-form/pool-form.component.ts     |  2 +-
 .../rgw-user-form.component.html              |  4 +-
 .../rgw-user-form.component.spec.ts           |  6 ++-
 .../rgw-user-form/rgw-user-form.component.ts  |  7 ++--
 .../frontend/src/app/ceph/rgw/rgw.module.ts   |  4 +-
 .../frontend/src/app/core/auth/auth.module.ts |  2 +
 .../app/shared/datatable/datatable.module.ts  |  2 +
 .../table-actions.component.html              | 20 +++++-----
 .../table-actions.component.spec.ts           | 10 +++--
 .../table-actions/table-actions.component.ts  | 37 +++++++++++--------
 .../table-key-value.component.spec.ts         |  4 +-
 .../datatable/table/table.component.html      |  2 +-
 .../datatable/table/table.component.spec.ts   |  2 +
 .../frontend/src/testing/unit-test-helper.ts  | 26 +++++++++----
 29 files changed, 123 insertions(+), 72 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
index e6c5e68ca0d63..472fe37f19fa6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/block.module.ts
@@ -5,6 +5,7 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { TreeModule } from '@circlon/angular-tree-component';
 import { NgbNavModule, NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 
 import { ActionLabels, URLVerbs } from '~/app/shared/constants/app.constants';
 import { FeatureTogglesGuardService } from '~/app/shared/services/feature-toggles-guard.service';
@@ -45,6 +46,7 @@ import { RbdTrashRestoreModalComponent } from './rbd-trash-restore-modal/rbd-tra
     NgbNavModule,
     NgbPopoverModule,
     NgbTooltipModule,
+    NgxPipeFunctionModule,
     SharedModule,
     RouterModule,
     TreeModule
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.html
index 64364f67da63c..6c3e8c0278ca7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.html
@@ -5,7 +5,6 @@
 </cd-table>
 
 <ng-template #configurationSourceTpl
-             let-row="row"
              let-value="value">
 
   <div [ngSwitch]="value">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts
index ae1a52657351e..f54ad02720c52 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-configuration-list/rbd-configuration-list.component.spec.ts
@@ -8,11 +8,10 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ChartsModule } from 'ng2-charts';
 
 import { ComponentsModule } from '~/app/shared/components/components.module';
-import { TableComponent } from '~/app/shared/datatable/table/table.component';
 import { RbdConfigurationEntry } from '~/app/shared/models/configuration';
-import { PipesModule } from '~/app/shared/pipes/pipes.module';
 import { FormatterService } from '~/app/shared/services/formatter.service';
 import { RbdConfigurationService } from '~/app/shared/services/rbd-configuration.service';
+import { SharedModule } from '~/app/shared/shared.module';
 import { configureTestBed } from '~/testing/unit-test-helper';
 import { RbdConfigurationListComponent } from './rbd-configuration-list.component';
 
@@ -29,10 +28,10 @@ describe('RbdConfigurationListComponent', () => {
       ComponentsModule,
       NgbDropdownModule,
       ChartsModule,
-      PipesModule,
+      SharedModule,
       NgbTooltipModule
     ],
-    declarations: [RbdConfigurationListComponent, TableComponent],
+    declarations: [RbdConfigurationListComponent],
     providers: [FormatterService, RbdConfigurationService]
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.html
index 340d0d0d4993a..044a1e9ac0abf 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.html
@@ -41,9 +41,10 @@
 </ng-template>
 
 <ng-template #deleteTpl
-             let-expiresAt>
+             let-expiresAt="expiresAt"
+             let-isExpired="isExpired">
   <p class="text-danger"
-     *ngIf="!isExpired(expiresAt)">
+     *ngIf="!isExpired">
     <strong>
       <ng-container i18n>This image is protected until {{ expiresAt | cdDate }}.</ng-container>
     </strong>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.spec.ts
index 939f04e66f8f7..17d8eed0fb686 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.spec.ts
@@ -6,6 +6,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import moment from 'moment';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 import { ToastrModule } from 'ngx-toastr';
 import { of } from 'rxjs';
 
@@ -34,6 +35,7 @@ describe('RbdTrashListComponent', () => {
       RouterTestingModule,
       SharedModule,
       NgbNavModule,
+      NgxPipeFunctionModule,
       ToastrModule.forRoot()
     ],
     providers: [TaskListService]
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.ts
index a0fafc192382f..43fe42b99fa38 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.ts
@@ -201,13 +201,14 @@ export class RbdTrashListComponent implements OnInit {
     const namespace = this.selection.first().namespace;
     const imageId = this.selection.first().id;
     const expiresAt = this.selection.first().deferment_end_time;
+    const isExpired = moment().isAfter(expiresAt);
     const imageIdSpec = new ImageSpec(poolName, namespace, imageId);
 
     this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
       itemDescription: 'RBD',
       itemNames: [imageIdSpec],
       bodyTemplate: this.deleteTpl,
-      bodyContext: { $implicit: expiresAt },
+      bodyContext: { expiresAt, isExpired },
       submitActionObservable: () =>
         this.taskWrapper.wrapTaskAroundCall({
           task: new FinishedTask('rbd/trash/remove', {
@@ -218,10 +219,6 @@ export class RbdTrashListComponent implements OnInit {
     });
   }
 
-  isExpired(expiresAt: string): boolean {
-    return moment().isAfter(expiresAt);
-  }
-
   purgeModal() {
     this.modalService.show(RbdTrashPurgeModalComponent);
   }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.spec.ts
index f23ae749f5bd4..c8f6c22a14b9a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.spec.ts
@@ -936,7 +936,10 @@ describe('CephfsDirectoriesComponent', () => {
     });
 
     it('should test all quota table actions permission combinations', () => {
-      const permissionHelper: PermissionHelper = new PermissionHelper(component.permission);
+      const permissionHelper: PermissionHelper = new PermissionHelper(component.permission, {
+        single: { dirValue: 0 },
+        multiple: [{ dirValue: 0 }, {}]
+      });
       const tableActions = permissionHelper.setPermissionsAndGetActions(
         component.quota.tableActions
       );
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
index 62464cadefe94..e52aa979081b4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -13,6 +13,7 @@ import {
   NgbTooltipModule,
   NgbTypeaheadModule
 } from '@ng-bootstrap/ng-bootstrap';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 
 import { SharedModule } from '~/app/shared/shared.module';
 import { PerformanceCounterModule } from '../performance-counter/performance-counter.module';
@@ -70,7 +71,8 @@ import { TelemetryComponent } from './telemetry/telemetry.component';
     CephSharedModule,
     NgbDatepickerModule,
     NgbPopoverModule,
-    NgbDropdownModule
+    NgbDropdownModule,
+    NgxPipeFunctionModule
   ],
   declarations: [
     HostsComponent,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
index fe236902e9781..9f4f3e2152cf4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
@@ -54,8 +54,9 @@
 <div [ngbNavOutlet]="nav"></div>
 
 <ng-template #markOsdConfirmationTpl
-             let-markActionDescription="markActionDescription">
-  <ng-container i18n><strong>OSD(s) {{  getSelectedOsdIds() | join }}</strong> will be marked
+             let-markActionDescription="markActionDescription"
+             let-osdIds="osdIds">
+  <ng-container i18n><strong>OSD(s) {{ osdIds | join }}</strong> will be marked
   <strong>{{ markActionDescription }}</strong> if you proceed.</ng-container>
 </ng-template>
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
index 7d4c85e44f57b..d6f865471481b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
@@ -425,7 +425,7 @@ describe('OsdListComponent', () => {
       const tableActionElement = fixture.debugElement.query(By.directive(TableActionsComponent));
       const toClassName = TestBed.inject(TableActionsComponent).toClassName;
       const getActionClasses = (action: CdTableAction) =>
-        tableActionElement.query(By.css(`[ngbDropdownItem].${toClassName(action.name)}`)).classes;
+        tableActionElement.query(By.css(`[ngbDropdownItem].${toClassName(action)}`)).classes;
 
       component.tableActions.forEach((action) => {
         if (action.name === 'Create') {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
index b03daa392df71..45dc840655ddd 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
@@ -373,7 +373,10 @@ export class OsdListComponent extends ListWithDetails implements OnInit {
    */
   getSelectedOsdIds(): number[] {
     const osdIds = this.osds.map((osd) => osd.id);
-    return this.selection.selected.map((row) => row.id).filter((id) => osdIds.includes(id));
+    return this.selection.selected
+      .map((row) => row.id)
+      .filter((id) => osdIds.includes(id))
+      .sort();
   }
 
   getSelectedOsds(): any[] {
@@ -483,12 +486,14 @@ export class OsdListComponent extends ListWithDetails implements OnInit {
   }
 
   showConfirmationModal(markAction: string, onSubmit: (id: number) => Observable<any>) {
+    const osdIds = this.getSelectedOsdIds();
     this.bsModalRef = this.modalService.show(ConfirmationModalComponent, {
       titleText: $localize`Mark OSD ${markAction}`,
       buttonText: $localize`Mark ${markAction}`,
       bodyTpl: this.markOsdConfirmationTpl,
       bodyContext: {
-        markActionDescription: markAction
+        markActionDescription: markAction,
+        osdIds
       },
       onSubmit: () => {
         observableForkJoin(
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html
index 078ac04d42ed0..f649726a3fe76 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html
@@ -11,7 +11,7 @@
 <ng-template #statusTpl
              let-row="row">
   <span class="badge"
-        [ngClass]="getStatusClass(row.status)">
+        [ngClass]="row | pipeFunction:getStatusClass">
     {{ row.status_desc }}
   </span>
 </ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.spec.ts
index 89b06b9791016..184e2e7ef6fa8 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.spec.ts
@@ -2,6 +2,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import _ from 'lodash';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 import { of } from 'rxjs';
 
 import { CephModule } from '~/app/ceph/ceph.module';
@@ -77,7 +78,7 @@ describe('ServiceDaemonListComponent', () => {
   };
 
   configureTestBed({
-    imports: [HttpClientTestingModule, CephModule, CoreModule, SharedModule]
+    imports: [HttpClientTestingModule, CephModule, CoreModule, NgxPipeFunctionModule, SharedModule]
   });
 
   beforeEach(() => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts
index 5a7b223bc8748..95795f6228512 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.ts
@@ -149,14 +149,14 @@ export class ServiceDaemonListComponent implements OnInit, OnChanges, AfterViewI
     }
   }
 
-  getStatusClass(status: number) {
+  getStatusClass(row: Daemon): string {
     return _.get(
       {
         '-1': 'badge-danger',
         '0': 'badge-warning',
         '1': 'badge-success'
       },
-      status,
+      row.status,
       'badge-dark'
     );
   }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.spec.ts
index 23bb679414b15..6be3b2689526f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-details/service-details.component.spec.ts
@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
 import { SummaryService } from '~/app/shared/services/summary.service';
@@ -16,7 +17,13 @@ describe('ServiceDetailsComponent', () => {
   let fixture: ComponentFixture<ServiceDetailsComponent>;
 
   configureTestBed({
-    imports: [HttpClientTestingModule, RouterTestingModule, SharedModule, NgbNavModule],
+    imports: [
+      HttpClientTestingModule,
+      RouterTestingModule,
+      SharedModule,
+      NgbNavModule,
+      NgxPipeFunctionModule
+    ],
     declarations: [ServiceDetailsComponent, ServiceDaemonListComponent],
     providers: [{ provide: SummaryService, useValue: { subscribeOnce: jest.fn() } }]
   });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
index bf4c206e2f4e1..c1b6ae5db835d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-form/pool-form.component.ts
@@ -484,7 +484,7 @@ export class PoolFormComponent extends CdForm implements OnInit {
     return (ecpControl.valid || ecpControl.disabled) && ecp ? pgs / (ecp.k + ecp.m) : 0;
   }
 
-  private alignPgs(pgs = this.form.getValue('pgNum')) {
+  alignPgs(pgs = this.form.getValue('pgNum')) {
     this.setPgs(Math.round(this.calculatePgPower(pgs < 1 ? 1 : pgs)));
   }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
index 164f6c2b3e8f9..acd6c02fd60a0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.html
@@ -414,10 +414,10 @@
                 <div class="col-12">
                   <button type="button"
                           class="btn btn-light float-right tc_addCapButton"
-                          [disabled]="hasAllCapabilities()"
+                          [disabled]="capabilities | pipeFunction:hasAllCapabilities"
                           i18n-ngbTooltip
                           ngbTooltip="All capabilities are already added."
-                          [disableTooltip]="!hasAllCapabilities()"
+                          [disableTooltip]="!(capabilities | pipeFunction:hasAllCapabilities)"
                           triggers="pointerenter:pointerleave"
                           (click)="showCapabilityModal()">
                     <i [ngClass]="[icons.add]"></i>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.spec.ts
index 987fd62d3a801..091e7d124531c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.spec.ts
@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 import { ToastrModule } from 'ngx-toastr';
 import { of as observableOf } from 'rxjs';
 
@@ -32,7 +33,8 @@ describe('RgwUserFormComponent', () => {
       RouterTestingModule,
       SharedModule,
       ToastrModule.forRoot(),
-      NgbTooltipModule
+      NgbTooltipModule,
+      NgxPipeFunctionModule
     ]
   });
 
@@ -322,7 +324,7 @@ describe('RgwUserFormComponent', () => {
 
       fixture.detectChanges();
 
-      expect(component.hasAllCapabilities()).toBeTruthy();
+      expect(component.hasAllCapabilities(component.capabilities)).toBeTruthy();
       const capabilityButton = fixture.debugElement.nativeElement.querySelector('.tc_addCapButton');
       expect(capabilityButton.disabled).toBeTruthy();
     });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.ts
index 5fbbb9face937..0b3103c9f8de9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.ts
@@ -378,7 +378,7 @@ export class RgwUserFormComponent extends CdForm implements OnInit {
       // Add
       // Create an observable to add the capability when the form is submitted.
       this.submitObservables.push(this.rgwUserService.addCapability(uid, cap.type, cap.perm));
-      this.capabilities.push(cap);
+      this.capabilities = [...this.capabilities, cap]; // Notify Angular CD
     }
     // Mark the form as dirty to be able to submit it.
     this.userForm.markAsDirty();
@@ -398,12 +398,13 @@ export class RgwUserFormComponent extends CdForm implements OnInit {
     );
     // Remove the capability to update the UI.
     this.capabilities.splice(index, 1);
+    this.capabilities = [...this.capabilities]; // Notify Angular CD
     // Mark the form as dirty to be able to submit it.
     this.userForm.markAsDirty();
   }
 
-  hasAllCapabilities() {
-    return !_.difference(RgwUserCapabilities.getAll(), _.map(this.capabilities, 'type')).length;
+  hasAllCapabilities(capabilities: RgwUserCapability[]) {
+    return !_.difference(RgwUserCapabilities.getAll(), _.map(capabilities, 'type')).length;
   }
 
   /**
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
index 02f5392302877..00ef8bd49e512 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw.module.ts
@@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 
 import { NgbNavModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 
 import { ActionLabels, URLVerbs } from '~/app/shared/constants/app.constants';
 import { AuthGuardService } from '~/app/shared/services/auth-guard.service';
@@ -32,7 +33,8 @@ import { RgwUserSwiftKeyModalComponent } from './rgw-user-swift-key-modal/rgw-us
     PerformanceCounterModule,
     NgbNavModule,
     RouterModule,
-    NgbTooltipModule
+    NgbTooltipModule,
+    NgxPipeFunctionModule
   ],
   exports: [
     Rgw501Component,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts
index dc17a215bfcae..56b92e26377a5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/auth.module.ts
@@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
 
 import { NgbNavModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 
 import { ActionLabels, URLVerbs } from '~/app/shared/constants/app.constants';
 import { SharedModule } from '~/app/shared/shared.module';
@@ -26,6 +27,7 @@ import { UserTabsComponent } from './user-tabs/user-tabs.component';
     SharedModule,
     NgbNavModule,
     NgbPopoverModule,
+    NgxPipeFunctionModule,
     RouterModule
   ],
   declarations: [
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts
index b32ee065589b6..ede8f2368b70f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/datatable.module.ts
@@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router';
 
 import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 
 import { ComponentsModule } from '../components/components.module';
 import { PipesModule } from '../pipes/pipes.module';
@@ -16,6 +17,7 @@ import { TableComponent } from './table/table.component';
   imports: [
     CommonModule,
     NgxDatatableModule,
+    NgxPipeFunctionModule,
     FormsModule,
     NgbDropdownModule,
     NgbTooltipModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
index c8061057154e4..0f7c1a9cd995c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.html
@@ -1,14 +1,14 @@
 <div class="btn-group">
-  <ng-container *ngIf="getCurrentButton() as action">
+  <ng-container *ngIf="currentAction">
     <button type="button"
-            title="{{ useDisableDesc(action) }}"
+            title="{{ useDisableDesc(currentAction) }}"
             class="btn btn-{{btnColor}}"
-            [ngClass]="{'disabled': disableSelectionAction(action)}"
-            (click)="useClickAction(action)"
-            [routerLink]="useRouterLink(action)"
-            [preserveFragment]="action.preserveFragment ? '' : null">
-      <i [ngClass]="[action.icon]"></i>
-      <span>{{ action.name }}</span>
+            [ngClass]="{'disabled': disableSelectionAction(currentAction)}"
+            (click)="useClickAction(currentAction)"
+            [routerLink]="useRouterLink(currentAction)"
+            [preserveFragment]="currentAction.preserveFragment ? '' : null">
+      <i [ngClass]="[currentAction.icon]"></i>
+      <span>{{ currentAction.name }}</span>
     </button>
   </ng-container>
   <div class="btn-group"
@@ -17,7 +17,7 @@
        role="group"
        aria-label="Button group with nested dropdown">
     <button class="btn btn-{{btnColor}} dropdown-toggle-split"
-            *ngIf="showDropDownActions()"
+            *ngIf="dropDownActions.length > 1"
             ngbDropdownToggle>
       <ng-container *ngIf="dropDownOnly">{{ dropDownOnly }} </ng-container>
       <span *ngIf="!dropDownOnly"
@@ -27,7 +27,7 @@
          ngbDropdownMenu>
       <ng-container *ngFor="let action of dropDownActions">
         <button ngbDropdownItem
-                class="{{ toClassName(action['name']) }}"
+                class="{{ toClassName(action) }}"
                 title="{{ useDisableDesc(action) }}"
                 (click)="useClickAction(action)"
                 [routerLink]="useRouterLink(action)"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts
index d88a3be292c06..81cc1b9720793 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.spec.ts
@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
+
 import { ComponentsModule } from '~/app/shared/components/components.module';
 import { CdTableAction } from '~/app/shared/models/cd-table-action';
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
@@ -21,7 +23,7 @@ describe('TableActionsComponent', () => {
 
   configureTestBed({
     declarations: [TableActionsComponent],
-    imports: [ComponentsModule, RouterTestingModule]
+    imports: [ComponentsModule, NgxPipeFunctionModule, RouterTestingModule]
   });
 
   beforeEach(() => {
@@ -157,9 +159,9 @@ describe('TableActionsComponent', () => {
   });
 
   it('should convert any name to a proper CSS class', () => {
-    expect(component.toClassName('Create')).toBe('create');
-    expect(component.toClassName('Mark x down')).toBe('mark-x-down');
-    expect(component.toClassName('?Su*per!')).toBe('super');
+    expect(component.toClassName({ name: 'Create' } as CdTableAction)).toBe('create');
+    expect(component.toClassName({ name: 'Mark x down' } as CdTableAction)).toBe('mark-x-down');
+    expect(component.toClassName({ name: '?Su*per!' } as CdTableAction)).toBe('super');
   });
 
   describe('useDisableDesc', () => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts
index fc951233ac4c5..0497f930193a7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 
 import _ from 'lodash';
 
@@ -12,7 +12,7 @@ import { Permission } from '~/app/shared/models/permissions';
   templateUrl: './table-actions.component.html',
   styleUrls: ['./table-actions.component.scss']
 })
-export class TableActionsComponent implements OnInit {
+export class TableActionsComponent implements OnChanges, OnInit {
   @Input()
   permission: Permission;
   @Input()
@@ -28,6 +28,7 @@ export class TableActionsComponent implements OnInit {
   @Input()
   dropDownOnly?: string;
 
+  currentAction?: CdTableAction;
   // Array with all visible actions
   dropDownActions: CdTableAction[] = [];
 
@@ -35,11 +36,22 @@ export class TableActionsComponent implements OnInit {
 
   ngOnInit() {
     this.removeActionsWithNoPermissions();
+    this.onSelectionChange();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.selection) {
+      this.onSelectionChange();
+    }
+  }
+
+  onSelectionChange(): void {
     this.updateDropDownActions();
+    this.updateCurrentAction();
   }
 
-  toClassName(name: string): string {
-    return name
+  toClassName(action: CdTableAction): string {
+    return action.name
       .replace(/ /g, '-')
       .replace(/[^a-z-]/gi, '')
       .toLowerCase();
@@ -59,7 +71,7 @@ export class TableActionsComponent implements OnInit {
     );
   }
 
-  private updateDropDownActions() {
+  private updateDropDownActions(): void {
     this.dropDownActions = this.tableActions.filter((action) =>
       action.visible ? action.visible(this.selection) : action
     );
@@ -73,18 +85,17 @@ export class TableActionsComponent implements OnInit {
    * Default button conditions of actions:
    * - 'create' actions can be used with no or multiple selections
    * - 'update' and 'delete' actions can be used with one selection
-   *
-   * @returns {CdTableAction}
    */
-  getCurrentButton(): CdTableAction {
+  private updateCurrentAction(): void {
     if (this.dropDownOnly) {
-      return undefined;
+      this.currentAction = undefined;
+      return;
     }
     let buttonAction = this.dropDownActions.find((tableAction) => this.showableAction(tableAction));
     if (!buttonAction && this.dropDownActions.length > 0) {
       buttonAction = this.dropDownActions[0];
     }
-    return buttonAction;
+    this.currentAction = buttonAction;
   }
 
   /**
@@ -129,11 +140,6 @@ export class TableActionsComponent implements OnInit {
     );
   }
 
-  showDropDownActions() {
-    this.updateDropDownActions();
-    return this.dropDownActions.length > 1;
-  }
-
   useClickAction(action: CdTableAction) {
     /**
      * In order to show tooltips for deactivated menu items, the class
@@ -150,7 +156,6 @@ export class TableActionsComponent implements OnInit {
       const result = action.disable(this.selection);
       return _.isString(result) ? result : undefined;
     }
-
     return undefined;
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
index 7beb142ba4871..150d44241051e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
@@ -4,6 +4,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 
 import { ComponentsModule } from '~/app/shared/components/components.module';
 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
@@ -27,7 +28,8 @@ describe('TableKeyValueComponent', () => {
       RouterTestingModule,
       NgbDropdownModule,
       PipesModule,
-      NgbTooltipModule
+      NgbTooltipModule,
+      NgxPipeFunctionModule
     ]
   });
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 0d5460a989e80..71ba156cf3f60 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -269,7 +269,7 @@
 
 <ng-template #classAddingTpl
              let-value="value">
-  <span class="{{useCustomClass(value)}}">{{ value }}</span>
+  <span class="{{ value | pipeFunction:useCustomClass:this }}">{{ value }}</span>
 </ng-template>
 
 <ng-template #badgeTpl
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
index f3d4f4e36c5c6..a2a329ab64564 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
@@ -7,6 +7,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import _ from 'lodash';
+import { NgxPipeFunctionModule } from 'ngx-pipe-function';
 
 import { ComponentsModule } from '~/app/shared/components/components.module';
 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
@@ -42,6 +43,7 @@ describe('TableComponent', () => {
     imports: [
       BrowserAnimationsModule,
       NgxDatatableModule,
+      NgxPipeFunctionModule,
       FormsModule,
       ComponentsModule,
       RouterTestingModule,
diff --git a/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts b/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts
index 9e8442da1858f..28f88e1fac86c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/testing/unit-test-helper.ts
@@ -45,9 +45,18 @@ export function configureTestBed(configuration: any, entryComponents?: any) {
 export class PermissionHelper {
   tac: TableActionsComponent;
   permission: Permission;
+  selection: { single: object; multiple: object[] };
 
-  constructor(permission: Permission) {
+  /**
+   * @param permission The permissions used by this test.
+   * @param selection The selection used by this test. Configure this if
+   *   the table actions require a more complex selection object to perform
+   *   a correct test run.
+   *   Defaults to `{ single: {}, multiple: [{}, {}] }`.
+   */
+  constructor(permission: Permission, selection?: { single: object; multiple: object[] }) {
     this.permission = permission;
+    this.selection = _.defaultTo(selection, { single: {}, multiple: [{}, {}] });
   }
 
   setPermissionsAndGetActions(tableActions: CdTableAction[]): any {
@@ -91,11 +100,13 @@ export class PermissionHelper {
   testScenarios() {
     const result: any = {};
     // 'multiple selections'
-    result.multiple = this.testScenario([{}, {}]);
+    result.multiple = this.testScenario(this.selection.multiple);
     // 'select executing item'
-    result.executing = this.testScenario([{ cdExecuting: 'someAction' }]);
+    result.executing = this.testScenario([
+      _.merge({ cdExecuting: 'someAction' }, this.selection.single)
+    ]);
     // 'select non-executing item'
-    result.single = this.testScenario([{}]);
+    result.single = this.testScenario([this.selection.single]);
     // 'no selection'
     result.no = this.testScenario([]);
 
@@ -104,12 +115,13 @@ export class PermissionHelper {
 
   private testScenario(selection: object[]) {
     this.setSelection(selection);
-    const btn = this.tac.getCurrentButton();
-    return btn ? btn.name : '';
+    const action: CdTableAction = this.tac.currentAction;
+    return action ? action.name : '';
   }
 
   setSelection(selection: object[]) {
     this.tac.selection.selected = selection;
+    this.tac.onSelectionChange();
   }
 }
 
@@ -638,7 +650,7 @@ export class TableActionHelper {
     const tableActionElement = fixture.debugElement.query(By.directive(TableActionsComponent));
     const toClassName = TestBed.inject(TableActionsComponent).toClassName;
     const getActionElement = (action: CdTableAction) =>
-      tableActionElement.query(By.css(`[ngbDropdownItem].${toClassName(action.name)}`));
+      tableActionElement.query(By.css(`[ngbDropdownItem].${toClassName(action)}`));
 
     const actions = {};
     tableActions.forEach((action) => {
-- 
2.39.5