open-vault/ui/app/templates/components/secret-edit.hbs
Joshua Ogle 7eff7b51aa
UI: Confirm Action as a popover
* Refactors ConfirmAction implementation as a popover
* Improves copy surrounding consequences of destructive actions
* Moves 'Delete' buttons to Toolbar
2019-05-17 11:29:21 -06:00

192 lines
6.4 KiB
Handlebars

<PageHeader as |p|>
<p.top>
{{key-value-header
baseKey=baseKey
path="vault.cluster.secrets.backend.list"
mode=mode
root=root
showCurrent=true
}}
</p.top>
<p.levelLeft>
<h1 class="title is-3">
{{#if (eq mode "create") }}
Create secret
{{else if (and isV2 (eq mode 'edit'))}}
Create new version
{{else if (eq mode 'edit')}}
Edit secret
{{else}}
{{key.id}}
{{/if}}
</h1>
</p.levelLeft>
</PageHeader>
<Toolbar>
{{#unless (and (eq mode 'show') isWriteWithoutRead)}}
<ToolbarFilters>
<input
data-test-secret-json-toggle=true
id="json"
type="checkbox"
name="json"
class="switch is-rounded is-success is-small"
checked={{showAdvancedMode}}
onchange={{action "toggleAdvanced" value="target.checked"}}
disabled={{and (eq mode 'show') secretDataIsAdvanced}}
/>
<label for="json" class="has-text-grey">JSON</label>
</ToolbarFilters>
{{/unless}}
<ToolbarActions>
{{#if (and (eq @mode "show") this.isV2 (not @model.failedServerRead))}}
<SecretVersionMenu
@version={{this.modelForData}}
@onRefresh={{action 'refresh'}}
/>
<BasicDropdown
@class="popup-menu"
@horizontalPosition="auto-right"
@verticalPosition="below"
as |D|
>
<D.trigger
data-test-popup-menu-trigger="true"
@class={{concat "popup-menu-trigger toolbar-link" (if D.isOpen " is-active")}}
@tagName="button"
>
History <Chevron @direction="down" @isButton={{true}} />
</D.trigger>
<D.content @class="popup-menu-content ">
<nav class="box menu">
<ul class="menu-list">
<li class="action">
<SecretLink
@mode="versions"
@secret={{this.model.id}}
@class="has-text-black has-text-weight-semibold has-bottom-shadow"
>
View version history
</SecretLink>
</li>
</ul>
<h5 class="list-header">Versions</h5>
<ul class="menu-list">
{{#each (reverse this.model.versions) as |secretVersion|}}
<li class="action">
<LinkTo class="link" @params={{array (query-params version=secretVersion.version)}}>
Version {{secretVersion.version}}
{{#if (eq secretVersion.version this.model.currentVersion)}}
<Icon @glyph="check-circle-outline" class="has-text-success is-pulled-right" />
{{else if secretVersion.deleted}}
<Icon @glyph="cancel-square-outline" class="has-text-grey is-pulled-right" />
{{/if}}
</LinkTo>
</li>
{{/each}}
</ul>
</nav>
</D.content>
</BasicDropdown>
<div class="toolbar-separator"/>
{{/if}}
{{#if (and (eq mode 'show') canDelete)}}
<ConfirmAction
@buttonClasses="toolbar-link"
@onConfirmAction={{action "deleteKey"}}
@confirmMessage={{if isV2
(concat "This will permanently delete all versions of this secret.")
(concat "You will not be able to recover this secret data later.")
}}
data-test-secret-delete="true"
>
Delete secret
</ConfirmAction>
{{/if}}
{{#if (and (eq mode 'show') (or canEditV2Secret canEdit))}}
{{#let (concat 'vault.cluster.secrets.backend.' (if (eq mode 'show') 'edit' 'show')) as |targetRoute|}}
{{#unless (and isV2 (or isWriteWithoutRead modelForData.destroyed modelForData.deleted))}}
<BasicDropdown
@class="popup-menu"
@horizontalPosition="auto-right"
@verticalPosition="below"
@onClose={{action "clearWrappedData"}}
as |D|
>
<D.trigger
data-test-popup-menu-trigger="true"
@class={{concat "toolbar-link" (if D.isOpen " is-active")}}
@tagName="button"
>
Copy secret
<Chevron @direction="down" @isButton={{true}} />
</D.trigger>
<D.content @class="popup-menu-content is-wide">
<nav class="box menu">
<ul class="menu-list">
<li class="action">
<CopyButton
@class="link link-plain has-text-weight-semibold is-ghost"
@clipboardText={{codemirrorString}}
@success={{action (set-flash-message "JSON Copied!")}}
data-test-copy-button
>
Copy JSON
</CopyButton>
</li>
<li class="action">
{{#if showWrapButton}}
<button
class="link link-plain has-text-weight-semibold is-ghost {{if isWrapping "is-loading"}}"
type="button"
{{action "handleWrapClick"}}
data-test-wrap-button
disabled={{isWrapping}}
>
Wrap secret
</button>
{{else}}
<MaskedInput
@class="has-padding"
@displayOnly={{true}}
@allowCopy={{true}}
@value={{wrappedData}}
@success={{action "handleCopySuccess"}}
@error={{action "handleCopyError"}}
/>
{{/if}}
</li>
</ul>
</nav>
</D.content>
</BasicDropdown>
{{/unless}}
{{#if isV2}}
<ToolbarLink
@params={{array targetRoute model.id (query-params version=this.modelForData.version)}}
@data-test-secret-edit="true"
@replace={{true}}
@type="add"
>
Create new version
</ToolbarLink>
{{else}}
<ToolbarLink
@params={{array targetRoute model.id}}
@data-test-secret-edit="true"
@replace={{true}}
>
Edit secret
</ToolbarLink>
{{/if}}
{{/let}}
{{/if}}
</ToolbarActions>
</Toolbar>
{{partial partialName}}