implemented permission based restrictions

Author: roncodes

addon/components/webhook/details.hbs

@@ -7,7 +7,7 @@
         </div>
 
         <div class="flex items-center section-header-actions">
-            <Button @icon="pencil" @text={{t "developers.component.webhook.details.update-details"}} @onClick={{this.onClickUpdateWebhook}} />
+            <Button @icon="pencil" @text={{t "developers.component.webhook.details.update-details"}} @onClick={{this.onClickUpdateWebhook}} @permission={{@permission}} />
         </div>
     </div>
     <div class="text-sm content-panel-body">

addon/components/webhook/details.js

@@ -1,8 +1,24 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
 export default class WebhookDetailsComponent extends Component {
+    @service abilities;
+    @tracked permission;
+    @tracked doesntHavePermission = false;
+
+    constructor(owner, { permission }) {
+        super(...arguments);
+        this.permission = permission;
+        this.doesntHavePermission = permission && this.abilities.cannot(permission);
+    }
+
     @action onClickUpdateWebhook() {
+        if (this.doesntHavePermission) {
+            return;
+        }
+        
         const { webhook, onClickUpdateWebhook } = this.args;
 
         if (typeof onClickUpdateWebhook === 'function') {