UX: Make Explorer UI similar to User Activity and Groups pages

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');
     },
 

assets/javascripts/discourse/templates/admin/plugins-explorer.hbs

@@ -145,24 +145,29 @@
 
     {{#if showRecentQueries}}
       {{#if sortedQueries.length}}
+        <div class="container">
           <table class="recent-queries">
             <thead class="heading-container">
-            <th {{action "sortByProperty" "name"}} class="col heading name">
-              {{d-icon "sort"}}
-              {{i18n 'explorer.query_name'}}
+              <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 {{action "sortByProperty" "username"}} class="col heading user">
-              {{d-icon "sort"}}
-              {{i18n 'explorer.query_user'}}
+              <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 {{action "sortByProperty" "last_run_at"}} class="col heading time">
-              {{d-icon "sort"}}
-              {{i18n 'explorer.query_time'}}
+              <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>
+                <tr class="query-row">
                   <td>
                     <a {{action "scrollTop"}} href="/admin/plugins/explorer/?id={{query.id}}">
                       <b class="query-name">{{query.name}}</b>
@@ -191,7 +196,9 @@
                   </td>
                 </tr>
               {{/each}}
+            </tbody>
           </table>
+        </div>
       {{/if}}
     {{/if}}
 

assets/stylesheets/explorer.scss

@@ -222,37 +222,33 @@
 }
 
 .recent-queries {
+  tr {
+    cursor: pointer;
+  }
   tr a {
-    display: inline-block;
-    width:100%;
-    height: 100%;
     color: inherit;
+    display: inline-block;
   }
-  .time {
-      width: 15%;
-      text-align: center;
+  .query-row a {
+    width: 100%;
   }
-  .user {
+  .created-by {
     width: 20%;
-      text-align: center;
+  }
+  .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;
   }
 }