WIP

frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts

@@ -35,8 +35,10 @@ import {
   ElementRef,
   Injector,
   Input,
+  OnChanges,
   OnDestroy,
   OnInit,
+  SimpleChanges,
   TemplateRef,
   ViewChild,
 } from '@angular/core';
@@ -57,7 +59,7 @@ import { HalError } from 'core-app/features/hal/services/hal-error';
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './work-package-comment.component.html',
 })
-export class WorkPackageCommentComponent extends WorkPackageCommentFieldHandler implements OnInit, OnDestroy {
+export class WorkPackageCommentComponent extends WorkPackageCommentFieldHandler implements OnInit, OnDestroy, OnChanges {
   @Input() public workPackage:WorkPackageResource;
 
   @ContentChild(TemplateRef) template:TemplateRef<any>;
@@ -95,6 +97,10 @@ export class WorkPackageCommentComponent extends WorkPackageCommentFieldHandler
     super(elementRef, injector);
   }
 
+  ngOnChanges(changes:SimpleChanges) {
+    console.log(changes);
+  }
+
   public ngOnInit() {
     super.ngOnInit();
 

frontend/src/app/features/work-packages/components/wp-activity/activity-entry.component.ts

@@ -26,7 +26,13 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component, Input, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DoCheck,
+  Input,
+  OnInit,
+} from '@angular/core';
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
@@ -35,8 +41,9 @@ import idFromLink from 'core-app/features/hal/helpers/id-from-link';
 @Component({
   selector: 'activity-entry',
   templateUrl: './activity-entry.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ActivityEntryComponent implements OnInit {
+export class ActivityEntryComponent implements OnInit, DoCheck {
   @Input() public workPackage:WorkPackageResource;
 
   @Input() public activity:any;
@@ -60,4 +67,9 @@ export class ActivityEntryComponent implements OnInit {
 
     this.activityType = this.activity._type;
   }
+
+  // put this in any component which is rendered on the page
+  public ngDoCheck() {
+    // @ts-ignore
+  }
 }

frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-base.controller.ts

@@ -29,7 +29,9 @@
 import {
   ChangeDetectorRef,
   Directive,
+  OnChanges,
   OnInit,
+  SimpleChanges,
 } from '@angular/core';
 import { UIRouterGlobals } from '@uirouter/core';
 import { Observable } from 'rxjs';
@@ -45,7 +47,7 @@ import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { WpSingleViewService } from 'core-app/features/work-packages/routing/wp-view-base/state/wp-single-view.service';
 
 @Directive()
-export class ActivityPanelBaseController extends UntilDestroyedMixin implements OnInit {
+export class ActivityPanelBaseController extends UntilDestroyedMixin implements OnInit, OnChanges {
   public workPackage:WorkPackageResource;
 
   public workPackageId:string;
@@ -88,6 +90,10 @@ export class ActivityPanelBaseController extends UntilDestroyedMixin implements
     this.togglerText = this.text.commentsOnly;
   }
 
+  ngOnChanges(changes:SimpleChanges) {
+    console.log(changes);
+  }
+
   ngOnInit():void {
     this.initialized = false;
     this

frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-entry-info.ts

@@ -27,48 +27,42 @@
 //++
 
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
+import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 
 export class ActivityEntryInfo {
+  date = this.activityDate(this.activity);
+
+  number = this.orderedIndex(this.index, this.isReversed);
+
+  dateOfPrevious = this.getDateOfPrevious();
+
+  href = this.activity.href as string;
+
+  version = this.activity.version as string;
+
+  identifier = `${this.href}-${this.version}`;
+
+  isNextDate = this.date !== this.dateOfPrevious;
+
+  isInitial = this.getIsInitial();
+
   constructor(public timezoneService:TimezoneService,
     public isReversed:boolean,
-    public activities:any[],
-    public activity:any,
+    public activities:HalResource[],
+    public activity:HalResource,
     public index:number) {
   }
 
-  public number(forceReverse = false) {
-    return this.orderedIndex(this.index, forceReverse);
-  }
-
-  public get date() {
-    return this.activityDate(this.activity);
-  }
-
-  public get dateOfPrevious():any {
+  public getDateOfPrevious():string|null {
     if (this.index > 0) {
       return this.activityDate(this.activities[this.index - 1]);
     }
-  }
-
-  public get href() {
-    return this.activity.href;
-  }
 
-  public get identifier() {
-    return `${this.href}-${this.version}`;
+    return null;
   }
 
-  public get version() {
-    return this.activity.version;
-  }
-
-  public get isNextDate() {
-    return this.date !== this.dateOfPrevious;
-  }
-
-  public isInitial(forceReverse = false) {
-    let activityNo = this.number(forceReverse);
-
+  public getIsInitial() {
+    let activityNo = this.number;
     if (this.activity._type.indexOf('Activity') !== 0) {
       return false;
     }
@@ -78,7 +72,7 @@ export class ActivityEntryInfo {
     }
 
     while (--activityNo > 0) {
-      const idx = this.orderedIndex(activityNo, forceReverse) - 1;
+      const idx = this.orderedIndex(activityNo, this.isReversed) - 1;
       const activity = this.activities[idx];
       if (!_.isNil(activity) && activity._type.indexOf('Activity') === 0) {
         return false;

frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-on-overview.html

@@ -5,9 +5,9 @@
           class="work-package-details-activities-activity">
         <activity-entry [workPackage]="workPackage"
                         [activity]="inf.activity"
-                        [activityNo]="inf.number(inf.isReversed)"
+                        [activityNo]="inf.number"
                         [hasUnreadNotification]="hasUnreadNotification(inf.href) | async"
-                        [isInitial]="inf.isInitial()">
+                        [isInitial]="inf.isInitial">
         </activity-entry>
       </div>
     </div>

frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-tab.component.ts

@@ -26,7 +26,10 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
 import { trackByHrefAndProperty } from 'core-app/shared/helpers/angular/tracking-functions';
 import { ActivityPanelBaseController } from 'core-app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-base.controller';
@@ -34,6 +37,7 @@ import { ActivityPanelBaseController } from 'core-app/features/work-packages/com
 @Component({
   templateUrl: './activity-tab.html',
   selector: 'wp-activity-tab',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WorkPackageActivityTabComponent extends ActivityPanelBaseController {
   public workPackage:WorkPackageResource;

frontend/src/app/features/work-packages/components/wp-single-view-tabs/activity-panel/activity-tab.html

@@ -27,9 +27,9 @@
           <activity-entry
             [workPackage]="workPackage"
             [activity]="inf.activity"
-            [activityNo]="inf.number(inf.isReversed)"
-            [hasUnreadNotification]="hasUnreadNotification(inf.href) | async"
-            [isInitial]="inf.isInitial()"
+            [activityNo]="inf.number"
+            [hasUnreadNotification]="false"
+            [isInitial]="inf.isInitial"
           ></activity-entry>
         </div>
       </div>

frontend/src/app/shared/helpers/debug_output.ts

@@ -46,3 +46,55 @@ export function asyncTimeOutput(msg:string, promise:Promise<any>):any {
   }
   return promise;
 }
+
+// Better extraction of zone.js backtraces
+// thanks to https://stackoverflow.com/a/54943260
+export function renderLongStackTrace():string {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
+  const frames:any[] = (Zone.currentTask?.data as any).__creationTrace__;
+  const NEWLINE = '\n';
+
+  // edit this array if you want to ignore or unignore something
+  const FILTER_REGEXP:RegExp[] = [
+    /checkAndUpdateView/,
+    /callViewAction/,
+    /execEmbeddedViewsAction/,
+    /execComponentViewsAction/,
+    /callWithDebugContext/,
+    /debugCheckDirectivesFn/,
+    /Zone/,
+    /checkAndUpdateNode/,
+    /debugCheckAndUpdateNode/,
+    /onScheduleTask/,
+    /onInvoke/,
+    /updateDirectives/,
+    /@angular/,
+    /Observable\._trySubscribe/,
+    /Observable.subscribe/,
+    /SafeSubscriber/,
+    /Subscriber.js.Subscriber/,
+    /checkAndUpdateDirectiveInline/,
+    /drainMicroTaskQueue/,
+    /getStacktraceWithUncaughtError/,
+    /LongStackTrace/,
+    /Observable._zoneSubscribe/,
+  ];
+
+  if (!frames) {
+    return 'no frames';
+  }
+
+  const filterFrames = (stack:string) => {
+    return stack
+      .split(NEWLINE)
+      .filter((frame) => !FILTER_REGEXP.some((reg) => reg.test(frame)))
+      .join(NEWLINE);
+  };
+
+  return frames
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    .filter((frame:any) => frame.error.stack)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    .map((frame:any) => filterFrames(frame.error.stack))
+    .join(NEWLINE);
+}

frontend/src/main.ts

@@ -1,5 +1,8 @@
 import { OpenProjectModule } from 'core-app/app.module';
-import { enableProdMode } from '@angular/core';
+import {
+  ApplicationRef,
+  enableProdMode,
+} from '@angular/core';
 import * as jQuery from 'jquery';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { SentryReporter } from 'core-app/core/errors/sentry/sentry-reporter';
@@ -7,6 +10,7 @@ import { whenDebugging } from 'core-app/shared/helpers/debug_output';
 import { enableReactiveStatesLogging } from 'reactivestates';
 import { initializeLocale } from 'core-app/core/setup/init-locale';
 import { environment } from './environments/environment';
+import { enableDebugTools } from '@angular/platform-browser';
 
 (window as any).global = window;
 
@@ -31,8 +35,11 @@ if (environment.production) {
   enableProdMode();
 }
 
-// Enable debug logging for reactive states
 whenDebugging(() => {
+  // Unlimited stack trace limit
+  Error.stackTraceLimit = Infinity;
+
+  // Enable debug logging for reactive states
   (window as any).enableReactiveStatesLogging = () => enableReactiveStatesLogging(true);
   (window as any).disableReactiveStatesLogging = () => enableReactiveStatesLogging(false);
 });
@@ -44,7 +51,12 @@ void initializeLocale()
       // Due to the behaviour of the Edge browser we need to wait for 'DOM ready'
       void platformBrowserDynamic()
         .bootstrapModule(OpenProjectModule)
-        .then(() => {
+        .then((moduleRef) => {
+          whenDebugging(() => {
+            const applicationRef = moduleRef.injector.get(ApplicationRef);
+            const appComponent = applicationRef.components[0];
+            enableDebugTools(appComponent);
+          });
           jQuery('body').addClass('__ng2-bootstrap-has-run');
         });
     });

frontend/src/polyfills.ts

@@ -29,6 +29,7 @@
  * Zone JS is required by default for Angular itself.
  */
 import 'zone.js';
+import 'zone.js/dist/long-stack-trace-zone';
 
 (window as any).global = window;
 
@@ -55,7 +56,9 @@ import 'zone.js';
 
 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
-(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove', 'mouseover', 'mouseout', 'mousewheel']; // Included with Angular CLI.
+(window as any).__zone_symbol__BLACK_LISTED_EVENTS = [
+  'scroll', 'mousemove', 'mouseover', 'mouseout', 'mousewheel', 'mouseenter', 'mouseleave'
+]; // Included with Angular CLI.
 
 /** *************************************************************************************************
  * APPLICATION IMPORTS