ui: Move the Role remove dialog to use InformedAction (#11298)

.changelog/11298.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixed styling of Role remove dialog on the Token edit page
+```

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>
+                  <InformedAction
+                    class="warning"
+                  >
+                    <:header>
                       Confirm Remove
-                      </header>
+                    </: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}}

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'),
+      }
     ),
   };
 };