Adopt SkyUIConfigService

package.json

@@ -26,6 +26,7 @@
     "@angular/common": ">=4.3.6",
     "@angular/core": ">=4.3.6",
     "@angular/forms": ">=4.3.6",
+    "@skyux/core": "^3.5.1",
     "@skyux/i18n": "^3.5.0",
     "@skyux/list-builder-common": "^3.0.0",
     "@skyux/forms": "^3.0.0",

src/app/public/modules/grid/fixtures/grid-async.component.fixture.html

@@ -5,4 +5,9 @@
     [heading]="asyncHeading | async"
     [description]="asyncDescription | async">
   </sky-grid-column>
+  <sky-grid-column
+    field="column2"
+    [heading]="asyncHeading | async"
+    [description]="asyncDescription | async">
+  </sky-grid-column>
 </sky-grid>

src/app/public/modules/grid/fixtures/grid-empty.component.fixture.html

@@ -1,3 +1,9 @@
-<sky-grid fit="scroll" [data]="data" [columns]="columns">
+<sky-grid
+  fit="scroll"
+  [columns]="columns"
+  [data]="data"
+  [selectedColumnIds]="selectedColumnIds"
+  [settingsKey]="settingsKey"
+>
 </sky-grid>
 <ng-template #defaultCellTemplate let-row="row" let-value="value">{{value}}</ng-template>

src/app/public/modules/grid/fixtures/grid-empty.component.fixture.ts

@@ -21,6 +21,8 @@ export class GridEmptyTestComponent {
   public template: TemplateRef<any>;
 
   public columns: Array<SkyGridColumnModel>;
+  public selectedColumnIds: string[];
+  public settingsKey: string;
 
   public data: any[] = [
     {

src/app/public/modules/grid/fixtures/grid-fixtures.module.ts

@@ -7,12 +7,17 @@ import {
 } from '@angular/common';
 
 import {
+  SkyUIConfigService,
   SkyWindowRefService
 } from '@skyux/core';
 
+import {
+  Observable
+} from 'rxjs/Observable';
+
 import {
   SkyGridModule
-} from '../';
+} from '../grid.module';
 
 import {
   GridTestComponent
@@ -47,7 +52,16 @@ import {
     SkyGridModule
   ],
   providers: [
-    SkyWindowRefService
+    SkyWindowRefService,
+    {
+      provide: SkyUIConfigService,
+      useValue: {
+        getConfig: () => Observable.of({
+          selectedColumnIds: []
+        }),
+        setConfig: () => Observable.of({})
+      }
+    }
   ],
   exports: [
     GridTestComponent,

src/app/public/modules/grid/fixtures/grid.component.fixture.html

@@ -10,6 +10,7 @@
   [messageStream]="gridController"
   [multiselectRowId]="multiselectRowId"
   [rowHighlightedId]="rowHighlightedId"
+  [settingsKey]="settingsKey"
   [sortField]="sortField"
   (sortFieldChange)="onSort($event)"
   (columnWidthChange)="onResize($event)"

src/app/public/modules/grid/fixtures/grid.component.fixture.ts

@@ -53,6 +53,7 @@ export class GridTestComponent {
   public selectedRowsChange: SkyGridSelectedRowsModelChange;
   public gridController = new Subject<SkyGridMessage>();
   public rowHighlightedId: string;
+  public settingsKey: string;
 
   public selectedColumnIds: string[] = [
     'column1',

src/app/public/modules/grid/grid.component.spec.ts

@@ -19,10 +19,18 @@ import {
   tick
 } from '@angular/core/testing';
 
+import {
+  SkyUIConfigService
+} from '@skyux/core';
+
 import {
   DragulaService
 } from 'ng2-dragula/ng2-dragula';
 
+import {
+  Observable
+} from 'rxjs/Observable';
+
 const moment = require('moment');
 
 import {
@@ -54,7 +62,6 @@ import {
 } from './fixtures/mock-dragula.service';
 
 import {
-  SkyGridModule,
   SkyGridComponent,
   SkyGridColumnModel
 } from './';
@@ -207,8 +214,7 @@ describe('Grid Component', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [
-          GridFixturesModule,
-          SkyGridModule
+          GridFixturesModule
         ]
       });
     }));
@@ -590,7 +596,7 @@ describe('Grid Component', () => {
         });
       });
 
-      describe('Resiazable columns', () => {
+      describe('Resizeable columns', () => {
 
         it('should not resize if user does not use resize handle', fakeAsync(() => {
           // Get initial baseline for comparison.
@@ -825,8 +831,7 @@ describe('Grid Component', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
         imports: [
-          GridFixturesModule,
-          SkyGridModule
+          GridFixturesModule
         ]
       });
     });
@@ -946,8 +951,7 @@ describe('Grid Component', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
         imports: [
-          GridFixturesModule,
-          SkyGridModule
+          GridFixturesModule
         ]
       });
     });
@@ -1266,8 +1270,7 @@ describe('Grid Component', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
         imports: [
-          GridFixturesModule,
-          SkyGridModule
+          GridFixturesModule
         ]
       });
     });
@@ -1323,8 +1326,7 @@ describe('Grid Component', () => {
 
       TestBed.configureTestingModule({
         imports: [
-          GridFixturesModule,
-          SkyGridModule
+          GridFixturesModule
         ]
       });
 
@@ -1552,8 +1554,7 @@ describe('Grid Component', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [
-          GridFixturesModule,
-          SkyGridModule
+          GridFixturesModule
         ]
       });
     }));
@@ -1639,8 +1640,7 @@ describe('Grid Component', () => {
 
       TestBed.configureTestingModule({
         imports: [
-          GridFixturesModule,
-          SkyGridModule
+          GridFixturesModule
         ]
       });
 
@@ -1674,8 +1674,7 @@ describe('Grid Component', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [
-          GridFixturesModule,
-          SkyGridModule
+          GridFixturesModule
         ]
       }).compileComponents();
     }));
@@ -1685,20 +1684,23 @@ describe('Grid Component', () => {
       element = fixture.debugElement as DebugElement;
     });
 
-    it('should handle async column headings', fakeAsync(() => {
-      fixture.detectChanges();
-
-      expect(getColumnHeader('column1', element).nativeElement.textContent.trim()).toBe('');
+    function verifyColumnHeaders(id: string) {
+      expect(getColumnHeader(id, element).nativeElement.textContent.trim()).toBe('');
 
       tick(110); // wait for setTimeout
       fixture.detectChanges();
       tick();
 
-      expect(getColumnHeader('column1', element).nativeElement.textContent.trim()).toBe('Column1');
-    }));
+      expect(getColumnHeader(id, element).nativeElement.textContent.trim()).toBe('Column1');
+    }
 
     it('should handle async column headings', fakeAsync(() => {
       fixture.detectChanges();
+      verifyColumnHeaders('column1');
+    }));
+
+    it('should handle async column descriptions', fakeAsync(() => {
+      fixture.detectChanges();
 
       let col1 = fixture.componentInstance.grid.columns.find(col => col.id === 'column1');
       expect(col1.description).toBe('');
@@ -1709,5 +1711,117 @@ describe('Grid Component', () => {
 
       expect(col1.description).toBe('Column1 Description');
     }));
+
+    it('should support the item `field` property if `id` not provided', fakeAsync(() => {
+      fixture.detectChanges();
+
+      verifyColumnHeaders('column2');
+    }));
+  });
+
+  describe('UI config', () => {
+    let fixture: ComponentFixture<GridEmptyTestComponent>;
+    let component: GridEmptyTestComponent;
+    let uiConfigService: SkyUIConfigService;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [
+          GridFixturesModule
+        ]
+      });
+
+      fixture = TestBed.createComponent(GridEmptyTestComponent);
+      component = fixture.componentInstance;
+      uiConfigService = TestBed.get(SkyUIConfigService);
+    });
+
+    it('should call the UI config service when selected columns change', () => {
+      component.columns = [
+        new SkyGridColumnModel(component.template, {
+          id: 'column1',
+          heading: 'Column 1'
+        }),
+        new SkyGridColumnModel(component.template, {
+          id: 'column2',
+          heading: 'Column 2'
+        })
+      ];
+
+      fixture.detectChanges();
+
+      const spy = spyOn(uiConfigService, 'setConfig').and.callThrough();
+
+      component.settingsKey = 'foobar';
+      component.selectedColumnIds = ['column1', 'column2'];
+      fixture.detectChanges();
+
+      expect(spy.calls.count()).toEqual(1);
+
+      spy.calls.reset();
+      component.selectedColumnIds = ['column2', 'column1'];
+      fixture.detectChanges();
+
+      expect(spy.calls.count()).toEqual(1);
+    });
+
+    it('should fetch UI config on init', () => {
+      const spy = spyOn(uiConfigService, 'getConfig').and.callThrough();
+
+      component.settingsKey = 'foobar';
+      fixture.detectChanges();
+
+      expect(spy).toHaveBeenCalledWith('foobar');
+    });
+
+    it('should handle errors when setting config', () => {
+      const spy = spyOn(console, 'warn');
+
+      spyOn(uiConfigService, 'setConfig').and.callFake(() => {
+        return Observable.throw(new Error());
+      });
+
+      component.columns = [
+        new SkyGridColumnModel(component.template, {
+          id: 'column1',
+          heading: 'Column 1'
+        }),
+        new SkyGridColumnModel(component.template, {
+          id: 'column2',
+          heading: 'Column 2'
+        })
+      ];
+
+      fixture.detectChanges();
+
+      component.settingsKey = 'foobar';
+      component.selectedColumnIds = ['column1', 'column2'];
+      fixture.detectChanges();
+
+      expect(spy).toHaveBeenCalledWith('Could not save grid settings.');
+    });
+
+    it('should suppress errors when getting config', () => {
+      spyOn(uiConfigService, 'getConfig').and.callFake(() => {
+        return Observable.throw(new Error());
+      });
+
+      const spy = spyOn(fixture.componentInstance.grid as any, 'initColumns').and.callThrough();
+
+      component.columns = [
+        new SkyGridColumnModel(component.template, {
+          id: 'column1',
+          heading: 'Column 1'
+        })
+      ];
+
+      component.settingsKey = 'foobar';
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(spy).toHaveBeenCalled();
+      });
+    });
   });
 });