Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Confirm Action as a popover #6741

Merged
merged 10 commits into from
May 17, 2019
Merged

UI: Confirm Action as a popover #6741

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
68fb008
Refactor ConfirmAction
joshuaogle May 11, 2019
3e87d93
Better copy for confirm actions
joshuaogle May 14, 2019
678532d
Merge branch 'master' into ui-confirm-action-popover
joshuaogle May 15, 2019
2551502
Move remaining 'Delete' buttons to Toolbar
joshuaogle May 15, 2019
c28d76b
Migrate ConfirmAction components in lib
joshuaogle May 16, 2019
8fd5b97
Updates for ConfirmAction copy
joshuaogle May 16, 2019
767d35b
Merge branch 'master' into ui-confirm-action-popover
joshuaogle May 16, 2019
e03ce83
Move ConfirmAction layout to template
joshuaogle May 16, 2019
9ed84e7
Remove container tag for ConfirmAction
joshuaogle May 16, 2019
bad833a
Merge branch 'master' into ui-confirm-action-popover
joshuaogle May 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions ui/app/styles/components/confirm.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
14 changes: 10 additions & 4 deletions ui/app/styles/components/popup-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it might be good to introduce an "Icon button" style rather than do it this way, but this is an easy reset for now

}

.status-menu-content {
Expand Down
7 changes: 6 additions & 1 deletion ui/app/styles/components/toolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

.input,
.select {
min-width: 160px;
min-width: 190px;
}
}

Expand Down Expand Up @@ -88,6 +88,11 @@
&:active {
box-shadow: none;
}

&.popup-menu-trigger {
height: 2.5rem;
padding: $size-10 $size-8;
}
}

.toolbar-separator {
Expand Down
62 changes: 27 additions & 35 deletions ui/app/templates/components/auth-info.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gathering the "destructive actions" at the bottom of the list, so moving these up

{{#if (is-before (now interval=1000) auth.tokenExpirationDate)}}
{{#if auth.authData.renewable}}
<li class="action">
Expand All @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions ui/app/templates/components/config-pki-ca.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
28 changes: 16 additions & 12 deletions ui/app/templates/components/edit-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
24 changes: 14 additions & 10 deletions ui/app/templates/components/identity/edit-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
</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)}} />
Expand Down Expand Up @@ -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>
18 changes: 6 additions & 12 deletions ui/app/templates/components/identity/popup-alias.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
19 changes: 7 additions & 12 deletions ui/app/templates/components/identity/popup-members.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 5 additions & 9 deletions ui/app/templates/components/identity/popup-metadata.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
19 changes: 7 additions & 12 deletions ui/app/templates/components/identity/popup-policy.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
22 changes: 9 additions & 13 deletions ui/app/templates/components/pki-cert-popup.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="This may affect access to Vault data."
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be true, but we really don't have a way to tell what they're using the certs for (whether it's vault authentication or something else).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about something more generic like "Any services using this cert may be affected."?

I'm trying to give them an idea of the consequences, but certs are a tricky one

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

@confirmButtonText="Revoke"
data-test-cert-revoke-delete={{item.id}}
>
Revoke
{{/confirm-action}}
</ConfirmAction>
</li>
{{/if}}
</ul>
Expand Down
Loading