DEV: Upgrade admin-plugins-explorer to Octane (#209)

- Drop `explorer-container` and move its logic to `admin-plugin-explorer` container
- Convert resizing of the query edit pane from jquery -> draggable modifier

assets/javascripts/discourse/components/code-view.hbs

@@ -0,0 +1 @@
+<pre><code class={{@codeClass}}>{{@value}}</code></pre>

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

@@ -1,96 +0,0 @@
-import Component from "@ember/component";
-import { observes } from "discourse-common/utils/decorators";
-import { schedule, throttle } from "@ember/runloop";
-
-export default Component.extend({
-  @observes("hideSchema")
-  _onHideSchema() {
-    this.appEvents.trigger("ace:resize");
-  },
-
-  @observes("everEditing")
-  _onInsertEditor() {
-    schedule("afterRender", this, () => this._bindControls());
-  },
-
-  _bindControls() {
-    if (this._state !== "inDOM") {
-      return;
-    }
-    const $editPane = $(".query-editor");
-    if (!$editPane.length) {
-      return;
-    }
-
-    const oldGrippie = this.grippie;
-    if (oldGrippie) {
-      oldGrippie.off("mousedown mousemove mouseup");
-    }
-
-    const $grippie = $editPane.find(".grippie");
-    const $target = $editPane.find(".panels-flex");
-    const $document = $(document);
-
-    const minWidth = $target.width();
-    const minHeight = $target.height();
-
-    this.set("grippie", $grippie);
-
-    const mousemove = (e) => {
-      const diffY = this.startY - e.screenY;
-      const diffX = this.startX - e.screenX;
-
-      const newHeight = Math.max(minHeight, this.startHeight - diffY);
-      const newWidth = Math.max(minWidth, this.startWidth - diffX);
-
-      $target.height(newHeight);
-      $target.width(newWidth);
-      $grippie.width(newWidth);
-      this.appEvents.trigger("ace:resize");
-    };
-
-    const throttledMousemove = ((event) => {
-      event.preventDefault();
-      throttle(this, mousemove, event, 20);
-    }).bind(this);
-
-    const mouseup = (() => {
-      $document.off("mousemove", throttledMousemove);
-      $document.off("mouseup", mouseup);
-      this.setProperties({
-        startY: null,
-        startX: null,
-        startHeight: null,
-        startWidth: null,
-      });
-    }).bind(this);
-
-    $grippie.on("mousedown", (e) => {
-      this.setProperties({
-        startY: e.screenY,
-        startX: e.screenX,
-        startHeight: $target.height(),
-        startWidth: $target.width(),
-      });
-
-      $document.on("mousemove", throttledMousemove);
-      $document.on("mouseup", mouseup);
-      e.preventDefault();
-    });
-  },
-
-  didInsertElement() {
-    this._super(...arguments);
-
-    this._bindControls();
-  },
-
-  willDestroyElement() {
-    this._super(...arguments);
-
-    if (this.everEditing) {
-      this.grippie && this.grippie.off("mousedown");
-      this.set("grippie", null);
-    }
-  },
-});

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

@@ -3,140 +3,126 @@ 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 discourseComputed, {
+import { bind } from "discourse-common/utils/decorators";
-  bind,
-  observes,
-} from "discourse-common/utils/decorators";
 import I18n from "I18n";
 import { Promise } from "rsvp";
 import { inject as service } from "@ember/service";
-import { get } from "@ember/object";
+import { action } from "@ember/object";
-import { not, reads, sort } from "@ember/object/computed";
+import { tracked } from "@glimmer/tracking";
 
 const NoQuery = Query.create({ name: "No queries", fake: true, group_ids: [] });
 
-export default Controller.extend({
+export default class PluginsExplorerController extends Controller {
-  dialog: service(),
+  @service dialog;
-  queryParams: { selectedQueryId: "id", params: "params" },
+  @service appEvents;
-  selectedQueryId: null,
-  editDisabled: false,
-  showResults: false,
-  hideSchema: false,
-  loading: false,
-  explain: false,
 
-  saveDisabled: not("selectedItem.dirty"),
+  @tracked sortByProperty = "last_run_at";
-  runDisabled: reads("selectedItem.dirty"),
+  @tracked sortDescending = true;
-  results: reads("selectedItem.results"),
+  @tracked params;
+  @tracked search;
+  @tracked newQueryName;
+  @tracked showCreate;
+  @tracked editingName = false;
+  @tracked editingQuery = false;
+  @tracked selectedQueryId;
+  @tracked loading = false;
+  @tracked showResults = false;
+  @tracked hideSchema = false;
+  @tracked results = this.selectedItem.results;
+  @tracked dirty = false;
 
-  asc: null,
+  queryParams = ["params", { selectedQueryId: "id" }];
-  order: null,
+  explain = false;
-  editing: false,
+  acceptedImportFileTypes = ["application/json"];
-  everEditing: false,
+  order = null;
-  showRecentQueries: true,
-  sortBy: ["last_run_at:desc"],
-  sortedQueries: sort("model", "sortBy"),
 
-  @discourseComputed("params")
+  get validQueryPresent() {
-  parsedParams(params) {
+    return !!this.selectedItem.id;
-    return params ? JSON.parse(params) : null;
+  }
-  },
 
-  @discourseComputed
+  get saveDisabled() {
-  acceptedImportFileTypes() {
+    return !this.dirty;
-    return ["application/json"];
+  }
-  },
 
-  @discourseComputed("search", "sortBy")
+  get runDisabled() {
-  filteredContent(search) {
+    return this.dirty;
-    const regexp = new RegExp(search, "i");
+  }
+
+  get sortedQueries() {
+    const sortedQueries = this.model.sortBy(this.sortByProperty);
+    return this.sortDescending ? sortedQueries.reverse() : sortedQueries;
+  }
+
+  get parsedParams() {
+    return this.params ? JSON.parse(this.params) : null;
+  }
+
+  get filteredContent() {
+    const regexp = new RegExp(this.search, "i");
     return this.sortedQueries.filter(
       (result) => regexp.test(result.name) || regexp.test(result.description)
     );
-  },
-
-  @discourseComputed("newQueryName")
-  createDisabled(newQueryName) {
-    return (newQueryName || "").trim().length === 0;
-  },
-
-  @discourseComputed("selectedQueryId")
-  selectedItem(selectedQueryId) {
-    const id = parseInt(selectedQueryId, 10);
-    const item = this.model.findBy("id", id);
-
-    !isNaN(id)
-      ? this.set("showRecentQueries", false)
-      : this.set("showRecentQueries", true);
-
-    if (id < 0) {
-      this.set("editDisabled", true);
   }
 
-    return item || NoQuery;
+  get createDisabled() {
-  },
+    return (this.newQueryName || "").trim().length === 0;
+  }
 
-  @discourseComputed("selectedItem", "editing")
+  get selectedItem() {
-  selectedGroupNames() {
+    const query = this.model.findBy("id", parseInt(this.selectedQueryId, 10));
-    const groupIds = this.selectedItem.group_ids || [];
+    return query || NoQuery;
-    const groupNames = groupIds.map((id) => {
+  }
-      return this.groupOptions.find((groupOption) => groupOption.id === id)
-        .name;
-    });
-    return groupNames.join(", ");
-  },
 
-  @discourseComputed("groups")
+  get editDisabled() {
-  groupOptions(groups) {
+    return parseInt(this.selectedQueryId, 10) < 0 ? true : false;
-    return groups
+  }
+
+  get groupOptions() {
+    return this.groups
       .filter((g) => g.id !== 0)
       .map((g) => {
         return { id: g.id, name: g.name };
       });
-  },
-
-  @discourseComputed("selectedItem", "selectedItem.dirty")
-  othersDirty(selectedItem) {
-    return !!this.model.find((q) => q !== selectedItem && q.dirty);
-  },
-
-  @observes("editing")
-  setEverEditing() {
-    if (this.editing && !this.everEditing) {
-      this.set("everEditing", true);
   }
-  },
+
+  get othersDirty() {
+    return !!this.model.find((q) => q !== this.selectedItem && this.dirty);
+  }
 
   addCreatedRecord(record) {
     this.model.pushObject(record);
-    this.set("selectedQueryId", get(record, "id"));
+    this.selectedQueryId = record.id;
-    this.selectedItem.set("dirty", false);
+    this.dirty = false;
     this.setProperties({
       showResults: false,
       results: null,
-      editing: true,
+      editingName: true,
+      editingQuery: true,
     });
-  },
-
-  save() {
-    this.set("loading", true);
-    if (this.get("selectedItem.description") === "") {
-      this.set("selectedItem.description", "");
   }
 
+  @action
+  save() {
+    this.loading = true;
+
     return this.selectedItem
       .save()
       .then(() => {
-        const query = this.selectedItem;
+        this.dirty = false;
-        query.markNotDirty();
+        this.editingName = false;
-        this.set("editing", false);
+        this.editingQuery = false;
       })
       .catch((x) => {
         popupAjaxError(x);
         throw x;
       })
-      .finally(() => this.set("loading", false));
+      .finally(() => (this.loading = false));
-  },
+  }
+
+  @action
+  saveAndRun() {
+    this.save().then(() => this.run());
+  }
 
   async _importQuery(file) {
     const json = await this._readFileAsTextAsync(file);
@@ -144,7 +130,7 @@ export default Controller.extend({
     const record = this.store.createRecord("query", query);
     const response = await record.save();
     return response.target;
-  },
+  }
 
   _parseQuery(json) {
     const parsed = JSON.parse(json);
@@ -154,7 +140,7 @@ export default Controller.extend({
     }
     query.id = 0; // 0 means no Id yet
     return query;
-  },
+  }
 
   _readFileAsTextAsync(file) {
     return new Promise((resolve, reject) => {
@@ -166,21 +152,67 @@ export default Controller.extend({
 
       reader.readAsText(file);
     });
-  },
+  }
+
+  @bind
+  dragMove(e) {
+    if (!e.movementY && !e.movementX) {
+      return;
+    }
+
+    const editPane = document.querySelector(".query-editor");
+    const target = editPane.querySelector(".panels-flex");
+    const grippie = editPane.querySelector(".grippie");
+
+    // we need to get the initial height / width of edit pane
+    // before we manipulate the size
+    if (!this.initialPaneWidth && !this.originalPaneHeight) {
+      this.originalPaneWidth = target.clientWidth;
+      this.originalPaneHeight = target.clientHeight;
+    }
+
+    const newHeight = Math.max(
+      this.originalPaneHeight,
+      target.clientHeight + e.movementY
+    );
+    const newWidth = Math.max(
+      this.originalPaneWidth,
+      target.clientWidth + e.movementX
+    );
+
+    target.style.height = newHeight + "px";
+    target.style.width = newWidth + "px";
+    grippie.style.width = newWidth + "px";
+    this.appEvents.trigger("ace:resize");
+  }
+
+  @bind
+  didStartDrag() {}
+
+  @bind
+  didEndDrag() {}
 
   @bind
   scrollTop() {
     window.scrollTo(0, 0);
-    this.setProperties({ editing: false, everEditing: false });
+    this.editingName = false;
-  },
+    this.editingQuery = false;
+  }
 
-  actions: {
+  @action
+  updateGroupIds(value) {
+    this.dirty = true;
+    this.selectedItem.set("group_ids", value);
+  }
+
+  @action
   updateHideSchema(value) {
-      this.set("hideSchema", value);
+    this.hideSchema = value;
-    },
+  }
 
+  @action
   import(files) {
-      this.set("loading", true);
+    this.loading = true;
     const file = files[0];
     this._importQuery(file)
       .then((record) => this.addCreatedRecord(record))
@@ -198,129 +230,160 @@ export default Controller.extend({
         }
       })
       .finally(() => {
-          this.set("loading", false);
+        this.loading = false;
+        this.dirty = true;
       });
-    },
+  }
 
-    showCreate() {
+  @action
-      this.set("showCreate", true);
+  displayCreate() {
-    },
+    this.showCreate = true;
+  }
 
+  @action
   editName() {
-      this.set("editing", true);
+    this.editingName = true;
-    },
+  }
 
+  @action
+  editQuery() {
+    this.editingQuery = true;
+  }
+
+  @action
   download() {
-      window.open(this.get("selectedItem.downloadUrl"), "_blank");
+    window.open(this.selectedItem.downloadUrl, "_blank");
-    },
+  }
 
+  @action
   goHome() {
     this.setProperties({
-        asc: null,
       order: null,
       showResults: false,
-        editDisabled: false,
-        showRecentQueries: true,
       selectedQueryId: null,
       params: null,
-        sortBy: ["last_run_at:desc"],
+      sortByProperty: "last_run_at",
+      sortDescending: true,
     });
     this.transitionToRoute({ queryParams: { id: null, params: null } });
-    },
+  }
 
+  @action
   showHelpModal() {
     showModal("query-help");
-    },
+  }
 
+  @action
   resetParams() {
     this.selectedItem.resetParams();
-    },
+  }
 
+  @action
   saveDefaults() {
     this.selectedItem.saveDefaults();
-    },
-
-    save() {
-      this.save();
-    },
-
-    saverun() {
-      this.save().then(() => this.send("run"));
-    },
-
-    sortByProperty(property) {
-      if (this.sortBy[0] === `${property}:desc`) {
-        this.set("sortBy", [`${property}:asc`]);
-      } else {
-        this.set("sortBy", [`${property}:desc`]);
   }
-    },
 
+  @action
+  updateSortProperty(property) {
+    if (this.sortByProperty === property) {
+      this.sortDescending = !this.sortDescending;
+    } else {
+      this.sortByProperty = property;
+      this.sortDescending = true;
+    }
+  }
+
+  @action
   create() {
     const name = this.newQueryName.trim();
     this.setProperties({
       loading: true,
       showCreate: false,
-        showRecentQueries: false,
     });
     this.store
       .createRecord("query", { name })
       .save()
       .then((result) => this.addCreatedRecord(result.target))
       .catch(popupAjaxError)
-        .finally(() => this.set("loading", false));
+      .finally(() => {
-    },
+        this.loading = false;
-
+        this.dirty = true;
-    discard() {
+      });
-      this.set("loading", true);
-      this.store
-        .find("query", this.get("selectedItem.id"))
-        .then((result) => {
-          const query = this.get("selectedItem");
-          query.setProperties(result.getProperties(Query.updatePropertyNames));
-          if (!query.group_ids || !Array.isArray(query.group_ids)) {
-            query.set("group_ids", []);
   }
-          query.markNotDirty();
+
-          this.set("editing", false);
+  @action
+  discard() {
+    this.loading = true;
+    this.store
+      .find("query", this.selectedItem.id)
+      .then((result) => {
+        this.selectedItem.setProperties(
+          result.getProperties(Query.updatePropertyNames)
+        );
+        if (
+          !this.selectedItem.group_ids ||
+          !Array.isArray(this.selectedItem.group_ids)
+        ) {
+          this.selectedItem.set("group_ids", []);
+        }
+        this.dirty = false;
+        this.editingName = false;
+        this.editingQuery = false;
       })
       .catch(popupAjaxError)
-        .finally(() => this.set("loading", false));
+      .finally(() => (this.loading = false));
-    },
+  }
 
-    destroy() {
+  @action
-      const query = this.selectedItem;
+  destroyQuery() {
-      this.setProperties({ loading: true, showResults: false });
+    this.loading = true;
+    this.showResults = false;
     this.store
-        .destroyRecord("query", query)
+      .destroyRecord("query", this.selectedItem)
-        .then(() => query.set("destroyed", true))
+      .then(() => this.selectedItem.set("destroyed", true))
       .catch(popupAjaxError)
-        .finally(() => this.set("loading", false));
+      .finally(() => (this.loading = false));
-    },
+  }
 
+  @action
   recover() {
-      const query = this.selectedItem;
+    this.loading = true;
-      this.setProperties({ loading: true, showResults: true });
+    this.showResults = true;
-      query
+    this.selectedItem
       .save()
-        .then(() => query.set("destroyed", false))
+      .then(() => this.selectedItem.set("destroyed", false))
       .catch(popupAjaxError)
-        .finally(() => {
+      .finally(() => (this.loading = false));
-          this.set("loading", false);
+  }
-        });
-    },
 
-    // This is necessary with glimmer's one way data stream to get the child's
+  @action
-    // changes of 'params' to bubble up.
   updateParams(identifier, value) {
     this.selectedItem.set(`params.${identifier}`, value);
-    },
-
-    run() {
-      if (this.get("selectedItem.dirty")) {
-        return;
   }
-      if (this.runDisabled) {
+
+  @action
+  updateSearch(value) {
+    this.search = value;
+  }
+
+  @action
+  updateNewQueryName(value) {
+    this.newQueryName = value;
+  }
+
+  @action
+  setDirty() {
+    this.dirty = true;
+  }
+
+  @action
+  exitEdit() {
+    this.editingName = false;
+  }
+
+  @action
+  run() {
+    if (this.dirty || this.runDisabled) {
       return;
     }
 
@@ -330,36 +393,29 @@ export default Controller.extend({
       params: JSON.stringify(this.selectedItem.params),
     });
 
-      ajax(
+    ajax("/admin/plugins/explorer/queries/" + this.selectedItem.id + "/run", {
-        "/admin/plugins/explorer/queries/" +
-          this.get("selectedItem.id") +
-          "/run",
-        {
       type: "POST",
       data: {
-            params: JSON.stringify(this.get("selectedItem.params")),
+        params: JSON.stringify(this.selectedItem.params),
         explain: this.explain,
       },
-        }
+    })
-      )
       .then((result) => {
-          this.set("results", result);
+        this.results = result;
         if (!result.success) {
-            this.set("showResults", false);
+          this.showResults = false;
           return;
         }
-
+        this.showResults = true;
-          this.set("showResults", true);
       })
       .catch((err) => {
-          this.set("showResults", false);
+        this.showResults = false;
         if (err.jqXHR && err.jqXHR.status === 422 && err.jqXHR.responseJSON) {
-            this.set("results", err.jqXHR.responseJSON);
+          this.results = err.jqXHR.responseJSON;
         } else {
           popupAjaxError(err);
         }
       })
-        .finally(() => this.set("loading", false));
+      .finally(() => (this.loading = false));
-    },
+  }
-  },
+}
-});

assets/javascripts/discourse/models/query.js

@@ -7,16 +7,9 @@ import RestModel from "discourse/models/rest";
 import { reads } from "@ember/object/computed";
 
 const Query = RestModel.extend({
-  dirty: false,
   params: {},
   results: null,
-
+  hasParams: reads("param_info.length"),
-  @on("init")
-  _init() {
-    this._super(...arguments);
-
-    this.set("dirty", false);
-  },
 
   @on("init")
   @observes("param_info")
@@ -24,17 +17,6 @@ const Query = RestModel.extend({
     this.resetParams();
   },
 
-  @observes("name", "description", "sql", "group_ids")
-  markDirty() {
-    this.set("dirty", true);
-  },
-
-  markNotDirty() {
-    this.set("dirty", false);
-  },
-
-  hasParams: reads("param_info.length"),
-
   resetParams() {
     const newParams = {};
     const oldParams = this.params;

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

@@ -25,7 +25,6 @@ export default DiscourseRoute.extend({
       return schemaPromise.then((schema) => {
         return queryPromise.then((model) => {
           model.forEach((query) => {
-            query.markNotDirty();
             query.set(
               "group_names",
               (query.group_ids || []).map((id) => groupNames[id])

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

@@ -1,41 +1,45 @@
-{{#explorer-container hideSchema=hideSchema everEditing=everEditing}}
+{{#if this.disallow}}
-  {{#if disallow}}
   <h1>{{i18n "explorer.admins_only"}}</h1>
 {{else}}
-    {{#unless selectedQueryId}}
+  {{#unless this.validQueryPresent}}
     <div class="query-list">
-        {{text-field value=search placeholderKey="explorer.search_placeholder"}}
+      <TextField
-        {{d-button
+        @value={{this.search}}
-          action=(action "showCreate")
+        @placeholderKey="explorer.search_placeholder"
-          icon="plus"
+        @onChange={{this.updateSearch}}
-          class="no-text btn-right"
+      />
-        }}
+      <DButton
-        {{pick-files-button
+        @action={{this.displayCreate}}
-          class="import-btn"
+        @icon="plus"
-          label="explorer.import.label"
+        @class="no-text btn-right"
-          icon="upload"
+      />
-          acceptedFormatsOverride=acceptedImportFileTypes
+      <PickFilesButton
-          showButton=true
+        @class="import-btn"
-          onFilesPicked=(action "import")
+        @label="explorer.import.label"
-        }}
+        @icon="upload"
+        @acceptedFormatsOverride={{this.acceptedImportFileTypes}}
+        @showButton="true"
+        @onFilesPicked={{this.import}}
+      />
     </div>
 
-      {{#if showCreate}}
+    {{#if this.showCreate}}
       <div class="query-create">
-          {{text-field
+        <TextField
-            value=newQueryName
+          @value={{this.newQueryName}}
-            placeholderKey="explorer.create_placeholder"
+          @placeholderKey="explorer.create_placeholder"
-          }}
+          @onChange={{this.updateNewQueryName}}
-          {{d-button
+        />
-            action=(action "create")
+        <DButton
-            disabled=createDisabled
+          @action={{this.create}}
-            label="explorer.create"
+          @disabled={{this.createDisabled}}
-            icon="plus"
+          @label="explorer.create"
-          }}
+          @icon="plus"
+        />
       </div>
     {{/if}}
 
-      {{#if othersDirty}}
+    {{#if this.othersDirty}}
       <div class="warning">
         {{d-icon "exclamation-triangle"}}
         {{i18n "explorer.others_dirty"}}
@@ -43,40 +47,49 @@
     {{/if}}
   {{/unless}}
 
-    {{#if model.length}}
+  {{#if this.model.length}}
-      {{#unless selectedItem.fake}}
+    {{#unless this.selectedItem.fake}}
-        <div class="query-edit {{if editName 'editing'}}">
+      <div class="query-edit {{if this.editName 'editing'}}">
-          {{#if selectedItem}}
+        {{#if this.selectedItem}}
-            {{#if editing}}
+          {{#if this.editingName}}
             <div class="name">
-                {{d-button
+              <DButton
-                  action=(action "goHome")
+                @action={{this.goHome}}
-                  icon="chevron-left"
+                @icon="chevron-left"
-                  class="previous"
+                @class="previous"
-                }}
+              />
+              <DButton
+                @action={{this.exitEdit}}
+                @icon="times"
+                @class="previous"
+              />
               <div class="name-text-field">
-                  {{text-field value=selectedItem.name}}
+                <TextField
+                  @value={{this.selectedItem.name}}
+                  @onChange={{this.setDirty}}
+                />
               </div>
             </div>
 
             <div class="desc">
-                {{textarea
+              <DTextarea
-                  value=selectedItem.description
+                @value={{this.selectedItem.description}}
-                  placeholder=(i18n "explorer.description_placeholder")
+                @placeholder={{(i18n "explorer.description_placeholder")}}
-                }}
+                @input={{this.setDirty}}
+              />
             </div>
           {{else}}
             <div class="name">
-                {{d-button
+              <DButton
-                  action=(action "goHome")
+                @action={{this.goHome}}
-                  icon="chevron-left"
+                @icon="chevron-left"
-                  class="previous"
+                @class="previous"
-                }}
+              />
 
               <h1>
-                  {{selectedItem.name}}
+                {{this.selectedItem.name}}
-                  {{#unless editDisabled}}
+                {{#unless this.editDisabled}}
-                    <a href {{action "editName" class="edit-query-name"}}>
+                  <a href {{action "editName"}} class="edit-query-name">
                     {{d-icon "pencil-alt"}}
                   </a>
                 {{/unless}}
@@ -84,21 +97,21 @@
             </div>
 
             <div class="desc">
-                {{selectedItem.description}}
+              {{this.selectedItem.description}}
             </div>
           {{/if}}
 
-            {{#unless selectedItem.destroyed}}
+          {{#unless this.selectedItem.destroyed}}
             <div class="pull-left">
               <div class="groups">
                 <span class="label">{{i18n "explorer.allow_groups"}}</span>
                 <span>
-                    {{multi-select
+                  <MultiSelect
-                      value=selectedItem.group_ids
+                    @value={{this.selectedItem.group_ids}}
-                      content=groupOptions
+                    @content={{this.groupOptions}}
-                      allowAny=false
+                    @options={{hash allowAny=false}}
-                      onSelect=(action (mut selectedItem.group_ids))
+                    @onChange={{this.updateGroupIds}}
-                    }}
+                  />
                 </span>
               </div>
             </div>
@@ -106,28 +119,35 @@
 
           <div class="clear"></div>
 
-            {{! the SQL editor will show the first time you }}
+          {{#if this.editingQuery}}
-            {{#if everEditing}}
+            <div class="query-editor {{if this.hideSchema 'no-schema'}}">
-              <div class="query-editor {{if hideSchema 'no-schema'}}">
               <div class="panels-flex">
                 <div class="editor-panel">
-                    {{ace-editor
+                  <AceEditor
-                      content=selectedItem.sql
+                    @content={{this.selectedItem.sql}}
-                      mode="sql"
+                    @mode="sql"
-                      disabled=selectedItem.destroyed
+                    @disabled={{this.selectedItem.destroyed}}
-                    }}
+                    {{on "click" this.setDirty}}
+                  />
                 </div>
 
                 <div class="right-panel">
                   <ExplorerSchema
-                      @schema={{schema}}
+                    @schema={{this.schema}}
-                      @hideSchema={{hideSchema}}
+                    @hideSchema={{this.hideSchema}}
-                      @updateHideSchema={{action "updateHideSchema"}}
+                    @updateHideSchema={{this.updateHideSchema}}
                   />
                 </div>
               </div>
 
-                <div class="grippie">
+              <div
+                class="grippie"
+                {{draggable
+                  didStartDrag=this.didStartDrag
+                  didEndDrag=this.didEndDrag
+                  dragMove=this.dragMove
+                }}
+              >
                 {{d-icon "discourse-expand"}}
               </div>
 
@@ -135,69 +155,72 @@
             </div>
           {{else}}
             <div class="sql">
-                {{hljs-code-view value=selectedItem.sql codeClass="sql"}}
+              <CodeView
+                @value={{selectedItem.sql}}
+                @codeClass="sql"
+                @setDirty={{this.setDirty}}
+              />
             </div>
           {{/if}}
 
           <div class="clear"></div>
 
           <div class="pull-left left-buttons">
-              {{#if everEditing}}
+            {{#if this.editingQuery}}
-                {{d-button
+              <DButton
-                  action=(action "save")
+                @action={{this.save}}
-                  label="explorer.save"
+                @label="explorer.save"
-                  disabled=saveDisable
+                @disabled={{this.saveDisabled}}
-                }}
+              />
             {{else}}
-                {{#unless editDisabled}}
+              {{#unless this.editDisabled}}
-                  {{d-button
+                <DButton
-                    action=(action "editName")
+                  @action={{this.editQuery}}
-                    label="explorer.edit"
+                  @label="explorer.edit"
-                    icon="pencil-alt"
+                  @icon="pencil-alt"
-                  }}
+                />
               {{/unless}}
             {{/if}}
 
-              {{d-button
+            <DButton
-                action=(action "download")
+              @action={{this.download}}
-                label="explorer.export"
+              @label="explorer.export"
-                disabled=runDisabled
+              @disabled={{this.runDisabled}}
-                icon="download"
+              @icon="download"
-              }}
+            />
 
-              {{#if everEditing}}
+            {{#if this.editingQuery}}
-                {{d-button
+              <DButton
-                  action=(action "showHelpModal")
+                @action={{this.showHelpModal}}
-                  label="explorer.help.label"
+                @label="explorer.help.label"
-                  icon="question-circle"
+                @icon="question-circle"
-                }}
+              />
             {{/if}}
           </div>
 
           <div class="pull-right right-buttons">
-              {{#if selectedItem.destroyed}}
+            {{#if this.selectedItem.destroyed}}
-                {{d-button
+              <DButton
-                  action=(action "recover")
+                @action={{this.recover}}
-                  class=""
+                @icon="undo"
-                  icon="undo"
+                @label="explorer.recover"
-                  label="explorer.recover"
+              />
-                }}
             {{else}}
-                {{#if everEditing}}
+              {{#if this.editingQuery}}
-                  {{d-button
+                <DButton
-                    action=(action "discard")
+                  @action={{this.discard}}
-                    icon="undo"
+                  @icon="undo"
-                    label="explorer.undo"
+                  @label="explorer.undo"
-                    disabled=saveDisabled
+                  @disabled={{this.saveDisabled}}
-                  }}
+                />
               {{/if}}
 
-                {{d-button
+              <DButton
-                  action=(action "destroy")
+                @action={{this.destroyQuery}}
-                  class="btn-danger"
+                @class="btn-danger"
-                  icon="trash-alt"
+                @icon="trash-alt"
-                  label="explorer.delete"
+                @label="explorer.delete"
-                }}
+              />
             {{/if}}
           </div>
 
@@ -205,53 +228,52 @@
         {{/if}}
       </div>
 
-        <form class="query-run" {{action "run" on="submit"}}>
+      <form class="query-run" {{on "submit" this.run}}>
         <ParamInputsWrapper
-            @hasParams={{selectedItem.hasParams}}
+          @hasParams={{this.selectedItem.hasParams}}
-            @params={{selectedItem.params}}
+          @params={{this.selectedItem.params}}
-            @initialValues={{parsedParams}}
+          @initialValues={{this.parsedParams}}
-            @paramInfo={{selectedItem.param_info}}
+          @paramInfo={{this.selectedItem.param_info}}
-            @updateParams={{action "updateParams"}}
+          @updateParams={{this.updateParams}}
         />
 
-          {{#if runDisabled}}
+        {{#if this.runDisabled}}
-            {{#if saveDisabled}}
+          {{#if this.saveDisabled}}
-              {{d-button
+            <DButton
-                label="explorer.run"
+              @label="explorer.run"
-                disabled="true"
+              @disabled="true"
-                class="btn-primary"
+              @class="btn-primary"
-              }}
+            />
           {{else}}
-              {{d-button
+            <DButton
-                action=(action "saverun")
+              @action={{this.saveAndRun}}
-                icon="play"
+              @icon="play"
-                label="explorer.saverun"
+              @label="explorer.saverun"
-                class="btn-primary"
+              @class="btn-primary"
-              }}
+            />
           {{/if}}
         {{else}}
-            {{d-button
+          <DButton
-              action=(action "run")
+            @action={{this.run}}
-              icon="play"
+            @icon="play"
-              label="explorer.run"
+            @label="explorer.run"
-              disabled=runDisabled
+            @disabled={{this.runDisabled}}
-              class="btn-primary"
+            @class="btn-primary"
-              type="submit"
+            @type="submit"
-            }}
+          />
         {{/if}}
 
         <label class="query-plan">
-            {{input type="checkbox" checked=explain name="explain"}}
+          <Input @type="checkbox" @checked={{this.explain}} name="explain" />
           {{i18n "explorer.explain_label"}}
         </label>
       </form>
-
       <hr />
     {{/unless}}
 
-      {{conditional-loading-spinner condition=loading}}
+    <ConditionalLoadingSpinner @condition={{this.loading}} />
 
-      {{#unless selectedItem.fake}}
+    {{#unless this.selectedItem.fake}}
       <QueryResultsWrapper
         @results={{results}}
         @showResults={{showResults}}
@@ -260,7 +282,7 @@
       />
     {{/unless}}
 
-      {{#if showRecentQueries}}
+    {{#unless this.validQueryPresent}}
       <div class="container">
         <table class="recent-queries">
           <thead class="heading-container">
@@ -268,30 +290,30 @@
               <div
                 role="button"
                 class="heading-toggle"
-                  {{action "sortByProperty" "name"}}
+                {{on "click" (fn this.updateSortProperty "name")}}
               >
-                  {{table-header-toggle
+                <TableHeaderToggle
-                    field="name"
+                  @field="name"
-                    labelKey="explorer.query_name"
+                  @labelKey="explorer.query_user"
-                    order=order
+                  @order={{this.order}}
-                    asc=asc
+                  @asc={{(not this.sortDescending)}}
-                    automatic=true
+                  @automatic="true"
-                  }}
+                />
               </div>
             </th>
             <th class="col heading created-by">
               <div
                 role="button"
                 class="heading-toggle"
-                  {{action "sortByProperty" "username"}}
+                {{on "click" (fn this.updateSortProperty "username")}}
               >
-                  {{table-header-toggle
+                <TableHeaderToggle
-                    field="username"
+                  @field="username"
-                    labelKey="explorer.query_user"
+                  @labelKey="explorer.query_user"
-                    order=order
+                  @order={{this.order}}
-                    asc=asc
+                  @asc={{(not this.sortDescending)}}
-                    automatic=true
+                  @automatic="true"
-                  }}
+                />
               </div>
             </th>
             <th class="col heading group-names">
@@ -303,20 +325,20 @@
               <div
                 role="button"
                 class="heading-toggle"
-                  {{action "sortByProperty" "last_run_at"}}
+                {{on "click" (fn this.updateSortProperty "last_run_at")}}
               >
-                  {{table-header-toggle
+                <TableHeaderToggle
-                    field="last_run_at"
+                  @field="last_run_at"
-                    labelKey="explorer.query_time"
+                  @labelKey="explorer.query_time"
-                    order=order
+                  @order={{this.order}}
-                    asc=asc
+                  @asc={{(not this.sortDescending)}}
-                    automatic=true
+                  @automatic="true"
-                  }}
+                />
               </div>
             </th>
           </thead>
           <tbody>
-              {{#each filteredContent as |query|}}
+            {{#each this.filteredContent as |query|}}
               <tr class="query-row">
                 <td>
                   <a
@@ -360,9 +382,8 @@
           </tbody>
         </table>
       </div>
-      {{/if}}
+    {{/unless}}
 
     <div class="explorer-pad-bottom"></div>
   {{/if}}
 {{/if}}
-{{/explorer-container}}

assets/javascripts/discourse/templates/components/hljs-code-view.hbs

@@ -1 +0,0 @@
-<pre><code class={{codeClass}}>{{value}}</code></pre>

assets/javascripts/discourse/templates/modal/query-help.hbs

@@ -1,6 +1,6 @@
-{{#d-modal-body title="explorer.help.modal_title"}}
+<DModalBody @title="explorer.help.modal_title">
   {{html-safe (i18n "explorer.help.auto_resolution")}}
   {{html-safe (i18n "explorer.help.custom_params")}}
   {{html-safe (i18n "explorer.help.default_values")}}
   {{html-safe (i18n "explorer.help.data_types")}}
-{{/d-modal-body}}
+</DModalBody>

config/locales/client.ar.yml

@@ -22,7 +22,7 @@ ar:
         label: "استيراد"
         modal: "استيراد استعلام"
         unparseable_json: "ملف JSON غير قابل للتحليل"
-        wrong_json: "ملف JSON خاطئ. يجب أن يحتوي ملف JSON على كائن \"استعلام\"، والذي يجب أن يحتوي على الأقل على خاصية \"sql\"."
+        wrong_json: 'ملف JSON خاطئ. يجب أن يحتوي ملف JSON على كائن "استعلام"، والذي يجب أن يحتوي على الأقل على خاصية "sql".'
       help:
         label: "المساعدة"
         modal_title: "مساعدة مستكشف البيانات"

config/locales/client.it.yml

@@ -22,7 +22,7 @@ it:
         label: "Importa"
         modal: "Importa una query"
         unparseable_json: "File JSON non analizzabile."
-        wrong_json: "File JSON errato. Un file JSON dovrebbe contenere un oggetto \"query\" contenente almeno una proprietà \"sql\"."
+        wrong_json: 'File JSON errato. Un file JSON dovrebbe contenere un oggetto "query" contenente almeno una proprietà "sql".'
       help:
         label: "Guida"
         modal_title: "Guida di Data Explorer"

config/locales/client.pt_BR.yml

@@ -22,7 +22,7 @@ pt_BR:
         label: "Importar"
         modal: "Importar Uma Consulta"
         unparseable_json: "Arquivo JSON não analisável"
-        wrong_json: "Arquivo JSON incorreto. Um arquivo JSON deve conter um objeto \"consulta\", que deve ter pelo menos a propriedade \"sql\""
+        wrong_json: 'Arquivo JSON incorreto. Um arquivo JSON deve conter um objeto "consulta", que deve ter pelo menos a propriedade "sql"'
       help:
         label: "Ajuda"
         modal_title: "Ajuda do Explorador de Dados"

config/locales/server.hr.yml

@@ -6,4 +6,4 @@
 
 hr:
   site_settings:
-    data_explorer_enabled: "Uključi \"Data Explorer\" na /admin/plugins/explorer"
+    data_explorer_enabled: 'Uključi "Data Explorer" na /admin/plugins/explorer'

config/locales/server.pt.yml

@@ -6,4 +6,4 @@
 
 pt:
   site_settings:
-    data_explorer_enabled: "Ativar o «Explorador de Dados» em \"/admin/plugins/explorer\""
+    data_explorer_enabled: 'Ativar o «Explorador de Dados» em "/admin/plugins/explorer"'

config/locales/server.sk.yml

@@ -6,4 +6,4 @@
 
 sk:
   site_settings:
-    data_explorer_enabled: "Povoľ \"Data explorer\" v /admin/plugins/explorer"
+    data_explorer_enabled: 'Povoľ "Data explorer" v /admin/plugins/explorer'