mgr/dashboard: Use table actions component for RGW users

Signed-off-by: Stephan Müller <smueller@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.html
index 898799f3007b14e2158747e9bf180363bef48fd7..b74fe704a7d8c92e02f1a8a291b80cf7232e87c3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.html
@@ -7,77 +7,11 @@
           (updateSelection)="updateSelection($event)"
           identifier="user_id"
           (fetchData)="getUserList($event)">
-  <div class="table-actions">
-    <div class="btn-group" dropdown>
-      <button type="button"
-              class="btn btn-sm btn-primary"
-              *ngIf="permission.create && (
-                       permission.update && permission.delete && !selection.hasSelection ||
-                       !permission.update && !permission.delete ||
-                       !permission.update && permission.delete && !selection.hasMultiSelection ||
-                       permission.update && !selection.hasSingleSelection && !permission.delete)"
-              routerLink="/rgw/user/add">
-        <i class="fa fa-fw fa-plus"></i>
-        <ng-container i18n>Add</ng-container>
-      </button>
-      <button type="button"
-              class="btn btn-sm btn-primary"
-              [ngClass]="{'disabled': !selection.hasSelection}"
-              *ngIf="permission.update && (!permission.create && !selection.hasMultiSelection || selection.hasSingleSelection)"
-              routerLink="/rgw/user/edit/{{ selection.first()?.user_id }}">
-        <i class="fa fa-fw fa-pencil"></i>
-        <ng-container i18n>Edit</ng-container>
-      </button>
-      <button type="button"
-              class="btn btn-sm btn-primary"
-              [ngClass]="{'disabled': !selection.hasSelection}"
-              *ngIf="permission.delete && (!permission.update && !permission.create || selection.hasMultiSelection)"
-              (click)="deleteAction()">
-        <i class="fa fa-fw fa-trash-o"></i>
-        <ng-container i18n>Delete</ng-container>
-      </button>
-      <button type="button"
-              class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split"
-              *ngIf="((permission.create?1:0) + (permission.update?1:0) + (permission.delete?1:0)) > 1"
-              dropdownToggle>
-        <span class="caret"></span>
-        <span class="sr-only"></span>
-      </button>
-      <ul class="dropdown-menu"
-          *dropdownMenu
-          role="menu">
-        <li role="menuitem"
-            *ngIf="permission.create">
-          <a class="dropdown-item"
-             routerLink="/rgw/user/add"
-             i18n>
-            <i class="fa fa-fw fa-plus"></i>
-            Add
-          </a>
-        </li>
-        <li role="menuitem"
-            *ngIf="permission.update"
-            [ngClass]="{'disabled': !selection.hasSingleSelection}">
-          <a class="dropdown-item"
-             routerLink="/rgw/user/edit/{{ selection.first()?.user_id }}"
-             i18n>
-            <i class="fa fa-fw fa-pencil"></i>
-            Edit
-          </a>
-        </li>
-        <li role="menuitem"
-            *ngIf="permission.delete"
-            [ngClass]="{'disabled': !selection.hasSelection}">
-          <a class="dropdown-item"
-             (click)="deleteAction()"
-             i18n>
-            <i class="fa fa-fw fa-trash-o"></i>
-            Delete
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
+  <cd-table-actions class="table-actions"
+                    [permission]="permission"
+                    [selection]="selection"
+                    [tableActions]="tableActions">
+  </cd-table-actions>
   <cd-rgw-user-details cdTableDetail
                        [selection]="selection">
   </cd-rgw-user-details>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.spec.ts
index dba2dcc695040d3097cae99cfbe0029493e2756a..6ba841fe47127e8bce863576ab69a42f36ceaf9e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-list/rgw-user-list.component.spec.ts
@@ -1,12 +1,14 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { ModalModule } from 'ngx-bootstrap';
 
-import { configureTestBed } from '../../../../testing/unit-test-helper';
+import { configureTestBed, PermissionHelper } from '../../../../testing/unit-test-helper';
 import { RgwUserService } from '../../../shared/api/rgw-user.service';
+import { TableActionsComponent } from '../../../shared/datatable/table-actions/table-actions.component';
 import { SharedModule } from '../../../shared/shared.module';
 import { RgwUserListComponent } from './rgw-user-list.component';
 
@@ -24,10 +26,167 @@ describe('RgwUserListComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(RgwUserListComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
+
+  describe('show action buttons and drop down actions depending on permissions', () => {
+    let tableActions: TableActionsComponent;
+    let scenario: { fn; empty; single };
+    let permissionHelper: PermissionHelper;
+
+    const getTableActionComponent = (): TableActionsComponent => {
+      fixture.detectChanges();
+      return fixture.debugElement.query(By.directive(TableActionsComponent)).componentInstance;
+    };
+
+    beforeEach(() => {
+      permissionHelper = new PermissionHelper(component.permission, () =>
+        getTableActionComponent()
+      );
+      scenario = {
+        fn: () => tableActions.getCurrentButton().name,
+        single: 'Edit',
+        empty: 'Add'
+      };
+    });
+
+    describe('with all', () => {
+      beforeEach(() => {
+        tableActions = permissionHelper.setPermissionsAndGetActions(1, 1, 1);
+      });
+
+      it(`shows 'Edit' for single selection else 'Add' as main action`, () =>
+        permissionHelper.testScenarios(scenario));
+
+      it('shows all actions', () => {
+        expect(tableActions.tableActions.length).toBe(3);
+        expect(tableActions.tableActions).toEqual(component.tableActions);
+      });
+    });
+
+    describe('with read, create and update', () => {
+      beforeEach(() => {
+        tableActions = permissionHelper.setPermissionsAndGetActions(1, 1, 0);
+      });
+
+      it(`shows 'Edit' for single selection else 'Add' as main action`, () =>
+        permissionHelper.testScenarios(scenario));
+
+      it(`shows 'Add' and 'Edit' action`, () => {
+        expect(tableActions.tableActions.length).toBe(2);
+        component.tableActions.pop();
+        expect(tableActions.tableActions).toEqual(component.tableActions);
+      });
+    });
+
+    describe('with read, create and delete', () => {
+      beforeEach(() => {
+        tableActions = permissionHelper.setPermissionsAndGetActions(1, 0, 1);
+      });
+
+      it(`shows 'Delete' for single selection else 'Add' as main action`, () => {
+        scenario.single = 'Delete';
+        permissionHelper.testScenarios(scenario);
+      });
+
+      it(`shows 'Add' and 'Delete' action`, () => {
+        expect(tableActions.tableActions.length).toBe(2);
+        expect(tableActions.tableActions).toEqual([
+          component.tableActions[0],
+          component.tableActions[2]
+        ]);
+      });
+    });
+
+    describe('with read, edit and delete', () => {
+      beforeEach(() => {
+        tableActions = permissionHelper.setPermissionsAndGetActions(0, 1, 1);
+      });
+
+      it(`shows always 'Edit' as main action`, () => {
+        scenario.empty = 'Edit';
+        permissionHelper.testScenarios(scenario);
+      });
+
+      it(`shows 'Edit' and 'Delete' action`, () => {
+        expect(tableActions.tableActions.length).toBe(2);
+        expect(tableActions.tableActions).toEqual([
+          component.tableActions[1],
+          component.tableActions[2]
+        ]);
+      });
+    });
+
+    describe('with read and create', () => {
+      beforeEach(() => {
+        tableActions = permissionHelper.setPermissionsAndGetActions(1, 0, 0);
+      });
+
+      it(`shows always 'Add' as main action`, () => {
+        scenario.single = 'Add';
+        permissionHelper.testScenarios(scenario);
+      });
+
+      it(`shows only 'Add' action`, () => {
+        expect(tableActions.tableActions.length).toBe(1);
+        expect(tableActions.tableActions).toEqual([component.tableActions[0]]);
+      });
+    });
+
+    describe('with read and update', () => {
+      beforeEach(() => {
+        tableActions = permissionHelper.setPermissionsAndGetActions(0, 1, 0);
+      });
+
+      it(`shows always 'Edit' as main action`, () => {
+        scenario.empty = 'Edit';
+        permissionHelper.testScenarios(scenario);
+      });
+
+      it(`shows only 'Edit' action`, () => {
+        expect(tableActions.tableActions.length).toBe(1);
+        expect(tableActions.tableActions).toEqual([component.tableActions[1]]);
+      });
+    });
+
+    describe('with read and delete', () => {
+      beforeEach(() => {
+        tableActions = permissionHelper.setPermissionsAndGetActions(0, 0, 1);
+      });
+
+      it(`shows always 'Delete' as main action`, () => {
+        scenario.single = 'Delete';
+        scenario.empty = 'Delete';
+        permissionHelper.testScenarios(scenario);
+      });
+
+      it(`shows only 'Delete' action`, () => {
+        expect(tableActions.tableActions.length).toBe(1);
+        expect(tableActions.tableActions).toEqual([component.tableActions[2]]);
+      });
+    });
+
+    describe('with only read', () => {
+      beforeEach(() => {
+        tableActions = permissionHelper.setPermissionsAndGetActions(0, 0, 0);
+      });
+
+      it('shows no main action', () => {
+        permissionHelper.testScenarios({
+          fn: () => tableActions.getCurrentButton(),
+          single: undefined,
+          empty: undefined
+        });
+      });
+
+      it('shows no actions', () => {
+        expect(tableActions.tableActions.length).toBe(0);
+        expect(tableActions.tableActions).toEqual([]);
+      });
+    });
+  });
 });

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 b5c8a3d79728b345b175d21ba9fa8ec9dd0c609f..cc9edcc2693b427aab5cde3ddf92bf1dee4095f0 100644 (file)
--- 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
@@ -7,6 +7,7 @@ import { RgwUserService } from '../../../shared/api/rgw-user.service';
 import { DeletionModalComponent } from '../../../shared/components/deletion-modal/deletion-modal.component';
 import { TableComponent } from '../../../shared/datatable/table/table.component';
 import { CellTemplate } from '../../../shared/enum/cell-template.enum';
+import { CdTableAction } from '../../../shared/models/cd-table-action';
 import { CdTableColumn } from '../../../shared/models/cd-table-column';
 import { CdTableFetchDataContext } from '../../../shared/models/cd-table-fetch-data-context';
 import { CdTableSelection } from '../../../shared/models/cd-table-selection';
@@ -23,6 +24,7 @@ export class RgwUserListComponent {
   table: TableComponent;
 
   permission: Permission;
+  tableActions: CdTableAction[];
   columns: CdTableColumn[] = [];
   users: object[] = [];
   selection: CdTableSelection = new CdTableSelection();
@@ -61,6 +63,26 @@ export class RgwUserListComponent {
         flexGrow: 1
       }
     ];
+    const getUserUri = () => this.selection.first() && this.selection.first().user_id;
+    const addAction: CdTableAction = {
+      permission: 'create',
+      icon: 'fa-plus',
+      routerLink: () => '/rgw/user/add',
+      name: 'Add'
+    };
+    const editAction: CdTableAction = {
+      permission: 'update',
+      icon: 'fa-pencil',
+      routerLink: () => `/rgw/user/edit/${getUserUri()}`,
+      name: 'Edit'
+    };
+    const deleteAction: CdTableAction = {
+      permission: 'delete',
+      icon: 'fa-trash-o',
+      click: () => this.deleteAction(),
+      name: 'Delete'
+    };
+    this.tableActions = [addAction, editAction, deleteAction];
   }
 
   getUserList(context: CdTableFetchDataContext) {