From ae57fe6e1d340c9e13e086c0e534b54ff05cd55b Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Thu, 14 Oct 2021 13:54:27 +0100
Subject: [PATCH] ui: Move the Role remove dialog to use InformedAction
 (#11298)

---
 .changelog/11298.txt                          |  3 ++
 .../app/components/role-selector/index.hbs    | 41 ++++++++++++-------
 .../components/role-selector/pageobject.js    |  8 ++--
 3 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 .changelog/11298.txt

diff --git a/.changelog/11298.txt b/.changelog/11298.txt
new file mode 100644
index 000000000..a71a3d4d8
--- /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
+```
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 cd607f119..1054af552 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}}
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 f095df935..c8d79bf42 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'),
+      }
     ),
   };
 };