Merge branch 'feature-context-help-7.4' into w2p-97732_feature-context-help-service

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

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ContextHelpToggleComponent } from './context-help-toggle.component';
-import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { ContextHelpService } from '../../shared/context-help.service';
-import { of as observableOf, BehaviorSubject } from 'rxjs';
+import { 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);
+  const contextHelpEmpty$ = new BehaviorSubject(true);
 
   beforeEach(async () => {
     contextHelpService = jasmine.createSpyObj('contextHelpService',

src/app/shared/context-help-wrapper/context-help-wrapper.component.spec.ts

@@ -5,7 +5,7 @@ import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
 import { ContextHelpService } from '../context-help.service';
 import { ContextHelp } from '../context-help.model';
-import { Component, Input, ViewChild, DebugElement } from '@angular/core';
+import { Component, Input, DebugElement } from '@angular/core';
 import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
 import { PlacementDir } from './placement-dir.model';
 import { By } from '@angular/platform-browser';
@@ -53,9 +53,9 @@ describe('ContextHelpWrapperComponent', () => {
   let shouldShowIcons$: BehaviorSubject<boolean>;
 
   function makeWrappedElement(): HTMLElement {
-    let el: HTMLElement = document.createElement('div')
-    el.innerHTML = 'example element';
-    return el;
+    const wrapped: HTMLElement = document.createElement('div');
+    wrapped.innerHTML = 'example element';
+    return wrapped;
   }
 
   beforeEach(waitForAsync( () => {
@@ -96,8 +96,8 @@ describe('ContextHelpWrapperComponent', () => {
     fixture = TestBed.createComponent(TemplateComponent);
     el = fixture.debugElement;
     templateComponent = fixture.componentInstance;
-    templateComponent.content = 'lorem'
-    templateComponent.id = 'test-tooltip'
+    templateComponent.content = 'lorem';
+    templateComponent.id = 'test-tooltip';
     templateComponent.tooltipPlacement = ['bottom'];
     templateComponent.iconPlacement = 'left';
     wrapperComponent = el.query(By.css('ds-context-help-wrapper')).componentInstance;
@@ -111,7 +111,7 @@ describe('ContextHelpWrapperComponent', () => {
 
   it('should not show the context help icon while icon visibility is not turned on', (done) => {
     fixture.whenStable().then(() => {
-      let wrapper = el.query(By.css('ds-context-help-wrapper')).nativeElement;
+      const wrapper = el.query(By.css('ds-context-help-wrapper')).nativeElement;
       expect(wrapper.children.length).toBe(0);
       done();
     });
@@ -127,9 +127,9 @@ describe('ContextHelpWrapperComponent', () => {
 
     it('should show the context help button', (done) => {
       fixture.whenStable().then(() => {
-        let wrapper = el.query(By.css('ds-context-help-wrapper')).nativeElement;
+        const wrapper = el.query(By.css('ds-context-help-wrapper')).nativeElement;
         expect(wrapper.children.length).toBe(1);
-        let [i] = wrapper.children;
+        const [i] = wrapper.children;
         expect(i.tagName).toBe('I');
         done();
       });
@@ -160,7 +160,7 @@ describe('ContextHelpWrapperComponent', () => {
         const nodeList: NodeList = fixture.debugElement.query(By.css('.ds-context-help-content'))
           .nativeElement
           .childNodes;
-        const relevantNodes = Array.from(nodeList).filter(node => node.nodeType != Node.COMMENT_NODE);
+        const relevantNodes = Array.from(nodeList).filter(node => node.nodeType !== Node.COMMENT_NODE);
         expect(relevantNodes.length).toBe(4);
 
         const [text1, link1, text2, link2] = relevantNodes;
@@ -190,7 +190,7 @@ describe('ContextHelpWrapperComponent', () => {
         const nodeList: NodeList = fixture.debugElement.query(By.css('.ds-context-help-content'))
           .nativeElement
           .childNodes;
-        const relevantNodes = Array.from(nodeList).filter(node => node.nodeType != Node.COMMENT_NODE);
+        const relevantNodes = Array.from(nodeList).filter(node => node.nodeType !== Node.COMMENT_NODE);
         expect(relevantNodes.length).toBe(1);
 
         const [text] = relevantNodes;

src/app/shared/context-help-wrapper/context-help-wrapper.component.ts

@@ -1,10 +1,9 @@
-import { Component, Input, OnInit, TemplateRef, OnDestroy, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, TemplateRef, OnDestroy, ViewChild } from '@angular/core';
 import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable, of as observableOf, Subscription, BehaviorSubject, combineLatest } from 'rxjs';
+import { Observable, Subscription, BehaviorSubject, combineLatest } from 'rxjs';
 import { map, distinctUntilChanged, mergeMap } from 'rxjs/operators';
 import { PlacementDir } from './placement-dir.model';
-import content from '*.scss';
 import { ContextHelpService } from '../context-help.service';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { hasValueOperator } from '../empty.util';
@@ -55,8 +54,8 @@ export class ContextHelpWrapperComponent implements OnInit, OnDestroy {
 
   tooltip: NgbTooltip;
 
-  @Input() set content(content : string) {
-    this.content$.next(content);
+  @Input() set content(translateKey: string) {
+    this.content$.next(translateKey);
   }
   private content$: BehaviorSubject<string | undefined> = new BehaviorSubject(undefined);
 
@@ -72,11 +71,11 @@ export class ContextHelpWrapperComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.parsedContent$ = combineLatest([
-      this.content$.pipe(distinctUntilChanged(), mergeMap(content => this.translateService.get(content))),
+      this.content$.pipe(distinctUntilChanged(), mergeMap(translateKey => this.translateService.get(translateKey))),
       this.dontParseLinks$.pipe(distinctUntilChanged())
     ]).pipe(
-      map(([content, dontParseLinks]) =>
-        dontParseLinks ? [content] : this.parseLinks(content))
+      map(([text, dontParseLinks]) =>
+        dontParseLinks ? [text] : this.parseLinks(text))
     );
     this.shouldShowIcon$ = this.contextHelpService.shouldShowIcons$();
     this.subs.always = [this.parsedContent$.subscribe(), this.shouldShowIcon$.subscribe()];
@@ -136,7 +135,7 @@ export class ContextHelpWrapperComponent implements OnInit, OnDestroy {
    *   {href: "https://youtube.com", text: "so is this"}
    * ]
    */
-  private parseLinks(content: string): ParsedContent {
+  private parseLinks(text: string): ParsedContent {
     // Implementation note: due to `matchAll` method on strings not being available for all versions,
     // separate "split" and "parse" steps are needed.
 
@@ -152,7 +151,7 @@ export class ContextHelpWrapperComponent implements OnInit, OnDestroy {
     // {href: string, text: string} objects.
     const parseRegexp = /^\[([^\]]*)\]\(([^\)]*)\)$/;
 
-    return content.match(splitRegexp).map((substring: string) => {
+    return text.match(splitRegexp).map((substring: string) => {
       const match = substring.match(parseRegexp);
       return match === null
         ? substring

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

@@ -1,3 +1,5 @@
+/* eslint-disable max-classes-per-file */
+
 import { Action } from '@ngrx/store';
 import { type } from './ngrx/type';
 import { ContextHelp } from './context-help.model';

src/app/shared/context-help.directive.spec.ts

@@ -1,14 +1,12 @@
-import { Component, DebugElement, Input } from '@angular/core';
-import { ComponentFixture, TestBed, getTestBed, waitForAsync } from '@angular/core/testing';
-import { of as observableOf, Observable, BehaviorSubject } from 'rxjs';
+import { Component, Input } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { of as observableOf, BehaviorSubject } from 'rxjs';
 import { ContextHelpDirective, ContextHelpDirectiveInput } from './context-help.directive';
 import { TranslateService } from '@ngx-translate/core';
 import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { ContextHelpService } from './context-help.service';
 import { ContextHelp } from './context-help.model';
-import { before } from 'lodash';
-import { By } from '@angular/platform-browser';
 
 @Component({
   template: `<div *dsContextHelp="contextHelpParams()">some text</div>`
@@ -62,7 +60,7 @@ describe('ContextHelpDirective', () => {
         { provide: ContextHelpService, useValue: contextHelpService }
       ],
       declarations: [TestComponent, ContextHelpWrapperComponent, ContextHelpDirective]
-    }).compileComponents()
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -85,10 +83,10 @@ describe('ContextHelpDirective', () => {
   it('should generate the context help wrapper component', (done) => {
     fixture.whenStable().then(() => {
       expect(fixture.nativeElement.children.length).toBe(1);
-      let [wrapper] = fixture.nativeElement.children;
+      const [wrapper] = fixture.nativeElement.children;
       expect(component).toBeDefined();
       expect(wrapper.tagName).toBe('DS-CONTEXT-HELP-WRAPPER');
-      expect(contextHelpService.add).toHaveBeenCalledWith(exampleContextHelp)
+      expect(contextHelpService.add).toHaveBeenCalledWith(exampleContextHelp);
       done();
     });
   });

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

@@ -2,10 +2,8 @@ import {
   ComponentFactoryResolver,
   ComponentRef,
   Directive,
-  ElementRef,
   Input,
   OnChanges,
-  OnInit,
   TemplateRef,
   ViewContainerRef,
   OnDestroy

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

@@ -1,4 +1,4 @@
 export class ContextHelp {
   id: string;
-  isTooltipVisible?: boolean = false;
+  isTooltipVisible = false;
 }

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

@@ -1,9 +1,9 @@
 import { ContextHelp } from './context-help.model';
 import { ContextHelpAction, ContextHelpActionTypes } from './context-help.actions';
 
-export type ContextHelpModels = {
+export interface ContextHelpModels {
   [id: string]: ContextHelp;
-};
+}
 
 export interface ContextHelpState {
   allIconsVisible: boolean;
@@ -40,8 +40,7 @@ export function contextHelpReducer(state: ContextHelpState = initialState, actio
   }
 }
 
-function modifyTooltipVisibility(state: ContextHelpState, id: string, modify: (vis: boolean) => boolean)
-  : ContextHelpState {
+function modifyTooltipVisibility(state: ContextHelpState, id: string, modify: (vis: boolean) => boolean): ContextHelpState {
   const {[id]: matchingModel, ...otherModels} = state.models;
   const modifiedModel = {...matchingModel, isTooltipVisible: modify(matchingModel.isTooltipVisible)};
   const newModels = {...otherModels, [id]: modifiedModel};

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

@@ -8,10 +8,9 @@ import { TestScheduler } from 'rxjs/testing';
 describe('ContextHelpService', () => {
   let service: ContextHelpService;
   let store;
-  let initialState;
   let testScheduler;
   const booleans = { f: false, t: true };
-  const mkContextHelp = (id: string) => ({ 0: {id, isTooltipVisible: false}, 1: {id, isTooltipVisible: true} })
+  const mkContextHelp = (id: string) => ({ 0: {id, isTooltipVisible: false}, 1: {id, isTooltipVisible: true} });
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -42,11 +41,13 @@ describe('ContextHelpService', () => {
   it('add and remove calls should be observable in getContextHelp$', () => {
     testScheduler.run(({cold, expectObservable}) => {
       const modifications = cold('-abAcCB', {
-        a: () => service.add({id: 'a'}), b: () => service.add({id: 'b'}), c: () => service.add({id: 'c'}),
+        a: () => service.add({id: 'a', isTooltipVisible: false}),
+        b: () => service.add({id: 'b', isTooltipVisible: false}),
+        c: () => service.add({id: 'c', isTooltipVisible: false}),
         A: () => service.remove('a'), B: () => service.remove('b'), C: () => service.remove('c'),
-      })
+      });
       modifications.subscribe(mod => mod());
-      const match = (id) => ({ 0: undefined, 1: {id} });
+      const match = (id) => ({ 0: undefined, 1: {id, isTooltipVisible: false} });
       expectObservable(service.getContextHelp$('a')).toBe('01-0---', match('a'));
       expectObservable(service.getContextHelp$('b')).toBe('0-1---0', match('b'));
       expectObservable(service.getContextHelp$('c')).toBe('0---10-', match('c'));