open-vault/ui/lib/core/addon/components/search-select.hbs
claire bontempo f58990677f
UI: Implement new policy SS + modal designs (#17749)
* refactor ss+modal to accept multiple models

* create policy form

* cleanup and fix test

* add tabs to policy modal form

* add search select with modal to entity form

* update group form;

* allow modal to fit-content

* add changelog

* add check for policy create ability

* add id so tests pass

* filter out root option

* fix test

* add cleanup method

* add ACL policy link

* cleanup from comments

* refactor sending action to parent

* refactor, data down actions up!

* cleanup comments

* form field refactor

* add ternary to options

* update tests

* Remodel component structure for clearer logic

Includes fixing the wizard

* address comments

* cleanup args

* refactor inline oidc assignment form

* add line break

* cleanup comments

* fix tests

* add policy template to ss+modal test

* cleanup =true from test

* final cleanup!!!!!!

* actual final cleanup

* fix typo, please be done

Co-authored-by: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
2022-11-18 17:29:04 -08:00

100 lines
3.1 KiB
Handlebars

<div
{{did-insert (perform this.fetchOptions)}}
{{did-update (perform this.fetchOptions) (or @options @models)}}
id={{@id}}
class="field search-select {{if @displayInherit 'display-inherit'}}"
data-test-component="search-select"
...attributes
>
{{#if this.shouldUseFallback}}
{{component
@fallbackComponent
id=@id
label=@label
subText=@subText
onChange=@onChange
inputValue=@inputValue
helpText=@helpText
placeholder=@placeholder
}}
{{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 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}}
<small class="search-select-list-key" data-test-smaller-id="true">
{{get option this.idKey}}
</small>
{{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}}>
{{get selected this.idKey}}
</small>
{{else}}
<div>
{{selected.id}}
{{#if @wildcardLabel}}
{{#if (is-wildcard-string selected.id)}}
{{#let (filter-wildcard selected this.allOptions) as |wildcardCount|}}
<span class="tag is-light has-text-grey-dark" data-test-count={{wildcardCount}}>
includes
{{wildcardCount}}
{{if (eq wildcardCount 1) @wildcardLabel (pluralize @wildcardLabel)}}
</span>
{{/let}}
{{/if}}
{{/if}}
</div>
{{/if}}
<div class="control">
{{#if selected.addTooltip}}
<InfoTooltip>
{{selected.addTooltip}}
</InfoTooltip>
{{/if}}
<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 (has-block)}}
{{yield}}
{{/if}}
{{/if}}
</div>