From 3ba8b3622d5f17bc48078090d6a8917fd6ed12f4 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 29 Jun 2023 19:49:17 -0700
Subject: [PATCH 01/42] replace confirm-action dropdown with button+modal

---
 .../core/addon/components/confirm-action.hbs  | 93 ++++++++-----------
 .../core/addon/components/confirm-action.js   | 68 +++-----------
 2 files changed, 55 insertions(+), 106 deletions(-)

diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index b8225d6bdc6f..f724fa1c6d8a 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -1,53 +1,40 @@
-<div class="confirm-action" ...attributes>
-  <BasicDropdown
-    @horizontalPosition={{this.horizontalPosition}}
-    @verticalPosition={{this.verticalPosition}}
-    @onOpen={{this.toggleConfirm}}
-    @onClose={{this.toggleConfirm}}
-    as |d|
-  >
-    <d.Trigger
-      @htmlTag="button"
-      class={{concat @buttonClasses " popup-menu-trigger" (if d.isOpen " is-active")}}
-      type="button"
-      disabled={{this.disabled}}
-      data-test-confirm-action-trigger="true"
-    >
-      {{yield}}
-      {{#if (eq @buttonClasses "toolbar-link")}}
-        <Chevron @direction={{if this.showConfirm "up" "down"}} data-test-confirm-action-chevron />
-      {{/if}}
-    </d.Trigger>
-    <d.Content @defaultClass="popup-menu-content">
-      <div class="box confirm-action-message">
-        <div class="message is-highlight">
-          <div class="message-title" data-test-confirm-action-title>
-            <Icon @name="alert-triangle-fill" />
-            {{this.confirmTitle}}
-          </div>
-          <p>
-            {{this.confirmMessage}}
-          </p>
-        </div>
-        <div class="confirm-action-options">
-          <button
-            type="button"
-            disabled={{or this.disabled this.isRunning}}
-            class="link is-destroy"
-            data-test-confirm-button="true"
-            {{on "click" (fn this.onConfirm d.actions)}}
-          >
-            {{#if this.isRunning}}
-              <span class="loader is-inline-block"></span>
-            {{else}}
-              {{this.confirmButtonText}}
-            {{/if}}
-          </button>
-          <button type="button" class="link" data-test-confirm-cancel-button="true" {{on "click" d.actions.close}}>
-            {{this.cancelButtonText}}
-          </button>
-        </div>
-      </div>
-    </d.Content>
-  </BasicDropdown>
-</div>
\ No newline at end of file
+<Hds::Button
+  data-test-confirm-action-trigger
+  class={{@buttonClasses}}
+  @text={{@buttonText}}
+  @color="secondary"
+  {{on "click" (fn (mut this.showConfirmModal) true)}}
+/>
+
+{{#if this.showConfirmModal}}
+  <Hds::Modal id="basic-modal" @color="critical" @size="small" @onClose={{fn (mut this.showConfirmModal) false}} as |M|>
+    <M.Header data-test-confirm-action-title @icon="alert-diamond">
+      {{or @confirmTitle "Are you sure?"}}
+    </M.Header>
+    <M.Body>
+      <p class="hds-typography-body-300 hds-foreground-primary is-word-break">
+        {{or @confirmMessage "You will not be able to recover it later."}}
+      </p>
+    </M.Body>
+    <M.Footer as |F|>
+      <Hds::ButtonSet>
+        <Hds::Button
+          data-test-confirm-button
+          disabled={{or @disabled @isRunning}}
+          @icon={{if @isRunning "loading"}}
+          type="button"
+          @color="critical"
+          @text={{or @confirmButtonText "Delete"}}
+          {{on "click" this.onConfirm}}
+        />
+        <Hds::Button
+          data-test-confirm-cancel-button
+          type="button"
+          @color="secondary"
+          @text={{or @cancelButtonText "Cancel"}}
+          {{on "click" F.close}}
+        />
+      </Hds::ButtonSet>
+    </M.Footer>
+  </Hds::Modal>
+{{/if}}
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 715540d267a8..fe45ae96305b 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -21,70 +21,32 @@ import { tracked } from '@glimmer/tracking';
  *  </ConfirmAction>
  * ```
  *
- * @param {Func} [onConfirmAction=null] - The action to take upon confirming.
- * @param {String} [confirmTitle=Delete this?] - The title to display when confirming.
+ * @param {Func} onConfirmAction - The action to take upon confirming.
+ * @param {String} [confirmTitle=Delete this?] - The title to display in the confirmation modal.
  * @param {String} [confirmMessage=You will not be able to recover it later.] - The message to display when confirming.
  * @param {String} [confirmButtonText=Delete] - The confirm button text.
  * @param {String} [cancelButtonText=Cancel] - The cancel button text.
  * @param {String} [buttonClasses] - A string to indicate the button class.
- * @param {String} [horizontalPosition=auto-right] - For the position of the dropdown.
- * @param {String} [verticalPosition=below] - For the position of the dropdown.
- * @param {Boolean} [isRunning=false] - If action is still running disable the confirm.
- * @param {Boolean} [disable=false] - To disable the confirm action.
+ * @param {Boolean} [isRunning] - Disables the confirm button if action is still running
+ * @param {Boolean} [disabled] - To disable the confirm button.
  *
  */
 
 export default class ConfirmActionComponent extends Component {
-  @tracked showConfirm = false;
+  @tracked showConfirmModal = false;
 
-  get horizontalPosition() {
-    return this.args.horizontalPosition || 'auto-right';
-  }
-
-  get verticalPosition() {
-    return this.args.verticalPosition || 'below';
-  }
-
-  get isRunning() {
-    return this.args.isRunning || false;
-  }
-
-  get disabled() {
-    return this.args.disabled || false;
-  }
-
-  get confirmTitle() {
-    return this.args.confirmTitle || 'Delete this?';
-  }
-
-  get confirmMessage() {
-    return this.args.confirmMessage || 'You will not be able to recover it later.';
-  }
-
-  get confirmButtonText() {
-    return this.args.confirmButtonText || 'Delete';
-  }
-
-  get cancelButtonText() {
-    return this.args.cancelButtonText || 'Cancel';
+  constructor() {
+    super(...arguments);
+    assert(
+      '<ConfirmAction> component expects @onConfirmAction arg to be a function',
+      typeof this.args.onConfirmAction === 'function'
+    );
   }
 
   @action
-  toggleConfirm() {
-    // toggle
-    this.showConfirm = !this.showConfirm;
-  }
-
-  @action
-  onConfirm(actions) {
-    const confirmAction = this.args.onConfirmAction;
-
-    if (typeof confirmAction !== 'function') {
-      assert('confirm-action components expects `onConfirmAction` attr to be a function');
-    } else {
-      confirmAction();
-      // close the dropdown content
-      actions.close();
-    }
+  async onConfirm() {
+    await this.args.onConfirmAction();
+    // close modal after destructive operation
+    this.showConfirmModal = false;
   }
 }

From 9c69e5d1be5b36acad960bf8d4968a5d1b0fa97c Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 29 Jun 2023 19:50:54 -0700
Subject: [PATCH 02/42] add modal frame to sidebar

---
 ui/app/components/sidebar/frame.hbs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/app/components/sidebar/frame.hbs b/ui/app/components/sidebar/frame.hbs
index 63986925604b..58876184226c 100644
--- a/ui/app/components/sidebar/frame.hbs
+++ b/ui/app/components/sidebar/frame.hbs
@@ -39,6 +39,7 @@
       </:footer>
     </Hds::SideNav>
   </Frame.Sidebar>
+  <Frame.Modals id="hcp-app-frame-modals" data-test-modals-container />
   <Frame.Main id="app-main-content" class={{if this.console.isOpen "main--console-open"}}>
     {{! outlet for app content }}
     <div id="modal-wormhole"></div>

From 4d26f1232bfa78b607b2ca3b7cd0c01cba74ee9b Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 29 Jun 2023 20:06:12 -0700
Subject: [PATCH 03/42] fix weird paragraph indent

---
 ui/lib/core/addon/components/confirm-action.hbs | 6 ++----
 ui/lib/core/addon/components/confirm-action.js  | 4 ++++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index f724fa1c6d8a..0db264ba2043 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -7,14 +7,12 @@
 />
 
 {{#if this.showConfirmModal}}
-  <Hds::Modal id="basic-modal" @color="critical" @size="small" @onClose={{fn (mut this.showConfirmModal) false}} as |M|>
+  <Hds::Modal id="basic-modal" @color="critical" @size="medium" @onClose={{fn (mut this.showConfirmModal) false}} as |M|>
     <M.Header data-test-confirm-action-title @icon="alert-diamond">
       {{or @confirmTitle "Are you sure?"}}
     </M.Header>
     <M.Body>
-      <p class="hds-typography-body-300 hds-foreground-primary is-word-break">
-        {{or @confirmMessage "You will not be able to recover it later."}}
-      </p>
+      <p class="hds-typography-body-300 hds-foreground-primary is-word-break">{{this.confirmMessage}}</p>
     </M.Body>
     <M.Footer as |F|>
       <Hds::ButtonSet>
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index fe45ae96305b..fa4ab27955ba 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -43,6 +43,10 @@ export default class ConfirmActionComponent extends Component {
     );
   }
 
+  get confirmMessage() {
+    return this.args.confirmMessage || 'You will not be able to recover it later.';
+  }
+
   @action
   async onConfirm() {
     await this.args.onConfirmAction();

From 8ef70fe1d1591f9095a96f715103136cc65d7dad Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 29 Jun 2023 20:59:17 -0700
Subject: [PATCH 04/42] pass button text as arg

---
 .../components/configure-ssh-secret.hbs       |  4 +---
 .../components/database-connection.hbs        | 10 ++++-----
 .../components/database-role-edit.hbs         |  5 ++---
 .../templates/components/generated-item.hbs   |  6 ++---
 .../components/identity/edit-form.hbs         |  6 ++---
 .../components/identity/popup-members.hbs     |  5 ++---
 .../components/identity/popup-metadata.hbs    |  5 ++---
 .../components/identity/popup-policy.hbs      |  6 ++---
 .../templates/components/keymgmt/key-edit.hbs | 10 ++++-----
 .../components/keymgmt/provider-edit.hbs      |  5 ++---
 ui/app/templates/components/role-aws-edit.hbs |  4 +---
 ui/app/templates/components/role-ssh-edit.hbs |  4 +---
 .../components/secret-delete-menu.hbs         |  8 ++-----
 .../components/transform-role-edit.hbs        |  5 ++---
 .../components/transit-form-edit.hbs          |  4 +---
 .../components/transit-key-actions.hbs        |  5 ++---
 .../vault/cluster/access/leases/list.hbs      | 10 ++++-----
 .../vault/cluster/access/leases/show.hbs      |  5 ++---
 .../access/mfa/methods/method/index.hbs       |  4 +---
 .../oidc/assignments/assignment/details.hbs   |  5 ++---
 .../access/oidc/clients/client/details.hbs    |  5 ++---
 .../cluster/access/oidc/keys/key/details.hbs  | 10 ++++-----
 .../oidc/providers/provider/details.hbs       |  5 ++---
 .../access/oidc/scopes/scope/details.hbs      |  5 ++---
 .../templates/vault/cluster/policy/edit.hbs   |  4 +---
 .../templates/vault/cluster/settings/seal.hbs |  5 ++---
 .../core/addon/components/confirm-action.js   |  6 ++---
 .../kmip/addon/templates/credentials/show.hbs |  5 ++---
 ui/lib/kmip/addon/templates/role.hbs          |  5 ++---
 .../addon/components/page/role/details.hbs    |  9 +++++---
 .../page/pki-certificate-details.hbs          |  5 ++---
 .../addon/components/page/pki-key-details.hbs |  4 +---
 .../components/page/pki-role-details.hbs      |  4 +---
 .../templates/mode/secondaries/index.hbs      |  5 ++---
 .../templates/mode/secondaries/revoke.hbs     |  5 ++---
 .../components/confirm-action-test.js         | 22 ++-----------------
 36 files changed, 77 insertions(+), 143 deletions(-)

diff --git a/ui/app/templates/components/configure-ssh-secret.hbs b/ui/app/templates/components/configure-ssh-secret.hbs
index 8e61dc38e92b..1dc29f79c8fb 100644
--- a/ui/app/templates/components/configure-ssh-secret.hbs
+++ b/ui/app/templates/components/configure-ssh-secret.hbs
@@ -32,9 +32,7 @@
         @buttonClasses="button"
         @confirmMessage="This will remove the CA certificate information."
         @onConfirmAction={{this.delete}}
-      >
-        Delete
-      </ConfirmAction>
+      />
     </div>
   </div>
 {{else}}
diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs
index 60cdcadc2e65..f92c2c3a87c8 100644
--- a/ui/app/templates/components/database-connection.hbs
+++ b/ui/app/templates/components/database-connection.hbs
@@ -31,15 +31,14 @@
         {{/if}}
         {{#if @model.canReset}}
           <ConfirmAction
+            @buttonText="Reset connection"
             @buttonClasses="toolbar-link"
             @onConfirmAction={{action "reset"}}
             @confirmTitle="Reset connection?"
             @confirmMessage="This will close the connection and its underlying plugin and restart it with the configuration stored in the barrier."
             @confirmButtonText="Reset"
             data-test-database-connection-reset
-          >
-            Reset connection
-          </ConfirmAction>
+          />
         {{/if}}
         {{#if (or @model.canReset @model.canDelete)}}
           <div class="toolbar-separator"></div>
@@ -47,15 +46,14 @@
         {{#if @model.canRotateRoot}}
           {{! template-lint-disable quotes }}
           <ConfirmAction
+            @buttonText="Rotate root credentials"
             @buttonClasses="toolbar-link"
             @onConfirmAction={{this.rotate}}
             @confirmTitle="Rotate credentials?"
             @confirmMessage='This will rotate the "root" user credentials stored for the database connection. The password will not be accessible once rotated.'
             @confirmButtonText="Rotate"
             data-test-database-connection-rotate
-          >
-            Rotate root credentials
-          </ConfirmAction>
+          />
           {{! template-lint-enable }}
         {{/if}}
         {{#if @model.canAddRole}}
diff --git a/ui/app/templates/components/database-role-edit.hbs b/ui/app/templates/components/database-role-edit.hbs
index 95b8bae09f47..f17f3e1348aa 100644
--- a/ui/app/templates/components/database-role-edit.hbs
+++ b/ui/app/templates/components/database-role-edit.hbs
@@ -20,15 +20,14 @@
     <ToolbarActions>
       {{#if @model.canDelete}}
         <ConfirmAction
+          @buttonText="Delete role"
           @buttonClasses="toolbar-link"
           @onConfirmAction={{action "delete"}}
           @confirmTitle="Delete role?"
           @confirmMessage="This role will be permanently deleted. You will need to recreate it to use it again."
           @confirmButtonText="Delete"
           data-test-database-role-delete
-        >
-          Delete role
-        </ConfirmAction>
+        />
         <div class="toolbar-separator"></div>
       {{/if}}
       {{#if (and @model.canRotateRoleCredentials (eq @model.type "static"))}}
diff --git a/ui/app/templates/components/generated-item.hbs b/ui/app/templates/components/generated-item.hbs
index 4e777e482077..c022c6033ccd 100644
--- a/ui/app/templates/components/generated-item.hbs
+++ b/ui/app/templates/components/generated-item.hbs
@@ -33,15 +33,13 @@
   <Toolbar>
     <ToolbarActions>
       <ConfirmAction
+        @buttonText="Delete {{this.itemType}}"
         @buttonClasses="toolbar-link"
         @onConfirmAction={{action "deleteItem"}}
         @confirmMessage={{concat "Are you sure you want to delete " this.itemType " " this.model.id "?"}}
         @cancelButtonText="Cancel"
         data-test-secret-delete="true"
-      >
-        Delete
-        {{this.itemType}}
-      </ConfirmAction>
+      />
       <div class="toolbar-separator"></div>
       <ToolbarLink
         @route="vault.cluster.access.method.item.edit"
diff --git a/ui/app/templates/components/identity/edit-form.hbs b/ui/app/templates/components/identity/edit-form.hbs
index 2b61ef415971..9a1f730378e3 100644
--- a/ui/app/templates/components/identity/edit-form.hbs
+++ b/ui/app/templates/components/identity/edit-form.hbs
@@ -2,13 +2,11 @@
   <Toolbar>
     <ToolbarActions>
       <ConfirmAction
+        @buttonText="Delete {{this.model.identityType}}"
         @buttonClasses="toolbar-link"
         @onConfirmAction={{action "deleteItem" this.model}}
         data-test-entity-item-delete="true"
-      >
-        Delete
-        {{this.model.identityType}}
-      </ConfirmAction>
+      />
     </ToolbarActions>
   </Toolbar>
 {{/if}}
diff --git a/ui/app/templates/components/identity/popup-members.hbs b/ui/app/templates/components/identity/popup-members.hbs
index 3f826c18e312..cff66e0f5058 100644
--- a/ui/app/templates/components/identity/popup-members.hbs
+++ b/ui/app/templates/components/identity/popup-members.hbs
@@ -3,13 +3,12 @@
     <ul class="menu-list">
       <li class="action">
         <ConfirmAction
+          @buttonText="Remove"
           @buttonClasses="link is-destroy"
           @confirmButtonText="Remove this group?"
           @confirmMessage="This may affect permissions for this group."
           @onConfirmAction={{action "performTransaction" this.model this.groupArray this.memberId}}
-        >
-          Remove
-        </ConfirmAction>
+        />
       </li>
     </ul>
   </nav>
diff --git a/ui/app/templates/components/identity/popup-metadata.hbs b/ui/app/templates/components/identity/popup-metadata.hbs
index 4be9be44ca1b..6b3157f5c1c5 100644
--- a/ui/app/templates/components/identity/popup-metadata.hbs
+++ b/ui/app/templates/components/identity/popup-metadata.hbs
@@ -3,14 +3,13 @@
     <ul class="menu-list">
       <li class="action">
         <ConfirmAction
+          @buttonText="Remove"
           @buttonClasses="link is-destroy"
           @confirmTitle="Remove metadata?"
           @confirmMessage="This data may be used outside of Vault."
           @confirmButtonText="Remove"
           @onConfirmAction={{action "performTransaction" this.model this.key}}
-        >
-          Remove
-        </ConfirmAction>
+        />
       </li>
     </ul>
   </nav>
diff --git a/ui/app/templates/components/identity/popup-policy.hbs b/ui/app/templates/components/identity/popup-policy.hbs
index 3459d0f5192f..bbd75fc3b988 100644
--- a/ui/app/templates/components/identity/popup-policy.hbs
+++ b/ui/app/templates/components/identity/popup-policy.hbs
@@ -13,14 +13,12 @@
       </li>
       <li class="action">
         <ConfirmAction
+          @buttonText="Remove from {{this.model.identityType}}"
           @buttonClasses="link is-destroy"
           @confirmButtonText="Remove"
           @confirmMessage="This policy may affect permissions to access Vault data."
           @onConfirmAction={{action "performTransaction" this.model this.policyName}}
-        >
-          Remove from
-          {{this.model.identityType}}
-        </ConfirmAction>
+        />
       </li>
     </ul>
   </nav>
diff --git a/ui/app/templates/components/keymgmt/key-edit.hbs b/ui/app/templates/components/keymgmt/key-edit.hbs
index e642f6ea673b..e28d91ed62ab 100644
--- a/ui/app/templates/components/keymgmt/key-edit.hbs
+++ b/ui/app/templates/components/keymgmt/key-edit.hbs
@@ -72,6 +72,7 @@
         {{/if}}
         {{#if @model.provider}}
           <ConfirmAction
+            @buttonText="Remove key"
             @buttonClasses="toolbar-link"
             @onConfirmAction={{perform this.removeKey}}
             @confirmTitle="Remove this key?"
@@ -79,14 +80,13 @@
             @confirmButtonText="Remove"
             @isRunning={{this.removeKey.isRunning}}
             data-test-keymgmt-key-remove
-          >
-            Remove key
-          </ConfirmAction>
+          />
         {{/if}}
         {{#if (or @model.canDelete @model.provider)}}
           <div class="toolbar-separator"></div>
         {{/if}}
         <ConfirmAction
+          @buttonText="Rotate key"
           @buttonClasses="toolbar-link"
           @onConfirmAction={{perform this.rotateKey}}
           @confirmTitle="Rotate this key?"
@@ -94,9 +94,7 @@
           @confirmButtonText="Rotate"
           @isRunning={{this.rotateKey.isRunning}}
           data-test-keymgmt-key-rotate
-        >
-          Rotate key
-        </ConfirmAction>
+        />
         {{#if @model.canEdit}}
           <ToolbarSecretLink
             @secret={{@model.id}}
diff --git a/ui/app/templates/components/keymgmt/provider-edit.hbs b/ui/app/templates/components/keymgmt/provider-edit.hbs
index 57757eb561fd..6f0de71e8324 100644
--- a/ui/app/templates/components/keymgmt/provider-edit.hbs
+++ b/ui/app/templates/components/keymgmt/provider-edit.hbs
@@ -45,13 +45,12 @@
             <ToolTip @verticalPosition="above" @horizontalPosition="center" as |T|>
               <T.Trigger data-test-tooltip-trigger>
                 <ConfirmAction
+                  @buttonText="Delete provider"
                   @buttonClasses="toolbar-link"
                   @onConfirmAction={{this.onDelete}}
                   @disabled={{@model.keys.length}}
                   data-test-kms-provider-delete={{true}}
-                >
-                  Delete provider
-                </ConfirmAction>
+                />
               </T.Trigger>
               {{#if @model.keys.length}}
                 <T.Content class="tool-tip">
diff --git a/ui/app/templates/components/role-aws-edit.hbs b/ui/app/templates/components/role-aws-edit.hbs
index 119535b56e64..dabd15c580e5 100644
--- a/ui/app/templates/components/role-aws-edit.hbs
+++ b/ui/app/templates/components/role-aws-edit.hbs
@@ -27,9 +27,7 @@
   <Toolbar>
     <ToolbarActions>
       {{#if this.model.canDelete}}
-        <ConfirmAction @buttonClasses="toolbar-link" @onConfirmAction={{action "delete"}}>
-          Delete role
-        </ConfirmAction>
+        <ConfirmAction @buttonText="Delete role" @buttonClasses="toolbar-link" @onConfirmAction={{action "delete"}} />
         <div class="toolbar-separator"></div>
       {{/if}}
       {{#if this.model.canGenerate}}
diff --git a/ui/app/templates/components/role-ssh-edit.hbs b/ui/app/templates/components/role-ssh-edit.hbs
index 7e9d36a3baa6..deeb9b36f403 100644
--- a/ui/app/templates/components/role-ssh-edit.hbs
+++ b/ui/app/templates/components/role-ssh-edit.hbs
@@ -26,9 +26,7 @@
   <Toolbar>
     <ToolbarActions>
       {{#if this.model.canDelete}}
-        <ConfirmAction @buttonClasses="toolbar-link" @onConfirmAction={{action "delete"}}>
-          Delete role
-        </ConfirmAction>
+        <ConfirmAction @buttonText="Delete role" @buttonClasses="toolbar-link" @onConfirmAction={{action "delete"}} />
         <div class="toolbar-separator"></div>
       {{/if}}
       {{#if (eq this.model.keyType "otp")}}
diff --git a/ui/app/templates/components/secret-delete-menu.hbs b/ui/app/templates/components/secret-delete-menu.hbs
index b9aee8427916..2c479cab40df 100644
--- a/ui/app/templates/components/secret-delete-menu.hbs
+++ b/ui/app/templates/components/secret-delete-menu.hbs
@@ -23,9 +23,7 @@
           @confirmMessage="Deleting this secret removes read access, but the underlying data will not be removed and can be undeleted later."
           @onConfirmAction={{action "handleDelete" (if this.canSoftDeleteSecretData "soft-delete" "delete-latest-version")}}
           data-test-secret-v2-delete="true"
-        >
-          Delete
-        </ConfirmAction>
+        />
       {{/if}}
     {{/if}}
   {{/if}}
@@ -138,8 +136,6 @@
     @confirmMessage="You will not be able to recover this secret data later."
     @onConfirmAction={{action "handleDelete" "v1"}}
     data-test-secret-v1-delete="true"
-  >
-    Delete
-  </ConfirmAction>
+  />
   <div class="toolbar-separator"></div>
 {{/if}}
\ No newline at end of file
diff --git a/ui/app/templates/components/transform-role-edit.hbs b/ui/app/templates/components/transform-role-edit.hbs
index b54661cd13ec..4252e006cfc8 100644
--- a/ui/app/templates/components/transform-role-edit.hbs
+++ b/ui/app/templates/components/transform-role-edit.hbs
@@ -27,15 +27,14 @@
     <ToolbarActions>
       {{#if this.capabilities.canDelete}}
         <ConfirmAction
+          @buttonText="Delete role"
           @buttonClasses="toolbar-link"
           @onConfirmAction={{action "delete"}}
           @confirmTitle="Are you sure?"
           @confirmMessage="Deleting this role means that you’ll need to recreate it and reassign any existing transformations to use it again."
           @confirmButtonText="Delete"
           data-test-transformation-role-delete
-        >
-          Delete role
-        </ConfirmAction>
+        />
         <div class="toolbar-separator"></div>
       {{/if}}
       {{#if this.capabilities.canUpdate}}
diff --git a/ui/app/templates/components/transit-form-edit.hbs b/ui/app/templates/components/transit-form-edit.hbs
index 220145c87b4a..cd731da23488 100644
--- a/ui/app/templates/components/transit-form-edit.hbs
+++ b/ui/app/templates/components/transit-form-edit.hbs
@@ -98,9 +98,7 @@
       </div>
     </div>
     {{#if (and @key.canDelete @capabilities.canDelete)}}
-      <ConfirmAction @buttonClasses="button" @onConfirmAction={{@deleteKey}}>
-        Delete transit key
-      </ConfirmAction>
+      <ConfirmAction @buttonText="Delete transit key" @buttonClasses="button" @onConfirmAction={{@deleteKey}} />
     {{/if}}
   </div>
 </form>
\ No newline at end of file
diff --git a/ui/app/templates/components/transit-key-actions.hbs b/ui/app/templates/components/transit-key-actions.hbs
index c7bb6f030813..757906af7176 100644
--- a/ui/app/templates/components/transit-key-actions.hbs
+++ b/ui/app/templates/components/transit-key-actions.hbs
@@ -1,15 +1,14 @@
 {{#if (eq this.selectedAction "rotate")}}
   {{#if this.key.canRotate}}
     <ConfirmAction
+      @buttonText="Rotate encryption key"
       @buttonClasses="toolbar-link"
       @confirmTitle="Rotate this key?"
       @confirmMessage="After rotation, all key actions will default to using the newest version of the key."
       @confirmButtonText="Rotate"
       @onConfirmAction={{action "doSubmit"}}
       data-test-transit-key-rotate="true"
-    >
-      Rotate encryption key
-    </ConfirmAction>
+    />
   {{/if}}
 {{else}}
   <MessageError @errors={{this.errors}} />
diff --git a/ui/app/templates/vault/cluster/access/leases/list.hbs b/ui/app/templates/vault/cluster/access/leases/list.hbs
index 017da9cac6fa..812be2af6072 100644
--- a/ui/app/templates/vault/cluster/access/leases/list.hbs
+++ b/ui/app/templates/vault/cluster/access/leases/list.hbs
@@ -55,28 +55,26 @@
       <div class="control">
         {{#if (and this.capabilities.forceRevokePrefix.canUpdate (not this.confirmingRevoke))}}
           <ConfirmAction
+            @buttonText="Force revoke prefix"
             @buttonClasses="toolbar-link"
             @confirmTitle="Disable this?"
             @confirmMessage={{concat "All leases under this one will also be removed and disregard any errors encountered."}}
             @confirmButtonText="Revoke"
             @onConfirmAction={{action "revokePrefix" this.baseKey.id true}}
-          >
-            Force revoke prefix
-          </ConfirmAction>
+          />
         {{/if}}
       </div>
       <div class="control">
         {{#if (and this.capabilities.revokePrefix.canUpdate (not this.confirmingForceRevoke))}}
           <ConfirmAction
+            @buttonText="Revoke prefix"
             @buttonClasses="toolbar-link"
             @confirmTitle="Revoke this?"
             @confirmMessage={{concat "All leases under this one will also be removed"}}
             @confirmButtonText="Revoke"
             @onConfirmAction={{action "revokePrefix" this.baseKey.id}}
             data-test-lease-revoke-prefix="true"
-          >
-            Revoke prefix
-          </ConfirmAction>
+          />
         {{/if}}
       </div>
     {{/if}}
diff --git a/ui/app/templates/vault/cluster/access/leases/show.hbs b/ui/app/templates/vault/cluster/access/leases/show.hbs
index 7f55c0c27f43..6e77b1630f8f 100644
--- a/ui/app/templates/vault/cluster/access/leases/show.hbs
+++ b/ui/app/templates/vault/cluster/access/leases/show.hbs
@@ -21,15 +21,14 @@
   <Toolbar>
     <ToolbarActions>
       <ConfirmAction
+        @buttonText="Revoke lease"
         @buttonClasses="toolbar-link"
         @confirmTitle="Revoke this?"
         @confirmMessage={{concat "All leases under this one will also be removed"}}
         @confirmButtonText="Confirm"
         @onConfirmAction={{action "revokeLease" this.model}}
         data-test-lease-revoke="true"
-      >
-        Revoke lease
-      </ConfirmAction>
+      />
     </ToolbarActions>
   </Toolbar>
 {{/if}}
diff --git a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
index bcbd77bd831a..95ff574d0762 100644
--- a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
+++ b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
@@ -46,9 +46,7 @@
         @confirmTitle="Are you sure?"
         @confirmMessage="Deleting this MFA configuration is permanent, and it will no longer be available."
         @confirmButtonText="Delete"
-      >
-        Delete
-      </ConfirmAction>
+      />
       <ToolbarLink
         @route="vault.cluster.access.mfa.methods.method.edit"
         @model={{this.model.method.id}}
diff --git a/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/details.hbs b/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/details.hbs
index e7ff6591c17d..84575893f288 100644
--- a/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/details.hbs
@@ -36,15 +36,14 @@
   <ToolbarActions>
     {{#if @model.canDelete}}
       <ConfirmAction
+        @buttonText="Delete assignment"
         @buttonClasses="toolbar-link"
         @onConfirmAction={{this.delete}}
         @confirmTitle="Delete assignment?"
         @confirmMessage="This assignment will be permanently deleted. You will not be able to recover it."
         @confirmButtonText="Delete"
         data-test-oidc-assignment-delete
-      >
-        Delete assignment
-      </ConfirmAction>
+      />
       <div class="toolbar-separator"></div>
     {{/if}}
     {{#if @model.canEdit}}
diff --git a/ui/app/templates/vault/cluster/access/oidc/clients/client/details.hbs b/ui/app/templates/vault/cluster/access/oidc/clients/client/details.hbs
index b40addd213fc..7fd5b05db901 100644
--- a/ui/app/templates/vault/cluster/access/oidc/clients/client/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/clients/client/details.hbs
@@ -3,14 +3,13 @@
     {{#if this.model.canDelete}}
       <ConfirmAction
         data-test-oidc-client-delete
+        @buttonText="Delete application"
         @buttonClasses="toolbar-link"
         @onConfirmAction={{this.delete}}
         @confirmTitle="Delete application?"
         @confirmMessage="This application will be permanently deleted. You will need to re-create it to use it again."
         @confirmButtonText="Delete"
-      >
-        Delete application
-      </ConfirmAction>
+      />
       <div class="toolbar-separator"></div>
     {{/if}}
     {{#if this.model.canEdit}}
diff --git a/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs b/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs
index 837279042f4c..e784e34ad8a1 100644
--- a/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs
@@ -4,6 +4,7 @@
       <ToolTip @verticalPosition="above" as |T|>
         <T.Trigger tabindex="-1">
           <ConfirmAction
+            @buttonText="Delete key"
             data-test-oidc-key-delete
             @disabled={{eq this.model.name "default"}}
             @buttonClasses="toolbar-link"
@@ -11,9 +12,7 @@
             @confirmTitle="Delete key?"
             @confirmMessage="This key will be permanently deleted. You will not be able to recover it."
             @confirmButtonText="Delete"
-          >
-            Delete key
-          </ConfirmAction>
+          />
         </T.Trigger>
         {{#if (eq this.model.name "default")}}
           <T.Content @defaultClass="tool-tip smaller-font">
@@ -27,6 +26,7 @@
     {{/if}}
     {{#if this.model.canRotate}}
       <ConfirmAction
+        @buttonText="Rotate key"
         data-test-oidc-key-rotate
         @buttonClasses="toolbar-link"
         @onConfirmAction={{perform this.rotateKey}}
@@ -34,9 +34,7 @@
         @confirmMessage="After rotation, a new public/private key pair will be generated."
         @confirmButtonText="Rotate"
         @isRunning={{this.rotateKey.isRunning}}
-      >
-        Rotate key
-      </ConfirmAction>
+      />
     {{/if}}
     {{#if this.model.canEdit}}
       <ToolbarLink @route="vault.cluster.access.oidc.keys.key.edit" @model={{this.model.name}} data-test-oidc-key-edit>
diff --git a/ui/app/templates/vault/cluster/access/oidc/providers/provider/details.hbs b/ui/app/templates/vault/cluster/access/oidc/providers/provider/details.hbs
index 377d9623df67..01cc0a048c4c 100644
--- a/ui/app/templates/vault/cluster/access/oidc/providers/provider/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/providers/provider/details.hbs
@@ -5,15 +5,14 @@
         <T.Trigger tabindex="-1">
           <ConfirmAction
             data-test-oidc-provider-delete
+            @buttonText="Delete provider"
             @disabled={{eq this.model.name "default"}}
             @buttonClasses="toolbar-link"
             @onConfirmAction={{this.delete}}
             @confirmTitle="Delete provider?"
             @confirmMessage="This provider will be permanently deleted. You will need to re-create it to use it again."
             @confirmButtonText="Delete"
-          >
-            Delete provider
-          </ConfirmAction>
+          />
         </T.Trigger>
         {{#if (eq this.model.name "default")}}
           <T.Content @defaultClass="tool-tip smaller-font">
diff --git a/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs b/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs
index 3021c4b20cf4..5a2b100de692 100644
--- a/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs
@@ -33,14 +33,13 @@
     {{#if this.model.canDelete}}
       <ConfirmAction
         data-test-oidc-scope-delete
+        @buttonText="Delete scope"
         @buttonClasses="toolbar-link"
         @onConfirmAction={{this.delete}}
         @confirmTitle="Delete scope?"
         @confirmMessage="This scope will be permanently deleted. You will not be able to recover it."
         @confirmButtonText="Delete"
-      >
-        Delete scope
-      </ConfirmAction>
+      />
       <div class="toolbar-separator"></div>
     {{/if}}
     {{#if this.model.canEdit}}
diff --git a/ui/app/templates/vault/cluster/policy/edit.hbs b/ui/app/templates/vault/cluster/policy/edit.hbs
index bd057e4e9f3d..f3eba912bb58 100644
--- a/ui/app/templates/vault/cluster/policy/edit.hbs
+++ b/ui/app/templates/vault/cluster/policy/edit.hbs
@@ -30,9 +30,7 @@
           @confirmMessage="This may affect access to Vault data."
           @onConfirmAction={{this.deletePolicy}}
           data-test-policy-delete="true"
-        >
-          Delete
-        </ConfirmAction>
+        />
         <div class="toolbar-separator"></div>
       {{/if}}
       <ToolbarLink @route="vault.cluster.policy.show" @model={{this.model.id}} data-test-policy-edit-toggle>
diff --git a/ui/app/templates/vault/cluster/settings/seal.hbs b/ui/app/templates/vault/cluster/settings/seal.hbs
index 586e38a350b0..2110040dd61a 100644
--- a/ui/app/templates/vault/cluster/settings/seal.hbs
+++ b/ui/app/templates/vault/cluster/settings/seal.hbs
@@ -16,6 +16,7 @@
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <ConfirmAction
+      @buttonText="Seal"
       @buttonClasses="button is-primary"
       @confirmTitle="Seal this cluster?"
       @confirmMessage="You will not be able to read or write any data until the cluster is unsealed again."
@@ -23,9 +24,7 @@
       @horizontalPosition="auto-left"
       @onConfirmAction={{action "seal"}}
       data-test-seal="true"
-    >
-      Seal
-    </ConfirmAction>
+    />
   </div>
 {{else}}
   <EmptyState @title="This token does not have sufficient capabilities to seal this vault" />
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index fa4ab27955ba..44564eb6e139 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -15,10 +15,10 @@ import { tracked } from '@glimmer/tracking';
  * @example
  * ```js
  *  <ConfirmAction
+ *    @buttonText="Delete item"
  *    @onConfirmAction={{ () => { console.log('Action!') } }}
- *    @confirmMessage="Are you sure you want to delete this config?">
- *    Delete
- *  </ConfirmAction>
+ *    @confirmMessage="Are you sure you want to delete this config?"
+ *  />
  * ```
  *
  * @param {Func} onConfirmAction - The action to take upon confirming.
diff --git a/ui/lib/kmip/addon/templates/credentials/show.hbs b/ui/lib/kmip/addon/templates/credentials/show.hbs
index 4b24fd20d470..acf44c1a3d37 100644
--- a/ui/lib/kmip/addon/templates/credentials/show.hbs
+++ b/ui/lib/kmip/addon/templates/credentials/show.hbs
@@ -12,15 +12,14 @@
   <ToolbarActions>
     {{#if this.model.deletePath.canDelete}}
       <ConfirmAction
+        @buttonText="Revoke credentials"
         @buttonClasses="toolbar-link"
         @onConfirmAction={{this.revokeCredentials}}
         @confirmTitle="Revoke this?"
         @confirmMessage="Any client using these credentials will no longer be able to."
         @cancelButtonText="Cancel"
         @confirmButtonText="Revoke"
-      >
-        Revoke credentials
-      </ConfirmAction>
+      />
       <div class="toolbar-separator"></div>
     {{/if}}
     <ToolbarLink @route="credentials.index" @models={{array this.scope this.role}} data-test-kmip-link-back-to-role>
diff --git a/ui/lib/kmip/addon/templates/role.hbs b/ui/lib/kmip/addon/templates/role.hbs
index 373e470032f8..48b7322db043 100644
--- a/ui/lib/kmip/addon/templates/role.hbs
+++ b/ui/lib/kmip/addon/templates/role.hbs
@@ -3,13 +3,12 @@
   <ToolbarActions>
     {{#if this.model.updatePath.canUpdate}}
       <ConfirmAction
+        @buttonText="Delete role"
         @buttonClasses="toolbar-link"
         @onConfirmAction={{this.deleteRole}}
         @confirmMessage={{concat "Are you sure you want to delete " this.model.id "?"}}
         @cancelButtonText="Cancel"
-      >
-        Delete role
-      </ConfirmAction>
+      />
       <div class="toolbar-separator"></div>
     {{/if}}
     {{#if this.model.updatePath.canUpdate}}
diff --git a/ui/lib/kubernetes/addon/components/page/role/details.hbs b/ui/lib/kubernetes/addon/components/page/role/details.hbs
index 9001a7c781fd..1373192aaded 100644
--- a/ui/lib/kubernetes/addon/components/page/role/details.hbs
+++ b/ui/lib/kubernetes/addon/components/page/role/details.hbs
@@ -12,9 +12,12 @@
 <Toolbar>
   <ToolbarActions>
     {{#if @model.canDelete}}
-      <ConfirmAction @buttonClasses="toolbar-link" @onConfirmAction={{this.delete}} data-test-delete>
-        Delete role
-      </ConfirmAction>
+      <ConfirmAction
+        @buttonText="Delete role"
+        @buttonClasses="toolbar-link"
+        @onConfirmAction={{this.delete}}
+        data-test-delete
+      />
       <div class="toolbar-separator"></div>
     {{/if}}
     {{#if @model.canGenerateCreds}}
diff --git a/ui/lib/pki/addon/components/page/pki-certificate-details.hbs b/ui/lib/pki/addon/components/page/pki-certificate-details.hbs
index ba79e7ad610e..bacd559707c1 100644
--- a/ui/lib/pki/addon/components/page/pki-certificate-details.hbs
+++ b/ui/lib/pki/addon/components/page/pki-certificate-details.hbs
@@ -6,14 +6,13 @@
     </button>
     {{#if @model.canRevoke}}
       <ConfirmAction
+        @buttonText="Revoke certificate"
         @buttonClasses="toolbar-link"
         @onConfirmAction={{fn (perform this.revoke)}}
         @confirmTitle="Revoke certificate?"
         @confirmButtonText="Revoke"
         data-test-pki-cert-revoke-button
-      >
-        Revoke certificate
-      </ConfirmAction>
+      />
     {{/if}}
   </ToolbarActions>
 </Toolbar>
diff --git a/ui/lib/pki/addon/components/page/pki-key-details.hbs b/ui/lib/pki/addon/components/page/pki-key-details.hbs
index 09453bd4352e..b8ef9beac56c 100644
--- a/ui/lib/pki/addon/components/page/pki-key-details.hbs
+++ b/ui/lib/pki/addon/components/page/pki-key-details.hbs
@@ -7,9 +7,7 @@
         @confirmTitle="Delete key?"
         @confirmButtonText="Delete"
         data-test-pki-key-delete
-      >
-        Delete
-      </ConfirmAction>
+      />
       <div class="toolbar-separator"></div>
     {{/if}}
     {{#if @key.privateKey}}
diff --git a/ui/lib/pki/addon/components/page/pki-role-details.hbs b/ui/lib/pki/addon/components/page/pki-role-details.hbs
index 71e2e9e4af67..7fbdbe3292bc 100644
--- a/ui/lib/pki/addon/components/page/pki-role-details.hbs
+++ b/ui/lib/pki/addon/components/page/pki-role-details.hbs
@@ -7,9 +7,7 @@
         @confirmTitle="Delete role?"
         @confirmButtonText="Delete"
         data-test-pki-role-delete
-      >
-        Delete
-      </ConfirmAction>
+      />
       <div class="toolbar-separator"></div>
     {{/if}}
     {{#if @role.canGenerateCert}}
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/index.hbs b/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
index 6c4584eac37f..0ebb0c354cca 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
@@ -41,15 +41,14 @@
                     {{#if this.model.canRevokeSecondary}}
                       <li class="action">
                         <ConfirmAction
+                          @buttonText="Revoke"
                           @buttonClasses="button link is-destroy"
                           @confirmTitle="Revoke token?"
                           @confirmMessage="This will revoke this secondary token."
                           @confirmButtonText="Revoke"
                           @horizontalPosition="auto-left"
                           @onConfirmAction={{action "onSubmit" "revoke-secondary" "primary" (hash id=secondary)}}
-                        >
-                          Revoke
-                        </ConfirmAction>
+                        />
                       </li>
                     {{/if}}
                   </ul>
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs b/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs
index e183e6af6b6f..7f11202d7ae1 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs
@@ -18,6 +18,7 @@
 <div class="field is-grouped box is-fullwidth is-bottomless">
   <div class="control">
     <ConfirmAction
+      @buttonText="Revoke"
       @buttonClasses="button is-primary"
       @confirmTitle="Revoke token?"
       @confirmMessage="This will revoke this secondary token."
@@ -26,9 +27,7 @@
       @disabledMessage="A secondary ID is required perform revocation."
       @horizontalPosition="auto-left"
       @onConfirmAction={{action "onSubmit" "revoke-secondary" "primary" (hash id=this.id)}}
-    >
-      Revoke
-    </ConfirmAction>
+    />
   </div>
   <div class="control">
     {{#unless this.isRevoking}}
diff --git a/ui/tests/integration/components/confirm-action-test.js b/ui/tests/integration/components/confirm-action-test.js
index 9b30c33266f2..b88ef66b6d79 100644
--- a/ui/tests/integration/components/confirm-action-test.js
+++ b/ui/tests/integration/components/confirm-action-test.js
@@ -12,33 +12,15 @@ import sinon from 'sinon';
 module('Integration | Component | confirm-action', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders and on click shows the correct icon', async function (assert) {
-    const confirmAction = sinon.spy();
-    this.set('onConfirm', confirmAction);
-    await render(hbs`
-      <ConfirmAction
-        @onConfirmAction={{this.onConfirm}}
-        @buttonClasses="toolbar-link"
-      >
-        DELETE
-        </ConfirmAction>
-      `);
-    assert.dom('[data-test-icon="chevron-down"]').exists('Icon is pointing down');
-    await click('[data-test-confirm-action-trigger="true"]');
-    assert.dom('[data-test-icon="chevron-up"]').exists('Icon is now pointing up');
-    assert.dom('[data-test-confirm-action-title]').hasText('Delete this?');
-  });
-
   test('it closes the confirmation modal on successful delete', async function (assert) {
     const confirmAction = sinon.spy();
     this.set('onConfirm', confirmAction);
     await render(hbs`
       <ConfirmAction
+        @buttonText="DELETE"
         @onConfirmAction={{this.onConfirm}}
         @buttonClasses="toolbar-link"
-      >
-        DELETE
-        </ConfirmAction>
+      />
       `);
     await click('[data-test-confirm-action-trigger="true"]');
     await click('[data-test-confirm-cancel-button="true"]');

From e956d3432df43acbf1065aef8a4240e9a7301c0e Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 29 Jun 2023 21:10:12 -0700
Subject: [PATCH 05/42] add warning color to rotate modals

---
 ui/app/templates/components/database-connection.hbs    |  1 +
 ui/app/templates/components/keymgmt/key-edit.hbs       |  1 +
 ui/app/templates/components/transform-role-edit.hbs    |  1 -
 ui/app/templates/components/transit-key-actions.hbs    |  1 +
 ui/app/templates/vault/cluster/access/leases/list.hbs  |  4 ++--
 .../vault/cluster/access/mfa/methods/method/index.hbs  |  1 -
 .../vault/cluster/access/oidc/keys/key/details.hbs     |  1 +
 ui/lib/core/addon/components/confirm-action.hbs        | 10 ++++++++--
 ui/lib/core/addon/components/confirm-action.js         |  3 ++-
 9 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs
index f92c2c3a87c8..6d2833fa8dfe 100644
--- a/ui/app/templates/components/database-connection.hbs
+++ b/ui/app/templates/components/database-connection.hbs
@@ -52,6 +52,7 @@
             @confirmTitle="Rotate credentials?"
             @confirmMessage='This will rotate the "root" user credentials stored for the database connection. The password will not be accessible once rotated.'
             @confirmButtonText="Rotate"
+            @color="warning"
             data-test-database-connection-rotate
           />
           {{! template-lint-enable }}
diff --git a/ui/app/templates/components/keymgmt/key-edit.hbs b/ui/app/templates/components/keymgmt/key-edit.hbs
index e28d91ed62ab..71ec7d744fe7 100644
--- a/ui/app/templates/components/keymgmt/key-edit.hbs
+++ b/ui/app/templates/components/keymgmt/key-edit.hbs
@@ -92,6 +92,7 @@
           @confirmTitle="Rotate this key?"
           @confirmMessage="After rotation, all key actions will default to using the newest version of the key."
           @confirmButtonText="Rotate"
+          @color="warning"
           @isRunning={{this.rotateKey.isRunning}}
           data-test-keymgmt-key-rotate
         />
diff --git a/ui/app/templates/components/transform-role-edit.hbs b/ui/app/templates/components/transform-role-edit.hbs
index 4252e006cfc8..23715c314d6f 100644
--- a/ui/app/templates/components/transform-role-edit.hbs
+++ b/ui/app/templates/components/transform-role-edit.hbs
@@ -30,7 +30,6 @@
           @buttonText="Delete role"
           @buttonClasses="toolbar-link"
           @onConfirmAction={{action "delete"}}
-          @confirmTitle="Are you sure?"
           @confirmMessage="Deleting this role means that you’ll need to recreate it and reassign any existing transformations to use it again."
           @confirmButtonText="Delete"
           data-test-transformation-role-delete
diff --git a/ui/app/templates/components/transit-key-actions.hbs b/ui/app/templates/components/transit-key-actions.hbs
index 757906af7176..fa4d3bcff86e 100644
--- a/ui/app/templates/components/transit-key-actions.hbs
+++ b/ui/app/templates/components/transit-key-actions.hbs
@@ -6,6 +6,7 @@
       @confirmTitle="Rotate this key?"
       @confirmMessage="After rotation, all key actions will default to using the newest version of the key."
       @confirmButtonText="Rotate"
+      @color="warning"
       @onConfirmAction={{action "doSubmit"}}
       data-test-transit-key-rotate="true"
     />
diff --git a/ui/app/templates/vault/cluster/access/leases/list.hbs b/ui/app/templates/vault/cluster/access/leases/list.hbs
index 812be2af6072..8595ac8a0244 100644
--- a/ui/app/templates/vault/cluster/access/leases/list.hbs
+++ b/ui/app/templates/vault/cluster/access/leases/list.hbs
@@ -58,7 +58,7 @@
             @buttonText="Force revoke prefix"
             @buttonClasses="toolbar-link"
             @confirmTitle="Disable this?"
-            @confirmMessage={{concat "All leases under this one will also be removed and disregard any errors encountered."}}
+            @confirmMessage="All leases under this one will also be removed and disregard any errors encountered."
             @confirmButtonText="Revoke"
             @onConfirmAction={{action "revokePrefix" this.baseKey.id true}}
           />
@@ -70,7 +70,7 @@
             @buttonText="Revoke prefix"
             @buttonClasses="toolbar-link"
             @confirmTitle="Revoke this?"
-            @confirmMessage={{concat "All leases under this one will also be removed"}}
+            @confirmMessage="All leases under this one will also be removed"
             @confirmButtonText="Revoke"
             @onConfirmAction={{action "revokePrefix" this.baseKey.id}}
             data-test-lease-revoke-prefix="true"
diff --git a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
index 95ff574d0762..a22cde6711e2 100644
--- a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
+++ b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
@@ -43,7 +43,6 @@
         @buttonClasses="toolbar-link"
         @disabled={{not (is-empty this.model.enforcements)}}
         @onConfirmAction={{this.deleteMethod}}
-        @confirmTitle="Are you sure?"
         @confirmMessage="Deleting this MFA configuration is permanent, and it will no longer be available."
         @confirmButtonText="Delete"
       />
diff --git a/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs b/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs
index e784e34ad8a1..3dfe02661859 100644
--- a/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs
@@ -33,6 +33,7 @@
         @confirmTitle="Rotate this key?"
         @confirmMessage="After rotation, a new public/private key pair will be generated."
         @confirmButtonText="Rotate"
+        @color="warning"
         @isRunning={{this.rotateKey.isRunning}}
       />
     {{/if}}
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index 0db264ba2043..f9b199eff3bd 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -7,7 +7,13 @@
 />
 
 {{#if this.showConfirmModal}}
-  <Hds::Modal id="basic-modal" @color="critical" @size="medium" @onClose={{fn (mut this.showConfirmModal) false}} as |M|>
+  <Hds::Modal
+    id="basic-modal"
+    @color={{or @color "critical"}}
+    @size="medium"
+    @onClose={{fn (mut this.showConfirmModal) false}}
+    as |M|
+  >
     <M.Header data-test-confirm-action-title @icon="alert-diamond">
       {{or @confirmTitle "Are you sure?"}}
     </M.Header>
@@ -21,7 +27,7 @@
           disabled={{or @disabled @isRunning}}
           @icon={{if @isRunning "loading"}}
           type="button"
-          @color="critical"
+          @color={{or @color "critical"}}
           @text={{or @confirmButtonText "Delete"}}
           {{on "click" this.onConfirm}}
         />
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 44564eb6e139..f328139cddd5 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -22,13 +22,14 @@ import { tracked } from '@glimmer/tracking';
  * ```
  *
  * @param {Func} onConfirmAction - The action to take upon confirming.
- * @param {String} [confirmTitle=Delete this?] - The title to display in the confirmation modal.
+ * @param {String} [confirmTitle=Are you sure?] - The title to display in the confirmation modal.
  * @param {String} [confirmMessage=You will not be able to recover it later.] - The message to display when confirming.
  * @param {String} [confirmButtonText=Delete] - The confirm button text.
  * @param {String} [cancelButtonText=Cancel] - The cancel button text.
  * @param {String} [buttonClasses] - A string to indicate the button class.
  * @param {Boolean} [isRunning] - Disables the confirm button if action is still running
  * @param {Boolean} [disabled] - To disable the confirm button.
+ * @param {String} [color=critical] - Changes the color of modal and confirm button
  *
  */
 

From 4395212fe552f97ce3c16588a31f49ab72e972ca Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 16:33:51 -0800
Subject: [PATCH 06/42] update seal action and config ssh

---
 ui/app/components/seal-action.hbs                    | 8 ++------
 ui/app/templates/components/configure-ssh-secret.hbs | 3 ++-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/ui/app/components/seal-action.hbs b/ui/app/components/seal-action.hbs
index ae966e676f6f..b3c8e8b0b53c 100644
--- a/ui/app/components/seal-action.hbs
+++ b/ui/app/components/seal-action.hbs
@@ -21,14 +21,10 @@
 
 <div class="field is-grouped box is-fullwidth is-bottomless">
   <ConfirmAction
-    @buttonClasses="button is-primary"
     @confirmTitle="Seal this cluster?"
     @confirmMessage="You will not be able to read or write any data until the cluster is unsealed again."
-    @confirmButtonText="Seal"
-    @horizontalPosition="auto-left"
     @onConfirmAction={{this.handleSeal}}
     data-test-seal
-  >
-    Seal
-  </ConfirmAction>
+    @buttonText="Seal"
+  />
 </div>
\ No newline at end of file
diff --git a/ui/app/templates/components/configure-ssh-secret.hbs b/ui/app/templates/components/configure-ssh-secret.hbs
index 60e74c1b0ef9..a1b51dcb802d 100644
--- a/ui/app/templates/components/configure-ssh-secret.hbs
+++ b/ui/app/templates/components/configure-ssh-secret.hbs
@@ -27,7 +27,8 @@
     </div>
     <div class="control">
       <ConfirmAction
-        @buttonClasses="button"
+        @buttonText="Delete"
+        @buttonColor="secondary"
         @confirmMessage="This will remove the CA certificate information."
         @onConfirmAction={{this.delete}}
       />

From b87960449f5f114a6f7eeabc8cbbda1cafe64b26 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 16:34:02 -0800
Subject: [PATCH 07/42] cleanup confirm action

---
 ui/lib/core/addon/components/confirm-action.hbs | 17 +++++------------
 ui/lib/core/addon/components/confirm-action.js  |  9 +++++----
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index d5351a447fd9..fc3886f82ecf 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -2,19 +2,19 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: BUSL-1.1
 ~}}
+
 <Hds::Button
   data-test-confirm-action-trigger
   class={{@buttonClasses}}
   @text={{@buttonText}}
-  @color="secondary"
+  @color={{@buttonColor}}
   {{on "click" (fn (mut this.showConfirmModal) true)}}
 />
 
 {{#if this.showConfirmModal}}
   <Hds::Modal
-    id="basic-modal"
+    id="confirm-action-modal"
     @color={{or @color "critical"}}
-    @size="medium"
     @onClose={{fn (mut this.showConfirmModal) false}}
     as |M|
   >
@@ -30,18 +30,11 @@
           data-test-confirm-button
           disabled={{or @disabled @isRunning}}
           @icon={{if @isRunning "loading"}}
-          type="button"
           @color={{or @color "critical"}}
-          @text={{or @confirmButtonText "Delete"}}
+          @text="Confirm"
           {{on "click" this.onConfirm}}
         />
-        <Hds::Button
-          data-test-confirm-cancel-button
-          type="button"
-          @color="secondary"
-          @text={{or @cancelButtonText "Cancel"}}
-          {{on "click" F.close}}
-        />
+        <Hds::Button data-test-confirm-cancel-button @color="secondary" @text="Cancel" {{on "click" F.close}} />
       </Hds::ButtonSet>
     </M.Footer>
   </Hds::Modal>
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 235e4af7bc1f..61804948c6d1 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -10,7 +10,9 @@ import { tracked } from '@glimmer/tracking';
 
 /**
  * @module ConfirmAction
- * `ConfirmAction` is a button followed by a pop up confirmation message and button used to prevent users from performing actions they do not intend to.
+ * ConfirmAction is a button that opens a modal containing a confirmation message with confirm or cancel action.
+ * Splattributes are spread to the button element to apply styling directly without adding extra args.
+ * The default button is the same as Hds::Button which is primary blue
  *
  * @example
  * ```js
@@ -24,9 +26,8 @@ import { tracked } from '@glimmer/tracking';
  * @param {Func} onConfirmAction - The action to take upon confirming.
  * @param {String} [confirmTitle=Are you sure?] - The title to display in the confirmation modal.
  * @param {String} [confirmMessage=You will not be able to recover it later.] - The message to display when confirming.
- * @param {String} [confirmButtonText=Delete] - The confirm button text.
- * @param {String} [cancelButtonText=Cancel] - The cancel button text.
- * @param {String} [buttonClasses] - A string to indicate the button class.
+ * @param {String} buttonText - Text for the button that triggers modal to open.
+ * @param {String} buttonColor - Color of button that triggers modal. Default is primary, other options are secondary, tertiary, and critical
  * @param {Boolean} [isRunning] - Disables the confirm button if action is still running
  * @param {Boolean} [disabled] - To disable the confirm button.
  * @param {String} [color=critical] - Changes the color of modal and confirm button

From 3e3ea307916907db4952a9afb78151111fca2f8d Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 16:35:37 -0800
Subject: [PATCH 08/42] edit form

---
 ui/app/templates/components/identity/edit-form.hbs | 2 +-
 ui/lib/core/addon/components/confirm-action.hbs    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/app/templates/components/identity/edit-form.hbs b/ui/app/templates/components/identity/edit-form.hbs
index 5c4bc9c26c2c..7af821eb4e29 100644
--- a/ui/app/templates/components/identity/edit-form.hbs
+++ b/ui/app/templates/components/identity/edit-form.hbs
@@ -7,8 +7,8 @@
   <Toolbar>
     <ToolbarActions>
       <ConfirmAction
+        class="toolbar-button"
         @buttonText="Delete {{this.model.identityType}}"
-        @buttonClasses="toolbar-link"
         @onConfirmAction={{action "deleteItem" this.model}}
         data-test-entity-item-delete="true"
       />
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index fc3886f82ecf..a3e142e88278 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -5,10 +5,10 @@
 
 <Hds::Button
   data-test-confirm-action-trigger
-  class={{@buttonClasses}}
   @text={{@buttonText}}
   @color={{@buttonColor}}
   {{on "click" (fn (mut this.showConfirmModal) true)}}
+  ...attributes
 />
 
 {{#if this.showConfirmModal}}

From ffd2c5ae8527325ce12ffd3e035e4a5380f1acfb Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 17:09:59 -0800
Subject: [PATCH 09/42] add dropdown arg

---
 ui/app/styles/components/popup-menu.scss      | 12 ++++++++++
 .../core/addon/components/confirm-action.hbs  | 23 +++++++++++++------
 .../core/addon/components/confirm-action.js   |  8 +++----
 ui/lib/kv/addon/components/page/list.hbs      | 20 ++++++++--------
 4 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/ui/app/styles/components/popup-menu.scss b/ui/app/styles/components/popup-menu.scss
index 1ce0216cd4f5..0c57e3c04ed5 100644
--- a/ui/app/styles/components/popup-menu.scss
+++ b/ui/app/styles/components/popup-menu.scss
@@ -48,6 +48,18 @@
     width: 100%;
   }
 
+  // TODO HDS polish - temp styling fix for ConfirmAction dropdown buttons
+  // so they match other dropdown elements until we replace popup-menu with Hds::Dropdown
+  .hds-confirm-action-critical {
+    &:hover {
+      background-color: $ui-gray-050;
+    }
+    div {
+      font-size: $size-7;
+      font-weight: $font-weight-semibold;
+    }
+  }
+
   button.link,
   .ember-power-select-option,
   .ember-power-select-option[aria-current='true'],
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index a3e142e88278..dcf931d27f48 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -3,13 +3,22 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<Hds::Button
-  data-test-confirm-action-trigger
-  @text={{@buttonText}}
-  @color={{@buttonColor}}
-  {{on "click" (fn (mut this.showConfirmModal) true)}}
-  ...attributes
-/>
+{{#if @isInDropdown}}
+  <Hds::Dropdown::ListItem::Interactive
+    @text={{@buttonText}}
+    @color={{or @buttonColor "critical"}}
+    {{on "click" (fn (mut this.showConfirmModal) true)}}
+    ...attributes
+  />
+{{else}}
+  <Hds::Button
+    data-test-confirm-action-trigger
+    @text={{@buttonText}}
+    @color={{or @buttonColor "critical"}}
+    {{on "click" (fn (mut this.showConfirmModal) true)}}
+    ...attributes
+  />
+{{/if}}
 
 {{#if this.showConfirmModal}}
   <Hds::Modal
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 61804948c6d1..166c6f6c5ea2 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -23,14 +23,14 @@ import { tracked } from '@glimmer/tracking';
  *  />
  * ```
  *
- * @param {Func} onConfirmAction - The action to take upon confirming.
+ * @param {Function} onConfirmAction - The action to take upon confirming.
  * @param {String} [confirmTitle=Are you sure?] - The title to display in the confirmation modal.
  * @param {String} [confirmMessage=You will not be able to recover it later.] - The message to display when confirming.
  * @param {String} buttonText - Text for the button that triggers modal to open.
- * @param {String} buttonColor - Color of button that triggers modal. Default is primary, other options are secondary, tertiary, and critical
+ * @param {String} [color='critical'] - Color of button that triggers modal. Default is critical, other options are secondary, tertiary, and primary
  * @param {Boolean} [isRunning] - Disables the confirm button if action is still running
- * @param {Boolean} [disabled] - To disable the confirm button.
- * @param {String} [color=critical] - Changes the color of modal and confirm button
+ * @param {Boolean} [disabled] - Disables the modal's confirm button.
+ * @param {String} [modalColor=critical] - Changes the color of modal and confirm button
  *
  */
 
diff --git a/ui/lib/kv/addon/components/page/list.hbs b/ui/lib/kv/addon/components/page/list.hbs
index 3f95ea4b1a14..c08909fccb33 100644
--- a/ui/lib/kv/addon/components/page/list.hbs
+++ b/ui/lib/kv/addon/components/page/list.hbs
@@ -101,17 +101,15 @@
                         </li>
                       {{/if}}
                       {{#if metadata.canDeleteMetadata}}
-                        <li>
-                          <ConfirmAction
-                            @buttonClasses="link is-destroy"
-                            @onConfirmAction={{fn this.onDelete metadata}}
-                            @confirmMessage="This will permanently delete this secret and all its versions."
-                            @cancelButtonText="Cancel"
-                            data-test-delete-metadata={{metadata.path}}
-                          >
-                            Permanently delete
-                          </ConfirmAction>
-                        </li>
+                        <ConfirmAction
+                          class="hds-confirm-action-critical"
+                          @buttonText="Permanently delete"
+                          @buttonColor="critical"
+                          @isInDropdown={{true}}
+                          @onConfirmAction={{fn this.onDelete metadata}}
+                          @confirmMessage="This will permanently delete this secret and all its versions."
+                          data-test-delete-metadata={{metadata.path}}
+                        />
                       {{/if}}
                     {{/if}}
                   </ul>

From 1c819002224e5c45c70146dee75f96afa93b9b2b Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 19:10:08 -0800
Subject: [PATCH 10/42] put back seal text

---
 ui/app/components/seal-action.hbs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/app/components/seal-action.hbs b/ui/app/components/seal-action.hbs
index b3c8e8b0b53c..8b31becbeca1 100644
--- a/ui/app/components/seal-action.hbs
+++ b/ui/app/components/seal-action.hbs
@@ -21,10 +21,11 @@
 
 <div class="field is-grouped box is-fullwidth is-bottomless">
   <ConfirmAction
+    @buttonText="Seal"
     @confirmTitle="Seal this cluster?"
     @confirmMessage="You will not be able to read or write any data until the cluster is unsealed again."
+    @confirmButtonText="Seal"
     @onConfirmAction={{this.handleSeal}}
     data-test-seal
-    @buttonText="Seal"
   />
 </div>
\ No newline at end of file

From 2c73e4a0b7ca76ae640581f0ec8d11ba99c5cd45 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 19:10:44 -0800
Subject: [PATCH 11/42] put back confirm button text

---
 ui/lib/core/addon/components/confirm-action.hbs | 10 +++++-----
 ui/lib/core/addon/components/confirm-action.js  |  5 +++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index dcf931d27f48..c0c917db7eee 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -6,7 +6,7 @@
 {{#if @isInDropdown}}
   <Hds::Dropdown::ListItem::Interactive
     @text={{@buttonText}}
-    @color={{or @buttonColor "critical"}}
+    @color={{@buttonColor}}
     {{on "click" (fn (mut this.showConfirmModal) true)}}
     ...attributes
   />
@@ -14,7 +14,7 @@
   <Hds::Button
     data-test-confirm-action-trigger
     @text={{@buttonText}}
-    @color={{or @buttonColor "critical"}}
+    @color={{@buttonColor}}
     {{on "click" (fn (mut this.showConfirmModal) true)}}
     ...attributes
   />
@@ -23,7 +23,7 @@
 {{#if this.showConfirmModal}}
   <Hds::Modal
     id="confirm-action-modal"
-    @color={{or @color "critical"}}
+    @color={{or @modalColor "critical"}}
     @onClose={{fn (mut this.showConfirmModal) false}}
     as |M|
   >
@@ -39,8 +39,8 @@
           data-test-confirm-button
           disabled={{or @disabled @isRunning}}
           @icon={{if @isRunning "loading"}}
-          @color={{or @color "critical"}}
-          @text="Confirm"
+          @color={{or @modalColor "critical"}}
+          @text={{or @confirmButtonText "Confirm"}}
           {{on "click" this.onConfirm}}
         />
         <Hds::Button data-test-confirm-cancel-button @color="secondary" @text="Cancel" {{on "click" F.close}} />
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 166c6f6c5ea2..a7a1cff248cf 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -27,10 +27,11 @@ import { tracked } from '@glimmer/tracking';
  * @param {String} [confirmTitle=Are you sure?] - The title to display in the confirmation modal.
  * @param {String} [confirmMessage=You will not be able to recover it later.] - The message to display when confirming.
  * @param {String} buttonText - Text for the button that triggers modal to open.
- * @param {String} [color='critical'] - Color of button that triggers modal. Default is critical, other options are secondary, tertiary, and primary
+ * @param {String} [buttonColor] - Color of button that triggers modal. Default is primary, other options are secondary, tertiary, and critical
+ * @param {String} [modalColor=critical] - Modal banner theme, styles modal confirm button and banner color
+ * @param {String} [confirmButtonText=Confirm] - Text for button inside modal that confirms the action
  * @param {Boolean} [isRunning] - Disables the confirm button if action is still running
  * @param {Boolean} [disabled] - Disables the modal's confirm button.
- * @param {String} [modalColor=critical] - Changes the color of modal and confirm button
  *
  */
 

From 8b59da6773f531b2319844e42f62caf3518872ef Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 19:37:25 -0800
Subject: [PATCH 12/42] fix toolbar stylinggp

---
 ui/app/templates/components/identity/edit-form.hbs | 2 ++
 ui/lib/core/addon/components/confirm-action.hbs    | 1 +
 2 files changed, 3 insertions(+)

diff --git a/ui/app/templates/components/identity/edit-form.hbs b/ui/app/templates/components/identity/edit-form.hbs
index 7af821eb4e29..c631ba68d132 100644
--- a/ui/app/templates/components/identity/edit-form.hbs
+++ b/ui/app/templates/components/identity/edit-form.hbs
@@ -8,7 +8,9 @@
     <ToolbarActions>
       <ConfirmAction
         class="toolbar-button"
+        @buttonColor="secondary"
         @buttonText="Delete {{this.model.identityType}}"
+        @confirmTitle="Delete this {{this.model.identityType}}?"
         @onConfirmAction={{action "deleteItem" this.model}}
         data-test-entity-item-delete="true"
       />
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index c0c917db7eee..fc57ddc33e0a 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -24,6 +24,7 @@
   <Hds::Modal
     id="confirm-action-modal"
     @color={{or @modalColor "critical"}}
+    @size="small"
     @onClose={{fn (mut this.showConfirmModal) false}}
     as |M|
   >

From 72be6c9d092ce4c8fb8cbfbf55571869af045d9f Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 19:44:01 -0800
Subject: [PATCH 13/42] popup member group

---
 ui/app/templates/components/identity/popup-members.hbs | 6 ++++--
 ui/lib/core/addon/components/confirm-action.hbs        | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui/app/templates/components/identity/popup-members.hbs b/ui/app/templates/components/identity/popup-members.hbs
index 31670fea9d38..4e81757ee12e 100644
--- a/ui/app/templates/components/identity/popup-members.hbs
+++ b/ui/app/templates/components/identity/popup-members.hbs
@@ -9,8 +9,10 @@
       <li class="action">
         <ConfirmAction
           @buttonText="Remove"
-          @buttonClasses="link is-destroy"
-          @confirmButtonText="Remove this group?"
+          class="hds-confirm-action-critical"
+          @confirmTitle="Remove this group?"
+          @buttonColor="critical"
+          @isInDropdown={{true}}
           @confirmMessage="This may affect permissions for this group."
           @onConfirmAction={{action "performTransaction" this.model this.groupArray this.memberId}}
         />
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index fc57ddc33e0a..99ab22966052 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -32,7 +32,7 @@
       {{or @confirmTitle "Are you sure?"}}
     </M.Header>
     <M.Body>
-      <p class="hds-typography-body-300 hds-foreground-primary is-word-break">{{this.confirmMessage}}</p>
+      {{this.confirmMessage}}
     </M.Body>
     <M.Footer as |F|>
       <Hds::ButtonSet>

From 9fc8854eb1890a5b28e0ead6840dc5a9c8c428bd Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 19:46:17 -0800
Subject: [PATCH 14/42] move up title

---
 ui/app/templates/components/identity/popup-members.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/templates/components/identity/popup-members.hbs b/ui/app/templates/components/identity/popup-members.hbs
index 4e81757ee12e..957f5b8e40cb 100644
--- a/ui/app/templates/components/identity/popup-members.hbs
+++ b/ui/app/templates/components/identity/popup-members.hbs
@@ -9,8 +9,8 @@
       <li class="action">
         <ConfirmAction
           @buttonText="Remove"
-          class="hds-confirm-action-critical"
           @confirmTitle="Remove this group?"
+          class="hds-confirm-action-critical"
           @buttonColor="critical"
           @isInDropdown={{true}}
           @confirmMessage="This may affect permissions for this group."

From a0be23bc6283d42c43f486dd5c3b6f7dbe9431e5 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 19:54:18 -0800
Subject: [PATCH 15/42] finish popup- components

---
 ui/app/templates/components/identity/popup-metadata.hbs | 5 +++--
 ui/app/templates/components/identity/popup-policy.hbs   | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/ui/app/templates/components/identity/popup-metadata.hbs b/ui/app/templates/components/identity/popup-metadata.hbs
index 61da27ef900c..0c82c43b449c 100644
--- a/ui/app/templates/components/identity/popup-metadata.hbs
+++ b/ui/app/templates/components/identity/popup-metadata.hbs
@@ -9,10 +9,11 @@
       <li class="action">
         <ConfirmAction
           @buttonText="Remove"
-          @buttonClasses="link is-destroy"
           @confirmTitle="Remove metadata?"
+          class="hds-confirm-action-critical"
+          @buttonColor="critical"
+          @isInDropdown={{true}}
           @confirmMessage="This data may be used outside of Vault."
-          @confirmButtonText="Remove"
           @onConfirmAction={{action "performTransaction" this.model this.key}}
         />
       </li>
diff --git a/ui/app/templates/components/identity/popup-policy.hbs b/ui/app/templates/components/identity/popup-policy.hbs
index 9f107a6a3cc1..d0848dde4892 100644
--- a/ui/app/templates/components/identity/popup-policy.hbs
+++ b/ui/app/templates/components/identity/popup-policy.hbs
@@ -19,8 +19,10 @@
       <li class="action">
         <ConfirmAction
           @buttonText="Remove from {{this.model.identityType}}"
-          @buttonClasses="link is-destroy"
-          @confirmButtonText="Remove"
+          @confirmTitle="Remove this policy?"
+          class="hds-confirm-action-critical"
+          @buttonColor="critical"
+          @isInDropdown={{true}}
           @confirmMessage="This policy may affect permissions to access Vault data."
           @onConfirmAction={{action "performTransaction" this.model this.policyName}}
         />

From 93419befbfdf90c0201771a8260182b810b5a3fb Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 20:07:58 -0800
Subject: [PATCH 16/42] keymgmt

---
 ui/app/templates/components/keymgmt/key-edit.hbs | 7 +++++--
 ui/lib/core/addon/components/confirm-action.hbs  | 2 +-
 ui/lib/core/addon/components/confirm-action.js   | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/ui/app/templates/components/keymgmt/key-edit.hbs b/ui/app/templates/components/keymgmt/key-edit.hbs
index 9239a951042c..87cffed72637 100644
--- a/ui/app/templates/components/keymgmt/key-edit.hbs
+++ b/ui/app/templates/components/keymgmt/key-edit.hbs
@@ -76,7 +76,8 @@
         {{#if @model.provider}}
           <ConfirmAction
             @buttonText="Remove key"
-            @buttonClasses="toolbar-link"
+            class="toolbar-button"
+            @buttonColor="secondary"
             @onConfirmAction={{perform this.removeKey}}
             @confirmTitle="Remove this key?"
             @confirmMessage="This will remove all versions of the key from the KMS provider. The key will stay in Vault."
@@ -90,7 +91,9 @@
         {{/if}}
         <ConfirmAction
           @buttonText="Rotate key"
-          @buttonClasses="toolbar-link"
+          class="toolbar-button"
+          @buttonColor="secondary"
+          @modalColor="warning"
           @onConfirmAction={{perform this.rotateKey}}
           @confirmTitle="Rotate this key?"
           @confirmMessage="After rotation, all key actions will default to using the newest version of the key."
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index 99ab22966052..a4f493fe0013 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -40,7 +40,7 @@
           data-test-confirm-button
           disabled={{or @disabled @isRunning}}
           @icon={{if @isRunning "loading"}}
-          @color={{or @modalColor "critical"}}
+          @color={{if (eq @modalColor "critical") "critical" "primary"}}
           @text={{or @confirmButtonText "Confirm"}}
           {{on "click" this.onConfirm}}
         />
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index a7a1cff248cf..98649c7fb322 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -28,7 +28,7 @@ import { tracked } from '@glimmer/tracking';
  * @param {String} [confirmMessage=You will not be able to recover it later.] - The message to display when confirming.
  * @param {String} buttonText - Text for the button that triggers modal to open.
  * @param {String} [buttonColor] - Color of button that triggers modal. Default is primary, other options are secondary, tertiary, and critical
- * @param {String} [modalColor=critical] - Modal banner theme, styles modal confirm button and banner color
+ * @param {String} [modalColor=critical] - Styles modal color, if 'critical' confirm button is styled as well. Possible values: critical, warning or neutral
  * @param {String} [confirmButtonText=Confirm] - Text for button inside modal that confirms the action
  * @param {Boolean} [isRunning] - Disables the confirm button if action is still running
  * @param {Boolean} [disabled] - Disables the modal's confirm button.

From 422566752005a32e10fb982fb987c62d201dc648 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 20:15:50 -0800
Subject: [PATCH 17/42] fix modal button logic

---
 ui/app/templates/components/keymgmt/key-edit.hbs      | 2 +-
 ui/app/templates/components/keymgmt/provider-edit.hbs | 2 +-
 ui/lib/core/addon/components/confirm-action.hbs       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/app/templates/components/keymgmt/key-edit.hbs b/ui/app/templates/components/keymgmt/key-edit.hbs
index 87cffed72637..1dec3e21bf08 100644
--- a/ui/app/templates/components/keymgmt/key-edit.hbs
+++ b/ui/app/templates/components/keymgmt/key-edit.hbs
@@ -75,8 +75,8 @@
         {{/if}}
         {{#if @model.provider}}
           <ConfirmAction
-            @buttonText="Remove key"
             class="toolbar-button"
+            @buttonText="Remove key"
             @buttonColor="secondary"
             @onConfirmAction={{perform this.removeKey}}
             @confirmTitle="Remove this key?"
diff --git a/ui/app/templates/components/keymgmt/provider-edit.hbs b/ui/app/templates/components/keymgmt/provider-edit.hbs
index d9f3569134ac..bd01ba1c59fb 100644
--- a/ui/app/templates/components/keymgmt/provider-edit.hbs
+++ b/ui/app/templates/components/keymgmt/provider-edit.hbs
@@ -51,7 +51,7 @@
               <T.Trigger data-test-tooltip-trigger>
                 <ConfirmAction
                   @buttonText="Delete provider"
-                  @buttonClasses="toolbar-link"
+                  class="toolbar-button"
                   @onConfirmAction={{this.onDelete}}
                   @disabled={{@model.keys.length}}
                   data-test-kms-provider-delete={{true}}
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index a4f493fe0013..9b1ef4e799de 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -40,7 +40,7 @@
           data-test-confirm-button
           disabled={{or @disabled @isRunning}}
           @icon={{if @isRunning "loading"}}
-          @color={{if (eq @modalColor "critical") "critical" "primary"}}
+          @color={{if (or (not @modalColor) (eq @modalColor "critical")) "critical" "primary"}}
           @text={{or @confirmButtonText "Confirm"}}
           {{on "click" this.onConfirm}}
         />

From 3c755771b9ea0df01bcd76f64c2f1a1df607c0c2 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 20:33:29 -0800
Subject: [PATCH 18/42] remaining app template components

---
 ui/app/templates/components/configure-ssh-secret.hbs  | 6 ++----
 ui/app/templates/components/database-connection.hbs   | 8 +++++---
 ui/app/templates/components/database-role-edit.hbs    | 3 ++-
 ui/app/templates/components/generated-item.hbs        | 6 +++---
 ui/app/templates/components/keymgmt/provider-edit.hbs | 1 +
 ui/app/templates/components/role-aws-edit.hbs         | 7 ++++++-
 ui/app/templates/components/role-ssh-edit.hbs         | 7 ++++++-
 ui/app/templates/components/secret-edit-toolbar.hbs   | 8 ++++----
 ui/app/templates/components/transform-role-edit.hbs   | 3 ++-
 ui/app/templates/components/transit-form-edit.hbs     | 2 +-
 ui/app/templates/components/transit-key-actions.hbs   | 9 ++++-----
 11 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/ui/app/templates/components/configure-ssh-secret.hbs b/ui/app/templates/components/configure-ssh-secret.hbs
index a1b51dcb802d..25e8d199321a 100644
--- a/ui/app/templates/components/configure-ssh-secret.hbs
+++ b/ui/app/templates/components/configure-ssh-secret.hbs
@@ -22,17 +22,15 @@
     </div>
   </div>
   <div class="field is-grouped-split box is-fullwidth is-bottomless">
-    <div class="control">
+    <Hds::ButtonSet>
       <Hds::Copy::Button @text="Copy" @textToCopy={{@model.publicKey}} class="primary" />
-    </div>
-    <div class="control">
       <ConfirmAction
         @buttonText="Delete"
         @buttonColor="secondary"
         @confirmMessage="This will remove the CA certificate information."
         @onConfirmAction={{this.delete}}
       />
-    </div>
+    </Hds::ButtonSet>
   </div>
 {{else}}
   <form {{on "submit" this.saveConfig}} data-test-ssh-configure-form="true">
diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs
index 2057ed5a6d28..a3d64b539415 100644
--- a/ui/app/templates/components/database-connection.hbs
+++ b/ui/app/templates/components/database-connection.hbs
@@ -36,7 +36,8 @@
         {{#if @model.canReset}}
           <ConfirmAction
             @buttonText="Reset connection"
-            @buttonClasses="toolbar-link"
+            class="toolbar-button"
+            @buttonColor="secondary"
             @onConfirmAction={{action "reset"}}
             @confirmTitle="Reset connection?"
             @confirmMessage="This will close the connection and its underlying plugin and restart it with the configuration stored in the barrier."
@@ -51,12 +52,13 @@
           {{! template-lint-disable quotes }}
           <ConfirmAction
             @buttonText="Rotate root credentials"
-            @buttonClasses="toolbar-link"
+            class="toolbar-button"
+            @buttonColor="secondary"
             @onConfirmAction={{this.rotate}}
             @confirmTitle="Rotate credentials?"
             @confirmMessage='This will rotate the "root" user credentials stored for the database connection. The password will not be accessible once rotated.'
             @confirmButtonText="Rotate"
-            @color="warning"
+            @modalColor="warning"
             data-test-database-connection-rotate
           />
           {{! template-lint-enable }}
diff --git a/ui/app/templates/components/database-role-edit.hbs b/ui/app/templates/components/database-role-edit.hbs
index 60e8d1663f6f..69e87123a174 100644
--- a/ui/app/templates/components/database-role-edit.hbs
+++ b/ui/app/templates/components/database-role-edit.hbs
@@ -26,7 +26,8 @@
       {{#if @model.canDelete}}
         <ConfirmAction
           @buttonText="Delete role"
-          @buttonClasses="toolbar-link"
+          class="toolbar-button"
+          @buttonColor="secondary"
           @onConfirmAction={{action "delete"}}
           @confirmTitle="Delete role?"
           @confirmMessage="This role will be permanently deleted. You will need to recreate it to use it again."
diff --git a/ui/app/templates/components/generated-item.hbs b/ui/app/templates/components/generated-item.hbs
index 138d7979b748..33a930ef655b 100644
--- a/ui/app/templates/components/generated-item.hbs
+++ b/ui/app/templates/components/generated-item.hbs
@@ -39,11 +39,11 @@
     <ToolbarActions>
       <ConfirmAction
         @buttonText="Delete {{this.itemType}}"
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @onConfirmAction={{action "deleteItem"}}
         @confirmMessage={{concat "Are you sure you want to delete " this.itemType " " this.model.id "?"}}
-        @cancelButtonText="Cancel"
-        data-test-secret-delete="true"
+        data-test-secret-delete
       />
       <div class="toolbar-separator"></div>
       <ToolbarLink
diff --git a/ui/app/templates/components/keymgmt/provider-edit.hbs b/ui/app/templates/components/keymgmt/provider-edit.hbs
index bd01ba1c59fb..38884ad2666e 100644
--- a/ui/app/templates/components/keymgmt/provider-edit.hbs
+++ b/ui/app/templates/components/keymgmt/provider-edit.hbs
@@ -52,6 +52,7 @@
                 <ConfirmAction
                   @buttonText="Delete provider"
                   class="toolbar-button"
+                  @confirmTitle="Delete this provider?"
                   @onConfirmAction={{this.onDelete}}
                   @disabled={{@model.keys.length}}
                   data-test-kms-provider-delete={{true}}
diff --git a/ui/app/templates/components/role-aws-edit.hbs b/ui/app/templates/components/role-aws-edit.hbs
index ccda2e95b948..732b09fbd8e9 100644
--- a/ui/app/templates/components/role-aws-edit.hbs
+++ b/ui/app/templates/components/role-aws-edit.hbs
@@ -32,7 +32,12 @@
   <Toolbar>
     <ToolbarActions>
       {{#if this.model.canDelete}}
-        <ConfirmAction @buttonText="Delete role" @buttonClasses="toolbar-link" @onConfirmAction={{action "delete"}} />
+        <ConfirmAction
+          @buttonText="Delete role"
+          class="toolbar-button"
+          @buttonColor="secondary"
+          @onConfirmAction={{action "delete"}}
+        />
         <div class="toolbar-separator"></div>
       {{/if}}
       {{#if this.model.canGenerate}}
diff --git a/ui/app/templates/components/role-ssh-edit.hbs b/ui/app/templates/components/role-ssh-edit.hbs
index 85eab871d7a1..6a70d1cefe6d 100644
--- a/ui/app/templates/components/role-ssh-edit.hbs
+++ b/ui/app/templates/components/role-ssh-edit.hbs
@@ -31,7 +31,12 @@
   <Toolbar>
     <ToolbarActions>
       {{#if this.model.canDelete}}
-        <ConfirmAction @buttonText="Delete role" @buttonClasses="toolbar-link" @onConfirmAction={{action "delete"}} />
+        <ConfirmAction
+          @buttonText="Delete role"
+          class="toolbar-button"
+          @buttonColor="secondary"
+          @onConfirmAction={{action "delete"}}
+        />
         <div class="toolbar-separator"></div>
       {{/if}}
       {{#if (eq this.model.keyType "otp")}}
diff --git a/ui/app/templates/components/secret-edit-toolbar.hbs b/ui/app/templates/components/secret-edit-toolbar.hbs
index 7ee4e2ff541a..b1a5b469c31e 100644
--- a/ui/app/templates/components/secret-edit-toolbar.hbs
+++ b/ui/app/templates/components/secret-edit-toolbar.hbs
@@ -20,14 +20,14 @@
   <ToolbarActions>
     {{#if (and (eq @mode "show") @model.canDelete)}}
       <ConfirmAction
-        @buttonClasses="toolbar-link"
+        @buttonText="Delete"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @confirmTitle="Delete secret?"
         @confirmMessage="You will not be able to recover this secret data later."
         @onConfirmAction={{this.handleDelete}}
         data-test-secret-v1-delete="true"
-      >
-        Delete
-      </ConfirmAction>
+      />
       <div class="toolbar-separator"></div>
     {{/if}}
     {{#if (and (eq @mode "show") @canUpdateSecret)}}
diff --git a/ui/app/templates/components/transform-role-edit.hbs b/ui/app/templates/components/transform-role-edit.hbs
index 01e849b86894..d9ec6744b63d 100644
--- a/ui/app/templates/components/transform-role-edit.hbs
+++ b/ui/app/templates/components/transform-role-edit.hbs
@@ -33,7 +33,8 @@
       {{#if this.capabilities.canDelete}}
         <ConfirmAction
           @buttonText="Delete role"
-          @buttonClasses="toolbar-link"
+          class="toolbar-button"
+          @buttonColor="secondary"
           @onConfirmAction={{action "delete"}}
           @confirmMessage="Deleting this role means that you’ll need to recreate it and reassign any existing transformations to use it again."
           @confirmButtonText="Delete"
diff --git a/ui/app/templates/components/transit-form-edit.hbs b/ui/app/templates/components/transit-form-edit.hbs
index e2ed2db1d87a..149ec4ce6d95 100644
--- a/ui/app/templates/components/transit-form-edit.hbs
+++ b/ui/app/templates/components/transit-form-edit.hbs
@@ -104,7 +104,7 @@
       </div>
     </div>
     {{#if (and @key.canDelete @capabilities.canDelete)}}
-      <ConfirmAction @buttonText="Delete transit key" @buttonClasses="button" @onConfirmAction={{@deleteKey}} />
+      <ConfirmAction @buttonText="Delete transit key" @onConfirmAction={{@deleteKey}} />
     {{/if}}
   </div>
 </form>
\ No newline at end of file
diff --git a/ui/app/templates/components/transit-key-actions.hbs b/ui/app/templates/components/transit-key-actions.hbs
index c70e0a726211..3a845ca9bc69 100644
--- a/ui/app/templates/components/transit-key-actions.hbs
+++ b/ui/app/templates/components/transit-key-actions.hbs
@@ -7,16 +7,15 @@
   {{#if this.key.canRotate}}
     <ConfirmAction
       @buttonText="Rotate encryption key"
-      @buttonClasses="toolbar-link"
+      class="toolbar-button"
+      @buttonColor="secondary"
       @confirmTitle="Rotate this key?"
       @confirmMessage="After rotation, all key actions will default to using the newest version of the key."
       @confirmButtonText="Rotate"
-      @color="warning"
+      @modalColor="warning"
       @onConfirmAction={{action "doSubmit"}}
       data-test-transit-key-rotate
-    >
-      Rotate encryption key
-    </ConfirmAction>
+    />
   {{/if}}
 {{else}}
   <MessageError @errors={{this.errors}} />

From de38317b1cb54a8ca27270009d0c18e44610eecb Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 20:37:32 -0800
Subject: [PATCH 19/42] add period for angel

---
 .../templates/components/keymgmt/provider-edit.hbs |  1 +
 .../templates/vault/cluster/access/leases/list.hbs | 14 +++++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/ui/app/templates/components/keymgmt/provider-edit.hbs b/ui/app/templates/components/keymgmt/provider-edit.hbs
index 38884ad2666e..dd3cff522d67 100644
--- a/ui/app/templates/components/keymgmt/provider-edit.hbs
+++ b/ui/app/templates/components/keymgmt/provider-edit.hbs
@@ -52,6 +52,7 @@
                 <ConfirmAction
                   @buttonText="Delete provider"
                   class="toolbar-button"
+                  @buttonColor="secondary"
                   @confirmTitle="Delete this provider?"
                   @onConfirmAction={{this.onDelete}}
                   @disabled={{@model.keys.length}}
diff --git a/ui/app/templates/vault/cluster/access/leases/list.hbs b/ui/app/templates/vault/cluster/access/leases/list.hbs
index 98c1057d5154..64984463af1a 100644
--- a/ui/app/templates/vault/cluster/access/leases/list.hbs
+++ b/ui/app/templates/vault/cluster/access/leases/list.hbs
@@ -58,10 +58,10 @@
         {{#if (and this.capabilities.forceRevokePrefix.canUpdate (not this.confirmingRevoke))}}
           <ConfirmAction
             @buttonText="Force revoke prefix"
-            @buttonClasses="toolbar-link"
-            @confirmTitle="Disable this?"
+            class="toolbar-button"
+            @buttonColor="secondary"
+            @confirmTitle="Revoke this?"
             @confirmMessage="All leases under this one will also be removed and disregard any errors encountered."
-            @confirmButtonText="Revoke"
             @onConfirmAction={{action "revokePrefix" this.baseKey.id true}}
           />
         {{/if}}
@@ -70,12 +70,12 @@
         {{#if (and this.capabilities.revokePrefix.canUpdate (not this.confirmingForceRevoke))}}
           <ConfirmAction
             @buttonText="Revoke prefix"
-            @buttonClasses="toolbar-link"
+            class="toolbar-button"
+            @buttonColor="secondary"
             @confirmTitle="Revoke this?"
-            @confirmMessage="All leases under this one will also be removed"
-            @confirmButtonText="Revoke"
+            @confirmMessage="All leases under this one will also be removed."
             @onConfirmAction={{action "revokePrefix" this.baseKey.id}}
-            data-test-lease-revoke-prefix="true"
+            data-test-lease-revoke-prefix
           />
         {{/if}}
       </div>

From 65917e42818a8f2caa73579e37dd8d660c86ce0c Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 20:47:30 -0800
Subject: [PATCH 20/42] vault cluster items

---
 ui/app/templates/vault/cluster/access/leases/show.hbs  |  8 ++++----
 .../vault/cluster/access/mfa/methods/method/index.hbs  |  5 +++--
 .../access/oidc/assignments/assignment/details.hbs     |  4 ++--
 .../cluster/access/oidc/clients/client/details.hbs     |  4 ++--
 .../vault/cluster/access/oidc/keys/key/details.hbs     | 10 +++++-----
 .../cluster/access/oidc/providers/provider/details.hbs |  4 ++--
 .../vault/cluster/access/oidc/scopes/scope/details.hbs |  4 ++--
 ui/app/templates/vault/cluster/policy/edit.hbs         |  8 +++++---
 8 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/ui/app/templates/vault/cluster/access/leases/show.hbs b/ui/app/templates/vault/cluster/access/leases/show.hbs
index 8a26c80bc9be..1ba691170150 100644
--- a/ui/app/templates/vault/cluster/access/leases/show.hbs
+++ b/ui/app/templates/vault/cluster/access/leases/show.hbs
@@ -27,12 +27,12 @@
     <ToolbarActions>
       <ConfirmAction
         @buttonText="Revoke lease"
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @confirmTitle="Revoke this?"
-        @confirmMessage={{concat "All leases under this one will also be removed"}}
-        @confirmButtonText="Confirm"
+        @confirmMessage="All leases under this one will also be removed."
         @onConfirmAction={{action "revokeLease" this.model}}
-        data-test-lease-revoke="true"
+        data-test-lease-revoke
       />
     </ToolbarActions>
   </Toolbar>
diff --git a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
index 1fbd2eb49335..7ba5c7e2b96e 100644
--- a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
+++ b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
@@ -45,11 +45,12 @@
   <Toolbar>
     <ToolbarActions>
       <ConfirmAction
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @disabled={{not (is-empty this.model.enforcements)}}
         @onConfirmAction={{this.deleteMethod}}
         @confirmMessage="Deleting this MFA configuration is permanent, and it will no longer be available."
-        @confirmButtonText="Delete"
+        @buttonText="Delete"
       />
       <ToolbarLink
         @route="vault.cluster.access.mfa.methods.method.edit"
diff --git a/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/details.hbs b/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/details.hbs
index b42c54319849..394a077b427a 100644
--- a/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/assignments/assignment/details.hbs
@@ -42,11 +42,11 @@
     {{#if @model.canDelete}}
       <ConfirmAction
         @buttonText="Delete assignment"
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @onConfirmAction={{this.delete}}
         @confirmTitle="Delete assignment?"
         @confirmMessage="This assignment will be permanently deleted. You will not be able to recover it."
-        @confirmButtonText="Delete"
         data-test-oidc-assignment-delete
       />
       <div class="toolbar-separator"></div>
diff --git a/ui/app/templates/vault/cluster/access/oidc/clients/client/details.hbs b/ui/app/templates/vault/cluster/access/oidc/clients/client/details.hbs
index c2d8b8c21ff2..5452016f0792 100644
--- a/ui/app/templates/vault/cluster/access/oidc/clients/client/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/clients/client/details.hbs
@@ -9,11 +9,11 @@
       <ConfirmAction
         data-test-oidc-client-delete
         @buttonText="Delete application"
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @onConfirmAction={{this.delete}}
         @confirmTitle="Delete application?"
         @confirmMessage="This application will be permanently deleted. You will need to re-create it to use it again."
-        @confirmButtonText="Delete"
       />
       <div class="toolbar-separator"></div>
     {{/if}}
diff --git a/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs b/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs
index 00034ab27e08..ac1a8f01b8c3 100644
--- a/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs
@@ -12,11 +12,11 @@
             @buttonText="Delete key"
             data-test-oidc-key-delete
             @disabled={{eq this.model.name "default"}}
-            @buttonClasses="toolbar-link"
+            class="toolbar-button"
+            @buttonColor="secondary"
             @onConfirmAction={{this.delete}}
             @confirmTitle="Delete key?"
             @confirmMessage="This key will be permanently deleted. You will not be able to recover it."
-            @confirmButtonText="Delete"
           />
         </T.Trigger>
         {{#if (eq this.model.name "default")}}
@@ -33,12 +33,12 @@
       <ConfirmAction
         @buttonText="Rotate key"
         data-test-oidc-key-rotate
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @onConfirmAction={{perform this.rotateKey}}
         @confirmTitle="Rotate this key?"
         @confirmMessage="After rotation, a new public/private key pair will be generated."
-        @confirmButtonText="Rotate"
-        @color="warning"
+        @modalColor="warning"
         @isRunning={{this.rotateKey.isRunning}}
       />
     {{/if}}
diff --git a/ui/app/templates/vault/cluster/access/oidc/providers/provider/details.hbs b/ui/app/templates/vault/cluster/access/oidc/providers/provider/details.hbs
index 3f59472f7ba1..084ad6e81a9c 100644
--- a/ui/app/templates/vault/cluster/access/oidc/providers/provider/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/providers/provider/details.hbs
@@ -12,11 +12,11 @@
             data-test-oidc-provider-delete
             @buttonText="Delete provider"
             @disabled={{eq this.model.name "default"}}
-            @buttonClasses="toolbar-link"
+            class="toolbar-button"
+            @buttonColor="secondary"
             @onConfirmAction={{this.delete}}
             @confirmTitle="Delete provider?"
             @confirmMessage="This provider will be permanently deleted. You will need to re-create it to use it again."
-            @confirmButtonText="Delete"
           />
         </T.Trigger>
         {{#if (eq this.model.name "default")}}
diff --git a/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs b/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs
index 41c476c1f782..2ab49a2f45bf 100644
--- a/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/scopes/scope/details.hbs
@@ -39,11 +39,11 @@
       <ConfirmAction
         data-test-oidc-scope-delete
         @buttonText="Delete scope"
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @onConfirmAction={{this.delete}}
         @confirmTitle="Delete scope?"
         @confirmMessage="This scope will be permanently deleted. You will not be able to recover it."
-        @confirmButtonText="Delete"
       />
       <div class="toolbar-separator"></div>
     {{/if}}
diff --git a/ui/app/templates/vault/cluster/policy/edit.hbs b/ui/app/templates/vault/cluster/policy/edit.hbs
index 6a828ba34393..248d670bb5c2 100644
--- a/ui/app/templates/vault/cluster/policy/edit.hbs
+++ b/ui/app/templates/vault/cluster/policy/edit.hbs
@@ -31,10 +31,12 @@
     <ToolbarActions>
       {{#if (and (not-eq this.model.id "default") this.capabilities.canDelete)}}
         <ConfirmAction
-          @buttonClasses="toolbar-link"
-          @confirmMessage="This may affect access to Vault data."
+          @buttonText="Delete policy"
+          class="toolbar-button"
+          @buttonColor="secondary"
+          @confirmMessage="Deleting this policy may affect access to Vault data."
           @onConfirmAction={{this.deletePolicy}}
-          data-test-policy-delete="true"
+          data-test-policy-delete
         />
         <div class="toolbar-separator"></div>
       {{/if}}

From 89ab510ef69711dc5723c769f92eed173f9e6e94 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 20:49:31 -0800
Subject: [PATCH 21/42] add button text assertion

---
 ui/lib/core/addon/components/confirm-action.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 98649c7fb322..a3002487914b 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -44,6 +44,7 @@ export default class ConfirmActionComponent extends Component {
       '<ConfirmAction> component expects @onConfirmAction arg to be a function',
       typeof this.args.onConfirmAction === 'function'
     );
+    assert(`@buttonText is required for ConfirmAction components`, this.args.buttonText);
   }
 
   get confirmMessage() {

From 3210bf452696baf6de8e9c51690d3fa886a55100 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 20:55:15 -0800
Subject: [PATCH 22/42] remaining instances

---
 .../kmip/addon/templates/credentials/show.hbs |  5 ++---
 ui/lib/kmip/addon/templates/role.hbs          |  6 +++---
 .../addon/components/page/role/details.hbs    |  3 ++-
 .../addon/components/page/configuration.hbs   | 10 +++++-----
 .../addon/components/page/library/details.hbs | 10 +++++++---
 .../addon/components/page/role/details.hbs    | 20 +++++++++++--------
 .../page/pki-certificate-details.hbs          |  4 ++--
 .../addon/components/page/pki-key-details.hbs |  5 +++--
 .../components/page/pki-role-details.hbs      |  5 +++--
 .../templates/mode/secondaries/index.hbs      |  6 +++---
 .../templates/mode/secondaries/revoke.hbs     |  3 ---
 11 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/ui/lib/kmip/addon/templates/credentials/show.hbs b/ui/lib/kmip/addon/templates/credentials/show.hbs
index c8b7d021449b..2688857e76e2 100644
--- a/ui/lib/kmip/addon/templates/credentials/show.hbs
+++ b/ui/lib/kmip/addon/templates/credentials/show.hbs
@@ -18,12 +18,11 @@
     {{#if this.model.deletePath.canDelete}}
       <ConfirmAction
         @buttonText="Revoke credentials"
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @onConfirmAction={{this.revokeCredentials}}
         @confirmTitle="Revoke this?"
         @confirmMessage="Any client using these credentials will no longer be able to."
-        @cancelButtonText="Cancel"
-        @confirmButtonText="Revoke"
       />
       <div class="toolbar-separator"></div>
     {{/if}}
diff --git a/ui/lib/kmip/addon/templates/role.hbs b/ui/lib/kmip/addon/templates/role.hbs
index 48462f73693a..81b1cacdba24 100644
--- a/ui/lib/kmip/addon/templates/role.hbs
+++ b/ui/lib/kmip/addon/templates/role.hbs
@@ -9,10 +9,10 @@
     {{#if this.model.updatePath.canUpdate}}
       <ConfirmAction
         @buttonText="Delete role"
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @onConfirmAction={{this.deleteRole}}
-        @confirmMessage={{concat "Are you sure you want to delete " this.model.id "?"}}
-        @cancelButtonText="Cancel"
+        @confirmMessage="Are you sure you want to delete {{this.model.id}}?"
       />
       <div class="toolbar-separator"></div>
     {{/if}}
diff --git a/ui/lib/kubernetes/addon/components/page/role/details.hbs b/ui/lib/kubernetes/addon/components/page/role/details.hbs
index 0ea66a6361c3..bca262ab230e 100644
--- a/ui/lib/kubernetes/addon/components/page/role/details.hbs
+++ b/ui/lib/kubernetes/addon/components/page/role/details.hbs
@@ -19,7 +19,8 @@
     {{#if @model.canDelete}}
       <ConfirmAction
         @buttonText="Delete role"
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @onConfirmAction={{this.delete}}
         data-test-delete
       />
diff --git a/ui/lib/ldap/addon/components/page/configuration.hbs b/ui/lib/ldap/addon/components/page/configuration.hbs
index 685d8317baee..0d18a7e20698 100644
--- a/ui/lib/ldap/addon/components/page/configuration.hbs
+++ b/ui/lib/ldap/addon/components/page/configuration.hbs
@@ -7,16 +7,16 @@
   <:toolbarActions>
     {{#if @configModel}}
       <ConfirmAction
-        @buttonClasses="toolbar-link"
+        @buttonText="Rotate root"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @onConfirmAction={{perform this.rotateRoot}}
         @confirmTitle="Rotate root?"
         @confirmMessage="After rotation, Vault will generate a new root password in your directory server."
-        @confirmButtonText="Rotate"
+        @modalColor="warning"
         @disabled={{this.rotateRoot.isRunning}}
         data-test-toolbar-rotate-action
-      >
-        Rotate root
-      </ConfirmAction>
+      />
     {{/if}}
     <ToolbarLink @route="configure" data-test-toolbar-config-action>
       {{if @configModel "Edit configuration" "Configure LDAP"}}
diff --git a/ui/lib/ldap/addon/components/page/library/details.hbs b/ui/lib/ldap/addon/components/page/library/details.hbs
index fd47468eac25..3cab5f8ac137 100644
--- a/ui/lib/ldap/addon/components/page/library/details.hbs
+++ b/ui/lib/ldap/addon/components/page/library/details.hbs
@@ -26,9 +26,13 @@
 <Toolbar>
   <ToolbarActions>
     {{#if @model.canDelete}}
-      <ConfirmAction @buttonClasses="toolbar-link" @onConfirmAction={{this.delete}} data-test-delete>
-        Delete library
-      </ConfirmAction>
+      <ConfirmAction
+        @buttonText="Delete library"
+        class="toolbar-button"
+        @buttonColor="secondary"
+        @onConfirmAction={{this.delete}}
+        data-test-delete
+      />
       {{#if @model.canEdit}}
         <div class="toolbar-separator"></div>
       {{/if}}
diff --git a/ui/lib/ldap/addon/components/page/role/details.hbs b/ui/lib/ldap/addon/components/page/role/details.hbs
index 520b6ff3ec3d..95b620d76acf 100644
--- a/ui/lib/ldap/addon/components/page/role/details.hbs
+++ b/ui/lib/ldap/addon/components/page/role/details.hbs
@@ -17,9 +17,13 @@
 <Toolbar>
   <ToolbarActions>
     {{#if @model.canDelete}}
-      <ConfirmAction @buttonClasses="toolbar-link" @onConfirmAction={{this.delete}} data-test-delete>
-        Delete role
-      </ConfirmAction>
+      <ConfirmAction
+        @buttonText="Delete role"
+        class="toolbar-button"
+        @buttonColor="secondary"
+        @onConfirmAction={{this.delete}}
+        data-test-delete
+      />
       <div class="toolbar-separator"></div>
     {{/if}}
     {{#if @model.canReadCreds}}
@@ -29,16 +33,16 @@
     {{/if}}
     {{#if @model.canRotateStaticCreds}}
       <ConfirmAction
-        @buttonClasses="toolbar-link"
+        @buttonText="Rotate credentials"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @confirmTitle="Rotate credentials?"
         @confirmMessage="When manually rotating credentials, the rotation period will start over."
-        @confirmButtonText="Rotate"
+        @modalColor="warning"
         @disabled={{this.rotateCredentials.isRunning}}
         @onConfirmAction={{perform this.rotateCredentials}}
         data-test-rotate-credentials
-      >
-        Rotate credentials
-      </ConfirmAction>
+      />
     {{/if}}
     {{#if @model.canEdit}}
       <ToolbarLink @route="roles.role.edit" data-test-edit>
diff --git a/ui/lib/pki/addon/components/page/pki-certificate-details.hbs b/ui/lib/pki/addon/components/page/pki-certificate-details.hbs
index 4c506958e7ec..174a9fa992c3 100644
--- a/ui/lib/pki/addon/components/page/pki-certificate-details.hbs
+++ b/ui/lib/pki/addon/components/page/pki-certificate-details.hbs
@@ -12,10 +12,10 @@
     {{#if @model.canRevoke}}
       <ConfirmAction
         @buttonText="Revoke certificate"
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @onConfirmAction={{fn (perform this.revoke)}}
         @confirmTitle="Revoke certificate?"
-        @confirmButtonText="Revoke"
         data-test-pki-cert-revoke-button
       />
     {{/if}}
diff --git a/ui/lib/pki/addon/components/page/pki-key-details.hbs b/ui/lib/pki/addon/components/page/pki-key-details.hbs
index 06229f67045b..211539b5c54f 100644
--- a/ui/lib/pki/addon/components/page/pki-key-details.hbs
+++ b/ui/lib/pki/addon/components/page/pki-key-details.hbs
@@ -7,10 +7,11 @@
   <ToolbarActions>
     {{#if @canDelete}}
       <ConfirmAction
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @onConfirmAction={{this.deleteKey}}
         @confirmTitle="Delete key?"
-        @confirmButtonText="Delete"
+        @buttonText="Delete"
         data-test-pki-key-delete
       />
       <div class="toolbar-separator"></div>
diff --git a/ui/lib/pki/addon/components/page/pki-role-details.hbs b/ui/lib/pki/addon/components/page/pki-role-details.hbs
index fe83c3e9ff17..28feede76481 100644
--- a/ui/lib/pki/addon/components/page/pki-role-details.hbs
+++ b/ui/lib/pki/addon/components/page/pki-role-details.hbs
@@ -7,10 +7,11 @@
   <ToolbarActions>
     {{#if @role.canDelete}}
       <ConfirmAction
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonColor="secondary"
         @onConfirmAction={{this.deleteRole}}
         @confirmTitle="Delete role?"
-        @confirmButtonText="Delete"
+        @buttonText="Delete"
         data-test-pki-role-delete
       />
       <div class="toolbar-separator"></div>
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/index.hbs b/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
index 7485e46b6245..256531c0bd97 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
@@ -47,11 +47,11 @@
                       <li class="action">
                         <ConfirmAction
                           @buttonText="Revoke"
-                          @buttonClasses="button link is-destroy"
+                          class="hds-confirm-action-critical"
+                          @buttonColor="critical"
+                          @isInDropdown={{true}}
                           @confirmTitle="Revoke token?"
                           @confirmMessage="This will revoke this secondary token."
-                          @confirmButtonText="Revoke"
-                          @horizontalPosition="auto-left"
                           @onConfirmAction={{action "onSubmit" "revoke-secondary" "primary" (hash id=secondary)}}
                         />
                       </li>
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs b/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs
index 72ca46f2349d..a33c8b8bba31 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs
@@ -24,13 +24,10 @@
   <div class="control">
     <ConfirmAction
       @buttonText="Revoke"
-      @buttonClasses="button is-primary"
       @confirmTitle="Revoke token?"
       @confirmMessage="This will revoke this secondary token."
-      @confirmButtonText="Revoke"
       @disabled={{not this.id}}
       @disabledMessage="A secondary ID is required perform revocation."
-      @horizontalPosition="auto-left"
       @onConfirmAction={{action "onSubmit" "revoke-secondary" "primary" (hash id=this.id)}}
     />
   </div>

From 6b9ed1652aa88ca61627c836d2fb74575e9aeb4c Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Wed, 15 Nov 2023 21:05:11 -0800
Subject: [PATCH 23/42] remove arg for passing confirm text

---
 ui/app/components/seal-action.hbs                      | 1 -
 ui/app/templates/components/database-connection.hbs    | 2 --
 ui/app/templates/components/database-role-edit.hbs     | 1 -
 ui/app/templates/components/keymgmt/key-edit.hbs       | 2 --
 ui/app/templates/components/transform-role-edit.hbs    | 1 -
 ui/app/templates/components/transit-key-actions.hbs    | 1 -
 ui/lib/core/addon/components/confirm-action.hbs        | 2 +-
 ui/lib/core/addon/components/confirm-action.js         | 1 -
 ui/tests/integration/components/confirm-action-test.js | 1 -
 9 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/ui/app/components/seal-action.hbs b/ui/app/components/seal-action.hbs
index 8b31becbeca1..b01e6b518422 100644
--- a/ui/app/components/seal-action.hbs
+++ b/ui/app/components/seal-action.hbs
@@ -24,7 +24,6 @@
     @buttonText="Seal"
     @confirmTitle="Seal this cluster?"
     @confirmMessage="You will not be able to read or write any data until the cluster is unsealed again."
-    @confirmButtonText="Seal"
     @onConfirmAction={{this.handleSeal}}
     data-test-seal
   />
diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs
index a3d64b539415..fef202ec9e64 100644
--- a/ui/app/templates/components/database-connection.hbs
+++ b/ui/app/templates/components/database-connection.hbs
@@ -41,7 +41,6 @@
             @onConfirmAction={{action "reset"}}
             @confirmTitle="Reset connection?"
             @confirmMessage="This will close the connection and its underlying plugin and restart it with the configuration stored in the barrier."
-            @confirmButtonText="Reset"
             data-test-database-connection-reset
           />
         {{/if}}
@@ -57,7 +56,6 @@
             @onConfirmAction={{this.rotate}}
             @confirmTitle="Rotate credentials?"
             @confirmMessage='This will rotate the "root" user credentials stored for the database connection. The password will not be accessible once rotated.'
-            @confirmButtonText="Rotate"
             @modalColor="warning"
             data-test-database-connection-rotate
           />
diff --git a/ui/app/templates/components/database-role-edit.hbs b/ui/app/templates/components/database-role-edit.hbs
index 69e87123a174..8e63faebe02d 100644
--- a/ui/app/templates/components/database-role-edit.hbs
+++ b/ui/app/templates/components/database-role-edit.hbs
@@ -31,7 +31,6 @@
           @onConfirmAction={{action "delete"}}
           @confirmTitle="Delete role?"
           @confirmMessage="This role will be permanently deleted. You will need to recreate it to use it again."
-          @confirmButtonText="Delete"
           data-test-database-role-delete
         />
         <div class="toolbar-separator"></div>
diff --git a/ui/app/templates/components/keymgmt/key-edit.hbs b/ui/app/templates/components/keymgmt/key-edit.hbs
index 1dec3e21bf08..7b05249809e5 100644
--- a/ui/app/templates/components/keymgmt/key-edit.hbs
+++ b/ui/app/templates/components/keymgmt/key-edit.hbs
@@ -81,7 +81,6 @@
             @onConfirmAction={{perform this.removeKey}}
             @confirmTitle="Remove this key?"
             @confirmMessage="This will remove all versions of the key from the KMS provider. The key will stay in Vault."
-            @confirmButtonText="Remove"
             @isRunning={{this.removeKey.isRunning}}
             data-test-keymgmt-key-remove
           />
@@ -97,7 +96,6 @@
           @onConfirmAction={{perform this.rotateKey}}
           @confirmTitle="Rotate this key?"
           @confirmMessage="After rotation, all key actions will default to using the newest version of the key."
-          @confirmButtonText="Rotate"
           @color="warning"
           @isRunning={{this.rotateKey.isRunning}}
           data-test-keymgmt-key-rotate
diff --git a/ui/app/templates/components/transform-role-edit.hbs b/ui/app/templates/components/transform-role-edit.hbs
index d9ec6744b63d..5ac7c69253ed 100644
--- a/ui/app/templates/components/transform-role-edit.hbs
+++ b/ui/app/templates/components/transform-role-edit.hbs
@@ -37,7 +37,6 @@
           @buttonColor="secondary"
           @onConfirmAction={{action "delete"}}
           @confirmMessage="Deleting this role means that you’ll need to recreate it and reassign any existing transformations to use it again."
-          @confirmButtonText="Delete"
           data-test-transformation-role-delete
         />
         <div class="toolbar-separator"></div>
diff --git a/ui/app/templates/components/transit-key-actions.hbs b/ui/app/templates/components/transit-key-actions.hbs
index 3a845ca9bc69..be489d67d4ab 100644
--- a/ui/app/templates/components/transit-key-actions.hbs
+++ b/ui/app/templates/components/transit-key-actions.hbs
@@ -11,7 +11,6 @@
       @buttonColor="secondary"
       @confirmTitle="Rotate this key?"
       @confirmMessage="After rotation, all key actions will default to using the newest version of the key."
-      @confirmButtonText="Rotate"
       @modalColor="warning"
       @onConfirmAction={{action "doSubmit"}}
       data-test-transit-key-rotate
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index 9b1ef4e799de..1ed41f1bb2c4 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -41,7 +41,7 @@
           disabled={{or @disabled @isRunning}}
           @icon={{if @isRunning "loading"}}
           @color={{if (or (not @modalColor) (eq @modalColor "critical")) "critical" "primary"}}
-          @text={{or @confirmButtonText "Confirm"}}
+          @text="Confirm"
           {{on "click" this.onConfirm}}
         />
         <Hds::Button data-test-confirm-cancel-button @color="secondary" @text="Cancel" {{on "click" F.close}} />
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index a3002487914b..4d8251da47ba 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -29,7 +29,6 @@ import { tracked } from '@glimmer/tracking';
  * @param {String} buttonText - Text for the button that triggers modal to open.
  * @param {String} [buttonColor] - Color of button that triggers modal. Default is primary, other options are secondary, tertiary, and critical
  * @param {String} [modalColor=critical] - Styles modal color, if 'critical' confirm button is styled as well. Possible values: critical, warning or neutral
- * @param {String} [confirmButtonText=Confirm] - Text for button inside modal that confirms the action
  * @param {Boolean} [isRunning] - Disables the confirm button if action is still running
  * @param {Boolean} [disabled] - Disables the modal's confirm button.
  *
diff --git a/ui/tests/integration/components/confirm-action-test.js b/ui/tests/integration/components/confirm-action-test.js
index b8cac5a4d9eb..4487c49c3d4f 100644
--- a/ui/tests/integration/components/confirm-action-test.js
+++ b/ui/tests/integration/components/confirm-action-test.js
@@ -19,7 +19,6 @@ module('Integration | Component | confirm-action', function (hooks) {
       <ConfirmAction
         @buttonText="DELETE"
         @onConfirmAction={{this.onConfirm}}
-        @buttonClasses="toolbar-link"
       />
       `);
     await click('[data-test-confirm-action-trigger="true"]');

From 5b6c0e7e7a236d8afb46520d4992068ecf33ada5 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 16 Nov 2023 02:09:40 -0600
Subject: [PATCH 24/42] contextual confirm action components

---
 ui/app/components/sidebar/user-menu.hbs       | 143 +++++++++---------
 ui/app/styles/components/popup-menu.scss      |   1 +
 .../components/generated-item-list.hbs        |  40 ++---
 .../components/identity/popup-alias.hbs       |  67 ++++----
 .../components/raft-storage-overview.hbs      |  29 ++--
 .../components/secret-list/aws-role-item.hbs  |  87 ++++++-----
 .../templates/components/secret-list/item.hbs |  92 ++++++-----
 .../components/secret-list/ssh-role-item.hbs  | 141 ++++++++---------
 .../vault/cluster/access/identity/index.hbs   | 112 +++++++-------
 .../vault/cluster/access/methods.hbs          |  50 +++---
 .../vault/cluster/access/namespaces/index.hbs |  37 ++---
 .../vault/cluster/policies/index.hbs          |  84 +++++-----
 .../vault/cluster/secrets/backends.hbs        |  45 +++---
 .../addon/templates/credentials/index.hbs     |  25 +--
 ui/lib/kmip/addon/templates/scope/roles.hbs   |  24 +--
 ui/lib/kmip/addon/templates/scopes/index.hbs  |  27 ++--
 .../addon/components/page/roles.hbs           |  21 ++-
 .../ldap/addon/components/page/libraries.hbs  |  22 +--
 ui/lib/ldap/addon/components/page/roles.hbs   |  43 +++---
 19 files changed, 555 insertions(+), 535 deletions(-)

diff --git a/ui/app/components/sidebar/user-menu.hbs b/ui/app/components/sidebar/user-menu.hbs
index fb49462ab4fa..ee6ac1b60206 100644
--- a/ui/app/components/sidebar/user-menu.hbs
+++ b/ui/app/components/sidebar/user-menu.hbs
@@ -15,83 +15,80 @@
     <Hds::SideNav::Header::IconButton @icon="user" @ariaLabel="User menu" />
   </Dropdown.Trigger>
   <Dropdown.Content>
-    <Confirm as |c|>
-      <div class="popup-menu-content" data-test-user-menu-content>
-        <div class="box">
-          <div class="menu-label">
-            {{capitalize this.auth.authData.displayName}}
-          </div>
-          <nav class="menu">
-            <ul class="menu-list">
-              {{#if this.auth.allowExpiration}}
-                <li class="token-alert is-flex" data-test-user-menu-item="token alert">
-                  <span><Icon @name="alert-triangle-fill" class="has-text-highlight" /></span>
-                  <span class="is-size-8 has-text-semibold">
-                    We've stopped auto-renewing your token due to inactivity. It will expire on
-                    {{date-format this.auth.tokenExpirationDate "MMMM do yyyy, h:mm:ss a"}}.
-                  </span>
-                </li>
-              {{/if}}
-              {{#if this.hasEntityId}}
-                <li class="action">
-                  <LinkTo @route="vault.cluster.mfa-setup" data-test-user-menu-item="mfa">
-                    Multi-factor authentication
-                  </LinkTo>
-                </li>
-              {{/if}}
-              {{#if this.isUserpass}}
-                <li class="action">
-                  <LinkTo @route="vault.cluster.access.reset-password" data-test-user-menu-item="reset-password">
-                    Reset password
-                  </LinkTo>
-                </li>
-              {{/if}}
-              <li class="action" id="container">
-                {{! container is required in navbar collapsed state }}
-                <Hds::Copy::Button
-                  @text="Copy token"
-                  @textToCopy={{this.auth.currentToken}}
-                  @isFullWidth={{true}}
-                  @container="#container"
-                  class="in-dropdown link is-flex-start"
-                  {{on "click" (fn (set-flash-message "Token copied!"))}}
-                />
+    <div class="popup-menu-content" data-test-user-menu-content>
+      <div class="box">
+        <div class="menu-label">
+          {{capitalize this.auth.authData.displayName}}
+        </div>
+        <nav class="menu">
+          <ul class="menu-list">
+            {{#if this.auth.allowExpiration}}
+              <li class="token-alert is-flex" data-test-user-menu-item="token alert">
+                <span><Icon @name="alert-triangle-fill" class="has-text-highlight" /></span>
+                <span class="is-size-8 has-text-semibold">
+                  We've stopped auto-renewing your token due to inactivity. It will expire on
+                  {{date-format this.auth.tokenExpirationDate "MMMM do yyyy, h:mm:ss a"}}.
+                </span>
               </li>
-              {{#if (is-before (now interval=1000) this.auth.tokenExpirationDate)}}
-                {{#if this.auth.authData.renewable}}
-                  <li class="action">
-                    {{! TODO Hds::Button replacement skipped in favor of updating it when there is a Hds::Dropdown swapout }}
-                    <button
-                      type="button"
-                      {{on "click" this.renewToken}}
-                      class="link button {{if this.isRenewing 'is-loading'}}"
-                      data-test-user-menu-item="renew token"
-                    >
-                      Renew token
-                    </button>
-                  </li>
-                {{/if}}
-                <li class="action">
-                  <c.Message
-                    @id={{get this.auth "authData.displayName"}}
-                    @title={{concat "Revoke " (get this.auth "authData.displayName") "?"}}
-                    @onConfirm={{action "revokeToken"}}
-                    @message="You will not be able to log in again with this token."
-                    @triggerText="Revoke token"
-                    @confirmButtonText="Revoke"
-                    data-test-user-menu-item="revoke token"
-                  />
-                </li>
-              {{/if}}
+            {{/if}}
+            {{#if this.hasEntityId}}
               <li class="action">
-                <LinkTo @route="vault.cluster.logout" @model={{this.currentCluster.cluster.name}} id="logout">
-                  Log out
+                <LinkTo @route="vault.cluster.mfa-setup" data-test-user-menu-item="mfa">
+                  Multi-factor authentication
                 </LinkTo>
               </li>
-            </ul>
-          </nav>
-        </div>
+            {{/if}}
+            {{#if this.isUserpass}}
+              <li class="action">
+                <LinkTo @route="vault.cluster.access.reset-password" data-test-user-menu-item="reset-password">
+                  Reset password
+                </LinkTo>
+              </li>
+            {{/if}}
+            <li class="action" id="container">
+              {{! container is required in navbar collapsed state }}
+              <Hds::Copy::Button
+                @text="Copy token"
+                @textToCopy={{this.auth.currentToken}}
+                @isFullWidth={{true}}
+                @container="#container"
+                class="in-dropdown link is-flex-start"
+                {{on "click" (fn (set-flash-message "Token copied!"))}}
+              />
+            </li>
+            {{#if (is-before (now interval=1000) this.auth.tokenExpirationDate)}}
+              {{#if this.auth.authData.renewable}}
+                <li class="action">
+                  {{! TODO Hds::Button replacement skipped in favor of updating it when there is a Hds::Dropdown swapout }}
+                  <button
+                    type="button"
+                    {{on "click" this.renewToken}}
+                    class="link button {{if this.isRenewing 'is-loading'}}"
+                    data-test-user-menu-item="renew token"
+                  >
+                    Renew token
+                  </button>
+                </li>
+              {{/if}}
+              <ConfirmAction
+                class="hds-confirm-action-critical"
+                @buttonColor="critical"
+                @isInDropdown={{true}}
+                @confirmTitle="Revoke {{get this.auth 'authData.displayName'}}?"
+                @onConfirmAction={{action "revokeToken"}}
+                @buttonText="Revoke token"
+                @confirmMessage="You will not be able to log in again with this token."
+                data-test-user-menu-item="revoke token"
+              />
+            {{/if}}
+            <li class="action">
+              <LinkTo @route="vault.cluster.logout" @model={{this.currentCluster.cluster.name}} id="logout">
+                Log out
+              </LinkTo>
+            </li>
+          </ul>
+        </nav>
       </div>
-    </Confirm>
+    </div>
   </Dropdown.Content>
 </BasicDropdown>
\ No newline at end of file
diff --git a/ui/app/styles/components/popup-menu.scss b/ui/app/styles/components/popup-menu.scss
index 0c57e3c04ed5..94071a2fae45 100644
--- a/ui/app/styles/components/popup-menu.scss
+++ b/ui/app/styles/components/popup-menu.scss
@@ -55,6 +55,7 @@
       background-color: $ui-gray-050;
     }
     div {
+      margin-left: -$spacing-4;
       font-size: $size-7;
       font-weight: $font-weight-semibold;
     }
diff --git a/ui/app/templates/components/generated-item-list.hbs b/ui/app/templates/components/generated-item-list.hbs
index ecb9bdf61c54..7bbb6cd06188 100644
--- a/ui/app/templates/components/generated-item-list.hbs
+++ b/ui/app/templates/components/generated-item-list.hbs
@@ -75,7 +75,7 @@
       <Item.content>
         <Icon @name="folder" class="has-text-grey-light" />{{list.item.id}}
       </Item.content>
-      <Item.menu as |Menu|>
+      <Item.menu>
         <li class="action">
           <LinkTo @route="vault.cluster.access.method.item.show" @model={{list.item.id}} class="is-block">
             View
@@ -88,25 +88,25 @@
             {{singularize this.itemType}}
           </LinkTo>
         </li>
-        <li>
-          <Menu.Message
-            @id={{list.item.id}}
-            @buttonClasses="link is-destroy"
-            @onConfirm={{action
-              (perform
-                Item.callMethod
-                "destroyRecord"
-                list.item
-                (concat "Successfully deleted " (singularize this.itemType) " " list.item.id ".")
-                (concat "There was an error deleting this " (singularize this.itemType))
-                (action "refreshItemList")
-              )
-            }}
-            @message={{concat "Are you sure you want to delete " (singularize this.itemType) " " list.item.id "?"}}
-            data-test-secret-delete="true"
-            @triggerText={{concat "Delete " (singularize this.itemType)}}
-          />
-        </li>
+        <ConfirmAction
+          class="hds-confirm-action-critical"
+          @buttonColor="critical"
+          @isInDropdown={{true}}
+          @onConfirmAction={{action
+            (perform
+              Item.callMethod
+              "destroyRecord"
+              list.item
+              (concat "Successfully deleted " (singularize this.itemType) " " list.item.id ".")
+              (concat "There was an error deleting this " (singularize this.itemType))
+              (action "refreshItemList")
+            )
+          }}
+          @confirmTitle="Delete {{singularize this.itemType}}?"
+          @confirmMessage="Are you sure you want to delete {{singularize this.itemType}} {{list.item.id}}?"
+          @buttonText="Delete {{singularize this.itemType}}"
+          data-test-secret-delete
+        />
       </Item.menu>
     </ListItem>
   {{/if}}
diff --git a/ui/app/templates/components/identity/popup-alias.hbs b/ui/app/templates/components/identity/popup-alias.hbs
index 78817fb173ce..4b8c10e4bc98 100644
--- a/ui/app/templates/components/identity/popup-alias.hbs
+++ b/ui/app/templates/components/identity/popup-alias.hbs
@@ -4,41 +4,44 @@
 ~}}
 
 <PopupMenu @name="alias-menu">
-  <Confirm as |c|>
-    {{#let (get this.params "0") as |item|}}
-      <nav class="menu">
-        <ul class="menu-list">
+  {{#let (get this.params "0") as |item|}}
+    <nav class="menu">
+      <ul class="menu-list">
+        <li class="action">
+          <LinkTo
+            @route="vault.cluster.access.identity.aliases.show"
+            @models={{array (pluralize item.parentType) item.id "details"}}
+          >
+            Details
+          </LinkTo>
+        </li>
+        {{#if item.updatePath.isPending}}
           <li class="action">
-            <LinkTo
-              @route="vault.cluster.access.identity.aliases.show"
-              @models={{array (pluralize item.parentType) item.id "details"}}
-            >
-              Details
-            </LinkTo>
+            <LoadingDropdownOption />
           </li>
-          {{#if item.updatePath.isPending}}
+        {{else}}
+          {{#if item.canEdit}}
             <li class="action">
-              <LoadingDropdownOption />
+              <LinkTo
+                @route="vault.cluster.access.identity.aliases.edit"
+                @models={{array (pluralize item.parentType) item.id}}
+              >
+                Edit
+              </LinkTo>
             </li>
-          {{else}}
-            {{#if item.canEdit}}
-              <li class="action">
-                <LinkTo
-                  @route="vault.cluster.access.identity.aliases.edit"
-                  @models={{array (pluralize item.parentType) item.id}}
-                >
-                  Edit
-                </LinkTo>
-              </li>
-            {{/if}}
-            {{#if item.canDelete}}
-              <li class="action">
-                <c.Message @id={{item.id}} @onConfirm={{action "performTransaction" item}} data-test-item-delete />
-              </li>
-            {{/if}}
           {{/if}}
-        </ul>
-      </nav>
-    {{/let}}
-  </Confirm>
+          {{#if item.canDelete}}
+            <ConfirmAction
+              class="hds-confirm-action-critical"
+              @buttonText="Delete"
+              @buttonColor="critical"
+              @isInDropdown={{true}}
+              @onConfirmAction={{action "performTransaction" item}}
+              data-test-item-delete
+            />
+          {{/if}}
+        {{/if}}
+      </ul>
+    </nav>
+  {{/let}}
 </PopupMenu>
\ No newline at end of file
diff --git a/ui/app/templates/components/raft-storage-overview.hbs b/ui/app/templates/components/raft-storage-overview.hbs
index 011423ec6881..6c7755ae7974 100644
--- a/ui/app/templates/components/raft-storage-overview.hbs
+++ b/ui/app/templates/components/raft-storage-overview.hbs
@@ -81,22 +81,19 @@
         </td>
         <td class="middle no-padding has-text-right">
           <PopupMenu>
-            <Confirm as |c|>
-              <nav aria-label="remove peer">
-                <ul>
-                  <li class="action">
-                    <c.Message
-                      @id={{server.nodeId}}
-                      @onConfirm={{action "removePeer" server}}
-                      @triggerText="Remove Peer"
-                      @confirmButtonText="Remove"
-                      @title={{concat "Remove " server.nodeId "?"}}
-                      @message="This will remove the server from the raft cluster."
-                    />
-                  </li>
-                </ul>
-              </nav>
-            </Confirm>
+            <nav class="menu">
+              <ul class="menu-list">
+                <ConfirmAction
+                  class="hds-confirm-action-critical"
+                  @buttonColor="critical"
+                  @isInDropdown={{true}}
+                  @onConfirmAction={{action "removePeer" server}}
+                  @buttonText="Remove Peer"
+                  @confirmTitle="Remove {{server.nodeId}}?"
+                  @confirmMessage="This will remove the server from the raft cluster."
+                />
+              </ul>
+            </nav>
           </PopupMenu>
         </td>
       </tr>
diff --git a/ui/app/templates/components/secret-list/aws-role-item.hbs b/ui/app/templates/components/secret-list/aws-role-item.hbs
index 62ac42976f80..f922797652e9 100644
--- a/ui/app/templates/components/secret-list/aws-role-item.hbs
+++ b/ui/app/templates/components/secret-list/aws-role-item.hbs
@@ -24,55 +24,58 @@
     </div>
     <div class="column has-text-right">
       <PopupMenu @name="role-aws-nav" @contentClass="is-wide">
-        <Confirm as |c|>
-          <nav class="menu">
-            <ul class="menu-list">
-              {{#if @item.generatePath.isPending}}
+        <nav class="menu">
+          <ul class="menu-list">
+            {{#if @item.generatePath.isPending}}
+              <li class="action">
+                <LoadingDropdownOption />
+              </li>
+            {{else if @item.canGenerate}}
+              <li class="action">
+                <LinkTo
+                  @route="vault.cluster.secrets.backend.credentials"
+                  @model={{@item.id}}
+                  data-test-role-aws-link="generate"
+                >
+                  Generate credentials
+                </LinkTo>
+              </li>
+            {{/if}}
+            {{#if @item.updatePath.isPending}}
+              <li class="action">
+                <LoadingDropdownOption />
+              </li>
+              <li class="action">
+                <LoadingDropdownOption />
+              </li>
+            {{else}}
+              {{#if @item.canRead}}
                 <li class="action">
-                  <LoadingDropdownOption />
-                </li>
-              {{else if @item.canGenerate}}
-                <li class="action">
-                  <LinkTo
-                    @route="vault.cluster.secrets.backend.credentials"
-                    @model={{@item.id}}
-                    data-test-role-aws-link="generate"
-                  >
-                    Generate credentials
+                  <LinkTo @route="vault.cluster.secrets.backend.show" @model={{@item.id}} data-test-role-ssh-link="show">
+                    Details
                   </LinkTo>
                 </li>
               {{/if}}
-              {{#if @item.updatePath.isPending}}
-                <li class="action">
-                  <LoadingDropdownOption />
-                </li>
+              {{#if @item.canEdit}}
                 <li class="action">
-                  <LoadingDropdownOption />
+                  <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{@item.id}} data-test-role-ssh-link="edit">
+                    Edit
+                  </LinkTo>
                 </li>
-              {{else}}
-                {{#if @item.canRead}}
-                  <li class="action">
-                    <LinkTo @route="vault.cluster.secrets.backend.show" @model={{@item.id}} data-test-role-ssh-link="show">
-                      Details
-                    </LinkTo>
-                  </li>
-                {{/if}}
-                {{#if @item.canEdit}}
-                  <li class="action">
-                    <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{@item.id}} data-test-role-ssh-link="edit">
-                      Edit
-                    </LinkTo>
-                  </li>
-                {{/if}}
-                {{#if @item.canDelete}}
-                  <li class="action">
-                    <c.Message @id={{@item.id}} @onConfirm={{@delete}} data-test-aws-role-delete={{@item.id}} />
-                  </li>
-                {{/if}}
               {{/if}}
-            </ul>
-          </nav>
-        </Confirm>
+              {{#if @item.canDelete}}
+                <ConfirmAction
+                  class="hds-confirm-action-critical"
+                  @buttonText="Delete"
+                  @buttonColor="critical"
+                  @isInDropdown={{true}}
+                  @onConfirmAction={{@delete}}
+                  data-test-aws-role-delete={{@item.id}}
+                />
+              {{/if}}
+            {{/if}}
+          </ul>
+        </nav>
       </PopupMenu>
     </div>
   </div>
diff --git a/ui/app/templates/components/secret-list/item.hbs b/ui/app/templates/components/secret-list/item.hbs
index 548afa8963b7..3001db1f935a 100644
--- a/ui/app/templates/components/secret-list/item.hbs
+++ b/ui/app/templates/components/secret-list/item.hbs
@@ -31,58 +31,56 @@
     </div>
     <div class="column has-text-right">
       <PopupMenu name="secret-menu">
-        <Confirm as |c|>
-          <nav class="menu">
-            <ul class="menu-list">
-              {{#if @item.isFolder}}
-                <SecretLink @mode="list" @secret={{@item.id}} class="has-text-black has-text-weight-semibold">
-                  Contents
-                </SecretLink>
+        <nav class="menu">
+          <ul class="menu-list">
+            {{#if @item.isFolder}}
+              <SecretLink @mode="list" @secret={{@item.id}} class="has-text-black has-text-weight-semibold">
+                Contents
+              </SecretLink>
+            {{else}}
+              {{#if (or @item.versionPath.isLoading @item.secretPath.isLoading)}}
+                <li class="action">
+                  <LoadingDropdownOption />
+                </li>
               {{else}}
-                {{#if (or @item.versionPath.isLoading @item.secretPath.isLoading)}}
+                {{#if @item.canRead}}
                   <li class="action">
-                    <LoadingDropdownOption />
+                    <SecretLink
+                      @mode="show"
+                      @secret={{@item.id}}
+                      @queryParams={{secret-query-params @backendModel.type @item.type asQueryParams=true}}
+                      class="has-text-black has-text-weight-semibold"
+                    >
+                      Details
+                    </SecretLink>
                   </li>
-                {{else}}
-                  {{#if @item.canRead}}
-                    <li class="action">
-                      <SecretLink
-                        @mode="show"
-                        @secret={{@item.id}}
-                        @queryParams={{secret-query-params @backendModel.type @item.type asQueryParams=true}}
-                        class="has-text-black has-text-weight-semibold"
-                      >
-                        Details
-                      </SecretLink>
-                    </li>
-                  {{/if}}
-                  {{#if @item.canEdit}}
-                    <li class="action">
-                      <SecretLink
-                        @mode="edit"
-                        @secret={{@item.id}}
-                        @queryParams={{secret-query-params @backendModel.type @item.type asQueryParams=true}}
-                        class="has-text-black has-text-weight-semibold"
-                      >
-                        Edit
-                      </SecretLink>
-                    </li>
-                  {{/if}}
-                  {{#if @item.canDelete}}
-                    <li class="action">
-                      <c.Message
-                        @id={{@item.id}}
-                        @triggerText="Delete"
-                        @message="This will permanently delete this secret."
-                        @onConfirm={{@delete}}
-                      />
-                    </li>
-                  {{/if}}
+                {{/if}}
+                {{#if @item.canEdit}}
+                  <li class="action">
+                    <SecretLink
+                      @mode="edit"
+                      @secret={{@item.id}}
+                      @queryParams={{secret-query-params @backendModel.type @item.type asQueryParams=true}}
+                      class="has-text-black has-text-weight-semibold"
+                    >
+                      Edit
+                    </SecretLink>
+                  </li>
+                {{/if}}
+                {{#if @item.canDelete}}
+                  <ConfirmAction
+                    class="hds-confirm-action-critical"
+                    @buttonColor="critical"
+                    @isInDropdown={{true}}
+                    @buttonText="Delete"
+                    @confirmMessage="This will permanently delete this secret."
+                    @onConfirmAction={{@delete}}
+                  />
                 {{/if}}
               {{/if}}
-            </ul>
-          </nav>
-        </Confirm>
+            {{/if}}
+          </ul>
+        </nav>
       </PopupMenu>
     </div>
   </div>
diff --git a/ui/app/templates/components/secret-list/ssh-role-item.hbs b/ui/app/templates/components/secret-list/ssh-role-item.hbs
index 10f654c9973c..e43d0bb047ee 100644
--- a/ui/app/templates/components/secret-list/ssh-role-item.hbs
+++ b/ui/app/templates/components/secret-list/ssh-role-item.hbs
@@ -37,85 +37,88 @@
     <div class="column has-text-right">
       {{#if (eq @backendType "ssh")}}
         <PopupMenu @name="role-ssh-nav">
-          <Confirm as |c|>
-            <nav class="menu">
-              <ul class="menu-list">
-                {{#if (eq @item.keyType "otp")}}
-                  {{#if @item.generatePath.isPending}}
+          <nav class="menu">
+            <ul class="menu-list">
+              {{#if (eq @item.keyType "otp")}}
+                {{#if @item.generatePath.isPending}}
+                  <li class="action">
+                    <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
+                  </li>
+                {{else if @item.canGenerate}}
+                  <li class="action">
+                    <LinkTo
+                      @route="vault.cluster.secrets.backend.credentials"
+                      @model={{@item.id}}
+                      data-test-role-ssh-link="generate"
+                    >
+                      Generate Credentials
+                    </LinkTo>
+                  </li>
+                {{/if}}
+              {{else if (eq @item.keyType "ca")}}
+                {{#if @item.signPath.isPending}}
+                  <li class="action">
                     <li class="action">
                       <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
                     </li>
-                  {{else if @item.canGenerate}}
-                    <li class="action">
-                      <LinkTo
-                        @route="vault.cluster.secrets.backend.credentials"
-                        @model={{@item.id}}
-                        data-test-role-ssh-link="generate"
-                      >
-                        Generate Credentials
-                      </LinkTo>
-                    </li>
-                  {{/if}}
-                {{else if (eq @item.keyType "ca")}}
-                  {{#if @item.signPath.isPending}}
-                    <li class="action">
-                      <li class="action">
-                        <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
-                      </li>
-                    </li>
-                  {{else if @item.canGenerate}}
-                    <li class="action">
-                      <LinkTo
-                        @route="vault.cluster.secrets.backend.sign"
-                        @model={{@item.id}}
-                        data-test-role-ssh-link="generate"
-                      >
-                        Sign Keys
-                      </LinkTo>
-                    </li>
-                  {{/if}}
+                  </li>
+                {{else if @item.canGenerate}}
+                  <li class="action">
+                    <LinkTo
+                      @route="vault.cluster.secrets.backend.sign"
+                      @model={{@item.id}}
+                      data-test-role-ssh-link="generate"
+                    >
+                      Sign Keys
+                    </LinkTo>
+                  </li>
                 {{/if}}
-                {{#if @item.canEditZeroAddress}}
+              {{/if}}
+              {{#if @item.canEditZeroAddress}}
+                <li class="action">
+                  <Hds::Button
+                    disabled={{@loadingToggleZeroAddress}}
+                    class="link"
+                    @icon={{if @loadingToggleZeroAddress "loading"}}
+                    @isIconOnly={{@loadingToggleZeroAddress}}
+                    {{on "click" @toggleZeroAddress}}
+                    @text={{if @item.zeroAddress "Disable Zero Address" "Enable Zero Address"}}
+                  />
+                </li>
+              {{/if}}
+              {{#if @item.updatePath.isPending}}
+                <li class="action">
+                  <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
+                  <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
+                </li>
+              {{else}}
+                {{#if @item.canRead}}
                   <li class="action">
-                    <Hds::Button
-                      disabled={{@loadingToggleZeroAddress}}
-                      class="link"
-                      @icon={{if @loadingToggleZeroAddress "loading"}}
-                      @isIconOnly={{@loadingToggleZeroAddress}}
-                      {{on "click" @toggleZeroAddress}}
-                      @text={{if @item.zeroAddress "Disable Zero Address" "Enable Zero Address"}}
-                    />
+                    <LinkTo @route="vault.cluster.secrets.backend.show" @model={{@item.id}} data-test-role-ssh-link="show">
+                      Details
+                    </LinkTo>
                   </li>
                 {{/if}}
-                {{#if @item.updatePath.isPending}}
+                {{#if @item.canEdit}}
                   <li class="action">
-                    <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
-                    <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
+                    <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{@item.id}} data-test-role-ssh-link="edit">
+                      Edit
+                    </LinkTo>
                   </li>
-                {{else}}
-                  {{#if @item.canRead}}
-                    <li class="action">
-                      <LinkTo @route="vault.cluster.secrets.backend.show" @model={{@item.id}} data-test-role-ssh-link="show">
-                        Details
-                      </LinkTo>
-                    </li>
-                  {{/if}}
-                  {{#if @item.canEdit}}
-                    <li class="action">
-                      <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{@item.id}} data-test-role-ssh-link="edit">
-                        Edit
-                      </LinkTo>
-                    </li>
-                  {{/if}}
-                  {{#if @item.canDelete}}
-                    <li class="action">
-                      <c.Message @id={{@item.id}} @onConfirm={{@delete}} data-test-ssh-role-delete />
-                    </li>
-                  {{/if}}
                 {{/if}}
-              </ul>
-            </nav>
-          </Confirm>
+                {{#if @item.canDelete}}
+                  <ConfirmAction
+                    class="hds-confirm-action-critical"
+                    @buttonText="Delete"
+                    @buttonColor="critical"
+                    @isInDropdown={{true}}
+                    @onConfirmAction={{@delete}}
+                    data-test-ssh-role-delete
+                  />
+                {{/if}}
+              {{/if}}
+            </ul>
+          </nav>
         </PopupMenu>
       {{/if}}
     </div>
diff --git a/ui/app/templates/vault/cluster/access/identity/index.hbs b/ui/app/templates/vault/cluster/access/identity/index.hbs
index 19b51620ecc5..6f4788859210 100644
--- a/ui/app/templates/vault/cluster/access/identity/index.hbs
+++ b/ui/app/templates/vault/cluster/access/identity/index.hbs
@@ -33,63 +33,71 @@
         </div>
         <div class="column has-text-right">
           <PopupMenu @name="identity-item" @onOpen={{action "reloadRecord" item}}>
-            <Confirm as |c|>
-              <nav class="menu">
-                <ul class="menu-list">
+            <nav class="menu">
+              <ul class="menu-list">
+                <li class="action">
+                  <LinkTo @route="vault.cluster.access.identity.show" @models={{array item.id "details"}}>
+                    Details
+                  </LinkTo>
+                </li>
+                {{#if (or item.isReloading item.updatePath.isPending item.aliasPath.isPending)}}
                   <li class="action">
-                    <LinkTo @route="vault.cluster.access.identity.show" @models={{array item.id "details"}}>
-                      Details
-                    </LinkTo>
+                    <LoadingDropdownOption />
                   </li>
-                  {{#if (or item.isReloading item.updatePath.isPending item.aliasPath.isPending)}}
+                {{else}}
+                  {{#if item.canAddAlias}}
                     <li class="action">
-                      <LoadingDropdownOption />
+                      <LinkTo
+                        @route="vault.cluster.access.identity.aliases.add"
+                        @models={{array (pluralize this.identityType) item.id}}
+                      >
+                        Create alias
+                      </LinkTo>
                     </li>
-                  {{else}}
-                    {{#if item.canAddAlias}}
-                      <li class="action">
-                        <LinkTo
-                          @route="vault.cluster.access.identity.aliases.add"
-                          @models={{array (pluralize this.identityType) item.id}}
-                        >
-                          Create alias
-                        </LinkTo>
-                      </li>
-                    {{/if}}
-                    {{#if item.canEdit}}
-                      <li class="action">
-                        <LinkTo @route="vault.cluster.access.identity.edit" @model={{item.id}}>
-                          Edit
-                        </LinkTo>
-                      </li>
-                      <li class="action">
-                        {{#if item.disabled}}
-                          {{! TODO Hds::Button replacement skipped in favor of updating it when there is a Hds::Dropdown swapout }}
-                          <button type="button" {{action "toggleDisabled" item}} class="link">
-                            Enable
-                          </button>
-                        {{else if (eq this.identityType "entity")}}
-                          <c.Message
-                            @id="{{item.id}}-disable"
-                            @triggerText="Disable"
-                            @message="Associated tokens will not be revoked, but cannot be used"
-                            @title="Disable this?"
-                            @confirmButtonText="Disable"
-                            @onConfirm={{action "toggleDisabled" item}}
-                            data-test-engine-disable="true"
-                          />
-                        {{/if}}
-                      </li>
-                    {{/if}}
-                    {{#if item.canDelete}}
-                      <li class="action">
-                        <c.Message @id={{item.id}} @onConfirm={{action "delete" item}} data-test-item-delete="true" />
-                      </li>
-                    {{/if}}
                   {{/if}}
-                </ul>
-              </nav>
-            </Confirm>
+                  {{#if item.canEdit}}
+                    <li class="action">
+                      <LinkTo @route="vault.cluster.access.identity.edit" @model={{item.id}}>
+                        Edit
+                      </LinkTo>
+                    </li>
+                    <li class="action">
+                      {{#if item.disabled}}
+                        <Hds::Button
+                          @text="Enable"
+                          type="button"
+                          {{on "click" (action "toggleDisabled" item)}}
+                          class="link"
+                        />
+                      {{else if (eq this.identityType "entity")}}
+                        <ConfirmAction
+                          class="hds-confirm-action-critical"
+                          @buttonColor="critical"
+                          @isInDropdown={{true}}
+                          @buttonText="Disable"
+                          @confirmMessage="Associated tokens will not be revoked, but cannot be used"
+                          @confirmTitle="Disable this entity?"
+                          @onConfirmAction={{action "toggleDisabled" item}}
+                          @modalColor="warning"
+                          data-test-engine-disable
+                        />
+                      {{/if}}
+                    </li>
+                  {{/if}}
+                  {{#if item.canDelete}}
+                    <ConfirmAction
+                      class="hds-confirm-action-critical"
+                      @buttonColor="critical"
+                      @isInDropdown={{true}}
+                      @buttonText="Delete"
+                      @onConfirmAction={{action "delete" item}}
+                      @confirmTitle="Delete this {{this.identityType}}?"
+                      data-test-item-delete
+                    />
+                  {{/if}}
+                {{/if}}
+              </ul>
+            </nav>
           </PopupMenu>
         </div>
       </div>
diff --git a/ui/app/templates/vault/cluster/access/methods.hbs b/ui/app/templates/vault/cluster/access/methods.hbs
index a2074297fbb2..55d7a17980b9 100644
--- a/ui/app/templates/vault/cluster/access/methods.hbs
+++ b/ui/app/templates/vault/cluster/access/methods.hbs
@@ -84,36 +84,34 @@
       <div class="level-right is-flex is-paddingless is-marginless">
         <div class="level-item">
           <PopupMenu @name="auth-backend-nav">
-            <Confirm as |c|>
-              <nav class="menu">
-                <ul class="menu-list">
+            <nav class="menu">
+              <ul class="menu-list">
+                <li>
+                  <LinkTo @route="vault.cluster.access.method.section" @models={{array method.id "configuration"}}>
+                    View configuration
+                  </LinkTo>
+                </li>
+                {{#if method.canEdit}}
                   <li>
-                    <LinkTo @route="vault.cluster.access.method.section" @models={{array method.id "configuration"}}>
-                      View configuration
+                    <LinkTo @route="vault.cluster.settings.auth.configure" @model={{method.id}}>
+                      Edit configuration
                     </LinkTo>
                   </li>
-                  {{#if method.canEdit}}
-                    <li>
-                      <LinkTo @route="vault.cluster.settings.auth.configure" @model={{method.id}}>
-                        Edit configuration
-                      </LinkTo>
-                    </li>
-                  {{/if}}
+                {{/if}}
 
-                  {{#if (and (not-eq method.methodType "token") method.canDisable)}}
-                    <li class="action">
-                      <c.Message
-                        @id={{method.id}}
-                        @title="Disable method?"
-                        @message="This may affect access to Vault data."
-                        @triggerText="Disable"
-                        @onConfirm={{perform this.disableMethod method}}
-                      />
-                    </li>
-                  {{/if}}
-                </ul>
-              </nav>
-            </Confirm>
+                {{#if (and (not-eq method.methodType "token") method.canDisable)}}
+                  <ConfirmAction
+                    class="hds-confirm-action-critical"
+                    @buttonColor="critical"
+                    @isInDropdown={{true}}
+                    @confirmTitle="Disable method?"
+                    @confirmMessage="This may affect access to Vault data."
+                    @buttonText="Disable"
+                    @onConfirmAction={{perform this.disableMethod method}}
+                  />
+                {{/if}}
+              </ul>
+            </nav>
           </PopupMenu>
         </div>
       </div>
diff --git a/ui/app/templates/vault/cluster/access/namespaces/index.hbs b/ui/app/templates/vault/cluster/access/namespaces/index.hbs
index a9d5bf54b3de..27c4610a2e75 100644
--- a/ui/app/templates/vault/cluster/access/namespaces/index.hbs
+++ b/ui/app/templates/vault/cluster/access/namespaces/index.hbs
@@ -36,7 +36,7 @@
         <Item.content>
           {{list.item.id}}
         </Item.content>
-        <Item.menu as |m|>
+        <Item.menu>
           {{#let (concat this.currentNamespace (if this.currentNamespace "/") list.item.id) as |targetNamespace|}}
             {{#if (includes targetNamespace this.accessibleNamespaces)}}
               <li class="action">
@@ -46,23 +46,24 @@
               </li>
             {{/if}}
           {{/let}}
-          <li class="action">
-            <m.Message
-              @id={{list.item.id}}
-              @confirmButtonText="Remove"
-              @message="Any engines or mounts in this namespace will also be removed."
-              @onConfirm={{action
-                (perform
-                  Item.callMethod
-                  "destroyRecord"
-                  list.item
-                  (concat "Successfully deleted namespace: " list.item.id)
-                  "There was an error deleting this namespace: "
-                  (action "refreshNamespaceList")
-                )
-              }}
-            />
-          </li>
+          <ConfirmAction
+            class="hds-confirm-action-critical"
+            @buttonColor="critical"
+            @isInDropdown={{true}}
+            @buttonText="Delete"
+            @confirmTitle="Delete this namespace?"
+            @confirmMessage="Any engines or mounts in this namespace will also be removed."
+            @onConfirmAction={{action
+              (perform
+                Item.callMethod
+                "destroyRecord"
+                list.item
+                (concat "Successfully deleted namespace: " list.item.id)
+                "There was an error deleting this namespace: "
+                (action "refreshNamespaceList")
+              )
+            }}
+          />
         </Item.menu>
       </ListItem>
     {{/if}}
diff --git a/ui/app/templates/vault/cluster/policies/index.hbs b/ui/app/templates/vault/cluster/policies/index.hbs
index 0aa5c28fafde..e1d180e97ec2 100644
--- a/ui/app/templates/vault/cluster/policies/index.hbs
+++ b/ui/app/templates/vault/cluster/policies/index.hbs
@@ -92,53 +92,53 @@
             </div>
             <div class="column has-text-right">
               <PopupMenu name="policy-nav">
-                <Confirm as |c|>
-                  <nav class="menu">
-                    <ul class="menu-list">
-                      {{#if item.updatePath.isPending}}
+                <nav class="menu">
+                  <ul class="menu-list">
+                    {{#if item.updatePath.isPending}}
+                      <li class="action">
+                        <LoadingDropdownOption />
+                      </li>
+                      <li class="action">
+                        <LoadingDropdownOption />
+                      </li>
+                    {{else}}
+                      {{#if item.canRead}}
                         <li class="action">
-                          <LoadingDropdownOption />
+                          <LinkTo
+                            @route="vault.cluster.policy.show"
+                            @models={{array this.policyType item.id}}
+                            data-test-policy-link="show"
+                          >
+                            Details
+                          </LinkTo>
                         </li>
+                      {{/if}}
+                      {{#if item.canEdit}}
                         <li class="action">
-                          <LoadingDropdownOption />
+                          <LinkTo
+                            @route="vault.cluster.policy.edit"
+                            @models={{array this.policyType item.id}}
+                            data-test-policy-link="edit"
+                          >
+                            Edit
+                          </LinkTo>
                         </li>
-                      {{else}}
-                        {{#if item.canRead}}
-                          <li class="action">
-                            <LinkTo
-                              @route="vault.cluster.policy.show"
-                              @models={{array this.policyType item.id}}
-                              data-test-policy-link="show"
-                            >
-                              Details
-                            </LinkTo>
-                          </li>
-                        {{/if}}
-                        {{#if item.canEdit}}
-                          <li class="action">
-                            <LinkTo
-                              @route="vault.cluster.policy.edit"
-                              @models={{array this.policyType item.id}}
-                              data-test-policy-link="edit"
-                            >
-                              Edit
-                            </LinkTo>
-                          </li>
-                        {{/if}}
-                        {{#if item.canDelete}}
-                          <li class="action">
-                            <c.Message
-                              @id={{item.id}}
-                              @confirmMessage="This will permanently delete this policy and may affect access to some data"
-                              @onConfirm={{action "deletePolicy" item}}
-                              data-test-policy-delete={{item.id}}
-                            />
-                          </li>
-                        {{/if}}
                       {{/if}}
-                    </ul>
-                  </nav>
-                </Confirm>
+                      {{#if item.canDelete}}
+                        <ConfirmAction
+                          class="hds-confirm-action-critical"
+                          @buttonColor="critical"
+                          @isInDropdown={{true}}
+                          @buttonText="Delete"
+                          @confirmTitle="Delete this policy?"
+                          @confirmMessage="This will permanently delete this policy and may affect access to some data"
+                          @onConfirmAction={{action "deletePolicy" item}}
+                          data-test-policy-delete={{item.id}}
+                        />
+                      {{/if}}
+                    {{/if}}
+                  </ul>
+                </nav>
               </PopupMenu>
             </div>
           </div>
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index 44dc3e440ecb..698a3d59128b 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -96,30 +96,27 @@
     {{! meatball sandwich menu }}
     <div class="linked-block-popup-menu">
       <PopupMenu @name="engine-menu">
-        <Confirm as |c|>
-          <nav class="menu" aria-label="{{if backend.isSupportedBackend 'supported' 'unsupported'}} secrets engine menu">
-            <ul class="menu-list">
-              <li class="action">
-                <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}} data-test-engine-config>
-                  View configuration
-                </LinkTo>
-              </li>
-              {{#if (not-eq backend.type "cubbyhole")}}
-                <li class="action">
-                  <c.Message
-                    @id={{backend.id}}
-                    @triggerText="Disable"
-                    @message="Any data in this engine will be permanently deleted."
-                    @title="Disable engine?"
-                    @confirmButtonText="Disable"
-                    @onConfirm={{perform this.disableEngine backend}}
-                    data-test-engine-disable="true"
-                  />
-                </li>
-              {{/if}}
-            </ul>
-          </nav>
-        </Confirm>
+        <nav class="menu" aria-label="{{if backend.isSupportedBackend 'supported' 'unsupported'}} secrets engine menu">
+          <ul class="menu-list">
+            <li class="action">
+              <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}} data-test-engine-config>
+                View configuration
+              </LinkTo>
+            </li>
+            {{#if (not-eq backend.type "cubbyhole")}}
+              <ConfirmAction
+                class="hds-confirm-action-critical"
+                @buttonColor="critical"
+                @isInDropdown={{true}}
+                @confirmMessage="Any data in this engine will be permanently deleted."
+                @confirmTitle="Disable engine?"
+                @buttonText="Disable"
+                @onConfirmAction={{perform this.disableEngine backend}}
+                data-test-engine-disable
+              />
+            {{/if}}
+          </ul>
+        </nav>
       </PopupMenu>
     </div>
   </LinkedBlock>
diff --git a/ui/lib/kmip/addon/templates/credentials/index.hbs b/ui/lib/kmip/addon/templates/credentials/index.hbs
index 86eb6d7fb7f8..f146587027ff 100644
--- a/ui/lib/kmip/addon/templates/credentials/index.hbs
+++ b/ui/lib/kmip/addon/templates/credentials/index.hbs
@@ -64,21 +64,26 @@
       <Item.content>
         <Icon @name="file-text" class="has-text-grey-light" />{{list.item.id}}
       </Item.content>
-      <Item.menu as |m|>
+      <Item.menu>
         <li class="action">
           <LinkTo @route="credentials.show" @models={{array this.scope this.role list.item.id}} class="is-block">
             View credentials
           </LinkTo>
         </li>
         {{#if list.item.deletePath.canDelete}}
-          <MenuLoader @loadingParam={{list.item.deletePath.isPending}}>
-            <m.Message
-              @id={{list.item.id}}
-              @triggerText="Revoke credentials"
-              @title="Revoke this?"
-              @message="Any client using these credentials will no longer be able to."
-              @confirmButtonText="Revoke"
-              @onConfirm={{action
+          {{#if list.item.deletePath.isPending}}
+            <li class="action">
+              <LoadingDropdownOption />
+            </li>
+          {{else}}
+            <ConfirmAction
+              class="hds-confirm-action-critical"
+              @buttonColor="critical"
+              @isInDropdown={{true}}
+              @buttonText="Revoke credentials"
+              @confirmTitle="Revoke this?"
+              @confirmMessage="Any client using these credentials will no longer be able to."
+              @onConfirmAction={{action
                 (perform
                   Item.callMethod
                   "destroyRecord"
@@ -89,7 +94,7 @@
                 )
               }}
             />
-          </MenuLoader>
+          {{/if}}
         {{/if}}
       </Item.menu>
     </ListItem>
diff --git a/ui/lib/kmip/addon/templates/scope/roles.hbs b/ui/lib/kmip/addon/templates/scope/roles.hbs
index ea9372274074..b152b31c2cad 100644
--- a/ui/lib/kmip/addon/templates/scope/roles.hbs
+++ b/ui/lib/kmip/addon/templates/scope/roles.hbs
@@ -70,7 +70,7 @@
       <Item.content>
         <Icon @name="user" class="has-text-grey-light" />{{list.item.id}}
       </Item.content>
-      <Item.menu as |m|>
+      <Item.menu>
         <li class="action">
           <LinkTo @route="credentials" @models={{array this.scope list.item.id}} class="is-block">
             View credentials
@@ -89,12 +89,18 @@
           </MenuLoader>
         {{/if}}
         {{#if list.item.updatePath.canDelete}}
-          <MenuLoader @loadingParam={{list.item.updatePath.isPending}}>
-            <m.Message
-              @id={{list.item.id}}
-              @triggerText="Delete role"
-              @message={{concat "Are you sure you want to delete " list.item.id "?"}}
-              @onConfirm={{action
+          {{#if list.item.updatePath.isPending}}
+            <li class="action">
+              <LoadingDropdownOption />
+            </li>
+          {{else}}
+            <ConfirmAction
+              class="hds-confirm-action-critical"
+              @buttonColor="critical"
+              @isInDropdown={{true}}
+              @buttonText="Delete role"
+              @confirmMessage="Are you sure you want to delete {{list.item.id}}?"
+              @onConfirmAction={{action
                 (perform
                   Item.callMethod
                   "destroyRecord"
@@ -104,9 +110,9 @@
                   (action "refresh")
                 )
               }}
-              data-test-scope-delete="true"
+              data-test-scope-delete
             />
-          </MenuLoader>
+          {{/if}}
         {{/if}}
       </Item.menu>
     </ListItem>
diff --git a/ui/lib/kmip/addon/templates/scopes/index.hbs b/ui/lib/kmip/addon/templates/scopes/index.hbs
index f316e159f1bb..e66373ec75c9 100644
--- a/ui/lib/kmip/addon/templates/scopes/index.hbs
+++ b/ui/lib/kmip/addon/templates/scopes/index.hbs
@@ -59,21 +59,26 @@
       <Item.content>
         <Icon @name="folder" class="has-text-grey-light" />{{list.item.id}}
       </Item.content>
-      <Item.menu as |m|>
+      <Item.menu>
         <li class="action">
           <LinkTo @route="scope" @model={{list.item.id}} class="is-block">
             View scope
           </LinkTo>
         </li>
         {{#if list.item.updatePath.canDelete}}
-          <MenuLoader @loadingParam={{list.item.updatePath.isPending}}>
-            <m.Message
-              @id={{list.item.id}}
-              @triggerText="Delete scope"
-              @title={{concat "Delete scope " list.item.id "?"}}
-              @message="This will permanently delete this scope and all roles and credentials contained within"
-              @cancelButtonText="Cancel"
-              @onConfirm={{action
+          {{#if list.item.updatePath.isPending}}
+            <li class="action">
+              <LoadingDropdownOption />
+            </li>
+          {{else}}
+            <ConfirmAction
+              class="hds-confirm-action-critical"
+              @buttonColor="critical"
+              @isInDropdown={{true}}
+              @buttonText="Delete scope"
+              @confirmTitle="Delete scope {{list.item.id}}?"
+              @confirmMessage="This will permanently delete this scope and all roles and credentials contained within"
+              @onConfirmAction={{action
                 (perform
                   Item.callMethod
                   "destroyRecord"
@@ -83,9 +88,9 @@
                   (action "refresh")
                 )
               }}
-              data-test-scope-delete="true"
+              data-test-scope-delete
             />
-          </MenuLoader>
+          {{/if}}
         {{/if}}
       </Item.menu>
     </ListItem>
diff --git a/ui/lib/kubernetes/addon/components/page/roles.hbs b/ui/lib/kubernetes/addon/components/page/roles.hbs
index 826e769fffea..bf82952fafc3 100644
--- a/ui/lib/kubernetes/addon/components/page/roles.hbs
+++ b/ui/lib/kubernetes/addon/components/page/roles.hbs
@@ -40,7 +40,7 @@
           <Icon @name="user" />
           <span data-test-role={{role.name}}>{{role.name}}</span>
         </Item.content>
-        <Item.menu as |Menu|>
+        <Item.menu>
           {{#if role.rolesPath.isLoading}}
             <li class="action">
               <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
@@ -68,16 +68,15 @@
                 Edit
               </LinkTo>
             </li>
-            <li class="action">
-              <Menu.Message
-                data-test-delete
-                @id={{role.id}}
-                @triggerText="Delete"
-                @title="Are you sure?"
-                @message="Deleting this role means that you’ll need to recreate it in order to generate credentials again."
-                @onConfirm={{fn this.onDelete role}}
-              />
-            </li>
+            <ConfirmAction
+              data-test-delete
+              class="hds-confirm-action-critical"
+              @buttonColor="critical"
+              @isInDropdown={{true}}
+              @buttonText="Delete"
+              @confirmMessage="Deleting this role means that you’ll need to recreate it in order to generate credentials again."
+              @onConfirmAction={{fn this.onDelete role}}
+            />
           {{/if}}
         </Item.menu>
       </ListItem>
diff --git a/ui/lib/ldap/addon/components/page/libraries.hbs b/ui/lib/ldap/addon/components/page/libraries.hbs
index b98c9b9a803d..f61dc537927f 100644
--- a/ui/lib/ldap/addon/components/page/libraries.hbs
+++ b/ui/lib/ldap/addon/components/page/libraries.hbs
@@ -46,7 +46,7 @@
           <Icon @name="folder" />
           <span data-test-library={{library.name}}>{{library.name}}</span>
         </Item.content>
-        <Item.menu as |Menu|>
+        <Item.menu>
           {{#if library.libraryPath.isLoading}}
             <li class="action">
               <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
@@ -75,16 +75,16 @@
               </LinkTo>
             </li>
             {{#if library.canDelete}}
-              <li class="action">
-                <Menu.Message
-                  data-test-delete
-                  @id={{library.id}}
-                  @triggerText="Delete"
-                  @title="Are you sure?"
-                  @message="This library and associated accounts will be permanently deleted. You will not be able to recover it."
-                  @onConfirm={{fn this.onDelete library}}
-                />
-              </li>
+              <ConfirmAction
+                data-test-delete
+                @id={{library.id}}
+                class="hds-confirm-action-critical"
+                @buttonColor="critical"
+                @isInDropdown={{true}}
+                @buttonText="Delete"
+                @confirmMessage="This library and associated accounts will be permanently deleted. You will not be able to recover it."
+                @onConfirmAction={{fn this.onDelete library}}
+              />
             {{/if}}
           {{/if}}
         </Item.menu>
diff --git a/ui/lib/ldap/addon/components/page/roles.hbs b/ui/lib/ldap/addon/components/page/roles.hbs
index 0c3a35ce5947..6b510868afa2 100644
--- a/ui/lib/ldap/addon/components/page/roles.hbs
+++ b/ui/lib/ldap/addon/components/page/roles.hbs
@@ -53,7 +53,7 @@
           <span data-test-role={{role.name}}>{{role.name}}</span>
           <Hds::Badge @text={{role.type}} data-test-role-type-badge={{role.name}} />
         </Item.content>
-        <Item.menu as |Menu|>
+        <Item.menu>
           {{#if role.rolePath.isLoading}}
             <li class="action">
               <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
@@ -82,17 +82,17 @@
               </LinkTo>
             </li>
             {{#if role.canRotateStaticCreds}}
-              <li class="action">
-                <Menu.Message
-                  data-test-rotate-creds
-                  @id={{concat "rotate-" role.id}}
-                  @triggerText="Rotate credentials"
-                  @title="Are you sure?"
-                  @message="When manually rotating credentials, the rotation period will start over."
-                  @confirmButtonText="Rotate"
-                  @onConfirm={{fn this.onRotate role}}
-                />
-              </li>
+              <ConfirmAction
+                data-test-rotate-creds
+                class="hds-confirm-action-critical"
+                @buttonColor="critical"
+                @isInDropdown={{true}}
+                @id={{concat "rotate-" role.id}}
+                @buttonText="Rotate credentials"
+                @confirmMessage="When manually rotating credentials, the rotation period will start over."
+                @modalColor="warning"
+                @onConfirmAction={{fn this.onRotate role}}
+              />
             {{/if}}
             <li class="action">
               <LinkTo
@@ -107,16 +107,15 @@
               </LinkTo>
             </li>
             {{#if role.canDelete}}
-              <li class="action">
-                <Menu.Message
-                  data-test-delete
-                  @id={{concat "delete-" role.id}}
-                  @triggerText="Delete"
-                  @title="Are you sure?"
-                  @message="Deleting this role means that you’ll need to recreate it in order to generate credentials again."
-                  @onConfirm={{fn this.onDelete role}}
-                />
-              </li>
+              <ConfirmAction
+                data-test-delete
+                class="hds-confirm-action-critical"
+                @buttonColor="critical"
+                @isInDropdown={{true}}
+                @buttonText="Delete"
+                @confirmMessage="Deleting this role means that you’ll need to recreate it in order to generate credentials again."
+                @onConfirmAction={{fn this.onDelete role}}
+              />
             {{/if}}
           {{/if}}
         </Item.menu>

From 16fbe1aec1fc89bec306f2757114c584ff8e8fd7 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 16 Nov 2023 02:10:12 -0600
Subject: [PATCH 25/42] delete old components

---
 ui/app/styles/components/confirm.scss         | 139 ------------------
 ui/app/styles/core.scss                       |   1 -
 ui/lib/core/addon/components/confirm.js       |  72 ---------
 .../core/addon/components/confirm/message.js  |  59 --------
 .../addon/templates/components/confirm.hbs    |  23 ---
 .../templates/components/confirm/message.hbs  |  40 -----
 .../components/list-item/popup-menu.hbs       |  12 +-
 ui/lib/core/app/components/confirm.js         |   6 -
 ui/lib/core/app/components/confirm/message.js |   6 -
 .../integration/components/confirm-test.js    | 107 --------------
 10 files changed, 5 insertions(+), 460 deletions(-)
 delete mode 100644 ui/app/styles/components/confirm.scss
 delete mode 100644 ui/lib/core/addon/components/confirm.js
 delete mode 100644 ui/lib/core/addon/components/confirm/message.js
 delete mode 100644 ui/lib/core/addon/templates/components/confirm.hbs
 delete mode 100644 ui/lib/core/addon/templates/components/confirm/message.hbs
 delete mode 100644 ui/lib/core/app/components/confirm.js
 delete mode 100644 ui/lib/core/app/components/confirm/message.js
 delete mode 100644 ui/tests/integration/components/confirm-test.js

diff --git a/ui/app/styles/components/confirm.scss b/ui/app/styles/components/confirm.scss
deleted file mode 100644
index 65f56a6291a0..000000000000
--- a/ui/app/styles/components/confirm.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-.confirm-wrapper {
-  position: relative;
-  overflow: hidden;
-  border-radius: $radius;
-  box-shadow: $box-shadow, $box-shadow-middle;
-}
-
-.confirm {
-  transition: transform $speed;
-  padding-top: 2px;
-}
-
-.show-confirm {
-  transform: translateX(-100%);
-  transition: transform $speed;
-}
-
-.confirm.show-confirm {
-  visibility: hidden;
-}
-
-.confirm-overlay {
-  position: absolute;
-  background-color: white;
-  top: 0;
-  left: 100%;
-  width: 100%;
-}
-
-.confirm,
-.confirm-overlay {
-  button.link,
-  a {
-    background-color: $white;
-    color: $grey-darkest;
-
-    &:hover {
-      background-color: $ui-gray-050;
-      color: $ui-gray-900;
-    }
-
-    &.is-active {
-      background-color: $blue-500;
-      color: $blue;
-    }
-
-    &.is-destroy {
-      color: $red;
-
-      &:hover {
-        background-color: $red;
-        color: $white;
-      }
-    }
-
-    &.disabled {
-      opacity: 0.5;
-
-      &:hover {
-        background: transparent;
-        cursor: default;
-      }
-    }
-  }
-}
-
-.confirm-action span .button {
-  display: block;
-  margin: 0.25rem auto;
-  width: 95%;
-}
-
-.confirm-action > span {
-  @include from($mobile) {
-    align-items: center;
-    display: flex;
-  }
-
-  * {
-    margin-left: $spacing-12;
-  }
-
-  .confirm-action-text:not(.is-block) {
-    text-align: right;
-
-    @include until($mobile) {
-      display: block;
-      margin-bottom: $spacing-12;
-      text-align: left;
-    }
-  }
-  .confirm-action-text.is-block {
-    text-align: left;
-  }
-}
-
-.confirm-action-message {
-  margin: 0;
-
-  .message {
-    border: 0;
-    font-size: $size-8;
-    line-height: 1.33;
-    margin: 0;
-  }
-
-  .message-title {
-    font-size: 1rem;
-  }
-
-  .hs-icon {
-    color: $yellow;
-  }
-
-  p {
-    font-weight: $font-weight-semibold;
-    margin-left: $spacing-24;
-    padding-left: $spacing-4;
-    padding-top: 0;
-  }
-
-  .confirm-action-options {
-    border-top: $light-border;
-    display: flex;
-    padding: $spacing-4;
-
-    .link {
-      flex: 1;
-      text-align: center;
-      width: auto;
-      padding: $spacing-8;
-    }
-  }
-}
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index e0fced4b6fba..92d50091f681 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -61,7 +61,6 @@
 @import './components/calendar-widget';
 @import './components/cluster-banners';
 @import './components/codemirror';
-@import './components/confirm';
 @import './components/console-ui-panel';
 @import './components/control-group';
 @import './components/doc-link';
diff --git a/ui/lib/core/addon/components/confirm.js b/ui/lib/core/addon/components/confirm.js
deleted file mode 100644
index 9d621f60f83b..000000000000
--- a/ui/lib/core/addon/components/confirm.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import layout from '../templates/components/confirm';
-import { next } from '@ember/runloop';
-
-/**
- * @module Confirm
- * `Confirm` components prevent users from performing actions they do not intend to by showing a confirmation message as an overlay. This is a contextual component that should always be rendered with a `Message` which triggers the message.
- *
- * @example
- * ```js
- * <div class="box">
- * <Confirm as |c|>
- *   <c.Message
- *     @id={{item.id}}
- *     @triggerText="Delete"
- *     @message="This will permanently delete this secret and all its versions."
- *     @onConfirm={{action "delete" item "secret"}}
- *     />
- * </Confirm>
- * </div>
- * ```
- */
-
-export default Component.extend({
-  layout,
-  openTrigger: null,
-  height: 0,
-  focusTrigger: null,
-  wormholeReference: null,
-  wormholeId: computed('elementId', function () {
-    return `confirm-${this.elementId}`;
-  }),
-  didInsertElement() {
-    this._super(...arguments);
-    this.set('wormholeReference', this.element.querySelector(`#${this.wormholeId}`));
-  },
-  didRender() {
-    this._super(...arguments);
-    this.updateHeight();
-  },
-  updateHeight: function () {
-    const height = this.openTrigger
-      ? this.element.querySelector('.confirm-overlay').clientHeight
-      : this.element.querySelector('.confirm').clientHeight;
-    this.element.querySelector('.confirm-wrapper').style = `height: ${height}px;`;
-  },
-  actions: {
-    onTrigger: function (itemId, e) {
-      this.set('openTrigger', itemId);
-
-      // store a reference to the trigger so we can focus the element
-      // after clicking cancel
-      this.set('focusTrigger', e.target);
-      this.updateHeight();
-    },
-    onCancel: function () {
-      this.set('openTrigger', '');
-      this.updateHeight();
-
-      next(() => {
-        this.focusTrigger.focus();
-        this.set('focusTrigger', null);
-      });
-    },
-  },
-});
diff --git a/ui/lib/core/addon/components/confirm/message.js b/ui/lib/core/addon/components/confirm/message.js
deleted file mode 100644
index 02cbe08b6de3..000000000000
--- a/ui/lib/core/addon/components/confirm/message.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import layout from '../../templates/components/confirm/message';
-
-/**
- * @module Message
- * `Message` components trigger and display a confirmation message. They should only be used within a `Confirm` component.
- *
- * @example
- * ```js
- * <div class="box">
- * <Confirm as |c|>
- *   <c.Message
- *     @id={{item.id}}
- *     @triggerText="Delete"
- *     @message="This will permanently delete this secret and all its versions."
- *     @onConfirm={{action "delete" item "secret"}}
- *     />
- * </Confirm>
- * </div>
- * ```
- *
- * @property id=null {ID} - A unique identifier used to bind a trigger to a confirmation message.
- * @property onConfirm=null {Func} - The action to take when the user clicks the confirm button.
- * @property [triggerText='Delete'] {String} - The text on the trigger button.
- * @property [title='Delete this?'] {String} - The header text to display in the confirmation message.
- * @property [message='You will not be able to recover it later.'] {String} - The message to display above the confirm and cancel buttons.
- * @property [confirmButtonText='Delete'] {String} - The text to display on the confirm button.
- * @property [cancelButtonText='Cancel'] {String} - The text to display on the cancel button.
- */
-
-export default Component.extend({
-  layout,
-  tagName: '',
-  renderedTrigger: null,
-  id: null,
-  onCancel() {},
-  onConfirm() {},
-  resetTrigger() {},
-  title: 'Delete this?',
-  message: 'You will not be able to recover it later.',
-  triggerText: 'Delete',
-  confirmButtonText: 'Delete',
-  cancelButtonText: 'Cancel',
-  showConfirm: computed('id', 'renderedTrigger', function () {
-    return this.renderedTrigger === this.id;
-  }),
-  actions: {
-    onConfirm() {
-      this.onConfirm();
-      this.resetTrigger();
-    },
-  },
-});
diff --git a/ui/lib/core/addon/templates/components/confirm.hbs b/ui/lib/core/addon/templates/components/confirm.hbs
deleted file mode 100644
index bf6a32d698ac..000000000000
--- a/ui/lib/core/addon/templates/components/confirm.hbs
+++ /dev/null
@@ -1,23 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: BUSL-1.1
-~}}
-
-<div class="confirm-wrapper">
-  <div class="confirm {{if this.openTrigger 'show-confirm'}}" ...attributes>
-    {{yield
-      (hash
-        Message=(component
-          "confirm/message"
-          renderedTrigger=(readonly this.openTrigger)
-          wormholeReference=this.wormholeReference
-          onCancel=(action "onCancel")
-          onTrigger=(action "onTrigger")
-          resetTrigger=(action (mut this.openTrigger) "")
-        )
-      )
-    }}
-  </div>
-  <div id={{this.wormholeId}} class="confirm-overlay {{if this.openTrigger 'show-confirm'}}">
-  </div>
-</div>
\ No newline at end of file
diff --git a/ui/lib/core/addon/templates/components/confirm/message.hbs b/ui/lib/core/addon/templates/components/confirm/message.hbs
deleted file mode 100644
index f3c9e5c39a4b..000000000000
--- a/ui/lib/core/addon/templates/components/confirm/message.hbs
+++ /dev/null
@@ -1,40 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: BUSL-1.1
-~}}
-
-{{#if this.showConfirm}}
-  {{#maybe-in-element this.wormholeReference false}}
-    <div class="confirm-action-message">
-      <div class="message is-highlight">
-        <div class="message-title">
-          <Icon @name="alert-triangle-fill" />
-          {{this.title}}
-        </div>
-        <p>
-          {{this.message}}
-        </p>
-      </div>
-      <div class="confirm-action-options">
-        {{! TODO Hds::Button replacement - skipping because modal will replace this confirm inline-popup menu }}
-        <button type="button" class="link is-destroy" data-test-confirm-button="true" onclick={{action "onConfirm"}}>
-          {{this.confirmButtonText}}
-        </button>
-        <button type="button" class="link" data-test-confirm-cancel-button="true" {{action this.onCancel}}>
-          {{this.cancelButtonText}}
-        </button>
-      </div>
-    </div>
-  {{/maybe-in-element}}
-{{/if}}
-{{! TODO Hds::Button replacement - skipping because modal will replace this confirm inline-popup menu }}
-<button
-  type="button"
-  class="link is-destroy"
-  disabled={{this.showConfirm}}
-  onclick={{action this.onTrigger this.id}}
-  data-test-confirm-action-trigger={{this.id}}
-  ...attributes
->
-  {{this.triggerText}}
-</button>
\ No newline at end of file
diff --git a/ui/lib/core/addon/templates/components/list-item/popup-menu.hbs b/ui/lib/core/addon/templates/components/list-item/popup-menu.hbs
index 22e52da8a083..91188fa5088c 100644
--- a/ui/lib/core/addon/templates/components/list-item/popup-menu.hbs
+++ b/ui/lib/core/addon/templates/components/list-item/popup-menu.hbs
@@ -5,13 +5,11 @@
 
 {{#if this.hasMenu}}
   <PopupMenu>
-    <Confirm as |c|>
-      <nav class="menu">
-        <ul class="menu-list">
-          {{yield (hash Message=c.Message)}}
-        </ul>
-      </nav>
-    </Confirm>
+    <nav class="menu">
+      <ul class="menu-list">
+        {{yield}}
+      </ul>
+    </nav>
   </PopupMenu>
 {{else}}
   {{yield this.item}}
diff --git a/ui/lib/core/app/components/confirm.js b/ui/lib/core/app/components/confirm.js
deleted file mode 100644
index 70b4d0ad4e6a..000000000000
--- a/ui/lib/core/app/components/confirm.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'core/components/confirm';
diff --git a/ui/lib/core/app/components/confirm/message.js b/ui/lib/core/app/components/confirm/message.js
deleted file mode 100644
index b8cd364e7c5c..000000000000
--- a/ui/lib/core/app/components/confirm/message.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'core/components/confirm/message';
diff --git a/ui/tests/integration/components/confirm-test.js b/ui/tests/integration/components/confirm-test.js
deleted file mode 100644
index f5406c0f7e7d..000000000000
--- a/ui/tests/integration/components/confirm-test.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, click } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-import sinon from 'sinon';
-
-module('Integration | Component | Confirm', function (hooks) {
-  setupRenderingTest(hooks);
-
-  hooks.beforeEach(function () {
-    this.set('id', 'foo');
-    this.set('title', 'Are you sure?');
-    this.set('message', 'You will not be able to recover this item later.');
-    this.set('triggerText', 'Click me!');
-    this.set('onConfirm', sinon.spy());
-  });
-
-  test('it renders', async function (assert) {
-    await render(hbs`
-      <Confirm as |c|>
-        <c.Message
-          @id={{this.id}}
-          @title={{this.title}}
-          @triggerText={{this.triggerText}}
-          @message={{this.message}}
-          @onConfirm={{this.onConfirm}}
-        />
-      </Confirm>
-    `);
-
-    assert.dom('.confirm-wrapper').exists();
-    assert.dom('.confirm').containsText(this.triggerText);
-  });
-
-  test('does not show the confirmation message until it is triggered', async function (assert) {
-    await render(hbs`
-      <Confirm as |c|>
-        <c.Message
-          @id={{this.id}}
-          @title={{this.title}}
-          @triggerText={{this.triggerText}}
-          @message={{this.message}}
-          @onConfirm={{this.onConfirm}}
-        />
-      </Confirm>
-    `);
-    assert.dom('.confirm-overlay').doesNotContainText(this.message);
-
-    await click('[data-test-confirm-action-trigger]');
-
-    assert.dom('.confirm-overlay').containsText(this.title);
-    assert.dom('.confirm-overlay').containsText(this.message);
-  });
-
-  test('it calls onConfirm when the confirm button is clicked', async function (assert) {
-    await render(hbs`
-      <Confirm as |c|>
-        <c.Message
-          @id={{this.id}}
-          @title={{this.title}}
-          @triggerText={{this.triggerText}}
-          @message={{this.message}}
-          @onConfirm={{this.onConfirm}}
-        />
-      </Confirm>
-    `);
-    await click('[data-test-confirm-action-trigger]');
-    await click('[data-test-confirm-button=true]');
-
-    assert.ok(this.onConfirm.calledOnce);
-  });
-
-  test('it shows only the active triggers message', async function (assert) {
-    await render(hbs`
-      <Confirm as |c|>
-        <c.Message
-          @id={{this.id}}
-          @title={{this.title}}
-          @triggerText={{this.triggerText}}
-          @message={{this.message}}
-          @onConfirm={{this.onConfirm}}
-        />
-        <c.Message
-          @id='bar'
-          @title='Wow'
-          @message='Bazinga!'
-          @onConfirm={{this.onConfirm}}
-        />
-      </Confirm>
-    `);
-
-    await click(`[data-test-confirm-action-trigger=${this.id}]`);
-    assert.dom('.confirm-overlay').containsText(this.title);
-    assert.dom('.confirm-overlay').containsText(this.message);
-
-    await click('[data-test-confirm-cancel-button]');
-
-    await click("[data-test-confirm-action-trigger='bar']");
-    assert.dom('.confirm-overlay').containsText('Wow');
-    assert.dom('.confirm-overlay').containsText('Bazinga!');
-  });
-});

From 69f2952ca24a04ce1991a7f3cc2e01c261f5509e Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 16 Nov 2023 02:16:45 -0600
Subject: [PATCH 26/42] update docs

---
 .../core/addon/components/confirm-action.js   | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 4d8251da47ba..43cb1ef53a69 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -12,23 +12,38 @@ import { tracked } from '@glimmer/tracking';
  * @module ConfirmAction
  * ConfirmAction is a button that opens a modal containing a confirmation message with confirm or cancel action.
  * Splattributes are spread to the button element to apply styling directly without adding extra args.
- * The default button is the same as Hds::Button which is primary blue
+ * The default button is the same as Hds::Button which is primary blue.
+ * 
  *
  * @example
- * ```js
- *  <ConfirmAction
- *    @buttonText="Delete item"
- *    @onConfirmAction={{ () => { console.log('Action!') } }}
- *    @confirmMessage="Are you sure you want to delete this config?"
- *  />
+//  in dropdown
+  <ConfirmAction
+    class="hds-confirm-action-critical"
+    @buttonColor="critical"
+    @isInDropdown={{true}}
+    @buttonText="Delete"
+    @confirmMessage="This action cannot be undone."
+    @onConfirmAction={{log "my action!"}}
+  />
+
+  // in toolbar 
+  <ConfirmAction
+    class="toolbar-button"
+    @buttonColor="secondary"
+    @buttonText="Delete item"
+    @confirmTitle="Delete item?"
+    @onConfirmAction={{log "my action!"}}
+    @confirmMessage="Are you sure you want to delete this config?"
+   />
  * ```
  *
  * @param {Function} onConfirmAction - The action to take upon confirming.
  * @param {String} [confirmTitle=Are you sure?] - The title to display in the confirmation modal.
  * @param {String} [confirmMessage=You will not be able to recover it later.] - The message to display when confirming.
- * @param {String} buttonText - Text for the button that triggers modal to open.
- * @param {String} [buttonColor] - Color of button that triggers modal. Default is primary, other options are secondary, tertiary, and critical
- * @param {String} [modalColor=critical] - Styles modal color, if 'critical' confirm button is styled as well. Possible values: critical, warning or neutral
+ * @param {Boolean} isInDropdown - If true styles for dropdowns by rendering inside `<li>` elements via `<Hds::Dropdown::ListItem::Interactive`
+ * @param {String} buttonText - Text for the button that toggles modal to open.
+ * @param {String} [buttonColor] - Color of button that toggles modal. Default is primary, other options are secondary, tertiary, and critical (recommended for dropdowns)
+ * @param {String} [modalColor=critical] - Styles modal color, if 'critical' confirm button is also 'critical'. Possible values: critical, warning or neutral
  * @param {Boolean} [isRunning] - Disables the confirm button if action is still running
  * @param {Boolean} [disabled] - Disables the modal's confirm button.
  *

From 44904ce541b9d78b58ad55eabfa996efda310781 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 16 Nov 2023 10:44:51 -0600
Subject: [PATCH 27/42] ammend dropdown loading states, add getter for confirm
 button color

---
 .../core/addon/components/confirm-action.hbs  |  2 +-
 .../core/addon/components/confirm-action.js   |  5 ++
 ui/lib/core/addon/components/menu-loader.hbs  | 12 -----
 ui/lib/core/app/components/menu-loader.js     |  6 ---
 .../addon/templates/credentials/index.hbs     | 48 +++++++++---------
 ui/lib/kmip/addon/templates/scope/roles.hbs   | 18 +++----
 ui/lib/kmip/addon/templates/scopes/index.hbs  | 50 +++++++++----------
 7 files changed, 61 insertions(+), 80 deletions(-)
 delete mode 100644 ui/lib/core/addon/components/menu-loader.hbs
 delete mode 100644 ui/lib/core/app/components/menu-loader.js

diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index 1ed41f1bb2c4..cc490bd22a26 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -40,7 +40,7 @@
           data-test-confirm-button
           disabled={{or @disabled @isRunning}}
           @icon={{if @isRunning "loading"}}
-          @color={{if (or (not @modalColor) (eq @modalColor "critical")) "critical" "primary"}}
+          @color={{this.confirmButtonColor}}
           @text="Confirm"
           {{on "click" this.onConfirm}}
         />
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 43cb1ef53a69..3fe030cd44a4 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -65,6 +65,11 @@ export default class ConfirmActionComponent extends Component {
     return this.args.confirmMessage || 'You will not be able to recover it later.';
   }
 
+  get confirmButtonColor() {
+    // only change from default of primary if modal is 'critical'
+    return this.args.modalColor === 'critical' ? 'critical' : 'primary';
+  }
+
   @action
   async onConfirm() {
     await this.args.onConfirmAction();
diff --git a/ui/lib/core/addon/components/menu-loader.hbs b/ui/lib/core/addon/components/menu-loader.hbs
deleted file mode 100644
index 32f65c3c811a..000000000000
--- a/ui/lib/core/addon/components/menu-loader.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: BUSL-1.1
-~}}
-
-<li class="action">
-  {{#if @loadingParam}}
-    <LoadingDropdownOption />
-  {{else}}
-    {{yield}}
-  {{/if}}
-</li>
\ No newline at end of file
diff --git a/ui/lib/core/app/components/menu-loader.js b/ui/lib/core/app/components/menu-loader.js
deleted file mode 100644
index bf5584d7e354..000000000000
--- a/ui/lib/core/app/components/menu-loader.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'core/components/menu-loader';
diff --git a/ui/lib/kmip/addon/templates/credentials/index.hbs b/ui/lib/kmip/addon/templates/credentials/index.hbs
index f146587027ff..2b0d13f7b2a5 100644
--- a/ui/lib/kmip/addon/templates/credentials/index.hbs
+++ b/ui/lib/kmip/addon/templates/credentials/index.hbs
@@ -70,31 +70,29 @@
             View credentials
           </LinkTo>
         </li>
-        {{#if list.item.deletePath.canDelete}}
-          {{#if list.item.deletePath.isPending}}
-            <li class="action">
-              <LoadingDropdownOption />
-            </li>
-          {{else}}
-            <ConfirmAction
-              class="hds-confirm-action-critical"
-              @buttonColor="critical"
-              @isInDropdown={{true}}
-              @buttonText="Revoke credentials"
-              @confirmTitle="Revoke this?"
-              @confirmMessage="Any client using these credentials will no longer be able to."
-              @onConfirmAction={{action
-                (perform
-                  Item.callMethod
-                  "destroyRecord"
-                  list.item
-                  "Successfully revoked credentials"
-                  "There was an error revoking the credentials"
-                  (action "refresh")
-                )
-              }}
-            />
-          {{/if}}
+        {{#if list.item.deletePath.isPending}}
+          <li class="action">
+            <LoadingDropdownOption />
+          </li>
+        {{else if list.item.deletePath.canDelete}}
+          <ConfirmAction
+            class="hds-confirm-action-critical"
+            @buttonColor="critical"
+            @isInDropdown={{true}}
+            @buttonText="Revoke credentials"
+            @confirmTitle="Revoke this?"
+            @confirmMessage="Any client using these credentials will no longer be able to."
+            @onConfirmAction={{action
+              (perform
+                Item.callMethod
+                "destroyRecord"
+                list.item
+                "Successfully revoked credentials"
+                "There was an error revoking the credentials"
+                (action "refresh")
+              )
+            }}
+          />
         {{/if}}
       </Item.menu>
     </ListItem>
diff --git a/ui/lib/kmip/addon/templates/scope/roles.hbs b/ui/lib/kmip/addon/templates/scope/roles.hbs
index b152b31c2cad..8d087eb806dc 100644
--- a/ui/lib/kmip/addon/templates/scope/roles.hbs
+++ b/ui/lib/kmip/addon/templates/scope/roles.hbs
@@ -81,19 +81,17 @@
             View role
           </LinkTo>
         </li>
-        {{#if list.item.updatePath.canUpdate}}
-          <MenuLoader @loadingParam={{list.item.updatePath.isPending}}>
+        {{#if list.item.updatePath.isPending}}
+          <li class="action">
+            <LoadingDropdownOption />
+          </li>
+        {{else}}
+          {{#if list.item.updatePath.canUpdate}}
             <LinkTo @route="role.edit" @models={{array this.scope list.item.id}} class="is-block">
               Edit role
             </LinkTo>
-          </MenuLoader>
-        {{/if}}
-        {{#if list.item.updatePath.canDelete}}
-          {{#if list.item.updatePath.isPending}}
-            <li class="action">
-              <LoadingDropdownOption />
-            </li>
-          {{else}}
+          {{/if}}
+          {{#if list.item.updatePath.canDelete}}
             <ConfirmAction
               class="hds-confirm-action-critical"
               @buttonColor="critical"
diff --git a/ui/lib/kmip/addon/templates/scopes/index.hbs b/ui/lib/kmip/addon/templates/scopes/index.hbs
index e66373ec75c9..3cc2b79bbd0a 100644
--- a/ui/lib/kmip/addon/templates/scopes/index.hbs
+++ b/ui/lib/kmip/addon/templates/scopes/index.hbs
@@ -65,32 +65,30 @@
             View scope
           </LinkTo>
         </li>
-        {{#if list.item.updatePath.canDelete}}
-          {{#if list.item.updatePath.isPending}}
-            <li class="action">
-              <LoadingDropdownOption />
-            </li>
-          {{else}}
-            <ConfirmAction
-              class="hds-confirm-action-critical"
-              @buttonColor="critical"
-              @isInDropdown={{true}}
-              @buttonText="Delete scope"
-              @confirmTitle="Delete scope {{list.item.id}}?"
-              @confirmMessage="This will permanently delete this scope and all roles and credentials contained within"
-              @onConfirmAction={{action
-                (perform
-                  Item.callMethod
-                  "destroyRecord"
-                  list.item
-                  (concat "Successfully deleted scope " list.item.id)
-                  (concat "There was an error deleting the scope " list.item.id)
-                  (action "refresh")
-                )
-              }}
-              data-test-scope-delete
-            />
-          {{/if}}
+        {{#if list.item.updatePath.isPending}}
+          <li class="action">
+            <LoadingDropdownOption />
+          </li>
+        {{else if list.item.updatePath.canDelete}}
+          <ConfirmAction
+            class="hds-confirm-action-critical"
+            @buttonColor="critical"
+            @isInDropdown={{true}}
+            @buttonText="Delete scope"
+            @confirmTitle="Delete scope {{list.item.id}}?"
+            @confirmMessage="This will permanently delete this scope and all roles and credentials contained within"
+            @onConfirmAction={{action
+              (perform
+                Item.callMethod
+                "destroyRecord"
+                list.item
+                (concat "Successfully deleted scope " list.item.id)
+                (concat "There was an error deleting the scope " list.item.id)
+                (action "refresh")
+              )
+            }}
+            data-test-scope-delete
+          />
         {{/if}}
       </Item.menu>
     </ListItem>

From ff4fcc9ec6c4325a3e4828cd97ea4e46dde401fd Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 16 Nov 2023 10:56:50 -0600
Subject: [PATCH 28/42] address feedback

---
 ui/app/templates/vault/cluster/access/leases/list.hbs | 2 +-
 ui/lib/core/addon/components/confirm-action.hbs       | 2 +-
 ui/lib/core/addon/components/confirm-action.js        | 5 ++---
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/ui/app/templates/vault/cluster/access/leases/list.hbs b/ui/app/templates/vault/cluster/access/leases/list.hbs
index 64984463af1a..c6782dc79513 100644
--- a/ui/app/templates/vault/cluster/access/leases/list.hbs
+++ b/ui/app/templates/vault/cluster/access/leases/list.hbs
@@ -61,7 +61,7 @@
             class="toolbar-button"
             @buttonColor="secondary"
             @confirmTitle="Revoke this?"
-            @confirmMessage="All leases under this one will also be removed and disregard any errors encountered."
+            @confirmMessage="All leases under this one will also be removed and any errors encountered will be disregarded."
             @onConfirmAction={{action "revokePrefix" this.baseKey.id true}}
           />
         {{/if}}
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index cc490bd22a26..0586b5956e0a 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -40,7 +40,7 @@
           data-test-confirm-button
           disabled={{or @disabled @isRunning}}
           @icon={{if @isRunning "loading"}}
-          @color={{this.confirmButtonColor}}
+          @color={{if (eq this.modalColor "critical") "critical" "primary"}}
           @text="Confirm"
           {{on "click" this.onConfirm}}
         />
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 3fe030cd44a4..92621b346f78 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -65,9 +65,8 @@ export default class ConfirmActionComponent extends Component {
     return this.args.confirmMessage || 'You will not be able to recover it later.';
   }
 
-  get confirmButtonColor() {
-    // only change from default of primary if modal is 'critical'
-    return this.args.modalColor === 'critical' ? 'critical' : 'primary';
+  get modalColor() {
+    return this.args.modalColor || 'critical';
   }
 
   @action

From 0f1c9384b4c14d69974ea517b74431b9e4a4dd0e Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 16 Nov 2023 13:26:36 -0600
Subject: [PATCH 29/42] remove @disabled arg and add @disabledMessage

---
 .../components/keymgmt/provider-edit.hbs      | 38 ++++++++-----------
 .../mfa/mfa-login-enforcement-form.hbs        |  3 +-
 .../access/mfa/methods/method/index.hbs       | 17 +++++----
 .../cluster/access/oidc/keys/key/details.hbs  | 32 +++++-----------
 .../oidc/providers/provider/details.hbs       | 32 +++++-----------
 .../core/addon/components/confirm-action.hbs  |  7 +++-
 .../core/addon/components/confirm-action.js   |  6 ++-
 .../addon/components/page/configuration.hbs   |  2 +-
 .../addon/components/page/role/details.hbs    |  2 +-
 .../templates/mode/secondaries/revoke.hbs     |  3 +-
 .../oidc-config/clients-keys-test.js          |  2 +-
 .../oidc-config/providers-scopes-test.js      |  2 +-
 ui/tests/helpers/oidc-config.js               | 14 +++----
 .../components/keymgmt/provider-edit-test.js  | 17 ++++++---
 14 files changed, 80 insertions(+), 97 deletions(-)

diff --git a/ui/app/templates/components/keymgmt/provider-edit.hbs b/ui/app/templates/components/keymgmt/provider-edit.hbs
index dd3cff522d67..21a82ee42a7b 100644
--- a/ui/app/templates/components/keymgmt/provider-edit.hbs
+++ b/ui/app/templates/components/keymgmt/provider-edit.hbs
@@ -47,28 +47,22 @@
       <Toolbar data-test-kms-provider-details-actions>
         <ToolbarActions>
           {{#if @model.canDelete}}
-            <ToolTip @verticalPosition="above" @horizontalPosition="center" as |T|>
-              <T.Trigger data-test-tooltip-trigger>
-                <ConfirmAction
-                  @buttonText="Delete provider"
-                  class="toolbar-button"
-                  @buttonColor="secondary"
-                  @confirmTitle="Delete this provider?"
-                  @onConfirmAction={{this.onDelete}}
-                  @disabled={{@model.keys.length}}
-                  data-test-kms-provider-delete={{true}}
-                />
-              </T.Trigger>
-              {{#if @model.keys.length}}
-                <T.Content class="tool-tip">
-                  <div class="box" data-test-kms-provider-delete-tooltip>
-                    This provider cannot be deleted until all
-                    {{@model.keys.length}}
-                    key(s) distributed to it are revoked. This can be done from the Keys tab.
-                  </div>
-                </T.Content>
-              {{/if}}
-            </ToolTip>
+            <ConfirmAction
+              @buttonText="Delete provider"
+              class="toolbar-button"
+              @buttonColor="secondary"
+              @confirmTitle="Delete this provider?"
+              @onConfirmAction={{this.onDelete}}
+              @disabledMessage={{if
+                @model.keys.length
+                (concat
+                  "This provider cannot be deleted until all "
+                  @model.keys.length
+                  " key(s) distributed to it are revoked. This can be done from the Keys tab."
+                )
+              }}
+              data-test-kms-provider-delete
+            />
           {{/if}}
           {{#if (and @model.canDelete (or @model.canListKeys @model.canEdit))}}
             <div class="toolbar-separator"></div>
diff --git a/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs b/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs
index dd3a64cf6edb..d657a83384fc 100644
--- a/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs
+++ b/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs
@@ -78,6 +78,7 @@
     {{/each}}
     <div class="is-flex-row {{if this.targets 'has-top-padding-s has-border-top-light'}}">
       <Select
+        class="is-marginless"
         @options={{this.targetTypes}}
         @labelAttribute="label"
         @valueAttribute="type"
@@ -128,7 +129,7 @@
       />
     </div>
     {{#if this.errors.targets.errors}}
-      <AlertInline @type="danger" @message={{join ", " this.errors.targets.errors}} />
+      <AlertInline class="has-top-padding-s" @type="danger" @message={{join ", " this.errors.targets.errors}} />
     {{/if}}
   </div>
   {{#unless @isInline}}
diff --git a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
index 7ba5c7e2b96e..937cee918cfc 100644
--- a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
+++ b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
@@ -44,14 +44,15 @@
 {{#if (eq this.tab "config")}}
   <Toolbar>
     <ToolbarActions>
-      <ConfirmAction
-        class="toolbar-button"
-        @buttonColor="secondary"
-        @disabled={{not (is-empty this.model.enforcements)}}
-        @onConfirmAction={{this.deleteMethod}}
-        @confirmMessage="Deleting this MFA configuration is permanent, and it will no longer be available."
-        @buttonText="Delete"
-      />
+      {{#if this.model.enforcements}}
+        <ConfirmAction
+          class="toolbar-button"
+          @buttonColor="secondary"
+          @onConfirmAction={{this.deleteMethod}}
+          @confirmMessage="Deleting this MFA configuration is permanent, and it will no longer be available."
+          @buttonText="Delete"
+        />
+      {{/if}}
       <ToolbarLink
         @route="vault.cluster.access.mfa.methods.method.edit"
         @model={{this.model.method.id}}
diff --git a/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs b/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs
index ac1a8f01b8c3..f96ea192c593 100644
--- a/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/keys/key/details.hbs
@@ -5,28 +5,16 @@
 
 <Toolbar>
   <ToolbarActions>
-    {{#if this.model.canDelete}}
-      <ToolTip @verticalPosition="above" as |T|>
-        <T.Trigger tabindex="-1">
-          <ConfirmAction
-            @buttonText="Delete key"
-            data-test-oidc-key-delete
-            @disabled={{eq this.model.name "default"}}
-            class="toolbar-button"
-            @buttonColor="secondary"
-            @onConfirmAction={{this.delete}}
-            @confirmTitle="Delete key?"
-            @confirmMessage="This key will be permanently deleted. You will not be able to recover it."
-          />
-        </T.Trigger>
-        {{#if (eq this.model.name "default")}}
-          <T.Content @defaultClass="tool-tip smaller-font">
-            <div class="box">
-              This is a built-in key that cannot be deleted.
-            </div>
-          </T.Content>
-        {{/if}}
-      </ToolTip>
+    {{#if (and (not-eq this.model.name "default") this.model.canDelete)}}
+      <ConfirmAction
+        @buttonText="Delete key"
+        data-test-oidc-key-delete
+        class="toolbar-button"
+        @buttonColor="secondary"
+        @onConfirmAction={{this.delete}}
+        @confirmTitle="Delete key?"
+        @confirmMessage="This key will be permanently deleted. You will not be able to recover it."
+      />
       <div class="toolbar-separator"></div>
     {{/if}}
     {{#if this.model.canRotate}}
diff --git a/ui/app/templates/vault/cluster/access/oidc/providers/provider/details.hbs b/ui/app/templates/vault/cluster/access/oidc/providers/provider/details.hbs
index 084ad6e81a9c..56d9e2462a30 100644
--- a/ui/app/templates/vault/cluster/access/oidc/providers/provider/details.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc/providers/provider/details.hbs
@@ -5,28 +5,16 @@
 
 <Toolbar>
   <ToolbarActions>
-    {{#if this.model.canDelete}}
-      <ToolTip @verticalPosition="above" as |T|>
-        <T.Trigger tabindex="-1">
-          <ConfirmAction
-            data-test-oidc-provider-delete
-            @buttonText="Delete provider"
-            @disabled={{eq this.model.name "default"}}
-            class="toolbar-button"
-            @buttonColor="secondary"
-            @onConfirmAction={{this.delete}}
-            @confirmTitle="Delete provider?"
-            @confirmMessage="This provider will be permanently deleted. You will need to re-create it to use it again."
-          />
-        </T.Trigger>
-        {{#if (eq this.model.name "default")}}
-          <T.Content @defaultClass="tool-tip smaller-font">
-            <div class="box">
-              This is a built-in provider that cannot be deleted.
-            </div>
-          </T.Content>
-        {{/if}}
-      </ToolTip>
+    {{#if (and (not-eq this.model.name "default") this.model.canDelete)}}
+      <ConfirmAction
+        data-test-oidc-provider-delete
+        @buttonText="Delete provider"
+        class="toolbar-button"
+        @buttonColor="secondary"
+        @onConfirmAction={{this.delete}}
+        @confirmTitle="Delete provider?"
+        @confirmMessage="This provider will be permanently deleted. You will need to re-create it to use it again."
+      />
       <div class="toolbar-separator"></div>
     {{/if}}
     {{#if this.model.canEdit}}
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index 0586b5956e0a..30c878e3cb12 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -38,7 +38,7 @@
       <Hds::ButtonSet>
         <Hds::Button
           data-test-confirm-button
-          disabled={{or @disabled @isRunning}}
+          disabled={{or @disabledMessage @isRunning}}
           @icon={{if @isRunning "loading"}}
           @color={{if (eq this.modalColor "critical") "critical" "primary"}}
           @text="Confirm"
@@ -46,6 +46,11 @@
         />
         <Hds::Button data-test-confirm-cancel-button @color="secondary" @text="Cancel" {{on "click" F.close}} />
       </Hds::ButtonSet>
+      {{#if @disabledMessage}}
+        <Hds::Alert data-test-disabled-message class="has-top-margin-xs" @type="compact" as |A|>
+          <A.Description> {{@disabledMessage}} </A.Description>
+        </Hds::Alert>
+      {{/if}}
     </M.Footer>
   </Hds::Modal>
 {{/if}}
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 92621b346f78..3203840ace38 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -34,6 +34,8 @@ import { tracked } from '@glimmer/tracking';
     @confirmTitle="Delete item?"
     @onConfirmAction={{log "my action!"}}
     @confirmMessage="Are you sure you want to delete this config?"
+    @isRunning={{this.rotateKey.isRunning}}
+    @disabledMessage={{if true "A secondary ID is required perform revocation."}}
    />
  * ```
  *
@@ -44,8 +46,8 @@ import { tracked } from '@glimmer/tracking';
  * @param {String} buttonText - Text for the button that toggles modal to open.
  * @param {String} [buttonColor] - Color of button that toggles modal. Default is primary, other options are secondary, tertiary, and critical (recommended for dropdowns)
  * @param {String} [modalColor=critical] - Styles modal color, if 'critical' confirm button is also 'critical'. Possible values: critical, warning or neutral
- * @param {Boolean} [isRunning] - Disables the confirm button if action is still running
- * @param {Boolean} [disabled] - Disables the modal's confirm button.
+ * @param {Boolean} [isRunning] - Disables the modal confirm button - usually a concurrency task that informs the modal if a process is still running
+ * @param {String} [disabledMessage] - A message explaining why the confirm action is not allowed, usually combined with a conditional that returns a string if true 
  *
  */
 
diff --git a/ui/lib/ldap/addon/components/page/configuration.hbs b/ui/lib/ldap/addon/components/page/configuration.hbs
index 0d18a7e20698..6182aa228680 100644
--- a/ui/lib/ldap/addon/components/page/configuration.hbs
+++ b/ui/lib/ldap/addon/components/page/configuration.hbs
@@ -14,7 +14,7 @@
         @confirmTitle="Rotate root?"
         @confirmMessage="After rotation, Vault will generate a new root password in your directory server."
         @modalColor="warning"
-        @disabled={{this.rotateRoot.isRunning}}
+        @isRunning={{this.rotateRoot.isRunning}}
         data-test-toolbar-rotate-action
       />
     {{/if}}
diff --git a/ui/lib/ldap/addon/components/page/role/details.hbs b/ui/lib/ldap/addon/components/page/role/details.hbs
index 95b620d76acf..ef6cef1b3b1f 100644
--- a/ui/lib/ldap/addon/components/page/role/details.hbs
+++ b/ui/lib/ldap/addon/components/page/role/details.hbs
@@ -39,7 +39,7 @@
         @confirmTitle="Rotate credentials?"
         @confirmMessage="When manually rotating credentials, the rotation period will start over."
         @modalColor="warning"
-        @disabled={{this.rotateCredentials.isRunning}}
+        @isRunning={{this.rotateCredentials.isRunning}}
         @onConfirmAction={{perform this.rotateCredentials}}
         data-test-rotate-credentials
       />
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs b/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs
index a33c8b8bba31..fa52a6becde6 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs
@@ -26,8 +26,7 @@
       @buttonText="Revoke"
       @confirmTitle="Revoke token?"
       @confirmMessage="This will revoke this secondary token."
-      @disabled={{not this.id}}
-      @disabledMessage="A secondary ID is required perform revocation."
+      @disabledMessage={{unless this.id "A secondary ID is required perform revocation."}}
       @onConfirmAction={{action "onSubmit" "revoke-secondary" "primary" (hash id=this.id)}}
     />
   </div>
diff --git a/ui/tests/acceptance/oidc-config/clients-keys-test.js b/ui/tests/acceptance/oidc-config/clients-keys-test.js
index dd7f0dd9518e..b28a9759d77e 100644
--- a/ui/tests/acceptance/oidc-config/clients-keys-test.js
+++ b/ui/tests/acceptance/oidc-config/clients-keys-test.js
@@ -81,7 +81,7 @@ module('Acceptance | oidc-config clients and keys', function (hooks) {
     // navigate to default key details from pop-up menu
     await click('[data-test-popup-menu-trigger]');
     await click('[data-test-oidc-key-menu-link="details"]');
-    assert.dom(SELECTORS.keyDeleteButton).isDisabled('delete button is disabled for default key');
+    assert.dom(SELECTORS.keyDeleteButton).doesNotExist('delete button is hidden for default key');
     await click(SELECTORS.keyEditButton);
     assert.strictEqual(
       currentRouteName(),
diff --git a/ui/tests/acceptance/oidc-config/providers-scopes-test.js b/ui/tests/acceptance/oidc-config/providers-scopes-test.js
index 8e822a239b74..7ae77c2a4437 100644
--- a/ui/tests/acceptance/oidc-config/providers-scopes-test.js
+++ b/ui/tests/acceptance/oidc-config/providers-scopes-test.js
@@ -376,7 +376,7 @@ module('Acceptance |  oidc-config providers and scopes', function (hooks) {
     );
     await click('[data-test-oidc-provider-linked-block="default"] [data-test-popup-menu-trigger]');
     await click('[data-test-oidc-provider-menu-link="details"]');
-    assert.dom(SELECTORS.providerDeleteButton).isDisabled('delete button is disabled for default provider');
+    assert.dom(SELECTORS.providerDeleteButton).doesNotExist('delete button hidden for default provider');
   });
 
   // PROVIDER DELETE + EDIT PERMISSIONS
diff --git a/ui/tests/helpers/oidc-config.js b/ui/tests/helpers/oidc-config.js
index f6e3a6ed8d05..670de3e4c93b 100644
--- a/ui/tests/helpers/oidc-config.js
+++ b/ui/tests/helpers/oidc-config.js
@@ -12,12 +12,12 @@ export const SELECTORS = {
   oidcClientCreateButton: '[data-test-oidc-configure]',
   oidcRouteTabs: '[data-test-oidc-tabs]',
   oidcLandingImg: '[data-test-oidc-img]',
-  confirmActionButton: '[data-test-confirm-button="true"]',
+  confirmActionButton: '[data-test-confirm-button]',
   inlineAlert: '[data-test-inline-alert]',
   // client route
   clientSaveButton: '[data-test-oidc-client-save]',
   clientCancelButton: '[data-test-oidc-client-cancel]',
-  clientDeleteButton: '[data-test-oidc-client-delete] button',
+  clientDeleteButton: '[data-test-oidc-client-delete]',
   clientEditButton: '[data-test-oidc-client-edit]',
   clientDetailsTab: '[data-test-oidc-client-details]',
   clientProvidersTab: '[data-test-oidc-client-providers]',
@@ -26,14 +26,14 @@ export const SELECTORS = {
   assignmentSaveButton: '[data-test-oidc-assignment-save]',
   assignmentCreateButton: '[data-test-oidc-assignment-create]',
   assignmentEditButton: '[data-test-oidc-assignment-edit]',
-  assignmentDeleteButton: '[data-test-oidc-assignment-delete] button',
+  assignmentDeleteButton: '[data-test-oidc-assignment-delete]',
   assignmentCancelButton: '[data-test-oidc-assignment-cancel]',
   assignmentDetailsTab: '[data-test-oidc-assignment-details]',
 
   // scope routes
   scopeSaveButton: '[data-test-oidc-scope-save]',
   scopeCancelButton: '[data-test-oidc-scope-cancel]',
-  scopeDeleteButton: '[data-test-oidc-scope-delete] button',
+  scopeDeleteButton: '[data-test-oidc-scope-delete]',
   scopeEditButton: '[data-test-oidc-scope-edit]',
   scopeDetailsTab: '[data-test-oidc-scope-details]',
   scopeEmptyState: '[data-test-oidc-scope-empty-state]',
@@ -43,16 +43,16 @@ export const SELECTORS = {
   // key route
   keySaveButton: '[data-test-oidc-key-save]',
   keyCancelButton: '[data-test-oidc-key-cancel]',
-  keyDeleteButton: '[data-test-oidc-key-delete] button',
+  keyDeleteButton: '[data-test-oidc-key-delete]',
   keyEditButton: '[data-test-oidc-key-edit]',
-  keyRotateButton: '[data-test-oidc-key-rotate] button',
+  keyRotateButton: '[data-test-oidc-key-rotate]',
   keyDetailsTab: '[data-test-oidc-key-details]',
   keyClientsTab: '[data-test-oidc-key-clients]',
 
   // provider route
   providerSaveButton: '[data-test-oidc-provider-save]',
   providerCancelButton: '[data-test-oidc-provider-cancel]',
-  providerDeleteButton: '[data-test-oidc-provider-delete] button',
+  providerDeleteButton: '[data-test-oidc-provider-delete]',
   providerEditButton: '[data-test-oidc-provider-edit]',
   providerDetailsTab: '[data-test-oidc-provider-details]',
   providerClientsTab: '[data-test-oidc-provider-clients]',
diff --git a/ui/tests/integration/components/keymgmt/provider-edit-test.js b/ui/tests/integration/components/keymgmt/provider-edit-test.js
index d68fedd873de..565e9a85550c 100644
--- a/ui/tests/integration/components/keymgmt/provider-edit-test.js
+++ b/ui/tests/integration/components/keymgmt/provider-edit-test.js
@@ -8,7 +8,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { setupMirage } from 'ember-cli-mirage/test-support';
-import { click, triggerEvent, settled, fillIn } from '@ember/test-helpers';
+import { click, settled, fillIn } from '@ember/test-helpers';
 
 const ts = 'data-test-kms-provider';
 const root = {
@@ -104,16 +104,21 @@ module('Integration | Component | keymgmt/provider-edit', function (hooks) {
     assert.dom('[data-test-secret-link]').exists({ count: 2 }, 'Keys list renders');
 
     await changeTab('details');
-    assert.dom(`[${ts}-delete] button`).isDisabled('Delete action disabled when keys exist');
-    await triggerEvent(`[data-test-tooltip-trigger]`, 'mouseenter');
-    assert.dom(`[${ts}-delete-tooltip]`).exists('Tooltip is show when delete action is disabled');
-
+    await click(`[${ts}-delete]`);
+    assert.dom('[data-test-confirm-button]').isDisabled('Confirm button is disabled when keys exist');
+    assert
+      .dom('[data-test-disabled-message]')
+      .hasText(
+        'This provider cannot be deleted until all 2 key(s) distributed to it are revoked. This can be done from the Keys tab.',
+        'Renders disabled message'
+      );
+    await click('[data-test-confirm-cancel-button]');
     this.model.keys = [];
     await settled();
     assert
       .dom('[data-test-value-div="Keys"]')
       .hasText('None', 'None is displayed when no keys exist for provider');
-    await click(`[${ts}-delete] button`);
+    await click(`[${ts}-delete]`);
     await click('[data-test-confirm-button]');
   });
 

From 365992a0c5db8111991a00a92febf7c0a8aae2e4 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 16 Nov 2023 13:28:44 -0600
Subject: [PATCH 30/42] add changelog;

---
 changelog/21520.txt | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 changelog/21520.txt

diff --git a/changelog/21520.txt b/changelog/21520.txt
new file mode 100644
index 000000000000..7b81dd9d2771
--- /dev/null
+++ b/changelog/21520.txt
@@ -0,0 +1,3 @@
+```release-note:enhancement
+ui: Replace inline confirm alert inside a popup-menu dropdown with confirm alert modal
+```

From 7059e1ace91a9af6c7b5334c1c7df1935c342059 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 16 Nov 2023 14:56:22 -0600
Subject: [PATCH 31/42] mfa tests

---
 .../access/mfa/methods/method/index.hbs       | 21 +++++++++++--------
 ui/tests/acceptance/mfa-method-test.js        | 11 ++++++++--
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
index 937cee918cfc..303c5b579b96 100644
--- a/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
+++ b/ui/app/templates/vault/cluster/access/mfa/methods/method/index.hbs
@@ -44,15 +44,18 @@
 {{#if (eq this.tab "config")}}
   <Toolbar>
     <ToolbarActions>
-      {{#if this.model.enforcements}}
-        <ConfirmAction
-          class="toolbar-button"
-          @buttonColor="secondary"
-          @onConfirmAction={{this.deleteMethod}}
-          @confirmMessage="Deleting this MFA configuration is permanent, and it will no longer be available."
-          @buttonText="Delete"
-        />
-      {{/if}}
+      <ConfirmAction
+        data-test-delete-mfa-config
+        class="toolbar-button"
+        @disabledMessage={{unless
+          (is-empty this.model.enforcements)
+          "This method cannot be deleted until its enforcements are deleted. This can be done from the 'Enforcements' tab."
+        }}
+        @buttonColor="secondary"
+        @onConfirmAction={{this.deleteMethod}}
+        @confirmMessage="Deleting this MFA configuration is permanent, and it will no longer be available."
+        @buttonText="Delete"
+      />
       <ToolbarLink
         @route="vault.cluster.access.mfa.methods.method.edit"
         @model={{this.model.method.id}}
diff --git a/ui/tests/acceptance/mfa-method-test.js b/ui/tests/acceptance/mfa-method-test.js
index b6f8ddc53861..405ca69d7a01 100644
--- a/ui/tests/acceptance/mfa-method-test.js
+++ b/ui/tests/acceptance/mfa-method-test.js
@@ -107,9 +107,16 @@ module('Acceptance | mfa-method', function (hooks) {
     await visit('/vault/access/mfa/methods');
     await click('[data-test-mfa-method-list-item]');
     assert.dom('[data-test-tab="config"]').hasClass('active', 'Configuration tab is active by default');
+    await click('[data-test-delete-mfa-config]');
     assert
-      .dom('[data-test-confirm-action-trigger]')
-      .isDisabled('Delete toolbar action disabled when method is attached to an enforcement');
+      .dom('[data-test-confirm-button]')
+      .isDisabled('Confirm button disabled when method is attached to an enforcement');
+
+    assert
+      .dom('[data-test-disabled-message]')
+      .hasText(
+        "This method cannot be deleted until its enforcements are deleted. This can be done from the 'Enforcements' tab."
+      );
 
     const fields = [
       ['Issuer', 'Period', 'Key size', 'QR size', 'Algorithm', 'Digits', 'Skew', 'Max validation attempts'],

From e975a28bde8064d8fe76391974efd6df36c116e5 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 16 Nov 2023 15:47:38 -0600
Subject: [PATCH 32/42] update test selectors

---
 ui/app/templates/components/raft-storage-overview.hbs     | 5 +++--
 ui/app/templates/components/secret-edit-toolbar.hbs       | 2 +-
 ui/app/templates/components/secret-list/item.hbs          | 1 +
 ui/tests/acceptance/pki/pki-engine-workflow-test.js       | 4 ++--
 ui/tests/acceptance/policies-acl-old-test.js              | 2 +-
 .../acceptance/secrets/backend/kubernetes/roles-test.js   | 2 +-
 ui/tests/acceptance/unseal-test.js                        | 2 +-
 ui/tests/helpers/pki/page/pki-keys.js                     | 2 +-
 .../components/kubernetes/page/role/details-test.js       | 4 ++--
 .../integration/components/kv/page/kv-page-list-test.js   | 4 ++--
 .../components/ldap/page/configuration-test.js            | 2 +-
 .../components/ldap/page/library/details-test.js          | 4 ++--
 .../integration/components/ldap/page/role/details-test.js | 4 ++--
 ui/tests/integration/components/seal-action-test.js       | 4 ++--
 ui/tests/pages/policies/index.js                          | 8 ++------
 ui/tests/pages/secrets/backend/kv/show.js                 | 2 +-
 ui/tests/pages/secrets/backend/list.js                    | 8 ++------
 ui/tests/pages/secrets/backends.js                        | 8 ++------
 18 files changed, 29 insertions(+), 39 deletions(-)

diff --git a/ui/app/templates/components/raft-storage-overview.hbs b/ui/app/templates/components/raft-storage-overview.hbs
index 6c7755ae7974..33e9698356a3 100644
--- a/ui/app/templates/components/raft-storage-overview.hbs
+++ b/ui/app/templates/components/raft-storage-overview.hbs
@@ -81,9 +81,10 @@
         </td>
         <td class="middle no-padding has-text-right">
           <PopupMenu>
-            <nav class="menu">
-              <ul class="menu-list">
+            <nav aria-label="remove peer">
+              <ul>
                 <ConfirmAction
+                  data-test-confirm-action-trigger
                   class="hds-confirm-action-critical"
                   @buttonColor="critical"
                   @isInDropdown={{true}}
diff --git a/ui/app/templates/components/secret-edit-toolbar.hbs b/ui/app/templates/components/secret-edit-toolbar.hbs
index b1a5b469c31e..c366125da6d3 100644
--- a/ui/app/templates/components/secret-edit-toolbar.hbs
+++ b/ui/app/templates/components/secret-edit-toolbar.hbs
@@ -26,7 +26,7 @@
         @confirmTitle="Delete secret?"
         @confirmMessage="You will not be able to recover this secret data later."
         @onConfirmAction={{this.handleDelete}}
-        data-test-secret-v1-delete="true"
+        data-test-secret-v1-delete
       />
       <div class="toolbar-separator"></div>
     {{/if}}
diff --git a/ui/app/templates/components/secret-list/item.hbs b/ui/app/templates/components/secret-list/item.hbs
index 3001db1f935a..e7dbdc68f283 100644
--- a/ui/app/templates/components/secret-list/item.hbs
+++ b/ui/app/templates/components/secret-list/item.hbs
@@ -75,6 +75,7 @@
                     @buttonText="Delete"
                     @confirmMessage="This will permanently delete this secret."
                     @onConfirmAction={{@delete}}
+                    data-test-confirm-action-trigger
                   />
                 {{/if}}
               {{/if}}
diff --git a/ui/tests/acceptance/pki/pki-engine-workflow-test.js b/ui/tests/acceptance/pki/pki-engine-workflow-test.js
index ea0d16398779..3afc02b25db9 100644
--- a/ui/tests/acceptance/pki/pki-engine-workflow-test.js
+++ b/ui/tests/acceptance/pki/pki-engine-workflow-test.js
@@ -126,8 +126,8 @@ module('Acceptance | pki workflow', function (hooks) {
 
       await visit(`/vault/secrets/${this.mountPath}/pki/roles/some-role/details`);
       assert.dom(SELECTORS.deleteRoleButton).exists('Delete role button is shown');
-      await click(`${SELECTORS.deleteRoleButton} [data-test-confirm-action-trigger]`);
-      await click(`[data-test-confirm-button]`);
+      await click(SELECTORS.deleteRoleButton);
+      await click('[data-test-confirm-button]');
       assert.strictEqual(
         currentURL(),
         `/vault/secrets/${this.mountPath}/pki/roles`,
diff --git a/ui/tests/acceptance/policies-acl-old-test.js b/ui/tests/acceptance/policies-acl-old-test.js
index 3b68af86e756..b5f1d76e7a74 100644
--- a/ui/tests/acceptance/policies-acl-old-test.js
+++ b/ui/tests/acceptance/policies-acl-old-test.js
@@ -55,7 +55,7 @@ module('Acceptance | policies (old)', function (hooks) {
 
     await click('[data-test-policy-edit-toggle]');
 
-    await click('[data-test-policy-delete] button');
+    await click('[data-test-policy-delete]');
 
     await click('[data-test-confirm-button]');
     await waitUntil(() => currentURL() === `/vault/policies/acl`);
diff --git a/ui/tests/acceptance/secrets/backend/kubernetes/roles-test.js b/ui/tests/acceptance/secrets/backend/kubernetes/roles-test.js
index 7f9310ba3882..28e6b5b2f8e1 100644
--- a/ui/tests/acceptance/secrets/backend/kubernetes/roles-test.js
+++ b/ui/tests/acceptance/secrets/backend/kubernetes/roles-test.js
@@ -105,7 +105,7 @@ module('Acceptance | kubernetes | roles', function (hooks) {
     this.validateRoute(assert, 'roles.role.edit', 'Transitions to edit route');
     await click('[data-test-cancel]');
     await click('[data-test-list-item-link]');
-    await click('[data-test-delete] button');
+    await click('[data-test-delete]');
     await click('[data-test-confirm-button]');
     assert
       .dom('[data-test-list-item-link]')
diff --git a/ui/tests/acceptance/unseal-test.js b/ui/tests/acceptance/unseal-test.js
index 7b78864e7c56..26fb12d768a5 100644
--- a/ui/tests/acceptance/unseal-test.js
+++ b/ui/tests/acceptance/unseal-test.js
@@ -25,7 +25,7 @@ module('Acceptance | unseal', function (hooks) {
     assert.strictEqual(currentURL(), '/vault/settings/seal');
 
     // seal
-    await click('[data-test-seal] button');
+    await click('[data-test-seal]');
 
     await click('[data-test-confirm-button]');
 
diff --git a/ui/tests/helpers/pki/page/pki-keys.js b/ui/tests/helpers/pki/page/pki-keys.js
index 82dd3031c83b..6026f9bcde98 100644
--- a/ui/tests/helpers/pki/page/pki-keys.js
+++ b/ui/tests/helpers/pki/page/pki-keys.js
@@ -18,7 +18,7 @@ export const SELECTORS = {
   keyNameValue: '[data-test-value-div="Key name"]',
   keyTypeValue: '[data-test-value-div="Key type"]',
   keyBitsValue: '[data-test-value-div="Key bits"]',
-  keyDeleteButton: '[data-test-pki-key-delete] button',
+  keyDeleteButton: '[data-test-pki-key-delete]',
   downloadButton: '[data-test-download-button]',
   keyEditLink: '[data-test-pki-key-edit]',
   confirmDelete: '[data-test-confirm-button]',
diff --git a/ui/tests/integration/components/kubernetes/page/role/details-test.js b/ui/tests/integration/components/kubernetes/page/role/details-test.js
index fc88a30d3e16..91e3912ad773 100644
--- a/ui/tests/integration/components/kubernetes/page/role/details-test.js
+++ b/ui/tests/integration/components/kubernetes/page/role/details-test.js
@@ -104,13 +104,13 @@ module('Integration | Component | kubernetes | Page::Role::Details', function (h
       return;
     });
 
-    assert.dom('[data-test-delete] button').hasText('Delete role', 'Delete action renders');
+    assert.dom('[data-test-delete]').hasText('Delete role', 'Delete action renders');
     assert
       .dom('[data-test-generate-credentials]')
       .hasText('Generate credentials', 'Generate credentials action renders');
     assert.dom('[data-test-edit]').hasText('Edit role', 'Edit action renders');
 
-    await click('[data-test-delete] button');
+    await click('[data-test-delete]');
     await click('[data-test-confirm-button]');
     assert.ok(
       transitionStub.calledWith('vault.cluster.secrets.backend.kubernetes.roles'),
diff --git a/ui/tests/integration/components/kv/page/kv-page-list-test.js b/ui/tests/integration/components/kv/page/kv-page-list-test.js
index 5b4a27a6ce13..40fe29e41b1f 100644
--- a/ui/tests/integration/components/kv/page/kv-page-list-test.js
+++ b/ui/tests/integration/components/kv/page/kv-page-list-test.js
@@ -80,8 +80,8 @@ module('Integration | Component | kv | Page::List', function (hooks) {
 
     const popupSelector = `${PAGE.list.item('my-secret-0')} ${PAGE.popup}`;
     await click(popupSelector);
-    await click('[data-test-confirm-action-trigger="true"]');
-    await click('[data-test-confirm-button=true]');
+    await click('[data-test-delete-metadata]');
+    await click('[data-test-confirm-button]');
     assert.dom(PAGE.list.item('my-secret-0')).doesNotExist('deleted the first record from the list');
   });
 });
diff --git a/ui/tests/integration/components/ldap/page/configuration-test.js b/ui/tests/integration/components/ldap/page/configuration-test.js
index 5e75635eddaa..c8e51255ff46 100644
--- a/ui/tests/integration/components/ldap/page/configuration-test.js
+++ b/ui/tests/integration/components/ldap/page/configuration-test.js
@@ -13,7 +13,7 @@ import { duration } from 'core/helpers/format-duration';
 import { createSecretsEngine, generateBreadcrumbs } from 'vault/tests/helpers/ldap';
 
 const selectors = {
-  rotateAction: '[data-test-toolbar-rotate-action] button',
+  rotateAction: '[data-test-toolbar-rotate-action]',
   confirmRotate: '[data-test-confirm-button]',
   configAction: '[data-test-toolbar-config-action]',
   configCta: '[data-test-config-cta]',
diff --git a/ui/tests/integration/components/ldap/page/library/details-test.js b/ui/tests/integration/components/ldap/page/library/details-test.js
index c4573978d797..af5cac60e42a 100644
--- a/ui/tests/integration/components/ldap/page/library/details-test.js
+++ b/ui/tests/integration/components/ldap/page/library/details-test.js
@@ -65,11 +65,11 @@ module('Integration | Component | ldap | Page::Library::Details', function (hook
     assert.dom('[data-test-tab="accounts"]').hasText('Accounts', 'Accounts tab renders');
     assert.dom('[data-test-tab="config"]').hasText('Configuration', 'Configuration tab renders');
 
-    assert.dom('[data-test-delete] button').hasText('Delete library', 'Delete action renders');
+    assert.dom('[data-test-delete]').hasText('Delete library', 'Delete action renders');
     assert.dom('[data-test-edit]').hasText('Edit library', 'Edit action renders');
 
     const transitionStub = sinon.stub(this.owner.lookup('service:router'), 'transitionTo');
-    await click('[data-test-delete] button');
+    await click('[data-test-delete]');
     await click('[data-test-confirm-button]');
     assert.ok(
       transitionStub.calledWith('vault.cluster.secrets.backend.ldap.libraries'),
diff --git a/ui/tests/integration/components/ldap/page/role/details-test.js b/ui/tests/integration/components/ldap/page/role/details-test.js
index 6a0ad36cf316..885bba9707ed 100644
--- a/ui/tests/integration/components/ldap/page/role/details-test.js
+++ b/ui/tests/integration/components/ldap/page/role/details-test.js
@@ -61,7 +61,7 @@ module('Integration | Component | ldap | Page::Role::Details', function (hooks)
 
     await this.renderComponent('static');
 
-    assert.dom('[data-test-delete] button').hasText('Delete role', 'Delete action renders');
+    assert.dom('[data-test-delete]').hasText('Delete role', 'Delete action renders');
     assert.dom('[data-test-get-credentials]').hasText('Get credentials', 'Get credentials action renders');
     assert.dom('[data-test-rotate-credentials]').exists('Rotate credentials action renders for static role');
     assert.dom('[data-test-edit]').hasText('Edit role', 'Edit action renders');
@@ -78,7 +78,7 @@ module('Integration | Component | ldap | Page::Role::Details', function (hooks)
       .dom('[data-test-rotate-credentials]')
       .doesNotExist('Rotate credentials action is hidden for dynamic role');
 
-    await click('[data-test-delete] button');
+    await click('[data-test-delete]');
     await click('[data-test-confirm-button]');
     assert.ok(
       transitionStub.calledWith('vault.cluster.secrets.backend.ldap.roles'),
diff --git a/ui/tests/integration/components/seal-action-test.js b/ui/tests/integration/components/seal-action-test.js
index 19bcf382048c..65ca87e8739a 100644
--- a/ui/tests/integration/components/seal-action-test.js
+++ b/ui/tests/integration/components/seal-action-test.js
@@ -24,7 +24,7 @@ module('Integration | Component | seal-action', function (hooks) {
     await render(hbs`<SealAction @onSeal={{action this.handleSeal}} />`);
 
     // attempt seal
-    await click('[data-test-seal] button');
+    await click('[data-test-seal]');
     await click('[data-test-confirm-button]');
 
     assert.ok(this.sealSuccess.calledOnce, 'called onSeal action');
@@ -36,7 +36,7 @@ module('Integration | Component | seal-action', function (hooks) {
     await render(hbs`<SealAction @onSeal={{action this.handleSeal}} />`);
 
     // attempt seal
-    await click('[data-test-seal] button');
+    await click('[data-test-seal]');
     await click('[data-test-confirm-button]');
 
     assert.ok(this.sealError.calledOnce, 'called onSeal action');
diff --git a/ui/tests/pages/policies/index.js b/ui/tests/pages/policies/index.js
index 79407f65b977..9869c427786e 100644
--- a/ui/tests/pages/policies/index.js
+++ b/ui/tests/pages/policies/index.js
@@ -16,10 +16,6 @@ export default create({
   findPolicyByName(name) {
     return this.policies.filterBy('name', name)[0];
   },
-  delete: clickable('[data-test-confirm-action-trigger]', {
-    testContainer: '#ember-testing',
-  }),
-  confirmDelete: clickable('[data-test-confirm-button]', {
-    testContainer: '#ember-testing',
-  }),
+  delete: clickable('[data-test-policy-delete]'),
+  confirmDelete: clickable('[data-test-confirm-button]'),
 });
diff --git a/ui/tests/pages/secrets/backend/kv/show.js b/ui/tests/pages/secrets/backend/kv/show.js
index b3b219b657f8..f97afd0ae6af 100644
--- a/ui/tests/pages/secrets/backend/kv/show.js
+++ b/ui/tests/pages/secrets/backend/kv/show.js
@@ -11,7 +11,7 @@ export default create({
   breadcrumbs: collection('[data-test-secret-breadcrumb]', {
     text: text(),
   }),
-  deleteBtnV1: clickable('[data-test-secret-v1-delete="true"] button'),
+  deleteBtnV1: clickable('[data-test-secret-v1-delete]'),
   confirmBtn: clickable('[data-test-confirm-button]'),
   rows: collection('data-test-row-label'),
   edit: clickable('[data-test-secret-edit]'),
diff --git a/ui/tests/pages/secrets/backend/list.js b/ui/tests/pages/secrets/backend/list.js
index 78088d0a299e..263013ceef40 100644
--- a/ui/tests/pages/secrets/backend/list.js
+++ b/ui/tests/pages/secrets/backend/list.js
@@ -33,12 +33,8 @@ export default create({
   menuItems: collection('.ember-basic-dropdown-content li', {
     testContainer: '#ember-testing',
   }),
-  delete: clickable('[data-test-confirm-action-trigger]', {
-    testContainer: '#ember-testing',
-  }),
-  confirmDelete: clickable('[data-test-confirm-button]', {
-    testContainer: '#ember-testing',
-  }),
+  delete: clickable('[data-test-confirm-action-trigger]'),
+  confirmDelete: clickable('[data-test-confirm-button]'),
   backendIsEmpty: getter(function () {
     return this.secrets.length === 0;
   }),
diff --git a/ui/tests/pages/secrets/backends.js b/ui/tests/pages/secrets/backends.js
index c19d8005bfb7..95a6288d3dc4 100644
--- a/ui/tests/pages/secrets/backends.js
+++ b/ui/tests/pages/secrets/backends.js
@@ -16,11 +16,7 @@ export default create({
   configLink: clickable('[data-test-engine-config]', {
     testContainer: '#ember-testing',
   }),
-  disableButton: clickable('[data-test-confirm-action-trigger]', {
-    testContainer: '#ember-testing',
-  }),
-  confirmDisable: clickable('[data-test-confirm-button]', {
-    testContainer: '#ember-testing',
-  }),
+  disableButton: clickable('[data-test-engine-disable]'),
+  confirmDisable: clickable('[data-test-confirm-button]'),
   console: uiPanel,
 });

From 8afc847f26c440e9780b340ae14cd4360502f8f1 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 16 Nov 2023 15:54:10 -0600
Subject: [PATCH 33/42] lol cleanup selectors

---
 ui/app/templates/vault/cluster/access/identity/index.hbs     | 1 -
 ui/app/templates/vault/cluster/policies/index.hbs            | 1 -
 ui/app/templates/vault/cluster/policy/edit.hbs               | 1 -
 ui/app/templates/vault/cluster/secrets/backends.hbs          | 1 -
 ui/lib/core/addon/components/confirm-action.hbs              | 1 +
 ui/lib/kv/addon/components/page/list.hbs                     | 1 -
 ui/tests/acceptance/policies-acl-old-test.js                 | 2 +-
 ui/tests/integration/components/confirm-action-test.js       | 4 ++--
 ui/tests/integration/components/kv/page/kv-page-list-test.js | 2 +-
 ui/tests/pages/policies/index.js                             | 2 +-
 ui/tests/pages/policy/edit.js                                | 2 +-
 ui/tests/pages/secrets/backends.js                           | 2 +-
 12 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/ui/app/templates/vault/cluster/access/identity/index.hbs b/ui/app/templates/vault/cluster/access/identity/index.hbs
index 6f4788859210..0713d62e1378 100644
--- a/ui/app/templates/vault/cluster/access/identity/index.hbs
+++ b/ui/app/templates/vault/cluster/access/identity/index.hbs
@@ -79,7 +79,6 @@
                           @confirmTitle="Disable this entity?"
                           @onConfirmAction={{action "toggleDisabled" item}}
                           @modalColor="warning"
-                          data-test-engine-disable
                         />
                       {{/if}}
                     </li>
diff --git a/ui/app/templates/vault/cluster/policies/index.hbs b/ui/app/templates/vault/cluster/policies/index.hbs
index e1d180e97ec2..a6c6e8231042 100644
--- a/ui/app/templates/vault/cluster/policies/index.hbs
+++ b/ui/app/templates/vault/cluster/policies/index.hbs
@@ -133,7 +133,6 @@
                           @confirmTitle="Delete this policy?"
                           @confirmMessage="This will permanently delete this policy and may affect access to some data"
                           @onConfirmAction={{action "deletePolicy" item}}
-                          data-test-policy-delete={{item.id}}
                         />
                       {{/if}}
                     {{/if}}
diff --git a/ui/app/templates/vault/cluster/policy/edit.hbs b/ui/app/templates/vault/cluster/policy/edit.hbs
index 248d670bb5c2..57e97c304157 100644
--- a/ui/app/templates/vault/cluster/policy/edit.hbs
+++ b/ui/app/templates/vault/cluster/policy/edit.hbs
@@ -36,7 +36,6 @@
           @buttonColor="secondary"
           @confirmMessage="Deleting this policy may affect access to Vault data."
           @onConfirmAction={{this.deletePolicy}}
-          data-test-policy-delete
         />
         <div class="toolbar-separator"></div>
       {{/if}}
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index 698a3d59128b..6458ce3087fb 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -112,7 +112,6 @@
                 @confirmTitle="Disable engine?"
                 @buttonText="Disable"
                 @onConfirmAction={{perform this.disableEngine backend}}
-                data-test-engine-disable
               />
             {{/if}}
           </ul>
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index 30c878e3cb12..1f332a8358db 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -5,6 +5,7 @@
 
 {{#if @isInDropdown}}
   <Hds::Dropdown::ListItem::Interactive
+    data-test-confirm-action-trigger
     @text={{@buttonText}}
     @color={{@buttonColor}}
     {{on "click" (fn (mut this.showConfirmModal) true)}}
diff --git a/ui/lib/kv/addon/components/page/list.hbs b/ui/lib/kv/addon/components/page/list.hbs
index c08909fccb33..f6c20d79d3a4 100644
--- a/ui/lib/kv/addon/components/page/list.hbs
+++ b/ui/lib/kv/addon/components/page/list.hbs
@@ -108,7 +108,6 @@
                           @isInDropdown={{true}}
                           @onConfirmAction={{fn this.onDelete metadata}}
                           @confirmMessage="This will permanently delete this secret and all its versions."
-                          data-test-delete-metadata={{metadata.path}}
                         />
                       {{/if}}
                     {{/if}}
diff --git a/ui/tests/acceptance/policies-acl-old-test.js b/ui/tests/acceptance/policies-acl-old-test.js
index b5f1d76e7a74..156c44686c3a 100644
--- a/ui/tests/acceptance/policies-acl-old-test.js
+++ b/ui/tests/acceptance/policies-acl-old-test.js
@@ -55,7 +55,7 @@ module('Acceptance | policies (old)', function (hooks) {
 
     await click('[data-test-policy-edit-toggle]');
 
-    await click('[data-test-policy-delete]');
+    await click('[data-test-confirm-action-trigger]');
 
     await click('[data-test-confirm-button]');
     await waitUntil(() => currentURL() === `/vault/policies/acl`);
diff --git a/ui/tests/integration/components/confirm-action-test.js b/ui/tests/integration/components/confirm-action-test.js
index 4487c49c3d4f..724d68f4669e 100644
--- a/ui/tests/integration/components/confirm-action-test.js
+++ b/ui/tests/integration/components/confirm-action-test.js
@@ -21,8 +21,8 @@ module('Integration | Component | confirm-action', function (hooks) {
         @onConfirmAction={{this.onConfirm}}
       />
       `);
-    await click('[data-test-confirm-action-trigger="true"]');
-    await click('[data-test-confirm-cancel-button="true"]');
+    await click('[data-test-confirm-action-trigger]');
+    await click('[data-test-confirm-cancel-button]');
     // assert that after CANCEL the icon button is pointing down.
     assert.dom('[data-test-icon="chevron-down"]').exists('Icon is pointing down after clicking cancel');
     // open the modal again to test the DELETE action
diff --git a/ui/tests/integration/components/kv/page/kv-page-list-test.js b/ui/tests/integration/components/kv/page/kv-page-list-test.js
index 40fe29e41b1f..bcf9e1aeb136 100644
--- a/ui/tests/integration/components/kv/page/kv-page-list-test.js
+++ b/ui/tests/integration/components/kv/page/kv-page-list-test.js
@@ -80,7 +80,7 @@ module('Integration | Component | kv | Page::List', function (hooks) {
 
     const popupSelector = `${PAGE.list.item('my-secret-0')} ${PAGE.popup}`;
     await click(popupSelector);
-    await click('[data-test-delete-metadata]');
+    await click('[data-test-confirm-action-trigger]');
     await click('[data-test-confirm-button]');
     assert.dom(PAGE.list.item('my-secret-0')).doesNotExist('deleted the first record from the list');
   });
diff --git a/ui/tests/pages/policies/index.js b/ui/tests/pages/policies/index.js
index 9869c427786e..f82c0e2bc91b 100644
--- a/ui/tests/pages/policies/index.js
+++ b/ui/tests/pages/policies/index.js
@@ -16,6 +16,6 @@ export default create({
   findPolicyByName(name) {
     return this.policies.filterBy('name', name)[0];
   },
-  delete: clickable('[data-test-policy-delete]'),
+  delete: clickable('[data-test-confirm-action-trigger]'),
   confirmDelete: clickable('[data-test-confirm-button]'),
 });
diff --git a/ui/tests/pages/policy/edit.js b/ui/tests/pages/policy/edit.js
index 15be98440c31..5cc814b7ab1c 100644
--- a/ui/tests/pages/policy/edit.js
+++ b/ui/tests/pages/policy/edit.js
@@ -6,6 +6,6 @@
 import { clickable, create, isPresent, visitable } from 'ember-cli-page-object';
 export default create({
   visit: visitable('/vault/policy/:type/:name/edit'),
-  deleteIsPresent: isPresent('[data-test-policy-delete]'),
+  deleteIsPresent: isPresent('[data-test-confirm-action-trigger]'),
   toggleEdit: clickable('[data-test-policy-edit-toggle]'),
 });
diff --git a/ui/tests/pages/secrets/backends.js b/ui/tests/pages/secrets/backends.js
index 95a6288d3dc4..1c10e85c8d93 100644
--- a/ui/tests/pages/secrets/backends.js
+++ b/ui/tests/pages/secrets/backends.js
@@ -16,7 +16,7 @@ export default create({
   configLink: clickable('[data-test-engine-config]', {
     testContainer: '#ember-testing',
   }),
-  disableButton: clickable('[data-test-engine-disable]'),
+  disableButton: clickable('[data-test-confirm-action-trigger]'),
   confirmDisable: clickable('[data-test-confirm-button]'),
   console: uiPanel,
 });

From 4a338427bd2cb49aa392039b28a2b24550ad5d01 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Thu, 16 Nov 2023 16:08:35 -0600
Subject: [PATCH 34/42] start confirm action tests WIP

---
 .../core/addon/components/confirm-action.hbs  |  2 +-
 .../components/confirm-action-test.js         | 44 +++++++++++++------
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index 1f332a8358db..53cfa6d1ec84 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -32,7 +32,7 @@
     <M.Header data-test-confirm-action-title @icon="alert-diamond">
       {{or @confirmTitle "Are you sure?"}}
     </M.Header>
-    <M.Body>
+    <M.Body data-test-confirm-action-message>
       {{this.confirmMessage}}
     </M.Body>
     <M.Footer as |F|>
diff --git a/ui/tests/integration/components/confirm-action-test.js b/ui/tests/integration/components/confirm-action-test.js
index 724d68f4669e..708909db6faf 100644
--- a/ui/tests/integration/components/confirm-action-test.js
+++ b/ui/tests/integration/components/confirm-action-test.js
@@ -12,7 +12,7 @@ import sinon from 'sinon';
 module('Integration | Component | confirm-action', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it closes the confirmation modal on successful delete', async function (assert) {
+  test('it renders', async function (assert) {
     const confirmAction = sinon.spy();
     this.set('onConfirm', confirmAction);
     await render(hbs`
@@ -21,19 +21,37 @@ module('Integration | Component | confirm-action', function (hooks) {
         @onConfirmAction={{this.onConfirm}}
       />
       `);
+
+    assert.dom('[data-test-confirm-action-trigger]').hasText('DELETE', 'renders button text');
     await click('[data-test-confirm-action-trigger]');
-    await click('[data-test-confirm-cancel-button]');
-    // assert that after CANCEL the icon button is pointing down.
-    assert.dom('[data-test-icon="chevron-down"]').exists('Icon is pointing down after clicking cancel');
-    // open the modal again to test the DELETE action
-    await click('[data-test-confirm-action-trigger="true"]');
-    await click('[data-test-confirm-button="true"]');
-    assert
-      .dom('[data-test-icon="chevron-down"]')
-      .exists('Icon is pointing down after executing the Delete action');
-    assert.true(confirmAction.called, 'calls the action when Delete is pressed');
+    assert.dom('[data-test-confirm-action-title]').hasText('Are you sure?', 'renders default title');
     assert
-      .dom('[data-test-confirm-action-title]')
-      .doesNotExist('it has closed the confirm content and does not show the title');
+      .dom('[data-test-confirm-action-message]')
+      .hasText('You will not be able to recover it later.', 'renders default body text');
+    await click('[data-test-confirm-cancel-button]');
+    assert.false(confirmAction.called, 'does not call the action when Cancel is clicked');
+    await click('[data-test-confirm-action-trigger]');
+    await click('[data-test-confirm-button]');
+    assert.true(confirmAction.called, 'calls the action when Confirm is clicked');
+    assert.dom('[data-test-confirm-action-title]').doesNotExist('modal closes after confirm is clicked');
+  });
+
+  test('it renders loading state', async function (assert) {
+    const confirmAction = sinon.spy();
+    this.set('onConfirm', confirmAction);
+    await render(hbs`
+      <ConfirmAction
+        @buttonText="Open!"
+        @onConfirmAction={{this.onConfirm}}
+        @isRunning={{true}}
+      />
+      `);
+
+    await click('[data-test-confirm-action-trigger]');
+
+    assert.dom('[data-test-confirm-button]').isDisabled('disables confirm button when loading');
+    assert.dom('[data-test-confirm-button] [data-test-icon="loading"]').exists('it renders loading icon');
   });
+
+  // handle passed in args confirmTitle and modal color logic with button
 });

From e3b5222c391aff450bcc81af43d7720bb5e2a75c Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Fri, 17 Nov 2023 13:17:31 -0600
Subject: [PATCH 35/42] move dropdown class directly to component

---
 ui/app/components/sidebar/user-menu.hbs                       | 1 -
 ui/app/templates/components/generated-item-list.hbs           | 1 -
 ui/app/templates/components/identity/popup-alias.hbs          | 1 -
 ui/app/templates/components/identity/popup-members.hbs        | 1 -
 ui/app/templates/components/identity/popup-metadata.hbs       | 1 -
 ui/app/templates/components/identity/popup-policy.hbs         | 1 -
 ui/app/templates/components/raft-storage-overview.hbs         | 1 -
 ui/app/templates/components/secret-list/aws-role-item.hbs     | 1 -
 ui/app/templates/components/secret-list/item.hbs              | 1 -
 ui/app/templates/components/secret-list/ssh-role-item.hbs     | 1 -
 ui/app/templates/vault/cluster/access/identity/index.hbs      | 2 --
 ui/app/templates/vault/cluster/access/methods.hbs             | 1 -
 ui/app/templates/vault/cluster/access/namespaces/index.hbs    | 1 -
 ui/app/templates/vault/cluster/policies/index.hbs             | 1 -
 ui/app/templates/vault/cluster/secrets/backends.hbs           | 1 -
 ui/lib/core/addon/components/confirm-action.hbs               | 2 ++
 ui/lib/core/addon/components/confirm-action.js                | 1 -
 ui/lib/kmip/addon/templates/credentials/index.hbs             | 1 -
 ui/lib/kmip/addon/templates/scope/roles.hbs                   | 1 -
 ui/lib/kmip/addon/templates/scopes/index.hbs                  | 1 -
 ui/lib/kubernetes/addon/components/page/roles.hbs             | 1 -
 ui/lib/kv/addon/components/page/list.hbs                      | 1 -
 ui/lib/ldap/addon/components/page/libraries.hbs               | 1 -
 ui/lib/ldap/addon/components/page/roles.hbs                   | 2 --
 ui/lib/replication/addon/templates/mode/secondaries/index.hbs | 1 -
 25 files changed, 2 insertions(+), 26 deletions(-)

diff --git a/ui/app/components/sidebar/user-menu.hbs b/ui/app/components/sidebar/user-menu.hbs
index ee6ac1b60206..142f736b7cfb 100644
--- a/ui/app/components/sidebar/user-menu.hbs
+++ b/ui/app/components/sidebar/user-menu.hbs
@@ -71,7 +71,6 @@
                 </li>
               {{/if}}
               <ConfirmAction
-                class="hds-confirm-action-critical"
                 @buttonColor="critical"
                 @isInDropdown={{true}}
                 @confirmTitle="Revoke {{get this.auth 'authData.displayName'}}?"
diff --git a/ui/app/templates/components/generated-item-list.hbs b/ui/app/templates/components/generated-item-list.hbs
index 7bbb6cd06188..2cfbcfc17ec2 100644
--- a/ui/app/templates/components/generated-item-list.hbs
+++ b/ui/app/templates/components/generated-item-list.hbs
@@ -89,7 +89,6 @@
           </LinkTo>
         </li>
         <ConfirmAction
-          class="hds-confirm-action-critical"
           @buttonColor="critical"
           @isInDropdown={{true}}
           @onConfirmAction={{action
diff --git a/ui/app/templates/components/identity/popup-alias.hbs b/ui/app/templates/components/identity/popup-alias.hbs
index 4b8c10e4bc98..8687b51f2249 100644
--- a/ui/app/templates/components/identity/popup-alias.hbs
+++ b/ui/app/templates/components/identity/popup-alias.hbs
@@ -32,7 +32,6 @@
           {{/if}}
           {{#if item.canDelete}}
             <ConfirmAction
-              class="hds-confirm-action-critical"
               @buttonText="Delete"
               @buttonColor="critical"
               @isInDropdown={{true}}
diff --git a/ui/app/templates/components/identity/popup-members.hbs b/ui/app/templates/components/identity/popup-members.hbs
index 957f5b8e40cb..68c08004281d 100644
--- a/ui/app/templates/components/identity/popup-members.hbs
+++ b/ui/app/templates/components/identity/popup-members.hbs
@@ -10,7 +10,6 @@
         <ConfirmAction
           @buttonText="Remove"
           @confirmTitle="Remove this group?"
-          class="hds-confirm-action-critical"
           @buttonColor="critical"
           @isInDropdown={{true}}
           @confirmMessage="This may affect permissions for this group."
diff --git a/ui/app/templates/components/identity/popup-metadata.hbs b/ui/app/templates/components/identity/popup-metadata.hbs
index 0c82c43b449c..8a218c304d73 100644
--- a/ui/app/templates/components/identity/popup-metadata.hbs
+++ b/ui/app/templates/components/identity/popup-metadata.hbs
@@ -10,7 +10,6 @@
         <ConfirmAction
           @buttonText="Remove"
           @confirmTitle="Remove metadata?"
-          class="hds-confirm-action-critical"
           @buttonColor="critical"
           @isInDropdown={{true}}
           @confirmMessage="This data may be used outside of Vault."
diff --git a/ui/app/templates/components/identity/popup-policy.hbs b/ui/app/templates/components/identity/popup-policy.hbs
index d0848dde4892..9fbfbaa12836 100644
--- a/ui/app/templates/components/identity/popup-policy.hbs
+++ b/ui/app/templates/components/identity/popup-policy.hbs
@@ -20,7 +20,6 @@
         <ConfirmAction
           @buttonText="Remove from {{this.model.identityType}}"
           @confirmTitle="Remove this policy?"
-          class="hds-confirm-action-critical"
           @buttonColor="critical"
           @isInDropdown={{true}}
           @confirmMessage="This policy may affect permissions to access Vault data."
diff --git a/ui/app/templates/components/raft-storage-overview.hbs b/ui/app/templates/components/raft-storage-overview.hbs
index 33e9698356a3..8c66a2221809 100644
--- a/ui/app/templates/components/raft-storage-overview.hbs
+++ b/ui/app/templates/components/raft-storage-overview.hbs
@@ -85,7 +85,6 @@
               <ul>
                 <ConfirmAction
                   data-test-confirm-action-trigger
-                  class="hds-confirm-action-critical"
                   @buttonColor="critical"
                   @isInDropdown={{true}}
                   @onConfirmAction={{action "removePeer" server}}
diff --git a/ui/app/templates/components/secret-list/aws-role-item.hbs b/ui/app/templates/components/secret-list/aws-role-item.hbs
index f922797652e9..ba5af6aba51c 100644
--- a/ui/app/templates/components/secret-list/aws-role-item.hbs
+++ b/ui/app/templates/components/secret-list/aws-role-item.hbs
@@ -65,7 +65,6 @@
               {{/if}}
               {{#if @item.canDelete}}
                 <ConfirmAction
-                  class="hds-confirm-action-critical"
                   @buttonText="Delete"
                   @buttonColor="critical"
                   @isInDropdown={{true}}
diff --git a/ui/app/templates/components/secret-list/item.hbs b/ui/app/templates/components/secret-list/item.hbs
index e7dbdc68f283..e870406579ea 100644
--- a/ui/app/templates/components/secret-list/item.hbs
+++ b/ui/app/templates/components/secret-list/item.hbs
@@ -69,7 +69,6 @@
                 {{/if}}
                 {{#if @item.canDelete}}
                   <ConfirmAction
-                    class="hds-confirm-action-critical"
                     @buttonColor="critical"
                     @isInDropdown={{true}}
                     @buttonText="Delete"
diff --git a/ui/app/templates/components/secret-list/ssh-role-item.hbs b/ui/app/templates/components/secret-list/ssh-role-item.hbs
index e43d0bb047ee..3f3206c72425 100644
--- a/ui/app/templates/components/secret-list/ssh-role-item.hbs
+++ b/ui/app/templates/components/secret-list/ssh-role-item.hbs
@@ -108,7 +108,6 @@
                 {{/if}}
                 {{#if @item.canDelete}}
                   <ConfirmAction
-                    class="hds-confirm-action-critical"
                     @buttonText="Delete"
                     @buttonColor="critical"
                     @isInDropdown={{true}}
diff --git a/ui/app/templates/vault/cluster/access/identity/index.hbs b/ui/app/templates/vault/cluster/access/identity/index.hbs
index 0713d62e1378..62aad895b0f5 100644
--- a/ui/app/templates/vault/cluster/access/identity/index.hbs
+++ b/ui/app/templates/vault/cluster/access/identity/index.hbs
@@ -71,7 +71,6 @@
                         />
                       {{else if (eq this.identityType "entity")}}
                         <ConfirmAction
-                          class="hds-confirm-action-critical"
                           @buttonColor="critical"
                           @isInDropdown={{true}}
                           @buttonText="Disable"
@@ -85,7 +84,6 @@
                   {{/if}}
                   {{#if item.canDelete}}
                     <ConfirmAction
-                      class="hds-confirm-action-critical"
                       @buttonColor="critical"
                       @isInDropdown={{true}}
                       @buttonText="Delete"
diff --git a/ui/app/templates/vault/cluster/access/methods.hbs b/ui/app/templates/vault/cluster/access/methods.hbs
index 55d7a17980b9..0746fd70e9d0 100644
--- a/ui/app/templates/vault/cluster/access/methods.hbs
+++ b/ui/app/templates/vault/cluster/access/methods.hbs
@@ -101,7 +101,6 @@
 
                 {{#if (and (not-eq method.methodType "token") method.canDisable)}}
                   <ConfirmAction
-                    class="hds-confirm-action-critical"
                     @buttonColor="critical"
                     @isInDropdown={{true}}
                     @confirmTitle="Disable method?"
diff --git a/ui/app/templates/vault/cluster/access/namespaces/index.hbs b/ui/app/templates/vault/cluster/access/namespaces/index.hbs
index 27c4610a2e75..1eb8c73a877c 100644
--- a/ui/app/templates/vault/cluster/access/namespaces/index.hbs
+++ b/ui/app/templates/vault/cluster/access/namespaces/index.hbs
@@ -47,7 +47,6 @@
             {{/if}}
           {{/let}}
           <ConfirmAction
-            class="hds-confirm-action-critical"
             @buttonColor="critical"
             @isInDropdown={{true}}
             @buttonText="Delete"
diff --git a/ui/app/templates/vault/cluster/policies/index.hbs b/ui/app/templates/vault/cluster/policies/index.hbs
index a6c6e8231042..f5295c1d1f9b 100644
--- a/ui/app/templates/vault/cluster/policies/index.hbs
+++ b/ui/app/templates/vault/cluster/policies/index.hbs
@@ -126,7 +126,6 @@
                       {{/if}}
                       {{#if item.canDelete}}
                         <ConfirmAction
-                          class="hds-confirm-action-critical"
                           @buttonColor="critical"
                           @isInDropdown={{true}}
                           @buttonText="Delete"
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index 6458ce3087fb..141e87a2b07c 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -105,7 +105,6 @@
             </li>
             {{#if (not-eq backend.type "cubbyhole")}}
               <ConfirmAction
-                class="hds-confirm-action-critical"
                 @buttonColor="critical"
                 @isInDropdown={{true}}
                 @confirmMessage="Any data in this engine will be permanently deleted."
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index 53cfa6d1ec84..a780531d9a24 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -10,6 +10,8 @@
     @color={{@buttonColor}}
     {{on "click" (fn (mut this.showConfirmModal) true)}}
     ...attributes
+    {{! remove class when dropdown/popup menus are replaced with Hds::Dropdown }}
+    class="hds-confirm-action-critical"
   />
 {{else}}
   <Hds::Button
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 3203840ace38..42aa1804064c 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -18,7 +18,6 @@ import { tracked } from '@glimmer/tracking';
  * @example
 //  in dropdown
   <ConfirmAction
-    class="hds-confirm-action-critical"
     @buttonColor="critical"
     @isInDropdown={{true}}
     @buttonText="Delete"
diff --git a/ui/lib/kmip/addon/templates/credentials/index.hbs b/ui/lib/kmip/addon/templates/credentials/index.hbs
index 2b0d13f7b2a5..211acbad6d5e 100644
--- a/ui/lib/kmip/addon/templates/credentials/index.hbs
+++ b/ui/lib/kmip/addon/templates/credentials/index.hbs
@@ -76,7 +76,6 @@
           </li>
         {{else if list.item.deletePath.canDelete}}
           <ConfirmAction
-            class="hds-confirm-action-critical"
             @buttonColor="critical"
             @isInDropdown={{true}}
             @buttonText="Revoke credentials"
diff --git a/ui/lib/kmip/addon/templates/scope/roles.hbs b/ui/lib/kmip/addon/templates/scope/roles.hbs
index 8d087eb806dc..00434221104c 100644
--- a/ui/lib/kmip/addon/templates/scope/roles.hbs
+++ b/ui/lib/kmip/addon/templates/scope/roles.hbs
@@ -93,7 +93,6 @@
           {{/if}}
           {{#if list.item.updatePath.canDelete}}
             <ConfirmAction
-              class="hds-confirm-action-critical"
               @buttonColor="critical"
               @isInDropdown={{true}}
               @buttonText="Delete role"
diff --git a/ui/lib/kmip/addon/templates/scopes/index.hbs b/ui/lib/kmip/addon/templates/scopes/index.hbs
index 3cc2b79bbd0a..0fb8caaf97fc 100644
--- a/ui/lib/kmip/addon/templates/scopes/index.hbs
+++ b/ui/lib/kmip/addon/templates/scopes/index.hbs
@@ -71,7 +71,6 @@
           </li>
         {{else if list.item.updatePath.canDelete}}
           <ConfirmAction
-            class="hds-confirm-action-critical"
             @buttonColor="critical"
             @isInDropdown={{true}}
             @buttonText="Delete scope"
diff --git a/ui/lib/kubernetes/addon/components/page/roles.hbs b/ui/lib/kubernetes/addon/components/page/roles.hbs
index bf82952fafc3..05a01bff8e74 100644
--- a/ui/lib/kubernetes/addon/components/page/roles.hbs
+++ b/ui/lib/kubernetes/addon/components/page/roles.hbs
@@ -70,7 +70,6 @@
             </li>
             <ConfirmAction
               data-test-delete
-              class="hds-confirm-action-critical"
               @buttonColor="critical"
               @isInDropdown={{true}}
               @buttonText="Delete"
diff --git a/ui/lib/kv/addon/components/page/list.hbs b/ui/lib/kv/addon/components/page/list.hbs
index f6c20d79d3a4..185f36b9c389 100644
--- a/ui/lib/kv/addon/components/page/list.hbs
+++ b/ui/lib/kv/addon/components/page/list.hbs
@@ -102,7 +102,6 @@
                       {{/if}}
                       {{#if metadata.canDeleteMetadata}}
                         <ConfirmAction
-                          class="hds-confirm-action-critical"
                           @buttonText="Permanently delete"
                           @buttonColor="critical"
                           @isInDropdown={{true}}
diff --git a/ui/lib/ldap/addon/components/page/libraries.hbs b/ui/lib/ldap/addon/components/page/libraries.hbs
index f61dc537927f..446a53e5b277 100644
--- a/ui/lib/ldap/addon/components/page/libraries.hbs
+++ b/ui/lib/ldap/addon/components/page/libraries.hbs
@@ -78,7 +78,6 @@
               <ConfirmAction
                 data-test-delete
                 @id={{library.id}}
-                class="hds-confirm-action-critical"
                 @buttonColor="critical"
                 @isInDropdown={{true}}
                 @buttonText="Delete"
diff --git a/ui/lib/ldap/addon/components/page/roles.hbs b/ui/lib/ldap/addon/components/page/roles.hbs
index 6b510868afa2..75e8bfc8e248 100644
--- a/ui/lib/ldap/addon/components/page/roles.hbs
+++ b/ui/lib/ldap/addon/components/page/roles.hbs
@@ -84,7 +84,6 @@
             {{#if role.canRotateStaticCreds}}
               <ConfirmAction
                 data-test-rotate-creds
-                class="hds-confirm-action-critical"
                 @buttonColor="critical"
                 @isInDropdown={{true}}
                 @id={{concat "rotate-" role.id}}
@@ -109,7 +108,6 @@
             {{#if role.canDelete}}
               <ConfirmAction
                 data-test-delete
-                class="hds-confirm-action-critical"
                 @buttonColor="critical"
                 @isInDropdown={{true}}
                 @buttonText="Delete"
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/index.hbs b/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
index 256531c0bd97..22fbc34f642a 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
@@ -47,7 +47,6 @@
                       <li class="action">
                         <ConfirmAction
                           @buttonText="Revoke"
-                          class="hds-confirm-action-critical"
                           @buttonColor="critical"
                           @isInDropdown={{true}}
                           @confirmTitle="Revoke token?"

From 56f212f206f3adbe61c60cf067cdfb84c9fdfd54 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Fri, 17 Nov 2023 13:31:17 -0600
Subject: [PATCH 36/42] add default color of isInDropdown

---
 ui/app/components/sidebar/user-menu.hbs                    | 1 -
 ui/app/templates/components/generated-item-list.hbs        | 2 --
 ui/app/templates/components/generated-item.hbs             | 3 +--
 ui/app/templates/components/identity/popup-alias.hbs       | 1 -
 ui/app/templates/components/identity/popup-members.hbs     | 1 -
 ui/app/templates/components/identity/popup-metadata.hbs    | 1 -
 ui/app/templates/components/identity/popup-policy.hbs      | 1 -
 ui/app/templates/components/raft-storage-overview.hbs      | 2 --
 ui/app/templates/components/secret-list/aws-role-item.hbs  | 1 -
 ui/app/templates/components/secret-list/item.hbs           | 1 -
 ui/app/templates/components/secret-list/ssh-role-item.hbs  | 1 -
 ui/app/templates/vault/cluster/access/identity/index.hbs   | 2 --
 ui/app/templates/vault/cluster/access/methods.hbs          | 1 -
 ui/app/templates/vault/cluster/access/namespaces/index.hbs | 1 -
 ui/app/templates/vault/cluster/policies/index.hbs          | 1 -
 ui/app/templates/vault/cluster/secrets/backends.hbs        | 1 -
 ui/lib/core/addon/components/confirm-action.hbs            | 2 +-
 ui/lib/core/addon/components/confirm-action.js             | 3 +--
 ui/lib/ldap/addon/components/page/libraries.hbs            | 1 -
 ui/lib/ldap/addon/components/page/roles.hbs                | 2 --
 20 files changed, 3 insertions(+), 26 deletions(-)

diff --git a/ui/app/components/sidebar/user-menu.hbs b/ui/app/components/sidebar/user-menu.hbs
index 142f736b7cfb..fc8592a54f1f 100644
--- a/ui/app/components/sidebar/user-menu.hbs
+++ b/ui/app/components/sidebar/user-menu.hbs
@@ -71,7 +71,6 @@
                 </li>
               {{/if}}
               <ConfirmAction
-                @buttonColor="critical"
                 @isInDropdown={{true}}
                 @confirmTitle="Revoke {{get this.auth 'authData.displayName'}}?"
                 @onConfirmAction={{action "revokeToken"}}
diff --git a/ui/app/templates/components/generated-item-list.hbs b/ui/app/templates/components/generated-item-list.hbs
index 2cfbcfc17ec2..1ab971cd03cf 100644
--- a/ui/app/templates/components/generated-item-list.hbs
+++ b/ui/app/templates/components/generated-item-list.hbs
@@ -89,7 +89,6 @@
           </LinkTo>
         </li>
         <ConfirmAction
-          @buttonColor="critical"
           @isInDropdown={{true}}
           @onConfirmAction={{action
             (perform
@@ -104,7 +103,6 @@
           @confirmTitle="Delete {{singularize this.itemType}}?"
           @confirmMessage="Are you sure you want to delete {{singularize this.itemType}} {{list.item.id}}?"
           @buttonText="Delete {{singularize this.itemType}}"
-          data-test-secret-delete
         />
       </Item.menu>
     </ListItem>
diff --git a/ui/app/templates/components/generated-item.hbs b/ui/app/templates/components/generated-item.hbs
index 33a930ef655b..71706bfa52a7 100644
--- a/ui/app/templates/components/generated-item.hbs
+++ b/ui/app/templates/components/generated-item.hbs
@@ -42,8 +42,7 @@
         class="toolbar-button"
         @buttonColor="secondary"
         @onConfirmAction={{action "deleteItem"}}
-        @confirmMessage={{concat "Are you sure you want to delete " this.itemType " " this.model.id "?"}}
-        data-test-secret-delete
+        @confirmMessage="Are you sure you want to delete {{this.itemType}} {{this.model.id}}?"
       />
       <div class="toolbar-separator"></div>
       <ToolbarLink
diff --git a/ui/app/templates/components/identity/popup-alias.hbs b/ui/app/templates/components/identity/popup-alias.hbs
index 8687b51f2249..0bd09e6325ea 100644
--- a/ui/app/templates/components/identity/popup-alias.hbs
+++ b/ui/app/templates/components/identity/popup-alias.hbs
@@ -33,7 +33,6 @@
           {{#if item.canDelete}}
             <ConfirmAction
               @buttonText="Delete"
-              @buttonColor="critical"
               @isInDropdown={{true}}
               @onConfirmAction={{action "performTransaction" item}}
               data-test-item-delete
diff --git a/ui/app/templates/components/identity/popup-members.hbs b/ui/app/templates/components/identity/popup-members.hbs
index 68c08004281d..7a9312b0c749 100644
--- a/ui/app/templates/components/identity/popup-members.hbs
+++ b/ui/app/templates/components/identity/popup-members.hbs
@@ -10,7 +10,6 @@
         <ConfirmAction
           @buttonText="Remove"
           @confirmTitle="Remove this group?"
-          @buttonColor="critical"
           @isInDropdown={{true}}
           @confirmMessage="This may affect permissions for this group."
           @onConfirmAction={{action "performTransaction" this.model this.groupArray this.memberId}}
diff --git a/ui/app/templates/components/identity/popup-metadata.hbs b/ui/app/templates/components/identity/popup-metadata.hbs
index 8a218c304d73..e29481438135 100644
--- a/ui/app/templates/components/identity/popup-metadata.hbs
+++ b/ui/app/templates/components/identity/popup-metadata.hbs
@@ -11,7 +11,6 @@
           @buttonText="Remove"
           @confirmTitle="Remove metadata?"
           @buttonColor="critical"
-          @isInDropdown={{true}}
           @confirmMessage="This data may be used outside of Vault."
           @onConfirmAction={{action "performTransaction" this.model this.key}}
         />
diff --git a/ui/app/templates/components/identity/popup-policy.hbs b/ui/app/templates/components/identity/popup-policy.hbs
index 9fbfbaa12836..674198f008cc 100644
--- a/ui/app/templates/components/identity/popup-policy.hbs
+++ b/ui/app/templates/components/identity/popup-policy.hbs
@@ -20,7 +20,6 @@
         <ConfirmAction
           @buttonText="Remove from {{this.model.identityType}}"
           @confirmTitle="Remove this policy?"
-          @buttonColor="critical"
           @isInDropdown={{true}}
           @confirmMessage="This policy may affect permissions to access Vault data."
           @onConfirmAction={{action "performTransaction" this.model this.policyName}}
diff --git a/ui/app/templates/components/raft-storage-overview.hbs b/ui/app/templates/components/raft-storage-overview.hbs
index 8c66a2221809..006566b775e8 100644
--- a/ui/app/templates/components/raft-storage-overview.hbs
+++ b/ui/app/templates/components/raft-storage-overview.hbs
@@ -84,8 +84,6 @@
             <nav aria-label="remove peer">
               <ul>
                 <ConfirmAction
-                  data-test-confirm-action-trigger
-                  @buttonColor="critical"
                   @isInDropdown={{true}}
                   @onConfirmAction={{action "removePeer" server}}
                   @buttonText="Remove Peer"
diff --git a/ui/app/templates/components/secret-list/aws-role-item.hbs b/ui/app/templates/components/secret-list/aws-role-item.hbs
index ba5af6aba51c..65760cd0ef3c 100644
--- a/ui/app/templates/components/secret-list/aws-role-item.hbs
+++ b/ui/app/templates/components/secret-list/aws-role-item.hbs
@@ -66,7 +66,6 @@
               {{#if @item.canDelete}}
                 <ConfirmAction
                   @buttonText="Delete"
-                  @buttonColor="critical"
                   @isInDropdown={{true}}
                   @onConfirmAction={{@delete}}
                   data-test-aws-role-delete={{@item.id}}
diff --git a/ui/app/templates/components/secret-list/item.hbs b/ui/app/templates/components/secret-list/item.hbs
index e870406579ea..ce9d45143bb9 100644
--- a/ui/app/templates/components/secret-list/item.hbs
+++ b/ui/app/templates/components/secret-list/item.hbs
@@ -69,7 +69,6 @@
                 {{/if}}
                 {{#if @item.canDelete}}
                   <ConfirmAction
-                    @buttonColor="critical"
                     @isInDropdown={{true}}
                     @buttonText="Delete"
                     @confirmMessage="This will permanently delete this secret."
diff --git a/ui/app/templates/components/secret-list/ssh-role-item.hbs b/ui/app/templates/components/secret-list/ssh-role-item.hbs
index 3f3206c72425..b0fe2e384565 100644
--- a/ui/app/templates/components/secret-list/ssh-role-item.hbs
+++ b/ui/app/templates/components/secret-list/ssh-role-item.hbs
@@ -109,7 +109,6 @@
                 {{#if @item.canDelete}}
                   <ConfirmAction
                     @buttonText="Delete"
-                    @buttonColor="critical"
                     @isInDropdown={{true}}
                     @onConfirmAction={{@delete}}
                     data-test-ssh-role-delete
diff --git a/ui/app/templates/vault/cluster/access/identity/index.hbs b/ui/app/templates/vault/cluster/access/identity/index.hbs
index 62aad895b0f5..711954a6150a 100644
--- a/ui/app/templates/vault/cluster/access/identity/index.hbs
+++ b/ui/app/templates/vault/cluster/access/identity/index.hbs
@@ -71,7 +71,6 @@
                         />
                       {{else if (eq this.identityType "entity")}}
                         <ConfirmAction
-                          @buttonColor="critical"
                           @isInDropdown={{true}}
                           @buttonText="Disable"
                           @confirmMessage="Associated tokens will not be revoked, but cannot be used"
@@ -84,7 +83,6 @@
                   {{/if}}
                   {{#if item.canDelete}}
                     <ConfirmAction
-                      @buttonColor="critical"
                       @isInDropdown={{true}}
                       @buttonText="Delete"
                       @onConfirmAction={{action "delete" item}}
diff --git a/ui/app/templates/vault/cluster/access/methods.hbs b/ui/app/templates/vault/cluster/access/methods.hbs
index 0746fd70e9d0..f398355785f0 100644
--- a/ui/app/templates/vault/cluster/access/methods.hbs
+++ b/ui/app/templates/vault/cluster/access/methods.hbs
@@ -101,7 +101,6 @@
 
                 {{#if (and (not-eq method.methodType "token") method.canDisable)}}
                   <ConfirmAction
-                    @buttonColor="critical"
                     @isInDropdown={{true}}
                     @confirmTitle="Disable method?"
                     @confirmMessage="This may affect access to Vault data."
diff --git a/ui/app/templates/vault/cluster/access/namespaces/index.hbs b/ui/app/templates/vault/cluster/access/namespaces/index.hbs
index 1eb8c73a877c..b79eb77a5d0c 100644
--- a/ui/app/templates/vault/cluster/access/namespaces/index.hbs
+++ b/ui/app/templates/vault/cluster/access/namespaces/index.hbs
@@ -47,7 +47,6 @@
             {{/if}}
           {{/let}}
           <ConfirmAction
-            @buttonColor="critical"
             @isInDropdown={{true}}
             @buttonText="Delete"
             @confirmTitle="Delete this namespace?"
diff --git a/ui/app/templates/vault/cluster/policies/index.hbs b/ui/app/templates/vault/cluster/policies/index.hbs
index f5295c1d1f9b..15fe519bf0fb 100644
--- a/ui/app/templates/vault/cluster/policies/index.hbs
+++ b/ui/app/templates/vault/cluster/policies/index.hbs
@@ -126,7 +126,6 @@
                       {{/if}}
                       {{#if item.canDelete}}
                         <ConfirmAction
-                          @buttonColor="critical"
                           @isInDropdown={{true}}
                           @buttonText="Delete"
                           @confirmTitle="Delete this policy?"
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index 141e87a2b07c..38c081cbb014 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -105,7 +105,6 @@
             </li>
             {{#if (not-eq backend.type "cubbyhole")}}
               <ConfirmAction
-                @buttonColor="critical"
                 @isInDropdown={{true}}
                 @confirmMessage="Any data in this engine will be permanently deleted."
                 @confirmTitle="Disable engine?"
diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index a780531d9a24..1ce67db442a0 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -7,7 +7,7 @@
   <Hds::Dropdown::ListItem::Interactive
     data-test-confirm-action-trigger
     @text={{@buttonText}}
-    @color={{@buttonColor}}
+    @color={{or @buttonColor "critical"}}
     {{on "click" (fn (mut this.showConfirmModal) true)}}
     ...attributes
     {{! remove class when dropdown/popup menus are replaced with Hds::Dropdown }}
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 42aa1804064c..903973b74aaf 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -12,7 +12,6 @@ import { tracked } from '@glimmer/tracking';
  * @module ConfirmAction
  * ConfirmAction is a button that opens a modal containing a confirmation message with confirm or cancel action.
  * Splattributes are spread to the button element to apply styling directly without adding extra args.
- * The default button is the same as Hds::Button which is primary blue.
  * 
  *
  * @example
@@ -43,7 +42,7 @@ import { tracked } from '@glimmer/tracking';
  * @param {String} [confirmMessage=You will not be able to recover it later.] - The message to display when confirming.
  * @param {Boolean} isInDropdown - If true styles for dropdowns by rendering inside `<li>` elements via `<Hds::Dropdown::ListItem::Interactive`
  * @param {String} buttonText - Text for the button that toggles modal to open.
- * @param {String} [buttonColor] - Color of button that toggles modal. Default is primary, other options are secondary, tertiary, and critical (recommended for dropdowns)
+ * @param {String} [buttonColor=primary || critical] - Color of button that toggles modal. Default is 'critical' when @isInDropdown=true otherwise it's primary. Other options are secondary, tertiary
  * @param {String} [modalColor=critical] - Styles modal color, if 'critical' confirm button is also 'critical'. Possible values: critical, warning or neutral
  * @param {Boolean} [isRunning] - Disables the modal confirm button - usually a concurrency task that informs the modal if a process is still running
  * @param {String} [disabledMessage] - A message explaining why the confirm action is not allowed, usually combined with a conditional that returns a string if true 
diff --git a/ui/lib/ldap/addon/components/page/libraries.hbs b/ui/lib/ldap/addon/components/page/libraries.hbs
index 446a53e5b277..5175f4851c1e 100644
--- a/ui/lib/ldap/addon/components/page/libraries.hbs
+++ b/ui/lib/ldap/addon/components/page/libraries.hbs
@@ -78,7 +78,6 @@
               <ConfirmAction
                 data-test-delete
                 @id={{library.id}}
-                @buttonColor="critical"
                 @isInDropdown={{true}}
                 @buttonText="Delete"
                 @confirmMessage="This library and associated accounts will be permanently deleted. You will not be able to recover it."
diff --git a/ui/lib/ldap/addon/components/page/roles.hbs b/ui/lib/ldap/addon/components/page/roles.hbs
index 75e8bfc8e248..9ee3c2f87318 100644
--- a/ui/lib/ldap/addon/components/page/roles.hbs
+++ b/ui/lib/ldap/addon/components/page/roles.hbs
@@ -84,7 +84,6 @@
             {{#if role.canRotateStaticCreds}}
               <ConfirmAction
                 data-test-rotate-creds
-                @buttonColor="critical"
                 @isInDropdown={{true}}
                 @id={{concat "rotate-" role.id}}
                 @buttonText="Rotate credentials"
@@ -108,7 +107,6 @@
             {{#if role.canDelete}}
               <ConfirmAction
                 data-test-delete
-                @buttonColor="critical"
                 @isInDropdown={{true}}
                 @buttonText="Delete"
                 @confirmMessage="Deleting this role means that you’ll need to recreate it in order to generate credentials again."

From eda92ead43034b43e7570fb3037de926c60b80fa Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Fri, 17 Nov 2023 13:47:32 -0600
Subject: [PATCH 37/42] final cleanup

---
 changelog/21520.txt                                     | 2 +-
 ui/app/templates/components/identity/popup-metadata.hbs | 2 +-
 ui/app/templates/components/secret-list/item.hbs        | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/changelog/21520.txt b/changelog/21520.txt
index 7b81dd9d2771..38ab73523ba4 100644
--- a/changelog/21520.txt
+++ b/changelog/21520.txt
@@ -1,3 +1,3 @@
-```release-note:enhancement
+```release-note:improvement
 ui: Replace inline confirm alert inside a popup-menu dropdown with confirm alert modal
 ```
diff --git a/ui/app/templates/components/identity/popup-metadata.hbs b/ui/app/templates/components/identity/popup-metadata.hbs
index e29481438135..00e65b6c86f7 100644
--- a/ui/app/templates/components/identity/popup-metadata.hbs
+++ b/ui/app/templates/components/identity/popup-metadata.hbs
@@ -10,7 +10,7 @@
         <ConfirmAction
           @buttonText="Remove"
           @confirmTitle="Remove metadata?"
-          @buttonColor="critical"
+          @isInDropdown={{true}}
           @confirmMessage="This data may be used outside of Vault."
           @onConfirmAction={{action "performTransaction" this.model this.key}}
         />
diff --git a/ui/app/templates/components/secret-list/item.hbs b/ui/app/templates/components/secret-list/item.hbs
index ce9d45143bb9..8a2208a44284 100644
--- a/ui/app/templates/components/secret-list/item.hbs
+++ b/ui/app/templates/components/secret-list/item.hbs
@@ -73,7 +73,6 @@
                     @buttonText="Delete"
                     @confirmMessage="This will permanently delete this secret."
                     @onConfirmAction={{@delete}}
-                    data-test-confirm-action-trigger
                   />
                 {{/if}}
               {{/if}}

From d0854949f90eb6e5962d03d5d17974839fdd1303 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Fri, 17 Nov 2023 14:19:23 -0600
Subject: [PATCH 38/42] add tests

---
 .../core/addon/components/confirm-action.hbs  |  57 +++++-----
 .../core/addon/components/confirm-action.js   |   1 +
 .../components/confirm-action-test.js         | 106 +++++++++++++++---
 3 files changed, 122 insertions(+), 42 deletions(-)

diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index 1ce67db442a0..497b51f4c49f 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -26,34 +26,41 @@
 {{#if this.showConfirmModal}}
   <Hds::Modal
     id="confirm-action-modal"
-    @color={{or @modalColor "critical"}}
+    @color={{this.modalColor}}
     @size="small"
     @onClose={{fn (mut this.showConfirmModal) false}}
     as |M|
   >
-    <M.Header data-test-confirm-action-title @icon="alert-diamond">
-      {{or @confirmTitle "Are you sure?"}}
-    </M.Header>
-    <M.Body data-test-confirm-action-message>
-      {{this.confirmMessage}}
-    </M.Body>
-    <M.Footer as |F|>
-      <Hds::ButtonSet>
-        <Hds::Button
-          data-test-confirm-button
-          disabled={{or @disabledMessage @isRunning}}
-          @icon={{if @isRunning "loading"}}
-          @color={{if (eq this.modalColor "critical") "critical" "primary"}}
-          @text="Confirm"
-          {{on "click" this.onConfirm}}
-        />
-        <Hds::Button data-test-confirm-cancel-button @color="secondary" @text="Cancel" {{on "click" F.close}} />
-      </Hds::ButtonSet>
-      {{#if @disabledMessage}}
-        <Hds::Alert data-test-disabled-message class="has-top-margin-xs" @type="compact" as |A|>
-          <A.Description> {{@disabledMessage}} </A.Description>
-        </Hds::Alert>
-      {{/if}}
-    </M.Footer>
+    {{#if @disabledMessage}}
+      <M.Header data-test-confirm-action-title @icon="x-circle">
+        Not allowed
+      </M.Header>
+      <M.Body data-test-confirm-action-message>
+        {{@disabledMessage}}
+      </M.Body>
+      <M.Footer as |F|>
+        <Hds::Button data-test-confirm-cancel-button @text="Close" {{on "click" F.close}} />
+      </M.Footer>
+    {{else}}
+      <M.Header data-test-confirm-action-title @icon="alert-circle">
+        {{or @confirmTitle "Are you sure?"}}
+      </M.Header>
+      <M.Body data-test-confirm-action-message>
+        {{this.confirmMessage}}
+      </M.Body>
+      <M.Footer as |F|>
+        <Hds::ButtonSet>
+          <Hds::Button
+            data-test-confirm-button
+            disabled={{@isRunning}}
+            @icon={{if @isRunning "loading"}}
+            @color={{if (eq this.modalColor "critical") "critical" "primary"}}
+            @text="Confirm"
+            {{on "click" this.onConfirm}}
+          />
+          <Hds::Button data-test-confirm-cancel-button @color="secondary" @text="Cancel" {{on "click" F.close}} />
+        </Hds::ButtonSet>
+      </M.Footer>
+    {{/if}}
   </Hds::Modal>
 {{/if}}
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 903973b74aaf..66b0fa3716dd 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -66,6 +66,7 @@ export default class ConfirmActionComponent extends Component {
   }
 
   get modalColor() {
+    if (this.args.disabledMessage) return 'neutral';
     return this.args.modalColor || 'critical';
   }
 
diff --git a/ui/tests/integration/components/confirm-action-test.js b/ui/tests/integration/components/confirm-action-test.js
index 708909db6faf..7a2ca6b75d78 100644
--- a/ui/tests/integration/components/confirm-action-test.js
+++ b/ui/tests/integration/components/confirm-action-test.js
@@ -9,36 +9,69 @@ import { render, click } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import sinon from 'sinon';
 
+const SELECTORS = {
+  confirmToggle: '[data-test-confirm-action-trigger]',
+  title: '[data-test-confirm-action-title]',
+  message: '[data-test-confirm-action-message]',
+  confirm: '[data-test-confirm-button]',
+  cancel: '[data-test-confirm-cancel-button]',
+};
 module('Integration | Component | confirm-action', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function (assert) {
-    const confirmAction = sinon.spy();
-    this.set('onConfirm', confirmAction);
+  hooks.beforeEach(function () {
+    this.onConfirm = sinon.spy();
+  });
+
+  test('it renders defaults and calls onConfirmAction', async function (assert) {
+    await render(hbs`
+      <ConfirmAction
+        @buttonText="DELETE"
+        @onConfirmAction={{this.onConfirm}}
+      />
+      `);
+
+    assert.dom(SELECTORS.confirmToggle).hasText('DELETE', 'renders button text');
+    await click(SELECTORS.confirmToggle);
+    assert.dom(SELECTORS.title).hasText('Are you sure?', 'renders default title');
+    assert
+      .dom(SELECTORS.message)
+      .hasText('You will not be able to recover it later.', 'renders default body text');
+    await click(SELECTORS.cancel);
+    assert.false(this.onConfirm.called, 'does not call the action when Cancel is clicked');
+    await click(SELECTORS.confirmToggle);
+    await click(SELECTORS.confirm);
+    assert.true(this.onConfirm.called, 'calls the action when Confirm is clicked');
+    assert.dom(SELECTORS.title).doesNotExist('modal closes after confirm is clicked');
+  });
+
+  test('it renders defaults in dropdown and calls onConfirmAction', async function (assert) {
     await render(hbs`
       <ConfirmAction
         @buttonText="DELETE"
         @onConfirmAction={{this.onConfirm}}
+        @isInDropdown={{true}}
       />
       `);
 
-    assert.dom('[data-test-confirm-action-trigger]').hasText('DELETE', 'renders button text');
-    await click('[data-test-confirm-action-trigger]');
-    assert.dom('[data-test-confirm-action-title]').hasText('Are you sure?', 'renders default title');
+    assert.dom(`li ${SELECTORS.confirmToggle}`).exists('element renders inside <li>');
+    assert
+      .dom(SELECTORS.confirmToggle)
+      .hasClass('hds-confirm-action-critical', 'button has dropdown styling');
+    await click(SELECTORS.confirmToggle);
+    assert.dom(SELECTORS.title).hasText('Are you sure?', 'renders default title');
     assert
-      .dom('[data-test-confirm-action-message]')
+      .dom(SELECTORS.message)
       .hasText('You will not be able to recover it later.', 'renders default body text');
     await click('[data-test-confirm-cancel-button]');
-    assert.false(confirmAction.called, 'does not call the action when Cancel is clicked');
-    await click('[data-test-confirm-action-trigger]');
-    await click('[data-test-confirm-button]');
-    assert.true(confirmAction.called, 'calls the action when Confirm is clicked');
-    assert.dom('[data-test-confirm-action-title]').doesNotExist('modal closes after confirm is clicked');
+    assert.false(this.onConfirm.called, 'does not call the action when Cancel is clicked');
+    await click(SELECTORS.confirmToggle);
+    await click(SELECTORS.confirm);
+    assert.true(this.onConfirm.called, 'calls the action when Confirm is clicked');
+    assert.dom(SELECTORS.title).doesNotExist('modal closes after confirm is clicked');
   });
 
   test('it renders loading state', async function (assert) {
-    const confirmAction = sinon.spy();
-    this.set('onConfirm', confirmAction);
     await render(hbs`
       <ConfirmAction
         @buttonText="Open!"
@@ -47,11 +80,50 @@ module('Integration | Component | confirm-action', function (hooks) {
       />
       `);
 
-    await click('[data-test-confirm-action-trigger]');
+    await click(SELECTORS.confirmToggle);
 
-    assert.dom('[data-test-confirm-button]').isDisabled('disables confirm button when loading');
+    assert.dom(SELECTORS.confirm).isDisabled('disables confirm button when loading');
     assert.dom('[data-test-confirm-button] [data-test-icon="loading"]').exists('it renders loading icon');
   });
 
-  // handle passed in args confirmTitle and modal color logic with button
+  test('it renders passed args', async function (assert) {
+    this.condition = false;
+    await render(hbs`
+      <ConfirmAction
+        @buttonText="Open!"
+        @onConfirmAction={{this.onConfirm}}
+        @buttonColor="secondary"
+        @confirmTitle="Do this?"
+        @confirmMessage="Are you really, really sure?"
+        @disabledMessage={{if this.condition "This is the reason you cannot do the thing"}}
+      />
+      `);
+
+    await click(SELECTORS.confirmToggle);
+    assert.dom(SELECTORS.title).hasText('Do this?', 'renders passed title');
+    assert.dom(SELECTORS.message).hasText('Are you really, really sure?', 'renders passed body text');
+    assert.dom(SELECTORS.confirm).hasText('Confirm');
+  });
+
+  test('it renders disabled modal', async function (assert) {
+    this.condition = true;
+    await render(hbs`
+      <ConfirmAction
+        @buttonText="Open!"
+        @onConfirmAction={{this.onConfirm}}
+        @buttonColor="secondary"
+        @confirmTitle="Do this?"
+        @confirmMessage="Are you really, really sure?"
+        @disabledMessage={{if this.condition "This is the reason you cannot do the thing"}}
+      />
+      `);
+
+    await click(SELECTORS.confirmToggle);
+    assert.dom(SELECTORS.title).hasText('Not allowed', 'renders disabled title');
+    assert
+      .dom(SELECTORS.message)
+      .hasText('This is the reason you cannot do the thing', 'renders disabled message as body text');
+    assert.dom(SELECTORS.confirm).doesNotExist('Close');
+    assert.dom(SELECTORS.cancel).hasText('Close');
+  });
 });

From 8b2d55815779944dfc4b82a631d335f1d3d9b107 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Fri, 17 Nov 2023 15:06:53 -0600
Subject: [PATCH 39/42] remove @buttonColor as arg for dropdown

---
 ui/lib/core/addon/components/confirm-action.hbs            | 3 ++-
 ui/lib/core/addon/components/confirm-action.js             | 7 +++----
 ui/lib/kmip/addon/templates/credentials/index.hbs          | 1 -
 ui/lib/kmip/addon/templates/scope/roles.hbs                | 1 -
 ui/lib/kmip/addon/templates/scopes/index.hbs               | 1 -
 ui/lib/kubernetes/addon/components/page/roles.hbs          | 1 -
 ui/lib/kv/addon/components/page/list.hbs                   | 1 -
 .../replication/addon/templates/mode/secondaries/index.hbs | 1 -
 8 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/ui/lib/core/addon/components/confirm-action.hbs b/ui/lib/core/addon/components/confirm-action.hbs
index 497b51f4c49f..3e5cd5021a0a 100644
--- a/ui/lib/core/addon/components/confirm-action.hbs
+++ b/ui/lib/core/addon/components/confirm-action.hbs
@@ -4,10 +4,11 @@
 ~}}
 
 {{#if @isInDropdown}}
+  {{! Hds component renders <li> and <button> elements }}
   <Hds::Dropdown::ListItem::Interactive
     data-test-confirm-action-trigger
     @text={{@buttonText}}
-    @color={{or @buttonColor "critical"}}
+    @color="critical"
     {{on "click" (fn (mut this.showConfirmModal) true)}}
     ...attributes
     {{! remove class when dropdown/popup menus are replaced with Hds::Dropdown }}
diff --git a/ui/lib/core/addon/components/confirm-action.js b/ui/lib/core/addon/components/confirm-action.js
index 66b0fa3716dd..2f19552d40de 100644
--- a/ui/lib/core/addon/components/confirm-action.js
+++ b/ui/lib/core/addon/components/confirm-action.js
@@ -17,7 +17,6 @@ import { tracked } from '@glimmer/tracking';
  * @example
 //  in dropdown
   <ConfirmAction
-    @buttonColor="critical"
     @isInDropdown={{true}}
     @buttonText="Delete"
     @confirmMessage="This action cannot be undone."
@@ -40,10 +39,10 @@ import { tracked } from '@glimmer/tracking';
  * @param {Function} onConfirmAction - The action to take upon confirming.
  * @param {String} [confirmTitle=Are you sure?] - The title to display in the confirmation modal.
  * @param {String} [confirmMessage=You will not be able to recover it later.] - The message to display when confirming.
- * @param {Boolean} isInDropdown - If true styles for dropdowns by rendering inside `<li>` elements via `<Hds::Dropdown::ListItem::Interactive`
+ * @param {Boolean} isInDropdown - If true styles for dropdowns, button color is 'critical', and renders inside `<li>` elements via `<Hds::Dropdown::ListItem::Interactive`
  * @param {String} buttonText - Text for the button that toggles modal to open.
- * @param {String} [buttonColor=primary || critical] - Color of button that toggles modal. Default is 'critical' when @isInDropdown=true otherwise it's primary. Other options are secondary, tertiary
- * @param {String} [modalColor=critical] - Styles modal color, if 'critical' confirm button is also 'critical'. Possible values: critical, warning or neutral
+ * @param {String} [buttonColor=primary] - Color of button that toggles modal, only applies when @isInDropdown=false. Options are primary, secondary (use for toolbars), tertiary, or critical
+ * @param {String} [modalColor=critical] - Styles modal color, if 'critical' confirm button is also 'critical'. Possible values: critical, warning or neutral ('neutral' used for @disabledMessage modal)
  * @param {Boolean} [isRunning] - Disables the modal confirm button - usually a concurrency task that informs the modal if a process is still running
  * @param {String} [disabledMessage] - A message explaining why the confirm action is not allowed, usually combined with a conditional that returns a string if true 
  *
diff --git a/ui/lib/kmip/addon/templates/credentials/index.hbs b/ui/lib/kmip/addon/templates/credentials/index.hbs
index 211acbad6d5e..8c64c9d4081d 100644
--- a/ui/lib/kmip/addon/templates/credentials/index.hbs
+++ b/ui/lib/kmip/addon/templates/credentials/index.hbs
@@ -76,7 +76,6 @@
           </li>
         {{else if list.item.deletePath.canDelete}}
           <ConfirmAction
-            @buttonColor="critical"
             @isInDropdown={{true}}
             @buttonText="Revoke credentials"
             @confirmTitle="Revoke this?"
diff --git a/ui/lib/kmip/addon/templates/scope/roles.hbs b/ui/lib/kmip/addon/templates/scope/roles.hbs
index 00434221104c..03863a15df5f 100644
--- a/ui/lib/kmip/addon/templates/scope/roles.hbs
+++ b/ui/lib/kmip/addon/templates/scope/roles.hbs
@@ -93,7 +93,6 @@
           {{/if}}
           {{#if list.item.updatePath.canDelete}}
             <ConfirmAction
-              @buttonColor="critical"
               @isInDropdown={{true}}
               @buttonText="Delete role"
               @confirmMessage="Are you sure you want to delete {{list.item.id}}?"
diff --git a/ui/lib/kmip/addon/templates/scopes/index.hbs b/ui/lib/kmip/addon/templates/scopes/index.hbs
index 0fb8caaf97fc..ef6094e9ea98 100644
--- a/ui/lib/kmip/addon/templates/scopes/index.hbs
+++ b/ui/lib/kmip/addon/templates/scopes/index.hbs
@@ -71,7 +71,6 @@
           </li>
         {{else if list.item.updatePath.canDelete}}
           <ConfirmAction
-            @buttonColor="critical"
             @isInDropdown={{true}}
             @buttonText="Delete scope"
             @confirmTitle="Delete scope {{list.item.id}}?"
diff --git a/ui/lib/kubernetes/addon/components/page/roles.hbs b/ui/lib/kubernetes/addon/components/page/roles.hbs
index 05a01bff8e74..8dc8ffb47ed0 100644
--- a/ui/lib/kubernetes/addon/components/page/roles.hbs
+++ b/ui/lib/kubernetes/addon/components/page/roles.hbs
@@ -70,7 +70,6 @@
             </li>
             <ConfirmAction
               data-test-delete
-              @buttonColor="critical"
               @isInDropdown={{true}}
               @buttonText="Delete"
               @confirmMessage="Deleting this role means that you’ll need to recreate it in order to generate credentials again."
diff --git a/ui/lib/kv/addon/components/page/list.hbs b/ui/lib/kv/addon/components/page/list.hbs
index 185f36b9c389..b0ce8be7dbe9 100644
--- a/ui/lib/kv/addon/components/page/list.hbs
+++ b/ui/lib/kv/addon/components/page/list.hbs
@@ -103,7 +103,6 @@
                       {{#if metadata.canDeleteMetadata}}
                         <ConfirmAction
                           @buttonText="Permanently delete"
-                          @buttonColor="critical"
                           @isInDropdown={{true}}
                           @onConfirmAction={{fn this.onDelete metadata}}
                           @confirmMessage="This will permanently delete this secret and all its versions."
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/index.hbs b/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
index 22fbc34f642a..b63f4c784905 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
@@ -47,7 +47,6 @@
                       <li class="action">
                         <ConfirmAction
                           @buttonText="Revoke"
-                          @buttonColor="critical"
                           @isInDropdown={{true}}
                           @confirmTitle="Revoke token?"
                           @confirmMessage="This will revoke this secondary token."

From 009ddfbdafb1e15900be3ce3c1bc5965b190afbd Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Fri, 17 Nov 2023 15:13:55 -0600
Subject: [PATCH 40/42] update confirm action tests

---
 .../components/confirm-action-test.js         | 88 +++++++++++++------
 1 file changed, 59 insertions(+), 29 deletions(-)

diff --git a/ui/tests/integration/components/confirm-action-test.js b/ui/tests/integration/components/confirm-action-test.js
index 7a2ca6b75d78..839840e5f3ed 100644
--- a/ui/tests/integration/components/confirm-action-test.js
+++ b/ui/tests/integration/components/confirm-action-test.js
@@ -5,12 +5,12 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click } from '@ember/test-helpers';
+import { render, click, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import sinon from 'sinon';
 
 const SELECTORS = {
-  confirmToggle: '[data-test-confirm-action-trigger]',
+  modalToggle: '[data-test-confirm-action-trigger]',
   title: '[data-test-confirm-action-title]',
   message: '[data-test-confirm-action-message]',
   confirm: '[data-test-confirm-button]',
@@ -31,21 +31,32 @@ module('Integration | Component | confirm-action', function (hooks) {
       />
       `);
 
-    assert.dom(SELECTORS.confirmToggle).hasText('DELETE', 'renders button text');
-    await click(SELECTORS.confirmToggle);
+    assert.dom(SELECTORS.modalToggle).hasText('DELETE', 'renders button text');
+    await click(SELECTORS.modalToggle);
+    // hasClass assertion wasn't working so this is the workaround
+    assert.strictEqual(
+      find('#confirm-action-modal').className,
+      'hds-modal hds-modal--size-small hds-modal--color-critical',
+      'renders critical modal color by default'
+    );
+    assert.strictEqual(
+      find(SELECTORS.confirm).className,
+      'hds-button hds-button--size-medium hds-button--color-critical',
+      'renders critical confirm button'
+    );
     assert.dom(SELECTORS.title).hasText('Are you sure?', 'renders default title');
     assert
       .dom(SELECTORS.message)
       .hasText('You will not be able to recover it later.', 'renders default body text');
     await click(SELECTORS.cancel);
     assert.false(this.onConfirm.called, 'does not call the action when Cancel is clicked');
-    await click(SELECTORS.confirmToggle);
+    await click(SELECTORS.modalToggle);
     await click(SELECTORS.confirm);
     assert.true(this.onConfirm.called, 'calls the action when Confirm is clicked');
     assert.dom(SELECTORS.title).doesNotExist('modal closes after confirm is clicked');
   });
 
-  test('it renders defaults in dropdown and calls onConfirmAction', async function (assert) {
+  test('it renders isInDropdown defaults and calls onConfirmAction', async function (assert) {
     await render(hbs`
       <ConfirmAction
         @buttonText="DELETE"
@@ -54,18 +65,16 @@ module('Integration | Component | confirm-action', function (hooks) {
       />
       `);
 
-    assert.dom(`li ${SELECTORS.confirmToggle}`).exists('element renders inside <li>');
-    assert
-      .dom(SELECTORS.confirmToggle)
-      .hasClass('hds-confirm-action-critical', 'button has dropdown styling');
-    await click(SELECTORS.confirmToggle);
+    assert.dom(`li ${SELECTORS.modalToggle}`).exists('element renders inside <li>');
+    assert.dom(SELECTORS.modalToggle).hasClass('hds-confirm-action-critical', 'button has dropdown styling');
+    await click(SELECTORS.modalToggle);
     assert.dom(SELECTORS.title).hasText('Are you sure?', 'renders default title');
     assert
       .dom(SELECTORS.message)
       .hasText('You will not be able to recover it later.', 'renders default body text');
     await click('[data-test-confirm-cancel-button]');
     assert.false(this.onConfirm.called, 'does not call the action when Cancel is clicked');
-    await click(SELECTORS.confirmToggle);
+    await click(SELECTORS.modalToggle);
     await click(SELECTORS.confirm);
     assert.true(this.onConfirm.called, 'calls the action when Confirm is clicked');
     assert.dom(SELECTORS.title).doesNotExist('modal closes after confirm is clicked');
@@ -80,37 +89,45 @@ module('Integration | Component | confirm-action', function (hooks) {
       />
       `);
 
-    await click(SELECTORS.confirmToggle);
+    await click(SELECTORS.modalToggle);
 
     assert.dom(SELECTORS.confirm).isDisabled('disables confirm button when loading');
     assert.dom('[data-test-confirm-button] [data-test-icon="loading"]').exists('it renders loading icon');
   });
 
-  test('it renders passed args', async function (assert) {
-    this.condition = false;
+  test('it renders disabledMessage modal', async function (assert) {
+    this.condition = true;
     await render(hbs`
       <ConfirmAction
         @buttonText="Open!"
         @onConfirmAction={{this.onConfirm}}
-        @buttonColor="secondary"
         @confirmTitle="Do this?"
         @confirmMessage="Are you really, really sure?"
         @disabledMessage={{if this.condition "This is the reason you cannot do the thing"}}
       />
       `);
 
-    await click(SELECTORS.confirmToggle);
-    assert.dom(SELECTORS.title).hasText('Do this?', 'renders passed title');
-    assert.dom(SELECTORS.message).hasText('Are you really, really sure?', 'renders passed body text');
-    assert.dom(SELECTORS.confirm).hasText('Confirm');
+    await click(SELECTORS.modalToggle);
+    assert.strictEqual(
+      find('#confirm-action-modal').className,
+      'hds-modal hds-modal--size-small hds-modal--color-neutral',
+      'renders critical modal color by default'
+    );
+    assert.dom(SELECTORS.title).hasText('Not allowed', 'renders disabled title');
+    assert
+      .dom(SELECTORS.message)
+      .hasText('This is the reason you cannot do the thing', 'renders disabled message as body text');
+    assert.dom(SELECTORS.confirm).doesNotExist('does not render confirm action button');
+    assert.dom(SELECTORS.cancel).hasText('Close');
   });
 
-  test('it renders disabled modal', async function (assert) {
-    this.condition = true;
+  test('it renders passed args', async function (assert) {
+    this.condition = false;
     await render(hbs`
       <ConfirmAction
         @buttonText="Open!"
         @onConfirmAction={{this.onConfirm}}
+        @modalColor="warning"
         @buttonColor="secondary"
         @confirmTitle="Do this?"
         @confirmMessage="Are you really, really sure?"
@@ -118,12 +135,25 @@ module('Integration | Component | confirm-action', function (hooks) {
       />
       `);
 
-    await click(SELECTORS.confirmToggle);
-    assert.dom(SELECTORS.title).hasText('Not allowed', 'renders disabled title');
-    assert
-      .dom(SELECTORS.message)
-      .hasText('This is the reason you cannot do the thing', 'renders disabled message as body text');
-    assert.dom(SELECTORS.confirm).doesNotExist('Close');
-    assert.dom(SELECTORS.cancel).hasText('Close');
+    // hasClass assertion wasn't working so this is the workaround
+    assert.strictEqual(
+      find(SELECTORS.modalToggle).className,
+      'hds-button hds-button--size-medium hds-button--color-secondary',
+      'renders @buttonColor classes'
+    );
+    await click(SELECTORS.modalToggle);
+    assert.strictEqual(
+      find('#confirm-action-modal').className,
+      'hds-modal hds-modal--size-small hds-modal--color-warning',
+      'renders warning modal'
+    );
+    assert.strictEqual(
+      find(SELECTORS.confirm).className,
+      'hds-button hds-button--size-medium hds-button--color-primary',
+      'renders primary confirm button'
+    );
+    assert.dom(SELECTORS.title).hasText('Do this?', 'renders passed title');
+    assert.dom(SELECTORS.message).hasText('Are you really, really sure?', 'renders passed body text');
+    assert.dom(SELECTORS.confirm).hasText('Confirm');
   });
 });

From 8642aad68a9955ef7c16bea612294b4482bac428 Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Fri, 17 Nov 2023 15:42:52 -0600
Subject: [PATCH 41/42] updae modals with disabled message

---
 ui/tests/acceptance/mfa-method-test.js                       | 5 +----
 .../integration/components/keymgmt/provider-edit-test.js     | 3 +--
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/ui/tests/acceptance/mfa-method-test.js b/ui/tests/acceptance/mfa-method-test.js
index 405ca69d7a01..19f9256d9dcc 100644
--- a/ui/tests/acceptance/mfa-method-test.js
+++ b/ui/tests/acceptance/mfa-method-test.js
@@ -108,12 +108,9 @@ module('Acceptance | mfa-method', function (hooks) {
     await click('[data-test-mfa-method-list-item]');
     assert.dom('[data-test-tab="config"]').hasClass('active', 'Configuration tab is active by default');
     await click('[data-test-delete-mfa-config]');
-    assert
-      .dom('[data-test-confirm-button]')
-      .isDisabled('Confirm button disabled when method is attached to an enforcement');
 
     assert
-      .dom('[data-test-disabled-message]')
+      .dom('[data-test-confirm-action-message]')
       .hasText(
         "This method cannot be deleted until its enforcements are deleted. This can be done from the 'Enforcements' tab."
       );
diff --git a/ui/tests/integration/components/keymgmt/provider-edit-test.js b/ui/tests/integration/components/keymgmt/provider-edit-test.js
index 565e9a85550c..5cdf04169769 100644
--- a/ui/tests/integration/components/keymgmt/provider-edit-test.js
+++ b/ui/tests/integration/components/keymgmt/provider-edit-test.js
@@ -105,9 +105,8 @@ module('Integration | Component | keymgmt/provider-edit', function (hooks) {
 
     await changeTab('details');
     await click(`[${ts}-delete]`);
-    assert.dom('[data-test-confirm-button]').isDisabled('Confirm button is disabled when keys exist');
     assert
-      .dom('[data-test-disabled-message]')
+      .dom('[data-test-confirm-action-message]')
       .hasText(
         'This provider cannot be deleted until all 2 key(s) distributed to it are revoked. This can be done from the Keys tab.',
         'Renders disabled message'

From d49098589a2d52b14a8a0f99cbe9f34ae63e955d Mon Sep 17 00:00:00 2001
From: "clairebontempo@gmail.com" <clairebontempo@gmail.com>
Date: Fri, 17 Nov 2023 17:13:28 -0600
Subject: [PATCH 42/42] refactor provider edit test

---
 .../components/keymgmt/provider-edit-test.js  | 55 ++++++++++++++-----
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/ui/tests/integration/components/keymgmt/provider-edit-test.js b/ui/tests/integration/components/keymgmt/provider-edit-test.js
index 5cdf04169769..10c8fe67cb39 100644
--- a/ui/tests/integration/components/keymgmt/provider-edit-test.js
+++ b/ui/tests/integration/components/keymgmt/provider-edit-test.js
@@ -48,7 +48,7 @@ module('Integration | Component | keymgmt/provider-edit', function (hooks) {
   });
 
   test('it should render show view', async function (assert) {
-    assert.expect(16);
+    assert.expect(10);
 
     // override capability getters
     Object.defineProperties(this.model, {
@@ -64,17 +64,6 @@ module('Integration | Component | keymgmt/provider-edit', function (hooks) {
         },
       };
     });
-    this.server.delete('/keymgmt/kms/foo-bar', () => {
-      assert.ok(true, 'Request made to delete key');
-      return {};
-    });
-    this.owner.lookup('service:router').reopen({
-      transitionTo(path, model, { queryParams: { tab } }) {
-        assert.strictEqual(path, root.path, 'Root path sent in transitionTo on delete');
-        assert.strictEqual(model, root.model, 'Root model sent in transitionTo on delete');
-        assert.deepEqual(tab, 'provider', 'Correct query params sent in transitionTo on delete');
-      },
-    });
 
     const changeTab = async (tab) => {
       this.set('tab', tab);
@@ -112,11 +101,49 @@ module('Integration | Component | keymgmt/provider-edit', function (hooks) {
         'Renders disabled message'
       );
     await click('[data-test-confirm-cancel-button]');
-    this.model.keys = [];
-    await settled();
+  });
+
+  test('it should delete a provider', async function (assert) {
+    assert.expect(5);
+
+    // override capability getters
+    Object.defineProperties(this.model, {
+      canDelete: { value: true },
+      canListKeys: { value: true },
+    });
+
+    this.server.post('/sys/capabilities-self', () => ({}));
+    this.server.get('/keymgmt/kms/foo-bar/key', () => {
+      return {
+        data: {
+          keys: [],
+        },
+      };
+    });
+    this.server.delete('/keymgmt/kms/foo-bar', () => {
+      assert.ok(true, 'Request made to delete key');
+      return {};
+    });
+    this.owner.lookup('service:router').reopen({
+      transitionTo(path, model, { queryParams: { tab } }) {
+        assert.strictEqual(path, root.path, 'Root path sent in transitionTo on delete');
+        assert.strictEqual(model, root.model, 'Root model sent in transitionTo on delete');
+        assert.deepEqual(tab, 'provider', 'Correct query params sent in transitionTo on delete');
+      },
+    });
+
+    await render(hbs`
+      <Keymgmt::ProviderEdit
+        @root={{this.root}}
+        @model={{this.model}}
+        @mode="show"
+        @tab={{this.tab}}
+      />`);
+
     assert
       .dom('[data-test-value-div="Keys"]')
       .hasText('None', 'None is displayed when no keys exist for provider');
+
     await click(`[${ts}-delete]`);
     await click('[data-test-confirm-button]');
   });