more permission control implemented in ux

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/controllers/api-keys/index.js

@@ -346,6 +346,8 @@ export default class ApiKeysIndexController extends Controller {
 
         this.modalsManager.show('modals/rename-api-key-form', {
             title: this.intl.t('developers.api-keys.index.rename-api-key-title', { apiKeyName }),
+            acceptButtonDisabled: this.abilities.cannot(formPermission),
+            acceptButtonHelpText: this.abilities.cannot(formPermission) ? this.intl.t('common.unauthorized') : null,
             apiKey,
             formPermission,
             confirm: async modal => {
@@ -411,19 +413,23 @@ export default class ApiKeysIndexController extends Controller {
      * @void
      */
     @action rollApiKey (apiKey) {
+        const formPermission = 'developers roll api-key';
         const apiKeyName = getWithDefault(apiKey, 'name', this.intl.t('developers.api-keys.index.untitled'));
 
         this.modalsManager.show('modals/roll-api-key-form', {
             title: this.intl.t('developers.api-keys.index.roll-api-key', { apiKeyName }),
             modalClass: 'roll-key-modal',
             acceptButtonText: this.intl.t('developers.api-keys.index.roll-api-key-button-text'),
+            acceptButtonDisabled: this.abilities.cannot(formPermission),
+            acceptButtonHelpText: this.abilities.cannot(formPermission) ? this.intl.t('common.unauthorized') : null,
             user: this.currentUser.user,
             expirationOptions: this.expirationOptions,
             setExpiration: ({ target }) => {
                 apiKey.expires_at = target.value || null;
             },
             viewRequestLogs: this.viewRequestLogs,
             password: null,
+            formPermission,
             apiKey,
             confirm: async modal => {
                 modal.startLoading();