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 <[email protected]>

Author: nizamial09

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>

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();

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 {

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'
 }