mirrors/vault
1
0
Fork 0
mirror of https://github.com/hashicorp/vault.git synced 2026-05-04 20:06:27 +02:00
Code Issues Projects Releases Wiki Activity

UI: Update radio form field to have group styles and label/subtext (#24542)

Browse Source 
* Add radio form field

* Add some tests!

* Address feedback
This commit is contained in:
Kianna 2023-12-14 11:01:57 -08:00 committed by GitHub
parent 7801d2dea2
commit 3547dcfcb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 75 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ui/lib/core/addon/components/form-field.hbs
View File

@ -16,9 +16,13 @@
{{/unless}}
{{#if @attr.options.possibleValues}}
{{#if (eq @attr.options.editType "radio")}}
<div class="control columns" data-test-radio-input>
<div class="control {{unless this.hasRadioSubText 'columns'}}" data-test-radio-input>
{{#each (path-or-array @attr.options.possibleValues @model) as |val|}}
<div class="column is-narrow is-flex-center has-text-grey has-right-margin-s" data-test-input={{@attr.name}}>
<div
class="is-flex-center
{{if this.hasRadioSubText 'has-top-padding-xs has-bottom-padding-s' 'column is-narrow has-right-margin-s'}}"
data-test-input={{@attr.name}}
>
<RadioButton
class="radio"
name={{@attr.name}}
@ -26,12 +30,24 @@
value={{or val.value val}}
@value={{or val.value val}}
@onChange={{this.setAndBroadcast}}
@groupValue={{(get @model this.valuePath)}}
@groupValue={{get @model this.valuePath}}
@disabled={{and @attr.options.editDisabled (not @model.isNew)}}
data-test-radio={{or val.value val}}
/>
<label for={{or val.value val}} class="has-left-margin-xs">
{{or val.value val}}
</label>
<div class="has-left-margin-xs">
<label
for="{{or val.value val}}"
class="has-left-margin-xs has-text-black is-size-7"
data-test-radio-label={{or val.label val.value val}}
>
<span>{{or val.label val.value val}}</span>
{{#if this.hasRadioSubText}}
<p class="has-left-margin-xs has-text-grey is-size-8" data-test-radio-subText={{val.subText}}>
{{val.subText}}
</p>
{{/if}}
</label>
</div>
</div>
{{/each}}
</div>
@ -74,6 +90,15 @@
</div>
</div>
{{/if}}
{{else if (eq @attr.options.editType "dateTimeLocal")}}
<Input
@type="datetime-local"
@value={{date-format (get @model this.valuePath) "yyyy-MM-dd'T'HH:mm"}}
class="input has-top-margin-xs is-auto-width is-block"
name={{@attr.name}}
data-test-input={{@attr.name}}
{{on "change" this.onChangeWithEvent}}
/>
{{else if (eq @attr.options.editType "searchSelect")}}
<div class="form-section">
<SearchSelect

5
ui/lib/core/addon/components/form-field.js
View File

@ -75,6 +75,11 @@ export default class FormFieldComponent extends Component {
this.showInput = !!modelValue;
}
get hasRadioSubText() {
// for 'radio' editType, check to see if every of the possibleValues has a subText and label
return this.args?.attr?.options?.possibleValues?.any((v) => v.subText);
}
get hideLabel() {
const { type, options } = this.args.attr;
if (type === 'boolean' || type === 'object' || options?.isSectionHeader) {

39
ui/tests/integration/components/form-field-test.js
View File

@ -11,6 +11,7 @@ import hbs from 'htmlbars-inline-precompile';
import { create } from 'ember-cli-page-object';
import sinon from 'sinon';
import formFields from '../../pages/components/form-field';
import { format, startOfDay } from 'date-fns';
const component = create(formFields);
@ -159,6 +160,44 @@ module('Integration | Component | form field', function (hooks) {
assert.strictEqual(model.get('foo'), selectedValue);
assert.ok(spy.calledWith('foo', selectedValue), 'onChange called with correct args');
});
test('it renders: radio buttons for possible values, labels, and subtext', async function (assert) {
const [model, spy] = await setup.call(
this,
createAttr('foo', null, {
editType: 'radio',
possibleValues: [
{ label: 'Label 1', subText: 'Some subtext 1', value: 'SHA1' },
{ label: 'Label 2', subText: 'Some subtext 2', value: 'SHA256' },
{ subText: 'Some subtext 3', value: 'SHA256' },
],
})
);
assert.ok(component.hasRadio, 'renders radio buttons');
const selectedValue = 'SHA256';
await component.selectRadioInput(selectedValue);
assert.dom('[data-test-radio-label="Label 1"] span').hasText('Label 1');
assert.dom('[data-test-radio-label="Label 2"] span').hasText('Label 2');
assert.dom('[data-test-radio-label="SHA256"] span').hasText('SHA256');
assert.dom('[data-test-radio-subText="Some subtext 1"]').hasText('Some subtext 1');
assert.dom('[data-test-radio-subText="Some subtext 2"]').hasText('Some subtext 2');
assert.dom('[data-test-radio-subText="Some subtext 3"]').hasText('Some subtext 3');
assert.strictEqual(model.get('foo'), selectedValue);
assert.ok(spy.calledWith('foo', selectedValue), 'onChange called with correct args');
});
test('it renders: datetimelocal', async function (assert) {
const [model] = await setup.call(
this,
createAttr('bar', null, {
editType: 'dateTimeLocal',
})
);
assert.dom("[data-test-input='bar']").exists();
await fillIn(
"[data-test-input='bar']",
format(startOfDay(new Date('2023-12-17T03:24:00')), "yyyy-MM-dd'T'HH:mm")
);
assert.deepEqual(model.get('bar'), '2023-12-17T00:00', 'sets the value on the model');
});
test('it renders: editType stringArray', async function (assert) {
const [model, spy] = await setup.call(this, createAttr('foo', 'string', { editType: 'stringArray' }));