consul/ui-v2/app/templates/components/policy-form.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

77 lines
3.3 KiB
Handlebars

{{yield}}
<fieldset>
{{#yield-slot 'template'}}
{{else}}
<header>
Policy or service identity?
</header>
<p>
A Service Identity is default policy with a configurable service name. This saves you some time and effort you're using Consul for Connect features.
</p>
{{! this should use radio-group }}
<div role="radiogroup" class={{if item.error.Type ' has-error'}}>
{{#each templates as |template|}}
<label>
<span>{{template.name}}</span>
<input data-test-radiobutton={{concat 'template_' template.template}} type="radio" name="{{name}}[template]" value={{template.template}} checked={{eq item.template template.template}} onchange={{action (changeset-set item 'template') value='target.value'}}/>
</label>
{{/each}}
</div>
{{/yield-slot}}
<label class="type-text{{if (and item.error.Name (not item.isPristine)) ' has-error'}}">
<span>Name</span>
<input type="text" value={{item.Name}} name="{{name}}[Name]" autofocus="autofocus" oninput={{action 'change'}} />
<em>
Maximum 128 characters. May only include letters (uppercase and/or lowercase) and/or numbers. Must be unique.
</em>
{{#if (and item.error.Name (not item.isPristine))}}
<strong>{{item.error.Name.validation}}</strong>
{{/if}}
</label>
<label class="type-text" data-test-rules>
<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' class=(if item.error.Rules 'error') name=(concat name '[Rules]') value=item.Rules onkeyup=(action 'change' (concat name '[Rules]'))}}
{{#if item.error.Rules}}
<strong>{{item.error.Rules.validation}}</strong>
{{/if}}
{{else}}
{{#code-editor readonly=true name=(concat name '[Rules]') syntax='hcl' oninput=(action 'change' (concat name '[Rules]'))}}
{{~component 'service-identity' name=item.Name~}}
{{/code-editor}}
{{/if}}
</label>
<div class="type-toggle">
<span>Valid datacenters</span>
<label>
<input type="checkbox" name="{{name}}[isScoped]" checked={{if (not isScoped) 'checked' }} onchange={{action 'change'}} />
<span>All</span>
</label>
</div>
{{#if isScoped }}
<div class="checkbox-group" role="group">
{{#each datacenters as |dc| }}
<label class="type-checkbox">
<input type="checkbox" name="{{name}}[Datacenters]" value={{dc.Name}} checked={{if (contains dc.Name item.Datacenters) 'checked' }} onchange={{action 'change'}} />
<span>{{dc.Name}}</span>
</label>
{{/each}}
{{#each item.Datacenters as |dc| }}
{{#if (not (find-by 'Name' dc datacenters))}}
<label class="type-checkbox">
<input type="checkbox" name="{{name}}[Datacenters]" value={{dc}} checked="checked" onchange={{action 'change'}} />
<span>{{dc}}</span>
</label>
{{/if}}
{{/each}}
</div>
{{/if}}
{{#if (eq item.template '') }}
<label class="type-text">
<span>Description (Optional)</span>
<textarea name="{{name}}[Description]" value={{item.Description}} oninput={{action 'change'}}></textarea>
</label>
{{/if}}
</fieldset>