mgr/dashboard: More configs for table `updateSelectionOnRefresh`

Fixes: https://tracker.ceph.com/issues/35904
Signed-off-by: Ricardo Marques <rimarques@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
index 1381ad56033dc163d875749de7fa49bcf907edcf..056b7a39a135b5d413acde99f444853464fade35 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
@@ -3,7 +3,7 @@
           [columns]="columns"
           selectionType="single"
           (updateSelection)="updateSelection($event)"
-          [updateSelectionOnRefresh]="false">
+          [updateSelectionOnRefresh]="'never'">
   <div class="table-actions btn-toolbar"
        *ngIf="permission.update">
     <div class="btn-group"

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 209bd12300bee7f8681ba42c4d63ed4bcbcd98c1..ce40b03b3561679598e8989c0fd53e3ebc3eab9a 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
@@ -3,6 +3,7 @@ import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import * as _ from 'lodash';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { ComponentsModule } from '../../components/components.module';
@@ -287,6 +288,42 @@ describe('TableComponent', () => {
       component.reloadData();
     });
 
+    it('should update selection on refresh - "onChange"', () => {
+      spyOn(component, 'onSelect').and.callThrough();
+      component.data = createFakeData(10);
+      component.selection.selected = [_.clone(component.data[1])];
+      component.updateSelectionOnRefresh = 'onChange';
+      component.updateSelected();
+      expect(component.onSelect).toHaveBeenCalledTimes(0);
+      component.data[1].d = !component.data[1].d;
+      component.updateSelected();
+      expect(component.onSelect).toHaveBeenCalled();
+    });
+
+    it('should update selection on refresh - "always"', () => {
+      spyOn(component, 'onSelect').and.callThrough();
+      component.data = createFakeData(10);
+      component.selection.selected = [_.clone(component.data[1])];
+      component.updateSelectionOnRefresh = 'always';
+      component.updateSelected();
+      expect(component.onSelect).toHaveBeenCalled();
+      component.data[1].d = !component.data[1].d;
+      component.updateSelected();
+      expect(component.onSelect).toHaveBeenCalled();
+    });
+
+    it('should update selection on refresh - "never"', () => {
+      spyOn(component, 'onSelect').and.callThrough();
+      component.data = createFakeData(10);
+      component.selection.selected = [_.clone(component.data[1])];
+      component.updateSelectionOnRefresh = 'never';
+      component.updateSelected();
+      expect(component.onSelect).toHaveBeenCalledTimes(0);
+      component.data[1].d = !component.data[1].d;
+      component.updateSelected();
+      expect(component.onSelect).toHaveBeenCalledTimes(0);
+    });
+
     afterEach(() => {
       clearLocalStorage();
     });

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 fddc65e6086e6e28203062c5257dd94f4efd2784..bf577adf1545fb10203a2ca08c0b94ba75089d5c 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
@@ -93,9 +93,9 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
   // e.g. 'single' or 'multi'.
   @Input()
   selectionType: string = undefined;
-  // If `true` selected item details will be updated on table refresh
+  // By default selected item details will be updated on table refresh, if data has changed
   @Input()
-  updateSelectionOnRefresh = true;
+  updateSelectionOnRefresh: 'always' | 'never' | 'onChange' = 'onChange';
 
   @Input()
   autoSave = true;
@@ -367,9 +367,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
       this.updateFilter(true);
     }
     this.reset();
-    if (this.updateSelectionOnRefresh) {
-      this.updateSelected();
-    }
+    this.updateSelected();
   }
 
   /**
@@ -388,6 +386,9 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
    * or some selected items may have been removed.
    */
   updateSelected() {
+    if (this.updateSelectionOnRefresh === 'never') {
+      return;
+    }
     const newSelected = [];
     this.selection.selected.forEach((selectedItem) => {
       for (const row of this.data) {
@@ -396,6 +397,12 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
         }
       }
     });
+    if (
+      this.updateSelectionOnRefresh === 'onChange' &&
+      _.isEqual(this.selection.selected, newSelected)
+    ) {
+      return;
+    }
     this.selection.selected = newSelected;
     this.onSelect();
   }