fix(components/ag-grid): address deprecation warnings (#2788)

[AB#3097851](https://dev.azure.com/blackbaud/f565481a-7bc9-4083-95d5-4f953da6d499/_workitems/edit/3097851)
blackbaud · Oct 1, 2024 · c9695da · c9695da
1 parent 92caefc
commit c9695da
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 13 deletions.
diff --git a/...code-examples/src/app/code-examples/ag-grid/data-grid/basic-multiselect/demo.component.ts b/...code-examples/src/app/code-examples/ag-grid/data-grid/basic-multiselect/demo.component.ts
@@ -76,7 +76,6 @@ export class DemoComponent {
   constructor() {
     const gridOptions: GridOptions = {
       columnDefs: this.#columnDefs,
-      rowSelection: 'multiple',
     };
 
     this.gridOptions = this.#agGridSvc.getGridOptions({

diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic/demo.component.ts
@@ -67,7 +67,7 @@ export class DemoComponent {
   constructor() {
     const gridOptions: GridOptions = {
       columnDefs: this.#columnDefs,
-      rowSelection: 'single',
+      selection: { mode: 'singleRow' },
     };
 
     this.gridOptions = this.#agGridSvc.getGridOptions({

diff --git a/...s/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/view-grid.component.ts b/...s/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/view-grid.component.ts
@@ -172,7 +172,6 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     this.gridOptions = this.#agGridSvc.getGridOptions({
       gridOptions: {
         columnDefs: this.#columnDefs,
-        rowSelection: 'multiple',
         onGridReady: this.onGridReady.bind(this),
       },
     });

diff --git a/...code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/view-grid.component.ts b/...code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/view-grid.component.ts
@@ -158,8 +158,8 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     this.gridOptions = this.#agGridSvc.getGridOptions({
       gridOptions: {
         columnDefs: this.#columnDefs,
-        rowSelection: 'single',
         onGridReady: this.onGridReady.bind(this),
+        selection: { mode: 'singleRow' },
       },
     });
 

diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/paging/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/paging/demo.component.ts
@@ -97,7 +97,7 @@ export class DemoComponent implements OnInit, OnDestroy {
       onGridReady: (gridReadyEvent): void => {
         this.onGridReady(gridReadyEvent);
       },
-      rowSelection: 'single',
+      selection: { mode: 'singleRow' },
       pagination: true,
       suppressPaginationPanel: true,
       paginationPageSize: this.pageSize,

diff --git a/.../playground/src/app/components/ag-grid/edit-complex-cells/edit-complex-cells.component.ts b/.../playground/src/app/components/ag-grid/edit-complex-cells/edit-complex-cells.component.ts
@@ -387,7 +387,6 @@ export class EditComplexCellsComponent implements OnInit {
       onGridSizeChanged: () => {
         this.sizeGrid();
       },
-      rowSelection: 'multiple',
       suppressColumnVirtualisation: true,
       stopEditingWhenCellsLoseFocus: false,
     };

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.spec.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.spec.ts
@@ -329,6 +329,28 @@ describe('SkyAgGridService', () => {
           ?.enableCellTextSelection,
       ).toBeFalsy();
     });
+
+    it('should update selection options', () => {
+      expect(
+        agGridService.getGridOptions({
+          gridOptions: { rowSelection: 'single' },
+        }),
+      ).toEqual(
+        jasmine.objectContaining({
+          selection: { mode: 'singleRow' },
+        }),
+      );
+
+      expect(
+        agGridService.getGridOptions({
+          gridOptions: { enableRangeSelection: true },
+        }),
+      ).toEqual(
+        jasmine.objectContaining({
+          selection: { mode: 'cell' },
+        }),
+      );
+    });
   });
 
   describe('getEditableGridOptions', () => {
@@ -338,6 +360,7 @@ describe('SkyAgGridService', () => {
       });
 
       expect(editableGridOptions.rowSelection).toBeUndefined();
+      expect(editableGridOptions.selection).toBeUndefined();
     });
   });
 

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.ts
@@ -203,6 +203,21 @@ export class SkyAgGridService implements OnDestroy {
     defaultGridOptions: GridOptions,
     providedGridOptions: GridOptions,
   ): GridOptions {
+    if (
+      !providedGridOptions.selection &&
+      ('rowSelection' in providedGridOptions ||
+        'enableRangeSelection' in providedGridOptions)
+    ) {
+      if (providedGridOptions.rowSelection === 'single') {
+        providedGridOptions.selection = { mode: 'singleRow' };
+      }
+      if (providedGridOptions.enableRangeSelection) {
+        providedGridOptions.selection = { mode: 'cell' };
+      }
+      delete providedGridOptions.rowSelection;
+      delete providedGridOptions.enableRangeSelection;
+    }
+
     const mergedGridOptions: GridOptions = {
       ...defaultGridOptions,
       ...providedGridOptions,
@@ -232,13 +247,14 @@ export class SkyAgGridService implements OnDestroy {
         ...defaultGridOptions.icons,
         ...providedGridOptions.icons,
       },
+      selection: providedGridOptions.selection ?? defaultGridOptions.selection,
     };
 
     // Enable text selection unless explicitly disabled or conflicting with another setting.
     if (
       mergedGridOptions.enableCellTextSelection ||
       (!('enableCellTextSelection' in mergedGridOptions) &&
-        !mergedGridOptions.enableRangeSelection &&
+        mergedGridOptions.selection?.mode !== 'cell' &&
         !mergedGridOptions.columnDefs?.some((col: ColDef) => col.editable))
     ) {
       mergedGridOptions.context ||= {};
@@ -516,11 +532,15 @@ export class SkyAgGridService implements OnDestroy {
       },
       loadingOverlayComponent: SkyAgGridLoadingComponent,
       onCellFocused: () => this.#onCellFocused(),
-      rowMultiSelectWithClick: true,
-      rowSelection: 'multiple',
+      selection: {
+        mode: 'multiRow',
+        enableClickSelection: false,
+        enableMultiSelectWithClick: true,
+        checkboxes: false,
+        headerCheckbox: false,
+      },
       singleClickEdit: true,
       sortingOrder: ['desc', 'asc', null],
-      suppressRowClickSelection: true,
       suppressDragLeaveHidesColumns: true,
     };
 
@@ -597,9 +617,7 @@ export class SkyAgGridService implements OnDestroy {
 
   #getDefaultEditableGridOptions(args: SkyGetGridOptionsArgs): GridOptions {
     const defaultGridOptions = this.#getDefaultGridOptions(args);
-
-    defaultGridOptions.rowSelection = undefined;
-
+    delete defaultGridOptions.selection;
     return defaultGridOptions;
   }
 

diff --git a/libs/components/ag-grid/src/lib/styles/_base.scss b/libs/components/ag-grid/src/lib/styles/_base.scss
@@ -153,6 +153,8 @@ $modernDarkThemeCompact: map.merge($modernDarkThemeBase, $modernThemeCompact);
 .ag-theme-sky-data-entry-grid-modern-dark-compact {
   @include ag-grid-extra.ag-grid-extra();
 
+  --ag-list-item-height: var(--ag-row-height);
+
   .ag-header-cell {
     cursor: initial;