mgr/dashboard: unselect rows in datatables

Fixes: https://tracker.ceph.com/issues/53244
Signed-off-by: Sarthak0702 <sarthak.0702@gmail.com>
(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 8450763d301a50f320a183ddbf5036c6d7bc1d71..e24a3ebc037abbc8b1b2fd619fe89e57e86d3f54 100644 (file)
--- 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 ffac83ba67bfc5553db1a3db35f9410001b2f44d..2e14c454f37b12937f676f59b80c3c572166f70e 100644 (file)
--- 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 c32a9f21d439c6d50fbc83633cf3677bdc37c23b..29156b2d582b6f582d45e811ef723815c64abaed 100644 (file)
--- 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 98ed0bf63a164652309f770e289fc3e22344a2f1..f0f649780afed5270d91d24d2e183ab16b58937c 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
@@ -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 a2b7f7ec3dec5253979f7c0aac702eba87b73936..2cc94be8177be6621eaedc33cec7c0a4c510b5dc 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
@@ -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;