From e71da4cad32553b707d9ea0be9ddd4149e81c951 Mon Sep 17 00:00:00 2001
From: Geordan Neukum <gneukum1@gmail.com>
Date: Wed, 27 Apr 2022 10:48:04 -0400
Subject: [PATCH] render-item: fixup no-curly-component-invocation (#1987)

There are two ways to invoke a component in a template: curly component
syntax ({{my-component}}), and angle bracket syntax (<MyComponent />).
The difference between them is syntactical. We should favour angle
bracket syntax as it improves readability of templates, i.e.
disambiguates components from helpers, and is also the future direction
Ember is going with the Octane Edition.

As such, let's fix up the render-item template so that it follows this
syntax and then remove the manual disabling of this linting rule so that
the linter will warn us against adding more issues of this type in the
future.
---
 app/components/render-item.hbs | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/app/components/render-item.hbs b/app/components/render-item.hbs
index f02aeeabc6..bf2d7f9856 100644
--- a/app/components/render-item.hbs
+++ b/app/components/render-item.hbs
@@ -1,15 +1,13 @@
-{{!-- template-lint-disable no-curly-component-invocation --}}
-
 <Ui::Disclosure as |disclosure|>
   <tr
     style={{this.nodeStyle}}
     class="list__row js-render-profile-item"
   >
-    {{#@list.cell
+    <@list.cell
       class="list__cell_main js-render-main-cell"
-      on-click=disclosure.toggle
-      style=this.nameStyle
-    }}
+      @on-click={{disclosure.toggle}}
+      style={{this.nameStyle}}
+    >
       {{#if this.hasChildren}}
         <disclosure.triangleIcon />
       {{/if}}
@@ -17,17 +15,17 @@
       <span title={{@model.name}}>
         <span class="js-render-profile-name">{{@model.name}}</span>
       </span>
-    {{/@list.cell}}
+    </@list.cell>
 
-    {{#@list.cell class="list__cell_value_numeric"}}
+    <@list.cell class="list__cell_value_numeric">
       <span class="pill js-render-profile-duration">
         {{ms-to-time @model.duration}}
       </span>
-    {{/@list.cell}}
+    </@list.cell>
 
-    {{#@list.cell class="list__cell_value_numeric js-render-profile-timestamp"}}
+    <@list.cell class="list__cell_value_numeric js-render-profile-timestamp">
       {{this.readableTime}}
-    {{/@list.cell}}
+    </@list.cell>
   </tr>
 
   {{#if disclosure.isExpanded}}