From: Nizamudeen A Date: Tue, 29 Sep 2020 19:43:48 +0000 (+0530) Subject: mgr/dashboard: Prevent table items from getting selected while expanding X-Git-Tag: v17.0.0~755^2 X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=baf1705b541db00540165de4fd77792594a138b6;p=ceph-ci.git mgr/dashboard: Prevent table items from getting selected while expanding While clicking on the expand button inside a table, the entire row is getting selected. This commit prevent that from happening. Fixes: https://tracker.ceph.com/issues/47376 Signed-off-by: Nizamudeen A --- diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.e2e-spec.ts index 0d18470e76c..6c012166ebb 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.e2e-spec.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/configuration.e2e-spec.ts @@ -19,10 +19,6 @@ describe('Configuration page', () => { configuration.getExpandCollapseElement().click(); }); - it('should verify that selected footer increases when an entry is clicked', () => { - configuration.getTableCount('selected').should('eq', 1); - }); - it('should check that details table opens (w/o tab header)', () => { configuration.getStatusTables().should('be.visible'); configuration.getTabs().should('not.exist'); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/osds.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/osds.e2e-spec.ts index ad3e5806ec5..647d4aadb47 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/osds.e2e-spec.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/cluster/osds.e2e-spec.ts @@ -37,10 +37,6 @@ describe('OSDs page', () => { osds.getExpandCollapseElement().click(); }); - it('should verify that selected footer increases', () => { - osds.getTableCount('selected').should('equal', 1); - }); - it('should show the correct text for the tab labels', () => { cy.get('#tabset-osd-details > li > a').then(($tabs) => { const tabHeadings = $tabs.map((_i, e) => e.textContent).get(); diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/rgw/buckets.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/rgw/buckets.po.ts index 0cb1f76fef1..7d0b46c256e 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/integration/rgw/buckets.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/rgw/buckets.po.ts @@ -68,7 +68,7 @@ export class BucketsPageHelper extends PageHelper { cy.get('@versioningValueCell').should('have.text', this.versioningStateEnabled); // Disable versioning: - this.navigateEdit(name, false); + this.navigateEdit(name); cy.get('label[for=versioning]').click(); cy.get('input[id=versioning]').should('not.be.checked'); 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 3525877b922..85473621490 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 @@ -305,6 +305,6 @@ class="expand-collapse-icon tc_expand-collapse" title="Expand/Collapse Row" i18n-title - (click)="toggleExpandRow(row, isExpanded)"> + (click)="toggleExpandRow(row, isExpanded, $event)"> 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 774c754b3a0..7c4623fdc67 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 @@ -686,7 +686,7 @@ describe('TableComponent', () => { }); it('should open the table details and close other expanded rows', () => { - component.toggleExpandRow(component.expanded, false); + component.toggleExpandRow(component.expanded, false, new Event('click')); expect(component.expanded).toEqual({ a: 1, b: 10, c: true }); expect(component.table.rowDetail.collapseAllRows).toHaveBeenCalled(); expect(component.setExpandedRow.emit).toHaveBeenCalledWith(component.expanded); @@ -694,10 +694,25 @@ describe('TableComponent', () => { }); it('should close the current table details expansion', () => { - component.toggleExpandRow(component.expanded, true); + component.toggleExpandRow(component.expanded, true, new Event('click')); expect(component.expanded).toBeUndefined(); expect(component.setExpandedRow.emit).toHaveBeenCalledWith(undefined); expect(component.table.rowDetail.toggleExpandRow).toHaveBeenCalled(); }); + + it('should not select the row when the row is expanded', () => { + expect(component.selection.selected).toEqual([]); + component.toggleExpandRow(component.data[1], false, new Event('click')); + expect(component.selection.selected).toEqual([]); + }); + + it('should not change selection when expanding different row', () => { + expect(component.selection.selected).toEqual([]); + expect(component.expanded).toEqual(component.data[1]); + component.selection.selected = [component.data[2]]; + component.toggleExpandRow(component.data[3], false, new Event('click')); + expect(component.selection.selected).toEqual([component.data[2]]); + expect(component.expanded).toEqual(component.data[3]); + }); }); }); 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 40b76d40a92..664d93e1523 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 @@ -830,7 +830,8 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O }; } - toggleExpandRow(row: any, isExpanded: boolean) { + toggleExpandRow(row: any, isExpanded: boolean, event: any) { + event.stopPropagation(); if (!isExpanded) { // If current row isn't expanded, collapse others this.expanded = row;