FEATURE: Replace combo-box with search filter (#28)

* FEATURE: Replace combo-box with search filter
* Delete unused listname property and css fixes
* Use ES6 syntax and `@computed` decorator

assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6

@@ -2,6 +2,7 @@ import showModal from "discourse/lib/show-modal";
 import Query from "discourse/plugins/discourse-data-explorer/discourse/models/query";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { ajax } from "discourse/lib/ajax";
+import { default as computed } from "ember-addons/ember-computed-decorators";
 
 const NoQuery = Query.create({ name: "No queries", fake: true });
 
@@ -26,6 +27,17 @@ export default Ember.Controller.extend({
   sortBy: ["last_run_at:desc"],
   sortedQueries: Em.computed.sort("model", "sortBy"),
 
+  @computed("search")
+  filteredContent(search) {
+    const regexp = new RegExp(this.get("search"));
+    return this.get("sortedQueries").filter(function(result) {
+      return (
+        regexp.test(result.get("name")) ||
+        regexp.test(result.get("description"))
+      );
+    });
+  },
+
   createDisabled: function() {
     return (this.get("newQueryName") || "").trim().length === 0;
   }.property("newQueryName"),

assets/javascripts/discourse/models/query.js.es6

@@ -54,17 +54,6 @@ const Query = RestModel.extend({
     );
   }.property("id"),
 
-  listName: function() {
-    let name = this.get("name");
-    if (this.get("dirty")) {
-      name += " (*)";
-    }
-    if (this.get("destroyed")) {
-      name += " (deleted)";
-    }
-    return name;
-  }.property("name", "dirty", "destroyed"),
-
   createProperties() {
     if (this.get("sql")) {
       // Importing

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

@@ -5,7 +5,7 @@
   {{else}}
     {{#unless selectedQueryId}}
       <div class="query-list">
-        {{combo-box valueAttribute="id" class="btn-left" value=selectedQueryId nameProperty="listName" none="explorer.menu_none" content=content castInteger="true" nameChanges="true"}}
+        {{text-field value=search placeholderKey="explorer.search_placeholder"}}
         {{d-button action="showCreate" icon="plus" class="no-text btn-right"}}
         {{d-button action="importQuery" label="explorer.import.label" icon="upload btn-right"}}
       </div>
@@ -164,7 +164,7 @@
           </thead>
           <tr></tr>
           <tbody>
-            {{#each sortedQueries as |query|}}
+            {{#each filteredContent as |query|}}
               <tr class="query-row">
                 <td>
                   <a {{action "scrollTop"}} href="/admin/plugins/explorer/?id={{query.id}}">
@@ -191,6 +191,9 @@
                   {{/if}}
                 </td>
               </tr>
+            {{else}}
+              <br>
+              <em class="no-search-results"> {{i18n "explorer.no_search_results"}}</em>
             {{/each}}
           </tbody>
         </table>

assets/stylesheets/explorer.scss

@@ -236,6 +236,7 @@
 
 .query-list {
   display: flex;
+  max-height: 30px;
   .btn-left {
     margin-right: 0.5em;
   }
@@ -296,6 +297,9 @@
     cursor: pointer;
     display: inline-block;
   }
+  .no-search-results {
+    color: $primary-medium;
+  }
 }
 
 .result-info {

config/locales/client.en.yml

@@ -66,4 +66,5 @@ en:
       explain_label: "Include query plan?"
       save_params: "Set Defaults"
       reset_params: "Reset"
-      menu_none: "Select a query"
+      search_placeholder: "Search..."
+      no_search_results: "Sorry, we couldn't find any results matching your text."