consul/ui-v2/app/components/policy-selector/index.hbs

<ChildSelector @repo={{repo}} @dc={{dc}} @nspace={{nspace}} @type="policy" @placeholder="Search for policy" @items={{items}}>
  {{yield}}
  <BlockSlot @name="label">
    Apply an existing policy
  </BlockSlot>
  <BlockSlot @name="create">
    {{#yield-slot name='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}}
      <ModalDialog
        data-test-policy-form
        @onopen={{action "open"}}
        @name="new-policy-toggle"
      >
        <BlockSlot @name="header">
          <h2>New Policy</h2>
        </BlockSlot>
        <BlockSlot @name="body">
          <PolicyForm @form={{form}} @dc={{dc}} @allowServiceIdentity={{allowServiceIdentity}} />
        </BlockSlot>
        <BlockSlot @name="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>
        </BlockSlot>
      </ModalDialog>
    {{/yield-slot}}
  </BlockSlot>
  <BlockSlot @name="option" as |option|>
    {{option.Name}}
  </BlockSlot>
  <BlockSlot @name="set">
    <TabularDetails
        data-test-policies
        @onchange={{action 'loadItem'}}
        @items={{sort-by 'CreateTime:desc' 'Name:asc' items}} as |item index|
    >
      <BlockSlot @name="header">
        <th>Name</th>
        <th>Datacenters</th>
      </BlockSlot>
      <BlockSlot @name="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>
      </BlockSlot>
      <BlockSlot @name="details">
          <label class="type-text">
            <span>Rules <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a></span>
            {{#if (eq item.template '')}}
              <CodeEditor @syntax="hcl" @readonly={{true}} @value={{item.Rules}} />
            {{else}}
              <CodeEditor @syntax="hcl" @readonly={{true}}>
                {{~component 'service-identity' name=item.Name~}}
              </CodeEditor>
            {{/if}}
          </label>
          <div>
            <ConfirmationDialog @message="Are you sure you want to remove this policy from this token?">
              <BlockSlot @name="action" as |confirm|>
                <button data-test-delete type="button" class="type-delete" {{action confirm 'remove' item items}}>Remove</button>
              </BlockSlot>
              <BlockSlot @name="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>
              </BlockSlot>
            </ConfirmationDialog>
          </div>
      </BlockSlot>
    </TabularDetails>

  </BlockSlot>
</ChildSelector>