[AAE-12840] - Fix saving preference when columns width or order changes (#8331)

* AAE-12840: Fixed saving preference when column widths change in tasks and processes list

* AAE-12840: Fixed saving preference when columns order change in tasks and processes list

* AAE-12840: Fixed lint issue

* AAE-12840: fixed lint issue

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts

@@ -370,6 +370,47 @@ describe('ProcessListCloudComponent', () => {
         component.onRowClick(rowEvent);
     });
 
+    it('should re-create columns when a column width gets changed', () => {
+        component.isResizingEnabled = true;
+        component.appName = 'FAKE-APP-NAME';
+        spyOn(processListCloudService, 'getProcessByRequest').and.returnValue(of(fakeProcessCloudList));
+
+        fixture.detectChanges();
+        component.reload();
+        fixture.detectChanges();
+
+        const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
+
+        resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
+        resizeHandle.dispatchEvent(new MouseEvent('mousemove'));
+        resizeHandle.dispatchEvent(new MouseEvent('mouseup'));
+
+        const firstColumnInitialWidth = component.columns[0].width ?? 0;
+
+        resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
+        resizeHandle.dispatchEvent(new MouseEvent('mousemove', { clientX: 25 }));
+        resizeHandle.dispatchEvent(new MouseEvent('mouseup'));
+
+        expect(component.columns[0].width).toBe(firstColumnInitialWidth + 25);
+    });
+
+    it('should re-create columns when a column order gets changed', () => {
+        component.appName = 'FAKE-APP-NAME';
+
+        fixture.detectChanges();
+        component.reload();
+        fixture.detectChanges();
+
+        expect(component.columns[0].title).toBe('ADF_CLOUD_PROCESS_LIST.PROPERTIES.NAME');
+        expect(component.columns[1].title).toBe('ADF_CLOUD_PROCESS_LIST.PROPERTIES.START_DATE');
+
+        component.onColumnOrderChanged([component.columns[1], ...component.columns]);
+        fixture.detectChanges();
+
+        expect(component.columns[0].title).toBe('ADF_CLOUD_PROCESS_LIST.PROPERTIES.START_DATE');
+        expect(component.columns[1].title).toBe('ADF_CLOUD_PROCESS_LIST.PROPERTIES.NAME');
+    });
+
     describe('component changes', () => {
 
         beforeEach(() => {

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts

@@ -361,6 +361,7 @@ export class ProcessListCloudComponent extends DataTableSchema<ProcessListDataCo
 
     onColumnOrderChanged(columnsWithNewOrder: DataColumn[]): void {
         this.columnsOrder = columnsWithNewOrder.map(column => column.id);
+        this.createColumns();
 
         if (this.appName) {
             this.cloudPreferenceService.updatePreference(
@@ -400,6 +401,8 @@ export class ProcessListCloudComponent extends DataTableSchema<ProcessListDataCo
             return widthsColumnsMap;
         }, {});
 
+        this.createColumns();
+
         if (this.appName) {
             this.cloudPreferenceService.updatePreference(
                 this.appName,

lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts

@@ -270,6 +270,7 @@ export abstract class BaseTaskListCloudComponent<T = unknown> extends DataTableS
 
     onColumnOrderChanged(columnsWithNewOrder: DataColumn[]): void {
         this.columnsOrder = columnsWithNewOrder.map(column => column.id);
+        this.createColumns();
 
         if (this.appName) {
             this.cloudPreferenceService.updatePreference(
@@ -310,6 +311,8 @@ export abstract class BaseTaskListCloudComponent<T = unknown> extends DataTableS
             return widthsColumnsMap;
         }, {});
 
+        this.createColumns();
+
         if (this.appName) {
             this.cloudPreferenceService.updatePreference(
                 this.appName,

lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts

@@ -286,6 +286,44 @@ describe('TaskListCloudComponent', () => {
         component.onRowClick(rowEvent);
     });
 
+    it('should re-create columns when a column width gets changed', () => {
+        component.isResizingEnabled = true;
+        spyOn(taskListCloudService, 'getTaskByRequest').and.returnValue(of(fakeGlobalTasks));
+
+        component.reload();
+        fixture.detectChanges();
+
+        const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
+
+        resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
+        resizeHandle.dispatchEvent(new MouseEvent('mousemove'));
+        resizeHandle.dispatchEvent(new MouseEvent('mouseup'));
+
+        const firstColumnInitialWidth = component.columns[0].width ?? 0;
+
+        resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
+        resizeHandle.dispatchEvent(new MouseEvent('mousemove', { clientX: 25 }));
+        resizeHandle.dispatchEvent(new MouseEvent('mouseup'));
+
+        expect(component.columns[0].width).toBe(firstColumnInitialWidth + 25);
+    });
+
+    it('should re-create columns when a column order gets changed', () => {
+        component.reload();
+        fixture.detectChanges();
+
+        expect(component.columns[0].title).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.NAME');
+        expect(component.columns[1].title).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.CREATED');
+        expect(component.columns[2].title).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.ASSIGNEE');
+
+        component.onColumnOrderChanged([component.columns[1], ...component.columns]);
+        fixture.detectChanges();
+
+        expect(component.columns[0].title).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.CREATED');
+        expect(component.columns[1].title).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.NAME');
+        expect(component.columns[2].title).toBe('ADF_CLOUD_TASK_LIST.PROPERTIES.ASSIGNEE');
+    });
+
     describe('component changes', () => {
 
         beforeEach(() => {