open-vault/ui/app/templates/components/transform-advanced-templating.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

62 lines
2.2 KiB
Handlebars

<ToggleButton
@toggleAttr={{"showForm"}}
@toggleTarget={{this}}
@openLabel="Advanced templating"
@closedLabel="Advanced templating"
data-test-toggle-advanced={{true}}
/>
{{#if this.showForm}}
<div class="box has-container is-fullwidth">
<h4 class="title is-5">Advanced templating</h4>
<p>
Using your template's regex as a starting point, you can specify which parts of your input to encode and decode. For
example, you may want to handle input formatting or only decode part of an input. For more information, see
<a
href="https://learn.hashicorp.com/tutorials/vault/transform#advanced-handling"
target="_blank"
rel="noopener noreferrer"
>
our documentation.
</a>
</p>
<div class="has-top-margin-l">
<RegexValidator
@value={{@model.pattern}}
@testInputLabel="Sample input"
@testInputSubText="Enter a sample input to match against your regex and identify capture groups. Optional."
@showGroups={{true}}
@onValidate={{this.setInputOptions}}
/>
</div>
<AutocompleteInput
@label="Encode format"
@subText="Use the groups above to define how the input will be encoded. Refer to each group with $N. This is optional; if not specified, pattern will be used."
@value={{@model.encodeFormat}}
@optionsTrigger="$"
@options={{this.inputOptions}}
@onChange={{fn (mut @model.encodeFormat)}}
class="has-top-margin-l"
data-test-encode-format
/>
<KvObjectEditor
@value={{@model.decodeFormats}}
@onChange={{fn (mut @model.decodeFormats)}}
@label="Decode formats"
@subText="Using the groups above, define how this data will be decoded. Multiple decode_formats can be used. Optional. If not specified, pattern will be used."
@keyPlaceholder="name"
class="has-top-margin-l"
data-test-kv-object-editor
as |kvObject kvData|
>
<AutocompleteInput
@value={{kvObject.value}}
@placeholder="format"
@optionsTrigger="$"
@options={{this.inputOptions}}
@onChange={{fn this.decodeFormatValueChange kvObject kvData}}
data-test-decode-format
/>
</KvObjectEditor>
</div>
{{/if}}