Merge pull request #27 from fleetbase/dev-v0.2.3

v0.2.3

addon/components/api-event/details.hbs

@@ -1,4 +1,18 @@
-<ContentPanel @prefixTitle={{t "developers.component.api-event.details.prefixTitle"}} @title={{@apiEvent.event}} @prefixTitleRight={{@apiEvent.public_id}} @titleContainerClass="flex-col" @panelTitleClass="text-sm" @prefixTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
+<ContentPanel
+    @prefixTitle={{t "developers.component.api-event.details.prefixTitle"}}
+    @title={{@apiEvent.event}}
+    @prefixTitleRight={{@apiEvent.public_id}}
+    @titleContainerClass="flex-col"
+    @panelTitleClass="text-sm"
+    @prefixTitleClass="ml-4 flex flex-row items-center text-sm"
+    @prefixTitleRightClass="font-mono"
+    @panelHeaderClass="items-stretch-i"
+    @panelHeaderRightClass="items-start-i"
+    @prefixTitleRightContainerClass="py-2"
+    @open={{true}}
+    @pad={{true}}
+    @panelBodyClass="bg-white dark:bg-gray-800 text-sm"
+>
     <table class="border-none table-fixed dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
         <tbody>
             <tr>

addon/components/api-request-log/details.hbs

@@ -1,4 +1,19 @@
-<ContentPanel @prefixTitle={{t "developers.component.api-request-log.details.prefixTitle"}} @title={{@apiRequest.description}} @titleStatus={{@apiRequest.status_code}} @prefixTitleRight={{@apiRequest.public_id}} @titleContainerClass="flex-col" @panelTitleClass="ml-4 flex flex-row items-center text-sm" @prefixTitleClass="text-sm" @prefixTitleRightClass="font-mono" @panelHeaderClass="items-stretch-i" @panelHeaderRightClass="items-start-i" @prefixTitleRightContainerClass="py-2" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 text-sm">
+<ContentPanel
+    @prefixTitle={{t "developers.component.api-request-log.details.prefixTitle"}}
+    @title={{@apiRequest.description}}
+    @titleStatus={{@apiRequest.status_code}}
+    @prefixTitleRight={{@apiRequest.public_id}}
+    @titleContainerClass="flex-col"
+    @panelTitleClass="ml-4 flex flex-row items-center text-sm"
+    @prefixTitleClass="text-sm"
+    @prefixTitleRightClass="font-mono"
+    @panelHeaderClass="items-stretch-i"
+    @panelHeaderRightClass="items-start-i"
+    @prefixTitleRightContainerClass="py-2"
+    @open={{true}}
+    @pad={{true}}
+    @panelBodyClass="bg-white dark:bg-gray-800 text-sm"
+>
     <table class="border-none table-fixed dark:text-gray-100 table-spaced-y-2 table-cells-valign-top">
         <tbody>
             <tr>

addon/components/api-request-log/request-body.hbs

@@ -1,4 +1,10 @@
-<ContentPanel @title={{concat (t "developers.component.api-request-log.request-body.title") @apiRequest.method (t "developers.component.api-request-log.request-body.title-second-part")}} @panelTitleClass="text-sm" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<ContentPanel
+    @title={{concat (t "developers.component.api-request-log.request-body.title") @apiRequest.method (t "developers.component.api-request-log.request-body.title-second-part")}}
+    @panelTitleClass="text-sm"
+    @open={{true}}
+    @pad={{true}}
+    @panelBodyClass="bg-white dark:bg-gray-800"
+>
     {{#if @apiRequest.request_body}}
         <CodeBlock @code={{or (json-stringify @apiRequest.request_body) ""}} @language="json" class="line-numbers" />
     {{else}}

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

@@ -4,7 +4,13 @@
             <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"}} />
+            <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>
         <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"}} />
@@ -24,12 +30,6 @@
             </p>
         </div>
 
-        <div class="input-group">
-            <ArrayInput @data={{@options.apiKey.browser_origins}} @placeholder={{t "developers.component.modals.api-key-form.enter-domain-placeholder"}} @onDataChanged={{fn (mut @options.apiKey.browser_origins)}}>
-                <InputLabel @labelText={{t "developers.component.modals.api-key-form.allowed-browser-label"}} @helpText={{t "developers.component.modals.api-key-form.allowed-browser-help-text"}} />
-            </ArrayInput>
-        </div>
-
         <div class="flex flex-col input-group">
             {{#if @options.testMode}}
                 <Badge @status="test">

addon/components/modals/listen-custom-channel.hbs

@@ -1,5 +1,9 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} as |options|>
     <div class="modal-body-container">
-        <InputGroup @name={{t "developers.component.modals.listen-custom-channel.name"}} @value={{@options.channelId}} @helpText={{t "developers.component.modals.listen-custom-channel.name-help-text"}} />
+        <InputGroup
+            @name={{t "developers.component.modals.listen-custom-channel.name"}}
+            @value={{@options.channelId}}
+            @helpText={{t "developers.component.modals.listen-custom-channel.name-help-text"}}
+        />
     </div>
 </Modal::Default>

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

@@ -4,7 +4,13 @@
             <label>
                 {{t "developers.common.name"}}
             </label>
-            <Input @value={{options.apiKey.name}} @type="text" 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"}} />
+            <Input
+                @value={{options.apiKey.name}}
+                @type="text"
+                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"}}
+            />
         </div>
     </div>
 </Modal::Default>

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

@@ -10,7 +10,12 @@
                 <div class="mb-2 dark:text-gray-100">
                     {{@options.apiKey.key}}
                 </div>
-                <Button @text={{t "developers.component.modals.roll-api-key-form.view-button-text"}} @size="xs" @icon="arrow-right" @onClick={{fn @options.viewRequestLogs @options.apiKey}} />
+                <Button
+                    @text={{t "developers.component.modals.roll-api-key-form.view-button-text"}}
+                    @size="xs"
+                    @icon="arrow-right"
+                    @onClick={{fn @options.viewRequestLogs @options.apiKey}}
+                />
             </div>
         </div>
     </div>
@@ -36,7 +41,11 @@
                 </span>
             </div>
             <div class="w-3/4">
-                <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"}} {{on "change" @options.setExpiration}}>
+                <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"}}
+                    {{on "change" @options.setExpiration}}
+                >
                     <option selected disabled>
                         {{t "developers.component.modals.roll-api-key-form.select-date"}}
                     </option>
@@ -74,7 +83,13 @@
             <label>
                 {{t "developers.common.password"}}
             </label>
-            <Input @type="password" @value={{@options.password}} 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" />
+            <Input
+                @type="password"
+                @value={{@options.password}}
+                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"
+            />
         </div>
     </div>
 </Modal::Default>

addon/components/modals/webhook-form.hbs

@@ -1,19 +1,37 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} as |options|>
     <div class="px-5 border-b border-gray-200 dark:border-gray-800">
         <div class="input-group">
-            <InputLabel @labelText={{t "developers.component.modals.webhook-form.endpoint-url"}} @helpText={{t "developers.component.modals.webhook-form.endpoint-url-help-text"}} @required={{true}} />
-            <Input @value={{options.webhook.url}} @type="url" aria-label="Webhook URL" class="w-full form-input" placeholder={{t "developers.component.modals.webhook-form.endpoint-url-placeholder"}} />
+            <InputLabel
+                @labelText={{t "developers.component.modals.webhook-form.endpoint-url"}}
+                @helpText={{t "developers.component.modals.webhook-form.endpoint-url-help-text"}}
+                @required={{true}}
+            />
+            <Input
+                @value={{options.webhook.url}}
+                @type="url"
+                aria-label="Webhook URL"
+                class="w-full form-input"
+                placeholder={{t "developers.component.modals.webhook-form.endpoint-url-placeholder"}}
+            />
         </div>
 
         <div class="input-group">
             <InputLabel @labelText={{t "developers.component.modals.webhook-form.description-label"}} @helpText={{t "developers.component.modals.webhook-form.description-help-text"}} />
-            <Textarea @value={{options.webhook.description}} aria-label={{t "developers.component.modals.webhook-form.description-aria-label"}} class="w-full form-input" placeholder={{t "developers.component.modals.webhook-form.description-placeholder"}} />
+            <Textarea
+                @value={{options.webhook.description}}
+                aria-label={{t "developers.component.modals.webhook-form.description-aria-label"}}
+                class="w-full form-input"
+                placeholder={{t "developers.component.modals.webhook-form.description-placeholder"}}
+            />
         </div>
     </div>
 
     <div class="px-5 pt-4 border-b border-gray-200 dark:border-gray-800">
-        <div class="input-group">   
-            <InputLabel @labelText={{t "developers.component.modals.webhook-form.api-credential-label"}} @helpText={{t "developers.component.modals.webhook-form.api-credential-help-text"}} />
+        <div class="input-group">
+            <InputLabel
+                @labelText={{t "developers.component.modals.webhook-form.api-credential-label"}}
+                @helpText={{t "developers.component.modals.webhook-form.api-credential-help-text"}}
+            />
 
             <select class="w-full form-select" aria-label={{t "developers.component.modals.webhook-form.api-credential-label"}} {{on "change" @options.setApiCredential}}>
                 <option value={{null}} selected>
@@ -51,7 +69,11 @@
     <div class="px-5 pt-4">
         <div class="input-group">
             <div class="mb-4">
-                <InputLabel class="mb-2" @labelText={{t "developers.component.modals.webhook-form.events-send-label"}} @helpText={{t "developers.component.modals.webhook-form.events-send-help-text"}} />
+                <InputLabel
+                    class="mb-2"
+                    @labelText={{t "developers.component.modals.webhook-form.events-send-label"}}
+                    @helpText={{t "developers.component.modals.webhook-form.events-send-help-text"}}
+                />
 
                 <div class="flex items-start justify-between">
                     <div class="w-1/2">
@@ -63,7 +85,12 @@
                             </dd.Trigger>
                             <dd.Content class="w-full h-48 mt-1 overflow-y-hidden border bg-white border-gray-300 rounded shadow-md dark:border-gray-800 dark:bg-gray-700">
                                 <div class="w-full rounded shadow">
-                                    <Input aria-label={{t "developers.component.modals.webhook-form.event-search-label"}} placeholder={{t "developers.component.modals.webhook-form.event-search-placeholder"}} class="w-full px-3 py-2 text-sm leading-4 border-b border-gray-300 shadow-sm dark:border-gray-800 dark:bg-gray-700 dark:text-gray-100" {{on "keyup" @options.searchEvents}} />
+                                    <Input
+                                        aria-label={{t "developers.component.modals.webhook-form.event-search-label"}}
+                                        placeholder={{t "developers.component.modals.webhook-form.event-search-placeholder"}}
+                                        class="w-full px-3 py-2 text-sm leading-4 border-b border-gray-300 shadow-sm dark:border-gray-800 dark:bg-gray-700 dark:text-gray-100"
+                                        {{on "keyup" @options.searchEvents}}
+                                    />
                                     <div class="w-full h-40 pb-2 overflow-y-scroll">
                                         {{#each-in @options.eventOptions as |resourceName events|}}
                                             <div class="">
@@ -76,7 +103,12 @@
                                                     </span>
                                                 </div>
                                                 {{#each events as |event|}}
-                                                    <a href="javascript:;" class="block px-6 py-3 text-xs text-gray-700 no-underline cursor-pointer hover:opacity-75 dark:text-gray-100" disabled={{includes event @options.webhook.events}} {{on "click" (fn @options.addEvent event dd)}}>
+                                                    <a
+                                                        href="javascript:;"
+                                                        class="block px-6 py-3 text-xs text-gray-700 no-underline cursor-pointer hover:opacity-75 dark:text-gray-100"
+                                                        disabled={{includes event @options.webhook.events}}
+                                                        {{on "click" (fn @options.addEvent event dd)}}
+                                                    >
                                                         {{event}}
                                                     </a>
                                                 {{/each}}

addon/components/webhook/attempts.hbs

@@ -14,13 +14,21 @@
         <div class="flex items-center section-header-actions">
             <div class="rounded-lg border borer-gray-300 dark:border-gray-700 shadow-sm">
                 <div class="rounded-lg flex items-center justify-between px-2 py-1 text-sm bg-white dark:bg-gray-900">
-                    <a href="javascript:;" class="mx-4 no-underline text-gray-400 {{if this.noAttemptStatus "font-semibold text-blue-400"}}" {{on "click" this.changeAttemptStatus}}>
+                    <a href="javascript:;" class="mx-4 no-underline text-gray-400 {{if this.noAttemptStatus 'font-semibold text-blue-400'}}" {{on "click" this.changeAttemptStatus}}>
                         {{t "developers.common.all"}}
                     </a>
-                    <a href="javascript:;" class="mx-4 no-underline text-gray-400 {{if (eq this.attemptStatus "successful") "font-semibold text-blue-400"}}" {{on "click" (fn this.changeAttemptStatus "successful")}}>
+                    <a
+                        href="javascript:;"
+                        class="mx-4 no-underline text-gray-400 {{if (eq this.attemptStatus 'successful') 'font-semibold text-blue-400'}}"
+                        {{on "click" (fn this.changeAttemptStatus "successful")}}
+                    >
                         {{t "developers.common.succeeded"}}
                     </a>
-                    <a href="javascript:;" class="mx-4 no-underline text-gray-400 {{if (eq this.attemptStatus "failed") "font-semibold text-blue-400"}}" {{on "click" (fn this.changeAttemptStatus "failed")}}>
+                    <a
+                        href="javascript:;"
+                        class="mx-4 no-underline text-gray-400 {{if (eq this.attemptStatus 'failed') 'font-semibold text-blue-400'}}"
+                        {{on "click" (fn this.changeAttemptStatus "failed")}}
+                    >
                         {{t "developers.common.failed"}}
                     </a>
                 </div>
@@ -39,7 +47,8 @@
                                     {{t "developers.component.webhook.attempts.http-code"}}
                                 </td>
                                 <td>
-                                    {{row.status_code}} ({{row.reason_phrase}})
+                                    {{row.status_code}}
+                                    ({{row.reason_phrase}})
                                 </td>
                             </tr>
                             <tr>

addon/controllers/api-keys/index.js

@@ -166,52 +166,62 @@ export default class ApiKeysIndexController extends Controller {
             valuePath: 'name',
             cellComponent: 'table/cell/anchor',
             action: this.editApiKey,
+            resizable: true,
             width: '10%',
             sortable: false,
         },
         {
             label: this.intl.t('developers.api-keys.index.public-key'),
             valuePath: 'key',
-            width: '20%',
+            width: '18%',
             sortable: false,
+            resizable: true,
             cellComponent: 'click-to-copy',
         },
         {
             label: this.intl.t('developers.api-keys.index.secret-key'),
             valuePath: 'secret',
-            width: '20%',
+            width: '18%',
             sortable: false,
+            resizable: true,
             cellComponent: 'click-to-reveal',
+            cellComponentArgs: {
+                clickToCopy: true,
+            },
         },
         {
             label: this.intl.t('developers.api-keys.index.enviroment'),
             valuePath: 'environment',
-            width: '12%',
+            width: '10%',
             sortable: false,
+            resizable: true,
             cellComponent: 'table/cell/status',
         },
         {
             label: this.intl.t('developers.api-keys.index.expiry'),
             valuePath: 'expiresAt',
             sortable: false,
-            width: '10%',
+            width: '8%',
             tooltip: true,
+            resizable: true,
             cellClassNames: 'overflow-visible',
         },
         {
             label: this.intl.t('developers.api-keys.index.last-used'),
             valuePath: 'lastUsed',
             sortable: false,
-            width: '10%',
+            width: '14%',
             tooltip: true,
+            resizable: true,
             cellClassNames: 'overflow-visible',
         },
         {
             label: this.intl.t('developers.common.created'),
             valuePath: 'createdAt',
             sortable: false,
-            width: '10%',
+            width: '14%',
             tooltip: true,
+            resizable: true,
             cellClassNames: 'overflow-visible',
         },
         {
@@ -519,4 +529,11 @@ export default class ApiKeysIndexController extends Controller {
             },
         });
     }
+
+    /**
+     * Reload data.
+     */
+    @action reload() {
+        return this.hostRouter.refresh();
+    }
 }