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

<div
  ...attributes
  class="consul-intention-fieldsets"
>
  <fieldset disabled={{disabled}}>
    <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
              @disabled={{not create}}
              @options={{services}}
              @searchField="Name"
              @selected={{SourceName}}
              @searchPlaceholder="Type service name"
              @buildSuggestion={{action "createNewLabel" "Use a Consul Service called '{{term}}'"}}
              @showCreateWhen={{action "isUnique" services}}
              @onCreate={{action onchange "SourceName"}}
              @onChange={{action onchange "SourceName"}} as |service|>
                  {{#if (eq service.Name '*') }}
                    * (All Services)
                  {{else}}
                    {{service.Name}}
                  {{/if}}
          </PowerSelectWithCreate>
        {{#if create}}
          <em>Search for an existing service, or enter any Service name.</em>
        {{/if}}
        </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
              @disabled={{not create}}
              @options={{nspaces}}
              @selected={{SourceNS}}
              @searchPlaceholder="Type namespace name"
              @buildSuggestion={{action "createNewLabel" "Use a Consul Namespace called '{{term}}'"}}
              @showCreateWhen={{action "isUnique" nspaces}}
              @onCreate={{action onchange "SourceNS"}}
              @onChange={{action onchange "SourceNS"}} as |nspace|>
                {{#if (eq nspace.Name '*') }}
                  * (All Namespaces)
                {{else}}
                  {{nspace.Name}}
                {{/if}}
          </PowerSelectWithCreate>
        {{#if create}}
          <em>Search for an existing namespace, or enter any Namespace name.</em>
        {{/if}}
        </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
              @disabled={{not create}}
              @options={{services}}
              @searchField="Name"
              @selected={{DestinationName}}
              @searchPlaceholder="Type service name"
              @buildSuggestion={{action "createNewLabel" "Use a Consul Service called '{{term}}'"}}
              @showCreateWhen={{action "isUnique" services}}
              @onCreate={{action onchange "DestinationName"}}
              @onChange={{action onchange "DestinationName"}} as |service|>
                  {{#if (eq service.Name '*') }}
                    * (All Services)
                  {{else}}
                    {{service.Name}}
                  {{/if}}
          </PowerSelectWithCreate>
        {{#if create}}
          <em>Search for an existing service, or enter any Service name.</em>
        {{/if}}
        </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
              @disabled={{not create}}
              @options={{nspaces}}
              @searchField="Name"
              @selected={{DestinationNS}}
              @searchPlaceholder="Type namespace name"
              @buildSuggestion={{action "createNewLabel" "Use a future Consul Namespace called '{{term}}'"}}
              @showCreateWhen={{action "isUnique" nspaces}}
              @onCreate={{action onchange "DestinationNS"}}
              @onChange={{action onchange "DestinationNS"}} as |nspace|>
                  {{#if (eq nspace.Name '*') }}
                    * (All Namespaces)
                  {{else}}
                    {{nspace.Name}}
                  {{/if}}
          </PowerSelectWithCreate>
        {{#if create}}
          <em>For the destination, you may choose any namespace for which you have access.</em>
        {{/if}}
        </label>
{{/if}}
      </fieldset>
    </div>
    <div>
      <span class="label">Should this source connect to the destination?</span>
      <div role="radiogroup" class={{if item.error.Action ' has-error'}}>
        {{#each
          (array
            (hash
              intent="allow"
              header="Allow"
              body="The source service will be allowed to connect to the destination."
            )
            (hash
              intent="deny"
              header="Deny"
              body="The source service will not be allowed to connect to the destination."
            )
            (hash
              intent=""
              header="L7 Permissions"
              body="The source service may or may not connect to the destination service via unique permissions based on L7 criteria: path, header, or method."
            )
          )
      as |_action|}}
          <RadioCard
            class={{concat 'value-' _action.intent}}
            @value={{_action.intent}}
            @checked={{if (eq (or item.Action '') _action.intent) 'checked'}}
            @onchange={{action onchange}}
            @name="Action"
          as |radio|>
            <header>
              {{_action.header}}
            </header>
            <p>
              {{_action.body}}
            </p>
          </RadioCard>
        {{/each}}
      </div>
    </div>
  </fieldset>
{{#if (eq (or item.Action '') '')}}
  <fieldset class="permissions">
    <button type="button" onclick={{action (mut shouldShowPermissionForm) true}}>Add permission</button>
    <h2>Permissions</h2>
{{#if (gt item.Permissions.length 0) }}
    <div class="notice info">
      <p>
        Permissions are L7 attributes. If any of the following permissions match the request, the Intention will apply. Requests that fail to match any of the provided routes will do the opposite of the allow/deny action above.
      </p>
      <p>
        <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>
      </p>
    </div>
    <ConsulIntentionPermissionList
      @items={{item.Permissions}}
      @onclick={{queue (action (mut permission)) (action (mut shouldShowPermissionForm) true)}}
      @ondelete={{action 'delete' 'Permissions' item}}
    />
{{else}}
    <EmptyState>
      <BlockSlot @name="header">
        <h3>
          No permissions yet
        </h3>
      </BlockSlot>
      <BlockSlot @name="body">
        <p>
          Permissions intercept an Intention's traffic using L7 criteria, such as path prefixes and http headers.
        </p>
      </BlockSlot>
      <BlockSlot @name="actions">
        <li class="docs-link">
          <a href="{{env 'CONSUL_DOCS_URL'}}/commands/intention" rel="noopener noreferrer" target="_blank">Documentation</a>
        </li>
        <li class="learn-link">
          <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/connect" rel="noopener noreferrer" target="_blank">Read the guide</a>
        </li>
      </BlockSlot>
    </EmptyState>
{{/if}}
  </fieldset>
{{/if}}
  <fieldset>
    <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 onchange}} />
    </label>
  </fieldset>

{{#if shouldShowPermissionForm}}
  <ModalDialog
    class="consul-intention-permission-modal"
    @onclose={{queue (action (mut shouldShowPermissionForm) false) (action (mut permission) undefined)}}
  as |modal|>
    <BlockSlot @name="header">
      <h3>Edit Permission</h3>
    </BlockSlot>
    <BlockSlot @name="body">
      <ConsulIntentionPermissionForm
        @item={{permission}}
        @onsubmit={{action 'add' 'Permissions' item}}
      as |permissionForm|>
        <Ref @target={{this}} @name="permissionForm" @value={{permissionForm}} />
      </ConsulIntentionPermissionForm>
    </BlockSlot>
    <BlockSlot @name="actions">
      <button
        type="button"
        class="type-submit"
        disabled={{if (not this.permissionForm.isDirty) 'disabled'}}
        onclick={{queue (action this.permissionForm.submit) (action modal.close)}}
      >
        Save
      </button>
      <button
        type="button"
        class="type-cancel"
        onclick={{queue (action this.permissionForm.reset) (action modal.close)}}
      >
        Cancel
      </button>
    </BlockSlot>
  </ModalDialog>
{{/if}}

</div>