UI/vault 7196/search select with modal (#16456)
* add validator * generate search select with modal component * finish tests * remove store from test * address comments, add tests
This commit is contained in:
claire bontempo
GitHub
parent
e0961cd2c4
commit
9ea4c8b037
|
|
@ -20,4 +20,9 @@ export const number = (value, { nullable = false } = {}) => {
|
|||
return !isNaN(value);
|
||||
};
|
||||
|
||||
export default { presence, length, number };
|
||||
export const containsWhiteSpace = (value) => {
|
||||
let validation = new RegExp('\\s', 'g'); // search for whitespace
|
||||
return !validation.test(value);
|
||||
};
|
||||
|
||||
export default { presence, length, number, containsWhiteSpace };
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
<div {{did-insert this.fetchOptions}} ...attributes data-test-search-select-with-modal>
|
||||
{{#if this.shouldUseFallback}}
|
||||
{{component
|
||||
@fallbackComponent
|
||||
label=(or @label @subLabel)
|
||||
subText=@subText
|
||||
onChange=@onChange
|
||||
inputValue=@inputValue
|
||||
helpText=@helpText
|
||||
placeHolder=@placeHolder
|
||||
id=@id
|
||||
}}
|
||||
{{else}}
|
||||
{{#if @label}}
|
||||
<label for={{@id}} class="is-label" data-test-field-label>
|
||||
{{@label}}
|
||||
{{#if @helpText}}
|
||||
<InfoTooltip>{{@helpText}}</InfoTooltip>
|
||||
{{/if}}
|
||||
</label>
|
||||
{{/if}}
|
||||
{{#if @subText}}
|
||||
<p class="sub-text">{{@subText}}</p>
|
||||
{{/if}}
|
||||
{{! template-lint-configure simple-unless "warn" }}
|
||||
{{#unless (gte this.selectedOptions.length @selectLimit)}}
|
||||
<PowerSelect
|
||||
@eventType="click"
|
||||
@placeholder={{@placeholder}}
|
||||
@searchEnabled={{true}}
|
||||
@search={{this.searchAndSuggest}}
|
||||
@options={{this.allOptions}}
|
||||
@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">
|
||||
{{option.id}}
|
||||
</small>
|
||||
{{else}}
|
||||
{{option.id}}
|
||||
{{/if}}
|
||||
</PowerSelect>
|
||||
{{/unless}}
|
||||
<ul class="search-select-list">
|
||||
{{#each this.selectedOptions as |selected|}}
|
||||
<li class="search-select-list-item" data-test-selected-option="true">
|
||||
{{#if this.shouldRenderName}}
|
||||
{{selected.name}}
|
||||
<small class="search-select-list-key" data-test-smaller-id="true">
|
||||
{{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}}
|
||||
{{#if this.newModelRecord}}
|
||||
<Modal
|
||||
@title="Create new {{@id}}"
|
||||
@onClose={{action (mut this.showModal) false}}
|
||||
@isActive={{this.showModal}}
|
||||
@type="info"
|
||||
@showCloseButton={{false}}
|
||||
>
|
||||
<section class="modal-card-body">
|
||||
<p class="has-bottom-margin-s" data-test-modal-subtext>
|
||||
{{@modalSubtext}}
|
||||
</p>
|
||||
{{#if (has-block)}}
|
||||
{{yield}}
|
||||
{{else}}
|
||||
{{! dynamically render passed in form component }}
|
||||
{{! form must receive an @onSave and @onCancel arg that executes the callback}}
|
||||
{{component
|
||||
@modalFormComponent
|
||||
model=this.newModelRecord
|
||||
onSave=this.resetModal
|
||||
onCancel=this.resetModal
|
||||
isInline=true
|
||||
}}
|
||||
{{/if}}
|
||||
</section>
|
||||
</Modal>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
import Component from '@glimmer/component';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { action } from '@ember/object';
|
||||
import { tracked } from '@glimmer/tracking';
|
||||
import { singularize } from 'ember-inflector';
|
||||
import { resolve } from 'rsvp';
|
||||
import { filterOptions, defaultMatcher } from 'ember-power-select/utils/group-utils';
|
||||
|
||||
/**
|
||||
* @module SearchSelectWithModal
|
||||
* The `SearchSelectWithModal` is an implementation of the [ember-power-select](https://github.com/cibernox/ember-power-select) used for form elements where options come dynamically from the API. It can only accept a single model.
|
||||
* It renders a passed in form component so records can be created inline, via a modal that pops up after clicking "Create new <id>" from the dropdown menu.
|
||||
* **!! NOTE: any form passed must be able to receive an @onSave and @onCancel arg so that the modal will close properly. See `oidc/client-form.hbs` that renders a modal for the `oidc/assignment-form.hbs` as an example.
|
||||
* @example
|
||||
* <SearchSelectWithModal
|
||||
* @id="assignments"
|
||||
* @model="oidc/assignment"
|
||||
* @label="assignment name"
|
||||
* @labelClass="is-label"
|
||||
* @subText="Search for an existing assignment, or type a new name to create it."
|
||||
* @inputValue={{map-by "id" @model.assignments}}
|
||||
* @onChange={{this.handleSearchSelect}}
|
||||
* {{! since this is the "limited" radio select option we do not want to include 'allow_all' }}
|
||||
* @excludeOptions={{array "allow_all"}}
|
||||
* @fallbackComponent="string-list"
|
||||
* @modalFormComponent="oidc/assignment-form"
|
||||
* @modalSubtext="Use assignment to specify which Vault entities and groups are allowed to authenticate."
|
||||
* />
|
||||
*
|
||||
* @param {string} id - the model's attribute for the form field, will be interpolated into create new text: `Create new ${singularize(this.args.id)}`
|
||||
* @param {Array} model - model type to fetch from API (can only be a single model)
|
||||
* @param {string} label - Label that appears above the form field
|
||||
* @param {string} [helpText] - Text to be displayed in the info tooltip for this form field
|
||||
* @param {string} [subText] - Text to be displayed below the label
|
||||
* @param {string} [placeholder] - placeholder text to override the default text of "Search"
|
||||
* @param {function} onChange - The onchange action for this form field. ** SEE UTIL ** search-select-has-many.js if selecting models from a hasMany relationship
|
||||
* @param {string | Array} inputValue - A comma-separated string or an array of strings -- array of ids for models.
|
||||
* @param {string} fallbackComponent - name of component to be rendered if the API returns a 403s
|
||||
* @param {boolean} [passObject=false] - When true, the onChange callback returns an array of objects with id (string) and isNew (boolean)
|
||||
* @param {number} [selectLimit] - A number that sets the limit to how many select options they can choose
|
||||
* @param {array} [excludeOptions] - array of strings containing model ids to filter from the dropdown (ex: ['allow_all'])
|
||||
* @param {function} search - *Advanced usage* - Customizes how the power-select component searches for matches -
|
||||
* see the power-select docs for more information.
|
||||
*
|
||||
*/
|
||||
export default class SearchSelectWithModal extends Component {
|
||||
@service store;
|
||||
|
||||
@tracked selectedOptions = null; // list of selected options
|
||||
@tracked allOptions = null; // all possible options
|
||||
@tracked showModal = false;
|
||||
@tracked newModelRecord = null;
|
||||
@tracked shouldUseFallback = false;
|
||||
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.selectedOptions = this.inputValue;
|
||||
}
|
||||
|
||||
get inputValue() {
|
||||
return this.args.inputValue || [];
|
||||
}
|
||||
|
||||
get shouldRenderName() {
|
||||
return this.args.shouldRenderName || false;
|
||||
}
|
||||
|
||||
get excludeOptions() {
|
||||
return this.args.excludeOptions || null;
|
||||
}
|
||||
|
||||
get passObject() {
|
||||
return this.args.passObject || false;
|
||||
}
|
||||
|
||||
@action
|
||||
async fetchOptions() {
|
||||
try {
|
||||
let queryOptions = {};
|
||||
let options = await this.store.query(this.args.model, queryOptions);
|
||||
this.formatOptions(options);
|
||||
} catch (err) {
|
||||
if (err.httpStatus === 404) {
|
||||
if (!this.allOptions) {
|
||||
// If the call failed but the resource has items
|
||||
// from a different namespace, this allows the
|
||||
// selected items to display
|
||||
this.allOptions = [];
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (err.httpStatus === 403) {
|
||||
this.shouldUseFallback = true;
|
||||
return;
|
||||
}
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
formatOptions(options) {
|
||||
options = options.toArray();
|
||||
if (this.excludeOptions) {
|
||||
options = options.filter((o) => !this.excludeOptions.includes(o.id));
|
||||
}
|
||||
options = options.map((option) => {
|
||||
option.searchText = `${option.name} ${option.id}`;
|
||||
return option;
|
||||
});
|
||||
|
||||
if (this.selectedOptions.length > 0) {
|
||||
this.selectedOptions = this.selectedOptions.map((option) => {
|
||||
let matchingOption = options.findBy('id', option);
|
||||
options.removeObject(matchingOption);
|
||||
return {
|
||||
id: option,
|
||||
name: matchingOption ? matchingOption.name : option,
|
||||
searchText: matchingOption ? matchingOption.searchText : option,
|
||||
};
|
||||
});
|
||||
}
|
||||
this.allOptions = options;
|
||||
}
|
||||
|
||||
handleChange() {
|
||||
if (this.selectedOptions.length && typeof this.selectedOptions.firstObject === 'object') {
|
||||
if (this.passObject) {
|
||||
this.args.onChange(
|
||||
Array.from(this.selectedOptions, (option) => ({ id: option.id, isNew: !!option.new }))
|
||||
);
|
||||
} else {
|
||||
this.args.onChange(Array.from(this.selectedOptions, (option) => option.id));
|
||||
}
|
||||
} else {
|
||||
this.args.onChange(this.selectedOptions);
|
||||
}
|
||||
}
|
||||
shouldShowCreate(id, options) {
|
||||
if (options && options.length && options.firstObject.groupName) {
|
||||
return !options.some((group) => group.options.findBy('id', id));
|
||||
}
|
||||
let existingOption =
|
||||
this.allOptions && (this.allOptions.findBy('id', id) || this.allOptions.findBy('name', id));
|
||||
return !existingOption;
|
||||
}
|
||||
//----- adapted from ember-power-select-with-create
|
||||
addCreateOption(term, results) {
|
||||
if (this.shouldShowCreate(term, results)) {
|
||||
const name = `Create new ${singularize(this.args.id)}: ${term}`;
|
||||
const suggestion = {
|
||||
__isSuggestion__: true,
|
||||
__value__: term,
|
||||
name,
|
||||
id: name,
|
||||
};
|
||||
results.unshift(suggestion);
|
||||
}
|
||||
}
|
||||
filter(options, searchText) {
|
||||
const matcher = (option, text) => defaultMatcher(option.searchText, text);
|
||||
return filterOptions(options || [], searchText, matcher);
|
||||
}
|
||||
// -----
|
||||
|
||||
@action
|
||||
discardSelection(selected) {
|
||||
this.selectedOptions.removeObject(selected);
|
||||
this.allOptions.pushObject(selected);
|
||||
this.handleChange();
|
||||
}
|
||||
// ----- adapted from ember-power-select-with-create
|
||||
@action
|
||||
searchAndSuggest(term, select) {
|
||||
if (term.length === 0) {
|
||||
return this.allOptions;
|
||||
}
|
||||
if (this.search) {
|
||||
return resolve(this.search(term, select)).then((results) => {
|
||||
if (results.toArray) {
|
||||
results = results.toArray();
|
||||
}
|
||||
this.addCreateOption(term, results);
|
||||
return results;
|
||||
});
|
||||
}
|
||||
const newOptions = this.filter(this.allOptions, term);
|
||||
this.addCreateOption(term, newOptions);
|
||||
return newOptions;
|
||||
}
|
||||
@action
|
||||
async selectOrCreate(selection) {
|
||||
// if creating we call handleChange in the resetModal action to ensure the model is valid and successfully created
|
||||
// before adding it to the DOM (and parent model)
|
||||
// if just selecting, then we handleChange immediately
|
||||
if (selection && selection.__isSuggestion__) {
|
||||
const name = selection.__value__;
|
||||
this.showModal = true;
|
||||
let createRecord = await this.store.createRecord(this.args.model);
|
||||
createRecord.name = name;
|
||||
this.newModelRecord = createRecord;
|
||||
} else {
|
||||
this.selectedOptions.pushObject(selection);
|
||||
this.allOptions.removeObject(selection);
|
||||
this.handleChange();
|
||||
}
|
||||
}
|
||||
// -----
|
||||
|
||||
@action
|
||||
resetModal(model) {
|
||||
this.showModal = false;
|
||||
if (model && model.currentState.isSaved) {
|
||||
const { name } = model;
|
||||
this.selectedOptions.pushObject({ name, id: name });
|
||||
this.handleChange();
|
||||
}
|
||||
this.newModelRecord = null;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from 'core/components/search-select-with-modal';
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { create } from 'ember-cli-page-object';
|
||||
import { setupMirage } from 'ember-cli-mirage/test-support';
|
||||
import { Response } from 'miragejs';
|
||||
import { clickTrigger, typeInSearch } from 'ember-power-select/test-support/helpers';
|
||||
import { render, fillIn, click } from '@ember/test-helpers';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
import ss from 'vault/tests/pages/components/search-select';
|
||||
|
||||
const component = create(ss);
|
||||
|
||||
module('Integration | Component | search select with modal', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
setupMirage(hooks);
|
||||
hooks.beforeEach(function () {
|
||||
this.server.get('identity/entity/id', () => {
|
||||
return {
|
||||
request_id: 'entity-list-id',
|
||||
data: {
|
||||
key_info: {
|
||||
'entity-1-id': {
|
||||
name: 'entity-1',
|
||||
},
|
||||
'entity-2-id': {
|
||||
name: 'entity-2',
|
||||
},
|
||||
},
|
||||
keys: ['entity-1-id', 'entity-2-id'],
|
||||
},
|
||||
};
|
||||
});
|
||||
this.server.get('sys/policies/acl', () => {
|
||||
return {
|
||||
request_id: 'acl-policy-list-id',
|
||||
data: {
|
||||
keys: ['default', 'root'],
|
||||
},
|
||||
};
|
||||
});
|
||||
this.server.get('sys/policies/rgp', () => {
|
||||
return {
|
||||
request_id: 'rgp-policy-list-id',
|
||||
data: {
|
||||
keys: ['default', 'root'],
|
||||
},
|
||||
};
|
||||
});
|
||||
this.server.get('/identity/entity/id/entity-1-id', () => {
|
||||
return {
|
||||
request_id: 'some-entity-id-1',
|
||||
data: {
|
||||
id: 'entity-1-id',
|
||||
name: 'entity-1',
|
||||
namespace_id: 'root',
|
||||
policies: ['default'],
|
||||
},
|
||||
};
|
||||
});
|
||||
this.server.get('/identity/entity/id/entity-2-id', () => {
|
||||
return {
|
||||
request_id: 'some-entity-id-2',
|
||||
data: {
|
||||
id: 'entity-2-id',
|
||||
name: 'entity-2',
|
||||
namespace_id: 'root',
|
||||
policies: ['default'],
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
test('it renders passed in model', async function (assert) {
|
||||
await render(hbs`
|
||||
<SearchSelectWithModal
|
||||
@id="entity"
|
||||
@label="Entity ID"
|
||||
@subText="Search for an existing entity, or type a new name to create it."
|
||||
@model="identity/entity"
|
||||
@onChange={{this.onChange}}
|
||||
@fallbackComponent="string-list"
|
||||
@modalFormComponent="identity/edit-form"
|
||||
@modalSubtext="Some modal subtext"
|
||||
/>
|
||||
<div id="modal-wormhole"></div>
|
||||
`);
|
||||
|
||||
assert.dom('[data-test-search-select-with-modal]').exists('the component renders');
|
||||
assert.equal(component.labelText, 'Entity ID', 'label text is correct');
|
||||
assert.ok(component.hasTrigger, 'it renders the power select trigger');
|
||||
assert.equal(component.selectedOptions.length, 0, 'there are no selected options');
|
||||
|
||||
await clickTrigger();
|
||||
assert.equal(component.options.length, 2, 'dropdown renders passed in models as options');
|
||||
});
|
||||
|
||||
test('it filters options and adds option to create new item', async function (assert) {
|
||||
assert.expect(7);
|
||||
await render(hbs`
|
||||
<SearchSelectWithModal
|
||||
@id="entity"
|
||||
@label="entity"
|
||||
@subText="Search for an existing entity, or type a new name to create it."
|
||||
@model="identity/entity"
|
||||
@onChange={{this.onChange}}
|
||||
@fallbackComponent="string-list"
|
||||
@modalFormComponent="identity/edit-form"
|
||||
@modalSubtext="Some modal subtext"
|
||||
/>
|
||||
<div id="modal-wormhole"></div>
|
||||
`);
|
||||
|
||||
await clickTrigger();
|
||||
assert.equal(component.options.length, 2, 'dropdown renders all options');
|
||||
|
||||
await typeInSearch('e');
|
||||
assert.equal(component.options.length, 3, 'dropdown renders all options plus add option');
|
||||
|
||||
await typeInSearch('entity-1');
|
||||
assert.equal(component.options[0].text, 'entity-1-id', 'dropdown renders only matching option');
|
||||
|
||||
await typeInSearch('entity-1-new');
|
||||
assert.equal(
|
||||
component.options[0].text,
|
||||
'Create new entity: entity-1-new',
|
||||
'dropdown gives option to create new option'
|
||||
);
|
||||
|
||||
await component.selectOption();
|
||||
assert.dom('[data-test-modal-div]').hasAttribute('class', 'modal is-info is-active', 'modal is active');
|
||||
assert.dom('[data-test-modal-subtext]').hasText('Some modal subtext', 'renders modal text');
|
||||
assert.dom('[data-test-component="identity-edit-form"]').exists('renders identity form');
|
||||
});
|
||||
|
||||
test('it renders fallback component', async function (assert) {
|
||||
assert.expect(7);
|
||||
this.onChange = () => assert.ok(true, 'onChange callback fires');
|
||||
this.server.get('identity/entity/id', () => {
|
||||
return new Response(
|
||||
403,
|
||||
{ 'Content-Type': 'application/json' },
|
||||
JSON.stringify({ errors: ['permission denied'] })
|
||||
);
|
||||
});
|
||||
|
||||
await render(hbs`
|
||||
<SearchSelectWithModal
|
||||
@id="entity"
|
||||
@label="Entity ID"
|
||||
@subText="Search for an existing entity, or type a new name to create it."
|
||||
@model="identity/entity"
|
||||
@onChange={{this.onChange}}
|
||||
@fallbackComponent="string-list"
|
||||
@modalFormComponent="identity/edit-form"
|
||||
@modalSubtext="Some modal subtext"
|
||||
/>
|
||||
<div id="modal-wormhole"></div>
|
||||
`);
|
||||
|
||||
assert.dom('[data-test-component="string-list"]').exists('renders fallback component');
|
||||
assert.false(component.hasTrigger, 'does not render power select trigger');
|
||||
await fillIn('[data-test-string-list-input="0"]', 'some-entity');
|
||||
await click('[data-test-string-list-button="add"]');
|
||||
assert
|
||||
.dom('[data-test-string-list-input="0"]')
|
||||
.hasValue('some-entity', 'first row renders inputted string');
|
||||
assert
|
||||
.dom('[data-test-string-list-row="0"] [data-test-string-list-button="delete"]')
|
||||
.exists('first row renders delete icon');
|
||||
assert.dom('[data-test-string-list-row="1"]').exists('renders second input row');
|
||||
assert
|
||||
.dom('[data-test-string-list-row="1"] [data-test-string-list-button="add"]')
|
||||
.exists('second row renders add icon');
|
||||
});
|
||||
});
|
||||
|
|
@ -70,4 +70,21 @@ module('Unit | Util | validators', function (hooks) {
|
|||
check('0');
|
||||
assert.true(isValid, 'Valid for 0 as a string');
|
||||
});
|
||||
|
||||
test('it should validate white space', function (assert) {
|
||||
let isValid;
|
||||
const check = (prop) => (isValid = validators.containsWhiteSpace(prop));
|
||||
check('validText');
|
||||
assert.true(isValid, 'Valid when text contains no spaces');
|
||||
check('valid-text');
|
||||
assert.true(isValid, 'Valid when text contains no spaces and hyphen');
|
||||
check('some space');
|
||||
assert.false(isValid, 'Invalid when text contains single space');
|
||||
check('text with spaces');
|
||||
assert.false(isValid, 'Invalid when text contains multiple spaces');
|
||||
check(' leadingSpace');
|
||||
assert.false(isValid, 'Invalid when text has leading whitespace');
|
||||
check('trailingSpace ');
|
||||
assert.false(isValid, 'Invalid when text has trailing whitespace');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue