From 347663e852dd1a2264f116deb10dced2030abf06 Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Tue, 16 Apr 2019 14:24:30 +0800
Subject: [PATCH] UX: Switch ellipsis direction when expanding web hook event
 details.

---
 .../components/admin-web-hook-event.js.es6    | 20 +++++++++++++++++--
 .../components/admin-web-hook-event.hbs       |  4 ++--
 app/assets/stylesheets/common/admin/api.scss  |  8 ++++----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/admin/components/admin-web-hook-event.js.es6 b/app/assets/javascripts/admin/components/admin-web-hook-event.js.es6
index 5191412c298..a9757927772 100644
--- a/app/assets/javascripts/admin/components/admin-web-hook-event.js.es6
+++ b/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({
diff --git a/app/assets/javascripts/admin/templates/components/admin-web-hook-event.hbs b/app/assets/javascripts/admin/templates/components/admin-web-hook-event.hbs
index a73ddbcfb0f..ce952f3ec72 100644
--- a/app/assets/javascripts/admin/templates/components/admin-web-hook-event.hbs
+++ b/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}}
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index f689bf5762b..2bfb63ac067 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/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;