From: Sarthak0702 Date: Wed, 9 Mar 2022 12:10:20 +0000 (+0530) Subject: mgr/dashboard: unselect rows in datatables X-Git-Tag: v16.2.11~86^2~3^2 X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=3bdb929bab8f3eda32dcf9e46bb54a221ea54d3b;p=ceph.git mgr/dashboard: unselect rows in datatables Fixes: https://tracker.ceph.com/issues/53244 Signed-off-by: Sarthak0702 (cherry picked from commit b79e2a6c6a9368a4fc167b05970db463cd60edab) --- diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/block/mirroring.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/block/mirroring.po.ts index 8450763d301a5..e24a3ebc037ab 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/integration/block/mirroring.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/block/mirroring.po.ts @@ -13,7 +13,7 @@ export class MirroringPageHelper extends PageHelper { */ @PageHelper.restrictTo(pages.index.url) editMirror(name: string, option: string) { - // Clicks the pool in the table + // Select the pool in the table this.getFirstTableCell(name).click(); // Clicks the Edit Mode button @@ -28,5 +28,8 @@ export class MirroringPageHelper extends PageHelper { cy.contains('.modal-dialog', 'Edit pool mirror mode').should('not.exist'); const val = option.toLowerCase(); // used since entries in table are lower case this.getFirstTableCell(val).should('be.visible'); + + // unselect the pool in the table + this.getFirstTableCell(name).click(); } } diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/hosts.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/hosts.po.ts index ffac83ba67bfc..2e14c454f37b1 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/hosts.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/hosts.po.ts @@ -127,8 +127,8 @@ export class HostsPageHelper extends PageHelper { @PageHelper.restrictTo(pages.index.url) maintenance(hostname: string, exit = false, force = false) { this.clearTableSearchInput(); + this.getTableCell(this.columnIndex.hostname, hostname).click(); if (force) { - this.getTableCell(this.columnIndex.hostname, hostname).click(); this.clickActionButton('enter-maintenance'); cy.get('cd-modal').within(() => { @@ -145,7 +145,6 @@ export class HostsPageHelper extends PageHelper { } if (exit) { this.getTableCell(this.columnIndex.hostname, hostname) - .click() .parent() .find(`datatable-body-cell:nth-child(${this.columnIndex.status})`) .then(($ele) => { @@ -163,7 +162,6 @@ export class HostsPageHelper extends PageHelper { expect(status).to.not.include('maintenance'); }); } else { - this.getTableCell(this.columnIndex.hostname, hostname).click(); this.clickActionButton('enter-maintenance'); this.getTableCell(this.columnIndex.hostname, hostname) @@ -187,5 +185,9 @@ export class HostsPageHelper extends PageHelper { cy.wait(20000); this.expectTableCount('total', 0); }); + + // unselect it to avoid colliding with any other selection + // in different steps + this.getTableCell(this.columnIndex.hostname, hostname).click(); } } diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/services.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/services.po.ts index c32a9f21d439c..29156b2d582b6 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/services.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/services.po.ts @@ -179,6 +179,10 @@ export class ServicesPageHelper extends PageHelper { cy.get('cd-service-daemon-list').within(() => { this.getTableRow(daemon).click(); this.clickActionButton(action); + + // unselect it to avoid colliding with any other selection + // in different steps + this.getTableRow(daemon).click(); }); } } 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 98ed0bf63a164..f0f649780afed 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 @@ -568,15 +568,33 @@ describe('TableComponent', () => { expect(executingElement.nativeElement.textContent.trim()).toBe(`(${state})`); }; - it.only('should display executing template', () => { + it('should display executing template', () => { testExecutingTemplate(); }); - it.only('should display executing template with custom classes', () => { + it('should display executing template with custom classes', () => { testExecutingTemplate({ valueClass: 'a b', executingClass: 'c d' }); }); }); + describe('test unselect functionality of rows', () => { + beforeEach(() => { + component.autoReload = -1; + component.selectionType = 'single'; + fixture.detectChanges(); + }); + + it('should unselect row on clicking on it again', () => { + const rowCellDebugElement = fixture.debugElement.query(By.css('datatable-body-cell')); + + rowCellDebugElement.triggerEventHandler('click', null); + expect(component.selection.selected.length).toEqual(1); + + rowCellDebugElement.triggerEventHandler('click', null); + expect(component.selection.selected.length).toEqual(0); + }); + }); + describe('reload data', () => { beforeEach(() => { component.ngOnInit(); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts index a2b7f7ec3dec5..2cc94be8177be 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts @@ -308,6 +308,10 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O } else { this.useData(); } + + if (this.selectionType === 'single') { + this.table.selectCheck = this.singleSelectCheck.bind(this); + } } initUserConfig() { @@ -711,6 +715,10 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O this.updateSelection.emit(_.clone(this.selection)); } + private singleSelectCheck(row: any) { + return this.selection.selected.indexOf(row) === -1; + } + toggleColumn(column: CdTableColumn) { const prop: TableColumnProp = column.prop; const hide = !column.isHidden;