UI: HDS adoption replace <ConfirmAction> component

ui/app/components/seal-action.hbs

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

ui/app/components/sidebar/user-menu.hbs

@@ -15,83 +15,80 @@
     <Hds::SideNav::Header::IconButton @icon="user" @ariaLabel="User menu" />
   </Dropdown.Trigger>
   <Dropdown.Content>
-    <Confirm as |c|>
-      <div class="popup-menu-content" data-test-user-menu-content>
-        <div class="box">
-          <div class="menu-label">
-            {{capitalize this.auth.authData.displayName}}
-          </div>
-          <nav class="menu">
-            <ul class="menu-list">
-              {{#if this.auth.allowExpiration}}
-                <li class="token-alert is-flex" data-test-user-menu-item="token alert">
-                  <span><Icon @name="alert-triangle-fill" class="has-text-highlight" /></span>
-                  <span class="is-size-8 has-text-semibold">
-                    We've stopped auto-renewing your token due to inactivity. It will expire on
-                    {{date-format this.auth.tokenExpirationDate "MMMM do yyyy, h:mm:ss a"}}.
-                  </span>
-                </li>
-              {{/if}}
-              {{#if this.hasEntityId}}
-                <li class="action">
-                  <LinkTo @route="vault.cluster.mfa-setup" data-test-user-menu-item="mfa">
-                    Multi-factor authentication
-                  </LinkTo>
-                </li>
-              {{/if}}
-              {{#if this.isUserpass}}
-                <li class="action">
-                  <LinkTo @route="vault.cluster.access.reset-password" data-test-user-menu-item="reset-password">
-                    Reset password
-                  </LinkTo>
-                </li>
-              {{/if}}
-              <li class="action" id="container">
-                {{! container is required in navbar collapsed state }}
-                <Hds::Copy::Button
-                  @text="Copy token"
-                  @textToCopy={{this.auth.currentToken}}
-                  @isFullWidth={{true}}
-                  @container="#container"
-                  class="in-dropdown link is-flex-start"
-                  {{on "click" (fn (set-flash-message "Token copied!"))}}
-                />
+    <div class="popup-menu-content" data-test-user-menu-content>
+      <div class="box">
+        <div class="menu-label">
+          {{capitalize this.auth.authData.displayName}}
+        </div>
+        <nav class="menu">
+          <ul class="menu-list">
+            {{#if this.auth.allowExpiration}}
+              <li class="token-alert is-flex" data-test-user-menu-item="token alert">
+                <span><Icon @name="alert-triangle-fill" class="has-text-highlight" /></span>
+                <span class="is-size-8 has-text-semibold">
+                  We've stopped auto-renewing your token due to inactivity. It will expire on
+                  {{date-format this.auth.tokenExpirationDate "MMMM do yyyy, h:mm:ss a"}}.
+                </span>
               </li>
-              {{#if (is-before (now interval=1000) this.auth.tokenExpirationDate)}}
-                {{#if this.auth.authData.renewable}}
-                  <li class="action">
-                    {{! TODO Hds::Button replacement skipped in favor of updating it when there is a Hds::Dropdown swapout }}
-                    <button
-                      type="button"
-                      {{on "click" this.renewToken}}
-                      class="link button {{if this.isRenewing 'is-loading'}}"
-                      data-test-user-menu-item="renew token"
-                    >
-                      Renew token
-                    </button>
-                  </li>
-                {{/if}}
-                <li class="action">
-                  <c.Message
-                    @id={{get this.auth "authData.displayName"}}
-                    @title={{concat "Revoke " (get this.auth "authData.displayName") "?"}}
-                    @onConfirm={{action "revokeToken"}}
-                    @message="You will not be able to log in again with this token."
-                    @triggerText="Revoke token"
-                    @confirmButtonText="Revoke"
-                    data-test-user-menu-item="revoke token"
-                  />
-                </li>
-              {{/if}}
+            {{/if}}
+            {{#if this.hasEntityId}}
               <li class="action">
-                <LinkTo @route="vault.cluster.logout" @model={{this.currentCluster.cluster.name}} id="logout">
-                  Log out
+                <LinkTo @route="vault.cluster.mfa-setup" data-test-user-menu-item="mfa">
+                  Multi-factor authentication
                 </LinkTo>
               </li>
-            </ul>
-          </nav>
-        </div>
+            {{/if}}
+            {{#if this.isUserpass}}
+              <li class="action">
+                <LinkTo @route="vault.cluster.access.reset-password" data-test-user-menu-item="reset-password">
+                  Reset password
+                </LinkTo>
+              </li>
+            {{/if}}
+            <li class="action" id="container">
+              {{! container is required in navbar collapsed state }}
+              <Hds::Copy::Button
+                @text="Copy token"
+                @textToCopy={{this.auth.currentToken}}
+                @isFullWidth={{true}}
+                @container="#container"
+                class="in-dropdown link is-flex-start"
+                {{on "click" (fn (set-flash-message "Token copied!"))}}
+              />
+            </li>
+            {{#if (is-before (now interval=1000) this.auth.tokenExpirationDate)}}
+              {{#if this.auth.authData.renewable}}
+                <li class="action">
+                  {{! TODO Hds::Button replacement skipped in favor of updating it when there is a Hds::Dropdown swapout }}
+                  <button
+                    type="button"
+                    {{on "click" this.renewToken}}
+                    class="link button {{if this.isRenewing 'is-loading'}}"
+                    data-test-user-menu-item="renew token"
+                  >
+                    Renew token
+                  </button>
+                </li>
+              {{/if}}
+              <ConfirmAction
+                class="hds-confirm-action-critical"
+                @buttonColor="critical"
+                @isInDropdown={{true}}
+                @confirmTitle="Revoke {{get this.auth 'authData.displayName'}}?"
+                @onConfirmAction={{action "revokeToken"}}
+                @buttonText="Revoke token"
+                @confirmMessage="You will not be able to log in again with this token."
+                data-test-user-menu-item="revoke token"
+              />
+            {{/if}}
+            <li class="action">
+              <LinkTo @route="vault.cluster.logout" @model={{this.currentCluster.cluster.name}} id="logout">
+                Log out
+              </LinkTo>
+            </li>
+          </ul>
+        </nav>
       </div>
-    </Confirm>
+    </div>
   </Dropdown.Content>
 </BasicDropdown>

ui/app/styles/components/popup-menu.scss

@@ -48,6 +48,19 @@
     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 {
+      margin-left: -$spacing-4;
+      font-size: $size-7;
+      font-weight: $font-weight-semibold;
+    }
+  }
+
   button.link,
   .ember-power-select-option,
   .ember-power-select-option[aria-current='true'],

ui/app/styles/core.scss

@@ -61,7 +61,6 @@
 @import './components/calendar-widget';
 @import './components/cluster-banners';
 @import './components/codemirror';
-@import './components/confirm';
 @import './components/console-ui-panel';
 @import './components/control-group';
 @import './components/doc-link';

ui/app/templates/components/configure-ssh-secret.hbs

@@ -22,18 +22,15 @@
     </div>
   </div>
   <div class="field is-grouped-split box is-fullwidth is-bottomless">
-    <div class="control">
+    <Hds::ButtonSet>
       <Hds::Copy::Button @text="Copy" @textToCopy={{@model.publicKey}} class="primary" />
-    </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>
+      />
+    </Hds::ButtonSet>
   </div>
 {{else}}
   <form {{on "submit" this.saveConfig}} data-test-ssh-configure-form="true">