From 5edb8ea7f86107e68e795681d64757f40d80fbc5 Mon Sep 17 00:00:00 2001
From: Rishabh Nambiar <5862206+rishabhnambiar@users.noreply.github.com>
Date: Fri, 31 Aug 2018 23:41:33 +0530
Subject: [PATCH] UX: Make Explorer UI similar to User Activity and Groups
 pages

---
 .../controllers/admin-plugins-explorer.js.es6 |  10 +-
 .../templates/admin/plugins-explorer.hbs      | 101 ++++++++++--------
 assets/stylesheets/explorer.scss              |  48 ++++-----
 3 files changed, 85 insertions(+), 74 deletions(-)

diff --git a/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6 b/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6
index 613577a..3c40d98 100644
--- a/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6
+++ b/assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6
@@ -11,13 +11,14 @@ export default Ember.Controller.extend({
   showResults: false,
   hideSchema: false,
   loading: false,
-
   explain: false,
 
   saveDisabled: Ember.computed.not('selectedItem.dirty'),
   runDisabled: Ember.computed.alias('selectedItem.dirty'),
   results: Em.computed.alias('selectedItem.results'),
 
+  asc: null,
+  order: null,
   editing: false,
   everEditing: false,
   showRecentQueries: true,
@@ -98,8 +99,13 @@ export default Ember.Controller.extend({
     },
 
     goHome() {
+      this.setProperties({
+        asc: null,
+        order: null,
+        selectedQueryId: null,
+        sortBy: ['last_run_at:desc']
+      });
       this.send('refreshModel');
-      this.set('selectedQueryId', null);
       this.transitionToRoute('adminPlugins.explorer');
     },
 
diff --git a/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs b/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs
index ccc3129..541cdaa 100644
--- a/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs
+++ b/assets/javascripts/discourse/templates/admin/plugins-explorer.hbs
@@ -145,53 +145,60 @@
 
     {{#if showRecentQueries}}
       {{#if sortedQueries.length}}
-        <table class="recent-queries">
-          <thead class="heading-container">
-            <th {{action "sortByProperty" "name"}} class="col heading name">
-              {{d-icon "sort"}}
-              {{i18n 'explorer.query_name'}}
-            </th>
-            <th {{action "sortByProperty" "username"}} class="col heading user">
-              {{d-icon "sort"}}
-              {{i18n 'explorer.query_user'}}
-            </th>
-            <th {{action "sortByProperty" "last_run_at"}} class="col heading time">
-              {{d-icon "sort"}}
-              {{i18n 'explorer.query_time'}}
-            </th>
-          </thead>
-          <tr></tr>
-          {{#each sortedQueries as |query|}}
-            <tr>
-              <td>
-                <a {{action "scrollTop"}} href="/admin/plugins/explorer/?id={{query.id}}">
-                  <b class="query-name">{{query.name}}</b>
-                  <br>
-                  <medium class="query-desc">{{query.description}}</medium>
-                  <br>
-                </a>
-              </td>
-              <td class="query-created-by">
-                {{#if query.username}}
-                  <a href="/users/{{query.username}}/activity">
-                    <medium>{{query.username}}</medium>
-                  </a>
-                {{/if}}
-              </td>
-              <td class="query-created-at">
-                {{#if query.last_run_at}}  
-                  <medium>
-                    {{bound-date query.last_run_at}}
-                  </medium>
-                {{else}}
-                  <medium>
-                    {{bound-date query.created_at}}
-                  </medium>
-                {{/if}}
-              </td>
-            </tr>
-          {{/each}}
-        </table>
+        <div class="container">
+          <table class="recent-queries">
+            <thead class="heading-container">
+              <th class="col heading name">
+                <div class="heading-toggle" {{action "sortByProperty" "name"}}>
+                  {{directory-toggle field="name" labelKey="explorer.query_name" order=order asc=asc}}
+                </div>
+              </th>
+              <th class="col heading created-by" {{action "sortByProperty" "username"}}>
+                <div class="heading-toggle">
+                  {{directory-toggle field="username" labelKey="explorer.query_user" order=order asc=asc}}
+                </div>
+              </th>
+              <th class="col heading created-at" {{action "sortByProperty" "last_run_at"}}>
+                <div class="heading-toggle">
+                  {{directory-toggle field="last_run_at" labelKey="explorer.query_time" order=order asc=desc}}
+                </div>
+              </th>
+            </thead>
+            <tr></tr>
+            <tbody>
+              {{#each sortedQueries as |query|}}
+                <tr class="query-row">
+                  <td>
+                    <a {{action "scrollTop"}} href="/admin/plugins/explorer/?id={{query.id}}">
+                      <b class="query-name">{{query.name}}</b>
+                      <br>
+                      <medium class="query-desc">{{query.description}}</medium>
+                      <br>
+                    </a>
+                  </td>
+                  <td class="query-created-by">
+                    {{#if query.username}}
+                      <a href="/users/{{query.username}}/activity">
+                        <medium>{{query.username}}</medium>
+                      </a>
+                    {{/if}}
+                  </td>
+                  <td class="query-created-at">
+                    {{#if query.last_run_at}}  
+                      <medium>
+                        {{bound-date query.last_run_at}}
+                      </medium>
+                    {{else}}
+                      <medium>
+                        {{bound-date query.created_at}}
+                      </medium>
+                    {{/if}}
+                  </td>
+                </tr>
+              {{/each}}
+            </tbody>
+          </table>
+        </div>
       {{/if}}
     {{/if}}
 
diff --git a/assets/stylesheets/explorer.scss b/assets/stylesheets/explorer.scss
index dbcf8d1..681d8c9 100644
--- a/assets/stylesheets/explorer.scss
+++ b/assets/stylesheets/explorer.scss
@@ -222,37 +222,33 @@
 }
 
 .recent-queries {
-  tr a {
-    display: inline-block;
-    width:100%;
-    height: 100%;
-    color: inherit; 
+  tr {
+    cursor: pointer;
   }
-  .time {
-      width: 15%;
-      text-align: center;
-    }
-  .user {
-      width: 20%;
-      text-align: center;
+  tr a {
+    color: inherit;
+    display: inline-block;
+  }
+  .query-row a {
+    width: 100%;
+  }
+  .created-by {
+    width: 20%;
+  }
+  .created-at {
+    width: 15%;
+  }
+  .query-created-by {
+    color: $primary-high;
   }
   .query-created-at {
     color: $secondary-medium;
     font-weight: bold;
-    text-align: center;
-    vertical-align: middle;
-  } 
-  .query-created-by {
-    color: $primary-high;
-    text-align: center;
-    vertical-align: middle;
   }  
-  tr {
-    height: 2px;
-  }
   .heading {
-    padding-top: 30px;
+    position: relative;
     color: $primary-high;
+    padding: 50px 0px 0px 0px;
   }
   .query-name {
     color: $secondary-low;
@@ -260,8 +256,10 @@
   .query-desc {
     color: $primary-high;
   }
-  th:hover{
-    cursor: pointer;
+  .heading-toggle {
+    bottom: 0;
+    position: absolute;
+    display: inline-block;
   }
 }