From 6603a8649904cc5fd30f4feb5a2f57d70b1e364c Mon Sep 17 00:00:00 2001 From: Joshua Ogle Date: Fri, 17 May 2019 11:29:21 -0600 Subject: [PATCH] UI: Confirm Action as a popover * Refactors ConfirmAction implementation as a popover * Improves copy surrounding consequences of destructive actions * Moves 'Delete' buttons to Toolbar --- ui/app/styles/components/confirm.scss | 38 ++++++++++++ ui/app/styles/components/popup-menu.scss | 14 +++-- ui/app/styles/components/toolbar.scss | 7 ++- ui/app/templates/components/auth-info.hbs | 62 ++++++++----------- ui/app/templates/components/config-pki-ca.hbs | 16 ++--- ui/app/templates/components/edit-form.hbs | 28 +++++---- .../components/identity/edit-form.hbs | 24 ++++--- .../components/identity/popup-alias.hbs | 18 ++---- .../components/identity/popup-members.hbs | 19 +++--- .../components/identity/popup-metadata.hbs | 14 ++--- .../components/identity/popup-policy.hbs | 19 +++--- .../templates/components/pki-cert-popup.hbs | 22 +++---- ui/app/templates/components/pki-cert-show.hbs | 16 ++--- ui/app/templates/components/role-aws-edit.hbs | 39 +++++++----- ui/app/templates/components/role-pki-edit.hbs | 44 ++++++++----- ui/app/templates/components/role-ssh-edit.hbs | 33 ++++++---- ui/app/templates/components/secret-edit.hbs | 8 +-- .../components/secret-version-menu.hbs | 28 +++------ .../components/transit-key-actions.hbs | 19 +++--- ui/app/templates/partials/role-aws/form.hbs | 10 --- .../partials/role-aws/popup-menu.hbs | 18 ++---- ui/app/templates/partials/role-pki/form.hbs | 11 ---- .../partials/role-pki/popup-menu.hbs | 20 +++--- ui/app/templates/partials/role-ssh/form.hbs | 10 --- .../partials/role-ssh/popup-menu.hbs | 60 ++++++++---------- .../partials/secret-backend-settings/ssh.hbs | 13 ++-- .../templates/partials/secret-list/item.hbs | 19 +++--- ui/app/templates/partials/status/cluster.hbs | 1 - .../templates/partials/transit-form-edit.hbs | 16 +++-- .../vault/cluster/access/identity/index.hbs | 52 +++++++--------- .../vault/cluster/access/leases/list.hbs | 44 +++++-------- .../vault/cluster/access/leases/show.hbs | 32 +++++----- .../vault/cluster/access/methods.hbs | 20 +++--- .../vault/cluster/access/namespaces/index.hbs | 9 +-- .../vault/cluster/policies/index.hbs | 19 +++--- .../templates/vault/cluster/policy/edit.hbs | 15 +++-- .../vault/cluster/secrets/backends.hbs | 27 +++----- .../templates/vault/cluster/settings/seal.hbs | 19 +++--- .../core/addon/components/confirm-action.js | 51 +++++---------- .../templates/components/confirm-action.hbs | 55 ++++++++++++++++ .../templates/components/toolbar-link.hbs | 1 + .../components/replication-action-demote.hbs | 25 ++++---- .../components/replication-action-disable.hbs | 19 +++--- .../components/replication-action-promote.hbs | 34 +++++----- .../components/replication-action-recover.hbs | 18 +++--- .../components/replication-action-reindex.hbs | 17 ++--- .../replication-action-update-primary.hbs | 34 +++++----- .../mode/secondaries/config-edit.hbs | 23 ++++--- .../mode/secondaries/config-show.hbs | 47 +++++++------- .../templates/mode/secondaries/index.hbs | 34 +++++----- .../templates/mode/secondaries/revoke.hbs | 22 +++---- .../secrets/backend/pki/role-test.js | 8 +-- .../secrets/backend/ssh/role-test.js | 8 +-- .../integration/components/edit-form-test.js | 21 ------- .../pages/access/identity/aliases/index.js | 5 +- ui/tests/pages/access/identity/index.js | 5 +- .../pages/secrets/backend/pki/edit-role.js | 5 -- ui/tests/pages/secrets/backend/pki/show.js | 5 ++ .../pages/secrets/backend/ssh/edit-role.js | 5 -- ui/tests/pages/secrets/backend/ssh/show.js | 5 ++ 60 files changed, 645 insertions(+), 685 deletions(-) create mode 100644 ui/lib/core/addon/templates/components/confirm-action.hbs diff --git a/ui/app/styles/components/confirm.scss b/ui/app/styles/components/confirm.scss index 105dc5d11524..f85f7f87677f 100644 --- 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 index b7c5c1191abd..8f624e2483aa 100644 --- 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 index 78f292d07369..4fb8fe472bd9 100644 --- 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 index 341d43bd54dd..b06e75383940 100644 --- 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'}}" /> {{/if}} +
  • + +
    • +
  • + + Copy token + +
    • {{#if (is-before (now interval=1000) auth.tokenExpirationDate)}} {{#if auth.authData.renewable}}
  • @@ -20,50 +30,32 @@
  • - {{#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" - }} + Revoke token - {{/confirm-action}} +
    • {{else}}
  • - {{#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" - }} + Revoke token - {{/confirm-action}} +
    • {{/if}} {{/if}}
  • - - Copy token - -
    • -
  • - -
    • -
  • - {{#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}}
    • diff --git a/ui/app/templates/components/config-pki-ca.hbs b/ui/app/templates/components/config-pki-ca.hbs index 276fa424ac03..95af999df5d0 100644 --- a/ui/app/templates/components/config-pki-ca.hbs +++ b/ui/app/templates/components/config-pki-ca.hbs @@ -54,14 +54,14 @@
    {{#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}} + + Delete + {{/if}}
    diff --git a/ui/app/templates/components/edit-form.hbs b/ui/app/templates/components/edit-form.hbs index 032035eefb23..8fcff4462d09 100644 --- a/ui/app/templates/components/edit-form.hbs +++ b/ui/app/templates/components/edit-form.hbs @@ -1,3 +1,19 @@ +{{#if model.canDelete}} + + + + + {{deleteButtonText}} + + + + +{{/if}}
    @@ -21,17 +37,5 @@
    {{/if}} - {{#if model.canDelete}} - - - {{deleteButtonText}} - - - {{/if}} diff --git a/ui/app/templates/components/identity/edit-form.hbs b/ui/app/templates/components/identity/edit-form.hbs index c0ca88971aa4..f4fe37cccedf 100644 --- 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)}} + + + + Delete {{model.identityType}} + + + +{{/if}} +
    @@ -34,15 +48,5 @@ {{/if}}
    - {{#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}}
    diff --git a/ui/app/templates/components/identity/popup-alias.hbs b/ui/app/templates/components/identity/popup-alias.hbs index 7bbbc1994334..6b1ece64c032 100644 --- 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}}
  • - {{#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" - }} + Delete - {{/confirm-action}} +
    • {{/if}} {{/if}} diff --git a/ui/app/templates/components/identity/popup-members.hbs b/ui/app/templates/components/identity/popup-members.hbs index 669e4b99c5a4..c14a6197e273 100644 --- a/ui/app/templates/components/identity/popup-members.hbs +++ b/ui/app/templates/components/identity/popup-members.hbs @@ -2,19 +2,14 @@ diff --git a/ui/app/templates/components/identity/popup-metadata.hbs b/ui/app/templates/components/identity/popup-metadata.hbs index 75fd556561e3..5df7935bd324 100644 --- a/ui/app/templates/components/identity/popup-metadata.hbs +++ b/ui/app/templates/components/identity/popup-metadata.hbs @@ -3,16 +3,12 @@
    • + @confirmTitle="Remove metadata?" + @confirmMessage="This data may be used outside of Vault." + @confirmButtonText="Remove" + @onConfirmAction={{action "performTransaction" model key}} + > Remove
      • diff --git a/ui/app/templates/components/identity/popup-policy.hbs b/ui/app/templates/components/identity/popup-policy.hbs index 8aa931a06ba1..a977c4a33ec5 100644 --- a/ui/app/templates/components/identity/popup-policy.hbs +++ b/ui/app/templates/components/identity/popup-policy.hbs @@ -12,19 +12,14 @@ {{/link-to}}
    • - {{#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" - }} + Remove from {{model.identityType}} - {{/confirm-action}} +
    diff --git a/ui/app/templates/components/pki-cert-popup.hbs b/ui/app/templates/components/pki-cert-popup.hbs index 047c43c7b45a..36b339eb3f98 100644 --- a/ui/app/templates/components/pki-cert-popup.hbs +++ b/ui/app/templates/components/pki-cert-popup.hbs @@ -8,20 +8,16 @@ {{#if item.canRevoke}}
  • - {{#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 - }} + Revoke - {{/confirm-action}} +
    • {{/if}} diff --git a/ui/app/templates/components/pki-cert-show.hbs b/ui/app/templates/components/pki-cert-show.hbs index c946da52529e..42a6bba30833 100644 --- a/ui/app/templates/components/pki-cert-show.hbs +++ b/ui/app/templates/components/pki-cert-show.hbs @@ -48,14 +48,14 @@ {{#if (and (not model.revocationTime) model.canRevoke)}} - {{#confirm-action - buttonClasses="button" - onConfirmAction=(action "delete") - confirmMessage=(concat "Are you sure you want to revoke " model.id "?") - cancelButtonText="Cancel" - confirmButtonText="Revoke" - }} + Revoke - {{/confirm-action}} + {{/if}} diff --git a/ui/app/templates/components/role-aws-edit.hbs b/ui/app/templates/components/role-aws-edit.hbs index 182b79ca0d79..0d7d42567f9d 100644 --- a/ui/app/templates/components/role-aws-edit.hbs +++ b/ui/app/templates/components/role-aws-edit.hbs @@ -21,30 +21,41 @@ - - - {{#if (eq mode "show")}} - {{#if (or model.canUpdate model.canDelete)}} +{{#if (eq mode "show")}} + + + {{#if model.canGenerate}} - Edit role + Generate credentials {{/if}} - {{#if model.canGenerate}} + {{#if (and model.canGenerate (or model.canDelete model.canEdit))}} +
    + {{/if}} + {{#if model.canDelete}} + + Delete role + + {{/if}} + {{#if model.canEdit}} - Generate credentials + Edit role {{/if}} - {{/if}} - - + + +{{/if}} {{#if (or (eq mode 'edit') (eq mode 'create'))}} {{partial 'partials/role-aws/form'}} diff --git a/ui/app/templates/components/role-pki-edit.hbs b/ui/app/templates/components/role-pki-edit.hbs index 1426cf00bcaa..79a7fcc13dff 100644 --- a/ui/app/templates/components/role-pki-edit.hbs +++ b/ui/app/templates/components/role-pki-edit.hbs @@ -21,19 +21,9 @@ - - - {{#if (eq mode "show") }} - {{#if (or model.canUpdate model.canDelete)}} - - Edit role - - {{/if}} +{{#if (eq mode "show") }} + + {{#if model.canGenerate}} {{/if}} - {{/if}} - - + {{#if (and (or model.canGenerate model.canSign) (or model.canDelete model.canEdit))}} +
    + {{/if}} + {{#if model.canDelete}} + + Delete role + + {{/if}} + {{#if model.canEdit}} + + Edit role + + {{/if}} + + +{{/if}} {{#if (or (eq mode 'edit') (eq mode 'create'))}} {{partial 'partials/role-pki/form'}} diff --git a/ui/app/templates/components/role-ssh-edit.hbs b/ui/app/templates/components/role-ssh-edit.hbs index 57016b9a422c..3f44ca98810f 100644 --- a/ui/app/templates/components/role-ssh-edit.hbs +++ b/ui/app/templates/components/role-ssh-edit.hbs @@ -21,19 +21,9 @@ -{{#if (eq mode "show") }} +{{#if (eq mode "show")}} - {{#if (or model.canUpdate model.canDelete)}} - - Edit role - - {{/if}} {{#if (eq model.keyType "otp")}} {{/if}} + {{#if (or model.canUpdate model.canDelete)}} +
    + {{/if}} + {{#if model.canDelete}} + + Delete role + + {{/if}} + {{#if (or model.canUpdate model.canDelete)}} + + Edit role + + {{/if}} {{/if}} diff --git a/ui/app/templates/components/secret-edit.hbs b/ui/app/templates/components/secret-edit.hbs index 15d3d2f6c352..b5e8a91fe6b5 100644 --- a/ui/app/templates/components/secret-edit.hbs +++ b/ui/app/templates/components/secret-edit.hbs @@ -97,14 +97,12 @@ @buttonClasses="toolbar-link" @onConfirmAction={{action "deleteKey"}} @confirmMessage={{if isV2 - (concat "This will permanently delete " model.id " and all its versions. Are you sure you want to do this?") - (concat "Are you sure you want to delete " model.id "?") + (concat "This will permanently delete all versions of this secret.") + (concat "You will not be able to recover this secret data later.") }} - @cancelButtonText="Cancel" data-test-secret-delete="true" - > + > Delete secret - {{/if}} diff --git a/ui/app/templates/components/secret-version-menu.hbs b/ui/app/templates/components/secret-version-menu.hbs index 2207d55a8547..33d534e8ede7 100644 --- a/ui/app/templates/components/secret-version-menu.hbs +++ b/ui/app/templates/components/secret-version-menu.hbs @@ -49,17 +49,13 @@ {{/if}} {{else if canDeleteVersion}} - Delete version + > + Delete version {{else}}
    - {{#if (and (eq mode 'edit') model.canDelete)}} - {{#confirm-action - buttonClasses="button" - onConfirmAction=(action "delete") - confirmMessage=(concat "Are you sure you want to delete " model.id "?") - cancelButtonText="Cancel" - }} - Delete - {{/confirm-action}} - {{/if}}
    diff --git a/ui/app/templates/partials/role-aws/popup-menu.hbs b/ui/app/templates/partials/role-aws/popup-menu.hbs index f96369e29ac0..b1ac884dd979 100644 --- a/ui/app/templates/partials/role-aws/popup-menu.hbs +++ b/ui/app/templates/partials/role-aws/popup-menu.hbs @@ -42,19 +42,13 @@ {{/if}} {{#if item.canDelete}}
  • - {{#confirm-action - confirmButtonClasses="button is-primary" - buttonClasses="link is-destroy" - onConfirmAction=(action "delete" 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" - data-test-aws-role-delete=item.id - }} + Delete - {{/confirm-action}} +
    • {{/if}} {{/if}} diff --git a/ui/app/templates/partials/role-pki/form.hbs b/ui/app/templates/partials/role-pki/form.hbs index 1b6ffb12433b..5fe8745f9e4a 100644 --- a/ui/app/templates/partials/role-pki/form.hbs +++ b/ui/app/templates/partials/role-pki/form.hbs @@ -26,16 +26,5 @@ Cancel {{/secret-link}}
    - {{#if (and (eq mode 'edit') model.canDelete)}} - {{#confirm-action - data-test-role-delete - buttonClasses="button" - onConfirmAction=(action "delete") - confirmMessage=(concat "Are you sure you want to delete " model.id "?") - cancelButtonText="Cancel" - }} - Delete - {{/confirm-action}} - {{/if}} diff --git a/ui/app/templates/partials/role-pki/popup-menu.hbs b/ui/app/templates/partials/role-pki/popup-menu.hbs index 3fe48b05b028..2b8d42faaa32 100644 --- a/ui/app/templates/partials/role-pki/popup-menu.hbs +++ b/ui/app/templates/partials/role-pki/popup-menu.hbs @@ -1,4 +1,4 @@ -{{#popup-menu name="role-aws-nav" contentClass="is-wide"}} +{{#popup-menu name="role-aws-nav"}}