UI: HDS adoption replace <ConfirmAction> component

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}}
         />

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();

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>

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"

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>