UI: Fix delete from list using Item.callMethod (#25608)

* Fix multiple confirm modals showing on delete auth item

* fix muliple confirm modals on KMIP items delete

* fix multiple modals on namespace list

ui/app/components/generated-item-list.js

@@ -27,14 +27,7 @@ import { tracked } from '@glimmer/tracking';
 export default class GeneratedItemList extends Component {
   @service router;
   @service store;
-  @tracked showConfirmModal = false;
+  @tracked itemToDelete = null;
-
-  get model() {
-    return this.args.model || null;
-  }
-  get itemType() {
-    return this.args.itemType || null;
-  }
 
   @action
   refreshItemList() {

ui/app/templates/components/generated-item-list.hbs

@@ -37,37 +37,30 @@
   <ToolbarActions>
     <ToolbarLink
       @route="vault.cluster.access.method.item.create"
-      @model={{this.itemType}}
+      @model={{@itemType}}
       @type="add"
-      data-test-entity-create-link={{this.itemType}}
+      data-test-entity-create-link={{@itemType}}
     >
       Create
-      {{singularize this.itemType}}
+      {{singularize @itemType}}
     </ToolbarLink>
   </ToolbarActions>
 </Toolbar>
-<ListView
+<ListView @items={{@model}} @itemNoun={{@itemType}} @paginationRouteName="vault.cluster.access.method.item.list" as |list|>
-  @items={{this.model}}
-  @itemNoun={{this.itemType}}
-  @paginationRouteName="vault.cluster.access.method.item.list"
-  as |list|
->
   {{#if list.empty}}
     <list.empty
-      @title="No {{pluralize this.itemType}} yet"
+      @title="No {{pluralize @itemType}} yet"
-      @message="A list of {{pluralize
+      @message="A list of {{pluralize @itemType}} will be listed here. Create your first {{@itemType}} to get started."
-        this.itemType
-      }} will be listed here. Create your first {{this.itemType}} to get started."
     >
       <Hds::Link::Standalone
         @icon="plus"
-        @text="Create {{singularize this.itemType}}"
+        @text="Create {{singularize @itemType}}"
         @route="vault.cluster.access.method.item.create"
-        @model={{this.itemType}}
+        @model={{@itemType}}
       />
     </list.empty>
   {{else if list.item}}
-    <ListItem @linkParams={{array "vault.cluster.access.method.item.show" this.itemType list.item.id}} as |Item|>
+    <ListItem @linkParams={{array "vault.cluster.access.method.item.show" @itemType list.item.id}} as |Item|>
       <Item.content>
         <Icon @name="folder" class="has-text-grey-light" />{{list.item.id}}
       </Item.content>
@@ -80,39 +73,38 @@
             data-test-popup-menu-trigger
           />
           <dd.Interactive
-            @text="View {{singularize this.itemType}}"
+            @text="View {{singularize @itemType}}"
             @route="vault.cluster.access.method.item.show"
             @model={{list.item.id}}
           />
           <dd.Interactive
-            @text="Edit {{singularize this.itemType}}"
+            @text="Edit {{singularize @itemType}}"
             @route="vault.cluster.access.method.item.edit"
             @model={{list.item.id}}
           />
           <dd.Interactive
-            @text="Delete {{singularize this.itemType}}"
+            @text="Delete {{singularize @itemType}}"
             @color="critical"
-            {{on "click" (fn (mut this.showConfirmModal) true)}}
+            {{on "click" (fn (mut this.itemToDelete) list.item)}}
           />
         </Hds::Dropdown>
       </Item.menu>
-
+      {{#if (eq list.item this.itemToDelete)}}
-      {{#if this.showConfirmModal}}
         <ConfirmModal
           @color="critical"
-          @onClose={{fn (mut this.showConfirmModal) false}}
+          @onClose={{fn (mut this.itemToDelete) null}}
           @onConfirm={{action
             (perform
               Item.callMethod
               "destroyRecord"
-              list.item
+              this.itemToDelete
-              (concat "Successfully deleted " (singularize this.itemType) " " list.item.id ".")
+              (concat "Successfully deleted " (singularize @itemType) " " this.itemToDelete.id ".")
-              (concat "There was an error deleting this " (singularize this.itemType))
+              (concat "There was an error deleting this " (singularize @itemType))
               (action "refreshItemList")
             )
           }}
-          @confirmTitle="Delete {{singularize this.itemType}}?"
+          @confirmTitle="Delete {{singularize @itemType}}?"
-          @confirmMessage="Are you sure you want to delete {{singularize this.itemType}} {{list.item.id}}?"
+          @confirmMessage="Are you sure you want to delete {{singularize @itemType}} {{this.itemToDelete.id}}?"
         />
       {{/if}}
     </ListItem>

ui/app/templates/vault/cluster/access/namespaces/index.hbs

@@ -46,18 +46,18 @@
                 </dd.Generic>
               {{/if}}
             {{/let}}
-            <dd.Interactive @text="Delete" @color="critical" {{on "click" (fn (mut this.showConfirmModal) true)}} />
+            <dd.Interactive @text="Delete" @color="critical" {{on "click" (fn (mut this.nsToDelete) list.item)}} />
           </Hds::Dropdown>
-          {{#if this.showConfirmModal}}
+          {{#if (eq this.nsToDelete list.item)}}
             <ConfirmModal
               @color="critical"
-              @onClose={{fn (mut this.showConfirmModal) false}}
+              @onClose={{fn (mut this.nsToDelete) null}}
               @onConfirm={{action
                 (perform
                   Item.callMethod
                   "destroyRecord"
-                  list.item
+                  this.nsToDelete
-                  (concat "Successfully deleted namespace: " list.item.id)
+                  (concat "Successfully deleted namespace: " this.nsToDelete.id)
                   "There was an error deleting this namespace: "
                   (action "refreshNamespaceList")
                 )

ui/lib/kmip/addon/templates/credentials/index.hbs

@@ -78,22 +78,22 @@
             <dd.Interactive
               @text="Revoke credentials"
               @color="critical"
-              {{on "click" (fn (mut this.showConfirmModal) true)}}
+              {{on "click" (fn (mut this.credToRevoke) list.item)}}
               data-test-confirm-action-trigger
             />
           {{/if}}
         </Hds::Dropdown>
-        {{#if this.showConfirmModal}}
+        {{#if (eq this.credToRevoke list.item)}}
           <ConfirmModal
             @color="critical"
-            @onClose={{fn (mut this.showConfirmModal) false}}
+            @onClose={{fn (mut this.credToRevoke) null}}
             @confirmTitle="Revoke this?"
             @confirmMessage="Any client using these credentials will no longer be able to."
             @onConfirm={{action
               (perform
                 Item.callMethod
                 "destroyRecord"
-                list.item
+                this.credToRevoke
                 "Successfully revoked credentials"
                 "There was an error revoking the credentials"
                 (action "refresh")

ui/lib/kmip/addon/templates/scope/roles.hbs

@@ -85,27 +85,27 @@
               <dd.Interactive
                 @text="Delete role"
                 @color="critical"
-                {{on "click" (fn (mut this.showConfirmModal) true)}}
+                {{on "click" (fn (mut this.roleToDelete) list.item)}}
                 data-test-confirm-action-trigger
               />
             {{/if}}
           {{/if}}
         </Hds::Dropdown>
-        {{#if this.showConfirmModal}}
+        {{#if (eq this.roleToDelete list.item)}}
           <ConfirmModal
             @color="critical"
-            @confirmMessage="Are you sure you want to delete {{list.item.id}}?"
+            @confirmMessage="Are you sure you want to delete {{this.roleToDelete.id}}?"
             @onConfirm={{action
               (perform
                 Item.callMethod
                 "destroyRecord"
-                list.item
+                this.roleToDelete
-                (concat "Successfully deleted role " list.item.id)
+                (concat "Successfully deleted role " this.roleToDelete.id)
-                (concat "There was an error deleting the role " list.item.id)
+                (concat "There was an error deleting the role " this.roleToDelete.id)
                 (action "refresh")
               )
             }}
-            @onClose={{fn (mut this.showConfirmModal) false}}
+            @onClose={{fn (mut this.roleToDelete) null}}
           />
         {{/if}}
       </Item.menu>

ui/lib/kmip/addon/templates/scopes/index.hbs

@@ -69,24 +69,24 @@
             <dd.Interactive
               @text="Delete scope"
               @color="critical"
-              {{on "click" (fn (mut this.showConfirmModal) true)}}
+              {{on "click" (fn (mut this.scopeToDelete) list.item)}}
               data-test-confirm-action-trigger
             />
           {{/if}}
         </Hds::Dropdown>
-        {{#if this.showConfirmModal}}
+        {{#if (eq this.scopeToDelete list.item)}}
           <ConfirmModal
             @color="critical"
-            @confirmTitle="Delete scope {{list.item.id}}?"
+            @confirmTitle="Delete scope {{this.scopeToDelete.id}}?"
             @confirmMessage="This will permanently delete this scope and all roles and credentials contained within"
-            @onClose={{fn (mut this.showConfirmModal) false}}
+            @onClose={{fn (mut this.scopeToDelete) null}}
             @onConfirm={{action
               (perform
                 Item.callMethod
                 "destroyRecord"
-                list.item
+                this.scopeToDelete
-                (concat "Successfully deleted scope " list.item.id)
+                (concat "Successfully deleted scope " this.scopeToDelete.id)
-                (concat "There was an error deleting the scope " list.item.id)
+                (concat "There was an error deleting the scope " this.scopeToDelete.id)
                 (action "refresh")
               )
             }}