open-vault/ui/lib/core/addon/components/search-select-with-modal.hbs

<div
  {{did-insert (perform this.fetchOptions)}}
  id={{@id}}
  class="field search-select {{if @displayInherit 'display-inherit'}}"
  data-test-search-select-with-modal
  ...attributes
>
  {{#if this.shouldUseFallback}}
    {{component
      @fallbackComponent
      label=@label
      subText=@subText
      onChange=@onChange
      inputValue=@inputValue
      helpText=@helpText
      placeholder=@placeholder
      id=@id
    }}
  {{else}}
    {{#if @label}}
      <label for={{@id}} class={{or @labelClass "is-label"}} data-test-field-label>
        {{@label}}
        {{#if @helpText}}
          <InfoTooltip>{{@helpText}}</InfoTooltip>
        {{/if}}
      </label>
    {{/if}}
    {{#if @subText}}
      <p data-test-modal-subtext class="sub-text">{{@subText}}</p>
    {{/if}}
    {{#unless this.hidePowerSelect}}
      <PowerSelect
        @eventType="click"
        @placeholder={{@placeholder}}
        @searchEnabled={{true}}
        @search={{this.searchAndSuggest}}
        @options={{this.dropdownOptions}}
        @onChange={{this.selectOrCreate}}
        @placeholderComponent={{component "search-select-placeholder"}}
        @verticalPosition="below"
        as |option|
      >
        {{#if this.shouldRenderName}}
          {{option.name}}
          {{#unless option.__isSuggestion__}}
            <small class="search-select-list-key" data-test-smaller-id="true">
              {{option.id}}
            </small>
          {{/unless}}
        {{else}}
          {{option.id}}
        {{/if}}
      </PowerSelect>
    {{/unless}}
    <ul class="search-select-list">
      {{#each this.selectedOptions as |selected index|}}
        <li class="search-select-list-item" data-test-selected-option={{index}}>
          {{#if this.shouldRenderName}}
            {{selected.name}}
            <small class="search-select-list-key" data-test-smaller-id={{index}}>
              {{selected.id}}
            </small>
          {{else}}
            <div>
              {{selected.id}}
            </div>
          {{/if}}
          <div class="control">
            <button
              type="button"
              class="button is-ghost"
              data-test-selected-list-button="delete"
              {{on "click" (fn this.discardSelection selected)}}
            >
              <Icon @name="trash" class="has-text-grey" />
            </button>
          </div>
        </li>
      {{/each}}
    </ul>

  {{/if}}

  {{! wait until user has selected 'create a new item' before rendering modal}}
  {{#if this.nameInput}}
    <Modal
      @title="Create new {{singularize @id}}"
      @onClose={{action (mut this.showModal) false}}
      @isActive={{this.showModal}}
      @type="info"
      @showCloseButton={{false}}
    >
      <section class="modal-card-body">
        {{#if @modalSubtext}}
          <p class="has-bottom-margin-s" data-test-modal-subtext>
            {{@modalSubtext}}
          </p>
        {{/if}}
        {{#if (has-block)}}
          {{yield}}
        {{else}}
          {{! dynamically render template from modal-form/ folder}}
          {{! form must receive an @onSave and @onCancel arg that executes the callback}}
          {{component @modalFormTemplate nameInput=this.nameInput onSave=this.resetModal onCancel=this.resetModal}}
        {{/if}}
      </section>
    </Modal>
  {{/if}}
</div>