Upgrade query-row-content to Octane (#194)

* Upgrade query-row-content to octane

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

@@ -0,0 +1,5 @@
+<tr>
+  {{#each this.results as |result|}}
+    <td>{{result}}</td>
+  {{/each}}
+</tr>

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

@@ -1,4 +1,4 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 import { categoryLinkHTML } from "discourse/helpers/category-link";
 import { autoUpdatingRelativeAge } from "discourse/lib/formatter";
 import { convertIconClass, iconHTML } from "discourse-common/lib/icon-library";
@@ -8,6 +8,63 @@ import { htmlSafe } from "@ember/template";
 import { get } from "@ember/object";
 import { isEmpty } from "@ember/utils";
 import { escapeExpression } from "discourse/lib/utilities";
+import { cached } from "@glimmer/tracking";
+
+export default class QueryRowContent extends Component {
+  @cached
+  get results() {
+    return this.args.columnTemplates.map((t, idx) => {
+      const value = this.args.row[idx],
+        id = parseInt(value, 10);
+
+      const ctx = {
+        value,
+        id,
+        baseuri: getURL(""),
+      };
+      const params = {};
+
+      if (this.args.row[idx] === null) {
+        return "NULL";
+      } else if (t.name === "text") {
+        return escapeExpression(this.args.row[idx]);
+      }
+      const lookupFunc = this.args[`lookup${capitalize(t.name)}`];
+      if (lookupFunc) {
+        ctx[t.name] = lookupFunc.call(this.args, id);
+      }
+
+      if (t.name === "url") {
+        let [url, name] = guessUrl(value);
+        ctx["href"] = url;
+        ctx["target"] = name;
+      }
+
+      if (t.name === "category" || t.name === "badge" || t.name === "reltime") {
+        // only replace helpers if needed
+        params.helpers = this.helpers;
+      }
+
+      try {
+        return htmlSafe(
+          (t.template || this.args.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,
+    };
+  }
+}
 
 function icon_or_image_replacement(str, ctx) {
   str = get(ctx.contexts[0], str);
@@ -35,7 +92,6 @@ function bound_date_replacement(str, ctx) {
   return htmlSafe(autoUpdatingRelativeAge(new Date(value), { title: true }));
 }
 
-// consider moving this elsewhere
 function guessUrl(t) {
   let [dest, name] = [t, t];
 
@@ -48,63 +104,3 @@ function guessUrl(t) {
 
   return [dest, name];
 }
-
-const QueryRowContentComponent = Component.extend({
-  tagName: "tr",
-  rowContents: null,
-
-  didReceiveAttrs() {
-    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.columnTemplates.map((t, idx) => {
-      const value = row[idx],
-        id = parseInt(value, 10);
-
-      const ctx = {
-        value,
-        id,
-        baseuri: getURL(""),
-      };
-      const params = {};
-
-      if (row[idx] === null) {
-        return "NULL";
-      } else if (t.name === "text") {
-        return escapeExpression(row[idx]);
-      }
-
-      const lookupFunc = parentView[`lookup${capitalize(t.name)}`];
-      if (lookupFunc) {
-        ctx[t.name] = lookupFunc.call(parentView, id);
-      }
-
-      if (t.name === "url") {
-        let [url, name] = guessUrl(value);
-        ctx["href"] = url;
-        ctx["target"] = name;
-      }
-
-      if (t.name === "category" || t.name === "badge" || t.name === "reltime") {
-        // only replace helpers if needed
-        params.helpers = helpers;
-      }
-
-      try {
-        return htmlSafe((t.template || fallback)(ctx, params));
-      } catch (e) {
-        return "error";
-      }
-    });
-
-    this.set("rowContents", htmlSafe(`<td>${parts.join("</td><td>")}</td>`));
-  },
-});
-
-export default QueryRowContentComponent;

assets/javascripts/discourse/templates/components/query-row-content.hbs

@@ -1 +0,0 @@
-{{rowContents}}

assets/javascripts/discourse/templates/explorer-query-result.hbs

@@ -39,7 +39,7 @@
       {{duration}}
     </div>
 
-    <br>
+    <br />
 
     {{~#if hasExplain}}
       <pre class="result-explain"><code>
@@ -47,7 +47,7 @@
         </code></pre>
     {{~/if}}
 
-    <br>
+    <br />
   </header>
 
   <section>
@@ -68,11 +68,22 @@
         </thead>
         <tbody>
           {{#each rows as |row|}}
-            {{query-row-content
-              row=row
-              fallbackTemplate=fallbackTemplate
-              columnTemplates=columnTemplates
-            }}
+            <QueryRowContent
+              @row={{row}}
+              @fallbackTemplate={{this.fallbackTemplate}}
+              @columnTemplates={{this.columnTemplates}}
+              @lookupUser={{this.lookupUser}}
+              @lookupBadge={{this.lookupBadge}}
+              @lookupPost={{this.lookupPost}}
+              @lookupTopic={{this.lookupTopic}}
+              @lookupGroup={{this.lookupGroup}}
+              @lookupCategory={{this.lookupCategory}}
+              @transformedPostTable={{this.transformedUserTable}}
+              @transformedBadgeTable={{this.transformedBadgeTable}}
+              @transformedUserTable={{this.transformedUserTable}}
+              @transformedGroupTable={{this.transformedGroupTable}}
+              @transformedTopicTable={{this.transformedTopicTable}}
+            />
           {{/each}}
         </tbody>
       </table>