ui: Move to angle brackets for ember components (#7321)

* Modify templates with codemods angle brackets

* ui: Fix up problem with intention filter action attribute

Co-authored-by: Kenia <19161242+kaxcode@users.noreply.github.com>

ui-v2/app/controllers/dc/intentions/index.js

@@ -13,7 +13,7 @@ const createCounter = function(prop) {
 const countAction = createCounter('Action');
 export default Controller.extend(WithSearching, WithFiltering, WithEventSource, {
   queryParams: {
-    action: {
+    currentFilter: {
       as: 'action',
     },
     s: {
@@ -44,7 +44,7 @@ export default Controller.extend(WithSearching, WithFiltering, WithEventSource,
       };
     });
   }),
-  filter: function(item, { s = '', action = '' }) {
+  filter: function(item, { s = '', currentFilter = '' }) {
-    return action === '' || get(item, 'Action') === action;
+    return currentFilter === '' || get(item, 'Action') === currentFilter;
   },
 });

ui-v2/app/routes/dc/intentions/index.js

@@ -7,6 +7,9 @@ import WithIntentionActions from 'consul-ui/mixins/intention/with-actions';
 export default Route.extend(WithIntentionActions, {
   repo: service('repository/intention'),
   queryParams: {
+    currentFilter: {
+      as: 'action',
+    },
     s: {
       as: 'filter',
       replace: true,

ui-v2/app/templates/application.hbs

@@ -1,13 +1,13 @@
-{{head-layout}}
+<HeadLayout />
 {{title 'Consul' separator=' - '}}
 {{#if (not loading)}}
   {{outlet}}
 {{else}}
-  {{#hashicorp-consul id="wrapper" permissions=permissions dcs=dcs dc=dc nspaces=nspaces nspace=nspace}}
+  <HashicorpConsul @id="wrapper" @permissions={{permissions}} @dcs={{dcs}} @dc={{dc}} @nspaces={{nspaces}} @nspace={{nspace}}>
-    {{#app-view class="loading show"}}
+    <AppView @class="loading show">
-      {{#block-slot name='content'}}
+      <BlockSlot @name="content">
         {{partial 'consul-loading'}}
-      {{/block-slot}}
+      </BlockSlot>
-    {{/app-view}}
+    </AppView>
-  {{/hashicorp-consul}}
+  </HashicorpConsul>
 {{/if}}

ui-v2/app/templates/components/acl-filter.hbs

@@ -1,4 +1,4 @@
 {{!<form>}}
-    {{freetext-filter searchable=searchable value=search placeholder="Search by name/token"}}
+    <FreetextFilter @searchable={{searchable}} @value={{search}} @placeholder="Search by name/token" />
-    {{radio-group keyboardAccess=true name="type" value=type items=filters onchange=(action onchange)}}
+    <RadioGroup @keyboardAccess={{true}} @name="type" @value={{type}} @items={{filters}} @onchange={{action onchange}} />
 {{!</form>}}

ui-v2/app/templates/components/app-view.hbs

@@ -2,38 +2,38 @@
 {{#if (not loading)}}
 <header>
 {{#each flashMessages.queue as |flash|}}
-    {{#flash-message flash=flash as |component flash|}}
+    <FlashMessage @flash={{flash}} as |component flash|>
         {{! flashes automatically ucfirst the type }}
 
         <p data-notification class="{{lowercase component.flashType}} notification-{{lowercase flash.action}}">
           <strong>
             {{component.flashType}}!
           </strong>
-          {{#yield-slot name='notification' params=(block-params (lowercase component.flashType) (lowercase flash.action) flash.item )}}{{yield}}{{/yield-slot}}
+          <YieldSlot @name="notification" @params={{block-params (lowercase component.flashType) (lowercase flash.action) flash.item}}>{{yield}}</YieldSlot>
         </p>
-    {{/flash-message}}
+    </FlashMessage>
 {{/each}}
     <div>
         <div class="actions">
   {{#if authorized}}
-            {{#yield-slot name='actions'}}{{yield}}{{/yield-slot}}
+            <YieldSlot @name="actions">{{yield}}</YieldSlot>
   {{/if}}
         </div>
 
         <div>
   {{#if authorized}}
             <nav aria-label="Breadcrumb">
-                {{#yield-slot name='breadcrumbs'}}{{yield}}{{/yield-slot}}
+                <YieldSlot @name="breadcrumbs">{{yield}}</YieldSlot>
             </nav>
   {{/if}}
-            {{#yield-slot name='header'}}{{yield}}{{/yield-slot}}
+            <YieldSlot @name="header">{{yield}}</YieldSlot>
         </div>
     </div>
   {{#if authorized}}
-    {{#yield-slot name='toolbar'}}
+    <YieldSlot @name="toolbar">
       <input type="checkbox" id="toolbar-toggle" />
       {{yield}}
-    {{/yield-slot}}
+    </YieldSlot>
   {{/if}}
 </header>
 {{/if}}
@@ -42,11 +42,11 @@
     {{partial 'consul-loading'}}
 {{else}}
     {{#if (not enabled) }}
-      {{#yield-slot name='disabled'}}{{yield}}{{/yield-slot}}
+      <YieldSlot @name="disabled">{{yield}}</YieldSlot>
     {{else if (not authorized)}}
-      {{#yield-slot name='authorization'}}{{yield}}{{/yield-slot}}
+      <YieldSlot @name="authorization">{{yield}}</YieldSlot>
     {{else}}
-      {{#yield-slot name='content'}}{{yield}}{{/yield-slot}}
+      <YieldSlot @name="content">{{yield}}</YieldSlot>
     {{/if}}
 {{/if}}
 </div>

ui-v2/app/templates/components/catalog-filter.hbs

@@ -1,9 +1,4 @@
 {{!<form>}}
-    {{freetext-filter searchable=searchable value=search placeholder="Search"}}
+    <FreetextFilter @searchable={{searchable}} @value={{search}} @placeholder="Search" />
-    {{radio-group keyboardAccess=true name="status" value=status items=(array
+    <RadioGroup @keyboardAccess={{true}} @name="status" @value={{status}} @items={{array (hash label="All (Any Status)" value="") (hash label="Critical Checks" value="critical") (hash label="Warning Checks" value="warning") (hash label="Passing Checks" value="passing")}} @onchange={{action onchange}} />
-      (hash label='All (Any Status)' value='' )
-      (hash label='Critical Checks' value='critical')
-      (hash label='Warning Checks' value='warning')
-      (hash label='Passing Checks' value='passing')
-    ) onchange=(action onchange)}}
 {{!</form>}}

ui-v2/app/templates/components/changeable-set.hbs

@@ -1,6 +1,6 @@
 {{yield}}
 {{#if (gt items.length 0)}}
-  {{#yield-slot name='set' params=(block-params items)}}{{yield}}{{/yield-slot}}
+  <YieldSlot @name="set" @params={{block-params items}}>{{yield}}</YieldSlot>
 {{else}}
-  {{#yield-slot name='empty'}}{{yield}}{{/yield-slot}}
+  <YieldSlot @name="empty">{{yield}}</YieldSlot>
 {{/if}}

ui-v2/app/templates/components/child-selector.hbs

@@ -1,21 +1,13 @@
 {{yield}}
-  {{#yield-slot name='create'}}{{yield}}{{/yield-slot}}
+  <YieldSlot @name="create">{{yield}}</YieldSlot>
   <label class="type-text">
-    <span>{{#yield-slot name='label'}}{{yield}}{{/yield-slot}}</span>
+    <span><YieldSlot @name="label">{{yield}}</YieldSlot></span>
-      {{#power-select
+      <PowerSelect @onopen={{action "open"}} @search={{action "search"}} @options={{options}} @loadingMessage="Loading..." @searchMessage="No possible options" @searchPlaceholder={{placeholder}} @onchange={{action "change" "items[]" items}} as |item|>
-        onopen=(action 'open')
+        <YieldSlot @name="option" @params={{block-params item}}>{{yield}}</YieldSlot>
-        search=(action 'search')
+      </PowerSelect>
-        options=options
-        loadingMessage="Loading..."
-        searchMessage="No possible options"
-        searchPlaceholder=placeholder
-        onchange=(action 'change' 'items[]' items) as |item|
-      }}
-        {{#yield-slot name='option' params=(block-params item)}}{{yield}}{{/yield-slot}}
-      {{/power-select}}
   </label>
 {{#if (gt items.length 0)}}
-  {{#yield-slot name='set'}}{{yield}}{{/yield-slot}}
+  <YieldSlot @name="set">{{yield}}</YieldSlot>
 {{else}}
 
 {{/if}}

ui-v2/app/templates/components/code-editor.hbs

@@ -1,18 +1,7 @@
-{{ivy-codemirror
+<IvyCodemirror @value={{value}} @name={{name}} @class={{class}} @options={{options}} @valueUpdated={{action onkeyup}} />
-    value=value
-    name=name
-    class=class
-    options=options
-    valueUpdated=(action onkeyup)
-}}
 <pre><code>{{yield}}</code></pre>
 {{#if (and (not readonly) (not syntax))}}
-  {{#power-select
+  <PowerSelect @onchange={{action "change"}} @selected={{mode}} @searchEnabled={{false}} @options={{modes}} as |mode|>
-    onchange=(action 'change')
-    selected=mode
-    searchEnabled=false
-    options=modes as |mode|
-  }}
     {{mode.name}}
-  {{/power-select}}
+  </PowerSelect>
 {{/if}}

ui-v2/app/templates/components/confirmation-dialog.hbs

@@ -1,11 +1,11 @@
 {{yield}}
-{{#yield-slot name='action' params=(block-params confirm cancel)}}
+<YieldSlot @name="action" @params={{block-params confirm cancel}}>
 {{#if (or permanent (not confirming))}}
     {{yield}}
 {{/if}}
-{{/yield-slot}}
+</YieldSlot>
-{{#yield-slot name='dialog' params=(block-params execute cancel message actionName)}}
+<YieldSlot @name="dialog" @params={{block-params execute cancel message actionName}}>
 {{#if confirming }}
     {{yield}}
 {{/if}}
-{{/yield-slot}}
+</YieldSlot>

ui-v2/app/templates/components/consul-service-list.hbs

@@ -1,6 +1,6 @@
 {{#if (gt items.length 0)}}
-  {{#tabular-collection items=items as |item index|}}
+  <TabularCollection @items={{items}} as |item index|>
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
       <th style={{remainingWidth}}>Service</th>
       <th style={{totalWidth}}>
         Health Checks
@@ -9,8 +9,8 @@
         </span>
       </th>
       <th style={{remainingWidth}}>Tags</th>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='row'}}
+    <BlockSlot @name="row">
       <td data-test-service={{item.Name}} style={{remainingWidth}}>
         <a href={{href-to routeName item.Name}}>
       {{#let (service/external-source item) as |externalSource| }}
@@ -24,14 +24,11 @@
         </a>
       </td>
       <td style={{totalWidth}}>
-        {{healthcheck-info
+        <HealthcheckInfo @passing={{item.ChecksPassing}} @warning={{item.ChecksWarning}} @critical={{item.ChecksCritical}} @passingWidth={{passingWidth}} @warningWidth={{warningWidth}} @criticalWidth={{criticalWidth}} />
-          passing=item.ChecksPassing warning=item.ChecksWarning critical=item.ChecksCritical
-          passingWidth=passingWidth warningWidth=warningWidth criticalWidth=criticalWidth
-        }}
       </td>
       <td style={{remainingWidth}}>
-        {{tag-list items=item.Tags}}
+        <TagList @items={{item.Tags}} />
       </td>
-    {{/block-slot}}
+    </BlockSlot>
-  {{/tabular-collection}}
+  </TabularCollection>
 {{/if}}

ui-v2/app/templates/components/copy-button-feedback.hbs

@@ -1,15 +1,15 @@
-{{#feedback-dialog type='inline'}}
+<FeedbackDialog @type="inline">
-  {{#block-slot name='action' as |success error|}}
+  <BlockSlot @name="action" as |success error|>
-    {{#copy-button success=(action success) error=(action error) clipboardText=copy title=(concat 'Copy ' name ' to the clipboard')}}{{#if hasBlock }}{{yield}}{{else}}{{value}}{{/if}}{{/copy-button}}
+    <CopyButton @success={{action success}} @error={{action error}} @clipboardText={{copy}} @title={{concat "Copy " name " to the clipboard"}}>{{#if hasBlock }}{{yield}}{{else}}{{value}}{{/if}}</CopyButton>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='success' as |transition|}}
+  <BlockSlot @name="success" as |transition|>
     <p class={{transition}}>
       Copied {{name}}!
     </p>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='error' as |transition|}}
+  <BlockSlot @name="error" as |transition|>
     <p class={{transition}}>
       Sorry, something went wrong!
     </p>
-  {{/block-slot}}
+  </BlockSlot>
-{{/feedback-dialog}}
+</FeedbackDialog>

ui-v2/app/templates/components/discovery-chain.hbs

@@ -28,7 +28,7 @@
     </header>
     <div role="group">
       {{#each routes as |item|}}
-        {{route-card item=item onclick=(action 'click')}}
+        <RouteCard @item={{item}} @onclick={{action "click"}} />
       {{/each}}
     </div>
   </div>
@@ -43,7 +43,7 @@
     </header>
     <div role="group">
       {{#each (sort-by 'Name' splitters) as |item|}}
-        {{splitter-card item=item onclick=(action 'click')}}
+        <SplitterCard @item={{item}} @onclick={{action "click"}} />
       {{/each}}
     </div>
   </div>
@@ -58,7 +58,7 @@
     </header>
     <div role="group">
       {{#each (sort-by 'Name' resolvers) as |item|}}
-        {{resolver-card item=item onclick=(action 'click')}}
+        <ResolverCard @item={{item}} @onclick={{action "click"}} />
       {{/each}}
     </div>
   </div>

ui-v2/app/templates/components/feedback-dialog.hbs

@@ -1,9 +1,9 @@
 {{yield}}
 {{#if (eq state 'success') }}
-    {{#yield-slot name='success' params=(block-params transition)}}{{yield}}{{/yield-slot}}
+    <YieldSlot @name="success" @params={{block-params transition}}>{{yield}}</YieldSlot>
 {{else if (eq state 'error') }}
-    {{#yield-slot name='error' params=(block-params transition)}}{{yield}}{{/yield-slot}}
+    <YieldSlot @name="error" @params={{block-params transition}}>{{yield}}</YieldSlot>
 {{/if}}
 {{#if (or permanent (eq state 'ready')) }}
-    {{#yield-slot name='action' params=(block-params success error)}}{{yield}}{{message}}{{/yield-slot}}
+    <YieldSlot @name="action" @params={{block-params success error}}>{{yield}}{{message}}</YieldSlot>
 {{/if}}

ui-v2/app/templates/components/hashicorp-consul.hbs

@@ -16,18 +16,18 @@
     {{#if (and (eq nspaces.length 1) (not canManageNspaces)) }}
                         <span data-test-nspace-selected={{nspace.Name}}>{{nspace.Name}}</span>
     {{ else }}
-                        {{#popover-menu position='left'}}
+                        <PopoverMenu @position="left">
-                          {{#block-slot name='trigger'}}
+                          <BlockSlot @name="trigger">
                             {{nspace.Name}}
-                          {{/block-slot}}
+                          </BlockSlot>
                         {{#if (is-href 'dc.nspaces')}}
-                          {{#block-slot name='header'}}
+                          <BlockSlot @name="header">
                             <p>
 					                    Namespaces themselves are not namespaced, so switching will not change the current view.
                             </p>
-                          {{/block-slot}}
+                          </BlockSlot>
                         {{/if}}
-                          {{#block-slot name='menu'}}
+                          <BlockSlot @name="menu">
                             <li role="separator">
                               Namespaces
                             </li>
@@ -42,8 +42,8 @@
                                 <a tabindex="-1" role="menuitem" href={{href-to 'dc.nspaces' dc.Name}}>Manage namespaces</a>
                               </li>
                     {{/if}}
-                          {{/block-slot}}
+                          </BlockSlot>
-                        {{/popover-menu}}
+                        </PopoverMenu>
     {{/if}}
                     </li>
   {{/if}}
@@ -51,11 +51,11 @@
   {{#if (or (not dcs) (eq dcs.length 1)) }}
                         <span data-test-datacenter-selected={{dc.Name}}>{{dc.Name}}</span>
   {{ else }}
-                        {{#popover-menu position='left'}}
+                        <PopoverMenu @position="left">
-                          {{#block-slot name='trigger'}}
+                          <BlockSlot @name="trigger">
                             {{dc.Name}}
-                          {{/block-slot}}
+                          </BlockSlot>
-                          {{#block-slot name='menu'}}
+                          <BlockSlot @name="menu">
                             <li role="separator">
                               Datacenters
                             </li>
@@ -64,8 +64,8 @@
                                 <a tabindex="-1" role="menuitem" href={{href-mut (hash dc=item.Name)}}>{{item.Name}}</a>
                               </li>
                             {{/each}}
-                          {{/block-slot}}
+                          </BlockSlot>
-                        {{/popover-menu}}
+                        </PopoverMenu>
 
   {{/if}}
                     </li>
@@ -90,11 +90,11 @@
             <nav>
                 <ul>
                     <li data-test-main-nav-docs>
-                      {{#popover-menu position='right'}}
+                      <PopoverMenu @position="right">
-                        {{#block-slot name='trigger'}}
+                        <BlockSlot @name="trigger">
                           Help
-                        {{/block-slot}}
+                        </BlockSlot>
-                        {{#block-slot name='menu'}}
+                        <BlockSlot @name="menu">
                           <li role="none" class="docs-link">
                             <a tabindex="-1" role="menuitem" href={{env 'CONSUL_DOCS_URL'}} rel="noopener noreferrer" target="_blank">Documentation</a>
                           </li>
@@ -105,8 +105,8 @@
                           <li role="none" class="feedback-link">
                             <a tabindex="-1" role="menuitem" href={{env 'CONSUL_REPO_ISSUES_URL'}} target="_blank" rel="noopener noreferrer">Provide Feedback</a>
                           </li>
-                        {{/block-slot}}
+                        </BlockSlot>
-                      {{/popover-menu}}
+                      </PopoverMenu>
                     </li>
                     <li data-test-main-nav-settings class={{if (is-href 'settings') 'is-active'}}>
                         <a href={{href-to 'settings'}}>Settings</a>
@@ -124,4 +124,4 @@
         <a data-test-footer-docs href="{{env 'CONSUL_DOCS_URL'}}" rel="help noopener noreferrer" target="_blank">Documentation</a>
         {{{concat '<!-- ' (env 'CONSUL_GIT_SHA') '-->'}}}
     </footer>
-    {{modal-layer}}
+    <ModalLayer />

ui-v2/app/templates/components/healthcheck-info.hbs

@@ -2,8 +2,8 @@
   <span title="No Healthchecks" class="zero">0</span>
 {{else}}
   <dl class="healthcheck-info">
-      {{healthcheck-status width=passingWidth name='passing' value=passing}}
+      <HealthcheckStatus @width={{passingWidth}} @name="passing" @value={{passing}} />
-      {{healthcheck-status width=warningWidth name='warning' value=warning}}
+      <HealthcheckStatus @width={{warningWidth}} @name="warning" @value={{warning}} />
-      {{healthcheck-status width=criticalWidth name='critical' value=critical}}
+      <HealthcheckStatus @width={{criticalWidth}} @name="critical" @value={{critical}} />
   </dl>
 {{/if}}

ui-v2/app/templates/components/healthcheck-list.hbs

@@ -1,15 +1,11 @@
 <ul data-test-healthchecks>
 {{#each (sort-by (action 'sortChecksByImportance') items) as |item| }}
 {{! TODO: this component and its child should be moved to a single component }}
-  {{#healthcheck-output
+  <HealthcheckOutput @data-test-node-healthcheck={{item.Name}} @class={{item.Status}} @tagName="li">
-    data-test-node-healthcheck=item.Name
+      <BlockSlot @name="header">
-    class=item.Status
-    tagName='li'
-    }}
-      {{#block-slot name='header'}}
         <h3>{{item.Name}}</h3>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='content'}}
+      <BlockSlot @name="content">
       <dl>
         <dt>ServiceName</dt>
         <dd>{{or item.ServiceName '-'}}</dd>
@@ -36,25 +32,25 @@
         <dt>Output</dt>
         <dd>
             <pre><code>{{item.Output}}</code></pre>
-    {{#feedback-dialog type='inline'}}
+    <FeedbackDialog @type="inline">
-      {{#block-slot name='action' as |success error|}}
+      <BlockSlot @name="action" as |success error|>
-          {{copy-button success=(action success) error=(action error) clipboardText=item.Output title='copy output to clipboard'}}
+          <CopyButton @success={{action success}} @error={{action error}} @clipboardText={{item.Output}} @title="copy output to clipboard" />
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='success' as |transition|}}
+      <BlockSlot @name="success" as |transition|>
         <p class={{transition}}>
           Copied output!
         </p>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='error' as |transition|}}
+      <BlockSlot @name="error" as |transition|>
         <p class={{transition}}>
           Sorry, something went wrong!
         </p>
-      {{/block-slot}}
+      </BlockSlot>
-    {{/feedback-dialog}}
+    </FeedbackDialog>
         </dd>
 {{/if}}
       </dl>
-      {{/block-slot}}
+      </BlockSlot>
-    {{/healthcheck-output}}
+    </HealthcheckOutput>
 {{/each}}
 </ul>

ui-v2/app/templates/components/healthcheck-output.hbs

@@ -2,7 +2,7 @@
 {{yield}}
 <div>
   <header>
-    {{#yield-slot name='header'}}{{yield}}{{/yield-slot}}
+    <YieldSlot @name="header">{{yield}}</YieldSlot>
   </header>
-  {{#yield-slot name='content'}}{{yield}}{{/yield-slot}}
+  <YieldSlot @name="content">{{yield}}</YieldSlot>
 </div>

ui-v2/app/templates/components/healthchecked-resource.hbs

@@ -1,19 +1,19 @@
-{{#stats-card}}
+<StatsCard>
-  {{#block-slot name='icon'}}{{yield}}{{/block-slot}}
+  <BlockSlot @name="icon">{{yield}}</BlockSlot>
-  {{#block-slot name='mini-stat'}}
+  <BlockSlot @name="mini-stat">
     {{#if (eq checks.length 0)}}
       <span class="zero" data-tooltip="This node has no registered healthchecks">{{checks.length}}</span>
     {{else if (eq checks.length healthy.length)}}
       <span class="non-zero" data-tooltip={{concat 'All ' healthy.length ' ' (pluralize healthy.length 'check' without-count=true) ' passing'}}>{{healthy.length}}</span>
     {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='header'}}
+  <BlockSlot @name="header">
     <a href={{href}}>
       <strong>{{name}}</strong>
       <span>{{address}}</span>
     </a>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='body'}}
+  <BlockSlot @name="body">
   {{#if (not-eq checks.length healthy.length)}}
     <ul>
   {{#each unhealthy as |item|}}
@@ -34,5 +34,5 @@
   {{/if}}
     </ul>
   {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-{{/stats-card}}
+</StatsCard>

ui-v2/app/templates/components/intention-filter.hbs

@@ -1,4 +1,4 @@
 {{!<form>}}
-    {{freetext-filter searchable=searchable value=search placeholder="Search by Source or Destination"}}
+    <FreetextFilter @searchable={{searchable}} @value={{search}} @placeholder="Search by Source or Destination" />
-    {{radio-group keyboardAccess=true name="action" value=action items=filters onchange=(action onchange)}}
+    <RadioGroup @keyboardAccess={{true}} @name="currentFilter" @value={{selected}} @items={{filters}} @onchange={{action onchange}} />
 {{!</form>}}

ui-v2/app/templates/components/list-collection.hbs

@@ -1,6 +1,6 @@
-{{#ember-native-scrollable tagName='ul' content-size=_contentSize scroll-left=_scrollLeft scroll-top=_scrollTop scrollChange=(action "scrollChange") clientSizeChange=(action "clientSizeChange")}}
+<EmberNativeScrollable @tagName="ul" @content-size={{_contentSize}} @scroll-left={{_scrollLeft}} @scroll-top={{_scrollTop}} @scrollChange={{action "scrollChange"}} @clientSizeChange={{action "clientSizeChange"}}>
     <li></li>
     {{~#each _cells as |cell|~}}
       <li style={{{cell.style}}}>{{yield cell.item cell.index }}</li>
     {{~/each~}}
-{{/ember-native-scrollable}}
+</EmberNativeScrollable>

ui-v2/app/templates/components/modal-dialog.hbs

@@ -6,13 +6,13 @@
     <div>
       <header>
         <label for="modal_close">Close</label>
-        {{#yield-slot name='header'}}{{yield}}{{/yield-slot}}
+        <YieldSlot @name="header">{{yield}}</YieldSlot>
       </header>
       <div>
-        {{#yield-slot name='body'}}{{yield}}{{/yield-slot}}
+        <YieldSlot @name="body">{{yield}}</YieldSlot>
       </div>
       <footer>
-        {{#yield-slot name='actions' params=(block-params (action 'close'))}}{{yield}}{{/yield-slot}}
+        <YieldSlot @name="actions" @params={{block-params (action "close")}}>{{yield}}</YieldSlot>
       </footer>
     </div>
   </div>

ui-v2/app/templates/components/policy-form.hbs

@@ -35,14 +35,14 @@
     <label class="type-text" data-test-rules>
         <span>Rules <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a></span>
 {{#if (eq item.template '') }}
-        {{code-editor syntax='hcl' class=(if item.error.Rules 'error') name=(concat name '[Rules]') value=item.Rules onkeyup=(action 'change' (concat name '[Rules]'))}}
+        <CodeEditor @syntax="hcl" @class={{if item.error.Rules "error"}} @name={{concat name "[Rules]"}} @value={{item.Rules}} @onkeyup={{action "change" (concat name "[Rules]")}} />
         {{#if item.error.Rules}}
           <strong>{{item.error.Rules.validation}}</strong>
         {{/if}}
 {{else}}
-        {{#code-editor readonly=true name=(concat name '[Rules]') syntax='hcl' oninput=(action 'change' (concat name '[Rules]'))}}
+        <CodeEditor @readonly={{true}} @name={{concat name "[Rules]"}} @syntax="hcl" @oninput={{action "change" (concat name "[Rules]")}}>
           {{~component 'service-identity' name=item.Name~}}
-        {{/code-editor}}
+        </CodeEditor>
 {{/if}}
     </label>
     <div class="type-toggle">

ui-v2/app/templates/components/policy-selector.hbs

@@ -1,9 +1,9 @@
-{{#child-selector repo=repo dc=dc nspace=nspace type="policy" placeholder="Search for policy" items=items}}
+<ChildSelector @repo={{repo}} @dc={{dc}} @nspace={{nspace}} @type="policy" @placeholder="Search for policy" @items={{items}}>
   {{yield}}
-  {{#block-slot name='label'}}
+  <BlockSlot @name="label">
     Apply an existing policy
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='create'}}
+  <BlockSlot @name="create">
     {{#yield-slot name='trigger'}}
       {{yield}}
     {{else}}
@@ -13,13 +13,13 @@
       {{!TODO: potentially call trigger something else}}
       {{!the modal has to go here so that if you provide a slot to trigger it doesn't get rendered}}
       {{#modal-dialog data-test-policy-form onopen=(action 'open') name="new-policy-toggle"}}
-        {{#block-slot name='header'}}
+        <BlockSlot @name="header">
           <h2>New Policy</h2>
-        {{/block-slot}}
+        </BlockSlot>
-        {{#block-slot name='body'}}
+        <BlockSlot @name="body">
-          {{policy-form form=form dc=dc allowServiceIdentity=allowServiceIdentity}}
+          <PolicyForm @form={{form}} @dc={{dc}} @allowServiceIdentity={{allowServiceIdentity}} />
-        {{/block-slot}}
+        </BlockSlot>
-        {{#block-slot name='actions' as |close|}}
+        <BlockSlot @name="actions" as |close|>
           <button type="submit" {{action 'save' item items (queue (action close) (action 'reset'))}} disabled={{if (or item.isSaving item.isPristine item.isInvalid) 'disabled'}}>
             {{#if item.isSaving }}
               <div class="progress indeterminate"></div>
@@ -27,24 +27,24 @@
             <span>Create and apply</span>
           </button>
           <button type="reset" disabled={{if item.isSaving 'disabled'}} {{action (queue (action close) (action 'reset'))}}>Cancel</button>
-        {{/block-slot}}
+        </BlockSlot>
       {{/modal-dialog}}
     {{/yield-slot}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='option' as |option|}}
+  <BlockSlot @name="option" as |option|>
     {{option.Name}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='set'}}
+  <BlockSlot @name="set">
     {{#tabular-details
         data-test-policies
         onchange=(action 'loadItem')
         items=(sort-by 'CreateTime:desc' 'Name:asc' items) as |item index|
     }}
-      {{#block-slot name='header'}}
+      <BlockSlot @name="header">
         <th>Name</th>
         <th>Datacenters</th>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='row'}}
+      <BlockSlot @name="row">
         <td class={{policy/typeof item}}>
 {{#if item.ID }}
           <a href={{href-to 'dc.acls.policies.edit' item.ID}}>{{item.Name}}</a>
@@ -55,35 +55,35 @@
         <td>
           {{if (not item.isSaving) (join ', ' (policy/datacenters item)) 'Saving...'}}
         </td>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='details'}}
+      <BlockSlot @name="details">
           <label class="type-text">
             <span>Rules <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a></span>
             {{#if (eq item.template '')}}
-              {{code-editor syntax='hcl' readonly=true value=item.Rules}}
+              <CodeEditor @syntax="hcl" @readonly={{true}} @value={{item.Rules}} />
             {{else}}
-              {{#code-editor syntax='hcl' readonly=true}}
+              <CodeEditor @syntax="hcl" @readonly={{true}}>
                 {{~component 'service-identity' name=item.Name~}}
-              {{/code-editor}}
+              </CodeEditor>
             {{/if}}
           </label>
           <div>
-            {{#confirmation-dialog message='Are you sure you want to remove this policy from this token?'}}
+            <ConfirmationDialog @message="Are you sure you want to remove this policy from this token?">
-              {{#block-slot name='action' as |confirm|}}
+              <BlockSlot @name="action" as |confirm|>
                 <button data-test-delete type="button" class="type-delete" {{action confirm 'remove' item items}}>Remove</button>
-              {{/block-slot}}
+              </BlockSlot>
-              {{#block-slot name='dialog' as |execute cancel message|}}
+              <BlockSlot @name="dialog" as |execute cancel message|>
                 <p>
                   {{message}}
                 </p>
 
                 <button type="button" class="type-delete" {{action execute}}>Confirm remove</button>
                 <button type="button" class="type-cancel" {{action cancel}}>Cancel</button>
-              {{/block-slot}}
+              </BlockSlot>
-            {{/confirmation-dialog}}
+            </ConfirmationDialog>
           </div>
-      {{/block-slot}}
+      </BlockSlot>
     {{/tabular-details}}
 
-  {{/block-slot}}
+  </BlockSlot>
-{{/child-selector}}
+</ChildSelector>

ui-v2/app/templates/components/popover-menu.hbs

@@ -1,12 +1,12 @@
 {{yield (concat 'popover-menu-' guid)}}
-{{#aria-menu keyboardAccess=keyboardAccess as |change keypress ariaLabelledBy ariaControls ariaExpanded keypressClick|}}
+<AriaMenu @keyboardAccess={{keyboardAccess}} as |change keypress ariaLabelledBy ariaControls ariaExpanded keypressClick|>
-  {{#toggle-button checked=ariaExpanded onchange=(queue change (action 'change')) as |click|}}
+  <ToggleButton @checked={{ariaExpanded}} @onchange={{queue change (action "change")}} as |click|>
     <button type="button" aria-haspopup="menu" onkeydown={{keypress}} onclick={{click}} id={{ariaLabelledBy}} aria-controls={{ariaControls}}>
-      {{#yield-slot name='trigger'}}
+      <YieldSlot @name="trigger">
         {{yield}}
-      {{/yield-slot}}
+      </YieldSlot>
     </button>
-  {{/toggle-button}}
+  </ToggleButton>
   <div class={{position}}>
     <input type="checkbox" id={{concat 'popover-menu-' guid '-'}} />
     {{#each submenus as |sub|}}
@@ -19,9 +19,9 @@
     {{else}}
     {{/yield-slot}}
     <ul role="menu" id={{ariaControls}} aria-labelledby={{ariaLabelledBy}} aria-expanded={{ariaExpanded}}>
-      {{#yield-slot name='menu' params=(block-params (concat 'popover-menu-' guid '-') send keypressClick) }}
+      <YieldSlot @name="menu" @params={{block-params (concat "popover-menu-" guid "-") send keypressClick}}>
         {{yield}}
-      {{/yield-slot}}
+      </YieldSlot>
     </ul>
   </div>
-{{/aria-menu}}
+</AriaMenu>

ui-v2/app/templates/components/role-form.hbs

@@ -21,6 +21,6 @@
   {{#yield-slot name='policy' params=(block-params item)}}
     {{yield}}
   {{else}}
-    {{policy-selector dc=dc nspace=nspace items=item.Policies}}
+    <PolicySelector @dc={{dc}} @nspace={{nspace}} @items={{item.Policies}} />
   {{/yield-slot}}
 </fieldset>

ui-v2/app/templates/components/role-selector.hbs

@@ -1,33 +1,33 @@
 {{#modal-dialog data-test-role-form onclose=(action (mut state) 'role') name="new-role-toggle"}}
-  {{#block-slot name='header'}}
+  <BlockSlot @name="header">
 {{#if (eq state 'role')}}
     <h2>New Role</h2>
 {{else}}
     <h2>New Policy</h2>
 {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='body'}}
+  <BlockSlot @name="body">
 
   <input id="{{name}}_state_role" type="radio" name="{{name}}[state]" value="role" checked={{if (eq state 'role') 'checked'}} onchange={{action 'change'}} />
-    {{#role-form form=form dc=dc nspace=nspace}}
+    <RoleForm @form={{form}} @dc={{dc}} @nspace={{nspace}}>
-      {{#block-slot name='policy'}}
+      <BlockSlot @name="policy">
 
-        {{#policy-selector source=source dc=dc nspace=nspace items=item.Policies}}
+        <PolicySelector @source={{source}} @dc={{dc}} @nspace={{nspace}} @items={{item.Policies}}>
-          {{#block-slot name='trigger'}}
+          <BlockSlot @name="trigger">
             <label for="{{name}}_state_policy" data-test-create-policy class="type-dialog">
               <span>Create new policy</span>
             </label>
-          {{/block-slot}}
+          </BlockSlot>
-        {{/policy-selector}}
+        </PolicySelector>
 
-      {{/block-slot}}
+      </BlockSlot>
-    {{/role-form}}
+    </RoleForm>
 
     <input id="{{name}}_state_policy" type="radio" name="{{name}}[state]" value="policy" checked={{if (eq state 'policy') 'checked'}} onchange={{action 'change'}} />
     {{policy-form data-test-policy-form name="role[policy]" form=policyForm dc=dc}}
 
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='actions' as |close|}}
+  <BlockSlot @name="actions" as |close|>
 
 {{#if (eq state 'role')}}
     <button type="submit" {{action 'save' item items (queue (action close) (action 'reset'))}} disabled={{if (or item.isSaving item.isPristine item.isInvalid) 'disabled'}}>
@@ -47,46 +47,46 @@
     <button type="reset" disabled={{if policy.isSaving 'disabled'}} {{action (mut state) 'role'}}>Cancel</button>
 {{/if}}
 
-  {{/block-slot}}
+  </BlockSlot>
 {{/modal-dialog}}
 
-{{#child-selector repo=repo dc=dc nspace=nspace type="role" placeholder="Search for role" items=items}}
+<ChildSelector @repo={{repo}} @dc={{dc}} @nspace={{nspace}} @type="role" @placeholder="Search for role" @items={{items}}>
-  {{#block-slot name='label'}}
+  <BlockSlot @name="label">
     Apply an existing role
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='create'}}
+  <BlockSlot @name="create">
     <label class="type-dialog" for="new-role-toggle">
       <span>Create new role</span>
     </label>
 
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='option' as |option|}}
+  <BlockSlot @name="option" as |option|>
     {{option.Name}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='set'}}
+  <BlockSlot @name="set">
     {{#tabular-collection
         data-test-roles
         rows=5
         items=(sort-by 'CreateTime:desc' 'Name:asc' items) as |item index|
     }}
-      {{#block-slot name='header'}}
+      <BlockSlot @name="header">
         <th>Name</th>
         <th>Description</th>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='row'}}
+      <BlockSlot @name="row">
         <td>
           <a href={{href-to 'dc.acls.roles.edit' item.ID}}>{{item.Name}}</a>
         </td>
         <td>
           {{item.Description}}
         </td>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='actions' as |index change checked|}}
+      <BlockSlot @name="actions" as |index change checked|>
-        {{#popover-menu expanded=(if (eq checked index) true false) onchange=(action change index) keyboardAccess=false}}
+        <PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}}>
-          {{#block-slot name='trigger'}}
+          <BlockSlot @name="trigger">
             More
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='menu' as |confirm send keypressClick|}}
+          <BlockSlot @name="menu" as |confirm send keypressClick|>
               <li role="none">
                 <a role="menuitem" tabindex="-1" href={{href-to 'dc.acls.roles.edit' item.ID}}>Edit</a>
               </li>
@@ -113,9 +113,9 @@
                   </div>
                 </div>
               </li>
-          {{/block-slot}}
+          </BlockSlot>
-        {{/popover-menu}}
+        </PopoverMenu>
-      {{/block-slot}}
+      </BlockSlot>
     {{/tabular-collection}}
-  {{/block-slot}}
+  </BlockSlot>
-{{/child-selector}}
+</ChildSelector>

ui-v2/app/templates/components/stats-card.hbs

@@ -1,9 +1,9 @@
 {{yield}}
 <div class="stats-card">
   <header>
-    {{#yield-slot name='mini-stat'}}{{yield}}{{/yield-slot}}
+    <YieldSlot @name="mini-stat">{{yield}}</YieldSlot>
-    {{#yield-slot name='header'}}{{yield}}{{/yield-slot}}
+    <YieldSlot @name="header">{{yield}}</YieldSlot>
-    {{#yield-slot name='icon'}}{{yield}}{{/yield-slot}}
+    <YieldSlot @name="icon">{{yield}}</YieldSlot>
   </header>
-  {{#yield-slot name='body'}}{{yield}}{{/yield-slot}}
+  <YieldSlot @name="body">{{yield}}</YieldSlot>
 </div>

ui-v2/app/templates/components/tabular-collection.hbs

@@ -1,27 +1,27 @@
 {{yield}}
 {{#if hasCaption}}
-  <caption>{{#yield-slot name='caption'}}{{yield}}{{/yield-slot}}</caption>
+  <caption><YieldSlot @name="caption">{{yield}}</YieldSlot></caption>
 {{/if}}
   <thead>
     <tr>
-      {{#yield-slot name='header'}}{{yield}}{{/yield-slot}}
+      <YieldSlot @name="header">{{yield}}</YieldSlot>
 {{#if hasActions }}
       <th class="actions">Actions</th>
 {{/if}}
     </tr>
   </thead>
-  {{#ember-native-scrollable tagName='tbody' content-size=_contentSize scroll-left=_scrollLeft scroll-top=_scrollTop scrollChange=(action 'scrollChange') clientSizeChange=(action "clientSizeChange")}}
+  <EmberNativeScrollable @tagName="tbody" @content-size={{_contentSize}} @scroll-left={{_scrollLeft}} @scroll-top={{_scrollTop}} @scrollChange={{action "scrollChange"}} @clientSizeChange={{action "clientSizeChange"}}>
     <tr></tr>
 {{~#each _cells as |cell index|~}}
     <tr data-test-tabular-row style={{{cell.style}}} onclick={{action 'click'}}>
-      {{#yield-slot name='row'}}{{yield cell.item index}}{{/yield-slot}}
+      <YieldSlot @name="row">{{yield cell.item index}}</YieldSlot>
 {{#if hasActions }}
       <td class="actions">
-        {{#yield-slot name='actions' params=(block-params (concat cell.index) (action 'change') checked)}}
+        <YieldSlot @name="actions" @params={{block-params (concat cell.index) (action "change") checked}}>
           {{yield cell.item index}}
-        {{/yield-slot}}
+        </YieldSlot>
       </td>
 {{/if}}
     </tr>
 {{~/each~}}
-  {{/ember-native-scrollable}}
+  </EmberNativeScrollable>

ui-v2/app/templates/components/tabular-details.hbs

@@ -2,14 +2,14 @@
 <table class="with-details has-actions">
   <thead>
     <tr>
-      {{#yield-slot name='header'}}{{yield}}{{/yield-slot}}
+      <YieldSlot @name="header">{{yield}}</YieldSlot>
       <th class="actions">Actions</th>
     </tr>
   </thead>
   <tbody>
     {{#each items as |item index|}}
       <tr data-test-tabular-row onclick={{action 'click'}}>
-          {{#yield-slot name='row'}}{{yield item index}}{{/yield-slot}}
+          <YieldSlot @name="row">{{yield item index}}</YieldSlot>
           <td class="actions">
             <label for={{concat inputId index}}><span>Show details</span></label>
           </td>
@@ -20,9 +20,9 @@
           <div>
             <label for={{concat inputId index}}><span>Hide details</span></label>
             <div>
-              {{#yield-slot name='details'}}
+              <YieldSlot @name="details">
                 {{yield item index}}
-              {{/yield-slot}}
+              </YieldSlot>
             </div>
           </div>
         </td>

ui-v2/app/templates/components/token-list.hbs

@@ -7,14 +7,14 @@
       items=(sort-by 'AccessorID:asc' items) as |item index|
   }}
   {{#if caption}}
-    {{#block-slot name='caption'}}{{caption}}{{/block-slot}}
+    <BlockSlot @name="caption">{{caption}}</BlockSlot>
   {{/if}}
-      {{#block-slot name='header'}}
+      <BlockSlot @name="header">
           <th>AccessorID</th>
           <th>Scope</th>
           <th>Description</th>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='row'}}
+      <BlockSlot @name="row">
           <td data-test-token="{{item.AccessorID}}">
             <a href={{href-to 'dc.acls.tokens.edit' item.AccessorID}} target={{or target ''}}>{{truncate item.AccessorID 8 false}}</a>
           </td>
@@ -24,6 +24,6 @@
           <td>
             <p>{{item.Description}}</p>
           </td>
-      {{/block-slot}}
+      </BlockSlot>
   {{/tabular-collection}}
 {{/if}}

ui-v2/app/templates/dc.hbs

@@ -1,3 +1,3 @@
-{{#hashicorp-consul id="wrapper" permissions=permissions dcs=dcs dc=dc nspaces=nspaces nspace=nspace}}
+<HashicorpConsul @id="wrapper" @permissions={{permissions}} @dcs={{dcs}} @dc={{dc}} @nspaces={{nspaces}} @nspace={{nspace}}>
   {{outlet}}
-{{/hashicorp-consul}}
+</HashicorpConsul>

ui-v2/app/templates/dc/acls/-authorization.hbs

@@ -5,7 +5,7 @@
     <fieldset>
         <label class="type-text">
             <span>SecretID or Token</span>
-            {{input type='password' value=secret name="secret" placeholder="SecretID or Token"}}
+            <Input @type="password" @value={{secret}} @name="secret" placeholder="SecretID or Token" />
         </label>
     </fieldset>
     {{! authorize is in the routes/dc/acls.js route }}

ui-v2/app/templates/dc/acls/-form.hbs

@@ -2,7 +2,7 @@
     <fieldset>
         <label class="type-text{{if item.error.Name ' has-error'}}">
             <span>Name</span>
-            {{input value=item.Name name='name' autofocus='autofocus'}}
+            <Input @value={{item.Name}} @name="name" @autofocus="autofocus" />
         </label>
         <div role="radiogroup" class={{if item.error.Type ' has-error'}}>
             {{#each types as |type|}}
@@ -14,12 +14,12 @@
         </div>
         <label class="type-text">
             <span>Policy <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a></span>
-            {{code-editor class=(if item.error.Rules 'error') name='Rules' value=item.Rules syntax="hcl" onkeyup=(action 'change' 'Rules')}}
+            <CodeEditor @class={{if item.error.Rules "error"}} @name="Rules" @value={{item.Rules}} @syntax="hcl" @onkeyup={{action "change" "Rules"}} />
         </label>
 {{#if create }}
         <label class="type-text">
             <span>ID</span>
-            {{ input value=item.ID }}
+            <Input @value={{item.ID}} />
             <em>We'll generate a UUID if this field is left empty.</em>
         </label>
 {{/if}}
@@ -31,14 +31,14 @@
 {{/if}}
         <button type="reset" {{ action "cancel" item}}>Cancel</button>
 {{# if (and (not create) (not-eq item.ID 'anonymous')) }}
-        {{#confirmation-dialog message='Are you sure you want to delete this ACL token?'}}
+        <ConfirmationDialog @message="Are you sure you want to delete this ACL token?">
-            {{#block-slot name='action' as |confirm|}}
+            <BlockSlot @name="action" as |confirm|>
                 <button type="button" data-test-delete class="type-delete" {{action confirm 'delete' item parent}}>Delete</button>
-            {{/block-slot}}
+            </BlockSlot>
-            {{#block-slot name='dialog' as |execute cancel message|}}
+            <BlockSlot @name="dialog" as |execute cancel message|>
-            {{delete-confirmation message=message execute=execute cancel=cancel}}
+            <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
-            {{/block-slot}}
+            </BlockSlot>
-        {{/confirmation-dialog}}
+        </ConfirmationDialog>
 {{/if}}
     </div>
 </form>

ui-v2/app/templates/dc/acls/-nav.hbs

@@ -1,19 +1 @@
-{{tab-nav
+<TabNav @items={{array (hash label="Tokens" href=(href-to "dc.acls.tokens") selected=(is-href "dc.acls.tokens")) (hash label="Roles" href=(href-to "dc.acls.roles") selected=(is-href "dc.acls.roles")) (hash label="Policies" href=(href-to "dc.acls.policies") selected=(is-href "dc.acls.policies"))}} />
-    items=(array
-      (hash
-        label='Tokens'
-        href=(href-to 'dc.acls.tokens')
-        selected=(is-href 'dc.acls.tokens')
-      )
-      (hash
-        label='Roles'
-        href=(href-to 'dc.acls.roles')
-        selected=(is-href 'dc.acls.roles')
-      )
-      (hash
-        label='Policies'
-        href=(href-to 'dc.acls.policies')
-        selected=(is-href 'dc.acls.policies')
-      )
-    )
-}}

ui-v2/app/templates/dc/acls/edit.hbs

@@ -1,13 +1,13 @@
-{{#app-view class="acl edit" loading=isLoading}}
+<AppView @class="acl edit" @loading={{isLoading}}>
-    {{#block-slot name='notification' as |status type|}}
+    <BlockSlot @name="notification" as |status type|>
       {{partial 'dc/acls/notifications'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='breadcrumbs'}}
+    <BlockSlot @name="breadcrumbs">
         <ol>
             <li><a data-test-back href={{href-to 'dc.acls'}}>All Tokens</a></li>
         </ol>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
         <h1>
 {{#if item.Name }}
             {{item.Name}}
@@ -15,42 +15,42 @@
             New token
 {{/if}}
         </h1>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='actions'}}
+    <BlockSlot @name="actions">
 {{#if (not create) }}
-        {{#feedback-dialog type='inline'}}
+        <FeedbackDialog @type="inline">
-            {{#block-slot name='action' as |success error|}}
+            <BlockSlot @name="action" as |success error|>
-                {{#copy-button success=(action success) error=(action error) clipboardText=item.ID title='copy token ID to clipboard'}}
+                <CopyButton @success={{action success}} @error={{action error}} @clipboardText={{item.ID}} @title="copy token ID to clipboard">
                     Copy token ID
-                {{/copy-button}}
+                </CopyButton>
-            {{/block-slot}}
+            </BlockSlot>
-            {{#block-slot name='success' as |transition|}}
+            <BlockSlot @name="success" as |transition|>
                 <p class={{transition}}>
                     Copied token ID!
                 </p>
-            {{/block-slot}}
+            </BlockSlot>
-            {{#block-slot name='error' as |transition|}}
+            <BlockSlot @name="error" as |transition|>
                 <p class={{transition}}>
                     Sorry, something went wrong!
                 </p>
-            {{/block-slot}}
+            </BlockSlot>
-        {{/feedback-dialog}}
+        </FeedbackDialog>
         <button type="button" {{ action "clone" item }}>Clone token</button>
-        {{#confirmation-dialog message='Are you sure you want to use this ACL token?'}}
+        <ConfirmationDialog @message="Are you sure you want to use this ACL token?">
-            {{#block-slot name='action' as |confirm|}}
+            <BlockSlot @name="action" as |confirm|>
                 <button data-test-use type="button" {{ action confirm 'use' item }}>Use token</button>
-            {{/block-slot}}
+            </BlockSlot>
-            {{#block-slot name='dialog' as |execute cancel message|}}
+            <BlockSlot @name="dialog" as |execute cancel message|>
                 <p>
                     {{message}}
                 </p>
                 <button type="button" class="type-delete" {{action execute}}>Confirm Use</button>
                 <button type="button" class="type-cancel" {{action cancel}}>Cancel</button>
-            {{/block-slot}}
+            </BlockSlot>
-        {{/confirmation-dialog}}
+        </ConfirmationDialog>
 {{/if}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='content'}}
+    <BlockSlot @name="content">
         {{ partial 'dc/acls/form'}}
-    {{/block-slot}}
+    </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/acls/index.hbs

@@ -1,32 +1,30 @@
-{{#app-view class="acl list" loading=isLoading}}
+<AppView @class="acl list" @loading={{isLoading}}>
-  {{#block-slot name='notification' as |status type|}}
+  <BlockSlot @name="notification" as |status type|>
     {{partial 'dc/acls/notifications'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='header'}}
+  <BlockSlot @name="header">
     <h1>
         ACL Tokens <em>{{format-number items.length}} total</em>
     </h1>
     <label for="toolbar-toggle"></label>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='actions'}}
+  <BlockSlot @name="actions">
     <a data-test-create href="{{href-to 'dc.acls.create'}}" class="type-create">Create</a>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='toolbar'}}
+  <BlockSlot @name="toolbar">
 {{#if (gt items.length 0) }}
-    {{acl-filter searchable=searchable filters=typeFilters search=filters.s type=filters.type onchange=(action 'filter')}}
+    <AclFilter @searchable={{searchable}} @filters={{typeFilters}} @search={{filters.s}} @type={{filters.type}} @onchange={{action "filter"}} />
 {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='content'}}
+  <BlockSlot @name="content">
-    {{#changeable-set dispatcher=searchable}}
+    <ChangeableSet @dispatcher={{searchable}}>
-      {{#block-slot name='set' as |filtered|}}
+      <BlockSlot @name="set" as |filtered|>
-        {{#tabular-collection
+        <TabularCollection @items={{sort-by "Name:asc" filtered}} as |item index|>
-            items=(sort-by 'Name:asc' filtered) as |item index|
+          <BlockSlot @name="header">
-        }}
-          {{#block-slot name='header'}}
             <th>Name</th>
             <th>Type</th>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='row'}}
+          <BlockSlot @name="row">
             <td data-test-acl="{{item.Name}}">
               <a href={{href-to 'dc.acls.edit' item.ID}}>{{item.Name}}</a>
             </td>
@@ -37,18 +35,13 @@
                 <span>{{item.Type}}</span>
               {{/if}}
             </td>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='actions' as |index change checked|}}
+          <BlockSlot @name="actions" as |index change checked|>
-            {{#popover-menu
+            <PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}} @submenus={{array "logout" "use" "delete"}}>
-              expanded=(if (eq checked index) true false)
+              <BlockSlot @name="trigger">
-              onchange=(action change index)
-              keyboardAccess=false
-              submenus=(array 'logout' 'use' 'delete')
-            }}
-              {{#block-slot name='trigger'}}
                 More
-              {{/block-slot}}
+              </BlockSlot>
-              {{#block-slot name='menu' as |confirm send keypressClick|}}
+              <BlockSlot @name="menu" as |confirm send keypressClick|>
                   <li role="none">
                     <a data-test-edit role="menuitem" tabindex="-1" href={{href-to 'dc.acls.edit' item.ID}}>Edit</a>
                   </li>
@@ -129,16 +122,16 @@
                     </div>
                   </li>
       {{/if}}
-              {{/block-slot}}
+              </BlockSlot>
-            {{/popover-menu}}
+            </PopoverMenu>
-          {{/block-slot}}
+          </BlockSlot>
-        {{/tabular-collection}}
+        </TabularCollection>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='empty'}}
+      <BlockSlot @name="empty">
         <p>
           There are no ACLs.
         </p>
-      {{/block-slot}}
+      </BlockSlot>
-    {{/changeable-set}}
+    </ChangeableSet>
-  {{/block-slot}}
+  </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/acls/policies/-form.hbs

@@ -1,10 +1,10 @@
 <form>
-  {{#policy-form form=form item=item}}
+  <PolicyForm @form={{form}} @item={{item}}>
     {{!don't show template selection here, i.e. Service Identity}}
-    {{block-slot name='template'}}
+    <BlockSlot @name="template" />
-  {{/policy-form}}
+  </PolicyForm>
 {{#if (not create) }}
-  {{token-list caption="Applied to the following tokens:" items=items}}
+  <TokenList @caption="Applied to the following tokens:" @items={{items}} />
 {{/if}}
     <div>
 {{#if create }}
@@ -15,35 +15,35 @@
 {{/if}}
         <button type="reset" {{ action "cancel" item}}>Cancel</button>
 {{# if (not create) }}
-        {{#confirmation-dialog message='Are you sure you want to delete this Policy?'}}
+        <ConfirmationDialog @message="Are you sure you want to delete this Policy?">
-            {{#block-slot name='action' as |confirm|}}
+            <BlockSlot @name="action" as |confirm|>
                 <button type="button" data-test-delete class="type-delete" {{action confirm 'delete' item}}>Delete</button>
-            {{/block-slot}}
+            </BlockSlot>
-            {{#block-slot name='dialog' as |execute cancel message|}}
+            <BlockSlot @name="dialog" as |execute cancel message|>
     {{#if (gt items.length 0)}}
               {{#modal-dialog data-test-delete-modal onclose=(action cancel)}}
-                  {{#block-slot name='header'}}
+                  <BlockSlot @name="header">
                       <h2>Policy in Use</h2>
-                  {{/block-slot}}
+                  </BlockSlot>
-                  {{#block-slot name='body'}}
+                  <BlockSlot @name="body">
                     <p>
                       This Policy is currently in use. If you choose to delete this Policy, it will be removed from the following <strong>{{items.length}} Tokens</strong>:
                     </p>
-                    {{token-list items=items target='_blank'}}
+                    <TokenList @items={{items}} @target="_blank" />
                     <p>
                       This action cannot be undone. {{message}}
                     </p>
-                  {{/block-slot}}
+                  </BlockSlot>
-                  {{#block-slot name='actions' as |close|}}
+                  <BlockSlot @name="actions" as |close|>
                     <button type="button" class="type-delete" {{action execute}}>Yes, Delete</button>
                     <button type="button" class="type-cancel" {{action close}}>Cancel</button>
-                  {{/block-slot}}
+                  </BlockSlot>
                 {{/modal-dialog}}
     {{else}}
-                {{delete-confirmation message=message execute=execute cancel=cancel}}
+                <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
     {{/if}}
-            {{/block-slot}}
+            </BlockSlot>
-        {{/confirmation-dialog}}
+        </ConfirmationDialog>
 {{/if}}
     </div>
 </form>

ui-v2/app/templates/dc/acls/policies/-view.hbs

@@ -9,4 +9,4 @@
     <dd>{{item.Description}}</dd>
   </dl>
 </div>
-{{token-list caption="Applied to the following tokens:" items=items}}
+<TokenList @caption="Applied to the following tokens:" @items={{items}} />

ui-v2/app/templates/dc/acls/policies/edit.hbs

@@ -7,22 +7,22 @@
 {{else}}
   {{title 'Access Controls'}}
 {{/if}}
-{{#app-view class=(concat 'policy ' (if (or isAuthorized isEnabled) 'edit' 'list')) loading=isLoading authorized=isAuthorized enabled=isEnabled}}
+<AppView @class={{concat "policy " (if (or isAuthorized isEnabled) "edit" "list")}} @loading={{isLoading}} @authorized={{isAuthorized}} @enabled={{isEnabled}}>
-    {{#block-slot name='notification' as |status type|}}
+    <BlockSlot @name="notification" as |status type|>
       {{partial 'dc/acls/policies/notifications'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='disabled'}}
+    <BlockSlot @name="disabled">
       {{partial 'dc/acls/disabled'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='authorization'}}
+    <BlockSlot @name="authorization">
       {{partial 'dc/acls/authorization'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='breadcrumbs'}}
+    <BlockSlot @name="breadcrumbs">
         <ol>
             <li><a data-test-back href={{href-to 'dc.acls.policies'}}>All Policies</a></li>
         </ol>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
         <h1>
 {{#if isAuthorized }}
   {{#if create }}
@@ -38,12 +38,12 @@
             Access Controls
 {{/if}}
         </h1>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='content'}}
+    <BlockSlot @name="content">
 {{#if (eq (policy/typeof item) 'policy-management')}}
       {{ partial 'dc/acls/policies/view'}}
 {{else}}
       {{ partial 'dc/acls/policies/form'}}
 {{/if}}
-    {{/block-slot}}
+    </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/acls/policies/index.hbs

@@ -3,44 +3,42 @@
 {{else}}
   {{title 'Access Controls'}}
 {{/if}}
-{{#app-view class=(concat 'policy ' (if (not isAuthorized) 'edit' 'list')) loading=isLoading authorized=isAuthorized enabled=isEnabled}}
+<AppView @class={{concat "policy " (if (not isAuthorized) "edit" "list")}} @loading={{isLoading}} @authorized={{isAuthorized}} @enabled={{isEnabled}}>
-  {{#block-slot name='notification' as |status type|}}
+  <BlockSlot @name="notification" as |status type|>
     {{partial 'dc/acls/policies/notifications'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='header'}}
+  <BlockSlot @name="header">
     <h1>
       Access Controls
     </h1>
     {{#if isAuthorized }}
       {{partial 'dc/acls/nav'}}
     {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='disabled'}}
+  <BlockSlot @name="disabled">
     {{partial 'dc/acls/disabled'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='authorization'}}
+  <BlockSlot @name="authorization">
     {{partial 'dc/acls/authorization'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='actions'}}
+  <BlockSlot @name="actions">
       <a data-test-create href="{{href-to 'dc.acls.policies.create'}}" class="type-create">Create</a>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='content'}}
+  <BlockSlot @name="content">
 {{#if (gt items.length 0) }}
       <form class="filter-bar">
-        {{freetext-filter searchable=searchable value=s placeholder="Search"}}
+        <FreetextFilter @searchable={{searchable}} @value={{s}} @placeholder="Search" />
       </form>
 {{/if}}
-    {{#changeable-set dispatcher=searchable}}
+    <ChangeableSet @dispatcher={{searchable}}>
-      {{#block-slot name='set' as |filtered|}}
+      <BlockSlot @name="set" as |filtered|>
-        {{#tabular-collection
+        <TabularCollection @items={{sort-by "CreateIndex:desc" "Name:asc" filtered}} as |item index|>
-            items=(sort-by 'CreateIndex:desc' 'Name:asc' filtered) as |item index|
+          <BlockSlot @name="header">
-        }}
-          {{#block-slot name='header'}}
             <th>Name</th>
             <th>Datacenters</th>
             <th>Description</th>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='row'}}
+          <BlockSlot @name="row">
             <td data-test-policy="{{item.Name}}">
               <a href={{href-to 'dc.acls.policies.edit' item.ID}} class={{if (eq (policy/typeof item) 'policy-management') 'is-management'}}>{{item.Name}}</a>
             </td>
@@ -50,13 +48,13 @@
             <td data-test-description>
               <p>{{item.Description}}</p>
             </td>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='actions' as |index change checked|}}
+          <BlockSlot @name="actions" as |index change checked|>
-            {{#popover-menu expanded=(if (eq checked index) true false) onchange=(action change index) keyboardAccess=false}}
+            <PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}}>
-              {{#block-slot name='trigger'}}
+              <BlockSlot @name="trigger">
                 More
-              {{/block-slot}}
+              </BlockSlot>
-              {{#block-slot name='menu' as |confirm send keypressClick|}}
+              <BlockSlot @name="menu" as |confirm send keypressClick|>
 {{#if (eq (policy/typeof item) 'policy-management')}}
                 <li role="none">
                     <a role="menuitem" tabindex="-1" data-test-edit href={{href-to 'dc.acls.policies.edit' item.ID}}>View</a>
@@ -90,16 +88,16 @@
                   </div>
                 </li>
 {{/if}}
-              {{/block-slot}}
+              </BlockSlot>
-            {{/popover-menu}}
+            </PopoverMenu>
-          {{/block-slot}}
+          </BlockSlot>
-        {{/tabular-collection}}
+        </TabularCollection>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='empty'}}
+      <BlockSlot @name="empty">
         <p>
           There are no Policies.
         </p>
-      {{/block-slot}}
+      </BlockSlot>
-    {{/changeable-set}}
+    </ChangeableSet>
-  {{/block-slot}}
+  </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/acls/roles/-form.hbs

@@ -1,11 +1,11 @@
 <form>
-  {{role-form form=form item=item dc=dc nspace=nspace}}
+  <RoleForm @form={{form}} @item={{item}} @dc={{dc}} @nspace={{nspace}} />
 {{#if (and (not create) (gt items.length 0))}}
   <h2>Where is this role used?</h2>
   <p>
     We're only able to show information for the primary datacenter and the current datacenter. This list may not show every case where this role is applied.
   </p>
-  {{token-list caption="Tokens" items=items}}
+  <TokenList @caption="Tokens" @items={{items}} />
 {{/if}}
     <div>
 {{#if create }}
@@ -16,35 +16,35 @@
 {{/if}}
         <button type="reset" {{ action "cancel" item}}>Cancel</button>
 {{# if (not create) }}
-        {{#confirmation-dialog message='Are you sure you want to delete this Role?'}}
+        <ConfirmationDialog @message="Are you sure you want to delete this Role?">
-            {{#block-slot name='action' as |confirm|}}
+            <BlockSlot @name="action" as |confirm|>
                 <button type="button" data-test-delete class="type-delete" {{action confirm 'delete' item}}>Delete</button>
-            {{/block-slot}}
+            </BlockSlot>
-            {{#block-slot name='dialog' as |execute cancel message|}}
+            <BlockSlot @name="dialog" as |execute cancel message|>
     {{#if (gt items.length 0)}}
-              {{#modal-dialog onclose=(action cancel)}}
+              <ModalDialog @onclose={{action cancel}}>
-                  {{#block-slot name='header'}}
+                  <BlockSlot @name="header">
                       <h2>Role in Use</h2>
-                  {{/block-slot}}
+                  </BlockSlot>
-                  {{#block-slot name='body'}}
+                  <BlockSlot @name="body">
                     <p>
                       This Role is currently in use. If you choose to delete this Role, it will be removed from the following <strong>{{items.length}} Tokens</strong>:
                     </p>
-                    {{token-list items=items target='_blank'}}
+                    <TokenList @items={{items}} @target="_blank" />
                     <p>
                       This action cannot be undone. {{message}}
                     </p>
-                  {{/block-slot}}
+                  </BlockSlot>
-                  {{#block-slot name='actions' as |close|}}
+                  <BlockSlot @name="actions" as |close|>
                     <button type="button" class="type-delete" {{action execute}}>Yes, Delete</button>
                     <button type="button" class="type-cancel" {{action close}}>Cancel</button>
-                  {{/block-slot}}
+                  </BlockSlot>
-                {{/modal-dialog}}
+                </ModalDialog>
     {{else}}
-                {{delete-confirmation message=message execute=execute cancel=cancel}}
+                <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
     {{/if}}
-            {{/block-slot}}
+            </BlockSlot>
-        {{/confirmation-dialog}}
+        </ConfirmationDialog>
 {{/if}}
     </div>
 </form>

ui-v2/app/templates/dc/acls/roles/edit.hbs

@@ -7,22 +7,22 @@
 {{else}}
   {{title 'Access Controls'}}
 {{/if}}
-{{#app-view class=(concat 'role ' (if (or isAuthorized isEnabled) 'edit' 'list')) loading=isLoading authorized=isAuthorized enabled=isEnabled}}
+<AppView @class={{concat "role " (if (or isAuthorized isEnabled) "edit" "list")}} @loading={{isLoading}} @authorized={{isAuthorized}} @enabled={{isEnabled}}>
-    {{#block-slot name='notification' as |status type|}}
+    <BlockSlot @name="notification" as |status type|>
       {{partial 'dc/acls/roles/notifications'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='disabled'}}
+    <BlockSlot @name="disabled">
       {{partial 'dc/acls/disabled'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='authorization'}}
+    <BlockSlot @name="authorization">
       {{partial 'dc/acls/authorization'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='breadcrumbs'}}
+    <BlockSlot @name="breadcrumbs">
         <ol>
             <li><a data-test-back href={{href-to 'dc.acls.roles'}}>All Roles</a></li>
         </ol>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
         <h1>
 {{#if isAuthorized }}
   {{#if create }}
@@ -34,8 +34,8 @@
             Access Controls
 {{/if}}
         </h1>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='content'}}
+    <BlockSlot @name="content">
       {{ partial 'dc/acls/roles/form'}}
-    {{/block-slot}}
+    </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/acls/roles/index.hbs

@@ -3,44 +3,42 @@
 {{else}}
   {{title 'Access Controls'}}
 {{/if}}
-{{#app-view class=(concat 'role ' (if (not isAuthorized) 'edit' 'list')) loading=isLoading authorized=isAuthorized enabled=isEnabled}}
+<AppView @class={{concat "role " (if (not isAuthorized) "edit" "list")}} @loading={{isLoading}} @authorized={{isAuthorized}} @enabled={{isEnabled}}>
-  {{#block-slot name='notification' as |status type|}}
+  <BlockSlot @name="notification" as |status type|>
     {{partial 'dc/acls/roles/notifications'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='header'}}
+  <BlockSlot @name="header">
     <h1>
       Access Controls
     </h1>
     {{#if isAuthorized }}
       {{partial 'dc/acls/nav'}}
     {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='disabled'}}
+  <BlockSlot @name="disabled">
     {{partial 'dc/acls/disabled'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='authorization'}}
+  <BlockSlot @name="authorization">
     {{partial 'dc/acls/authorization'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='actions'}}
+  <BlockSlot @name="actions">
     <a data-test-create href="{{href-to 'dc.acls.roles.create'}}" class="type-create">Create</a>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='content'}}
+  <BlockSlot @name="content">
 {{#if (gt items.length 0) }}
     <form class="filter-bar">
-      {{freetext-filter searchable=searchable value=s placeholder="Search"}}
+      <FreetextFilter @searchable={{searchable}} @value={{s}} @placeholder="Search" />
     </form>
 {{/if}}
-    {{#changeable-set dispatcher=searchable}}
+    <ChangeableSet @dispatcher={{searchable}}>
-      {{#block-slot name='set' as |filtered|}}
+      <BlockSlot @name="set" as |filtered|>
-        {{#tabular-collection
+        <TabularCollection @items={{sort-by "CreateIndex:desc" "Name:asc" filtered}} as |item index|>
-            items=(sort-by 'CreateIndex:desc' 'Name:asc' filtered) as |item index|
+            <BlockSlot @name="header">
-        }}
-            {{#block-slot name='header'}}
               <th>Name</th>
               <th>Description</th>
               <th>Policies</th>
-            {{/block-slot}}
+            </BlockSlot>
-            {{#block-slot name='row'}}
+            <BlockSlot @name="row">
               <td data-test-role="{{item.Name}}">
                 <a href={{href-to 'dc.acls.roles.edit' item.ID}}>{{item.Name}}</a>
               </td>
@@ -52,13 +50,13 @@
                   <strong data-test-policy class={{policy/typeof item}}>{{item.Name}}</strong>
                 {{/each}}
               </td>
-            {{/block-slot}}
+            </BlockSlot>
-            {{#block-slot name='actions' as |index change checked|}}
+            <BlockSlot @name="actions" as |index change checked|>
-              {{#popover-menu expanded=(if (eq checked index) true false) onchange=(action change index) keyboardAccess=false}}
+              <PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}}>
-                {{#block-slot name='trigger'}}
+                <BlockSlot @name="trigger">
                   More
-                {{/block-slot}}
+                </BlockSlot>
-                {{#block-slot name='menu' as |confirm send keypressClick|}}
+                <BlockSlot @name="menu" as |confirm send keypressClick|>
                     <li role="none">
                       <a role="menuitem" tabindex="-1" href={{href-to 'dc.acls.roles.edit' item.ID}}>Edit</a>
                     </li>
@@ -85,16 +83,16 @@
                         </div>
                       </div>
                     </li>
-                {{/block-slot}}
+                </BlockSlot>
-              {{/popover-menu}}
+              </PopoverMenu>
-            {{/block-slot}}
+            </BlockSlot>
-        {{/tabular-collection}}
+        </TabularCollection>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='empty'}}
+      <BlockSlot @name="empty">
         <p>
           There are no Roles.
         </p>
-      {{/block-slot}}
+      </BlockSlot>
-    {{/changeable-set}}
+    </ChangeableSet>
-  {{/block-slot}}
+  </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/acls/tokens/-fieldsets-legacy.hbs

@@ -1,7 +1,7 @@
     <fieldset>
         <label class="type-text{{if item.error.Name ' has-error'}}">
             <span>Name</span>
-            {{input value=item.Description name='name' autofocus='autofocus'}}
+            <Input @value={{item.Description}} @name="name" @autofocus="autofocus" />
         </label>
 {{#if false}}
         <div role="radiogroup" class={{if item.error.Type ' has-error'}}>
@@ -15,12 +15,12 @@
 {{/if}}
         <label class="type-text">
             <span>Rules <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a></span>
-            {{code-editor class=(if item.error.Rules 'error') name='Rules' syntax='hcl' value=item.Rules onkeyup=(action 'change' 'Rules')}}
+            <CodeEditor @class={{if item.error.Rules "error"}} @name="Rules" @syntax="hcl" @value={{item.Rules}} @onkeyup={{action "change" "Rules"}} />
         </label>
 {{#if create }}
         <label class="type-text">
             <span>ID</span>
-            {{ input value=item.ID }}
+            <Input @value={{item.ID}} />
             <em>We'll generate a UUID if this field is left empty.</em>
         </label>
 {{/if}}

ui-v2/app/templates/dc/acls/tokens/-fieldsets.hbs

@@ -16,9 +16,9 @@
 </fieldset>
 <fieldset id="roles">
   <h2>Roles</h2>
-  {{role-selector dc=dc nspace=nspace items=item.Roles}}
+  <RoleSelector @dc={{dc}} @nspace={{nspace}} @items={{item.Roles}} />
 </fieldset>
 <fieldset id="policies">
   <h2>Policies</h2>
-  {{policy-selector dc=dc nspace=nspace items=item.Policies}}
+  <PolicySelector @dc={{dc}} @nspace={{nspace}} @items={{item.Policies}} />
 </fieldset>

ui-v2/app/templates/dc/acls/tokens/-form.hbs

@@ -14,14 +14,14 @@
 {{/if}}
         <button type="reset" {{ action "cancel" item}}>Cancel</button>
 {{# if (and (not create) (not (token/is-anonymous item)) (not-eq item.AccessorID token.AccessorID) ) }}
-        {{#confirmation-dialog message='Are you sure you want to delete this Token?'}}
+        <ConfirmationDialog @message="Are you sure you want to delete this Token?">
-            {{#block-slot name='action' as |confirm|}}
+            <BlockSlot @name="action" as |confirm|>
                 <button type="button" data-test-delete class="type-delete" {{action confirm 'delete' item}}>Delete</button>
-            {{/block-slot}}
+            </BlockSlot>
-            {{#block-slot name='dialog' as |execute cancel message|}}
+            <BlockSlot @name="dialog" as |execute cancel message|>
-              {{delete-confirmation message=message execute=execute cancel=cancel}}
+              <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
-            {{/block-slot}}
+            </BlockSlot>
-        {{/confirmation-dialog}}
+        </ConfirmationDialog>
 {{/if}}
     </div>
 </form>

ui-v2/app/templates/dc/acls/tokens/edit.hbs

@@ -7,22 +7,22 @@
 {{else}}
   {{title 'Access Controls'}}
 {{/if}}
-{{#app-view class=(concat 'token ' (if (or isAuthorized isEnabled) 'edit' 'list')) loading=isLoading authorized=isAuthorized enabled=isEnabled}}
+<AppView @class={{concat "token " (if (or isAuthorized isEnabled) "edit" "list")}} @loading={{isLoading}} @authorized={{isAuthorized}} @enabled={{isEnabled}}>
-    {{#block-slot name='notification' as |status type|}}
+    <BlockSlot @name="notification" as |status type|>
       {{partial 'dc/acls/tokens/notifications'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='disabled'}}
+    <BlockSlot @name="disabled">
       {{partial 'dc/acls/disabled'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='authorization'}}
+    <BlockSlot @name="authorization">
       {{partial 'dc/acls/authorization'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='breadcrumbs'}}
+    <BlockSlot @name="breadcrumbs">
         <ol>
             <li><a data-test-back href={{href-to 'dc.acls.tokens'}}>All Tokens</a></li>
         </ol>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
         <h1>
 {{#if isAuthorized }}
   {{#if create }}
@@ -34,29 +34,29 @@
             Access Controls
 {{/if}}
         </h1>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='actions'}}
+    <BlockSlot @name="actions">
 {{#if (not create)}}
   {{#if (not-eq item.AccessorID token.AccessorID)}}
-      {{#confirmation-dialog message='Are you sure you want to use this ACL token?'}}
+      <ConfirmationDialog @message="Are you sure you want to use this ACL token?">
-        {{#block-slot name='action' as |confirm|}}
+        <BlockSlot @name="action" as |confirm|>
             <button data-test-use type="button" {{ action confirm 'use' item }}>Use</button>
-        {{/block-slot}}
+        </BlockSlot>
-        {{#block-slot name='dialog' as |execute cancel message|}}
+        <BlockSlot @name="dialog" as |execute cancel message|>
           <p>
               {{message}}
           </p>
           <button type="button" class="type-delete" {{action execute}}>Confirm Use</button>
           <button type="button" class="type-cancel" {{action cancel}}>Cancel</button>
-        {{/block-slot}}
+        </BlockSlot>
-      {{/confirmation-dialog}}
+      </ConfirmationDialog>
   {{/if}}
   {{#if (not (token/is-legacy item))}}
       <button data-test-clone type="button" {{ action "clone" item }}>Duplicate</button>
   {{/if}}
 {{/if}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='content'}}
+    <BlockSlot @name="content">
         {{#if (token/is-legacy item)}}
             <p class="notice info"><strong>Update.</strong> We have upgraded our ACL system by allowing you to create reusable policies which you can then apply to tokens. Don't worry, even though this token was written in the old style, it is still valid. However, we do recommend upgrading your old tokens to the new style. Learn how in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
         {{/if}}
@@ -65,11 +65,11 @@
           <dl>
             <dt>AccessorID</dt>
             <dd>
-              {{copy-button-feedback title="Copy AccessorID to the clipboard" copy=item.AccessorID name="AccessorID"}} {{item.AccessorID}}
+              <CopyButtonFeedback @title="Copy AccessorID to the clipboard" @copy={{item.AccessorID}} @name="AccessorID" /> {{item.AccessorID}}
             </dd>
             <dt>Token</dt>
             <dd>
-              {{copy-button-feedback title="Copy SecretID to the clipboard" copy=item.SecretID name="Token"}} {{#secret-button}}{{item.SecretID}}{{/secret-button}}
+              <CopyButtonFeedback @title="Copy SecretID to the clipboard" @copy={{item.SecretID}} @name="Token" /> <SecretButton>{{item.SecretID}}</SecretButton>
             </dd>
 {{#if (and (not (token/is-legacy item)) (not create))}}
             <dt>Scope</dt>
@@ -81,5 +81,5 @@
       </div>
 {{/if}}
         {{ partial 'dc/acls/tokens/form'}}
-    {{/block-slot}}
+    </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/acls/tokens/index.hbs

@@ -3,49 +3,47 @@
 {{else}}
   {{title 'Access Controls'}}
 {{/if}}
-{{#app-view class=(concat 'token ' (if (and isEnabled (not isAuthorized)) 'edit' 'list')) loading=isLoading authorized=isAuthorized enabled=isEnabled}}
+<AppView @class={{concat "token " (if (and isEnabled (not isAuthorized)) "edit" "list")}} @loading={{isLoading}} @authorized={{isAuthorized}} @enabled={{isEnabled}}>
-  {{#block-slot name='notification' as |status type subject|}}
+  <BlockSlot @name="notification" as |status type subject|>
     {{partial 'dc/acls/tokens/notifications'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='header'}}
+  <BlockSlot @name="header">
     <h1>
       Access Controls
     </h1>
 {{#if isAuthorized }}
     {{partial 'dc/acls/nav'}}
 {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='disabled'}}
+  <BlockSlot @name="disabled">
     {{partial 'dc/acls/disabled'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='authorization'}}
+  <BlockSlot @name="authorization">
     {{partial 'dc/acls/authorization'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='actions'}}
+  <BlockSlot @name="actions">
       <a data-test-create href="{{href-to 'dc.acls.tokens.create'}}" class="type-create">Create</a>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='content'}}
+  <BlockSlot @name="content">
 {{#if (gt items.length 0) }}
     <form class="filter-bar">
-      {{freetext-filter searchable=searchable value=s placeholder="Search"}}
+      <FreetextFilter @searchable={{searchable}} @value={{s}} @placeholder="Search" />
     </form>
 {{/if}}
 {{#if (token/is-legacy items)}}
     <p data-test-notification-update class="notice info"><strong>Update.</strong> We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
 {{/if}}
-    {{#changeable-set dispatcher=searchable}}
+    <ChangeableSet @dispatcher={{searchable}}>
-      {{#block-slot name='set' as |filtered|}}
+      <BlockSlot @name="set" as |filtered|>
-        {{#tabular-collection
+        <TabularCollection @items={{sort-by "CreateTime:desc" filtered}} as |item index|>
-            items=(sort-by 'CreateTime:desc' filtered) as |item index|
+          <BlockSlot @name="header">
-        }}
-          {{#block-slot name='header'}}
               <th>Accessor ID</th>
               <th>Scope</th>
               <th>Description</th>
               <th>Roles &amp; Policies</th>
               <th>&nbsp;</th>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='row'}}
+          <BlockSlot @name="row">
               <td data-test-token="{{item.AccessorID}}" class={{if (eq item.AccessorID token.AccessorID) 'me' }}>
                   <a href={{href-to 'dc.acls.tokens.edit' item.AccessorID}}>{{truncate item.AccessorID 8 false}}</a>
               </td>
@@ -67,18 +65,13 @@
 {{#if (eq item.AccessorID token.AccessorID)}}
               <td>Your token</td>
 {{/if}}
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='actions' as |index change checked|}}
+          <BlockSlot @name="actions" as |index change checked|>
-            {{#popover-menu
+            <PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}} @submenus={{array "logout" "use" "delete"}}>
-              expanded=(if (eq checked index) true false)
+              <BlockSlot @name="trigger">
-              onchange=(action change index)
-              keyboardAccess=false
-              submenus=(array 'logout' 'use' 'delete')
-            }}
-              {{#block-slot name='trigger'}}
                 More
-              {{/block-slot}}
+              </BlockSlot>
-              {{#block-slot name='menu' as |confirm send keypressClick|}}
+              <BlockSlot @name="menu" as |confirm send keypressClick|>
                   <li role="none">
                     <a data-test-edit role="menuitem" tabindex="-1" href={{href-to 'dc.acls.tokens.edit' item.AccessorID}}>Edit</a>
                   </li>
@@ -161,16 +154,16 @@
                     </div>
                   </li>
 {{/unless}}
-              {{/block-slot}}
+              </BlockSlot>
-            {{/popover-menu}}
+            </PopoverMenu>
-          {{/block-slot}}
+          </BlockSlot>
-        {{/tabular-collection}}
+        </TabularCollection>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='empty'}}
+      <BlockSlot @name="empty">
         <p>
           There are no Tokens.
         </p>
-      {{/block-slot}}
+      </BlockSlot>
-    {{/changeable-set}}
+    </ChangeableSet>
-  {{/block-slot}}
+  </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/intentions/-form.hbs

@@ -5,43 +5,25 @@
         <h2>Source</h2>
         <label data-test-source-element class="type-text{{if item.error.SourceName ' has-error'}}">
           <span>Source Service</span>
-          {{#power-select-with-create
+          <PowerSelectWithCreate @options={{services}} @searchField="Name" @selected={{SourceName}} @searchPlaceholder="Type service name" @buildSuggestion={{action "createNewLabel" "Use a future Consul Service called '{{term}}'"}} @showCreateWhen={{action "isUnique"}} @oncreate={{action "change" "SourceName"}} @onchange={{action "change" "SourceName"}} as |service|>
-            options=services
-            searchField='Name'
-            selected=SourceName
-            searchPlaceholder='Type service name'
-            buildSuggestion=(action 'createNewLabel' "Use a future Consul Service called '{{term}}'")
-            showCreateWhen=(action "isUnique")
-            oncreate=(action 'change' 'SourceName')
-            onchange=(action 'change' 'SourceName') as |service|
-          }}
             {{#if (eq service.Name '*') }}
               * (All Services)
             {{else}}
               {{service.Name}}
             {{/if}}
-          {{/power-select-with-create}}
+          </PowerSelectWithCreate>
           <em>Search for an existing service, write in a future one, or write in any Service URI.</em>
         </label>
   {{#if (env 'CONSUL_NSPACES_ENABLED')}}
         <label data-test-source-nspace class="type-text{{if item.error.SourceNS ' has-error'}}">
           <span>Source Namespace</span>
-          {{#power-select-with-create
+          <PowerSelectWithCreate @options={{nspaces}} @searchField="Name" @selected={{SourceNS}} @searchPlaceholder="Type namespace name" @buildSuggestion={{action "createNewLabel" "Use a future Consul Namespace called '{{term}}'"}} @showCreateWhen={{action "isUnique"}} @oncreate={{action "change" "SourceNS"}} @onchange={{action "change" "SourceNS"}} as |nspace|>
-            options=nspaces
-            searchField='Name'
-            selected=SourceNS
-            searchPlaceholder='Type namespace name'
-            buildSuggestion=(action 'createNewLabel' "Use a future Consul Namespace called '{{term}}'")
-            showCreateWhen=(action "isUnique")
-            oncreate=(action 'change' 'SourceNS')
-            onchange=(action 'change' 'SourceNS') as |nspace|
-          }}
             {{#if (eq nspace.Name '*') }}
               * (All Namespaces)
             {{else}}
               {{nspace.Name}}
             {{/if}}
-          {{/power-select-with-create}}
+          </PowerSelectWithCreate>
           <em>Search for an existing namespace, write in a future one.</em>
         </label>
 {{/if}}
@@ -50,43 +32,25 @@
         <h2>Destination</h2>
         <label data-test-destination-element class="type-text{{if item.error.DestinationName ' has-error'}}">
           <span>Destination Service</span>
-          {{#power-select-with-create
+          <PowerSelectWithCreate @options={{services}} @searchField="Name" @selected={{DestinationName}} @searchPlaceholder="Type service name" @buildSuggestion={{action "createNewLabel" "Use a future Consul Service called '{{term}}'"}} @showCreateWhen={{action "isUnique"}} @oncreate={{action "change" "DestinationName"}} @onchange={{action "change" "DestinationName"}} as |service|>
-            options=services
-            searchField='Name'
-            selected=DestinationName
-            searchPlaceholder='Type service name'
-            buildSuggestion=(action 'createNewLabel' "Use a future Consul Service called '{{term}}'")
-            showCreateWhen=(action "isUnique")
-            oncreate=(action 'change' 'DestinationName')
-            onchange=(action 'change' 'DestinationName') as |service|
-          }}
             {{#if (eq service.Name '*') }}
               * (All Services)
             {{else}}
               {{service.Name}}
             {{/if}}
-          {{/power-select-with-create}}
+          </PowerSelectWithCreate>
           <em>Search for an existing service or write in a future one.</em>
         </label>
   {{#if (env 'CONSUL_NSPACES_ENABLED')}}
         <label data-test-destination-nspace class="type-text{{if item.error.DestinationNS ' has-error'}}">
           <span>Destination Namespace</span>
-          {{#power-select-with-create
+          <PowerSelectWithCreate @options={{nspaces}} @searchField="Name" @selected={{DestinationNS}} @searchPlaceholder="Type namespace name" @buildSuggestion={{action "createNewLabel" "Use a future Consul Namespace called '{{term}}'"}} @showCreateWhen={{action "isUnique"}} @oncreate={{action "change" "DestinationNS"}} @onchange={{action "change" "DestinationNS"}} as |nspace|>
-            options=nspaces
-            searchField='Name'
-            selected=DestinationNS
-            searchPlaceholder='Type namespace name'
-            buildSuggestion=(action 'createNewLabel' "Use a future Consul Namespace called '{{term}}'")
-            showCreateWhen=(action "isUnique")
-            oncreate=(action 'change' 'DestinationNS')
-            onchange=(action 'change' 'DestinationNS') as |nspace|
-          }}
             {{#if (eq nspace.Name '*') }}
               * (All Namespaces)
             {{else}}
               {{nspace.Name}}
             {{/if}}
-          {{/power-select-with-create}}
+          </PowerSelectWithCreate>
           <em>For the destination, you may choose any namespace for which you have access.</em>
         </label>
 {{/if}}
@@ -113,14 +77,14 @@
 {{/if}}
     <button type="reset" {{ action "cancel" item}}>Cancel</button>
 {{# if (and item.ID (not-eq item.ID 'anonymous')) }}
-    {{#confirmation-dialog message='Are you sure you want to delete this Intention?'}}
+    <ConfirmationDialog @message="Are you sure you want to delete this Intention?">
-      {{#block-slot name='action' as |confirm|}}
+      <BlockSlot @name="action" as |confirm|>
         <button data-test-delete type="button" class="type-delete" {{action confirm 'delete' item parent}}>Delete</button>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='dialog' as |execute cancel message|}}
+      <BlockSlot @name="dialog" as |execute cancel message|>
-        {{delete-confirmation message=message execute=execute cancel=cancel}}
+        <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
-      {{/block-slot}}
+      </BlockSlot>
-    {{/confirmation-dialog}}
+    </ConfirmationDialog>
 {{/if}}
   </div>
 </form>

ui-v2/app/templates/dc/intentions/edit.hbs

@@ -4,16 +4,16 @@
     {{title 'New Intention'}}
 {{/if}}
 
-{{#app-view class="intention edit" loading=isLoading}}
+<AppView @class="intention edit" @loading={{isLoading}}>
-    {{#block-slot name='notification' as |status type|}}
+    <BlockSlot @name="notification" as |status type|>
       {{partial 'dc/intentions/notifications'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='breadcrumbs'}}
+    <BlockSlot @name="breadcrumbs">
         <ol>
             <li><a data-test-back href={{href-to 'dc.intentions'}}>All Intentions</a></li>
         </ol>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
         <h1>
 {{#if item.ID }}
             Edit Intention
@@ -21,29 +21,29 @@
             New Intention
 {{/if}}
         </h1>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='actions'}}
+    <BlockSlot @name="actions">
 {{#if (not create) }}
-        {{#feedback-dialog type='inline'}}
+        <FeedbackDialog @type="inline">
-            {{#block-slot name='action' as |success error|}}
+            <BlockSlot @name="action" as |success error|>
-                {{#copy-button success=(action success) error=(action error) clipboardText=item.ID title='copy UUID to clipboard'}}
+                <CopyButton @success={{action success}} @error={{action error}} @clipboardText={{item.ID}} @title="copy UUID to clipboard">
                     Copy UUID
-                {{/copy-button}}
+                </CopyButton>
-            {{/block-slot}}
+            </BlockSlot>
-            {{#block-slot name='success' as |transition|}}
+            <BlockSlot @name="success" as |transition|>
                 <p class={{transition}}>
                     Copied UUID!
                 </p>
-            {{/block-slot}}
+            </BlockSlot>
-            {{#block-slot name='error' as |transition|}}
+            <BlockSlot @name="error" as |transition|>
                 <p class={{transition}}>
                     Sorry, something went wrong!
                 </p>
-            {{/block-slot}}
+            </BlockSlot>
-        {{/feedback-dialog}}
+        </FeedbackDialog>
 {{/if}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='content'}}
+    <BlockSlot @name="content">
         {{ partial 'dc/intentions/form'}}
-    {{/block-slot}}
+    </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/intentions/index.hbs

@@ -1,37 +1,33 @@
 {{title 'Intentions'}}
-{{#app-view class="intention list"}}
+<AppView @class="intention list">
-    {{#block-slot name='notification' as |status type|}}
+    <BlockSlot @name="notification" as |status type|>
       {{partial 'dc/intentions/notifications'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
         <h1>
             Intentions <em>{{format-number items.length}} total</em>
         </h1>
         <label for="toolbar-toggle"></label>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='actions'}}
+    <BlockSlot @name="actions">
         <a data-test-create href="{{href-to 'dc.intentions.create'}}" class="type-create">Create</a>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='toolbar'}}
+    <BlockSlot @name="toolbar">
 {{#if (gt items.length 0) }}
-        {{intention-filter searchable=searchable filters=actionFilters search=filters.s type=filters.action onchange=(action 'filter')}}
+        <IntentionFilter @searchable={{searchable}} @selected={{currentFilter}} @filters={{actionFilters}} @search={{filters.s}} @type={{filters.action}} @onchange={{action "filter"}} />
 {{/if}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='content'}}
+    <BlockSlot @name="content">
-        {{#changeable-set dispatcher=searchable}}
+        <ChangeableSet @dispatcher={{searchable}}>
-          {{#block-slot name='set' as |filtered|}}
+          <BlockSlot @name="set" as |filtered|>
-            {{#tabular-collection
+            <TabularCollection @route="dc.intentions.edit" @key="SourceName" @items={{filtered}} as |item index|>
-                route='dc.intentions.edit'
+                <BlockSlot @name="header">
-                key='SourceName'
-                items=filtered as |item index|
-            }}
-                {{#block-slot name='header'}}
                     <th>Source</th>
                     <th>&nbsp;</th>
                     <th>Destination</th>
                     <th>Precedence</th>
-                {{/block-slot}}
+                </BlockSlot>
-                {{#block-slot name='row'}}
+                <BlockSlot @name="row">
                     <td class="source" data-test-intention="{{item.ID}}">
                       <a href={{href-to 'dc.intentions.edit' item.ID}} data-test-intention-source="{{item.SourceName}}">
                         {{#if (eq item.SourceName '*') }}
@@ -60,13 +56,13 @@
                     <td class="precedence">
                         {{item.Precedence}}
                     </td>
-                {{/block-slot}}
+                </BlockSlot>
-                {{#block-slot name='actions' as |index change checked|}}
+                <BlockSlot @name="actions" as |index change checked|>
-                  {{#popover-menu expanded=(if (eq checked index) true false) onchange=(action change index) keyboardAccess=false}}
+                  <PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}}>
-                    {{#block-slot name='trigger'}}
+                    <BlockSlot @name="trigger">
                       More
-                    {{/block-slot}}
+                    </BlockSlot>
-                    {{#block-slot name='menu' as |confirm send keypressClick|}}
+                    <BlockSlot @name="menu" as |confirm send keypressClick|>
                         <li role="none">
                           <a role="menuitem" tabindex="-1" href={{href-to 'dc.intentions.edit' item.ID}}>Edit</a>
                         </li>
@@ -93,16 +89,16 @@
                             </div>
                           </div>
                         </li>
-                    {{/block-slot}}
+                    </BlockSlot>
-                  {{/popover-menu}}
+                  </PopoverMenu>
-                {{/block-slot}}
+                </BlockSlot>
-            {{/tabular-collection}}
+            </TabularCollection>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='empty'}}
+          <BlockSlot @name="empty">
             <p>
               There are no intentions.
             </p>
-          {{/block-slot}}
+          </BlockSlot>
-        {{/changeable-set}}
+        </ChangeableSet>
-    {{/block-slot}}
+    </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/kv/-form.hbs

@@ -18,7 +18,7 @@
             <label class="type-text{{if item.error.Value ' has-error'}}">
                 <span>Value</span>
 {{#if json}}
-                {{code-editor value=(atob item.Value) onkeyup=(action 'change' 'value')}}
+                <CodeEditor @value={{atob item.Value}} @onkeyup={{action "change" "value"}} />
 {{else}}
                 <textarea autofocus={{not create}} name="value" oninput={{action 'change'}}>{{atob item.Value}}</textarea>
 {{/if}}
@@ -33,14 +33,14 @@
 {{ else }}
     <button type="submit" {{ action "update" item parent}} disabled={{if item.isInvalid 'disabled'}}>Save</button>
     <button type="reset" {{ action "cancel" item parent}}>Cancel changes</button>
-    {{#confirmation-dialog message='Are you sure you want to delete this key?'}}
+    <ConfirmationDialog @message="Are you sure you want to delete this key?">
-        {{#block-slot name='action' as |confirm|}}
+        <BlockSlot @name="action" as |confirm|>
             <button data-test-delete type="button" class="type-delete" {{action confirm 'delete' item parent}}>Delete</button>
-        {{/block-slot}}
+        </BlockSlot>
-        {{#block-slot name='dialog' as |execute cancel message|}}
+        <BlockSlot @name="dialog" as |execute cancel message|>
-          {{delete-confirmation message=message execute=execute cancel=cancel}}
+          <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
-        {{/block-slot}}
+        </BlockSlot>
-    {{/confirmation-dialog}}
+    </ConfirmationDialog>
 {{/if}}
 </form>
 

ui-v2/app/templates/dc/kv/edit.hbs

@@ -3,11 +3,11 @@
 {{else}}
   {{title 'Edit Key/Value'}}
 {{/if}}
-{{#app-view class="kv edit" loading=isLoading}}
+<AppView @class="kv edit" @loading={{isLoading}}>
-  {{#block-slot name='notification' as |status type|}}
+  <BlockSlot @name="notification" as |status type|>
     {{partial 'dc/kv/notifications'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='breadcrumbs'}}
+  <BlockSlot @name="breadcrumbs">
     <ol>
         <li><a data-test-back href={{href-to 'dc.kv.index'}}>Key / Values</a></li>
 {{#if (not-eq parent.Key '/')}}
@@ -16,8 +16,8 @@
   {{/each}}
 {{/if}}
     </ol>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='header'}}
+  <BlockSlot @name="header">
       <h1>
 {{#if item.Key}}
         {{left-trim item.Key parent.Key}}
@@ -25,8 +25,8 @@
         New Key / Value
 {{/if}}
       </h1>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='content'}}
+  <BlockSlot @name="content">
     {{#if session}}
       <p class="notice warning">
         <strong>Warning.</strong> This KV has a lock session. You can edit KV's with lock sessions, but we recommend doing so with care, or not doing so at all. It may negatively impact the active node it's associated with. See below for more details on the Lock Session and see <a href="{{env 'CONSUL_DOCS_URL'}}/internals/sessions.html" target="_blank" rel="noopener noreferrer">our documentation</a> for more information.
@@ -64,19 +64,19 @@
           </dd>
 {{/if}}
         </dl>
-        {{#confirmation-dialog message='Are you sure you want to invalidate this session?'}}
+        <ConfirmationDialog @message="Are you sure you want to invalidate this session?">
-          {{#block-slot name='action' as |confirm|}}
+          <BlockSlot @name="action" as |confirm|>
             <button type="button" data-test-delete class="type-delete" {{action confirm "invalidateSession" session}}>Invalidate Session</button>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='dialog' as |execute cancel message|}}
+          <BlockSlot @name="dialog" as |execute cancel message|>
             <p>
               {{message}}
             </p>
             <button type="button" class="type-delete" {{action execute}}>Confirm Invalidation</button>
             <button type="button" class="type-cancel" {{action cancel}}>Cancel</button>
-          {{/block-slot}}
+          </BlockSlot>
-        {{/confirmation-dialog}}
+        </ConfirmationDialog>
       </div>
     {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/kv/index.hbs

@@ -1,9 +1,9 @@
 {{title 'Key/Value'}}
-{{#app-view class="kv list" loading=isLoading}}
+<AppView @class="kv list" @loading={{isLoading}}>
-  {{#block-slot name='notification' as |status type|}}
+  <BlockSlot @name="notification" as |status type|>
     {{partial 'dc/kv/notifications'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='breadcrumbs'}}
+  <BlockSlot @name="breadcrumbs">
     <ol>
 {{#if (not-eq parent.Key '/') }}
       <li><a href={{href-to 'dc.kv'}}>Key / Values</a></li>
@@ -12,8 +12,8 @@
       <li><a href={{href-to 'dc.kv.folder' (join '/' (append (slice 0 (add index 1) (split parent.Key '/')) ''))}}>{{breadcrumb}}</a></li>
 {{/each}}
     </ol>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='header'}}
+  <BlockSlot @name="header">
       <h1>
         {{#if (eq parent.Key '/')}}
           Key / Value
@@ -22,41 +22,39 @@
         {{/if}}
       </h1>
       <label for="toolbar-toggle"></label>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='toolbar'}}
+  <BlockSlot @name="toolbar">
 {{#if (gt items.length 0) }}
     <form class="filter-bar">
-      {{freetext-filter searchable=searchable value=s placeholder="Search by name"}}
+      <FreetextFilter @searchable={{searchable}} @value={{s}} @placeholder="Search by name" />
     </form>
 {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='actions'}}
+  <BlockSlot @name="actions">
 {{#if (not-eq parent.Key '/') }}
       <a data-test-create href="{{href-to 'dc.kv.create' parent.Key}}" class="type-create">Create</a>
 {{else}}
       <a data-test-create href="{{href-to 'dc.kv.root-create'}}" class="type-create">Create</a>
 {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='content'}}
+  <BlockSlot @name="content">
-    {{#changeable-set dispatcher=searchable}}
+    <ChangeableSet @dispatcher={{searchable}}>
-      {{#block-slot name='set' as |filtered|}}
+      <BlockSlot @name="set" as |filtered|>
-        {{#tabular-collection
+        <TabularCollection @items={{sort-by "isFolder:desc" "Key:asc" filtered}} as |item index|>
-            items=(sort-by 'isFolder:desc' 'Key:asc' filtered) as |item index|
+          <BlockSlot @name="header">
-        }}
-          {{#block-slot name='header'}}
             <th>Name</th>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='row'}}
+          <BlockSlot @name="row">
             <td data-test-kv={{item.Key}} class={{if item.isFolder 'folder' 'file' }}>
                 <a href={{href-to (if item.isFolder 'dc.kv.folder' 'dc.kv.edit') item.Key}}>{{right-trim (left-trim item.Key parent.Key) '/'}}</a>
             </td>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='actions' as |index change checked|}}
+          <BlockSlot @name="actions" as |index change checked|>
-            {{#popover-menu expanded=(if (eq checked index) true false) onchange=(action change index) keyboardAccess=false}}
+            <PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}}>
-              {{#block-slot name='trigger'}}
+              <BlockSlot @name="trigger">
                 More
-              {{/block-slot}}
+              </BlockSlot>
-              {{#block-slot name='menu' as |confirm send keypressClick|}}
+              <BlockSlot @name="menu" as |confirm send keypressClick|>
                   <li role="none">
                     <a data-test-edit role="menuitem" tabindex="-1" href={{href-to (if item.isFolder 'dc.kv.folder' 'dc.kv.edit') item.Key}}>{{if item.isFolder 'View' 'Edit'}}</a>
                   </li>
@@ -83,16 +81,16 @@
                       </div>
                     </div>
                   </li>
-              {{/block-slot}}
+              </BlockSlot>
-            {{/popover-menu}}
+            </PopoverMenu>
-          {{/block-slot}}
+          </BlockSlot>
-        {{/tabular-collection}}
+        </TabularCollection>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='empty'}}
+      <BlockSlot @name="empty">
         <p>
           There are no Key / Value pairs.
         </p>
-      {{/block-slot}}
+      </BlockSlot>
-    {{/changeable-set}}
+    </ChangeableSet>
-  {{/block-slot}}
+  </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/nodes/-healthchecks.hbs

@@ -1,5 +1,5 @@
 {{#if (gt item.Checks.length 0) }}
-  {{healthcheck-list items=item.Checks}}
+  <HealthcheckList @items={{item.Checks}} />
 {{else}}
   <p>
     This node has no health checks.

ui-v2/app/templates/dc/nodes/-rtt.hbs

@@ -18,5 +18,5 @@
         {{format-number tomography.max maximumFractionDigits=2}}ms
     </dd>
 </dl>
-{{tomography-graph tomography=tomography}}
+<TomographyGraph @tomography={{tomography}} />
 

ui-v2/app/templates/dc/nodes/-services.hbs

@@ -1,21 +1,21 @@
 {{#if (gt items.length 0) }}
   <input type="checkbox" id="toolbar-toggle" />
   <form class="filter-bar">
-    {{freetext-filter searchable=searchable value=s placeholder="Search by name/port"}}
+    <FreetextFilter @searchable={{searchable}} @value={{s}} @placeholder="Search by name/port" />
   </form>
 {{/if}}
-  {{#changeable-set dispatcher=searchable}}
+  <ChangeableSet @dispatcher={{searchable}}>
-    {{#block-slot name='set' as |filtered|}}
+    <BlockSlot @name="set" as |filtered|>
       {{#tabular-collection
           data-test-services
           items=filtered as |item index|
       }}
-          {{#block-slot name='header'}}
+          <BlockSlot @name="header">
               <th>Service</th>
               <th>Port</th>
               <th>Tags</th>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='row'}}
+          <BlockSlot @name="row">
               <td data-test-service-name="{{item.Service}}">
                 <a href={{href-to 'dc.services.show' item.Service}}>
               {{#let (service/external-source item) as |externalSource| }}
@@ -32,14 +32,14 @@
                   {{item.Port}}
               </td>
               <td data-test-service-tags>
-                {{tag-list items=item.Tags}}
+                <TagList @items={{item.Tags}} />
               </td>
-          {{/block-slot}}
+          </BlockSlot>
       {{/tabular-collection}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='empty'}}
+    <BlockSlot @name="empty">
       <p>
         There are no services.
       </p>
-    {{/block-slot}}
+    </BlockSlot>
-  {{/changeable-set}}
+  </ChangeableSet>

ui-v2/app/templates/dc/nodes/-sessions.hbs

@@ -4,7 +4,7 @@
         class="sessions"
         items=sessions as |item index|
     }}
-        {{#block-slot name='header'}}
+        <BlockSlot @name="header">
             <th>Name</th>
             <th>ID</th>
             <th>Delay</th>
@@ -12,8 +12,8 @@
             <th>Behavior</th>
             <th>Checks</th>
             <th>&nbsp;</th>
-        {{/block-slot}}
+        </BlockSlot>
-        {{#block-slot name='row'}}
+        <BlockSlot @name="row">
                 <td>
                     {{item.Name}}
                 </td>
@@ -35,20 +35,20 @@
 {{/if}}
                 </td>
                 <td>
-                    {{#confirmation-dialog message='Are you sure you want to invalidate this session?'}}
+                    <ConfirmationDialog @message="Are you sure you want to invalidate this session?">
-                        {{#block-slot name='action' as |confirm|}}
+                        <BlockSlot @name="action" as |confirm|>
                             <button data-test-delete type="button" class="type-delete" {{action confirm 'invalidateSession' item}}>Invalidate</button>
-                        {{/block-slot}}
+                        </BlockSlot>
-                        {{#block-slot name='dialog' as |execute cancel message|}}
+                        <BlockSlot @name="dialog" as |execute cancel message|>
                             <p>
                                 {{message}}
                             </p>
                             <button type="button" class="type-delete" {{action execute}}>Confirm Invalidate</button>
                             <button type="button" class="type-cancel" {{ action cancel}}>Cancel</button>
-                        {{/block-slot}}
+                        </BlockSlot>
-                    {{/confirmation-dialog}}
+                    </ConfirmationDialog>
                 </td>
-        {{/block-slot}}
+        </BlockSlot>
     {{/tabular-collection}}
 {{else}}
     <p>

ui-v2/app/templates/dc/nodes/index.hbs

@@ -1,48 +1,41 @@
 {{title 'Nodes'}}
-{{#app-view class="node list"}}
+<AppView @class="node list">
-  {{#block-slot name='header'}}
+  <BlockSlot @name="header">
     <h1>
       Nodes <em>{{format-number items.length}} total</em>
     </h1>
     <label for="toolbar-toggle"></label>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='toolbar'}}
+  <BlockSlot @name="toolbar">
 {{#if (gt items.length 0) }}
-    {{catalog-filter searchable=(array searchableHealthy searchableUnhealthy) search=s status=filters.status onchange=(action 'filter')}}
+    <CatalogFilter @searchable={{array searchableHealthy searchableUnhealthy}} @search={{s}} @status={{filters.status}} @onchange={{action "filter"}} />
 {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='content'}}
+  <BlockSlot @name="content">
 {{#if (gt unhealthy.length 0) }}
       <div class="unhealthy">
         <h2>Unhealthy Nodes</h2>
         <div>
           {{! think about 2 differing views here }}
           <ul>
-            {{#changeable-set dispatcher=searchableUnhealthy}}
+            <ChangeableSet @dispatcher={{searchableUnhealthy}}>
-              {{#block-slot name='set' as |unhealthy|}}
+              <BlockSlot @name="set" as |unhealthy|>
                 {{#each unhealthy as |item|}}
-                  {{#healthchecked-resource
+                  <HealthcheckedResource @tagName="li" @data-test-node={{item.Node}} @href={{href-to "dc.nodes.show" item.Node}} @name={{item.Node}} @address={{item.Address}} @checks={{item.Checks}}>
-                      tagName='li'
+                    <BlockSlot @name="icon">
-                      data-test-node=item.Node
-                      href=(href-to 'dc.nodes.show' item.Node)
-                      name=item.Node
-                      address=item.Address
-                      checks=item.Checks
-                  }}
-                    {{#block-slot name='icon'}}
                       {{#if (eq item.Address leader.Address)}}
                         <span data-test-leader={{leader.Address}} data-tooltip="Leader">Leader</span>
                       {{/if}}
-                    {{/block-slot}}
+                    </BlockSlot>
-                  {{/healthchecked-resource}}
+                  </HealthcheckedResource>
                 {{/each}}
-              {{/block-slot}}
+              </BlockSlot>
-              {{#block-slot name='empty'}}
+              <BlockSlot @name="empty">
                 <p>
                   There are no unhealthy nodes for that search.
                 </p>
-              {{/block-slot}}
+              </BlockSlot>
-            {{/changeable-set}}
+            </ChangeableSet>
           </ul>
         </div>
       </div>
@@ -50,30 +43,24 @@
 {{#if (gt healthy.length 0) }}
       <div class="healthy">
         <h2>Healthy Nodes</h2>
-        {{#changeable-set dispatcher=searchableHealthy}}
+        <ChangeableSet @dispatcher={{searchableHealthy}}>
-          {{#block-slot name='set' as |healthy|}}
+          <BlockSlot @name="set" as |healthy|>
-            {{#list-collection cellHeight=92 items=healthy as |item index|}}
+            <ListCollection @cellHeight={{92}} @items={{healthy}} as |item index|>
-              {{#healthchecked-resource
+              <HealthcheckedResource @data-test-node={{item.Node}} @href={{href-to "dc.nodes.show" item.Node}} @name={{item.Node}} @address={{item.Address}} @checks={{item.Checks}}>
-                  data-test-node=item.Node
+                <BlockSlot @name="icon">
-                  href=(href-to 'dc.nodes.show' item.Node)
-                  name=item.Node
-                  address=item.Address
-                  checks=item.Checks
-              }}
-                {{#block-slot name='icon'}}
                   {{#if (eq item.Address leader.Address)}}
                     <span data-test-leader={{leader.Address}} data-tooltip="Leader">Leader</span>
                   {{/if}}
-                {{/block-slot}}
+                </BlockSlot>
-              {{/healthchecked-resource}}
+              </HealthcheckedResource>
-            {{/list-collection}}
+            </ListCollection>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='empty'}}
+          <BlockSlot @name="empty">
             <p>
               There are no healthy nodes for that search.
             </p>
-          {{/block-slot}}
+          </BlockSlot>
-        {{/changeable-set}}
+        </ChangeableSet>
       </div>
 {{/if}}
 {{#if (and (eq healthy.length 0) (eq unhealthy.length 0)) }}
@@ -81,5 +68,5 @@
           There are no nodes.
       </p>
 {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/nodes/metadata.hbs

@@ -4,11 +4,11 @@
         data-test-metadata
         items=meta as |item index|
     }}
-        {{#block-slot name='header'}}
+        <BlockSlot @name="header">
             <th>Key</th>
             <th>Value</th>
-        {{/block-slot}}
+        </BlockSlot>
-        {{#block-slot name='row'}}
+        <BlockSlot @name="row">
             <td>
               <span>
                 {{object-at 0 item}}
@@ -17,7 +17,7 @@
             <td>
               <span>{{object-at 1 item}}</span>
             </td>
-        {{/block-slot}}
+        </BlockSlot>
     {{/tabular-collection}}
   {{/with}}
 {{else}}

ui-v2/app/templates/dc/nodes/show.hbs

@@ -1,52 +1,41 @@
 {{title item.Node}}
-{{#app-view class="node show"}}
+<AppView @class="node show">
-    {{#block-slot name='notification' as |status type|}}
+    <BlockSlot @name="notification" as |status type|>
       {{!TODO: Move sessions to its own folder within nodes }}
       {{partial 'dc/nodes/notifications'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='breadcrumbs'}}
+    <BlockSlot @name="breadcrumbs">
         <ol>
             <li><a data-test-back href={{href-to 'dc.nodes'}}>All Nodes</a></li>
         </ol>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
         <h1>
           {{ item.Node }}
         </h1>
         <label for="toolbar-toggle"></label>
-        {{tab-nav
+        <TabNav @items={{compact (array "Health Checks" "Services" (if tomography.distances "Round Trip Time" "") "Lock Sessions" "Meta Data")}} @selected={{selectedTab}} />
-            items=(compact
+    </BlockSlot>
-              (array
+    <BlockSlot @name="actions">
-                             'Health Checks'
+      <FeedbackDialog @type="inline">
-                             'Services'
+          <BlockSlot @name="action" as |success error|>
-    (if tomography.distances 'Round Trip Time' '')
+              <CopyButton @success={{action success}} @error={{action error}} @clipboardText={{item.Address}} @title="copy IP address to clipboard">
-                             'Lock Sessions'
-                             'Meta Data'
-              )
-            )
-            selected=selectedTab
-        }}
-    {{/block-slot}}
-    {{#block-slot name='actions'}}
-      {{#feedback-dialog type='inline'}}
-          {{#block-slot name='action' as |success error|}}
-              {{#copy-button success=(action success) error=(action error) clipboardText=item.Address title='copy IP address to clipboard'}}
                   {{item.Address}}
-              {{/copy-button}}
+              </CopyButton>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='success' as |transition|}}
+          <BlockSlot @name="success" as |transition|>
               <p class={{transition}}>
                   Copied IP Address!
               </p>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='error' as |transition|}}
+          <BlockSlot @name="error" as |transition|>
               <p class={{transition}}>
                   Sorry, something went wrong!
               </p>
-          {{/block-slot}}
+          </BlockSlot>
-      {{/feedback-dialog}}
+      </FeedbackDialog>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='content'}}
+    <BlockSlot @name="content">
         {{#each
             (compact
                 (array
@@ -58,9 +47,11 @@
                 )
             ) key="id" as |panel|
         }}
-            {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action "change")}}
+    {{#if (or (not-eq panel.id 'round-trip-time') (gt tomography.distances.length 0)) }}
+            <TabSection @id={{panel.id}} @selected={{eq (if selectedTab selectedTab "") panel.id}} @onchange={{action "change"}}>
                 {{partial panel.partial}}
-            {{/tab-section}}
+            </TabSection>
+    {{/if}}
         {{/each}}
-    {{/block-slot}}
+    </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/nspaces/-form.hbs

@@ -23,14 +23,14 @@
     <p>
       By adding roles to this namespaces, you will apply them to all tokens created within this namespace.
     </p>
-    {{role-selector dc=dc nspace='default' items=item.ACLs.RoleDefaults}}
+    <RoleSelector @dc={{dc}} @nspace="default" @items={{item.ACLs.RoleDefaults}} />
   </fieldset>
   <fieldset id="policies">
     <h2>Policies</h2>
     <p>
       By adding policies to this namespaces, you will apply them to all tokens created within this namespace.
     </p>
-    {{policy-selector dc=dc nspace='default' allowServiceIdentity=false items=item.ACLs.PolicyDefaults}}
+    <PolicySelector @dc={{dc}} @nspace="default" @allowServiceIdentity={{false}} @items={{item.ACLs.PolicyDefaults}} />
   </fieldset>
 {{/if}}
   <div>
@@ -41,14 +41,14 @@
 {{/if}}
       <button type="reset" {{ action "cancel" item}}>Cancel</button>
 {{# if (and (not create) (not-eq item.Name 'default')) }}
-      {{#confirmation-dialog message='Are you sure you want to delete this Namespace?'}}
+      <ConfirmationDialog @message="Are you sure you want to delete this Namespace?">
-          {{#block-slot name='action' as |confirm|}}
+          <BlockSlot @name="action" as |confirm|>
               <button data-test-delete type="button" class="type-delete" {{action confirm 'delete' item parent}}>Delete</button>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='dialog' as |execute cancel message|}}
+          <BlockSlot @name="dialog" as |execute cancel message|>
-            {{delete-confirmation message=message execute=execute cancel=cancel}}
+            <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
-          {{/block-slot}}
+          </BlockSlot>
-      {{/confirmation-dialog}}
+      </ConfirmationDialog>
 {{/if}}
   </div>
 </form>

ui-v2/app/templates/dc/nspaces/edit.hbs

@@ -3,16 +3,16 @@
 {{else}}
   {{title 'Edit Namespace'}}
 {{/if}}
-{{#app-view class="nspace edit" loading=isLoading}}
+<AppView @class="nspace edit" @loading={{isLoading}}>
-  {{#block-slot name='notification' as |status type|}}
+  <BlockSlot @name="notification" as |status type|>
     {{partial 'dc/nspaces/notifications'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='breadcrumbs'}}
+  <BlockSlot @name="breadcrumbs">
     <ol>
         <li><a data-test-back href={{href-to 'dc.nspaces'}}>All Namespaces</a></li>
     </ol>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='header'}}
+  <BlockSlot @name="header">
     <h1>
 {{#if create }}
       New Namespace
@@ -20,10 +20,10 @@
       Edit {{item.Name}}
 {{/if}}
     </h1>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='actions'}}
+  <BlockSlot @name="actions">
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='content'}}
+  <BlockSlot @name="content">
     {{ partial 'dc/nspaces/form'}}
-  {{/block-slot}}
+  </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/nspaces/index.hbs

@@ -1,35 +1,33 @@
 {{title 'Namespaces'}}
-{{#app-view class="nspace list" loading=isLoading}}
+<AppView @class="nspace list" @loading={{isLoading}}>
-  {{#block-slot name='notification' as |status type subject|}}
+  <BlockSlot @name="notification" as |status type subject|>
     {{partial 'dc/nspaces/notifications'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='header'}}
+  <BlockSlot @name="header">
     <h1>
       Namespaces
     </h1>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='actions'}}
+  <BlockSlot @name="actions">
       <a data-test-create href="{{href-to 'dc.nspaces.create'}}" class="type-create">Create</a>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='content'}}
+  <BlockSlot @name="content">
 {{#if (gt items.length 0) }}
     <form class="filter-bar">
-      {{freetext-filter searchable=searchable value=s placeholder="Search"}}
+      <FreetextFilter @searchable={{searchable}} @value={{s}} @placeholder="Search" />
     </form>
 {{/if}}
-    {{#changeable-set dispatcher=searchable}}
+    <ChangeableSet @dispatcher={{searchable}}>
-      {{#block-slot name='set' as |filtered|}}
+      <BlockSlot @name="set" as |filtered|>
-        {{#tabular-collection
+        <TabularCollection @items={{filtered}} as |item index|>
-            items=filtered as |item index|
+          <BlockSlot @name="header">
-        }}
-          {{#block-slot name='header'}}
               <th>Name</th>
               <th>Description</th>
 {{#if (env 'CONSUL_ACLS_ENABLED')}}
               <th>Roles &amp; Policies</th>
 {{/if}}
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='row'}}
+          <BlockSlot @name="row">
 {{#if item.DeletedAt}}
               <td class="no-actions" colspan="3">
                 <p>
@@ -51,13 +49,13 @@
               </td>
   {{/if}}
 {{/if}}
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='actions' as |index change checked|}}
+          <BlockSlot @name="actions" as |index change checked|>
-            {{#popover-menu expanded=(if (eq checked index) true false) onchange=(action change index) keyboardAccess=false}}
+            <PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}}>
-              {{#block-slot name='trigger'}}
+              <BlockSlot @name="trigger">
                 More
-              {{/block-slot}}
+              </BlockSlot>
-              {{#block-slot name='menu' as |confirm send keypressClick|}}
+              <BlockSlot @name="menu" as |confirm send keypressClick|>
                   <li role="none">
                     <a data-test-edit role="menuitem" tabindex="-1" href={{href-to 'dc.nspaces.edit' item.Name}}>Edit</a>
                   </li>
@@ -86,16 +84,16 @@
                     </div>
                   </li>
 {{/if}}
-              {{/block-slot}}
+              </BlockSlot>
-            {{/popover-menu}}
+            </PopoverMenu>
-          {{/block-slot}}
+          </BlockSlot>
-        {{/tabular-collection}}
+        </TabularCollection>
-      {{/block-slot}}
+      </BlockSlot>
-      {{#block-slot name='empty'}}
+      <BlockSlot @name="empty">
         <p>
           There are no Namespaces.
         </p>
-      {{/block-slot}}
+      </BlockSlot>
-    {{/changeable-set}}
+    </ChangeableSet>
-  {{/block-slot}}
+  </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/services/-addresses.hbs

@@ -3,11 +3,11 @@
     data-test-addresses
     items=(object-entries item.TaggedAddresses) as |taggedAddress index|
 }}
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
       <th>Tag</th>
       <th>Address</th>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='row'}}
+    <BlockSlot @name="row">
 {{#with (object-at 1 taggedAddress) as |address|}}
       <td>
         {{object-at 0 taggedAddress}}{{#if (and (eq address.Address item.Address) (eq address.Port item.Port))}}&nbsp;<em data-test-address-default>(default)</em>{{/if}}
@@ -16,7 +16,7 @@
         {{address.Address}}:{{address.Port}}
       </td>
 {{/with}}
-    {{/block-slot}}
+    </BlockSlot>
 {{/tabular-collection}}
 {{else}}
   <p>

ui-v2/app/templates/dc/services/-exposedpaths.hbs

@@ -6,14 +6,14 @@
     class="exposedpaths"
     items=item.Proxy.Expose.Paths as |path index|
 }}
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
       <th>Path</th>
       <th>Protocol</th>
       <th>Listener port</th>
       <th>Local path port</th>
       <th>Combined address<span><em role="tooltip">Service address, listener port, and path all combined into one URL.</em></span></th>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='row'}}
+    <BlockSlot @name="row">
       <td>
         <span>{{path.Path}}</span>
       </td>
@@ -29,5 +29,5 @@
       <td>
         <span data-test-combined-address>{{item.Address}}:{{path.ListenerPort}}{{path.Path}}</span>
       </td>
-    {{/block-slot}}
+    </BlockSlot>
 {{/tabular-collection}}

ui-v2/app/templates/dc/services/-instances.hbs

@@ -1,23 +1,23 @@
 {{#if (gt items.length 0) }}
   <input type="checkbox" id="toolbar-toggle" />
   <form class="filter-bar">
-    {{freetext-filter searchable=searchable value=s placeholder="Search"}}
+    <FreetextFilter @searchable={{searchable}} @value={{s}} @placeholder="Search" />
   </form>
 {{/if}}
-  {{#changeable-set dispatcher=searchable}}
+  <ChangeableSet @dispatcher={{searchable}}>
-    {{#block-slot name='set' as |filtered|}}
+    <BlockSlot @name="set" as |filtered|>
       {{#tabular-collection
           data-test-instances
           items=filtered as |item index|
       }}
-          {{#block-slot name='header'}}
+          <BlockSlot @name="header">
             <th>ID</th>
             <th>Node</th>
             <th>Address</th>
             <th>Node Checks</th>
             <th>Service Checks</th>
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='row'}}
+          <BlockSlot @name="row">
             <td data-test-id={{item.Service.ID}}>
               <a href={{href-to 'dc.services.instance' item.Service.Service item.Node.Node (or item.Service.ID item.Service.Service)}}>
             {{#let (service/external-source item.Service) as |externalSource| }}
@@ -38,24 +38,20 @@
             </td>
             <td>
               {{#with (reject-by 'ServiceID' '' item.Checks) as |checks|}}
-                {{healthcheck-info
+                <HealthcheckInfo @passing={{filter-by "Status" "passing" checks}} @warning={{filter-by "Status" "warning" checks}} @critical={{filter-by "Status" "critical" checks}} />
-                  passing=(filter-by 'Status' 'passing' checks) warning=(filter-by 'Status' 'warning' checks) critical=(filter-by 'Status' 'critical' checks)
-                }}
               {{/with}}
             </td>
             <td>
               {{#with (filter-by 'ServiceID' '' item.Checks) as |checks|}}
-                {{healthcheck-info
+                <HealthcheckInfo @passing={{filter-by "Status" "passing" checks}} @warning={{filter-by "Status" "warning" checks}} @critical={{filter-by "Status" "critical" checks}} />
-                  passing=(filter-by 'Status' 'passing' checks) warning=(filter-by 'Status' 'warning' checks) critical=(filter-by 'Status' 'critical' checks)
-                }}
               {{/with}}
             </td>
-          {{/block-slot}}
+          </BlockSlot>
       {{/tabular-collection}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='empty'}}
+    <BlockSlot @name="empty">
       <p>
         There are no services.
       </p>
-    {{/block-slot}}
+    </BlockSlot>
-  {{/changeable-set}}
+  </ChangeableSet>

ui-v2/app/templates/dc/services/-nodechecks.hbs

@@ -1,5 +1,5 @@
 {{#if (gt item.NodeChecks.length 0) }}
-  {{healthcheck-list items=item.NodeChecks}}
+  <HealthcheckList @items={{item.NodeChecks}} />
 {{else}}
   <p>
     This instance has no node health checks.

ui-v2/app/templates/dc/services/-routing.hbs

@@ -1 +1 @@
-{{discovery-chain chain=chain.Chain}}
+<DiscoveryChain @chain={{chain.Chain}} />

ui-v2/app/templates/dc/services/-servicechecks.hbs

@@ -1,5 +1,5 @@
 {{#if (gt item.ServiceChecks.length 0) }}
-  {{healthcheck-list items=item.ServiceChecks exposed=proxy.ServiceProxy.Expose.Checks}}
+  <HealthcheckList @items={{item.ServiceChecks}} @exposed={{proxy.ServiceProxy.Expose.Checks}} />
 {{else}}
   <p>
     This instance has no service health checks.

ui-v2/app/templates/dc/services/-tags.hbs

@@ -1,5 +1,5 @@
 {{#if (gt item.Tags.length 0) }}
-{{tag-list items=item.Tags}}
+<TagList @items={{item.Tags}} />
 {{else}}
   <p>
     There are no tags.

ui-v2/app/templates/dc/services/-upstreams.hbs

@@ -3,13 +3,13 @@
     data-test-upstreams
     items=item.Proxy.Upstreams as |item index|
 }}
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
       <th>Upstream</th>
       <th>Datacenter</th>
       <th>Type</th>
       <th>Local Bind Address</th>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='row'}}
+    <BlockSlot @name="row">
       <td>
         <a data-test-destination-name>
           {{item.DestinationName}}
@@ -30,7 +30,7 @@
       <td data-test-local-bind-address>
         {{item.LocalBindAddress}}:{{item.LocalBindPort}}
       </td>
-    {{/block-slot}}
+    </BlockSlot>
 {{/tabular-collection}}
 {{else}}
   <p>

ui-v2/app/templates/dc/services/index.hbs

@@ -1,35 +1,30 @@
 {{title 'Services'}}
-{{#app-view class="service list"}}
+<AppView @class="service list">
-    {{#block-slot name='notification' as |status type|}}
+    <BlockSlot @name="notification" as |status type|>
       {{partial 'dc/services/notifications'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
         <h1>
             Services <em>{{format-number items.length}} total</em>
         </h1>
         <label for="toolbar-toggle"></label>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='toolbar'}}
+    <BlockSlot @name="toolbar">
 {{#if (gt items.length 0) }}
-      {{phrase-editor
+      <PhraseEditor @placeholder="service:name tag:name status:critical search-term" @value={{slice 0 terms.length terms}} @onchange={{action (mut terms) value='target.value'}} @searchable={{searchable}} />
-        placeholder='service:name tag:name status:critical search-term'
-        value=(slice 0 terms.length terms)
-        onchange=(action (mut terms) value='target.value')
-        searchable=searchable
-      }}
 {{/if}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='content'}}
+    <BlockSlot @name="content">
-        {{#changeable-set dispatcher=searchable}}
+        <ChangeableSet @dispatcher={{searchable}}>
-          {{#block-slot name='set' as |filtered|}}
+          <BlockSlot @name="set" as |filtered|>
-            {{consul-service-list routeName="dc.services.show" items=filtered}}
+            <ConsulServiceList @routeName="dc.services.show" @items={{filtered}} />
-          {{/block-slot}}
+          </BlockSlot>
-          {{#block-slot name='empty'}}
+          <BlockSlot @name="empty">
             <p>
               There are no services.
             </p>
-          {{/block-slot}}
+          </BlockSlot>
-        {{/changeable-set}}
+        </ChangeableSet>
-    {{/block-slot}}
+    </BlockSlot>
-{{/app-view}}
+</AppView>
 

ui-v2/app/templates/dc/services/instance.hbs

@@ -1,16 +1,16 @@
 {{title item.ID}}
-{{#app-view class="instance show"}}
+<AppView @class="instance show">
-    {{#block-slot name='notification' as |status type|}}
+    <BlockSlot @name="notification" as |status type|>
       {{partial 'dc/services/notifications'}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='breadcrumbs'}}
+    <BlockSlot @name="breadcrumbs">
         <ol>
             <li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
             <li><a data-test-back href={{href-to 'dc.services.show'}}>Service ({{item.Service}})</a></li>
             <li><strong>Instance</strong></li>
         </ol>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
       <h1>
         {{ item.ID }}
 {{#let (service/external-source item) as |externalSource| }}
@@ -60,32 +60,9 @@
       </dl>
   {{/if}}
 {{/if}}
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='content'}}
+    <BlockSlot @name="content">
-        {{tab-nav
+        <TabNav @items={{compact (array "Service Checks" "Node Checks" (if (eq item.Kind "connect-proxy") "Upstreams" "") (if (and (eq item.Kind "connect-proxy") (gt item.Proxy.Expose.Paths.length 0)) "Exposed Paths" "") (if (eq item.Kind "mesh-gateway") "Addresses" "") "Tags" "Meta Data")}} @selected={{selectedTab}} />
-            items=(compact
-              (array
-                'Service Checks'
-                'Node Checks'
-(if
-  (eq item.Kind 'connect-proxy')
-                'Upstreams' ''
-)
-(if
-  (and (eq item.Kind 'connect-proxy') (gt item.Proxy.Expose.Paths.length 0))
-                'Exposed Paths' ''
-)
-(if
-  (eq item.Kind 'mesh-gateway')
-                'Addresses' ''
-)
-                'Tags'
-                'Meta Data'
-              )
-            )
-            selected=selectedTab
-        }}
-
         {{#each
             (compact
                 (array
@@ -108,9 +85,9 @@
                 )
             ) key="id" as |panel|
         }}
-            {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action "change")}}
+            <TabSection @id={{panel.id}} @selected={{eq (if selectedTab selectedTab "") panel.id}} @onchange={{action "change"}}>
                 {{partial panel.partial}}
-            {{/tab-section}}
+            </TabSection>
         {{/each}}
-    {{/block-slot}}
+    </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/dc/services/metadata.hbs

@@ -4,11 +4,11 @@
         data-test-metadata
         items=meta as |item index|
     }}
-        {{#block-slot name='header'}}
+        <BlockSlot @name="header">
             <th>Key</th>
             <th>Value</th>
-        {{/block-slot}}
+        </BlockSlot>
-        {{#block-slot name='row'}}
+        <BlockSlot @name="row">
             <td>
               <span>
                 {{object-at 0 item}}
@@ -17,7 +17,7 @@
             <td>
               <span>{{object-at 1 item}}</span>
             </td>
-        {{/block-slot}}
+        </BlockSlot>
     {{/tabular-collection}}
   {{/with}}
 {{else}}

ui-v2/app/templates/dc/services/show.hbs

@@ -1,14 +1,14 @@
 {{title item.Service.Service}}
-{{#app-view class="service show"}}
+<AppView @class="service show">
-  {{#block-slot name='notification' as |status type|}}
+  <BlockSlot @name="notification" as |status type|>
     {{partial 'dc/services/notifications'}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='breadcrumbs'}}
+  <BlockSlot @name="breadcrumbs">
     <ol>
         <li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
     </ol>
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='header'}}
+  <BlockSlot @name="header">
     <h1>
       {{item.Service.Service}}
 {{#let (service/external-source item.Service) as |externalSource| }}
@@ -23,23 +23,14 @@
 {{/if}}
     </h1>
     <label for="toolbar-toggle"></label>
-    {{tab-nav
+    <TabNav @items={{compact (array "Instances" (if (not-eq chain ) "Routing" "") "Tags")}} @selected={{selectedTab}} />
-      items=(compact
+  </BlockSlot>
-        (array
+  <BlockSlot @name="actions">
-                        'Instances'
-(if (not-eq chain null) 'Routing' '')
-                        'Tags'
-        )
-      )
-      selected=selectedTab
-    }}
-  {{/block-slot}}
-  {{#block-slot name='actions'}}
     {{#if urls.service}}
       {{#templated-anchor data-test-dashboard-anchor href=urls.service vars=(hash Datacenter=dc Service=(hash Name=item.Service.Service)) rel="external"}}Open Dashboard{{/templated-anchor}}
     {{/if}}
-  {{/block-slot}}
+  </BlockSlot>
-  {{#block-slot name='content'}}
+  <BlockSlot @name="content">
     {{#each
       (compact
         (array
@@ -49,9 +40,9 @@
         )
       ) key="id" as |panel|
     }}
-        {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action 'change')}}
+        <TabSection @id={{panel.id}} @selected={{eq (if selectedTab selectedTab "") panel.id}} @onchange={{action "change"}}>
           {{partial panel.partial}}
-        {{/tab-section}}
+        </TabSection>
     {{/each}}
-  {{/block-slot}}
+  </BlockSlot>
-{{/app-view}}
+</AppView>

ui-v2/app/templates/error.hbs

@@ -1,6 +1,6 @@
-{{#hashicorp-consul id="wrapper" permissions=permissions dcs=dcs dc=dc nspaces=nspaces nspace=nspace}}
+<HashicorpConsul @id="wrapper" @permissions={{permissions}} @dcs={{dcs}} @dc={{dc}} @nspaces={{nspaces}} @nspace={{nspace}}>
-    {{#app-view class="error show"}}
+    <AppView @class="error show">
-        {{#block-slot name='header'}}
+        <BlockSlot @name="header">
             <h1 data-test-error>
 {{#if error.status }}
                 {{error.status}} ({{error.message}})
@@ -8,14 +8,14 @@
                 {{error.message}}
 {{/if}}
             </h1>
-        {{/block-slot}}
+        </BlockSlot>
-        {{#block-slot name='content'}}
+        <BlockSlot @name="content">
             <p>
                 Consul returned an error.
                 You may have visited a URL that is loading an unknown resource, so you can try going back to the root or try re-submitting your ACL Token/SecretID by going back to ACLs.<br />
                 Try looking in our <a href="{{env 'CONSUL_DOCS_URL'}}" target="_blank">documentation</a>
             </p>
             <a data-test-home rel="home" href={{href-to 'index'}}>Go back to root</a>
-        {{/block-slot}}
+        </BlockSlot>
-    {{/app-view}}
+    </AppView>
-{{/hashicorp-consul}}
+</HashicorpConsul>

ui-v2/app/templates/settings.hbs

@@ -1,12 +1,12 @@
 {{title "Settings"}}
-{{#hashicorp-consul id="wrapper" permissions=permissions dcs=dcs dc=dc nspaces=nspaces nspace=nspace}}
+<HashicorpConsul @id="wrapper" @permissions={{permissions}} @dcs={{dcs}} @dc={{dc}} @nspaces={{nspaces}} @nspace={{nspace}}>
-  {{#app-view class="settings show"}}
+  <AppView @class="settings show">
-    {{#block-slot name='header'}}
+    <BlockSlot @name="header">
       <h1>
         Settings
       </h1>
-    {{/block-slot}}
+    </BlockSlot>
-    {{#block-slot name='content'}}
+    <BlockSlot @name="content">
       <div class="notice info">
         <h3>Local Storage</h3>
         <p>
@@ -38,6 +38,6 @@
         </fieldset>
       {{/if}}
       </form>
-    {{/block-slot}}
+    </BlockSlot>
-  {{/app-view}}
+  </AppView>
-{{/hashicorp-consul}}
+</HashicorpConsul>

ui-v2/tests/pages/components/intention-filter.js

@@ -1,7 +1,7 @@
 import { triggerable } from 'ember-cli-page-object';
 import radiogroup from 'consul-ui/tests/lib/page-object/radiogroup';
 export default {
-  ...radiogroup('action', ['', 'allow', 'deny']),
+  ...radiogroup('currentFilter', ['', 'allow', 'deny']),
   ...{
     scope: '[data-test-intention-filter]',
     search: triggerable('keypress', '[name="s"]'),