97732 Context help toggle button only appears when there is at least one element with a tooltip on the page

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

@@ -1,12 +1,10 @@
-<div>
+<div *ngIf="buttonVisible$ | async">
   <a href="javascript:void(0);"
      role="button"
      (click)="onClick()"
-     [attr.aria-label]="((buttonDisabled$ | async) ? 'nav.context-help-toggle-disabled' : 'nav.context-help-toggle') | translate"
+     [attr.aria-label]="'nav.context-help-toggle' | translate"
-     [title]="((buttonDisabled$ | async) ? 'nav.context-help-toggle-disabled' : 'nav.context-help-toggle') | translate"
+     [title]="'nav.context-help-toggle' | translate"
   >
-    <i class="fas fa-lg fa-fw fa-question-circle"
+    <i class="fas fa-lg fa-fw fa-question-circle ds-context-help-toggle"></i>
-       [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-enabled {
+.ds-context-help-toggle {
   color: var(--ds-header-icon-color);
   background-color: var(--ds-header-bg);
 
@@ -6,8 +6,3 @@
     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

@@ -13,9 +13,9 @@ describe('ContextHelpToggleComponent', () => {
 
   beforeEach(async () => {
     contextHelpService = jasmine.createSpyObj('contextHelpService', [
-      'contextHelpEmpty$', 'toggleIcons'
+      'tooltipCount$', 'toggleIcons'
     ]);
-    contextHelpService.contextHelpEmpty$.and.returnValue(observableOf(true));
+    contextHelpService.tooltipCount$.and.returnValue(observableOf(0));
     await TestBed.configureTestingModule({
       declarations: [ ContextHelpToggleComponent ],
       providers: [
@@ -37,19 +37,17 @@ describe('ContextHelpToggleComponent', () => {
   });
 
   describe('if there are no elements on the page with a tooltip', () => {
-    it('clicking the button does not toggle context help icon visibility', fakeAsync(() => {
+    it('the toggle should not be visible', fakeAsync(() => {
       fixture.detectChanges();
       fixture.whenStable().then(() => {
-        fixture.debugElement.query(By.css('a')).nativeElement.click();
+        expect(fixture.debugElement.query(By.css('div'))).toBeNull();
-        tick();
-        expect(contextHelpService.toggleIcons).toHaveBeenCalledTimes(0);
       });
     }));
   });
 
   describe('if there are elements on the page with a tooltip', () => {
     beforeEach(() => {
-      contextHelpService.contextHelpEmpty$.and.returnValue(observableOf(false));
+      contextHelpService.tooltipCount$.and.returnValue(observableOf(1));
       fixture.detectChanges();
     });
 

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

@@ -2,6 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ContextHelpService } from '../../shared/context-help.service';
 import { Observable, Subscription, BehaviorSubject } from 'rxjs';
 import { combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 /**
  * Renders a "context help toggle" button that toggles the visibility of tooltip buttons on the page.
@@ -13,23 +14,17 @@ import { combineLatest } from 'rxjs';
   styleUrls: ['./context-help-toggle.component.scss']
 })
 export class ContextHelpToggleComponent implements OnInit, OnDestroy {
-  buttonDisabled$: Observable<boolean>;
+  buttonVisible$: Observable<boolean>;
 
   constructor(
     private contextHelpService: ContextHelpService,
   ) { }
 
-  private clickEvents: BehaviorSubject<null> = new BehaviorSubject(null);
   private subs: Subscription[];
 
   ngOnInit(): void {
-    this.buttonDisabled$ = this.contextHelpService.contextHelpEmpty$();
+    this.buttonVisible$ = this.contextHelpService.tooltipCount$().pipe(map(x => x > 0));
-    this.subs = [
+    this.subs = [this.buttonVisible$.subscribe()];
-      this.buttonDisabled$.subscribe(),
-      combineLatest([this.clickEvents, this.buttonDisabled$])
-        .subscribe(([_, disabled]) =>
-          disabled ? null : this.contextHelpService.toggleIcons())
-    ];
   }
 
   ngOnDestroy() {
@@ -37,6 +32,6 @@ export class ContextHelpToggleComponent implements OnInit, OnDestroy {
   }
 
   onClick() {
-    this.clickEvents.next(null);
+    this.contextHelpService.toggleIcons();
   }
 }

src/app/shared/context-help.service.ts

@@ -54,9 +54,9 @@ export class ContextHelpService {
   /**
    * Observable that yields true iff there are currently no context help entries in the store.
    */
-  contextHelpEmpty$(): Observable<boolean> {
+  tooltipCount$(): Observable<number> {
     return this.store.pipe(select(allContextHelpSelector))
-      .pipe(map((models: ContextHelpModels) => Object.keys(models).length === 0));
+      .pipe(map((models: ContextHelpModels) => Object.keys(models).length));
   }
 
   /**

src/assets/i18n/en.json5

@@ -2680,8 +2680,6 @@
 
   "nav.context-help-toggle": "Toggle context help",
 
-  "nav.context-help-toggle-disabled": "No context help available on this page",
-
   "nav.language": "Language switch",
 
   "nav.login": "Log In",