open-vault/ui/lib/core/addon/components/search-select-with-modal.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

109 lines
3.3 KiB
Handlebars

<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>