Upgrade query-result to Octane (#204)

* Upgrade query-result to Octane

assets/javascripts/discourse/components/query-result.hbs

@@ -1,76 +1,73 @@
 <article>
   <header class="result-header">
     <div class="result-info">
-      {{d-button
-        action=(action "downloadResultJson")
-        icon="download"
-        label="explorer.download_json"
-        group=group
-      }}
+      <DButton
+        @action={{this.downloadResultJson}}
+        @icon="download"
+        @label="explorer.download_json"
+      />
 
-      {{d-button
-        action=(action "downloadResultCsv")
-        icon="download"
-        label="explorer.download_csv"
-        group=group
-      }}
+      <DButton
+        @action={{this.downloadResultCsv}}
+        @icon="download"
+        @label="explorer.download_csv"
+      />
 
-      {{#if canShowChart}}
-        {{#if showChart}}
-          {{d-button
-            action=(action "showTable")
-            icon="table"
-            label="explorer.show_table"
-            group=group
-          }}
+      {{#if this.canShowChart}}
+        {{#if this.chartDisplayed}}
+          <DButton
+            @action={{this.hideChart}}
+            @icon="table"
+            @label="explorer.show_table"
+          />
         {{else}}
-          {{d-button
-            action=(action "showChart")
-            icon="chart-bar"
-            label="explorer.show_graph"
-            group=group
-          }}
+          <DButton
+            @action={{this.showChart}}
+            @icon="chart-bar"
+            @label="explorer.show_graph"
+          />
         {{/if}}
       {{/if}}
     </div>
 
     <div class="result-about">
-      {{resultCount}}
-      {{duration}}
+      {{this.resultCount}}
+      {{this.duration}}
     </div>
 
     <br />
 
-    {{~#if hasExplain}}
-      <pre class="result-explain"><code>
-          {{~content.explain}}
-        </code></pre>
+    {{~#if this.explainText}}
+      <pre class="result-explain">
+        <code>
+          {{~this.explainText}}
+        </code>
+      </pre>
     {{~/if}}
 
     <br />
   </header>
 
   <section>
-    {{#if showChart}}
+    {{#if this.chartDisplayed}}
       <DataExplorerBarChart
-        @labels={{chartLabels}}
-        @values={{chartValues}}
-        @datasetName={{chartDatasetName}}
+        @labels={{this.chartLabels}}
+        @values={{this.chartValues}}
+        @datasetName={{this.chartDatasetName}}
       />
     {{else}}
       <table>
         <thead>
           <tr class="headers">
-            {{#each columnDispNames as |col|}}
+            {{#each this.columnNames as |col|}}
               <th>{{col}}</th>
             {{/each}}
           </tr>
         </thead>
         <tbody>
-          {{#each rows as |row|}}
+          {{#each this.rows as |row|}}
             <QueryRowContent
               @row={{row}}
-              @fallbackTemplate={{this.fallbackTemplate}}
               @columnTemplates={{this.columnTemplates}}
               @lookupUser={{this.lookupUser}}
               @lookupBadge={{this.lookupBadge}}

assets/javascripts/discourse/components/query-results-wrapper.hbs

@@ -0,0 +1,11 @@
+{{#if @results}}
+  <div class="query-results">
+    {{#if @showResults}}
+      <QueryResult @query={{@selectedItem}} @content={{@results}} />
+    {{else}}
+      {{#each @results.errors as |err|}}
+        <pre class="query-error"><code>{{~err}}</code></pre>
+      {{/each}}
+    {{/if}}
+  </div>
+{{/if}}

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

@@ -9,8 +9,19 @@ import { get } from "@ember/object";
 import { isEmpty } from "@ember/utils";
 import { escapeExpression } from "discourse/lib/utilities";
 import { cached } from "@glimmer/tracking";
+import { findRawTemplate } from "discourse-common/lib/raw-templates";
 
 export default class QueryRowContent extends Component {
+  constructor() {
+    super(...arguments);
+
+    this.helpers = {
+      "icon-or-image": icon_or_image_replacement,
+      "category-link": category_badge_replacement,
+      reltime: bound_date_replacement,
+    };
+  }
+
   @cached
   get results() {
     return this.args.columnTemplates.map((t, idx) => {
@@ -46,23 +57,15 @@ export default class QueryRowContent extends Component {
       }
 
       try {
-        return htmlSafe(
-          (t.template || this.args.fallbackTemplate)(ctx, params)
-        );
+        return htmlSafe((t.template || this.fallbackTemplate)(ctx, params));
       } catch (e) {
         return "error";
       }
     });
   }
 
-  constructor() {
-    super(...arguments);
-
-    this.helpers = {
-      "icon-or-image": icon_or_image_replacement,
-      "category-link": category_badge_replacement,
-      reltime: bound_date_replacement,
-    };
+  fallbackTemplate() {
+    return findRawTemplate("javascripts/explorer/text");
   }
 }
 

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

@@ -252,17 +252,12 @@
       {{conditional-loading-spinner condition=loading}}
 
       {{#unless selectedItem.fake}}
-        {{#if results}}
-          <div class="query-results">
-            {{#if showResults}}
-              {{query-result query=selectedItem content=results}}
-            {{else}}
-              {{#each results.errors as |err|}}
-                <pre class="query-error"><code>{{~err}}</code></pre>
-              {{/each}}
-            {{/if}}
-          </div>
-        {{/if}}
+        <QueryResultsWrapper
+          @results={{results}}
+          @showResults={{showResults}}
+          @query={{selectedItem}}
+          @content={{results}}
+        />
       {{/unless}}
 
       {{#if showRecentQueries}}