Merge pull request #15024 from opf/fix/49136/create-button-disabled

Use capability to identify whether work package create button is available

frontend/src/app/features/work-packages/components/wp-buttons/wp-create-button/wp-create-button.component.ts

@@ -27,15 +27,14 @@
 //++
 
 import { StateService, TransitionService } from '@uirouter/core';
-import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { AuthorisationService } from 'core-app/core/model-auth/model-auth.service';
 import { Observable } from 'rxjs';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
-import { componentDestroyed } from '@w11k/ngx-componentdestroyed';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
+import { take } from 'rxjs/operators';
+import { CurrentUserService } from 'core-app/core/current-user/current-user.service';
 
 @Component({
   selector: 'wp-create-button',
@@ -64,29 +63,29 @@ export class WorkPackageCreateButtonComponent extends UntilDestroyedMixin implem
     explanation: this.I18n.t('js.label_create_work_package'),
   };
 
-  constructor(readonly $state:StateService,
+  constructor(
+    readonly $state:StateService,
+    readonly currentUser:CurrentUserService,
     readonly currentProject:CurrentProjectService,
     readonly authorisationService:AuthorisationService,
     readonly transition:TransitionService,
     readonly I18n:I18nService,
-    readonly cdRef:ChangeDetectorRef) {
+    readonly cdRef:ChangeDetectorRef,
+  ) {
     super();
   }
 
   ngOnInit() {
     this.projectIdentifier = this.currentProject.identifier;
 
     // Find the first permission that is allowed
-    this.authorisationService
-      .observeUntil(componentDestroyed(this))
-      .subscribe(() => {
-        this.allowed = !!this
-          .allowedWhen
-          .find((combined) => {
-            const [module, permission] = combined.split('.');
-            return this.authorisationService.can(module, permission);
-          });
-
+    this.currentUser
+      .hasCapabilities$('work_packages/create', this.currentProject.id)
+      .pipe(
+        take(1),
+      )
+      .subscribe((allowed) => {
+        this.allowed = allowed;
         this.updateDisabledState();
       });