Skip to content

Commit 2c1e2ad

Browse files
johnhwhitejohnhwhite
authored
feat(components/ag-grid)!: upgrade to AG Grid 28 (#617)
BREAKING CHANGE: upgrade to [AG Grid 28](https://www.ag-grid.com/changelog/?fixVersion=28.0.0), which includes breaking changes
1 parent c5cd603 commit 2c1e2ad

File tree

39 files changed

+1807
-977
lines changed

39 files changed

+1807
-977
lines changed

‎apps/e2e/ag-grid-storybook/src/app/ag-grid/ag-grid-stories.component.ts‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,7 @@ import {
1616
import { SkyDockLocation, SkyDockService } from '@skyux/core';
1717
import { SkyThemeService, SkyThemeSettings } from '@skyux/theme';
1818

19-
import {
20-
Events,
21-
GridOptions,
22-
RowNode,
23-
RowSelectedEvent,
24-
} from 'ag-grid-community';
19+
import { GridOptions, RowNode, RowSelectedEvent } from 'ag-grid-community';
2520
import { BehaviorSubject, Observable, Subscription, combineLatest } from 'rxjs';
2621
import { delay, filter, map } from 'rxjs/operators';
2722

@@ -183,14 +178,10 @@ export class AgGridStoriesComponent
183178
}
184179
);
185180
}
186-
187-
params.api.addEventListener(
188-
Events.EVENT_FIRST_DATA_RENDERED,
189-
() => {
190-
(
191-
this.#gridsReady.get(dataSet.id) as BehaviorSubject<boolean>
192-
).next(true);
193-
}
181+
},
182+
onFirstDataRendered: () => {
183+
(this.#gridsReady.get(dataSet.id) as BehaviorSubject<boolean>).next(
184+
true
194185
);
195186
},
196187
rowData: dataSet.data,

‎apps/e2e/ag-grid-storybook/src/app/data-entry-grid/data-entry-grid.component.spec.ts‎

Lines changed: 51 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
SkyThemeSettingsChange,
77
} from '@skyux/theme';
88

9-
import { GridReadyEvent } from 'ag-grid-community';
109
import { BehaviorSubject } from 'rxjs';
1110

1211
import { DataEntryGridComponent } from './data-entry-grid.component';
@@ -18,90 +17,58 @@ describe('DataEntryGridComponent', () => {
1817
let mockThemeSvc: {
1918
settingsChange: BehaviorSubject<SkyThemeSettingsChange>;
2019
};
21-
let events: { [key: string]: (() => void)[] };
2220

23-
beforeEach(() => {
24-
mockThemeSvc = {
25-
settingsChange: new BehaviorSubject<SkyThemeSettingsChange>({
26-
currentSettings: {
27-
theme: SkyTheme.presets.default,
28-
mode: SkyThemeMode.presets.light,
29-
},
30-
previousSettings: undefined,
31-
}),
32-
};
33-
events = {};
34-
TestBed.configureTestingModule({
35-
imports: [DataEntryGridModule],
36-
providers: [
37-
{
38-
provide: SkyThemeService,
39-
useValue: mockThemeSvc,
40-
},
41-
],
42-
});
43-
fixture = TestBed.createComponent(DataEntryGridComponent);
44-
component = fixture.componentInstance;
45-
fixture.detectChanges();
46-
});
21+
['date-and-lookup', 'edit-lookup'].forEach(
22+
(variation: 'date-and-lookup' | 'edit-lookup') => {
23+
describe(`variation: ${variation}`, () => {
24+
beforeEach(() => {
25+
mockThemeSvc = {
26+
settingsChange: new BehaviorSubject<SkyThemeSettingsChange>({
27+
currentSettings: {
28+
theme: SkyTheme.presets.default,
29+
mode: SkyThemeMode.presets.light,
30+
},
31+
previousSettings: undefined,
32+
}),
33+
};
34+
TestBed.configureTestingModule({
35+
imports: [DataEntryGridModule],
36+
providers: [
37+
{
38+
provide: SkyThemeService,
39+
useValue: mockThemeSvc,
40+
},
41+
],
42+
});
43+
fixture = TestBed.createComponent(DataEntryGridComponent);
44+
component = fixture.componentInstance;
45+
component.variation = variation;
46+
fixture.detectChanges();
47+
});
4748

48-
it('should create', async () => {
49-
expect(component).toBeTruthy();
50-
});
49+
it('should create', async () => {
50+
expect(component).toBeTruthy();
51+
});
5152

52-
it('should create edit-lookup variation', async () => {
53-
component.variation = 'edit-lookup';
54-
component.ngOnInit();
55-
expect(component).toBeTruthy();
56-
});
57-
58-
it('should become ready', async () => {
59-
Object.values(component.gridOptions).forEach((gridOptions) => {
60-
gridOptions.onGridReady({
61-
api: {
62-
addEventListener: (eventType, listener: () => void) => {
63-
events[eventType] = events[eventType] || [];
64-
events[eventType].push(listener);
65-
},
66-
},
67-
} as GridReadyEvent);
68-
});
69-
expect(component.isActive$.value).toBe(true);
70-
component.ngAfterViewInit();
71-
fixture.detectChanges();
72-
await fixture.whenStable();
73-
expect(component).toBeTruthy();
74-
events['firstDataRendered'].forEach((listener) => listener());
75-
await new Promise((resolve) => setTimeout(resolve, 1000));
76-
expect(component.ready.value).toBe(true);
77-
});
78-
79-
it('should use smaller dataset for calendar view in modern theme', async () => {
80-
component.variation = 'date-and-lookup';
81-
mockThemeSvc.settingsChange.next({
82-
currentSettings: {
83-
theme: SkyTheme.presets.modern,
84-
mode: SkyThemeMode.presets.light,
85-
},
86-
previousSettings: undefined,
87-
});
88-
Object.values(component.gridOptions).forEach((gridOptions) => {
89-
gridOptions.onGridReady({
90-
api: {
91-
addEventListener: (eventType, listener: () => void) => {
92-
events[eventType] = events[eventType] || [];
93-
events[eventType].push(listener);
94-
},
95-
},
96-
} as GridReadyEvent);
97-
});
98-
component.ngAfterViewInit();
99-
fixture.detectChanges();
100-
await fixture.whenStable();
101-
expect(component).toBeTruthy();
102-
events['firstDataRendered'].forEach((listener) => listener());
103-
await new Promise((resolve) => setTimeout(resolve, 1000));
104-
expect(component.ready.value).toBe(true);
105-
expect(component.dataSets[0].data.length).toBe(7);
106-
});
53+
if (variation === 'date-and-lookup') {
54+
it('should use smaller dataset for calendar view in modern theme', async () => {
55+
mockThemeSvc.settingsChange.next({
56+
currentSettings: {
57+
theme: SkyTheme.presets.modern,
58+
mode: SkyThemeMode.presets.light,
59+
},
60+
previousSettings: undefined,
61+
});
62+
component.ngAfterViewInit();
63+
fixture.detectChanges();
64+
await fixture.whenStable();
65+
expect(component).toBeTruthy();
66+
await new Promise((resolve) => setTimeout(resolve, 1000));
67+
expect(component.ready.value).toBe(true);
68+
expect(component.dataSets[0].data.length).toBe(7);
69+
});
70+
}
71+
});
72+
}
73+
);
10774
});

‎apps/e2e/ag-grid-storybook/src/app/data-entry-grid/data-entry-grid.component.ts‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
SkyThemeSettings,
1616
} from '@skyux/theme';
1717

18-
import { ColDef, Events, GridOptions } from 'ag-grid-community';
18+
import { ColDef, GridOptions } from 'ag-grid-community';
1919
import { BehaviorSubject, Observable, Subscription, combineLatest } from 'rxjs';
2020
import { delay, filter, map } from 'rxjs/operators';
2121

@@ -185,14 +185,9 @@ export class DataEntryGridComponent
185185
suppressColumnVirtualisation: true,
186186
suppressHorizontalScroll: true,
187187
suppressRowVirtualisation: true,
188-
onGridReady: (params) => {
189-
params.api.addEventListener(
190-
Events.EVENT_FIRST_DATA_RENDERED,
191-
() => {
192-
(
193-
this.#gridsReady.get(dataSet.id) as BehaviorSubject<boolean>
194-
).next(true);
195-
}
188+
onFirstDataRendered: () => {
189+
(this.#gridsReady.get(dataSet.id) as BehaviorSubject<boolean>).next(
190+
true
196191
);
197192
},
198193
rowData: (() => {

‎apps/e2e/ag-grid-storybook/src/app/data-manager/data-manager.component.ts‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
OnInit,
66
ViewEncapsulation,
77
} from '@angular/core';
8-
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
8+
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
99
import { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';
1010
import {
1111
SkyDataManagerConfig,
@@ -19,6 +19,11 @@ import { first } from 'rxjs/operators';
1919

2020
import { columnDefinitions, data } from '../shared/baseball-players-data';
2121

22+
type GridSettingsType = {
23+
enableTopScroll: FormControl<boolean>;
24+
domLayout: FormControl<'normal' | 'autoHeight' | 'print'>;
25+
};
26+
2227
@Component({
2328
selector: 'app-data-manager',
2429
templateUrl: './data-manager.component.html',
@@ -80,19 +85,19 @@ export class DataManagerComponent implements OnInit {
8085
public settingsKey = 'ag-grid-storybook-data-manager';
8186
public gridOptions: GridOptions;
8287
public isActive$ = new BehaviorSubject(true);
83-
public gridSettings: UntypedFormGroup;
88+
public gridSettings: FormGroup<GridSettingsType>;
8489
public ready = new BehaviorSubject(false);
8590

8691
constructor(
87-
private formBuilder: UntypedFormBuilder,
92+
private formBuilder: FormBuilder,
8893
private dataManagerService: SkyDataManagerService,
8994
private agGridService: SkyAgGridService
9095
) {}
9196

9297
public ngOnInit(): void {
93-
this.gridSettings = this.formBuilder.group({
94-
enableTopScroll: this.enableTopScroll,
95-
domLayout: this.domLayout,
98+
this.gridSettings = this.formBuilder.group<GridSettingsType>({
99+
enableTopScroll: this.formBuilder.control(this.enableTopScroll),
100+
domLayout: this.formBuilder.control(this.domLayout),
96101
});
97102

98103
this.applyGridOptions();
@@ -154,7 +159,7 @@ export class DataManagerComponent implements OnInit {
154159
domLayout: this.domLayout,
155160
suppressColumnVirtualisation: true,
156161
suppressRowVirtualisation: true,
157-
onGridReady: () => {
162+
onFirstDataRendered: () => {
158163
// Delay to allow the grid to render before capturing the screenshot.
159164
timer(800)
160165
.pipe(first())

‎apps/playground/project.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,14 @@
88
"executor": "@angular-devkit/build-angular:browser",
99
"outputs": ["{options.outputPath}"],
1010
"options": {
11-
"allowedCommonJsDependencies": ["dragula", "ng2-dragula"],
11+
"allowedCommonJsDependencies": [
12+
"autonumeric",
13+
"dragula",
14+
"ng2-dragula",
15+
"moment",
16+
"google-libphonenumber",
17+
"fontfaceobserver"
18+
],
1219
"outputPath": "dist/apps/playground",
1320
"index": "apps/playground/src/index.html",
1421
"main": "apps/playground/src/main.ts",

‎apps/playground/src/app/components/ag-grid/data-manager/data-view-grid.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ export class DataViewGridComponent implements OnInit {
169169
public sortItems(): void {
170170
const sortOption = this.dataState.activeSortOption;
171171
if (this.columnApi && sortOption) {
172-
const allColumns = this.columnApi.getAllColumns();
172+
const allColumns = this.columnApi.getColumns();
173173
allColumns.forEach((column) => {
174174
if (column.getColId() === sortOption.propertyName) {
175175
column.setSort(sortOption.descending ? 'desc' : 'asc');

‎libs/components/ag-grid/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
"@skyux/lookup": "0.0.0-PLACEHOLDER",
3131
"@skyux/popovers": "0.0.0-PLACEHOLDER",
3232
"@skyux/theme": "0.0.0-PLACEHOLDER",
33-
"ag-grid-angular": "^27.2.0",
34-
"ag-grid-community": "^27.2.0"
33+
"ag-grid-angular": "^28.2.1",
34+
"ag-grid-community": "^28.2.1"
3535
},
3636
"dependencies": {
3737
"tslib": "^2.3.1"

‎libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.spec.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ describe('SkyAgGridDataManagerAdapterDirective', () => {
176176

177177
const columnDragged = {
178178
columnApi,
179-
} as DragStartedEvent | DragStoppedEvent;
179+
} as DragStartedEvent & DragStoppedEvent;
180180

181181
agGridComponent.dragStarted.emit(columnDragged);
182182
colIds.reverse();
@@ -201,7 +201,7 @@ describe('SkyAgGridDataManagerAdapterDirective', () => {
201201
};
202202
const columnDragged = {
203203
columnApi,
204-
} as DragStartedEvent | DragStoppedEvent;
204+
} as DragStartedEvent & DragStoppedEvent;
205205
agGridComponent.dragStopped.emit(columnDragged);
206206
spyOn(dataManagerService, 'updateDataState');
207207
agGridComponent.dragStopped.emit(columnDragged);
@@ -367,6 +367,7 @@ it('should move the horizontal scroll based on enableTopScroll check', async ()
367367
'ag-body-horizontal-scroll',
368368
'ag-floating-top',
369369
'ag-body-viewport',
370+
'ag-sticky-top',
370371
'ag-floating-bottom',
371372
'ag-overlay',
372373
]);

0 commit comments

Comments
 (0)