[UI] deprecation this property fallback into 1.21.x (#22928) (#22963)

[UI] deprecation this property fallback (#22928)

* fixes some this property fallback issues

* more fixes

* fixes for all files

* linter fixes

* add changelog

* Update 22928.txt

* fix more issues

* adds exception for refresh-route helper

* linting fix

* fixes an error

* minor fix

Author: rishabh-gupta-hashicorp

.changelog/22928.txt

@@ -0,0 +1,3 @@
+``release-note:improvement
+ui: use explicit @ and this for property names instead of allowing them to fallback automatically. Fixes deprecation to upgrade to Ember v4.
+```

ui/packages/consul-ui/.template-lintrc.js

@@ -28,7 +28,9 @@ module.exports = {
     'style-concatenation': false,
     'link-rel-noopener': false,
 
-    'no-implicit-this': false,
+    'no-implicit-this': {
+      allow: ['refresh-route'],
+    },
     'no-curly-component-invocation': false,
     'no-action': false,
     'no-negated-condition': false,

ui/packages/consul-ui/app/components/app/index.hbs

@@ -3,13 +3,13 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-{{#let (hash main=(concat guid '-main') Notification=(component 'app/notification')) as |exported|}}
+{{#let (hash main=(concat this.guid '-main') Notification=(component 'app/notification')) as |exported|}}
 
   <div class='app' ...attributes>
     <ModalLayer />
 
     {{yield exported to='side-nav'}}
-    <main id={{concat guid '-main'}}>
+    <main id={{concat this.guid '-main'}}>
       <div class='notifications'>
         {{yield exported to='notifications'}}
         <PortalTarget @name='app-notifications' @multiple={{true}} />

ui/packages/consul-ui/app/components/aria-menu/index.hbs

@@ -8,8 +8,8 @@
   (action 'keypress')
   (action 'keypressClick')
   (hash
-    labelledBy=(concat 'component-aria-menu-trigger-' guid)
-    controls=(concat 'component-aria-menu-menu-' guid)
-    expanded=(if expanded 'true' undefined)
+    labelledBy=(concat 'component-aria-menu-trigger-' this.guid)
+    controls=(concat 'component-aria-menu-menu-' this.guid)
+    expanded=(if this.expanded 'true' undefined)
   )
 }}

ui/packages/consul-ui/app/components/auth-dialog/index.hbs

@@ -4,7 +4,7 @@
 }}
 
 <StateChart
-  @src={{chart}}
+  @src={{this.chart}}
 as |State Guard Action dispatch state|>
 
   <Guard
@@ -24,7 +24,7 @@ as |State Guard Action dispatch state|>
   {{! token, whether thats a new token, a changed token or a deleted token }}
   <DataSource
     @src={{@src}}
-    @onchange={{queue (action (mut token) value="data") (action dispatch "CHANGE") (action (mut previousToken) value="data")}}
+    @onchange={{queue (action (mut this.token) value="data") (action dispatch "CHANGE") (action (mut this.previousToken) value="data")}}
   />
   {{! This DataSink is just used for logging in from the form, }}
   {{! or logging out via the exposed logout function }}
@@ -35,7 +35,7 @@ as |State Guard Action dispatch state|>
     {{#let (hash
       login=(action sink.open)
       logout=(action sink.open null)
-      token=token
+      token=this.token
     ) as |api|}}
 
       <State @matches="authorized">

ui/packages/consul-ui/app/components/child-selector/index.hbs

@@ -4,43 +4,43 @@
 }}
 
 <div
-  class="child-selector {{type}}-child-selector"
+  class="child-selector {{this.type}}-child-selector"
   {{fix-super-select-aria}}
   ...attributes
 >
 {{yield}}
-{{#if (not disabled)}}
+{{#if (not @disabled)}}
   <YieldSlot @name="create">{{yield}}</YieldSlot>
   <label class="type-text">
     <span><YieldSlot @name="label">{{yield}}</YieldSlot></span>
     {{!-- {{#if isOpen}} --}}
       <DataSource
         @src={{uri '/${partition}/${nspace}/${dc}/${type}'
           (hash
-            partition=partition
-            nspace=nspace
-            dc=dc
-            type=(pluralize type)
+            partition=@partition
+            nspace=@nspace
+            dc=@dc
+            type=(pluralize this.type)
           )
         }}
-        @onchange={{action (mut allOptions) value="data"}}
+        @onchange={{action (mut this.allOptions) value="data"}}
       />
     {{!-- {{/if}} --}}
     <DataCollection
-      @type={{type}}
+      @type={{this.type}}
       @sort='Name:asc'
       @filters={{hash
         searchproperties=(array 'Name')
       }}
-      @items={{options}}
+      @items={{this.options}}
     as |collection|>
       <Hds::Form::SuperSelect::Single::Field
         @searchEnabled={{true}}
         @onFilter={{action collection.search}}
-        @options={{sort-by 'Name:asc' options}}
-        @placeholder={{placeholder}}
-        @onChange={{action "change" "items[]" items}}
-        @label="Select {{type}}"
+        @options={{sort-by 'Name:asc' this.options}}
+        @placeholder={{@placeholder}}
+        @onChange={{action "change" "items[]" @items}}
+        @label="Select {{this.type}}"
         @isOptional={{true}}
         @searchField="Name"
       as |F|>
@@ -49,7 +49,7 @@
     </DataCollection>
   </label>
 {{/if}}
-{{#if (gt items.length 0)}}
+{{#if (gt @items.length 0)}}
   <YieldSlot @name="set" @params={{block-params (action "remove")}}>{{yield}}</YieldSlot>
 {{else}}
 

ui/packages/consul-ui/app/components/confirmation-dialog/index.hbs

@@ -3,15 +3,15 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<div class={{concat "with-confirmation" (if confirming " confirming" "")}} ...attributes>
+<div class={{concat "with-confirmation" (if this.confirming " confirming" "")}} ...attributes>
 {{yield}}
 <YieldSlot @name="action" @params={{block-params (action "confirm") (action "cancel")}}>
-{{#if (or permanent (not confirming))}}
+{{#if (or this.permanent (not this.confirming))}}
     {{yield}}
 {{/if}}
 </YieldSlot>
-<YieldSlot @name="dialog" @params={{block-params (action "execute") (action "cancel") message actionName}}>
-{{#if confirming }}
+<YieldSlot @name="dialog" @params={{block-params (action "execute") (action "cancel") @message this.actionName}}>
+{{#if this.confirming }}
     {{yield}}
 {{/if}}
 </YieldSlot>

ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs

@@ -4,22 +4,22 @@
 }}
 
 <style>
-  {{#if selected.nodes}}
-    {{selected.nodes}}
+  {{#if this.selected.nodes}}
+    {{this.selected.nodes}}
     { opacity: 1 !important; background-color: var(--token-color-surface-interactive); border:
     var(--decor-border-100); border-radius: var(--decor-radius-200); border-color:
     var(--token-color-foreground-faint); box-shadow: var(--token-surface-high-box-shadow); }
   {{/if}}
-  {{#if selected.edges}}
-    {{selected.edges}}
+  {{#if this.selected.edges}}
+    {{this.selected.edges}}
     { opacity: 1; }
   {{/if}}
 </style>
 
 <div class='routes'>
   <header>
     <h2>
-      {{chain.ServiceName}}
+      {{@chain.ServiceName}}
       Router
       <span
         {{tooltip
@@ -30,7 +30,7 @@
     </h2>
   </header>
   <div role='group'>
-    {{#each routes as |item|}}
+    {{#each this.routes as |item|}}
       <Consul::DiscoveryChain::RouteCard
         {{on-resize (dom-position (set item 'rect') from=this.edges)}}
         @item={{item}}
@@ -53,7 +53,7 @@
     </h2>
   </header>
   <div role='group'>
-    {{#each (sort-by 'Name' splitters) as |item|}}
+    {{#each (sort-by 'Name' this.splitters) as |item|}}
       <Consul::DiscoveryChain::SplitterCard
         {{on-resize (dom-position (set item 'rect') from=this.edges)}}
         @item={{item}}
@@ -76,7 +76,7 @@
     </h2>
   </header>
   <div role='group'>
-    {{#each (sort-by 'Name' resolvers) as |item|}}
+    {{#each (sort-by 'Name' this.resolvers) as |item|}}
       <Consul::DiscoveryChain::ResolverCard
         {{on-resize (dom-position (set item 'rect') from=this.edges)}}
         @item={{item}}
@@ -87,7 +87,7 @@
   </div>
 </div>
 
-{{nodes}}
+{{this.nodes}}
 
 <svg
   class='edges'
@@ -96,7 +96,7 @@
   height='100%'
   preserveAspectRatio='none'
 >
-  {{#each routes as |item|}}
+  {{#each this.routes as |item|}}
     {{#if item.rect}}
       {{#let item.rect item.NextItem.rect as |src destRect|}}
         {{#let
@@ -117,7 +117,7 @@
     {{/if}}
   {{/each}}
 
-  {{#each splitters as |splitter|}}
+  {{#each this.splitters as |splitter|}}
     {{#if splitter.rect}}
       {{#let splitter.rect as |src|}}
         {{#each splitter.Splits as |item index|}}
@@ -153,14 +153,14 @@
 </svg>
 
 <svg class='resolver-inlets' height='100%'>
-  {{#each routes as |item|}}
+  {{#each this.routes as |item|}}
     {{#if (string-starts-with item.NextNode 'resolver:')}}
       {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
         <circle r='2.5' cx='5' cy={{add dest.y (div dest.height 2)}}></circle>
       {{/let}}
     {{/if}}
   {{/each}}
-  {{#each splitters as |item|}}
+  {{#each this.splitters as |item|}}
     {{#each item.Splits as |item|}}
       {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
         <circle r='2.5' cx='5' cy={{add dest.y (div dest.height 2)}}></circle>
@@ -170,7 +170,7 @@
 </svg>
 
 <svg class='splitter-inlets' height='100%'>
-  {{#each routes as |item|}}
+  {{#each this.routes as |item|}}
     {{#if (string-starts-with item.NextNode 'splitter:')}}
       {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
         <circle r='2.5' cx='5' cy={{add dest.y (div dest.height 2)}}></circle>