[33912] Correct change detection on custom actions

https://community.openproject.com/wp/33912

frontend/src/app/components/wp-custom-actions/wp-custom-actions.component.ts

@@ -26,18 +26,41 @@
 // See docs/COPYRIGHT.rdoc for more details.
 // ++
 
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit} from '@angular/core';
 import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';
+import {APIV3Service} from "core-app/modules/apiv3/api-v3.service";
+import {CustomActionResource} from "core-app/modules/hal/resources/custom-action-resource";
+import {UntilDestroyedMixin} from "core-app/helpers/angular/until-destroyed.mixin";
 
 @Component({
   selector: 'wp-custom-actions',
-  templateUrl: './wp-custom-actions.component.html'
+  templateUrl: './wp-custom-actions.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class WpCustomActionsComponent {
+export class WpCustomActionsComponent extends UntilDestroyedMixin implements OnInit {
 
   @Input() workPackage:WorkPackageResource;
 
-  public get actions() {
+  actions:CustomActionResource[] = [];
-    return this.workPackage.customActions;
+
+  constructor(readonly apiV3Service:APIV3Service,
+              readonly cdRef:ChangeDetectorRef) {
+    super();
+  }
+
+  ngOnInit() {
+    this
+      .apiV3Service
+      .work_packages
+      .id(this.workPackage.id!)
+      .requireAndStream()
+      .pipe(
+        this.untilDestroyed()
+      )
+      .subscribe((wp) => {
+        this.actions = [...wp.customActions];
+        this.cdRef.detectChanges();
+      });
   }
+
 }