From 980d7e951cb8879a87eea397bf4d77416c3d95b7 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Stephan=20M=C3=BCller?= Date: Tue, 21 Aug 2018 16:06:02 +0200 Subject: [PATCH] mgr/dashboard: Use table actions component for RGW buckets MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Signed-off-by: Stephan Müller --- .../rgw-bucket-list.component.html | 77 +-------- .../rgw-bucket-list.component.spec.ts | 163 +++++++++++++++++- .../rgw-bucket-list.component.ts | 23 +++ 3 files changed, 189 insertions(+), 74 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.html index b0ab16540ce..acb86c72a3d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.html @@ -7,78 +7,11 @@ (updateSelection)="updateSelection($event)" identifier="bucket" (fetchData)="getBucketList($event)"> -
-
- - - - - -
-
+ + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.spec.ts index 28e937c9073..7becc3f8851 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.spec.ts @@ -1,11 +1,13 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; import { RouterTestingModule } from '@angular/router/testing'; import { ModalModule, TabsModule } from 'ngx-bootstrap'; -import { configureTestBed } from '../../../../testing/unit-test-helper'; +import { configureTestBed, PermissionHelper } from '../../../../testing/unit-test-helper'; import { RgwBucketService } from '../../../shared/api/rgw-bucket.service'; +import { TableActionsComponent } from '../../../shared/datatable/table-actions/table-actions.component'; import { SharedModule } from '../../../shared/shared.module'; import { RgwBucketDetailsComponent } from '../rgw-bucket-details/rgw-bucket-details.component'; import { RgwBucketListComponent } from './rgw-bucket-list.component'; @@ -29,10 +31,167 @@ describe('RgwBucketListComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(RgwBucketListComponent); 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-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 ea848143a2a..f43e05293ba 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 @@ -6,6 +6,7 @@ import { forkJoin as observableForkJoin, Observable, Subscriber } from 'rxjs'; import { RgwBucketService } from '../../../shared/api/rgw-bucket.service'; import { DeletionModalComponent } from '../../../shared/components/deletion-modal/deletion-modal.component'; import { TableComponent } from '../../../shared/datatable/table/table.component'; +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'; @@ -22,6 +23,7 @@ export class RgwBucketListComponent { table: TableComponent; permission: Permission; + tableActions: CdTableAction[]; columns: CdTableColumn[] = []; buckets: object[] = []; selection: CdTableSelection = new CdTableSelection(); @@ -44,6 +46,27 @@ export class RgwBucketListComponent { flexGrow: 1 } ]; + const getBucketUri = () => + this.selection.first() && `${encodeURI(this.selection.first().bucket)}`; + const addAction: CdTableAction = { + permission: 'create', + icon: 'fa-plus', + routerLink: () => '/rgw/bucket/add', + name: 'Add' + }; + const editAction: CdTableAction = { + permission: 'update', + icon: 'fa-pencil', + routerLink: () => `/rgw/bucket/edit/${getBucketUri()}`, + name: 'Edit' + }; + const deleteAction: CdTableAction = { + permission: 'delete', + icon: 'fa-trash-o', + click: () => this.deleteAction(), + name: 'Delete' + }; + this.tableActions = [addAction, editAction, deleteAction]; } getBucketList(context: CdTableFetchDataContext) { -- 2.39.5