UX: Switch ellipsis direction when expanding web hook event details.

app/assets/javascripts/admin/components/admin-web-hook-event.js.es6

@@ -6,6 +6,8 @@ import { ensureJSON, plainJSON, prettyJSON } from "discourse/lib/formatter";
 export default Ember.Component.extend({
   tagName: "li",
   expandDetails: null,
+  expandDetailsRequestKey: "request",
+  expandDetailsResponseKey: "response",
 
   @computed("model.status")
   statusColorClasses(status) {
@@ -29,6 +31,20 @@ export default Ember.Component.extend({
     return I18n.t("admin.web_hooks.events.completed_in", { count: seconds });
   },
 
+  @computed("expandDetails")
+  expandRequestIcon(expandDetails) {
+    return expandDetails === this.get("expandDetailsRequestKey")
+      ? "ellipsis-h"
+      : "ellipsis-v";
+  },
+
+  @computed("expandDetails")
+  expandResponseIcon(expandDetails) {
+    return expandDetails === this.get("expandDetailsResponseKey")
+      ? "ellipsis-h"
+      : "ellipsis-v";
+  },
+
   actions: {
     redeliver() {
       return bootbox.confirm(
@@ -53,7 +69,7 @@ export default Ember.Component.extend({
     },
 
     toggleRequest() {
-      const expandDetailsKey = "request";
+      const expandDetailsKey = this.get("expandDetailsRequestKey");
 
       if (this.get("expandDetails") !== expandDetailsKey) {
         let headers = _.extend(
@@ -75,7 +91,7 @@ export default Ember.Component.extend({
     },
 
     toggleResponse() {
-      const expandDetailsKey = "response";
+      const expandDetailsKey = this.get("expandDetailsResponseKey");
 
       if (this.get("expandDetails") !== expandDetailsKey) {
         this.setProperties({

app/assets/javascripts/admin/templates/components/admin-web-hook-event.hbs

@@ -5,8 +5,8 @@
 <div class="col timestamp">{{createdAt}}</div>
 <div class="col completion">{{completion}}</div>
 <div class="col actions">
-  {{d-button icon="ellipsis-v" action=(action "toggleRequest") label="admin.web_hooks.events.request"}}
-  {{d-button icon="ellipsis-v" action=(action "toggleResponse") label="admin.web_hooks.events.response"}}
+  {{d-button icon=expandRequestIcon action=(action "toggleRequest") label="admin.web_hooks.events.request"}}
+  {{d-button icon=expandResponseIcon action=(action "toggleResponse") label="admin.web_hooks.events.response"}}
   {{d-button icon="sync" action=(action "redeliver") label="admin.web_hooks.events.redeliver"}}
 </div>
 {{#if expandDetails}}

app/assets/stylesheets/common/admin/api.scss

@@ -209,16 +209,16 @@ table.api-keys {
     width: 90px;
   }
   .col.event-id {
-    width: 300px;
+    width: 90px;
   }
   .col.timestamp {
-    width: 150px;
+    width: 180px;
   }
   .col.completion {
-    width: 220px;
+    width: 250px;
   }
   .col.actions {
-    width: 305px;
+    width: 455px;
     padding-top: 0;
     a {
       text-decoration: underline;