UI: Confirm Action as a popover

* Refactors ConfirmAction implementation as a popover * Improves copy surrounding consequences of destructive actions * Moves 'Delete' buttons to Toolbar
hashicorp · May 17, 2019 · 6603a86 · 6603a86
1 parent 033b547
commit 6603a86
Show file tree

Hide file tree

Showing 60 changed files with 645 additions and 685 deletions.
diff --git a/ui/app/styles/components/confirm.scss b/ui/app/styles/components/confirm.scss
@@ -21,3 +21,41 @@
     text-align: left;
   }
 }
+
+.popup-menu-content .confirm-action-message {
+  margin: 0;
+
+  .message {
+    border: 0;
+    font-size: $size-8;
+    line-height: 1.33;
+    margin: 0;
+  }
+
+  .message-title {
+    font-size: 1rem;
+  }
+
+  .hs-icon {
+    color: $yellow;
+  }
+
+  p {
+    font-weight: $font-weight-semibold;
+    margin-left: $spacing-l;
+    padding-left: $spacing-xxs;
+    padding-top: 0;
+  }
+
+  .confirm-action-options {
+    border-top: $light-border;
+    display: flex;
+    padding: $spacing-xxs;
+
+    .link {
+      flex: 1;
+      text-align: center;
+      width: auto;
+    }
+  }
+}
diff --git a/ui/app/styles/components/popup-menu.scss b/ui/app/styles/components/popup-menu.scss
@@ -112,10 +112,16 @@
 .popup-menu-content .level-left {
   flex-shrink: 1;
 }
-.popup-menu-trigger {
-  height: 2rem;
-  min-width: 0;
-  padding: 0 $size-10;
+
+.list-item-row,
+.info-table-row,
+.wizard-dismiss-menu {
+  .popup-menu-trigger {
+    height: 2.5rem;
+    min-width: 0;
+    padding: 0;
+    width: 2.5rem;
+  }
 }
 
 .status-menu-content {

diff --git a/ui/app/styles/components/toolbar.scss b/ui/app/styles/components/toolbar.scss
@@ -22,7 +22,7 @@
 
   .input,
   .select {
-    min-width: 160px;
+    min-width: 190px;
   }
 }
 
@@ -88,6 +88,11 @@
   &:active {
     box-shadow: none;
   }
+
+  &.popup-menu-trigger {
+    height: 2.5rem;
+    padding: $size-10 $size-8;
+  }
 }
 
 .toolbar-separator {

diff --git a/ui/app/templates/components/auth-info.hbs b/ui/app/templates/components/auth-info.hbs
@@ -12,6 +12,16 @@
                 on {{date-format auth.tokenExpirationDate 'MMMM Do YYYY, h:mm:ss a'}}" />
           </li>
         {{/if}}
+        <li class="action">
+          <button type="button" class="link" onclick={{action "restartGuide"}}>
+            Restart guide
+          </button>
+        </li>
+        <li class="action">
+          <CopyButton @clipboardText={{auth.currentToken}} class="link" @buttonType="button" @success={{action (set-flash-message 'Token copied!')}}>
+            Copy token
+          </CopyButton>
+        </li>
         {{#if (is-before (now interval=1000) auth.tokenExpirationDate)}}
           {{#if auth.authData.renewable}}
             <li class="action">
@@ -20,50 +30,32 @@
               </button>
             </li>
             <li class="action">
-              {{#confirm-action
-                onConfirmAction=(action "revokeToken")
-                confirmMessage=(concat "Are you sure you want to revoke the token for " (get auth 'authData.displayName') "?")
-                confirmButtonText="Revoke"
-                confirmButtonClasses="button is-primary"
-                buttonClasses="button link"
-                showConfirm=shouldRevoke
-                class=(if shouldRevoke "message is-block is-warning is-outline")
-                containerClasses="message-body is-block"
-                messageClasses="is-block"
-              }}
+              <ConfirmAction
+                @buttonClasses="button link is-destroy"
+                @confirmTitle={{concat "Revoke " (get auth 'authData.displayName') "?"}}
+                @confirmMessage={{concat "You will not be able to log in again with this token."}}
+                @confirmButtonText="Revoke"
+                @onConfirmAction={{action "revokeToken"}}
+              >
                 Revoke token
-              {{/confirm-action}}
+              </ConfirmAction>
             </li>
           {{else}}
             <li class="action text-right">
-              {{#confirm-action
-                onConfirmAction=(action "revokeToken")
-                confirmMessage=(concat "Are you sure you want to revoke the token for " (get auth 'authData.displayName') "?")
-                confirmButtonText="Revoke"
-                confirmButtonClasses="button is-primary"
-                buttonClasses="button link"
-                showConfirm=shouldRevoke
-                class=(if shouldRevoke "message is-block is-warning is-outline")
-                containerClasses="message-body is-block"
-                messageClasses="is-block"
-              }}
+              <ConfirmAction
+                @buttonClasses="button link is-destroy"
+                @confirmTitle={{concat "Revoke " (get auth 'authData.displayName') "?"}}
+                @confirmMessage={{concat "You will not be able to log in again with this token."}}
+                @confirmButtonText="Revoke"
+                @onConfirmAction={{action "revokeToken"}}
+              >
                 Revoke token
-              {{/confirm-action}}
+              </ConfirmAction>
             </li>
           {{/if}}
         {{/if}}
         <li class="action">
-          <CopyButton @clipboardText={{auth.currentToken}} class="link" @buttonType="button" @success={{action (set-flash-message 'Token copied!')}}>
-            Copy token
-          </CopyButton>
-        </li>
-        <li class="action">
-          <button type="button" class="link" onclick={{action "restartGuide"}}>
-            Restart guide
-          </button>
-        </li>
-        <li class="action">
-          {{#link-to "vault.cluster.logout" activeClusterName id="logout" invokeAction=onLinkClick}}
+          {{#link-to "vault.cluster.logout" activeClusterName id="logout" class="is-destroy" invokeAction=onLinkClick}}
             Sign out
           {{/link-to}}
         </li>

diff --git a/ui/app/templates/components/config-pki-ca.hbs b/ui/app/templates/components/config-pki-ca.hbs
@@ -54,14 +54,14 @@
         </div>
         <div class="control">
           {{#if model.canDeleteRoot}}
-            {{#confirm-action
-              buttonClasses="button"
-              onConfirmAction=(action "deleteCA")
-              confirmMessage="Are you sure you want to delete the root CA key?"
-              cancelButtonText="Cancel"
-            }}
-            Delete
-            {{/confirm-action}}
+            <ConfirmAction
+              @buttonClasses="button"
+              @confirmTitle="Delete this CA key?"
+              @confirmMessage="This CA certificate will still be available for reading until a new certificate/key are generated or uploaded."
+              @onConfirmAction={{action "deleteCA"}}
+            >
+              Delete
+            </ConfirmAction>
           {{/if}}
         </div>
       </div>

diff --git a/ui/app/templates/components/edit-form.hbs b/ui/app/templates/components/edit-form.hbs
@@ -1,3 +1,19 @@
+{{#if model.canDelete}}
+  <Toolbar>
+    <ToolbarActions>
+      <ConfirmAction
+        @buttonClasses="toolbar-link"
+        @onConfirmAction={{action (perform save model (hash method="destroyRecord"))}}
+        @confirmMessage="This config will be permanently deleted."
+        data-test-edit-delete="true"
+      >
+        <span data-test-edit-delete-text>
+          {{deleteButtonText}}
+        </span>
+      </ConfirmAction>
+    </ToolbarActions>
+  </Toolbar>
+{{/if}}
 <form {{action (perform save model) on="submit"}}>
   <MessageError @model={{model}} data-test-edit-form-error />
   <div class="box is-sideless is-fullwidth is-marginless">
@@ -21,17 +37,5 @@
         </div>
       {{/if}}
     </div>
-    {{#if model.canDelete}}
-      <ConfirmAction
-        @buttonClasses="button is-ghost"
-        @onConfirmAction={{action (perform save model (hash method="destroyRecord"))}}
-        @confirmMessage="Are you sure you want to delete this config?"
-        data-test-edit-delete
-        >
-        <span data-test-edit-delete-text>
-          {{deleteButtonText}}
-        </span>
-      </ConfirmAction>
-    {{/if}}
   </div>
 </form>
diff --git a/ui/app/templates/components/identity/edit-form.hbs b/ui/app/templates/components/identity/edit-form.hbs
@@ -1,3 +1,17 @@
+{{#if (and (eq mode "edit") model.canDelete)}}
+  <Toolbar>
+    <ToolbarActions>
+      <ConfirmAction
+        @buttonClasses="toolbar-link"
+        @onConfirmAction={{action "deleteItem" model}}
+        data-test-entity-item-delete="true"
+      >
+        Delete {{model.identityType}}
+      </ConfirmAction>
+    </ToolbarActions>
+  </Toolbar>
+{{/if}}
+
 <form {{action (perform save) on="submit"}}>
   <div class="box is-sideless is-fullwidth is-marginless">
     <NamespaceReminder @mode={{mode}} @noun={{lowercase (humanize model.identityType)}} />
@@ -34,15 +48,5 @@
         {{/if}}
       </div>
     </div>
-      {{#if (and (eq mode "edit") model.canDelete)}}
-        {{#confirm-action
-          buttonClasses="button is-ghost"
-          onConfirmAction=(action "deleteItem" model)
-          confirmMessage=(concat "Are you sure you want to delete " model.id "?")
-          data-test-entity-item-delete=true
-        }}
-            Delete
-        {{/confirm-action}}
-      {{/if}}
   </div>
 </form>
diff --git a/ui/app/templates/components/identity/popup-alias.hbs b/ui/app/templates/components/identity/popup-alias.hbs
@@ -23,19 +23,13 @@
         {{/if}}
         {{#if item.canDelete}}
           <li class="action">
-            {{#confirm-action
-              data-test-item-delete=true
-              confirmButtonClasses="button is-primary"
-              buttonClasses="link is-destroy"
-              onConfirmAction=(action "performTransaction" item)
-              confirmMessage=(concat "Are you sure you want to delete " item.id "?")
-              showConfirm=(get this (concat "shouldDelete-" (dot-to-dash item.id)))
-              class=(if (get this (concat "shouldDelete-" (dot-to-dash item.id))) "message is-block is-warning is-outline")
-              containerClasses="message-body is-block"
-              messageClasses="is-block"
-            }}
+            <ConfirmAction
+              @buttonClasses="link is-destroy"
+              @onConfirmAction={{action "performTransaction" item}}
+              data-test-item-delete="true"
+            >
               Delete
-            {{/confirm-action}}
+            </ConfirmAction>
           </li>
         {{/if}}
       {{/if}}

diff --git a/ui/app/templates/components/identity/popup-members.hbs b/ui/app/templates/components/identity/popup-members.hbs
@@ -2,19 +2,14 @@
   <nav class="menu">
     <ul class="menu-list">
       <li class="action">
-        {{#confirm-action
-          confirmButtonClasses="button is-primary"
-          confirmButtonText="Remove"
-          buttonClasses="link is-destroy"
-          onConfirmAction=(action "performTransaction" model groupArray memberId)
-          confirmMessage=(concat "Are you sure you want to remove " memberId "?")
-          showConfirm=(get this (concat "shouldDelete-" (dot-to-dash memberId)))
-          class=(if (get this (concat "shouldDelete-" (dot-to-dash memberId))) "message is-block is-warning is-outline")
-          containerClasses="message-body is-block"
-          messageClasses="is-block"
-        }}
+        <ConfirmAction
+          @buttonClasses="link is-destroy"
+          @confirmButtonText="Remove this group?"
+          @confirmMessage="This may affect permissions for this group."
+          @onConfirmAction={{action "performTransaction" model groupArray memberId}}
+        >
           Remove
-        {{/confirm-action}}
+        </ConfirmAction>
       </li>
     </ul>
   </nav>

diff --git a/ui/app/templates/components/identity/popup-metadata.hbs b/ui/app/templates/components/identity/popup-metadata.hbs
@@ -3,16 +3,12 @@
     <ul class="menu-list">
       <li class="action">
         <ConfirmAction
-          @confirmButtonClasses="button is-primary"
-          @confirmButtonText="Remove"
           @buttonClasses="link is-destroy"
-          @onConfirmAction={{action "performTransaction" model key }}
-          @confirmMessage={{concat "Are you sure you want to remove " key "?"}}
-          @showConfirm={{get this (concat "shouldDelete-" key)}}
-          class={{ if (get this (concat "shouldDelete-" key)) "message is-block is-warning is-outline" }}
-          @containerClasses="message-body is-block"
-          @messageClasses="is-block"
-          >
+          @confirmTitle="Remove metadata?"
+          @confirmMessage="This data may be used outside of Vault."
+          @confirmButtonText="Remove"
+          @onConfirmAction={{action "performTransaction" model key}}
+        >
           Remove
         </ConfirmAction>
       </li>

diff --git a/ui/app/templates/components/identity/popup-policy.hbs b/ui/app/templates/components/identity/popup-policy.hbs
@@ -12,19 +12,14 @@
         {{/link-to}}
       </li>
       <li class="action">
-        {{#confirm-action
-          confirmButtonClasses="button is-primary"
-          confirmButtonText="Remove"
-          buttonClasses="link is-destroy"
-          onConfirmAction=(action "performTransaction" model policyName)
-          confirmMessage=(concat "Are you sure you want to remove " policyName "?")
-          showConfirm=(get this (concat "shouldDelete-" (dot-to-dash policyName)))
-          class=(if (get this (concat "shouldDelete-" (dot-to-dash policyName))) "message is-block is-warning is-outline")
-          containerClasses="message-body is-block"
-          messageClasses="is-block"
-        }}
+        <ConfirmAction
+          @buttonClasses="link is-destroy"
+          @confirmButtonText="Remove"
+          @confirmMessage="This policy may affect permissions to access Vault data."
+          @onConfirmAction={{action "performTransaction" model policyName}}
+        >
           Remove from {{model.identityType}}
-        {{/confirm-action}}
+        </ConfirmAction>
       </li>
     </ul>
   </nav>

diff --git a/ui/app/templates/components/pki-cert-popup.hbs b/ui/app/templates/components/pki-cert-popup.hbs
@@ -8,20 +8,16 @@
       </li>
       {{#if item.canRevoke}}
         <li class="action">
-          {{#confirm-action
-            confirmButtonClasses="button is-primary"
-            buttonClasses="link is-destroy"
-            onConfirmAction=(action "delete" item)
-            confirmMessage=(concat "Are you sure you want to revoke " item.id "?")
-            showConfirm=(get this (concat "shouldDelete-" (dot-to-dash item.id)))
-            class=(if (get this (concat "shouldDelete-" (dot-to-dash item.id))) "message is-block is-warning is-outline")
-            containerClasses="message-body is-block"
-            messageClasses="is-block"
-            confirmButtonText="Revoke"
-            data-test-cert-revoke-delete=item.id
-          }}
+          <ConfirmAction
+            @buttonClasses="link is-destroy"
+            @onConfirmAction={{action "delete" item}}
+            @confirmTitle="Revoke this cert?"
+            @confirmMessage="Any services using this cert may be affected."
+            @confirmButtonText="Revoke"
+            data-test-cert-revoke-delete={{item.id}}
+          >
             Revoke
-          {{/confirm-action}}
+          </ConfirmAction>
         </li>
       {{/if}}
     </ul>