DEV: Tagless components

assets/javascripts/discourse/components/progress-bar.hbs

@@ -1,5 +1,7 @@
-<div
-  class="progress-bar progress-bar-striped
-    {{if active 'progress-bar-animated'}}"
-  style={{barStyle}}
-></div>
+<div class="progress progress-striped {{if this.active 'active'}}">
+  <div
+    class="progress-bar progress-bar-striped
+      {{if this.active 'progress-bar-animated'}}"
+    style={{barStyle}}
+  ></div>
+</div>

assets/javascripts/discourse/components/progress-bar.js

@@ -3,7 +3,7 @@ import { computed } from "@ember/object";
 import { htmlSafe } from "@ember/template";
 
 export default Component.extend({
-  classNameBindings: [":progress", ":progress-striped", "active"],
+  tagName: "",
 
   active: computed("percent", function () {
     return parseInt(this.get("percent"), 10) !== 100;

assets/javascripts/discourse/components/repo-status.hbs

@@ -1,69 +1,71 @@
-<td>
-  {{#if this.officialRepoBadge}}
-    {{d-icon
-      this.officialRepoBadge
-      class="check-circle"
-      alt=this.officialRepoBadgeTitle
-      title=this.officialRepoBadgeTitle
-    }}
-  {{/if}}
-</td>
+<tr>
+  <td>
+    {{#if this.officialRepoBadge}}
+      {{d-icon
+        this.officialRepoBadge
+        class="check-circle"
+        alt=this.officialRepoBadgeTitle
+        title=this.officialRepoBadgeTitle
+      }}
+    {{/if}}
+  </td>
 
-<td>
-  <a href="{{repo.url}}">{{repo.name}}</a>
-  <span class="current commit-hash" title={{repo.version}}>
-    {{repo.prettyVersion}}
-  </span>
-</td>
+  <td>
+    <a href="{{repo.url}}">{{repo.name}}</a>
+    <span class="current commit-hash" title={{repo.version}}>
+      {{repo.prettyVersion}}
+    </span>
+  </td>
 
-<td>
-  {{#if repo.checkingStatus}}
-    Checking for new version...
-  {{else if repo.upToDate}}
-    Up to date
-  {{else}}
-    <div class="new-version">
-      <h4>New Version Available!</h4>
+  <td>
+    {{#if repo.checkingStatus}}
+      Checking for new version...
+    {{else if repo.upToDate}}
+      Up to date
+    {{else}}
+      <div class="new-version">
+        <h4>New Version Available!</h4>
 
-      <ul>
-        <li>
-          Remote Version:
-          <span class="new commit-hash" title={{repo.latestVersion}}>
-            {{repo.prettyLatestVersion}}
-          </span>
-        </li>
-        <li>
-          Last Updated:
-          {{#if repo.latest.date}}
-            {{format-date repo.latest.date}}
-          {{else}}
-            &mdash;
-          {{/if}}
-        </li>
-        <li class="new-commits">
-          {{new-commits
-            repo.latest.commits_behind
-            repo.version
-            repo.latest.version
-            repo.url
-          }}
-        </li>
-      </ul>
+        <ul>
+          <li>
+            Remote Version:
+            <span class="new commit-hash" title={{repo.latestVersion}}>
+              {{repo.prettyLatestVersion}}
+            </span>
+          </li>
+          <li>
+            Last Updated:
+            {{#if repo.latest.date}}
+              {{format-date repo.latest.date}}
+            {{else}}
+              &mdash;
+            {{/if}}
+          </li>
+          <li class="new-commits">
+            {{new-commits
+              repo.latest.commits_behind
+              repo.version
+              repo.latest.version
+              repo.url
+            }}
+          </li>
+        </ul>
 
-      {{#if repo.upgrading}}
-        <button class="btn" {{action "upgrade"}}>
-          Currently Upgrading...
-        </button>
-      {{else}}
-        <LinkTo
-          @route="upgrade.show"
-          @model={{this.repo}}
-          disabled={{this.upgradeDisabled}}
-          class="upgrade-button btn"
-        >
-          Upgrade
-        </LinkTo>
-      {{/if}}
-    </div>
-  {{/if}}
-</td>
+        {{#if repo.upgrading}}
+          <button class="btn" {{action "upgrade"}}>
+            Currently Upgrading...
+          </button>
+        {{else}}
+          <LinkTo
+            @route="upgrade.show"
+            @model={{this.repo}}
+            disabled={{this.upgradeDisabled}}
+            class="upgrade-button btn"
+          >
+            Upgrade
+          </LinkTo>
+        {{/if}}
+      </div>
+    {{/if}}
+  </td>
+</tr>

assets/javascripts/discourse/components/repo-status.js

@@ -4,7 +4,7 @@ import { inject as service } from "@ember/service";
 
 export default Component.extend({
   router: service(),
-  tagName: "tr",
+  tagName: "",
 
   upgradeDisabled: computed(
     "upgradingRepo",

assets/javascripts/discourse/components/upgrade-notice.hbs

@@ -1,14 +1,16 @@
 {{#if currentUser.admin}}
-  <th colspan="5">
-    {{#if versionCheck.upToDate}}
-      <a href="{{href}}" data-auto-route="true">
-        {{i18n "docker.link_to_upgrade"}}
-      </a>
-    {{else}}
-      {{i18n "docker.upgrade"}}
-      <a href="{{href}}" data-auto-route="true">
-        {{i18n "docker.perform_upgrade"}}
-      </a>
-    {{/if}}
-  </th>
+  <tr>
+    <th colspan="5">
+      {{#if versionCheck.upToDate}}
+        <a href="{{href}}" data-auto-route="true">
+          {{i18n "docker.link_to_upgrade"}}
+        </a>
+      {{else}}
+        {{i18n "docker.upgrade"}}
+        <a href="{{href}}" data-auto-route="true">
+          {{i18n "docker.perform_upgrade"}}
+        </a>
+      {{/if}}
+    </th>
+  </tr>
 {{/if}}

assets/javascripts/discourse/components/upgrade-notice.js

@@ -2,7 +2,7 @@ import getURL from "discourse-common/lib/get-url";
 import Component from "@ember/component";
 
 export default class extends Component {
-  tagName = "tr";
+  tagName = "";
 
   get href() {
     return getURL("/admin/upgrade");

assets/javascripts/discourse/components/x-console.hbs

@@ -1 +1,3 @@
-{{output}}
+<div class="logs">
+  {{output}}
+</div>

assets/javascripts/discourse/components/x-console.js

@@ -3,7 +3,7 @@ import { observer } from "@ember/object";
 import { scheduleOnce } from "@ember/runloop";
 
 export default Component.extend({
-  classNameBindings: [":logs"],
+  tagName: "",
 
   _outputChanged: observer("output", function () {
     scheduleOnce("afterRender", this, "_scrollBottom");