From 77cec0cd052ec3145d73a7a16d0c7f5c663e3901 Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Thu, 29 Jun 2023 17:57:49 -0400
Subject: [PATCH] fix(GridState): calling `getAssociatedGridColumns` should
 extend column (#1014)

* fix(GridState): calling `getAssociatedGridColumns` should extend column
- the previous implementation was extending 3 defined properties but by doing so it was extending properly when a value was provided but it was returning an empty value instead of extending the original
- for example `{ ...gridCol, cssClass: currentCol }` would change the `cssClass` to undefined when `currentCol` doesn't have this `cssClass` and that is even when the original `gridCol` does have that same property. So instead of trying to extend specific properties we should just extend the entire objects, ie: `{ ...gridCol, ...currentCol }` would extend correctly whatever property is defined in `currentCol`
- also make sure to extend currentCol but without the `columnId` since that doesn't exist a regular Column property
---
 .../__tests__/gridState.service.spec.ts       | 25 +++++++++++--------
 .../common/src/services/gridState.service.ts  |  5 ++--
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/common/src/services/__tests__/gridState.service.spec.ts b/packages/common/src/services/__tests__/gridState.service.spec.ts
index 8470f4f9f..a5b72d37e 100644
--- a/packages/common/src/services/__tests__/gridState.service.spec.ts
+++ b/packages/common/src/services/__tests__/gridState.service.spec.ts
@@ -398,14 +398,9 @@ describe('GridStateService', () => {
         { id: 'field2', field: 'field2', width: 150, headerCssClass: 'blue' },
         { id: 'field3', field: 'field3' },
       ] as Column[];
-      const columnsWithClassesMock = [
-        { id: 'field1', field: 'field1', width: 100, cssClass: 'red', headerCssClass: '' },
-        { id: 'field2', field: 'field2', width: 150, cssClass: '', headerCssClass: 'blue' },
-        { id: 'field3', field: 'field3', width: 0, cssClass: '', headerCssClass: '' },
-      ] as Column[];
       const currentColumnsMock = [
-        { columnId: 'field1', cssClass: 'red', headerCssClass: '', width: 100 },
-        { columnId: 'field2', cssClass: '', headerCssClass: 'blue', width: 150 },
+        { columnId: 'field1', cssClass: 'purple', headerCssClass: 'custom-hdr', width: 100 },
+        { columnId: 'field2', cssClass: '', width: 150 },
         { columnId: 'field3', cssClass: '', headerCssClass: '', width: 0 },
       ] as CurrentColumn[];
       const gridSpy = jest.spyOn(gridStub, 'getColumns').mockReturnValue(columnsMock);
@@ -414,8 +409,18 @@ describe('GridStateService', () => {
       const columns = service.getColumns();
 
       expect(gridSpy).toHaveBeenCalled();
-      expect(associatedGridColumns).toEqual(columnsWithClassesMock);
-      expect(columns).toEqual(columnsWithClassesMock);
+
+      // cssClass: red will change to purple and headerCssClass will remain blue when defined in either
+      expect(associatedGridColumns).toEqual([
+        { id: 'field1', field: 'field1', width: 100, cssClass: 'purple', headerCssClass: 'custom-hdr' },
+        { id: 'field2', field: 'field2', width: 150, cssClass: '', headerCssClass: 'blue' },
+        { id: 'field3', field: 'field3', width: 0, cssClass: '', headerCssClass: '' },
+      ]);
+      expect(columns).toEqual([
+        { id: 'field1', field: 'field1', width: 100, cssClass: 'purple', headerCssClass: 'custom-hdr' },
+        { id: 'field2', field: 'field2', width: 150, cssClass: '', headerCssClass: 'blue' },
+        { id: 'field3', field: 'field3', width: 0, cssClass: '', headerCssClass: '' },
+      ]);
     });
   });
 
@@ -591,7 +596,7 @@ describe('GridStateService', () => {
             }
           });
           done();
-        })
+        });
       });
     });
   });
diff --git a/packages/common/src/services/gridState.service.ts b/packages/common/src/services/gridState.service.ts
index 0f7f255c5..923a23ee3 100644
--- a/packages/common/src/services/gridState.service.ts
+++ b/packages/common/src/services/gridState.service.ts
@@ -21,6 +21,7 @@ import type { FilterService } from './filter.service';
 import type { SharedService } from './shared.service';
 import type { SortService } from './sort.service';
 import type { TreeDataService } from './treeData.service';
+import { objectWithoutKey } from './utilities';
 
 // using external non-typed js libraries
 declare const Slick: SlickNamespace;
@@ -220,9 +221,7 @@ export class GridStateService {
         if (gridColumn?.id) {
           columns.push({
             ...gridColumn,
-            cssClass: currentColumn.cssClass,
-            headerCssClass: currentColumn.headerCssClass,
-            width: currentColumn.width
+            ...objectWithoutKey(currentColumn, 'columnId') // extend all currentCol proops except "columnId" which isn't needed
           });
         }
       });