REFACTOR: old patterns, deprecations and dead code (#35)

assets/javascripts/discourse/components/explorer-container.js.es6

@@ -15,19 +15,19 @@ export default Ember.Component.extend({
     if (this._state !== "inDOM") {
       return;
     }
-    const $editPane = this.$(".query-editor");
+    const $editPane = $(".query-editor");
     if (!$editPane.length) {
       return;
     }
 
-    const oldGrippie = this.get("grippie");
+    const oldGrippie = this.grippie;
     if (oldGrippie) {
       oldGrippie.off("mousedown mousemove mouseup");
     }
 
     const $grippie = $editPane.find(".grippie");
     const $target = $editPane.find(".panels-flex");
-    const $document = Ember.$(document);
+    const $document = $(document);
 
     const minWidth = $target.width();
     const minHeight = $target.height();
@@ -35,11 +35,11 @@ export default Ember.Component.extend({
     this.set("grippie", $grippie);
 
     const mousemove = e => {
-      const diffY = this.get("startY") - e.screenY;
-      const diffX = this.get("startX") - e.screenX;
+      const diffY = this.startY - e.screenY;
+      const diffX = this.startX - e.screenX;
 
-      const newHeight = Math.max(minHeight, this.get("startHeight") - diffY);
-      const newWidth = Math.max(minWidth, this.get("startWidth") - diffX);
+      const newHeight = Math.max(minHeight, this.startHeight - diffY);
+      const newWidth = Math.max(minWidth, this.startWidth - diffX);
 
       $target.height(newHeight);
       $target.width(newWidth);
@@ -78,14 +78,16 @@ export default Ember.Component.extend({
   },
 
   didInsertElement() {
-    this._super();
+    this._super(...arguments);
+
     this._bindControls();
   },
 
   willDestroyElement() {
-    this._super();
-    if (this.get("everEditing")) {
-      this.get("grippie").off("mousedown");
+    this._super(...arguments);
+
+    if (this.everEditing) {
+      this.grippie && this.grippie.off("mousedown");
       this.set("grippie", null);
     }
   }

assets/javascripts/discourse/components/explorer-schema-enuminfo.js.es6

@@ -1,8 +1,10 @@
+import { default as computed } from "ember-addons/ember-computed-decorators";
+
 export default Ember.Component.extend({
   tagName: "ol",
 
-  enuminfo: function() {
-    const hash = this.get("col.enum");
+  @computed("col.enum")
+  enuminfo(hash) {
     let result = [];
     for (let key in hash) {
       if (!hash.hasOwnProperty(key)) {
@@ -11,5 +13,5 @@ export default Ember.Component.extend({
       result.push({ value: key, name: hash[key] });
     }
     return result;
-  }.property("col.enum")
+  }
 });

assets/javascripts/discourse/components/explorer-schema-onetable.js.es6

@@ -1,22 +1,25 @@
+import { on } from "ember-addons/ember-computed-decorators";
+
 export default Ember.Component.extend({
   classNameBindings: [":schema-table", "open"],
   tagName: "li",
 
-  open: Ember.computed.alias("table.open"),
+  open: Ember.computed.reads("table.open"),
 
-  _bindClicks: function() {
-    const self = this;
-    this.$()
+  @on("didInsertElement")
+  _bindClicks() {
+    $(this.element)
       .find(".schema-table-name")
-      .click(function(e) {
-        self.set("open", !self.get("open"));
+      .click(e => {
+        this.set("open", !this.open);
         e.preventDefault();
       });
-  }.on("didInsertElement"),
+  },
 
-  _cleanup: function() {
-    this.$()
+  @on("willDestroyElement")
+  _cleanup() {
+    $(this.element)
       .find(".schema-table-name")
       .off("click");
-  }.on("willDestroyElement")
+  }
 });

assets/javascripts/discourse/components/explorer-schema.js.es6

@@ -1,3 +1,7 @@
+import {
+  default as computed,
+  observes
+} from "ember-addons/ember-computed-decorators";
 import debounce from "discourse/lib/debounce";
 
 export default Ember.Component.extend({
@@ -7,15 +11,14 @@ export default Ember.Component.extend({
     }
   },
 
-  transformedSchema: function() {
-    const schema = this.get("schema");
-
+  @computed("schema")
+  transformedSchema(schema) {
     for (let key in schema) {
       if (!schema.hasOwnProperty(key)) {
         continue;
       }
 
-      schema[key].forEach(function(col) {
+      schema[key].forEach(col => {
         const notes_components = [];
         if (col.primary) {
           notes_components.push("primary key");
@@ -46,17 +49,18 @@ export default Ember.Component.extend({
       });
     }
     return schema;
-  }.property("schema"),
+  },
 
-  rfilter: function() {
-    if (!Ember.isBlank(this.get("filter"))) {
-      return new RegExp(this.get("filter"));
+  @computed("filter")
+  rfilter(filter) {
+    if (!Ember.isBlank(filter)) {
+      return new RegExp(filter);
     }
-  }.property("filter"),
+  },
 
-  filterTables: function(schema) {
+  filterTables(schema) {
     let tables = [];
-    const filter = this.get("rfilter"),
+    const filter = this.rfilter,
       haveFilter = !!filter;
 
     for (let key in schema) {
@@ -89,7 +93,7 @@ export default Ember.Component.extend({
       } else {
         // filter the columns
         let filterCols = [];
-        schema[key].forEach(function(col) {
+        schema[key].forEach(col => {
           if (filter.source === col.column_name) {
             filterCols.unshift(col);
           } else if (filter.test(col.column_name)) {
@@ -108,20 +112,20 @@ export default Ember.Component.extend({
     return tables;
   },
 
+  @observes("filter")
   triggerFilter: debounce(function() {
-    this.set(
-      "filteredTables",
-      this.filterTables(this.get("transformedSchema"))
-    );
+    this.set("filteredTables", this.filterTables(this.transformedSchema));
     this.set("loading", false);
-  }, 500).observes("filter"),
+  }, 500),
 
-  setLoading: function() {
+  @observes("filter")
+  setLoading() {
     this.set("loading", true);
-  }.observes("filter"),
+  },
 
   init() {
-    this._super();
+    this._super(...arguments);
+
     this.set("loading", true);
     this.triggerFilter();
   }

assets/javascripts/discourse/components/hljs-code-view.js.es6

@@ -1,3 +1,4 @@
+import { on, observes } from "ember-addons/ember-computed-decorators";
 import debounce from "discourse/lib/debounce";
 import highlightSyntax from "discourse/lib/highlight-syntax";
 import { bufferedRender } from "discourse-common/lib/buffered-render";
@@ -5,17 +6,19 @@ import { bufferedRender } from "discourse-common/lib/buffered-render";
 export default Ember.Component.extend(
   bufferedRender({
     buildBuffer(buffer) {
-      buffer.push("<pre><code class='" + this.get("codeClass") + "'>");
-      buffer.push(Handlebars.Utils.escapeExpression(this.get("value")));
+      buffer.push("<pre><code class='" + this.codeClass + "'>");
+      buffer.push(Handlebars.Utils.escapeExpression(this.value));
       buffer.push("</code></pre>");
     },
 
+    @observes("value")
     _refreshHighlight: debounce(function() {
       this.rerenderBuffer();
-    }, 50).observes("value"),
+    }, 50),
 
-    _applyHighlight: function() {
-      highlightSyntax(this.$());
-    }.on("didInsertElement")
+    @on("didInsertElement")
+    _applyHighlight() {
+      highlightSyntax($(this.element));
+    }
   })
 );

assets/javascripts/discourse/components/json-file-uploader.js.es6

@@ -1,3 +1,5 @@
+import { default as computed, on, observes } from "ember-addons/ember-computed-decorators";
+
 export default Ember.Component.extend({
   fileInput: null,
   loading: false,
@@ -6,80 +8,77 @@ export default Ember.Component.extend({
 
   classNames: ["json-uploader"],
 
-  _initialize: function() {
-    const $this = this.$();
-    const self = this;
+  @on("didInsertElement")
+  _initialize() {
+    const $this = $(this.element);
+    const fileInput = this.element.querySelector("#js-file-input");
+    this.set("fileInput", fileInput);
 
-    const $fileInput = $this.find("#js-file-input");
-    this.set("fileInput", $fileInput[0]);
+    $(fileInput).on("change", () => this.fileSelected(this.files));
 
-    $fileInput.on("change", function() {
-      self.fileSelected(this.files);
-    });
-
-    $this.on("dragover", function(e) {
+    $this.on("dragover", e => {
       if (e.preventDefault) e.preventDefault();
       return false;
     });
-    $this.on("dragenter", function(e) {
+    $this.on("dragenter", e => {
       if (e.preventDefault) e.preventDefault();
-      self.set("hover", self.get("hover") + 1);
+      this.set("hover", this.hover + 1);
       return false;
     });
-    $this.on("dragleave", function(e) {
+    $this.on("dragleave", e => {
       if (e.preventDefault) e.preventDefault();
-      self.set("hover", self.get("hover") - 1);
+      this.set("hover", this.hover - 1);
       return false;
     });
-    $this.on("drop", function(e) {
+    $this.on("drop", e => {
       if (e.preventDefault) e.preventDefault();
 
-      self.set("hover", 0);
-      self.fileSelected(e.dataTransfer.files);
+      this.set("hover", 0);
+      this.fileSelected(e.dataTransfer.files);
       return false;
     });
-  }.on("didInsertElement"),
+  },
 
-  accept: function() {
+  @computed("extension")
+  accept(extension) {
     return (
       ".json,application/json,application/x-javascript,text/json" +
-      (this.get("extension") ? "," + this.get("extension") : "")
+      (extension ? `,${extension}` : "")
     );
-  }.property("extension"),
+  },
 
-  setReady: function() {
+  @observes("destination", "expectedRootObjectName")
+  setReady() {
     let parsed;
     try {
-      parsed = JSON.parse(this.get("value"));
+      parsed = JSON.parse(this.value);
     } catch (e) {
       this.set("ready", false);
       return;
     }
 
-    const rootObject = parsed[this.get("expectedRootObjectName")];
+    const rootObject = parsed[this.expectedRootObjectName];
 
     if (rootObject !== null && rootObject !== undefined) {
       this.set("ready", true);
     } else {
       this.set("ready", false);
     }
-  }.observes("destination", "expectedRootObjectName"),
+  },
 
   actions: {
-    selectFile: function() {
-      const $fileInput = $(this.get("fileInput"));
-      $fileInput.click();
+    selectFile() {
+      $(this.fileInput).click();
     }
   },
 
   fileSelected(fileList) {
-    const self = this;
     let files = [];
     for (let i = 0; i < fileList.length; i++) {
       files[i] = fileList[i];
     }
     const fileNameRegex = /\.(json|txt)$/;
-    files = files.filter(function(file) {
+    files = files.filter(file => {
       if (fileNameRegex.test(file.name)) {
         return true;
       }
@@ -92,10 +91,9 @@ export default Ember.Component.extend({
 
     this.set("loading", true);
 
-    let reader = new FileReader();
-    reader.onload = function(evt) {
-      self.set("value", evt.target.result);
-      self.set("loading", false);
+    const reader = new FileReader();
+    reader.onload = evt => {
+      this.setProperties({ value: evt.target.result, loading: false });
     };
 
     reader.readAsText(firstFile);

assets/javascripts/discourse/components/param-field.js.es6

@@ -1,9 +0,0 @@
-export default Ember.TextField.extend({
-  value: function(key, value) {
-    if (arguments.length > 1) {
-      this.get("params")[this.get("pname")] = value;
-    }
-
-    return this.get("params")[this.get("pname")];
-  }.property("params", "pname")
-});

assets/javascripts/discourse/components/param-input.js.es6

@@ -1,4 +1,6 @@
+import { default as computed } from "ember-addons/ember-computed-decorators";
 // import Category from 'discourse/models/category';
+
 const Category = Discourse.Category;
 
 const layoutMap = {
@@ -43,31 +45,29 @@ export default Ember.Component.extend({
 
   value: Ember.computed("params", "info.identifier", {
     get() {
-      return this.get("params")[this.get("info.identifier")];
+      return this.params[this.get("info.identifier")];
     },
     set(key, value) {
-      this.get("params")[this.get("info.identifier")] = value.toString();
+      this.params[this.get("info.identifier")] = value.toString();
       return value;
     }
   }),
 
   valueBool: Ember.computed("params", "info.identifier", {
     get() {
-      return this.get("params")[this.get("info.identifier")] !== "false";
+      return this.params[this.get("info.identifier")] !== "false";
     },
     set(key, value) {
       value = !!value;
-      this.get("params")[this.get("info.identifier")] = value.toString();
+      this.params[this.get("info.identifier")] = value.toString();
       return value;
     }
   }),
 
-  valid: function() {
-    const type = this.get("info.type"),
-      value = this.get("value");
-
-    if (Ember.isEmpty(this.get("value"))) {
-      return this.get("info.nullable");
+  @computed("value", "info.type", "info.nullable")
+  valid(value, type, nullable) {
+    if (Ember.isEmpty(value)) {
+      return nullable;
     }
 
     const intVal = parseInt(value, 10);
@@ -88,9 +88,7 @@ export default Ember.Component.extend({
           /^(-?)NaN$/i.test(value)
         );
       case "int_list":
-        return value.split(",").every(function(i) {
-          return /^(-?\d+|null)$/.test(i.trim());
-        });
+        return value.split(",").every(i => /^(-?\d+|null)$/.test(i.trim()));
       case "post_id":
         return isPositiveInt || /\d+\/\d+(\?u=.*)?$/.test(value);
       case "category_id":
@@ -99,9 +97,7 @@ export default Ember.Component.extend({
         }
 
         if (isPositiveInt) {
-          return !!this.site.categories.find(function(c) {
-            return c.get("id") === intVal;
-          });
+          return !!this.site.categories.find(c => c.id === intVal);
         } else if (/\//.test(value)) {
           const match = /(.*)\/(.*)/.exec(value);
           if (!match) return false;
@@ -116,30 +112,30 @@ export default Ember.Component.extend({
       case "group_id":
         const groups = this.site.get("groups");
         if (isPositiveInt) {
-          return !!groups.find(function(g) {
-            return g.id === intVal;
-          });
+          return !!groups.find(g => g.id === intVal);
         } else {
-          return !!groups.find(function(g) {
-            return g.name === value;
-          });
+          return !!groups.find(g => g.name === value);
         }
     }
     return true;
-  }.property("value", "info.type", "info.nullable"),
+  },
 
-  layoutType: function() {
-    const type = this.get("info.type");
-    if ((type === "time" || type === "date") && !allowsInputTypeTime()) {
+  @computed("info.type")
+  layoutType(type) {
+    if (
+      (type === "time" || type === "date") &&
+      !allowsInputTypeTime()
+    ) {
       return "string";
     }
     if (layoutMap[type]) {
       return layoutMap[type];
     }
     return "generic";
-  }.property("info.type"),
+  },
 
-  layoutName: function() {
-    return "admin/components/q-params/" + this.get("layoutType");
-  }.property("layoutType")
+  @computed("layoutType")
+  layoutName(layoutType) {
+    return `admin/components/q-params/${layoutType}`;
+  }
 });

assets/javascripts/discourse/components/query-result.js.es6

@@ -4,7 +4,7 @@ import { getOwner } from "discourse-common/lib/get-owner";
 import { default as computed } from "ember-addons/ember-computed-decorators";
 
 function randomIdShort() {
-  return "xxxxxxxx".replace(/[xy]/g, function() {
+  return "xxxxxxxx".replace(/[xy]/g, () => {
     /*eslint-disable*/
     return ((Math.random() * 16) | 0).toString(16);
     /*eslint-enable*/
@@ -13,7 +13,7 @@ function randomIdShort() {
 
 function transformedRelTable(table, modelClass) {
   const result = {};
-  table.forEach(function(item) {
+  table.forEach(item => {
     if (modelClass) {
       result[item.id] = modelClass.create(item);
     } else {
@@ -33,7 +33,7 @@ const QueryResultComponent = Ember.Component.extend({
   hasExplain: Ember.computed.notEmpty("content.explain"),
 
   @computed("content.result_count")
-  resultCount: function(count) {
+  resultCount(count) {
     if (count === this.get("content.default_limit")) {
       return I18n.t("explorer.max_result_count", { count });
     } else {
@@ -41,32 +41,32 @@ const QueryResultComponent = Ember.Component.extend({
     }
   },
 
-  colCount: function() {
-    return this.get("content.columns").length;
-  }.property("content.columns.length"),
+  colCount: Ember.computed.reads("content.columns.length"),
 
-  duration: function() {
+  @computed("content.duration")
+  duration(contentDuration) {
     return I18n.t("explorer.run_time", {
-      value: I18n.toNumber(this.get("content.duration"), { precision: 1 })
+      value: I18n.toNumber(contentDuration, { precision: 1 })
     });
-  }.property("content.duration"),
+  },
 
-  parameterAry: function() {
+  @computed("params.[]")
+  parameterAry(params) {
     let arr = [];
-    const params = this.get("params");
     for (var key in params) {
       if (params.hasOwnProperty(key)) {
-        arr.push({ key: key, value: params[key] });
+        arr.push({ key, value: params[key] });
       }
     }
     return arr;
-  }.property("params.[]"),
+  },
 
-  columnDispNames: function() {
-    if (!this.get("columns")) {
+  @computed("content", "columns.[]")
+  columnDispNames(content, columns) {
+    if (!columns) {
       return [];
     }
-    return this.get("columns").map(function(colName) {
+    return columns.map(colName => {
       if (colName.endsWith("_id")) {
         return colName.slice(0, -3);
       }
@@ -76,66 +76,70 @@ const QueryResultComponent = Ember.Component.extend({
       }
       return colName;
     });
-  }.property("content", "columns.[]"),
+  },
 
-  fallbackTemplate: function() {
+  @computed
+  fallbackTemplate() {
     return getOwner(this).lookup("template:explorer/text.raw");
-  }.property(),
+  },
 
-  columnTemplates: function() {
-    const self = this;
-    if (!this.get("columns")) {
+  @computed("content", "columns.[]")
+  columnTemplates(content, columns) {
+    if (!columns) {
       return [];
     }
-    return this.get("columns").map(function(colName, idx) {
+    return columns.map((colName, idx) => {
       let viewName = "text";
-      if (self.get("content.colrender")[idx]) {
-        viewName = self.get("content.colrender")[idx];
+      if (this.get("content.colrender")[idx]) {
+        viewName = this.get("content.colrender")[idx];
       }
 
       // After `findRawTemplates` is in stable this should be updated to use that
-      let template = getOwner(self).lookup(
-        "template:explorer/" + viewName + ".raw"
-      );
+      let template = getOwner(this).lookup(`template:explorer/${viewName}.raw`);
       if (!template) {
         template = Discourse.RAW_TEMPLATES[`javascripts/explorer/${viewName}`];
       }
 
       return { name: viewName, template };
     });
-  }.property("content", "columns.[]"),
+  },
 
-  transformedUserTable: function() {
-    return transformedRelTable(this.get("content.relations.user"));
-  }.property("content.relations.user"),
-  transformedBadgeTable: function() {
-    return transformedRelTable(this.get("content.relations.badge"), Badge);
-  }.property("content.relations.badge"),
-  transformedPostTable: function() {
-    return transformedRelTable(this.get("content.relations.post"));
-  }.property("content.relations.post"),
-  transformedTopicTable: function() {
-    return transformedRelTable(this.get("content.relations.topic"));
-  }.property("content.relations.topic"),
+  @computed("content.relations.user")
+  transformedUserTable(contentRelationsUser) {
+    return transformedRelTable(contentRelationsUser);
+  },
+  @computed("content.relations.badge")
+  transformedBadgeTable(contentRelationsBadge) {
+    return transformedRelTable(contentRelationsBadge, Badge);
+  },
+  @computed("content.relations.post")
+  transformedPostTable(contentRelationsPost) {
+    return transformedRelTable(contentRelationsPost);
+  },
+  @computed("content.relations.topic")
+  transformedTopicTable(contentRelationsTopic) {
+    return transformedRelTable(contentRelationsTopic);
+  },
 
-  transformedGroupTable: function() {
-    return transformedRelTable(this.get("site.groups"));
-  }.property("site.groups"),
+  @computed("site.groups")
+  transformedGroupTable(groups) {
+    return transformedRelTable(groups);
+  },
 
   lookupUser(id) {
-    return this.get("transformedUserTable")[id];
+    return this.transformedUserTable[id];
   },
   lookupBadge(id) {
-    return this.get("transformedBadgeTable")[id];
+    return this.transformedBadgeTable[id];
   },
   lookupPost(id) {
-    return this.get("transformedPostTable")[id];
+    return this.transformedPostTable[id];
   },
   lookupTopic(id) {
-    return this.get("transformedTopicTable")[id];
+    return this.transformedTopicTable[id];
   },
   lookupGroup(id) {
-    return this.get("transformedGroupTable")[id];
+    return this.transformedGroupTable[id];
   },
 
   lookupCategory(id) {
@@ -175,18 +179,16 @@ const QueryResultComponent = Ember.Component.extend({
       form.appendChild(field);
     }
 
-    addInput("params", JSON.stringify(this.get("params")));
-    addInput("explain", this.get("hasExplain"));
+    addInput("params", JSON.stringify(this.params));
+    addInput("explain", this.hasExplain);
     addInput("limit", "1000000");
 
-    ajax("/session/csrf.json").then(function(csrf) {
+    ajax("/session/csrf.json").then(csrf => {
       addInput("authenticity_token", csrf.csrf);
 
       document.body.appendChild(form);
       form.submit();
-      Ember.run.next("afterRender", function() {
-        document.body.removeChild(form);
-      });
+      Ember.run.schedule("afterRender", () => document.body.removeChild(form));
     });
   },
 

assets/javascripts/discourse/components/query-row-content.js.es6

@@ -52,17 +52,16 @@ const QueryRowContentComponent = Ember.Component.extend(
     tagName: "tr",
 
     buildBuffer(buffer) {
-      const self = this;
-      const row = this.get("row");
-      const parentView = self.get("parentView");
-      const fallback = this.get("fallbackTemplate");
+      const row = this.row;
+      const parentView = this.parentView;
+      const fallback = this.fallbackTemplate;
       const helpers = {
         "icon-or-image": icon_or_image_replacement,
         "category-link": category_badge_replacement,
         reltime: bound_date_replacement
       };
 
-      const parts = this.get("columnTemplates").map(function(t, idx) {
+      const parts = this.columnTemplates.map((t, idx) => {
         const value = row[idx],
           id = parseInt(value);
 
@@ -108,7 +107,7 @@ const QueryRowContentComponent = Ember.Component.extend(
         }
       });
 
-      buffer.push("<td>" + parts.join("</td><td>") + "</td>");
+      buffer.push(`<td>${parts.join("</td><td>")}</td>`);
     }
   })
 );

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

@@ -2,7 +2,10 @@ 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";
+import {
+  default as computed,
+  observes
+} from "ember-addons/ember-computed-decorators";
 
 const NoQuery = Query.create({ name: "No queries", fake: true });
 
@@ -28,69 +31,68 @@ export default Ember.Controller.extend({
   sortedQueries: Ember.computed.sort("model", "sortBy"),
 
   @computed("search", "sortBy")
-  filteredContent() {
-    const regexp = new RegExp(this.get("search"), "i");
-    return this.get("sortedQueries").filter(function(result) {
-      return (
-        regexp.test(result.get("name")) ||
-        regexp.test(result.get("description"))
-      );
+  filteredContent(search) {
+    const regexp = new RegExp(search, "i");
+    return this.sortedQueries.filter(result => {
+      return regexp.test(result.name) || regexp.test(result.description);
     });
   },
 
-  createDisabled: function() {
-    return (this.get("newQueryName") || "").trim().length === 0;
-  }.property("newQueryName"),
+  @computed("newQueryName")
+  createDisabled(newQueryName) {
+    return (newQueryName || "").trim().length === 0;
+  },
 
-  selectedItem: function() {
-    const id = parseInt(this.get("selectedQueryId"));
-    const item = this.get("model").find(q => q.get("id") === id);
+  @computed("selectedQueryId")
+  selectedItem(selectedQueryId) {
+    const id = parseInt(selectedQueryId);
+    const item = this.model.find(q => q.id === id);
     !isNaN(id)
       ? this.set("showRecentQueries", false)
       : this.set("showRecentQueries", true);
     if (id < 0) this.set("editDisabled", true);
     return item || NoQuery;
-  }.property("selectedQueryId"),
+  },
 
-  othersDirty: function() {
-    const selected = this.get("selectedItem");
-    return !!this.get("model").find(q => q !== selected && q.get("dirty"));
-  }.property("selectedItem", "selectedItem.dirty"),
+  @computed("selectedItem", "selectedItem.dirty")
+  othersDirty(selectedItem) {
+    return !!this.model.find(q => q !== selectedItem && q.dirty);
+  },
 
-  setEverEditing: function() {
-    if (this.get("editing") && !this.get("everEditing")) {
+  @observes("editing")
+  setEverEditing() {
+    if (this.editing && !this.everEditing) {
       this.set("everEditing", true);
     }
-  }.observes("editing"),
+  },
 
   addCreatedRecord(record) {
-    this.get("model").pushObject(record);
+    this.model.pushObject(record);
     this.set("selectedQueryId", Ember.get(record, "id"));
-    this.get("selectedItem").set("dirty", false);
-    this.set("showResults", false);
-    this.set("results", null);
-    this.set("editing", true);
+    this.selectedItem.set("dirty", false);
+    this.setProperties({
+      showResults: false,
+      results: null,
+      editing: true
+    });
   },
 
   save() {
-    const self = this;
     this.set("loading", true);
     if (this.get("selectedItem.description") === "")
       this.set("selectedItem.description", "");
-    return this.get("selectedItem")
+    return this.selectedItem
       .save()
-      .then(function() {
-        const query = self.get("selectedItem");
+      .then(() => {
+        const query = this.selectedItem;
         query.markNotDirty();
-        self.set("editing", false);
+        this.set("editing", false);
       })
-      .catch(function(x) {
+      .catch(x => {
         popupAjaxError(x);
         throw x;
       })
-      .finally(function() {
-        self.set("loading", false);
-      });
+      .finally(() => this.set("loading", false));
   },
 
   actions: {
@@ -119,8 +121,7 @@ export default Ember.Controller.extend({
 
     scrollTop() {
       window.scrollTo(0, 0);
-      this.set("editing", false);
-      this.set("everEditing", false);
+      this.setProperties({ editing: false, everEditing: false });
     },
 
     goHome() {
@@ -137,11 +138,11 @@ export default Ember.Controller.extend({
     },
 
     resetParams() {
-      this.get("selectedItem").resetParams();
+      this.selectedItem.resetParams();
     },
 
     saveDefaults() {
-      this.get("selectedItem").saveDefaults();
+      this.selectedItem.saveDefaults();
     },
 
     save() {
@@ -161,10 +162,12 @@ export default Ember.Controller.extend({
     },
 
     create() {
-      const name = this.get("newQueryName").trim();
-      this.set("loading", true);
-      this.set("showCreate", false);
-      this.set("showRecentQueries", false);
+      const name = this.newQueryName.trim();
+      this.setProperties({
+        loading: true,
+        showCreate: false,
+        showRecentQueries: false
+      });
       this.store
         .createRecord("query", { name })
         .save()
@@ -174,65 +177,50 @@ export default Ember.Controller.extend({
     },
 
     discard() {
-      const self = this;
       this.set("loading", true);
       this.store
         .find("query", this.get("selectedItem.id"))
-        .then(function(result) {
-          const query = self.get("selectedItem");
+        .then(result => {
+          const query = this.get("selectedItem");
           query.setProperties(result.getProperties(Query.updatePropertyNames));
           query.markNotDirty();
-          self.set("editing", false);
+          this.set("editing", false);
         })
         .catch(popupAjaxError)
-        .finally(function() {
-          self.set("loading", false);
-        });
+        .finally(() => this.set("loading", false));
     },
 
     destroy() {
-      const self = this;
-      const query = this.get("selectedItem");
-      this.set("loading", true);
-      this.set("showResults", false);
+      const query = this.selectedItem;
+      this.setProperties({ loading: true, showResults: false });
       this.store
         .destroyRecord("query", query)
-        .then(function() {
-          query.set("destroyed", true);
-        })
+        .then(() => query.set("destroyed", true))
         .catch(popupAjaxError)
-        .finally(function() {
-          self.set("loading", false);
-        });
+        .finally(() => this.set("loading", false));
     },
 
     recover() {
-      const self = this;
-      const query = this.get("selectedItem");
-      this.set("loading", true);
-      this.set("showResults", true);
+      const query = this.selectedItem;
+      this.setProperties({ loading: true, showResults: true });
       query
         .save()
-        .then(function() {
-          query.set("destroyed", false);
-        })
+        .then(() => query.set("destroyed", false))
         .catch(popupAjaxError)
-        .finally(function() {
-          self.set("loading", false);
+        .finally(() => {
+          this.set("loading", false);
         });
     },
 
     run() {
-      const self = this;
       if (this.get("selectedItem.dirty")) {
         return;
       }
-      if (this.get("runDisabled")) {
+      if (this.runDisabled) {
         return;
       }
 
-      this.set("loading", true);
-      this.set("showResults", false);
+      this.setProperties({ loading: true, showResults: false });
       ajax(
         "/admin/plugins/explorer/queries/" +
           this.get("selectedItem.id") +
@@ -241,30 +229,28 @@ export default Ember.Controller.extend({
           type: "POST",
           data: {
             params: JSON.stringify(this.get("selectedItem.params")),
-            explain: this.get("explain")
+            explain: this.explain
           }
         }
       )
-        .then(function(result) {
-          self.set("results", result);
+        .then(result => {
+          this.set("results", result);
           if (!result.success) {
-            self.set("showResults", false);
+            this.set("showResults", false);
             return;
           }
 
-          self.set("showResults", true);
+          this.set("showResults", true);
         })
-        .catch(function(err) {
-          self.set("showResults", false);
+        .catch(err => {
+          this.set("showResults", false);
           if (err.jqXHR && err.jqXHR.status === 422 && err.jqXHR.responseJSON) {
-            self.set("results", err.jqXHR.responseJSON);
+            this.set("results", err.jqXHR.responseJSON);
           } else {
             popupAjaxError(err);
           }
         })
-        .finally(function() {
-          self.set("loading", false);
-        });
+        .finally(() => this.set("loading", false));
     }
   }
 });

assets/javascripts/discourse/controllers/import-query.js.es6

@@ -1,3 +1,4 @@
+import { default as computed } from "ember-addons/ember-computed-decorators";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
@@ -6,21 +7,21 @@ export default Ember.Controller.extend(ModalFunctionality, {
 
   adminPluginsExplorer: Ember.inject.controller(),
 
-  ready: function() {
+  @computed("queryFile")
+  ready(queryFile) {
     let parsed;
     try {
-      parsed = JSON.parse(this.get("queryFile"));
+      parsed = JSON.parse(queryFile);
     } catch (e) {
       return false;
     }
 
     return !!parsed["query"];
-  }.property("queryFile"),
+  },
 
   actions: {
-    doImport: function() {
-      const self = this;
-      const object = JSON.parse(this.get("queryFile")).query;
+    doImport() {
+      const object = JSON.parse(this.queryFile).query;
 
       // Slight fixup before creating object
       object.id = 0; // 0 means no Id yet
@@ -29,11 +30,11 @@ export default Ember.Controller.extend(ModalFunctionality, {
       this.store
         .createRecord("query", object)
         .save()
-        .then(function(query) {
-          self.send("closeModal");
-          self.set("loading", false);
+        .then(query => {
+          this.send("closeModal");
+          this.set("loading", false);
 
-          const parentController = self.get("adminPluginsExplorer");
+          const parentController = this.adminPluginsExplorer;
           parentController.addCreatedRecord(query.target);
         })
         .catch(popupAjaxError);

assets/javascripts/discourse/initializers/initialize-data-explorer.js.es6

@@ -6,12 +6,12 @@ export default {
     if (!String.prototype.endsWith) {
       // eslint-disable-next-line no-extend-native
       String.prototype.endsWith = function(searchString, position) {
-        var subjectString = this.toString();
+        const subjectString = this.toString();
         if (position === undefined || position > subjectString.length) {
           position = subjectString.length;
         }
         position -= searchString.length;
-        var lastIndex = subjectString.indexOf(searchString, position);
+        const lastIndex = subjectString.indexOf(searchString, position);
         return lastIndex !== -1 && lastIndex === position;
       };
     }

assets/javascripts/discourse/lib/binary-search.js.es6

@@ -4,10 +4,10 @@
 // Modified for use in Discourse
 
 export default function binarySearch(list, target, keyProp) {
-  var min = 0;
-  var max = list.length - 1;
-  var guess;
-  var keyProperty = keyProp || "id";
+  let min = 0;
+  let max = list.length - 1;
+  let guess;
+  const keyProperty = keyProp || "id";
 
   while (min <= max) {
     guess = Math.floor((min + max) / 2);

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

@@ -1,3 +1,8 @@
+import {
+  default as computed,
+  on,
+  observes
+} from "ember-addons/ember-computed-decorators";
 import RestModel from "discourse/models/rest";
 
 const Query = RestModel.extend({
@@ -5,34 +10,35 @@ const Query = RestModel.extend({
   params: {},
   results: null,
 
-  _init: function() {
-    this._super();
+  @on("init")
+  _init() {
+    this._super(...arguments);
+
     this.set("dirty", false);
-  }.on("init"),
+  },
 
-  _initParams: function() {
+  @on("init")
+  @observes("param_info")
+  _initParams() {
     this.resetParams();
-  }
-    .on("init")
-    .observes("param_info"),
+  },
 
-  markDirty: function() {
+  @observes("name", "description", "sql")
+  markDirty() {
     this.set("dirty", true);
-  }.observes("name", "description", "sql"),
+  },
 
   markNotDirty() {
     this.set("dirty", false);
   },
 
-  hasParams: function() {
-    return this.get("param_info.length") > 0;
-  }.property("param_info"),
+  hasParams: Ember.computed.reads("param_info.length"),
 
   resetParams() {
     const newParams = {};
-    const oldParams = this.get("params");
-    const paramInfo = this.get("param_info") || [];
-    paramInfo.forEach(function(pinfo) {
+    const oldParams = this.params;
+    const paramInfo = this.param_info || [];
+    paramInfo.forEach(pinfo => {
       const name = pinfo.identifier;
       if (oldParams[pinfo.identifier]) {
         newParams[name] = oldParams[name];
@@ -47,15 +53,16 @@ const Query = RestModel.extend({
     this.set("params", newParams);
   },
 
-  downloadUrl: function() {
+  @computed("id")
+  downloadUrl(id) {
     // TODO - can we change this to use the store/adapter?
     return Discourse.getURL(
-      "/admin/plugins/explorer/queries/" + this.get("id") + ".json?export=1"
+      `/admin/plugins/explorer/queries/${id}.json?export=1`
     );
-  }.property("id"),
+  },
 
   createProperties() {
-    if (this.get("sql")) {
+    if (this.sql) {
       // Importing
       return this.updateProperties();
     }
@@ -63,9 +70,9 @@ const Query = RestModel.extend({
   },
 
   updateProperties() {
-    let props = this.getProperties(Query.updatePropertyNames);
-    if (this.get("destroyed")) {
-      props.id = this.get("id");
+    const props = this.getProperties(Query.updatePropertyNames);
+    if (this.destroyed) {
+      props.id = this.id;
     }
     return props;
   }

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

@@ -20,12 +20,12 @@ export default Discourse.Route.extend({
       });
   },
 
-  setupController: function(controller, model) {
+  setupController(controller, model) {
     controller.setProperties(model);
   },
 
   actions: {
-    refreshModel: function() {
+    refreshModel() {
       this.refresh();
       return false;
     }

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

@@ -43,7 +43,7 @@
                 {{d-button action=(action "goHome") icon="chevron-left" class="previous"}}
                 <h1>{{selectedItem.name}}
                   {{#unless editDisabled}}
-                    <a {{action "editName" class="edit-query-name"}}>{{d-icon "pencil"}}</a>
+                    <a {{action "editName" class="edit-query-name"}}>{{d-icon "pencil-alt"}}</a>
                   {{/unless}}
                 </h1>
               </div>
@@ -86,7 +86,7 @@
                 {{d-button action=(action "save") label="explorer.save" disabled=saveDisable}}
               {{else}}
                 {{#unless editDisabled}}
-                  {{d-button action=(action "editName") label="explorer.edit" icon="pencil"}}
+                  {{d-button action=(action "editName") label="explorer.edit" icon="pencil-alt"}}
                 {{/unless}}
               {{/if}}
               {{d-button action=(action "download") label="explorer.export" disabled=runDisabled icon="download"}}
@@ -99,7 +99,7 @@
                   {{d-button action=(action "discard") icon="undo" label="explorer.undo" disabled=saveDisabled}}
                 {{/if}}
                 {{#unless editDisabled}}
-                  {{d-button action=(action "destroy") class="btn-danger" icon="trash" label="explorer.delete"}}
+                  {{d-button action=(action "destroy") class="btn-danger" icon="trash-alt" label="explorer.delete"}}
                 {{/unless}}
               {{/if}}
             </div>
@@ -112,10 +112,6 @@
             <div class="query-params">
               {{#each selectedItem.param_info as |pinfo|}}
                 {{param-input params=selectedItem.params info=pinfo}}
-              {{! <div class="param">
-                {{param-field params=selectedItem.params pname=pinfo.identifier type=pinfo.type}
-                <span class="param-name">{{pinfo.identifier}</span>
-              </div> }}
               {{/each}}
             </div>
           {{/if}}