DEV: Admin webhooks interface issues (#19360)

1. The events table had broken styling, making each row overflow 2. It had confusing routes: `/:id` for "edit" and `/:id/events` for "show" (now it's `/:id/edit` and `/:id` respectively) 3. There previously was an unused backend action (`#edit`) - now it is used (and `web_hooks/:id/events` route has been removed) 4. There was outdated/misplaced/duplicated CSS 5. And more
2022-12-13 01:53:08 +01:00
parent 4001e6f174
commit f9bdda84ca
23 changed files with 611 additions and 443 deletions
@@ -0,0 +1,42 @@
+<div class="web-hook-events-listing"
+  {{did-insert this.subscribe}}
+  {{will-destroy this.unsubscribe}}
+>
+  <DButton
+    @icon="paper-plane"
+    @label="admin.web_hooks.events.ping"
+    @action={{this.ping}}
+    @disabled={{not this.pingEnabled}}
+    class="webhook-events__ping-button"
+  />
+
+  {{#if this.events}}
+    <LoadMore @selector=".web-hook-events li" @action={{this.loadMore}}>
+      <div class="web-hook-events content-list">
+        <div class="heading-container">
+          <div class="col heading first status">{{i18n "admin.web_hooks.events.status"}}</div>
+          <div class="col heading event-id">{{i18n "admin.web_hooks.events.event_id"}}</div>
+          <div class="col heading timestamp">{{i18n "admin.web_hooks.events.timestamp"}}</div>
+          <div class="col heading completion">{{i18n "admin.web_hooks.events.completion"}}</div>
+          <div class="col heading actions">{{i18n "admin.web_hooks.events.actions"}}</div>
+        </div>
+
+        {{#if this.hasIncoming}}
+          <a href tabindex="0" {{on "click" this.showInserted}} class="alert alert-info clickable">
+            <CountI18n @key="admin.web_hooks.events.incoming" @count={{this.incomingCount}} />
+          </a>
+        {{/if}}
+
+        <ul>
+          {{#each this.events as |webHookEvent|}}
+            <AdminWebHookEvent @model={{webHookEvent}} />
+          {{/each}}
+        </ul>
+      </div>
+
+      <ConditionalLoadingSpinner @condition={{this.events.loadingMore}} />
+    </LoadMore>
+  {{else}}
+    <p>{{i18n "admin.web_hooks.events.none"}}</p>
+  {{/if}}
+</div>
@@ -0,0 +1,89 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { ajax } from "discourse/lib/ajax";
+import { gt, readOnly } from "@ember/object/computed";
+import { bind } from "discourse-common/utils/decorators";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+
+export default class WebhookEvents extends Component {
+  @service messageBus;
+  @service store;
+
+  @tracked pingEnabled = true;
+  @tracked events = [];
+  @tracked incomingEventIds = [];
+
+  @readOnly("incomingEventIds.length") incomingCount;
+  @gt("incomingCount", 0) hasIncoming;
+
+  constructor() {
+    super(...arguments);
+    this.loadEvents();
+  }
+
+  async loadEvents() {
+    this.events = await this.store.findAll(
+      "web-hook-event",
+      this.args.webhookId
+    );
+  }
+
+  @bind
+  subscribe() {
+    const channel = `/web_hook_events/${this.args.webhookId}`;
+    this.messageBus.subscribe(channel, this._addIncoming);
+  }
+
+  @bind
+  unsubscribe() {
+    this.messageBus.unsubscribe("/web_hook_events/*", this._addIncoming);
+  }
+
+  @bind
+  _addIncoming(data) {
+    if (data.event_type === "ping") {
+      this.pingEnabled = true;
+    }
+
+    if (!this.incomingEventIds.includes(data.web_hook_event_id)) {
+      this.incomingEventIds.pushObject(data.web_hook_event_id);
+    }
+  }
+
+  @action
+  async showInserted(event) {
+    event?.preventDefault();
+
+    const path = `/admin/api/web_hooks/${this.args.webhookId}/events/bulk`;
+    const data = await ajax(path, {
+      data: { ids: this.incomingEventIds },
+    });
+
+    const objects = data.map((webHookEvent) =>
+      this.store.createRecord("web-hook-event", webHookEvent)
+    );
+    this.events.unshiftObjects(objects);
+    this.incomingEventIds = [];
+  }
+
+  @action
+  loadMore() {
+    this.events.loadMore();
+  }
+
+  @action
+  async ping() {
+    this.pingEnabled = false;
+
+    try {
+      await ajax(`/admin/api/web_hooks/${this.args.webhookId}/ping`, {
+        type: "POST",
+      });
+    } catch (error) {
+      this.pingEnabled = true;
+      popupAjaxError(error);
+    }
+  }
+}