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 <nia@redhat.com>

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 0d18470e76c818ed129fac900bd87291068f936c..6c012166ebb1d48d9cbd7fa9470d86a4fd57e2b6 100644 (file)
--- 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 ad3e5806ec5e140bb3ce20d23e8c52c1a2e824b6..647d4aadb472ef445c59fb146760a957b454bd69 100644 (file)
--- 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 0cb1f76fef1855ffe496d545620bc25433e55fd5..7d0b46c256e721cd222e8127442f7664d330a3c3 100644 (file)
--- 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 3525877b922c29d8ffd01dd242be9b3edaaae3b9..85473621490a3129f73ecc30e7b2acec3472f56e 100644 (file)
--- 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)">
   </a>
 </ng-template>

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 774c754b3a0cc4fdd350037b7040c259537afe54..7c4623fdc67ea3a2741bcff86fd29731d755d80a 100644 (file)
--- 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 40b76d40a922998fe6b5ac7141599e8d21ec0076..664d93e1523eab7d4112e34b14708a89535e244f 100644 (file)
--- 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;