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

{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<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=(or @fallbackComponentPlaceholder @placeholder)
      id=@id
      selectLimit=@selectLimit
    }}
  {{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">
            <Hds::Button
              @icon="trash"
              @text="delete selection"
              @isIconOnly={{true}}
              @color="tertiary"
              data-test-selected-list-button="delete"
              {{on "click" (fn this.discardSelection selected)}}
            />
          </div>
        </li>
      {{/each}}
    </ul>
  {{/if}}

  {{#if this.showModal}}
    <Hds::Modal id="search-select-modal" @onClose={{fn (mut this.showModal) false}} as |M|>
      <M.Header data-test-modal-title>
        Create new
        {{singularize @id}}
      </M.Header>
      <M.Body>
        {{#if @modalSubtext}}
          <p class="has-bottom-margin-s" data-test-modal-subtext>
            {{@modalSubtext}}
          </p>
        {{/if}}
        {{! 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}}
      </M.Body>
    </Hds::Modal>
  {{/if}}
</div>