DEV: Convert raw-hbs to view only components (#222)

- Convert raw.hbs files to co-located view only components

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

@@ -68,7 +68,7 @@
           {{#each this.rows as |row|}}
             <QueryRowContent
               @row={{row}}
-              @columnTemplates={{this.columnTemplates}}
+              @columnComponents={{this.columnComponents}}
               @lookupUser={{this.lookupUser}}
               @lookupBadge={{this.lookupBadge}}
               @lookupPost={{this.lookupPost}}

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

@@ -8,7 +8,29 @@ import { schedule } from "@ember/runloop";
 import { action } from "@ember/object";
 import { tracked } from "@glimmer/tracking";
 import { inject as service } from "@ember/service";
-import { findRawTemplate } from "discourse-common/lib/raw-templates";
+import TopicViewComponent from "./result-types/topic";
+import TextViewComponent from "./result-types/text";
+import PostViewComponent from "./result-types/post";
+import ReltimeViewComponent from "./result-types/reltime";
+import BadgeViewComponent from "./result-types/badge";
+import UrlViewComponent from "./result-types/url";
+import UserViewComponent from "./result-types/user";
+import GroupViewComponent from "./result-types/group";
+import HtmlViewComponent from "./result-types/html";
+import CategoryViewComponent from "./result-types/category";
+
+const VIEW_COMPONENTS = {
+  topic: TopicViewComponent,
+  text: TextViewComponent,
+  post: PostViewComponent,
+  reltime: ReltimeViewComponent,
+  badge: BadgeViewComponent,
+  url: UrlViewComponent,
+  user: UserViewComponent,
+  group: GroupViewComponent,
+  html: HtmlViewComponent,
+  category: CategoryViewComponent,
+};
 
 export default class QueryResult extends Component {
   @service site;
@@ -54,18 +76,16 @@ export default class QueryResult extends Component {
     });
   }
 
-  get columnTemplates() {
+  get columnComponents() {
     if (!this.columns) {
       return [];
     }
     return this.columns.map((_, idx) => {
-      let viewName = "text";
+      let type = "text";
       if (this.colRender[idx]) {
-        viewName = this.colRender[idx];
+        type = this.colRender[idx];
       }
-
+      return { name: type, component: VIEW_COMPONENTS[type] };
-      const template = findRawTemplate(`javascripts/explorer/${viewName}`);
-      return { name: viewName, template };
     });
   }
 

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

@@ -1,5 +1,11 @@
 <tr>
   {{#each this.results as |result|}}
-    <td>{{result}}</td>
+    <td>
+      <result.component
+        @ctx={{result.ctx}}
+        @params={{result.params}}
+        @textValue={{result.textValue}}
+      />
+    </td>
   {{/each}}
 </tr>

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

@@ -9,7 +9,7 @@ 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";
+import TextViewComponent from "./result-types/text";
 
 export default class QueryRowContent extends Component {
   constructor() {
@@ -24,7 +24,8 @@ export default class QueryRowContent extends Component {
 
   @cached
   get results() {
-    return this.args.columnTemplates.map((t, idx) => {
+    return this.args.columnComponents.map((t, idx) => {
+      const params = {};
       const value = this.args.row[idx],
         id = parseInt(value, 10);
 
@@ -33,13 +34,19 @@ export default class QueryRowContent extends Component {
         id,
         baseuri: getURL(""),
       };
-      const params = {};
 
       if (this.args.row[idx] === null) {
-        return "NULL";
+        return {
+          component: TextViewComponent,
+          textValue: "NULL",
+        };
       } else if (t.name === "text") {
-        return escapeExpression(this.args.row[idx]);
+        return {
+          component: TextViewComponent,
+          textValue: escapeExpression(this.args.row[idx]),
+        };
       }
+
       const lookupFunc = this.args[`lookup${capitalize(t.name)}`];
       if (lookupFunc) {
         ctx[t.name] = lookupFunc.call(this.args, id);
@@ -57,16 +64,16 @@ export default class QueryRowContent extends Component {
       }
 
       try {
-        return htmlSafe((t.template || this.fallbackTemplate)(ctx, params));
+        return {
+          component: t.component || TextViewComponent,
+          ctx,
+          params,
+        };
       } catch (e) {
         return "error";
       }
     });
   }
-
-  fallbackTemplate() {
-    return findRawTemplate("javascripts/explorer/text");
-  }
 }
 
 function icon_or_image_replacement(str, ctx) {

assets/javascripts/discourse/components/result-types/badge.hbs

@@ -0,0 +1,9 @@
+<a
+  href="{{@ctx.baseuri}}/badges/{{@ctx.badge.id}}/{{@ctx.badge.name}}"
+  class="user-badge {{@ctx.badge.badgeTypeClassName}}"
+  title={{@ctx.badge.display_name}}
+  data-badge-name={{@ctx.badge.name}}
+>
+  {{icon-or-image @ctx.badge.icon}}
+  <span class="badge-display-name">{{@ctx.badge.display_name}}</span>
+</a>

assets/javascripts/discourse/components/result-types/category.hbs

@@ -0,0 +1,5 @@
+{{#if @ctx.category}}
+  {{category-link @ctx.category}}
+{{else}}
+  <a href="{{@ctx.baseuri}}/t/{{@ctx.id}}">{{@ctx.id}}</a>
+{{/if}}

assets/javascripts/discourse/components/result-types/group.hbs

@@ -0,0 +1,5 @@
+{{#if @ctx.group}}
+  <a href="{{@ctx.baseuri}}/groups/{{@ctx.group.name}}">{{@ctx.group.name}}</a>
+{{else}}
+  {{@ctx.id}}
+{{/if}}

assets/javascripts/discourse/components/result-types/html.hbs

@@ -0,0 +1 @@
+{{html-safe @textValue}}

assets/javascripts/discourse/components/result-types/post.hbs

@@ -1,14 +1,14 @@
-{{#if post}}
+{{#if @ctx.post}}
   <aside
     class="quote"
-    data-post={{post.post_number}}
+    data-post={{@ctx.post.post_number}}
-    data-topic={{post.topic_id}}
+    data-topic={{@ctx.post.topic_id}}
   >
     <div class="title">
       <div class="quote-controls">
         {{! template-lint-disable no-invalid-link-text }}
         <a
-          href="/t/via-quote/{{post.topic_id}}/{{post.post_number}}"
+          href="/t/via-quote/{{@ctx.post.topic_id}}/{{@ctx.post.post_number}}"
           title="go to the quoted post"
           class="quote-other-topic"
         >
@@ -17,18 +17,18 @@
 
       <a
         class="result-post-link"
-        href="/t/{{post.topic_id}}/{{post.post_number}}"
+        href="/t/{{@ctx.post.topic_id}}/{{@ctx.post.post_number}}"
       >
-        {{avatar post imageSize="tiny"}}{{post.username}}:
+        {{avatar @ctx.post imageSize="tiny"}}{{@ctx.post.username}}:
       </a>
     </div>
 
     <blockquote>
       <p>
-        {{html-safe post.excerpt}}
+        {{html-safe @ctx.post.excerpt}}
       </p>
     </blockquote>
   </aside>
 {{else}}
-  {{id}}
+  {{@ctx.id}}
 {{/if}}

assets/javascripts/discourse/components/result-types/reltime.hbs

@@ -0,0 +1 @@
+{{reltime @textValue}}

assets/javascripts/discourse/components/result-types/text.hbs

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

assets/javascripts/discourse/components/result-types/topic.hbs

@@ -0,0 +1,8 @@
+{{#if @ctx.topic}}
+  <a href="{{@ctx.baseuri}}/t/{{@ctx.topic.slug}}/{{@ctx.topic.id}}">
+    {{html-safe @ctx.topic.fancy_title}}
+  </a>
+  ({{@ctx.topic.posts_count}})
+{{else}}
+  <a href="{{@ctx.baseuri}}/t/{{@ctx.id}}">{{@ctx.id}}</a>
+{{/if}}

assets/javascripts/discourse/components/result-types/url.hbs

@@ -0,0 +1 @@
+<a href={{@ctx.href}}>{{@ctx.target}}</a>

assets/javascripts/discourse/components/result-types/user.hbs

@@ -0,0 +1,11 @@
+{{#if @ctx.user}}
+  <a
+    href="{{@ctx.baseuri}}/u/{{@ctx.user.username}}/activity"
+    data-user-card={{@ctx.user.username}}
+  >
+    {{avatar @ctx.user imageSize="tiny"}}
+    {{@ctx.user.username}}
+  </a>
+{{else}}
+  {{@ctx.id}}
+{{/if}}

assets/javascripts/discourse/templates/explorer/badge.raw.hbs

@@ -1,10 +0,0 @@
-{{! source: badge-button component }}
-<a
-  href="{{baseuri}}/badges/{{badge.id}}/{{badge.name}}"
-  class="user-badge {{badge.badgeTypeClassName}}"
-  title={{badge.display_name}}
-  data-badge-name={{badge.name}}
->
-  {{icon-or-image badge.icon}}
-  <span class="badge-display-name">{{badge.display_name}}</span>
-</a>

assets/javascripts/discourse/templates/explorer/category.raw.hbs

@@ -1,5 +0,0 @@
-{{#if category}}
-  {{category-link category}}
-{{else}}
-  <a href="{{baseuri}}/t/{{id}}">{{id}}</a>
-{{/if}}

assets/javascripts/discourse/templates/explorer/group.raw.hbs

@@ -1,5 +0,0 @@
-{{#if group}}
-  <a href="{{baseuri}}/groups/{{group.name}}">{{group.name}}</a>
-{{else}}
-  {{id}}
-{{/if}}

assets/javascripts/discourse/templates/explorer/html.raw.hbs

@@ -1 +0,0 @@
-{{html-safe value}}

assets/javascripts/discourse/templates/explorer/reltime.raw.hbs

@@ -1 +0,0 @@
-{{reltime value}}

assets/javascripts/discourse/templates/explorer/text.raw.hbs

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

assets/javascripts/discourse/templates/explorer/topic.raw.hbs

@@ -1,8 +0,0 @@
-{{#if topic}}
-  <a href="{{baseuri}}/t/{{topic.slug}}/{{topic.id}}">
-    {{html-safe topic.fancy_title}}
-  </a>
-  ({{topic.posts_count}})
-{{else}}
-  <a href="{{baseuri}}/t/{{id}}">{{id}}</a>
-{{/if}}

assets/javascripts/discourse/templates/explorer/url.raw.hbs

@@ -1 +0,0 @@
-<a href={{href}}>{{target}}</a>

assets/javascripts/discourse/templates/explorer/user.raw.hbs

@@ -1,11 +0,0 @@
-{{#if user}}
-  <a
-    href="{{baseuri}}/u/{{user.username}}/activity"
-    data-user-card={{user.username}}
-  >
-    {{avatar user imageSize="tiny"}}
-    {{user.username}}
-  </a>
-{{else}}
-  {{id}}
-{{/if}}