open-nomad/ui/app/components/secure-variable-form.hbs
Phil Renaud 311d9d1cda variable index header and deletion hook (#13302)
* variable index header and deletion hook

* Some visual improvements to edit header and back button

* Mirage fixtures for variables

* Deletion flow test

* Account for disabled state of add-more button

* Transition destination changes after design chat

* Simplified parent folder path by adding to variable model

* Lint cleanup

* test update to reflect path redirect on delete

* No longer have to re-traverse to a deleted var folder after deletion, tests updated
2022-07-11 13:34:05 -04:00

83 lines
2.3 KiB
Handlebars

<form
class="new-secure-variables"
{{on "submit" this.save}}
autocomplete="off"
>
{{!-- TODO: {{if this.parseError 'is-danger'}} on inputs --}}
<div>
<label>
<span>Path</span>
<Input
@type="text"
@value={{@model.path}}
placeholder="/path/to/variable"
class="input path-input {{if this.duplicatePathWarning "error"}}"
disabled={{not @model.isNew}}
{{on "input" this.validatePath}}
{{autofocus}}
/>
</label>
{{#if this.duplicatePathWarning}}
<p class="duplicate-path-error help is-danger">
There is already a Secure Variable located at {{@model.path}}.
<br />
Please choose a different path, or <LinkTo @route="variables.variable.edit" @model={{this.duplicatePathWarning.path}}>edit the existing Secure Variable</LinkTo>.
</p>
{{/if}}
</div>
{{#each @model.keyValues as |entry iter|}}
<div class="key-value">
<label>
<span>Key</span>
<Input
@type="text"
@value={{entry.key}}
class="input"
{{autofocus ignore=(eq iter 0)}}
/>
</label>
<label class="value-label">
<span>Value
</span>
<Input
@type={{this.valueFieldType}}
@value={{entry.value}}
class="input value-input"
autocomplete="new-password" {{!-- prevent auto-fill --}}
/>
<button
class="show-hide-values button is-light"
type="button"
tabindex="-1"
{{on "click" this.toggleShowHide}}
>
<FlightIcon
@name={{if this.shouldHideValues "eye-off" "eye"}}
@title={{if this.shouldHideValues "Show Values" "Hide Values"}}
/>
</button>
</label>
{{#if (eq entry @model.keyValues.lastObject)}}
<button
{{on "click" this.appendRow}}
class="add-more button is-info is-inverted"
type="button"
disabled={{not (and entry.key entry.value)}}
>Add More</button>
{{else}}
<button
{{on "click" (action this.deleteRow entry)}}
class="delete-row button is-danger is-inverted" type="button">Delete</button>
{{/if}}
</div>
{{/each}}
<footer>
<button
disabled={{this.shouldDisableSave}}
class="button is-primary" type="submit">Save {{pluralize 'Variable' @model.keyValues.length}}</button>
</footer>
</form>