feat(components/pages): add helpKey input to the page component (#2739

)

apps/code-examples/src/app/code-examples/pages/page/list-page-list-layout-demo/demo.component.html

@@ -1,4 +1,4 @@
-<sky-page layout="list">
+<sky-page layout="list" helpKey="demo-help">
   <sky-page-header pageTitle="Dashboards" />
   <sky-page-content>
     <app-list-page-content />

apps/code-examples/src/app/code-examples/pages/page/list-page-list-layout-demo/demo.component.spec.ts

@@ -1,6 +1,10 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  SkyHelpTestingController,
+  SkyHelpTestingModule,
+} from '@skyux/core/testing';
 import { SkyPageHarness } from '@skyux/pages/testing';
 
 import { DemoComponent } from './demo.component';
@@ -9,18 +13,20 @@ describe('List page list layout demo', () => {
   async function setupTest(): Promise<{
     pageHarness: SkyPageHarness;
     fixture: ComponentFixture<DemoComponent>;
+    helpController: SkyHelpTestingController;
   }> {
     const fixture = TestBed.createComponent(DemoComponent);
 
     const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
     const pageHarness = await loader.getHarness(SkyPageHarness);
+    const helpController = TestBed.inject(SkyHelpTestingController);
 
-    return { pageHarness, fixture };
+    return { pageHarness, fixture, helpController };
   }
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [DemoComponent, NoopAnimationsModule],
+      imports: [DemoComponent, SkyHelpTestingModule, NoopAnimationsModule],
     });
   });
 
@@ -39,4 +45,10 @@ describe('List page list layout demo', () => {
       'Dashboards',
     );
   });
+
+  it('should have the correct help key', async () => {
+    const { helpController } = await setupTest();
+
+    helpController.expectCurrentHelpKey('demo-help');
+  });
 });

apps/code-examples/src/app/code-examples/pages/page/list-page-tabs-layout-demo/demo.component.html

@@ -1,4 +1,4 @@
-<sky-page layout="tabs">
+<sky-page layout="tabs" helpKey="demo-help">
   <sky-page-header pageTitle="Contacts" />
   <sky-page-content>
     <app-list-page-content />

apps/code-examples/src/app/code-examples/pages/page/list-page-tabs-layout-demo/demo.component.spec.ts

@@ -2,6 +2,10 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
+import {
+  SkyHelpTestingController,
+  SkyHelpTestingModule,
+} from '@skyux/core/testing';
 import { SkyPageHarness } from '@skyux/pages/testing';
 
 import { DemoComponent } from './demo.component';
@@ -10,18 +14,25 @@ describe('List page tabs layout demo', () => {
   async function setupTest(): Promise<{
     pageHarness: SkyPageHarness;
     fixture: ComponentFixture<DemoComponent>;
+    helpController: SkyHelpTestingController;
   }> {
     const fixture = TestBed.createComponent(DemoComponent);
 
     const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
     const pageHarness = await loader.getHarness(SkyPageHarness);
+    const helpController = TestBed.inject(SkyHelpTestingController);
 
-    return { pageHarness, fixture };
+    return { pageHarness, fixture, helpController };
   }
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [DemoComponent, NoopAnimationsModule, RouterTestingModule],
+      imports: [
+        DemoComponent,
+        SkyHelpTestingModule,
+        NoopAnimationsModule,
+        RouterTestingModule,
+      ],
     });
   });
 
@@ -40,4 +51,10 @@ describe('List page tabs layout demo', () => {
       'Contacts',
     );
   });
+
+  it('should have the correct help key', async () => {
+    const { helpController } = await setupTest();
+
+    helpController.expectCurrentHelpKey('demo-help');
+  });
 });

apps/code-examples/src/app/code-examples/pages/page/record-page-blocks-layout-demo/demo.component.html

@@ -1,4 +1,4 @@
-<sky-page layout="blocks">
+<sky-page layout="blocks" helpKey="demo-help">
   <sky-page-header
     pageTitle="$500 pledge"
     [parentLink]="{

apps/code-examples/src/app/code-examples/pages/page/record-page-blocks-layout-demo/demo.component.spec.ts

@@ -2,6 +2,10 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
+import {
+  SkyHelpTestingController,
+  SkyHelpTestingModule,
+} from '@skyux/core/testing';
 import { SkyPageHarness } from '@skyux/pages/testing';
 
 import { DemoComponent } from './demo.component';
@@ -10,18 +14,25 @@ describe('Record page blocks layout demo', () => {
   async function setupTest(): Promise<{
     pageHarness: SkyPageHarness;
     fixture: ComponentFixture<DemoComponent>;
+    helpController: SkyHelpTestingController;
   }> {
     const fixture = TestBed.createComponent(DemoComponent);
 
     const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
     const pageHarness = await loader.getHarness(SkyPageHarness);
+    const helpController = TestBed.inject(SkyHelpTestingController);
 
-    return { pageHarness, fixture };
+    return { pageHarness, fixture, helpController };
   }
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [DemoComponent, NoopAnimationsModule, RouterTestingModule],
+      imports: [
+        DemoComponent,
+        SkyHelpTestingModule,
+        NoopAnimationsModule,
+        RouterTestingModule,
+      ],
     });
   });
 
@@ -46,4 +57,10 @@ describe('Record page blocks layout demo', () => {
       'Pledges',
     );
   });
+
+  it('should have the correct help key', async () => {
+    const { helpController } = await setupTest();
+
+    helpController.expectCurrentHelpKey('demo-help');
+  });
 });

apps/code-examples/src/app/code-examples/pages/page/record-page-tabs-layout-demo/demo.component.html

@@ -1,4 +1,4 @@
-<sky-page layout="tabs">
+<sky-page layout="tabs" helpKey="demo-help">
   <sky-page-header pageTitle="Charlene Conners">
     <sky-page-header-alerts>
       <sky-alert alertType="warning" descriptionType="warning">

apps/code-examples/src/app/code-examples/pages/page/record-page-tabs-layout-demo/demo.component.spec.ts

@@ -2,6 +2,10 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
+import {
+  SkyHelpTestingController,
+  SkyHelpTestingModule,
+} from '@skyux/core/testing';
 import { SkyPageHarness } from '@skyux/pages/testing';
 
 import { DemoComponent } from './demo.component';
@@ -10,18 +14,25 @@ describe('Record page tabs layout demo', () => {
   async function setupTest(): Promise<{
     pageHarness: SkyPageHarness;
     fixture: ComponentFixture<DemoComponent>;
+    helpController: SkyHelpTestingController;
   }> {
     const fixture = TestBed.createComponent(DemoComponent);
 
     const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
     const pageHarness = await loader.getHarness(SkyPageHarness);
+    const helpController = TestBed.inject(SkyHelpTestingController);
 
-    return { pageHarness, fixture };
+    return { pageHarness, fixture, helpController };
   }
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [DemoComponent, NoopAnimationsModule, RouterTestingModule],
+      imports: [
+        DemoComponent,
+        SkyHelpTestingModule,
+        NoopAnimationsModule,
+        RouterTestingModule,
+      ],
     });
   });
 
@@ -42,4 +53,10 @@ describe('Record page tabs layout demo', () => {
       'Charlene Conners',
     );
   });
+
+  it('should have the correct help key', async () => {
+    const { helpController } = await setupTest();
+
+    helpController.expectCurrentHelpKey('demo-help');
+  });
 });

apps/code-examples/src/app/code-examples/pages/page/split-view-page-fit-layout-demo/demo.component.html

@@ -1,4 +1,4 @@
-<sky-page layout="fit">
+<sky-page layout="fit" helpKey="demo-help">
   <sky-page-header
     pageTitle="Expenses to approve"
     [parentLink]="{

apps/code-examples/src/app/code-examples/pages/page/split-view-page-fit-layout-demo/demo.component.spec.ts

@@ -2,6 +2,10 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
+import {
+  SkyHelpTestingController,
+  SkyHelpTestingModule,
+} from '@skyux/core/testing';
 import { SkyPageHarness } from '@skyux/pages/testing';
 
 import { DemoComponent } from './demo.component';
@@ -10,18 +14,25 @@ describe('Split view page fit layout demo', () => {
   async function setupTest(): Promise<{
     pageHarness: SkyPageHarness;
     fixture: ComponentFixture<DemoComponent>;
+    helpController: SkyHelpTestingController;
   }> {
     const fixture = TestBed.createComponent(DemoComponent);
 
     const loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
     const pageHarness = await loader.getHarness(SkyPageHarness);
+    const helpController = TestBed.inject(SkyHelpTestingController);
 
-    return { pageHarness, fixture };
+    return { pageHarness, fixture, helpController };
   }
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [DemoComponent, NoopAnimationsModule, RouterTestingModule],
+      imports: [
+        DemoComponent,
+        SkyHelpTestingModule,
+        NoopAnimationsModule,
+        RouterTestingModule,
+      ],
     });
   });
 
@@ -32,4 +43,10 @@ describe('Split view page fit layout demo', () => {
 
     await expectAsync(pageHarness.getLayout()).toBeResolvedTo('fit');
   });
+
+  it('should have the correct help key', async () => {
+    const { helpController } = await setupTest();
+
+    helpController.expectCurrentHelpKey('demo-help');
+  });
 });

libs/components/pages/src/lib/modules/page/page.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { expect } from '@skyux-sdk/testing';
-import { SkyLayoutHostService } from '@skyux/core';
+import { SkyHelpService, SkyLayoutHostService } from '@skyux/core';
+import { SkyHelpTestingModule } from '@skyux/core/testing';
 
 import { SkyPageComponent } from './page.component';
 import { SkyPageModule } from './page.module';
@@ -27,7 +28,7 @@ describe('Page component', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [SkyPageModule],
+      imports: [SkyPageModule, SkyHelpTestingModule],
     });
 
     styleEl = document.createElement('style');
@@ -84,4 +85,28 @@ describe('Page component', () => {
 
     fixture.destroy();
   });
+
+  it(`should notify the help service that a page's default help key has been set when the 'helpKey' input is set`, () => {
+    const helpService = TestBed.inject(SkyHelpService);
+    const updateHelpSpy = spyOn(helpService, 'updateHelp').and.stub();
+
+    const fixture = TestBed.createComponent(SkyPageComponent);
+    fixture.detectChanges();
+
+    expect(updateHelpSpy).not.toHaveBeenCalled();
+
+    fixture.componentInstance.helpKey = 'test-help';
+    fixture.detectChanges();
+
+    expect(updateHelpSpy).toHaveBeenCalledWith({
+      pageDefaultHelpKey: 'test-help',
+    });
+
+    fixture.destroy();
+
+    expect(updateHelpSpy).toHaveBeenCalledWith({
+      pageDefaultHelpKey: undefined,
+    });
+    expect(updateHelpSpy).toHaveBeenCalledTimes(2);
+  });
 });

libs/components/pages/src/lib/modules/page/page.component.ts

@@ -6,7 +6,11 @@ import {
   OnInit,
   inject,
 } from '@angular/core';
-import { SkyLayoutHostForChildArgs, SkyLayoutHostService } from '@skyux/core';
+import {
+  SkyHelpService,
+  SkyLayoutHostForChildArgs,
+  SkyLayoutHostService,
+} from '@skyux/core';
 
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -44,6 +48,14 @@ export class SkyPageComponent implements OnInit, OnDestroy {
     this.#updateCssClass();
   }
 
+  /**
+   * A help key that identifies the page's default [global help](https://developer.blackbaud.com/skyux/learn/develop/global-help) content to display.
+   */
+  @Input()
+  public set helpKey(value: string | undefined) {
+    this.#helpSvc?.updateHelp({ pageDefaultHelpKey: value });
+  }
+
   @HostBinding('class')
   public cssClass = LAYOUT_CLASS_DEFAULT;
 
@@ -54,6 +66,7 @@ export class SkyPageComponent implements OnInit, OnDestroy {
 
   #themeAdapter = inject(SkyPageThemeAdapterService);
   #layoutHostSvc = inject(SkyLayoutHostService);
+  #helpSvc = inject(SkyHelpService, { optional: true });
 
   public ngOnInit(): void {
     this.#themeAdapter.addTheme();
@@ -71,6 +84,8 @@ export class SkyPageComponent implements OnInit, OnDestroy {
 
     this.#ngUnsubscribe.next();
     this.#ngUnsubscribe.complete();
+
+    this.#helpSvc?.updateHelp({ pageDefaultHelpKey: undefined });
   }
 
   #updateCssClass(): void {