open-vault/ui/app/components/policy-form.hbs
claire bontempo 56442f673d
ui: refactor text file component (#18458)
* wip tests

* Move text-file to addon

* rename fileName to filename, initial cleanup of text-fil

* rename args, rename test selector

* fix eye-con, remove enterAsText from file object

* add tests

* move files back to original location

* rename files via git for git diff

* adjsut test

* Revert "wip tests"

This reverts commit 63716a1e647a0b01236d34322837456ef3e9db43.

* fix policy form input

* cleanup conditional

* add bottom margin

* add element id

* change arg name

* add text area input test

* add upload test to policy form

Co-authored-by: Chelsea Shaw <cshaw@hashicorp.com>
2022-12-19 23:54:59 +00:00

108 lines
3.6 KiB
Handlebars

<form {{on "submit" (perform this.save)}} data-test-policy-form>
<div class="box is-bottomless is-fullwidth is-marginless">
<MessageError @errorMessage={{this.errorBanner}} />
<NamespaceReminder @mode={{if @model.isNew "create" "edit"}} @noun="policy" />
{{#if @model.isNew}}
<div class="field">
<label for="policy-name" class="is-label">Name</label>
<div class="control">
<Input
@type="text"
@value={{lowercase @model.name}}
id="policy-name"
class="input"
{{on "input" this.setModelName}}
data-test-policy-input="name"
/>
</div>
</div>
{{/if}}
<div class="field">
{{#if @model.isNew}}
<Toolbar>
<label class="is-label">Policy</label>
<ToolbarActions>
<div class="toolbar-separator"></div>
<div class="control is-flex">
<Input
id="fileUploadToggle"
@type="checkbox"
name="fileUploadToggle"
class="switch is-rounded is-success is-small"
@checked={{this.showFileUpload}}
{{on "change" (fn (mut this.showFileUpload) (not this.showFileUpload))}}
data-test-policy-edit-toggle
/>
<label for="fileUploadToggle">Upload file</label>
</div>
</ToolbarActions>
</Toolbar>
{{#if this.showFileUpload}}
<TextFile @uploadOnly={{true}} @onChange={{this.setPolicyFromFile}} />
{{else}}
<JsonEditor
@title="Policy"
@helpText="You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field"
@showToolbar={{false}}
@value={{@model.policy}}
@valueUpdated={{action (mut @model.policy)}}
@mode="ruby"
@extraKeys={{hash Shift-Enter=(perform this.save)}}
data-test-policy-editor
/>
{{/if}}
{{else}}
{{! EDITING - no file upload toggle}}
<JsonEditor
@title="Policy"
@helpText="You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field"
@value={{@model.policy}}
@valueUpdated={{action (mut @model.policy)}}
@mode="ruby"
@extraKeys={{hash Shift-Enter=(perform this.save)}}
data-test-policy-editor
/>
{{/if}}
</div>
{{#each @model.additionalAttrs as |attr|}}
<FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
{{/each}}
</div>
<div class="has-bottom-margin-m">
<p>
More information about
{{uppercase @model.policyType}}
policies can be found
<DocLink
@path={{if
(eq @model.policyType "acl")
"/vault/docs/concepts/policies#capabilities"
"/vault/tutorials/policies/sentinel#role-governing-policies-rgps"
}}
>
here.
</DocLink>
</p>
</div>
<div class="field is-grouped box is-fullwidth is-bottomless">
<div class="control">
<button
type="submit"
class="button is-primary {{if this.save.isRunning 'is-loading'}}"
disabled={{this.save.isRunning}}
data-test-policy-save
>
{{if @model.isNew "Create policy" "Save"}}
</button>
<button
type="button"
class="button has-left-margin-s"
disabled={{this.save.isRunning}}
{{on "click" this.cancel}}
data-test-policy-cancel
>
Cancel
</button>
</div>
</div>
</form>