97732 Context help button now disabled when there are no tooltips available on the page

src/app/header/context-help-toggle/context-help-toggle.component.html

@@ -2,9 +2,11 @@
   <a href="javascript:void(0);"
      role="button"
      (click)="onClick()"
-     [attr.aria-label]="'nav.context-help-toggle' | translate"
-     [title]="'nav.context-help-toggle' | translate"
+     [attr.aria-label]="((buttonDisabled$ | async) ? 'nav.context-help-toggle-disabled' : 'nav.context-help-toggle') | translate"
+     [title]="((buttonDisabled$ | async) ? 'nav.context-help-toggle-disabled' : 'nav.context-help-toggle') | translate"
   >
-    <i class="fas fa-lg fa-fw fa-question-circle ds-context-help-toggle"></i>
+    <i class="fas fa-lg fa-fw fa-question-circle"
+       [class]="(buttonDisabled$ | async) ? 'ds-context-help-toggle-disabled' : 'ds-context-help-toggle-enabled'"
+    ></i>
   </a>
 </div>

src/app/header/context-help-toggle/context-help-toggle.component.scss

@@ -1,4 +1,4 @@
-.ds-context-help-toggle {
+.ds-context-help-toggle-enabled {
   color: var(--ds-header-icon-color);
   background-color: var(--ds-header-bg);
 
@@ -6,3 +6,8 @@
     color: var(--ds-header-icon-color-hover);
   }
 }
+
+.ds-context-help-toggle-disabled {
+  color: grey;
+  background-color: var(--ds-header-bg);
+}

src/app/header/context-help-toggle/context-help-toggle.component.spec.ts

@@ -3,17 +3,19 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ContextHelpToggleComponent } from './context-help-toggle.component';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { ContextHelpService } from '../../shared/context-help.service';
-import { of as observableOf } from 'rxjs';
+import { of as observableOf, BehaviorSubject } from 'rxjs';
 import { By } from '@angular/platform-browser';
 
 describe('ContextHelpToggleComponent', () => {
   let component: ContextHelpToggleComponent;
   let fixture: ComponentFixture<ContextHelpToggleComponent>;
   let contextHelpService;
+  let contextHelpEmpty$ = new BehaviorSubject(true);
 
   beforeEach(async () => {
     contextHelpService = jasmine.createSpyObj('contextHelpService',
-      ['toggleIcons']);
+      ['toggleIcons', 'contextHelpEmpty$']);
+    contextHelpService.contextHelpEmpty$.and.returnValue(contextHelpEmpty$);
     await TestBed.configureTestingModule({
       declarations: [ ContextHelpToggleComponent ],
       providers: [
@@ -34,8 +36,28 @@ describe('ContextHelpToggleComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('clicking the button should toggle context help icon visibility', () => {
-    fixture.debugElement.query(By.css('a')).nativeElement.click();
-    expect(contextHelpService.toggleIcons).toHaveBeenCalled();
+  describe('if there are elements on the page with a tooltip', () => {
+    beforeEach(() => {
+      contextHelpEmpty$.next(false);
+      fixture.detectChanges();
+    });
+
+    it('clicking the button should toggle context help icon visibility', () => {
+      fixture.whenStable().then((done) => {
+        fixture.debugElement.query(By.css('a')).nativeElement.click();
+        expect(contextHelpService.toggleIcons).toHaveBeenCalled();
+        done();
+      });
+    });
+  });
+
+  describe('if there are no elements on the page with a tooltip', () => {
+    it('clicking the button does not toggle context help icon visibility', () => {
+      fixture.whenStable().then((done) => {
+        fixture.debugElement.query(By.css('a')).nativeElement.click();
+        expect(contextHelpService.toggleIcons).toHaveBeenCalledTimes(0);
+        done();
+      });
+    });
   });
 });

src/app/header/context-help-toggle/context-help-toggle.component.ts

@@ -1,23 +1,40 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ContextHelpService } from '../../shared/context-help.service';
 import { TranslateService } from '@ngx-translate/core';
+import { Observable, Subscription, BehaviorSubject } from 'rxjs';
+import { combineLatest } from 'rxjs';
 
 @Component({
   selector: 'ds-context-help-toggle',
   templateUrl: './context-help-toggle.component.html',
   styleUrls: ['./context-help-toggle.component.scss']
 })
-export class ContextHelpToggleComponent implements OnInit {
+export class ContextHelpToggleComponent implements OnInit, OnDestroy {
+  buttonDisabled$: Observable<boolean>;
 
   constructor(
     private contextHelpService: ContextHelpService,
     private translateService: TranslateService
   ) { }
 
+  private clickEvents: BehaviorSubject<null> = new BehaviorSubject(null);
+  private subs: Subscription[];
+
   ngOnInit(): void {
+    this.buttonDisabled$ = this.contextHelpService.contextHelpEmpty$();
+    this.subs = [
+      this.buttonDisabled$.subscribe(),
+      combineLatest([this.clickEvents, this.buttonDisabled$])
+        .subscribe(([_, disabled]) =>
+          disabled ? null : this.contextHelpService.toggleIcons())
+    ];
+  }
+
+  ngOnDestroy() {
+    this.subs.forEach(sub => sub.unsubscribe());
   }
 
   onClick() {
-    this.contextHelpService.toggleIcons();
+    this.clickEvents.next(null);
   }
 }