hashicorp · hellobontempo · Nov 17, 2023 · Jun 30, 2023 · Jun 30, 2023 · Jun 30, 2023
@@ -21,14 +21,11 @@
 
 <div class="field is-grouped box is-fullwidth is-bottomless">
   <ConfirmAction
-    @buttonClasses="button is-primary"
+    @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"
-    @horizontalPosition="auto-left"
     @onConfirmAction={{this.handleSeal}}
     data-test-seal
-  >
-    Seal
-  </ConfirmAction>
+  />
 </div>
@@ -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'],

@@ -27,12 +27,11 @@
     </div>
     <div class="control">
       <ConfirmAction
-        @buttonClasses="button"
+        @buttonText="Delete"
+        @buttonColor="secondary"
         @confirmMessage="This will remove the CA certificate information."
         @onConfirmAction={{this.delete}}
-      >
-        Delete
-      </ConfirmAction>
+      />
     </div>
   </div>
 {{else}}

@@ -35,31 +35,30 @@
         {{/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>
         {{/if}}
         {{#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"
+            @color="warning"
             data-test-database-connection-rotate
-          >
-            Rotate root credentials
-          </ConfirmAction>
+          />
           {{! template-lint-enable }}
         {{/if}}
         {{#if @model.canAddRole}}

@@ -25,15 +25,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"))}}

@@ -38,15 +38,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"

@@ -7,13 +7,11 @@
   <Toolbar>
     <ToolbarActions>
       <ConfirmAction
-        @buttonClasses="toolbar-link"
+        class="toolbar-button"
+        @buttonText="Delete {{this.model.identityType}}"
         @onConfirmAction={{action "deleteItem" this.model}}
         data-test-entity-item-delete="true"
-      >
-        Delete
-        {{this.model.identityType}}
-      </ConfirmAction>
+      />
     </ToolbarActions>
   </Toolbar>
 {{/if}}

@@ -8,13 +8,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>

@@ -8,14 +8,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>

@@ -18,14 +18,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>

@@ -75,31 +75,30 @@
         {{/if}}
         {{#if @model.provider}}
           <ConfirmAction
+            @buttonText="Remove key"
             @buttonClasses="toolbar-link"
             @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
-          >
-            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?"
           @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
-        >
-          Rotate key
-        </ConfirmAction>
+        />
         {{#if @model.canEdit}}
           <ToolbarSecretLink
             @secret={{@model.id}}

@@ -50,13 +50,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">

@@ -32,9 +32,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}}

@@ -31,9 +31,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")}}

@@ -32,15 +32,13 @@
     <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}}

@@ -104,9 +104,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>
@@ -6,10 +6,12 @@
 {{#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"
+      @color="warning"
       @onConfirmAction={{action "doSubmit"}}
       data-test-transit-key-rotate
     >

@@ -57,28 +57,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."}}
+            @confirmMessage="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"}}
+            @confirmMessage="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}}

@@ -26,15 +26,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}}

@@ -48,12 +48,9 @@
         @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"
-      >
-        Delete
-      </ConfirmAction>
+      />
       <ToolbarLink
         @route="vault.cluster.access.mfa.methods.method.edit"
         @model={{this.model.method.id}}

@@ -41,15 +41,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}}