From 0ea02992b718e6a177684f386ad9c8eb8065aa97 Mon Sep 17 00:00:00 2001 From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com> Date: Thu, 1 Dec 2022 09:33:30 -0600 Subject: [PATCH] UI: TTL picker cleanup (#18114) --- changelog/18114.txt | 3 + ui/app/components/configure-aws-secret.js | 15 +- ui/app/components/wrap-ttl.hbs | 12 + ui/app/components/wrap-ttl.js | 61 +-- ui/app/styles/app.scss | 10 + .../{ttl-picker2.scss => ttl-picker.scss} | 0 ui/app/styles/core.scss | 2 +- .../components/configure-aws-secret.hbs | 14 +- .../components/form-field-from-model.hbs | 2 +- .../templates/components/pki/config-pki.hbs | 2 +- ui/app/templates/components/tool-wrap.hbs | 2 +- .../components/transit-form-create.hbs | 2 +- .../components/transit-form-edit.hbs | 2 +- .../vault/cluster/access/leases/show.hbs | 2 +- ui/lib/core/addon/components/form-field.hbs | 2 +- .../components/radio-select-ttl-or-string.hbs | 2 +- ui/lib/core/addon/components/toggle.hbs | 3 +- ui/lib/core/addon/components/ttl-form.js | 103 ----- ui/lib/core/addon/components/ttl-picker.hbs | 139 +++++++ ui/lib/core/addon/components/ttl-picker.js | 268 +++++++----- ui/lib/core/addon/components/ttl-picker2.js | 159 ------- .../addon/templates/components/ttl-form.hbs | 35 -- .../addon/templates/components/ttl-picker.hbs | 25 -- .../templates/components/ttl-picker2.hbs | 83 ---- ui/lib/core/app/components/ttl-form.js | 1 - ui/lib/core/app/components/ttl-picker2.js | 1 - .../addon/templates/mode/secondaries/add.hbs | 2 +- .../secrets/backend/kv/secret-test.js | 1 + ui/tests/helpers/components/ttl-picker.js | 14 + .../components/mfa/method-form-test.js | 2 +- .../components/pki/config-pki-test.js | 15 +- .../pki/radio-select-ttl-or-string-test.js | 17 +- .../integration/components/ttl-form-test.js | 49 --- .../integration/components/ttl-picker-test.js | 392 +++++++++++++++++- .../components/ttl-picker2-test.js | 248 ----------- .../integration/components/wrap-ttl-test.js | 36 +- 36 files changed, 810 insertions(+), 916 deletions(-) create mode 100644 changelog/18114.txt create mode 100644 ui/app/components/wrap-ttl.hbs rename ui/app/styles/components/{ttl-picker2.scss => ttl-picker.scss} (100%) delete mode 100644 ui/lib/core/addon/components/ttl-form.js create mode 100644 ui/lib/core/addon/components/ttl-picker.hbs delete mode 100644 ui/lib/core/addon/components/ttl-picker2.js delete mode 100644 ui/lib/core/addon/templates/components/ttl-form.hbs delete mode 100644 ui/lib/core/addon/templates/components/ttl-picker.hbs delete mode 100644 ui/lib/core/addon/templates/components/ttl-picker2.hbs delete mode 100644 ui/lib/core/app/components/ttl-form.js delete mode 100644 ui/lib/core/app/components/ttl-picker2.js create mode 100644 ui/tests/helpers/components/ttl-picker.js delete mode 100644 ui/tests/integration/components/ttl-form-test.js delete mode 100644 ui/tests/integration/components/ttl-picker2-test.js diff --git a/changelog/18114.txt b/changelog/18114.txt new file mode 100644 index 000000000..3692b12c8 --- /dev/null +++ b/changelog/18114.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: update TTL picker for consistency +``` diff --git a/ui/app/components/configure-aws-secret.js b/ui/app/components/configure-aws-secret.js index 84f53adf2..bad358b75 100644 --- a/ui/app/components/configure-aws-secret.js +++ b/ui/app/components/configure-aws-secret.js @@ -6,9 +6,9 @@ import { action } from '@ember/object'; * * @example * ```js - * + + \ No newline at end of file diff --git a/ui/app/components/wrap-ttl.js b/ui/app/components/wrap-ttl.js index 395a657c4..8f40b6886 100644 --- a/ui/app/components/wrap-ttl.js +++ b/ui/app/components/wrap-ttl.js @@ -1,49 +1,26 @@ import { assert } from '@ember/debug'; -import Component from '@ember/component'; -import { set, computed } from '@ember/object'; -import hbs from 'htmlbars-inline-precompile'; +import Component from '@glimmer/component'; +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; -export default Component.extend({ - // passed from outside - onChange: null, - wrapResponse: true, +export default class WrapTtlComponent extends Component { + @tracked + wrapResponse = true; - ttl: '30m', + constructor() { + super(...arguments); + assert('`onChange` handler is a required attr in `' + this.toString() + '`.', this.args.onChange); + } - wrapTTL: computed('wrapResponse', 'ttl', function () { + get wrapTTL() { const { wrapResponse, ttl } = this; return wrapResponse ? ttl : null; - }), + } - didRender() { - this._super(...arguments); - this.onChange(this.wrapTTL); - }, - - init() { - this._super(...arguments); - assert('`onChange` handler is a required attr in `' + this.toString() + '`.', this.onChange); - }, - - layout: hbs` -
- {{ttl-picker2 - data-test-wrap-ttl-picker=true - label='Wrap response' - helperTextDisabled='Will not wrap response' - helperTextEnabled='Will wrap response with a lease of' - enableTTL=this.wrapResponse - initialValue=this.ttl - onChange=(action 'changedValue') - }} -
- `, - - actions: { - changedValue(ttlObj) { - set(this, 'wrapResponse', ttlObj.enabled); - set(this, 'ttl', `${ttlObj.seconds}s`); - this.onChange(this.wrapTTL); - }, - }, -}); + @action + changedValue(ttlObj) { + this.wrapResponse = ttlObj.enabled; + this.ttl = ttlObj.goSafeTimeString; + this.args.onChange(this.wrapTTL); + } +} diff --git a/ui/app/styles/app.scss b/ui/app/styles/app.scss index 476acbdfe..765038eaa 100644 --- a/ui/app/styles/app.scss +++ b/ui/app/styles/app.scss @@ -13,3 +13,13 @@ // Font comes from npm package: https://www.npmjs.com/package/text-security // We took the font we wanted and moved it into the ui/fonts folder @include font-face('text-security-square'); + +.sr-only { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} diff --git a/ui/app/styles/components/ttl-picker2.scss b/ui/app/styles/components/ttl-picker.scss similarity index 100% rename from ui/app/styles/components/ttl-picker2.scss rename to ui/app/styles/components/ttl-picker.scss diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index 21f8a188b..6773a664c 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -113,7 +113,7 @@ @import './components/tool-tip'; @import './components/transform-edit.scss'; @import './components/transit-card'; -@import './components/ttl-picker2'; +@import './components/ttl-picker'; @import './components/unseal-warning'; @import './components/ui-wizard'; @import './components/vault-loading'; diff --git a/ui/app/templates/components/configure-aws-secret.hbs b/ui/app/templates/components/configure-aws-secret.hbs index c0eda1fa1..d872ecf0a 100644 --- a/ui/app/templates/components/configure-aws-secret.hbs +++ b/ui/app/templates/components/configure-aws-secret.hbs @@ -34,8 +34,18 @@ If you do not supply lease settings, we will use the default values in AWS.

- - + +
{{else if (eq @attr.options.editType "ttl")}} -
{{#if (eq this.section "crl")}} - -
-
-

Renew Lease

- {{#let (or (get @model this.valuePath) @attr.options.setDefault) as |initialValue|}} -