scottk/vault
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/vault.git synced 2025-10-30 02:02:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update TTL picker on add replication secondary (#9271)

Browse Source 
* Update TTL picker on add replication secondary

This change updates the TTL picker to the new version to match most updated designs. The component also allows the default value to be more obvious

* Remove erroneous else

* Add changeOnInit param for TtlPicker2 and use it on add secondary page

* Update ttlPicker2 docs and add tests for new param

* Calculate value in unit provided on init for ttl-picker2, with tests

* Cleanup and make ttl-picker2 test more specific
This commit is contained in:
Chelsea Shaw
2020-07-01 12:50:02 -05:00
committed by GitHub
parent c5b2eb1112
commit b88e94b85b
5 changed files with 91 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ui/lib/core/addon/components/ttl-picker2.js
View File

@@ -18,6 +18,7 @@
* @param recalculationTimeout=5000 {Number} - This is the time, in milliseconds, that `recalculateSeconds` will be be true after time is updated
* @param initialValue=null {String} - This is the value set initially (particularly from a string like '30h')
* @param initialEnabled=null {Boolean} - Set this value if you want the toggle on when component is mounted
* @param changeOnInit=false {Boolean} - set this value if you'd like the passed onChange function to be called on component initialization
*/
import Ember from 'ember';
@@ -34,6 +35,7 @@ const secondsMap = {
h: 3600,
d: 86400,
};
const validUnits = ['s', 'm', 'h', 'd'];
const convertToSeconds = (time, unit) => {
return time * secondsMap[unit];
};
@@ -52,37 +54,54 @@ export default Component.extend({
unit: 's',
recalculationTimeout: 5000,
initialValue: null,
changeOnInit: false,
init() {
this._super(...arguments);
const value = this.initialValue;
const enable = this.initialEnabled;
const changeOnInit = this.changeOnInit;
// if initial value is unset use params passed in as defaults
if (!value && value !== 0) {
return;
}
let seconds = 30;
let time = 30;
let unit = 's';
let setEnable = this.enableTTL;
if (!!enable || typeOf(enable) === 'boolean') {
// This allows non-boolean values passed in to be evaluated for truthiness
setEnable = !!enable;
}
if (typeOf(value) === 'number') {
seconds = value;
// if the passed value is a number, assume unit is seconds
time = value;
} else {
try {
seconds = Duration.parse(value).seconds();
const seconds = Duration.parse(value).seconds();
const lastDigit = value.toString().substring(value.length - 1);
if (validUnits.indexOf(lastDigit) >= 0 && lastDigit !== 's') {
time = convertFromSeconds(seconds, lastDigit);
unit = lastDigit;
} else {
time = seconds;
}
} catch (e) {
console.error(e);
// if parsing fails leave as default 30
// if parsing fails leave as default 30s
}
}
this.setProperties({
time: seconds,
unit: 's',
time,
unit,
enableTTL: setEnable,
});
if (changeOnInit) {
this.handleChange();
}
},
unitOptions: computed(function() {

1
ui/lib/core/stories/ttl-picker2.md
View File

@@ -21,6 +21,7 @@ TtlPicker2 components are used to enable and select time to live values. Use thi
| recalculationTimeout | <code>Number</code> | <code>5000</code> | This is the time, in milliseconds, that `recalculateSeconds` will be be true after time is updated |
| initialValue | <code>String</code> | <code></code> | This is the value set initially (particularly from a string like '30h') |
| initialEnabled | <code>Boolean</code> | <code></code> | Set this value if you want the toggle on when component is mounted |
| changeOnInit | <code>Boolean</code> | <code>false</code> | set this value if you'd like the passed onChange function to be called on component initialization |
**Example**

8
ui/lib/replication/addon/controllers/mode/secondaries/add.js
View File

@@ -1,3 +1,9 @@
import ReplicationController from 'replication/controllers/application';
export default ReplicationController.extend();
export default ReplicationController.extend({
actions: {
updateTtl: function(ttl) {
this.set('ttl', `${ttl.seconds}s`);
},
},
});

15
ui/lib/replication/addon/templates/mode/secondaries/add.hbs
View File

@@ -18,11 +18,14 @@
</p>
</div>
<div class="field">
{{!-- TODO fix so it defaults to 30s like in other places or replace with new TTL picker --}}
{{ttl-picker onChange=(action (mut ttl)) initialValue="30m" class="is-marginless"}}
<p class="help has-text-grey">
This is the Time To Live for the generated secondary token. After this period, the generated token will no longer be valid.
</p>
<TtlPicker2
@initialValue="30m"
@label="Time to Live (TTL) for generated secondary token"
@helperTextDisabled="If not set, the default value (30 minutes) will be used"
@helperTextEnabled="After this period, the generated token will no longer be valid."
@onChange={{action "updateTtl"}}
@changeOnInit={{true}}
/>
</div>
{{#if (eq replicationMode "performance")}}
<PathFilterConfigList
@@ -40,7 +43,7 @@
>
Generate token
</button>
</div>
</div>
<div class="control">
{{#link-to "mode.secondaries" replicationMode class="button"}}
Cancel

55
ui/tests/integration/components/ttl-picker2-test.js
View File

@@ -116,7 +116,7 @@ module('Integration | Component | ttl-picker2', function(hooks) {
);
});
test('it sets default value to seconds of parsed value when set', async function(assert) {
test('it sets default value to time and unit passed', async function(assert) {
let changeSpy = sinon.spy();
this.set('onChange', changeSpy);
await render(hbs`
@@ -128,8 +128,27 @@ module('Integration | Component | ttl-picker2', function(hooks) {
@unit="d"
/>
`);
assert.dom('[data-test-ttl-value]').hasValue('7200', 'time value is initialValue as seconds');
assert.dom('[data-test-select="ttl-unit"]').hasValue('s', 'unit is seconds');
assert.dom('[data-test-ttl-value]').hasValue('2', 'time value is 2');
assert.dom('[data-test-select="ttl-unit"]').hasValue('h', 'unit is hours');
assert.ok(changeSpy.notCalled, 'it does not call onChange after render when changeOnInit is not set');
});
test('it is disabled on init if initialEnabled is false', async function(assert) {
let changeSpy = sinon.spy();
this.set('onChange', changeSpy);
await render(hbs`
<TtlPicker2
@label="inittest"
@onChange={{onChange}}
@initialValue="100m"
@initialEnabled={{false}}
/>
`);
assert.dom('[data-test-ttl-value]').doesNotExist('Value is not shown on mount');
assert.dom('[data-test-ttl-unit]').doesNotExist('Unit is not shown on mount');
await click('[data-test-toggle-input="inittest"]');
assert.dom('[data-test-ttl-value]').hasValue('100', 'time after toggle is 100');
assert.dom('[data-test-select="ttl-unit"]').hasValue('m', 'Unit is minutes after toggle');
});
test('it is enabled on init if initialEnabled is true', async function(assert) {
@@ -143,8 +162,8 @@ module('Integration | Component | ttl-picker2', function(hooks) {
@initialEnabled={{true}}
/>
`);
assert.dom('[data-test-ttl-value]').hasValue('6000', 'time value is initialValue as seconds');
assert.dom('[data-test-ttl-unit]').exists('Unit is shown on mount');
assert.dom('[data-test-ttl-value]').hasValue('100', 'time is shown on mount');
assert.dom('[data-test-select="ttl-unit"]').hasValue('m', 'Unit is shown on mount');
await click('[data-test-toggle-input="inittest"]');
assert.dom('[data-test-ttl-value]').doesNotExist('Value no longer shows after toggle');
assert.dom('[data-test-ttl-unit]').doesNotExist('Unit no longer shows after toggle');
@@ -161,7 +180,31 @@ module('Integration | Component | ttl-picker2', function(hooks) {
@initialEnabled="true"
/>
`);
assert.dom('[data-test-ttl-value]').hasValue('6000', 'time value is initialValue as seconds');
assert.dom('[data-test-ttl-value]').hasValue('100', 'time value is shown on mount');
assert.dom('[data-test-ttl-unit]').exists('Unit is shown on mount');
assert.dom('[data-test-select="ttl-unit"]').hasValue('m', 'Unit matches what is passed in');
});
test('it calls onChange on init when rendered if changeOnInit is true', async function(assert) {
let changeSpy = sinon.spy();
this.set('onChange', changeSpy);
await render(hbs`
<TtlPicker2
@label="changeOnInitTest"
@onChange={{onChange}}
@initialValue="100m"
@initialEnabled="true"
@changeOnInit={{true}}
/>
`);
assert.ok(
changeSpy.calledWith({
enabled: true,
seconds: 6000,
timeString: '100m',
}),
'Seconds value is recalculated based on time and unit'
);
assert.ok(changeSpy.calledOnce, 'it calls the passed onChange after render');
});
});