mgr/dashboard: fix duplicated editing of cell

form control is applied with unique identifier. In the table where the
issue is present, let's support adding the `unique_identifier`.

Fixes: https://tracker.ceph.com/issues/73250
Signed-off-by: Nizamudeen A <nia@redhat.com>

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 75a47529b8c8e8a11596e63d5480646db14573c5..849f02be658ce0db43edddab63300a95257832b2 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
@@ -410,26 +410,26 @@
              let-value="data.value"
              let-row="data.row"
              let-column="data.column">
-  @if (isCellEditing(row?.id, column?.prop)) {
+  @if (isCellEditing(row?.[identifier], column?.prop)) {
   <form [formGroup]="formGroup"
         #formDir="ngForm">
     <div cdsRow>
       <div cdsCol>
-        <cds-text-label [invalid]="formGroup.controls[row?.id + '-' + column?.prop]?.invalid && formGroup.controls[row?.id + '-' + column?.prop]?.dirty"
+        <cds-text-label [invalid]="formGroup.controls[row?.[identifier] + '-' + column?.prop]?.invalid && formGroup.controls[row?.[identifier] + '-' + column?.prop]?.dirty"
                         [invalidText]="errorTpl">
           <input type="text"
                  cdsText
                  size="sm"
-                 [id]="row?.id + '-' + column?.prop"
-                 [formControlName]="row?.id + '-' + column?.prop"
-                 (input)="valueChange(row?.id, column?.prop, $event.target.value)"
-                 [invalid]="formGroup.controls[row?.id + '-' + column?.prop]?.invalid && formGroup.controls[row?.id + '-' + column?.prop]?.dirty">
+                 [id]="row?.[identifier] + '-' + column?.prop"
+                 [formControlName]="row?.[identifier] + '-' + column?.prop"
+                 (input)="valueChange(row?.[identifier], column?.prop, $event.target.value)"
+                 [invalid]="formGroup.controls[row?.[identifier] + '-' + column?.prop]?.invalid && formGroup.controls[row?.[identifier] + '-' + column?.prop]?.dirty">
         </cds-text-label>
         <ng-template #errorTpl>
-          <span *ngIf="formGroup?.showError(row?.id + '-' + column?.prop, formDir, 'required')">
+          <span *ngIf="formGroup?.showError(row?.[identifier] + '-' + column?.prop, formDir, 'required')">
             <ng-container i18n>This field is required.</ng-container>
           </span>
-          <span *ngIf="column?.customTemplateConfig?.formGroup?.showError(row?.id + '-' + column?.prop, formDir, 'pattern')">
+          <span *ngIf="column?.customTemplateConfig?.formGroup?.showError(row?.[identifier] + '-' + column?.prop, formDir, 'pattern')">
             <ng-container i18n>The field format is invalid.</ng-container>
           </span>
         </ng-template>
@@ -441,7 +441,7 @@
                 size="sm"
                 id="cell-inline-save-btn"
                 type="button"
-                (click)="saveCellItem(row?.id, column?.prop)">
+                (click)="saveCellItem(row, column?.prop)">
           <cd-icon type="check"></cd-icon>
         </button>
       </div>
@@ -459,7 +459,7 @@
       <button cdsButton="ghost"
               size="sm"
               id="cell-inline-edit-btn"
-              (click)="editCellItem(row?.id, column, value)">
+              (click)="editCellItem(row[identifier], column, value)">
         <cd-icon type="edit"></cd-icon>
       </button>
     </div>

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 4eb46549512d4dcf7f1d1c609355e7205b30551b..35afd964ae3cc85edcfd734f7f1ef2bdf947fe30 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
@@ -608,6 +608,7 @@ describe('TableComponent', () => {
         component.editCellItem('id-0', component.localColumns[0], '0');
       }
 
+      component.identifier = 'id';
       component.ngOnInit();
       component.ngAfterViewInit();
       fixture.detectChanges();

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 3058a3bc2d361dad0985e8c1e84356b78576419f..081918b9235d2d6d4a87e7428efb1a802f6b0e30 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
@@ -253,7 +253,10 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
   @Output() columnFiltersChanged = new EventEmitter<CdTableColumnFiltersChange>();
 
   @Output()
-  editSubmitAction = new EventEmitter<{ [field: string]: string }>();
+  editSubmitAction = new EventEmitter<{
+    state: { [field: string]: string };
+    row: any;
+  }>();
 
   /**
    * Use this variable to access the selected row(s).
@@ -1396,14 +1399,17 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
     this.editStates[rowId][column.prop] = value;
   }
 
-  saveCellItem(rowId: string, colProp: string) {
+  saveCellItem(row: any, colProp: string) {
     if (this.formGroup?.invalid) {
       this.formGroup.setErrors({ cdSubmitButton: true });
       return;
     }
-    this.editSubmitAction.emit(this.editStates[rowId]);
-    this.editingCells.delete(`${rowId}-${colProp}`);
-    delete this.editStates[rowId][colProp];
+    this.editSubmitAction.emit({
+      state: this.editStates[row[this.identifier]],
+      row: row
+    });
+    this.editingCells.delete(`${row[this.identifier]}-${colProp}`);
+    delete this.editStates[row[this.identifier]][colProp];
   }
 
   isCellEditing(rowId: string, colProp: string): boolean {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts
index 97cd9f84d98bb1859e66415b7d144ffea4b87a96..fc0846b35766cd24d5ebfc18b2f81d96bb1819b9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/cell-template.enum.ts
@@ -91,6 +91,8 @@ export enum CellTemplate {
   //    }
   //    ...
   // }
+  Also need to pass forceIdentifer=true and also a unique identifier prop like
+  identifier="uid" to the table in some cases to avoid issues.
   */
   editing = 'editing'
 }