DEV: Tagless components

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

@@ -1,5 +1,7 @@
+<div class="progress progress-striped {{if this.active 'active'}}">
   <div
     class="progress-bar progress-bar-striped
-    {{if active 'progress-bar-animated'}}"
+      {{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,3 +1,4 @@
+<tr>
   <td>
     {{#if this.officialRepoBadge}}
       {{d-icon
@@ -67,3 +68,4 @@
       </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,4 +1,5 @@
 {{#if currentUser.admin}}
+  <tr>
     <th colspan="5">
       {{#if versionCheck.upToDate}}
         <a href="{{href}}" data-auto-route="true">
@@ -11,4 +12,5 @@
         </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 @@
+<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");