consul/ui-v2/app/templates/components/policy-selector.hbs
John Cowen 9013e53ebc
ui: Ensures nested policy forms are reset properly (#5838)
1. All {{ivy-codemirror}} components need 'refreshing' when they become
visible via our own `didAppear` method on the `{{code-editor}}`
component

(also see:)
- https://github.com/hashicorp/consul/pull/4190#discussion_r193270223
- 73db111db8 (r225264296)

2. On initial investigation, it looks like the component we are using
for the code editor doesn't distinguish between setting its `value`
programatically and a `keyup` event, i.e. an interaction from the user.
We currently pretend that whenever its `value` changes, it is a `keyup`
event. This means that when we reset the `value` to `""`
programmatically for form resetting purposes, a 'pretend keyup' event
would also be fired, which would in turn kick off the validation, which
would fail and show an error message for empty values in other fields of
the form - something that is perfectly valid if you haven't typed
anything yet. We solved this by checking for `isPristine` on fields that
are allowed to be empty before you have typed anything.
2019-06-04 15:57:35 +01:00

90 lines
3.5 KiB
Handlebars

{{#child-selector repo=repo dc=dc type="policy" placeholder="Search for policy" items=items}}
{{yield}}
{{#block-slot 'label'}}
Apply an existing policy
{{/block-slot}}
{{#block-slot 'create'}}
{{#yield-slot 'trigger'}}
{{yield}}
{{else}}
<label class="type-dialog" for="new-policy-toggle">
<span>Create new policy</span>
</label>
{{!TODO: potentially call trigger something else}}
{{!the modal has to go here so that if you provide a slot to trigger it doesn't get rendered}}
{{#modal-dialog data-test-policy-form onopen=(action 'open') name="new-policy-toggle"}}
{{#block-slot 'header'}}
<h2>New Policy</h2>
{{/block-slot}}
{{#block-slot 'body'}}
{{policy-form form=form dc=dc}}
{{/block-slot}}
{{#block-slot 'actions' as |close|}}
<button type="submit" {{action 'save' item items (queue (action close) (action 'reset'))}} disabled={{if (or item.isSaving item.isPristine item.isInvalid) 'disabled'}}>
{{#if item.isSaving }}
<div class="progress indeterminate"></div>
{{/if}}
<span>Create and apply</span>
</button>
<button type="reset" disabled={{if item.isSaving 'disabled'}} {{action (queue (action close) (action 'reset'))}}>Cancel</button>
{{/block-slot}}
{{/modal-dialog}}
{{/yield-slot}}
{{/block-slot}}
{{#block-slot 'option' as |option|}}
{{option.Name}}
{{/block-slot}}
{{#block-slot 'set'}}
{{#tabular-details
data-test-policies
onchange=(action 'loadItem')
items=(sort-by 'CreateTime:desc' 'Name:asc' items) as |item index|
}}
{{#block-slot 'header'}}
<th>Name</th>
<th>Datacenters</th>
{{/block-slot}}
{{#block-slot 'row'}}
<td class={{policy/typeof item}}>
{{#if item.ID }}
<a href={{href-to 'dc.acls.policies.edit' item.ID}}>{{item.Name}}</a>
{{else}}
<a name={{item.Name}}>{{item.Name}}</a>
{{/if}}
</td>
<td>
{{if (not item.isSaving) (join ', ' (policy/datacenters item)) 'Saving...'}}
</td>
{{/block-slot}}
{{#block-slot 'details'}}
<label class="type-text">
<span>Rules <a href="{{env 'CONSUL_DOCUMENTATION_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a></span>
{{#if (eq item.template '')}}
{{code-editor syntax='hcl' readonly=true value=item.Rules}}
{{else}}
{{#code-editor syntax='hcl' readonly=true}}
{{~component 'service-identity' name=item.Name~}}
{{/code-editor}}
{{/if}}
</label>
<div>
{{#confirmation-dialog message='Are you sure you want to remove this policy from this token?'}}
{{#block-slot 'action' as |confirm|}}
<button data-test-delete type="button" class="type-delete" {{action confirm 'remove' item items}}>Remove</button>
{{/block-slot}}
{{#block-slot 'dialog' as |execute cancel message|}}
<p>
{{message}}
</p>
<button type="button" class="type-delete" {{action execute}}>Confirm remove</button>
<button type="button" class="type-cancel" {{action cancel}}>Cancel</button>
{{/block-slot}}
{{/confirmation-dialog}}
</div>
{{/block-slot}}
{{/tabular-details}}
{{/block-slot}}
{{/child-selector}}