consul/ui-v2/app/components/consul-intention-form/index.hbs

<form onsubmit={{action 'submit' _item}}>
  <fieldset>
    <div role="group">
      <fieldset>
        <h2>Source</h2>
        <label data-test-source-element class="type-select{{if _item.error.SourceName ' has-error'}}">
          <span>Source Service</span>
          <PowerSelectWithCreate
              @options={{_services}}
              @searchField="Name"
              @selected={{SourceName}}
              @searchPlaceholder="Type service name"
              @buildSuggestion={{action "createNewLabel" "Use a Consul Service called '{{term}}'"}}
              @showCreateWhen={{action "isUnique"}}
              @onCreate={{action "change" "SourceName"}}
              @onChange={{action "change" "SourceName"}} as |service|>
                  {{#if (eq service.Name '*') }}
                    * (All Services)
                  {{else}}
                    {{service.Name}}
                  {{/if}}
          </PowerSelectWithCreate>
          <em>Search for an existing service, or enter any Service name.</em>
        </label>
  {{#if (env 'CONSUL_NSPACES_ENABLED')}}
        <label data-test-source-nspace class="type-select{{if _item.error.SourceNS ' has-error'}}">
          <span>Source Namespace</span>
          <PowerSelectWithCreate
              @options={{_nspaces}}
              @searchField="Name"
              @selected={{SourceNS}}
              @searchPlaceholder="Type namespace name"
              @buildSuggestion={{action "createNewLabel" "Use a Consul Namespace called '{{term}}'"}}
              @showCreateWhen={{action "isUnique"}}
              @onCreate={{action "change" "SourceNS"}}
              @onChange={{action "change" "SourceNS"}} as |nspace|>
                {{#if (eq nspace.Name '*') }}
                  * (All Namespaces)
                {{else}}
                  {{nspace.Name}}
                {{/if}}
          </PowerSelectWithCreate>
          <em>Search for an existing namespace, or enter any Namespace name.</em>
        </label>
{{/if}}
      </fieldset>
      <fieldset>
        <h2>Destination</h2>
        <label data-test-destination-element class="type-select{{if _item.error.DestinationName ' has-error'}}">
          <span>Destination Service</span>
          <PowerSelectWithCreate
              @options={{_services}}
              @searchField="Name"
              @selected={{DestinationName}}
              @searchPlaceholder="Type service name"
              @buildSuggestion={{action "createNewLabel" "Use a Consul Service called '{{term}}'"}}
              @showCreateWhen={{action "isUnique"}}
              @onCreate={{action "change" "DestinationName"}}
              @onChange={{action "change" "DestinationName"}} as |service|>
                  {{#if (eq service.Name '*') }}
                    * (All Services)
                  {{else}}
                    {{service.Name}}
                  {{/if}}
          </PowerSelectWithCreate>
          <em>Search for an existing service, or enter any Service name.</em>
        </label>
  {{#if (env 'CONSUL_NSPACES_ENABLED')}}
        <label data-test-destination-nspace class="type-select{{if _item.error.DestinationNS ' has-error'}}">
          <span>Destination Namespace</span>
          <PowerSelectWithCreate
              @options={{_nspaces}}
              @searchField="Name"
              @selected={{DestinationNS}}
              @searchPlaceholder="Type namespace name"
              @buildSuggestion={{action "createNewLabel" "Use a future Consul Namespace called '{{term}}'"}}
              @showCreateWhen={{action "isUnique"}}
              @onCreate={{action "change" "DestinationNS"}}
              @onChange={{action "change" "DestinationNS"}} as |nspace|>
                  {{#if (eq nspace.Name '*') }}
                    * (All Namespaces)
                  {{else}}
                    {{nspace.Name}}
                  {{/if}}
          </PowerSelectWithCreate>
          <em>For the destination, you may choose any namespace for which you have access.</em>
        </label>
{{/if}}
      </fieldset>
    </div>
    <div role="radiogroup" class={{if _item.error.Action ' has-error'}}>
      {{#each (array 'allow' 'deny') as |intent|}}
        <label>
          <span>{{ capitalize intent }}</span>
          <input type="radio" name="Action" value="{{intent}}" checked={{if (eq _item.Action intent) 'checked'}} onchange={{ action 'change' }}/>
        </label>
      {{/each}}
    </div>
    <label class="type-text{{if _item.error.Description ' has-error'}}">
      <span>Description (Optional)</span>
      <input type="text" name="Description" value="{{_item.Description}}" placeholder="Description (Optional)" onchange={{action 'change'}} />
    </label>
  </fieldset>
  <div>
{{#if _item.isNew }}
    <button type="submit" disabled={{if (or _item.isPristine _item.isInvalid) 'disabled'}}>Save</button>
{{ else }}
    <button type="submit" disabled={{if _item.isInvalid 'disabled'}}>Save</button>
{{/if}}
    <button type="reset" onclick={{action oncancel _item}}>Cancel</button>
{{# if (and _item.ID (not-eq _item.ID 'anonymous')) }}
    <ConfirmationDialog @message="Are you sure you want to delete this Intention?">
      <BlockSlot @name="action" as |confirm|>
        <button data-test-delete type="button" class="type-delete" {{action confirm ondelete _item}}>Delete</button>
      </BlockSlot>
      <BlockSlot @name="dialog" as |execute cancel message|>
        <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
      </BlockSlot>
    </ConfirmationDialog>
{{/if}}
  </div>
</form>