From e6cfdc734118ecebc7b189dab0277d9219d65a93 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Tue, 12 Oct 2021 12:31:41 +0100
Subject: [PATCH 1/3] ui: Move the Role remove dialog to use InformedAction

---
 .../app/components/role-selector/index.hbs    | 41 ++++++++++++-------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/role-selector/index.hbs b/ui/packages/consul-ui/app/components/role-selector/index.hbs
index cd607f119687..1054af55257d 100644
--- a/ui/packages/consul-ui/app/components/role-selector/index.hbs
+++ b/ui/packages/consul-ui/app/components/role-selector/index.hbs
@@ -141,24 +141,35 @@ as |modal|>
               <li role="none" class="dangerous">
                 <label for={{confirm}} role="menuitem" tabindex="-1" onkeypress={{keypressClick}} data-test-delete>Remove</label>
                 <div role="menu">
-                  <div class="confirmation-alert warning">
-                    <div>
-                      <header>
-                        Confirm Remove
-                      </header>
+                  <InformedAction
+                    class="warning"
+                  >
+                    <:header>
+                      Confirm Remove
+                    </:header>
+                    <:body>
                       <p>
                         Are you sure you want to remove this role?
                       </p>
-                    </div>
-                    <ul>
-                      <li class="dangerous">
-                        <button tabindex="-1" type="button" class="type-delete" onclick={{action send 'remove' item items}}>Remove</button>
-                      </li>
-                      <li>
-                        <label for={{confirm}}>Cancel</label>
-                      </li>
-                    </ul>
-                  </div>
+                    </:body>
+                    <:actions as |Actions|>
+                      <Actions.Action class="dangerous">
+                        <Action
+                          tabindex="-1"
+                          {{on 'click' (action send 'remove' item items)}}
+                        >
+                          Remove
+                        </Action>
+                      </Actions.Action>
+                      <Actions.Action>
+                        <Action
+                          @for={{confirm}}
+                        >
+                          Cancel
+                        </Action>
+                      </Actions.Action>
+                    </:actions>
+                  </InformedAction>
                 </div>
               </li>
 {{/if}}

From 9ef66ac1df975574714940856662a3cc02ae42ad Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Wed, 13 Oct 2021 14:27:00 +0100
Subject: [PATCH 2/3] Fixup page object

---
 .../consul-ui/app/components/role-selector/pageobject.js  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/role-selector/pageobject.js b/ui/packages/consul-ui/app/components/role-selector/pageobject.js
index f095df9353c3..c8d79bf423e4 100644
--- a/ui/packages/consul-ui/app/components/role-selector/pageobject.js
+++ b/ui/packages/consul-ui/app/components/role-selector/pageobject.js
@@ -6,9 +6,11 @@ export default (clickable, deletable, collection, alias, roleForm) => (scope = '
     roles: alias('selectedOptions'),
     selectedOptions: collection(
       '[data-test-roles] [data-test-tabular-row]',
-      deletable({
-        actions: clickable('label'),
-      })
+      {
+        actions: clickable('label > button'),
+        delete: clickable('[data-test-delete]'),
+        confirmDelete: clickable('.informed-action button'),
+      }
     ),
   };
 };

From 42a1b6df4711306d7047315d7c66f6fae283b7ad Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Thu, 14 Oct 2021 12:43:34 +0100
Subject: [PATCH 3/3] Changelog

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

diff --git a/.changelog/11298.txt b/.changelog/11298.txt
new file mode 100644
index 000000000000..a71a3d4d8da8
--- /dev/null
+++ b/.changelog/11298.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixed styling of Role remove dialog on the Token edit page
+```