fix(GridState): calling getAssociatedGridColumns should extend colu…

…mn (#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

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

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