Backport of [UI] Remove send Action deprecation into release/1.22.x

.changelog/22938.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: removes send action instances as part of https://deprecations.emberjs.com/id/ember-component-send-action/
+```

ui/packages/consul-lock-sessions/app/components/consul/lock-session/form/index.hbs

@@ -86,7 +86,7 @@
               @text='Invalidate Session'
               @color='critical'
               data-test-delete
-              {{on 'click' (fn confirm (fn writer.delete @item))}}
+              {{on 'click' (fn confirm )}}
             />
           </BlockSlot>
           <BlockSlot @name="dialog" as |execute cancel message|>
@@ -98,7 +98,7 @@
                 @text='Confirm Invalidation'
                 @color='critical'
                 data-test-delete
-                {{on 'click' (fn execute)}}
+                {{on 'click' (queue execute (fn writer.delete @item))}}
               />
               <Hds::Button
                 @text='Cancel'

ui/packages/consul-lock-sessions/app/components/consul/lock-session/list/index.hbs

@@ -90,7 +90,7 @@ as |item index|>
           @text='Invalidate'
           @color='critical'
           data-test-delete
-          {{on 'click' (fn confirm (fn @ondelete item))}}
+          {{on 'click' confirm}}
         />
       </BlockSlot>
       <BlockSlot @name="dialog" as |execute cancel message|>
@@ -102,7 +102,7 @@ as |item index|>
             @text='Confirm Invalidate'
             @color='critical'
             data-test-delete
-            {{on 'click' (fn execute)}}
+            {{on 'click' (queue execute (fn @ondelete item))}}
           />
           <Hds::Button
             @text='Cancel'

ui/packages/consul-nspaces/app/components/consul/nspace/form/index.hbs

@@ -145,13 +145,13 @@
                       data-test-delete
                       @color='critical'
                       @text='Delete'
-                      {{on "click" (fn confirm (fn writer.delete item))}}
+                      {{on "click" (fn confirm )}}
                     />
                   </BlockSlot>
                   <BlockSlot @name="dialog" as |execute cancel message|>
                     <DeleteConfirmation
                       @message={{message}}
-                      @execute={{execute}}
+                      @execute={{queue execute (fn writer.delete item)}}
                       @cancel={{cancel}}
                     />
                   </BlockSlot>

ui/packages/consul-partitions/app/components/consul/partition/form/index.hbs

@@ -118,13 +118,13 @@ as |State Guard ChartAction dispatch state|>
             @text='Delete'
             data-test-delete
             @color='critical'
-            {{on 'click' (fn confirm (fn writer.delete item))}}
+            {{on 'click' confirm}}
           />
         </BlockSlot>
         <BlockSlot @name="dialog" as |execute cancel message|>
           <DeleteConfirmation
             @message={{message}}
-            @execute={{execute}}
+            @execute={{queue execute (fn writer.delete item)}}
             @cancel={{cancel}}
           />
         </BlockSlot>

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

@@ -50,7 +50,7 @@
   </label>
 {{/if}}
 {{#if (gt items.length 0)}}
-  <YieldSlot @name="set">{{yield}}</YieldSlot>
+  <YieldSlot @name="set" @params={{block-params (action "remove")}}>{{yield}}</YieldSlot>
 {{else}}
 
 {{/if}}

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

@@ -3,30 +3,30 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-/*eslint ember/closure-actions: "warn"*/
 import Component from '@ember/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 import Slotted from 'block-slots';
-import { set } from '@ember/object';
 
-export default Component.extend(Slotted, {
-  tagName: '',
-  message: 'Are you sure?',
-  confirming: false,
-  permanent: false,
-  actions: {
-    cancel: function () {
-      set(this, 'confirming', false);
-    },
-    execute: function () {
-      set(this, 'confirming', false);
-      this.sendAction(...['actionName', ...this['arguments']]);
-    },
-    confirm: function () {
-      const [action, ...args] = arguments;
-      set(this, 'actionName', action);
-      set(this, 'arguments', args);
-      set(this, 'confirming', true);
-    },
-  },
-});
+export default class ConfirmationDialogComponent extends Component.extend(Slotted) {
+  tagName = '';
+  message = 'Are you sure?';
+  @tracked confirming = false;
+  permanent = false;
+
+  @action
+  cancel() {
+    this.confirming = false;
+  }
+
+  @action
+  execute() {
+    this.confirming = false;
+  }
+
+  @action
+  confirm() {
+    this.confirming = true;
+  }
+}

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

@@ -178,14 +178,14 @@ as |item readonly|}}
                 @text='Delete'
                 @color='critical'
                 disabled={{api.disabled}}
-                {{on 'click' (fn confirm api.delete)}}
+                {{on 'click' (fn confirm)}}
                 data-test-delete
               />
             </BlockSlot>
             <BlockSlot @name="dialog" as |execute cancel message|>
               <DeleteConfirmation
                 @message={{message}}
-                @execute={{execute}}
+                @execute={{queue execute api.delete}}
                 @cancel={{cancel}}
               />
             </BlockSlot>

ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs

@@ -95,7 +95,7 @@
       <BlockSlot @name='trigger'>
         More
       </BlockSlot>
-      <BlockSlot @name='menu' as |confirm send keypressClick change|>
+      <BlockSlot @name='menu' as |confirm keypressClick change|>
         {{#if (can 'write intention' item=item)}}
           <components.MenuItem href={{href-to (or routeName 'dc.intentions.edit') item.ID}}>
             <BlockSlot @name="label">

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

@@ -127,13 +127,13 @@
                     @color='critical'
                     data-test-delete
                     disabled={{api.disabled}}
-                    {{on 'click' (action confirm api.delete)}}
+                    {{on 'click' (action confirm)}}
                   />
                 </BlockSlot>
                 <BlockSlot @name='dialog' as |execute cancel message|>
                   <DeleteConfirmation
                     @message={{message}}
-                    @execute={{execute}}
+                    @execute={{queue execute api.delete}}
                     @cancel={{cancel}}
                   />
                 </BlockSlot>

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

@@ -25,7 +25,7 @@
       <BlockSlot @name='trigger'>
         More
       </BlockSlot>
-      <BlockSlot @name='menu' as |confirm send keypressClick|>
+      <BlockSlot @name='menu' as |confirm keypressClick|>
         {{#if (can 'write kv' item=item)}}
           <components.MenuItem
             data-test-edit

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

@@ -64,7 +64,7 @@
               <Hds::Button
                 @text='Delete'
                 @color='critical'
-                {{on 'click' (fn confirm @onDelete @item)}}
+                {{on 'click' confirm}}
                 data-test-delete
               />
             </BlockSlot>
@@ -97,7 +97,7 @@
                         @text='Yes, Delete'
                         data-test-delete
                         @color='critical'
-                        {{on 'click' execute}}
+                        {{on 'click' (queue execute (fn @onDelete @item))}}
                       />
                       <Hds::Button
                         @text='Cancel'
@@ -108,7 +108,7 @@
                   </BlockSlot>
                 </ModalDialog>
               {{else}}
-                <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
+                <DeleteConfirmation @message={{message}} @execute={{queue execute (fn @delete @item)}} @cancel={{cancel}} />
               {{/if}}
             </BlockSlot>
           </ConfirmationDialog>

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

@@ -64,7 +64,7 @@
             <Hds::Button
               @text='Delete'
               @color='critical'
-              {{on 'click' (fn confirm @onDelete @item)}}
+              {{on 'click' confirm}}
               data-test-delete
             />
           </BlockSlot>
@@ -95,7 +95,7 @@
                       @text='Yes, Delete'
                       @color='critical'
                       data-test-delete
-                      {{on 'click' execute}}
+                      {{on 'click' (queue execute (fn @onDelete @item))}}
                     />
                     <Hds::Button
                       @text='Cancel'
@@ -106,7 +106,7 @@
                 </BlockSlot>
               </ModalDialog>
             {{else}}
-              <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
+              <DeleteConfirmation @message={{message}} @execute={{queue execute (fn @delete @item)}} @cancel={{cancel}} />
             {{/if}}
           </BlockSlot>
         </ConfirmationDialog>

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

@@ -6,8 +6,8 @@
 <form>
   {{!-- fieldsets already converted to components --}}
   {{#if (not (token/is-legacy @item))}}
-    <Consul::Token::Fieldsets 
-      @item={{@item}} 
+    <Consul::Token::Fieldsets
+      @item={{@item}}
       @create={{@create}}
       @local={{@local}}
       @dc={{@dc}}
@@ -16,8 +16,8 @@
       @onChange={{@onChange}}
     />
   {{else}}
-    <Consul::Token::FieldsetsLegacy 
-      @item={{@item}} 
+    <Consul::Token::FieldsetsLegacy
+      @item={{@item}}
       @create={{@create}}
       @name={{@name}}
       @onChange={{@onChange}}
@@ -57,12 +57,12 @@
             <Hds::Button
               @text='Delete'
               @color='critical'
-              {{on 'click' (fn confirm @onDelete @item)}}
+              {{on 'click' confirm}}
               data-test-delete
             />
           </BlockSlot>
           <BlockSlot @name="dialog" as |execute cancel message|>
-            <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
+            <DeleteConfirmation @message={{message}} @execute={{queue execute (fn @onDelete @item)}} @cancel={{cancel}} />
           </BlockSlot>
         </ConfirmationDialog>
       {{/if}}

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

@@ -78,7 +78,7 @@
   <BlockSlot @name='option' as |option|>
     {{option.Name}}
   </BlockSlot>
-  <BlockSlot @name='set'>
+  <BlockSlot @name='set' as |remove|>
     <TabularDetails
       data-test-policies
       @onchange={{action 'open'}}
@@ -189,7 +189,7 @@
                   @text='Remove'
                   @color='critical'
                   @size='small'
-                  {{action confirm 'remove' item items}}
+                  {{action confirm}}
                   data-test-delete
                 />
               </BlockSlot>
@@ -202,7 +202,7 @@
                     @text='Confirm remove'
                     @color='critical'
                     @size='small'
-                    {{action execute}}
+                    {{action (queue execute (action remove item items))}}
                     data-test-delete
                   />
                   <Hds::Button

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

@@ -58,7 +58,7 @@ as |api|}}
         </BlockSlot>
       {{/if}}
       <BlockSlot @name="menu">
-        <YieldSlot @name="menu" @params={{block-params (concat "popover-menu-" guid "-") send keypressClick this.toggle.click}}>
+        <YieldSlot @name="menu" @params={{block-params (concat "popover-menu-" guid "-") keypressClick this.toggle.click}}>
           {{yield components api}}
         </YieldSlot>
       </BlockSlot>

ui/packages/consul-ui/app/components/popover-menu/index.js

@@ -45,11 +45,5 @@ export default Component.extend(Slotted, {
       }
       this.onchange(e);
     },
-    // Temporary send here so we can send route actions
-    // easily. It kind of makes sense that you'll want to perform
-    // route actions from a popup menu for the moment
-    send: function () {
-      this.sendAction(...arguments);
-    },
   },
 });

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

@@ -131,7 +131,7 @@ as |modal|>
   <BlockSlot @name="option" as |option|>
     {{option.Name}}
   </BlockSlot>
-  <BlockSlot @name="set">
+  <BlockSlot @name="set" as |remove|>
     <TabularCollection
         data-test-roles
         @rows={{5}}
@@ -154,7 +154,7 @@ as |modal|>
           <BlockSlot @name="trigger">
             More
           </BlockSlot>
-          <BlockSlot @name="menu" as |confirm send keypressClick|>
+          <BlockSlot @name="menu" as |confirm keypressClick|>
               <components.MenuItem @href={{href-to 'dc.acls.roles.edit' item.ID}}>
                 <BlockSlot @name="label">
                   {{#if (can "edit role" item=item)}}
@@ -166,7 +166,7 @@ as |modal|>
               </components.MenuItem>
 
             {{#if (not disabled)}}
-              <components.MenuItem class="dangerous" @onclick={{action send 'remove' item items}} data-test-delete>
+              <components.MenuItem class="dangerous" @onclick={{fn remove item items}} data-test-delete>
                 <BlockSlot @name="label">
                   Remove
                 </BlockSlot>

ui/packages/consul-ui/app/controllers/dc/acls/policies/edit.js

@@ -5,12 +5,14 @@
 
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
 export default class EditController extends Controller {
   @service('form')
   builder;
 
-  init() {
-    super.init(...arguments);
+  constructor() {
+    super(...arguments);
     this.form = this.builder.form('policy');
   }
 
@@ -27,4 +29,9 @@ export default class EditController extends Controller {
       }, model)
     );
   }
+
+  @action
+  delete(item) {
+    this.target.send('delete', item);
+  }
 }