Developers module redesign (v1, existing API)

addon/components/api-event/credential-cell.hbs

@@ -0,0 +1,8 @@
+{{#if @value}}
+    <span class="dev-cell-text dev-identity" title={{@value}}>
+        <span class="dev-identity-icon dev-identity-icon-sm is-green"><FaIcon @icon="key" @size="xs" /></span>
+        <span class="dev-identity-title is-regular">{{or (get @column.cellComponentArgs.names @value) (mask-key @value)}}</span>
+    </span>
+{{else}}
+    <span class="dev-cell-text dev-muted">—</span>
+{{/if}}

addon/components/api-event/panel.hbs

@@ -0,0 +1,76 @@
+{{! template-lint-disable require-presentational-children no-invalid-interactive }}
+<div class="dev-panel-content" ...attributes>
+    <div class="dev-panel-identity">
+        <span class="dev-identity-icon is-blue"><FaIcon @icon={{this.icon}} @size="xs" /></span>
+        <div class="dev-identity-text">
+            <span class="dev-identity-title dev-mono" title={{this.event.event}}>{{this.event.event}} <span class="dev-tag"><span>{{this.event.public_id}}</span></span></span>
+            <span class="dev-identity-sub" title={{this.event.description}}>{{this.event.description}} · {{this.createdAt}}</span>
+        </div>
+        <div class="dev-panel-identity-actions">
+            <Button @size="xs" @icon="copy" @helpText={{t "developers.events.actions.copy-id"}} @onClick={{this.copyId}} />
+            {{#unless @isPage}}
+                <Button @size="xs" @icon="arrow-up-right-from-square" @helpText={{t "developers.common.open-full-page"}} @onClick={{this.openFullPage}} />
+            {{/unless}}
+        </div>
+    </div>
+
+    <TabNavigation @tabs={{this.tabs}} @activeTabId={{this.activeTab}} @onTabChange={{this.setTab}} @style="github" @size="sm" @tablistClass="dev-tabs">
+        {{#if (eq this.activeTab "payload")}}
+            <CodeViewer @value={{this.event.data}} @title={{t "developers.events.panel.payload"}} @emptyText={{t "developers.component.api-event.data.no-data"}} class="mt-3" />
+        {{else if (eq this.activeTab "deliveries")}}
+            <SectionCard @flush={{true}} class="mt-3">
+                <:default>
+                    {{#if this.load.isRunning}}
+                        <div class="p-3"><Skeleton::Table @rows={{3}} @columns={{3}} @header={{false}} /></div>
+                    {{else if this.error}}
+                        <States::Error @message={{this.error}} class="py-4" />
+                    {{else if this.deliveryRows.length}}
+                        <table class="dev-widget-table">
+                            <tbody>
+                                {{#each this.deliveryRows as |row|}}
+                                    <tr class="dev-widget-row" role="button" tabindex="0" {{on "click" (fn this.openAttempt row.attempt)}}>
+                                        <td>
+                                            <div class="dev-identity">
+                                                <span class="dev-identity-icon {{if row.ok 'is-green' 'is-red'}}"><FaIcon @icon="globe" @size="xs" /></span>
+                                                <span class="dev-identity-text">
+                                                    <span class="dev-identity-title" title={{row.attempt.url}}>{{row.shortUrl}}</span>
+                                                    <span class="dev-identity-sub">{{t "developers.webhooks.deliveries.attempt-n" n=(or row.attempt.attempt 1)}} · {{or row.duration "—"}} · {{row.at}}</span>
+                                                </span>
+                                            </div>
+                                        </td>
+                                        <td><Badge @status={{if row.ok "success" "danger"}} @text={{row.statusText}} @size="xxs" @hideStatusDot={{true}} @disableHumanize={{true}} /></td>
+                                        <td class="text-right"><FaIcon @icon="chevron-right" @size="xs" class="text-gray-400" /></td>
+                                    </tr>
+                                {{/each}}
+                            </tbody>
+                        </table>
+                    {{else}}
+                        <States::Empty @icon="paper-plane" @title={{t "developers.events.panel.no-deliveries"}} @message={{t "developers.events.panel.no-deliveries-message"}} class="py-4" />
+                    {{/if}}
+                </:default>
+            </SectionCard>
+        {{else}}
+            <dl class="dev-kv mt-3">
+                <dt>{{t "developers.common.source"}}</dt>
+                <dd><Badge @status="info" @text={{this.event.source}} @size="xs" @hideStatusDot={{true}} @disableHumanize={{true}} /> {{#if this.event.method}}<span class="dev-method dev-method-{{lowercase this.event.method}} ml-1">{{this.event.method}}</span>{{/if}}</dd>
+                <dt>{{t "developers.webhooks.index.credential"}}</dt>
+                <dd>{{#if this.credentialName}}{{this.credentialName}}{{else}}<span class="dev-muted">—</span>{{/if}}</dd>
+                <dt>{{t "developers.events.panel.resource"}}</dt>
+                <dd>{{#if this.resourceId}}<span class="dev-tag"><span>{{this.resourceId}}</span></span>{{else}}<span class="dev-muted">—</span>{{/if}}</dd>
+                <dt>{{t "developers.common.description"}}</dt>
+                <dd>{{this.event.description}}</dd>
+                <dt>{{t "developers.common.time"}}</dt>
+                <dd>{{this.createdAt}}</dd>
+                <dt>{{t "developers.application.sidebar.items.channels"}}</dt>
+                <dd class="dev-inline-wrap">
+                    {{#each this.channels as |channel|}}
+                        <button type="button" class="dev-tag dev-tag-button" {{on "click" (fn this.watchChannel channel)}}><span>{{channel}}</span><FaIcon @icon="tower-broadcast" @size="xs" /></button>
+                    {{/each}}
+                </dd>
+            </dl>
+            <div class="mt-4">
+                <CodeViewer @value={{this.event.data}} @title={{t "developers.events.panel.payload"}} @emptyText={{t "developers.component.api-event.data.no-data"}} />
+            </div>
+        {{/if}}
+    </TabNavigation>
+</div>

addon/components/api-event/panel.js

@@ -0,0 +1,127 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { shortUrl, timeStamp, formatSeconds } from '../../utils/format';
+import { eventIcon } from '../../utils/resource-descriptors';
+
+/**
+ * The event detail: facts, payload and the webhook deliveries this event
+ * produced. Used by the drawer and the full page.
+ */
+export default class ApiEventPanelComponent extends Component {
+    @service store;
+    @service intl;
+    @service hostRouter;
+    @service developerPanels;
+    @service notifications;
+
+    @tracked deliveries = [];
+    @tracked error = null;
+    @tracked activeTab = 'overview';
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get event() {
+        return this.args.resource ?? this.args.model;
+    }
+
+    get icon() {
+        return eventIcon(this.event?.event);
+    }
+
+    get createdAt() {
+        return timeStamp(this.event?.created_at, 'MMM d, yyyy HH:mm:ss');
+    }
+
+    get resourceId() {
+        const data = this.event?.data;
+
+        return data && typeof data === 'object' ? (data.public_id ?? data.id ?? null) : null;
+    }
+
+    get credentialName() {
+        const id = this.event?.api_credential_uuid;
+
+        if (!id) {
+            return null;
+        }
+
+        return this.store.peekRecord('api-credential', id)?.name ?? id;
+    }
+
+    get channels() {
+        const channels = [];
+        const companyId = this.event?.company_uuid;
+
+        if (companyId) {
+            channels.push(`company.${companyId}`);
+        }
+
+        if (this.event?.api_credential_uuid) {
+            channels.push(`api.${this.event.api_credential_uuid}`);
+        }
+
+        return channels;
+    }
+
+    get tabs() {
+        return [
+            { id: 'overview', label: this.intl.t('developers.common.overview'), icon: 'circle-info' },
+            { id: 'payload', label: this.intl.t('developers.events.panel.payload'), icon: 'code' },
+            { id: 'deliveries', label: this.intl.t('developers.webhooks.deliveries.title'), icon: 'paper-plane', badge: this.deliveries.length || null },
+        ];
+    }
+
+    get deliveryRows() {
+        return this.deliveries.map((attempt) => ({
+            attempt,
+            shortUrl: shortUrl(attempt.url),
+            ok: attempt.status === 'successful',
+            statusText: [attempt.status_code, attempt.reason_phrase].filter(Boolean).join(' '),
+            duration: formatSeconds(attempt.duration),
+            at: timeStamp(attempt.sent_at ?? attempt.created_at),
+        }));
+    }
+
+    @task *load() {
+        const event = this.event;
+
+        if (!event?.id) {
+            return;
+        }
+
+        try {
+            const deliveries = yield this.store.query('webhook-request-log', { api_event_uuid: event.id, limit: 50, sort: '-created_at' });
+            this.deliveries = Array.from(deliveries);
+            this.error = null;
+        } catch (error) {
+            this.error = error?.message ?? null;
+        }
+    }
+
+    @action setTab(tab) {
+        this.activeTab = tab.id;
+    }
+
+    @action openAttempt(attempt) {
+        return this.developerPanels.openAttempt(attempt);
+    }
+
+    @action openFullPage() {
+        return this.developerPanels.openFullPage('events.view', this.event);
+    }
+
+    @action watchChannel(name) {
+        this.args.close?.();
+        return this.hostRouter.transitionTo('console.developers.sockets.view', name);
+    }
+
+    @action copyId() {
+        return navigator.clipboard?.writeText(this.event.public_id).then(() => this.notifications.info(this.intl.t('developers.code-viewer.copied')));
+    }
+}

addon/components/api-event/source-cell.hbs

@@ -0,0 +1,6 @@
+<span class="dev-cell-text">
+    <Badge @status="info" @text={{or @value "api"}} @size="xs" @hideStatusDot={{true}} @disableHumanize={{true}} />
+    {{#if @row.method}}
+        <span class="dev-method dev-method-{{lowercase @row.method}} ml-1">{{@row.method}}</span>
+    {{/if}}
+</span>

addon/components/api-key/drawer-header.hbs

@@ -0,0 +1,19 @@
+<div class="dev-drawer-header" ...attributes>
+    <div class="dev-identity dev-drawer-identity">
+        <span class="dev-identity-icon dev-identity-icon-lg {{this.tone}}"><FaIcon @icon="key" /></span>
+        <span class="dev-identity-text">
+            <span class="dev-identity-title dev-drawer-title" title={{this.apiKey.name}}>
+                <span class="dev-truncate">{{or this.apiKey.name (mask-key this.apiKey.key)}}</span>
+                <Badge @status={{this.environment.status}} @text={{t this.environment.key}} @size="xs" @disableHumanize={{true}} />
+            </span>
+            <span class="dev-identity-sub">
+                <ClickToCopy @value={{this.apiKey.key}}><span class="dev-tag"><span>{{this.apiKey.key}}</span><FaIcon @icon="copy" @size="xs" /></span></ClickToCopy>
+            </span>
+        </span>
+    </div>
+    <div class="dev-drawer-actions">
+        <Layout::Resource::ActionButtons @buttons={{@actionButtons}} @dropdownIcon="ellipsis" @dropdownSize="xs" @renderInPlace={{true}} />
+        <Button @size="xs" @icon="arrow-up-right-from-square" @helpText={{t "developers.common.open-full-page"}} @onClick={{this.openFullPage}} />
+        <Button @size="xs" @icon="times" @helpText={{t "developers.common.close"}} @onClick={{@onPressCancel}} />
+    </div>
+</div>

addon/components/api-key/drawer-header.js

@@ -0,0 +1,41 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+/**
+ * Drawer header for an API key: identity block, header actions, open full page, close.
+ * Rendered by the resource context panel in place of its default header.
+ */
+export default class ApiKeyDrawerHeaderComponent extends Component {
+    @service developerPanels;
+
+    get apiKey() {
+        return this.args.resource ?? this.args.model;
+    }
+
+    get isExpired() {
+        const expiresAt = this.apiKey?.expires_at;
+
+        return expiresAt ? new Date(expiresAt).getTime() < Date.now() : false;
+    }
+
+    get tone() {
+        if (this.isExpired) {
+            return 'is-red';
+        }
+
+        return this.apiKey?.test_mode ? 'is-amber' : 'is-green';
+    }
+
+    get environment() {
+        if (this.isExpired) {
+            return { status: 'danger', key: 'developers.api-keys.badges.expired' };
+        }
+
+        return this.apiKey?.test_mode ? { status: 'warning', key: 'developers.common.test' } : { status: 'success', key: 'developers.common.live' };
+    }
+
+    @action openFullPage() {
+        return this.developerPanels.openFullPage('api-keys.index', { queryParams: { view_api_key: this.apiKey.id } });
+    }
+}

addon/components/api-key/expiry-cell.hbs

@@ -0,0 +1,7 @@
+<span class="dev-cell-text" title={{this.title}}>
+    {{#if this.showBadge}}
+        <Badge @status={{this.badgeStatus}} @text={{this.text}} @size="xs" @hideStatusDot={{true}} @disableHumanize={{true}} />
+    {{else}}
+        {{this.text}}
+    {{/if}}
+</span>