Merge pull request #30 from fleetbase/dev-v0.2.6

v0.2.6

Author: roncodes

addon/components/modals/api-key-form.hbs

@@ -1,21 +1,17 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} as |options|>
     <div class="modal-body-container">
-        <div class="input-group">
-            <label>
-                {{t "developers.common.name"}}
-            </label>
-            <Input
-                @value={{options.apiKey.name}}
-                @type="text"
-                aria-label={{t "developers.component.modals.api-key-form.api-name-aria-label"}}
-                class="w-full form-input"
-                placeholder={{t "developers.component.modals.api-key-form.name-placeholder"}}
-            />
-        </div>
+        <InputGroup
+            @name={{t "developers.common.name"}}
+            @value={{options.apiKey.name}}
+            @placeholder={{t "developers.component.modals.api-key-form.name-placeholder"}}
+            @disabled={{cannot @options.formPermission}}
+            aria-label={{t "developers.component.modals.api-key-form.api-name-aria-label"}}
+            class="w-full form-input"
+        />
         <div class="input-group">
             <InputLabel @labelText={{t "developers.component.modals.api-key-form.expiration-label"}} @helpText={{t "developers.component.modals.api-key-form.expiration-help-text"}} />
 
-            <select class="w-full mb-1 form-select" aria-label={{t "developers.component.modals.api-key-form.api-expiration-aria-label"}} {{on "change" @options.setExpiration}}>
+            <select class="w-full mb-1 form-select" disabled={{cannot @options.formPermission}} aria-label={{t "developers.component.modals.api-key-form.api-expiration-aria-label"}} {{on "change" @options.setExpiration}}>
                 <option selected disabled>
                     {{t "developers.component.modals.api-key-form.select-expiration-date"}}
                 </option>

addon/components/modals/rename-api-key-form.hbs

@@ -10,6 +10,7 @@
                 aria-label={{t "developers.component.modals.rename-api-key-form.api-key-label"}}
                 class="w-full form-input"
                 placeholder={{t "developers.component.modals.rename-api-key-form.api-key-placeholder"}}
+                disabled={{cannot @options.formPermission}}
             />
         </div>
     </div>

addon/components/modals/roll-api-key-form.hbs

@@ -44,6 +44,7 @@
                 <select
                     class="w-full mb-2 form-select form-input-sm"
                     aria-label={{t "developers.component.modals.roll-api-key-form.api-key-expiration-label"}}
+                    disabled={{cannot @options.formPermission}}
                     {{on "change" @options.setExpiration}}
                 >
                     <option selected disabled>
@@ -89,6 +90,7 @@
                 aria-label={{t "developers.component.modals.roll-api-key-form.user-password"}}
                 placeholder={{t "developers.component.modals.roll-api-key-form.user-password-placeholder"}}
                 class="w-full form-input"
+                disabled={{cannot @options.formPermission}}
             />
         </div>
     </div>

addon/components/modals/webhook-form.hbs

@@ -75,8 +75,8 @@
                     @helpText={{t "developers.component.modals.webhook-form.events-send-help-text"}}
                 />
 
-                <div class="flex items-start justify-between">
-                    <div class="w-1/2">
+                <div class="flex items-center justify-between">
+                    <div class="flex-1">
                         <BasicDropdown @renderInPlace={{true}} as |dd|>
                             <dd.Trigger>
                                 <div class="w-full px-3 py-2 text-sm leading-4 cursor-pointer form-select hover:shadow-sm">
@@ -119,15 +119,17 @@
                             </dd.Content>
                         </BasicDropdown>
                     </div>
-                    <a href="javascript:;" class="no-underline" {{on "click" @options.clearEvents}}>
-                        {{t "developers.common.clear"}}
-                    </a>
+                    <div class="flex-1">
+                        <a href="javascript:;" class="ml-2 no-underline text-xs text-red-500 hover:opacity-50" {{on "click" @options.clearEvents}}>
+                            {{t "developers.common.clear"}}
+                        </a>
+                    </div>
                 </div>
             </div>
-            <div class="h-48 overflow-y-scroll bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-800 dark:border-gray-900">
+            <div class="h-40 overflow-y-scroll bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-800 dark:border-gray-900">
                 {{#if @options.webhook.events}}
                     {{#each @options.webhook.events as |event|}}
-                        <div class="flex items-center justify-between p-3 text-sm text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100">
+                        <div class="flex items-center justify-between px-3 py-2 text-xs text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100">
                             <span>
                                 {{event}}
                             </span>

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') {