828185db49
* add SelectDropdown * use SelectDropdown instead of HttpRequestsDropdown * use html selector instead of class name * ensure SelectDropdown still works when rendered inside a Toolbar * add tests * remove old HttpRequests component * make SelectDropdown example easier to read in Storybook * add isFullwidth prop * add SelectDropbown inside a Toolbar story * fix tests * remove actions block and call this.onChange directly * replace dropdownLabel with label * rename SelectDropdown to SelecT * add test for onChange * remove selectedItem prop since we don't need it * make Select accept options as an array of strings or objects * Revert "remove selectedItem prop since we don't need it" This reverts commit 7278516de87bb1df60482edb005137252819931e. * use Select inside TtlPicker * remove debugger * use a test selector * fix pki test selectors * improve storybook docs * fix selected value in ttl picker * ensure httprequests dropdown updates the selected item * ensure select dropdown correctly matches selectedItem * rename selectedItem to selectedValue * remove debugger lol * update selectedItem test * add valueAttribute and labelAttribute to Storybook knobs * udpate jsdocs * remove old httprequestsdropdown component * add note that onChange will receive value of select * use Select inside AuthForm * use correct test selector
120 lines
3.2 KiB
JavaScript
120 lines
3.2 KiB
JavaScript
import { typeOf } from '@ember/utils';
|
|
import EmberError from '@ember/error';
|
|
import Component from '@ember/component';
|
|
import { set, computed } from '@ember/object';
|
|
import Duration from 'Duration.js';
|
|
import layout from '../templates/components/ttl-picker';
|
|
|
|
const ERROR_MESSAGE = 'TTLs must be specified in whole number increments, please enter a whole number.';
|
|
|
|
/**
|
|
* @module TtlPicker
|
|
* `TtlPicker` components are used to expand and collapse content with a toggle.
|
|
*
|
|
* @example
|
|
* ```js
|
|
<TtlPicker @labelText="Lease" @initialValue={{lease}} @onChange={{action (mut lease)}} />
|
|
* ```
|
|
*
|
|
* @param labelClass="" {String} - A CSS class to add to the label.
|
|
* @param labelText="TTL" {String} - The text content of the label associated with the widget.
|
|
* @param initialValue=null {Number} - The starting value of the TTL;
|
|
* @param setDefaultValue=true {Boolean} - If true, the component will trigger onChange on the initial
|
|
* render, causing a value to be set.
|
|
* @param onChange=Function.prototype{Function} - The function to call when the value of the ttl changes.
|
|
* @param outputSeconds=false{Boolean} - If true, the component will trigger onChange with a value
|
|
* converted to seconds instead of a Golang duration string.
|
|
*/
|
|
export default Component.extend({
|
|
layout,
|
|
'data-test-component': 'ttl-picker',
|
|
classNames: 'field',
|
|
|
|
onChange: () => {},
|
|
setDefaultValue: true,
|
|
labelText: 'TTL',
|
|
labelClass: '',
|
|
ouputSeconds: false,
|
|
|
|
time: 30,
|
|
unit: 'm',
|
|
initialValue: null,
|
|
errorMessage: null,
|
|
unitOptions: computed(function() {
|
|
return [
|
|
{ label: 'seconds', value: 's' },
|
|
{ label: 'minutes', value: 'm' },
|
|
{ label: 'hours', value: 'h' },
|
|
{ label: 'days', value: 'd' },
|
|
];
|
|
}),
|
|
|
|
convertToSeconds(time, unit) {
|
|
const toSeconds = {
|
|
s: 1,
|
|
m: 60,
|
|
h: 3600,
|
|
};
|
|
|
|
return time * toSeconds[unit];
|
|
},
|
|
|
|
TTL: computed('time', 'unit', function() {
|
|
let { time, unit, outputSeconds } = this.getProperties('time', 'unit', 'outputSeconds');
|
|
//convert to hours
|
|
if (unit === 'd') {
|
|
time = time * 24;
|
|
unit = 'h';
|
|
}
|
|
const timeString = time + unit;
|
|
return outputSeconds ? this.convertToSeconds(time, unit) : timeString;
|
|
}),
|
|
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
if (this.setDefaultValue === false) {
|
|
return;
|
|
}
|
|
this.onChange(this.TTL);
|
|
},
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
if (!this.onChange) {
|
|
throw new EmberError('`onChange` handler is a required attr in `' + this.toString() + '`.');
|
|
}
|
|
if (this.initialValue != undefined) {
|
|
this.parseAndSetTime();
|
|
}
|
|
},
|
|
|
|
parseAndSetTime() {
|
|
let value = this.initialValue;
|
|
let seconds = typeOf(value) === 'number' ? value : 30;
|
|
try {
|
|
seconds = Duration.parse(value).seconds();
|
|
} catch (e) {
|
|
// if parsing fails leave as default 30
|
|
}
|
|
|
|
this.set('time', seconds);
|
|
this.set('unit', 's');
|
|
},
|
|
|
|
actions: {
|
|
changedValue(key, value) {
|
|
if (value && key === 'time') {
|
|
value = parseInt(value, 10);
|
|
if (Number.isNaN(value)) {
|
|
this.set('errorMessage', ERROR_MESSAGE);
|
|
return;
|
|
}
|
|
}
|
|
this.set('errorMessage', null);
|
|
|
|
set(this, key, value);
|
|
this.onChange(this.TTL);
|
|
},
|
|
},
|
|
});
|