open-vault/ui/app/templates/components/transform-template-edit.hbs
Jordan Reimer e811821ac7
Transform Advanced Templating (#13908)
* updates regex-validator component to optionally show pattern input and adds capture groups support

* adds form-field-label component

* adds autocomplete-input component

* updates kv-object-editor component to yield block for value and glimmerizes

* updates transform template model

* adds transform-advanced-templating component

* updates form-field with child component changes

* updates transform template serializer to handle differences in regex named capture groups

* fixes regex-validator test

* adds changelog entry

* updates for pr review feedback

* reverts kv-object-editor guidFor removal
2022-02-07 13:07:53 -07:00

135 lines
4.3 KiB
Handlebars

<PageHeader as |p|>
<p.top>
<KeyValueHeader
@baseKey={{hash display=this.model.id id=this.model.idForNav}}
@path="vault.cluster.secrets.backend.list"
@mode={{this.mode}}
@root={{this.root}}
@showCurrent={{true}}
/>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-secret-header="true">
{{#if (eq this.mode "create")}}
Create Template
{{else if (eq this.mode "edit")}}
Edit Template
{{else}}
Template
<code>{{this.model.id}}</code>
{{/if}}
</h1>
</p.levelLeft>
</PageHeader>
{{#if (eq this.mode "show")}}
<Toolbar>
<ToolbarActions>
{{#if this.capabilities.canDelete}}
<button type="button" class="toolbar-link" onclick={{action "delete"}} data-test-transformation-template-delete>
Delete template
</button>
<div class="toolbar-separator"></div>
{{/if}}
{{#if this.capabilities.canUpdate}}
<ToolbarSecretLink
@secret={{concat this.model.idPrefix this.model.id}}
@mode="edit"
@data-test-edit-link={{true}}
@replace={{true}}
>
Edit template
</ToolbarSecretLink>
{{/if}}
</ToolbarActions>
</Toolbar>
{{/if}}
{{#if (or (eq this.mode "edit") (eq this.mode "create"))}}
<form onsubmit={{action "createOrUpdate" this.mode}}>
<div class="box is-sideless is-fullwidth is-marginless">
<MessageError @model={{this.model}} />
<NamespaceReminder @mode={{this.mode}} @noun="transform template" />
{{#each this.model.writeAttrs as |attr|}}
{{#if (and (eq attr.name "name") (eq this.mode "edit"))}}
<label for={{attr.name}} class="is-label">
{{attr.options.label}}
</label>
{{#if attr.options.subText}}
<p class="sub-text">{{attr.options.subText}}</p>
{{/if}}
<input
data-test-input={{attr.name}}
id={{attr.name}}
autocomplete="off"
spellcheck="false"
value={{or (get this.model attr.name) attr.options.defaultValue}}
readonly={{true}}
class="field input is-readOnly"
type={{attr.type}}
/>
{{else}}
{{#if (eq attr.name "alphabet")}}
<TransformAdvancedTemplating @model={{this.model}} />
{{/if}}
<FormField data-test-field @attr={{attr}} @model={{this.model}} />
{{/if}}
{{/each}}
</div>
<div class="field is-grouped-split box is-fullwidth is-bottomless">
<div class="control">
<button
type="submit"
disabled={{this.buttonDisabled}}
class="button is-primary"
data-test-template-transform-create={{true}}
>
{{#if (eq this.mode "create")}}
Create template
{{else if (eq this.mode "edit")}}
Save
{{/if}}
</button>
<SecretLink
@mode={{if (eq this.mode "create") "list" "show"}}
@class="button"
@secret={{concat this.model.idPrefix this.model.id}}
>
Cancel
</SecretLink>
</div>
</div>
</form>
{{else}}
{{#if this.model.displayErrors}}
<div class="has-top-margin-s">
<MessageError @model={{this.model}} />
</div>
{{/if}}
<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
{{#each this.model.readAttrs as |attr|}}
{{#let (capitalize (or attr.options.label (humanize (dasherize attr.name)))) as |label|}}
{{#if (eq attr.name "decodeFormats")}}
{{#if (not (is-empty-value this.model.decodeFormats))}}
<InfoTableRow @label={{label}}>
<div>
{{#each-in this.model.decodeFormats as |key value|}}
<div class="transform-decode-formats">
<p class="is-label has-text-grey-400">{{key}}</p>
<p>{{value}}</p>
</div>
{{/each-in}}
</div>
</InfoTableRow>
{{/if}}
{{else}}
<InfoTableRow
@label={{label}}
@value={{get this.model attr.name}}
class={{if (eq attr.name "pattern") "transform-pattern-text"}}
/>
{{/if}}
{{/let}}
{{/each}}
</div>
{{/if}}