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

src/app/access-control/group-registry/group-form/group-form.component.html

@@ -9,15 +9,17 @@
       </ng-template>
 
       <ng-template #editheader>
-        <h2 class="border-bottom pb-2"
+        <h2 class="border-bottom pb-2">
+          <span
             *dsContextHelp="{
               content: 'admin.access-control.groups.form.tooltip.editGroupPage',
               id: 'edit-group-page',
-              iconPlacement: 'left',
+              iconPlacement: 'right',
-              tooltipPlacement: ['left', 'bottom']
+              tooltipPlacement: ['right', 'bottom']
             }"
-        >
+          >
-          {{messagePrefix + '.head.edit' | translate}}
+            {{messagePrefix + '.head.edit' | translate}}
+          </span>
         </h2>
       </ng-template>
 

src/app/access-control/group-registry/group-form/members-list/members-list.component.html

@@ -1,15 +1,17 @@
 <ng-container>
   <h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>
 
-  <h4 id="search" class="border-bottom pb-2"
+  <h4 id="search" class="border-bottom pb-2">
+    <span
       *dsContextHelp="{
         content: 'admin.access-control.groups.form.tooltip.editGroup.addEpeople',
         id: 'edit-group-add-epeople',
-        iconPlacement: 'left',
+        iconPlacement: 'right',
-        tooltipPlacement: ['left', 'top', 'bottom']
+        tooltipPlacement: ['top', 'right', 'bottom']
       }"
-  >
+    >
-    {{messagePrefix + '.search.head' | translate}}
+      {{messagePrefix + '.search.head' | translate}}
+    </span>
   </h4>
 
   <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">

src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html

@@ -1,15 +1,17 @@
 <ng-container>
   <h3 class="border-bottom pb-2">{{messagePrefix + '.head' | translate}}</h3>
 
-  <h4 id="search" class="border-bottom pb-2"
+  <h4 id="search" class="border-bottom pb-2">
-      *dsContextHelp="{
+    <span *dsContextHelp="{
-        content: 'admin.access-control.groups.form.tooltip.editGroup.addSubgroups',
+            content: 'admin.access-control.groups.form.tooltip.editGroup.addSubgroups',
-        id: 'edit-group-add-subgroups',
+            id: 'edit-group-add-subgroups',
-        iconPlacement: 'left',
+            iconPlacement: 'right',
-        tooltipPlacement: ['left', 'top', 'bottom']
+            tooltipPlacement: ['top', 'right', 'bottom']
-      }"
+          }"
-  >
+    >
-    {{messagePrefix + '.search.head' | translate}}
+      {{messagePrefix + '.search.head' | translate}}
+    </span>
+
   </h4>
   <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
     <div class="flex-grow-1 mr-3">

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"
+     [attr.aria-label]="((buttonDisabled$ | async) ? 'nav.context-help-toggle-disabled' : 'nav.context-help-toggle') | translate"
-     [title]="'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', () => {
+  describe('if there are elements on the page with a tooltip', () => {
-    fixture.debugElement.query(By.css('a')).nativeElement.click();
+    beforeEach(() => {
-    expect(contextHelpService.toggleIcons).toHaveBeenCalled();
+      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);
   }
 }

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ContextHelp } from './context-help.model';
 import { Store, createFeatureSelector, createSelector, select, MemoizedSelector } from '@ngrx/store';
-import { ContextHelpState } from './context-help.reducer';
+import { ContextHelpState, ContextHelpModels } from './context-help.reducer';
 import {
   ContextHelpToggleIconsAction,
   ContextHelpAddAction,
@@ -11,6 +11,7 @@ import {
   ContextHelpToggleTooltipAction
 } from './context-help.actions';
 import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 const contextHelpStateSelector =
   createFeatureSelector<ContextHelpState>('contextHelp');
@@ -23,6 +24,10 @@ const contextHelpSelector =
     contextHelpStateSelector,
     (state: ContextHelpState) => state.models[id]
   );
+const allContextHelpSelector = createSelector(
+  contextHelpStateSelector,
+  ((state: ContextHelpState) => state.models)
+);
 
 @Injectable({
   providedIn: 'root'
@@ -46,6 +51,14 @@ export class ContextHelpService {
     return this.store.pipe(select(contextHelpSelector(id)));
   }
 
+  /**
+   * Observable that yields true iff there are currently no context help entries in the store.
+   */
+  contextHelpEmpty$(): Observable<boolean> {
+    return this.store.pipe(select(allContextHelpSelector))
+      .pipe(map((models: ContextHelpModels) => Object.keys(models).length === 0));
+  }
+
   /**
    * Toggles the visibility of all context help icons.
    */

src/assets/i18n/en.json5

@@ -2680,6 +2680,8 @@
 
   "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",