Get notification count in tab headings via local injector

frontend/src/app/core/global_search/tabs/global-search-tabs.component.ts

@@ -26,7 +26,12 @@
 // See docs/COPYRIGHT.rdoc for more details.
 //++
 
-import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  Injector,
+} from '@angular/core';
 import { Subscription } from 'rxjs';
 import { GlobalSearchService } from 'core-app/core/global_search/services/global-search.service';
 import { ScrollableTabsComponent } from 'core-app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component';
@@ -46,9 +51,12 @@ export class GlobalSearchTabsComponent extends ScrollableTabsComponent implement
 
   public classes:string[] = ['global-search--tabs', 'scrollable-tabs'];
 
-  constructor(readonly globalSearchService:GlobalSearchService,
+  constructor(
-    cdRef:ChangeDetectorRef) {
+    readonly globalSearchService:GlobalSearchService,
-    super(cdRef);
+    public injector: Injector,
+    cdRef:ChangeDetectorRef,
+  ) {
+    super(cdRef, injector);
   }
 
   ngOnInit() {

frontend/src/app/features/in-app-notifications/center/in-app-notification-center-page.component.ts

@@ -20,6 +20,9 @@ import { NotificationSettingsButtonComponent } from 'core-app/features/in-app-no
 import { ActivateFacetButtonComponent } from 'core-app/features/in-app-notifications/center/toolbar/facet/activate-facet-button.component';
 import { MarkAllAsReadButtonComponent } from 'core-app/features/in-app-notifications/center/toolbar/mark-all-as-read/mark-all-as-read-button.component';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
+import { InAppNotificationsQuery } from 'core-app/features/in-app-notifications/store/in-app-notifications.query';
+import { InAppNotificationsStore } from 'core-app/features/in-app-notifications/store/in-app-notifications.store';
+import { InAppNotificationsService } from 'core-app/features/in-app-notifications/store/in-app-notifications.service';
 import {
   BackRouteOptions,
   BackRoutingService,
@@ -31,6 +34,11 @@ import {
     '../../work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.sass',
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    InAppNotificationsService,
+    InAppNotificationsStore,
+    InAppNotificationsQuery,
+  ],
 })
 export class InAppNotificationCenterPageComponent extends UntilDestroyedMixin implements OnInit {
   text = {

frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts

@@ -6,12 +6,11 @@ import {
   OnInit,
 } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { InAppNotificationsQuery } from 'core-app/features/in-app-notifications/store/in-app-notifications.query';
-import { InAppNotificationsStore } from 'core-app/features/in-app-notifications/store/in-app-notifications.store';
-import { InAppNotificationsService } from 'core-app/features/in-app-notifications/store/in-app-notifications.service';
 import { NOTIFICATIONS_MAX_SIZE } from 'core-app/features/in-app-notifications/store/in-app-notification.model';
 import { map } from 'rxjs/operators';
 import { StateService } from '@uirouter/angular';
+import { InAppNotificationsQuery } from 'core-app/features/in-app-notifications/store/in-app-notifications.query';
+import { InAppNotificationsService } from 'core-app/features/in-app-notifications/store/in-app-notifications.service';
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
 import { UIRouterGlobals } from '@uirouter/core';
 
@@ -20,11 +19,6 @@ import { UIRouterGlobals } from '@uirouter/core';
   templateUrl: './in-app-notification-center.component.html',
   styleUrls: ['./in-app-notification-center.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    InAppNotificationsService,
-    InAppNotificationsStore,
-    InAppNotificationsQuery,
-  ],
 })
 export class InAppNotificationCenterComponent implements OnInit {
   activeFacet$ = this.ianQuery.activeFacet$;

frontend/src/app/features/work-packages/components/wp-tabs/services/wp-tabs/wp-tabs.service.ts

@@ -1,8 +1,9 @@
 import { Injectable, Injector } from '@angular/core';
+import { from } from 'rxjs';
+import { StateService } from '@uirouter/core';
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
 import { WpTabDefinition } from 'core-app/features/work-packages/components/wp-tabs/components/wp-tab-wrapper/tab';
 import { WorkPackageRelationsTabComponent } from 'core-app/features/work-packages/components/wp-single-view-tabs/relations-tab/relations-tab.component';
-import { StateService } from '@uirouter/core';
 import { WorkPackageOverviewTabComponent } from 'core-app/features/work-packages/components/wp-single-view-tabs/overview-tab/overview-tab.component';
 import { WorkPackageActivityTabComponent } from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-tab.component';
 import { WorkPackageWatchersTabComponent } from 'core-app/features/work-packages/components/wp-single-view-tabs/watchers-tab/watchers-tab.component';
@@ -45,7 +46,9 @@ export class WorkPackageTabsService {
       .map(
         (tab) => ({
           ...tab,
-          ...!!tab.count && { counter: tab.count(workPackage, this.injector) },
+          counter: tab.count
+            ? (injector:Injector) => tab.count!(workPackage, injector || this.injector)
+            : (_:Injector) => from([0]),
         }),
       );
   }

frontend/src/app/shared/components/tabs/content-tabs/content-tabs.component.ts

@@ -27,7 +27,11 @@
 //++
 
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Injector,
 } from '@angular/core';
 import { GonService } from 'core-app/core/gon/gon.service';
 import { StateService } from '@uirouter/core';
@@ -52,12 +56,15 @@ interface GonTab extends TabDefinition {
 export class ContentTabsComponent extends ScrollableTabsComponent {
   public classes:string[] = ['content--tabs', 'scrollable-tabs'];
 
-  constructor(readonly elementRef:ElementRef,
+  constructor(
+    readonly elementRef:ElementRef,
     readonly $state:StateService,
     readonly gon:GonService,
     cdRef:ChangeDetectorRef,
-    readonly I18n:I18nService) {
+    readonly I18n:I18nService,
-    super(cdRef);
+    public injector: Injector,
+  ) {
+    super(cdRef, injector);
 
     const gonTabs = JSON.parse((this.gon.get('contentTabs') as any).tabs);
     const currentTab = JSON.parse((this.gon.get('contentTabs') as any).selected);

frontend/src/app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component.html

@@ -38,10 +38,10 @@
           <span [textContent]="tab.name"></span>
           <op-tab-count
             *ngIf="tab.counter && tab.showCountAsBubble"
-            [counter]="tab.counter"
+            [count]="tab.counter(injector) | async"
             [attr.data-qa-selector]="'tab-counter-' + tab.name"
           ></op-tab-count>
-          <ng-container *ngIf="tab.counter | async as tabCounter">
+          <ng-container *ngIf="tab.counter(injector) | async as tabCounter">
             <span
               *ngIf="tabCounter > 0 && !tab.showCountAsBubble"
               data-qa-selector="tab-count"

frontend/src/app/shared/components/tabs/scrollable-tabs/scrollable-tabs.component.ts

@@ -6,6 +6,7 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  Injector,
   OnChanges,
   Output,
   SimpleChanges,
@@ -47,8 +48,10 @@ export class ScrollableTabsComponent implements AfterViewInit, OnChanges {
 
   private pane:Element;
 
-  constructor(private cdRef:ChangeDetectorRef) {
+  constructor(
-  }
+    private cdRef:ChangeDetectorRef,
+    public injector:Injector,
+  ) { }
 
   ngAfterViewInit():void {
     this.container = this.scrollContainer.nativeElement;

frontend/src/app/shared/components/tabs/tab-badges/tab-count.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="(counter$ | async) as count">
+<ng-container *ngIf="count">
   <span
     class="op-tab-count"
     *ngIf="count > 0"

frontend/src/app/shared/components/tabs/tab-badges/tab-count.component.ts

@@ -8,5 +8,5 @@ import { Observable } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TabCountComponent {
-  @Input('counter') counter$:Observable<number>;
+  @Input('count') count:number;
 }

frontend/src/app/shared/components/tabs/tab.interface.ts

@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs';
+import { Injector } from '@angular/core';
 
 export interface TabDefinition {
   /** Internal identifier of the tab */
@@ -12,7 +13,7 @@ export interface TabDefinition {
   /** UI router params to use uiParams with */
   routeParams?:unknown;
   /** Show a tab count with this observable's result */
-  counter?:Observable<number>;
+  counter?:(injector?:Injector) => Observable<number>;
   /** Whether the counter should be shown as number in brackets or within a bubble */
   showCountAsBubble?:boolean;
   /** Disable the tab, optionally with an explanatory title */