Backport 1.11.x: Backport TTL picker changes (#20797)

* UI: TTL picker cleanup (#18114)

* Update config-pki.hbs

Unable to make Pki changes because we don't have action handleCrlTtl

* fix space

* remove test

---------

Co-authored-by: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>

changelog/18114.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: update TTL picker for consistency
+```

ui/app/components/configure-aws-secret.js

@@ -6,9 +6,9 @@ import { action } from '@ember/object';
  *
  * @example
  * ```js
- * <ConfigureAwsSecret 
-    @model={{model}} 
-    @tab={{tab}} 
+ * <ConfigureAwsSecret
+    @model={{model}}
+    @tab={{tab}}
     @accessKey={{accessKey}}
     @secretKey={{secretKey}}
     @region={{region}}
@@ -27,7 +27,7 @@ import { action } from '@ember/object';
  * @param {string} stsEndpoint - Sts endpoint
  * @param {Function} saveAWSRoot - parent action which saves AWS root credentials
  * @param {Function} saveAWSLease - parent action which updates AWS lease information
- * 
+ *
  */
 export default class ConfigureAwsSecretComponent extends Component {
   @action
@@ -39,4 +39,11 @@ export default class ConfigureAwsSecretComponent extends Component {
   saveLease(data) {
     this.args.saveAWSLease(data);
   }
+
+  @action
+  handleTtlChange(name, ttlObj) {
+    // lease values cannot be undefined, set to 0 to use default
+    const valueToSet = ttlObj.enabled ? ttlObj.goSafeTimeString : 0;
+    this.args.model.set(name, valueToSet);
+  }
 }

ui/app/components/wrap-ttl.hbs

@@ -0,0 +1,12 @@
+<div class="field">
+  <TtlPicker
+    @label="Wrap response"
+    @helperTextDisabled="Will not wrap response"
+    @helperTextEnabled="Will wrap response with a lease of"
+    @initialEnabled={{true}}
+    @initialValue="30m"
+    @onChange={{this.changedValue}}
+    @changeOnInit={{true}}
+    data-test-wrap-ttl-picker
+  />
+</div>

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`
-    <div class="field">
-      {{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=wrapResponse
-        initialValue=ttl
-        onChange=(action 'changedValue')
-      }}
-    </div>
-  `,
-
-  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);
+  }
+}

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;
+}

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';

ui/app/templates/components/configure-aws-secret.hbs

@@ -30,8 +30,18 @@
         If you do not supply lease settings, we will use the default values in AWS.
       </p>
     </div>
-    <TtlPicker @labelText="Lease" @initialValue={{@model.lease}} @onChange={{action (mut @model.lease)}} />
-    <TtlPicker @labelText="Maximum Lease" @initialValue={{@model.leaseMax}} @onChange={{action (mut @model.leaseMax)}} />
+    <TtlPicker
+      @label="Lease"
+      @initialValue={{@model.lease}}
+      @initialEnabled={{@model.lease}}
+      @onChange={{fn this.handleTtlChange "lease"}}
+    />
+    <TtlPicker
+      @label="Maximum Lease"
+      @initialValue={{@model.leaseMax}}
+      @initialEnabled={{@model.leaseMax}}
+      @onChange={{fn this.handleTtlChange "leaseMax"}}
+    />
     <div class="box is-bottomless is-fullwidth">
       <button data-test-aws-input="lease-save" type="submit" class="button is-primary">
         Save

ui/app/templates/components/form-field-from-model.hbs

@@ -35,7 +35,7 @@
       </div>
     </div>
   {{else if (eq @attr.options.editType "ttl")}}
-    <TtlPicker2
+    <TtlPicker
       @initialValue={{or (get @model @attr.name) @attr.options.defaultValue}}
       @initialEnabled={{or (get @model @attr.name) false}}
       @label={{or @attr.options.label (humanize (dasherize @attr.name))}}

ui/app/templates/components/tool-wrap.hbs

@@ -53,7 +53,7 @@
         />
       </div>
     </div>
-    <TtlPicker2
+    <TtlPicker
       @label="Wrap TTL"
       @initialValue="30m"
       @onChange={{action "updateTtl"}}

ui/app/templates/components/transit-form-create.hbs

@@ -7,7 +7,7 @@
       <Input id="key-name" @value={{@key.name}} class="input" data-test-transit-key-name={{true}} />
     </div>
     <div class="field">
-      <TtlPicker2
+      <TtlPicker
         @initialValue="30d"
         @initialEnabled={{false}}
         @label="Auto-rotation period"

ui/app/templates/components/transit-form-edit.hbs

@@ -17,7 +17,7 @@
       </div>
     </div>
     <div class="field">
-      <TtlPicker2
+      <TtlPicker
         @initialValue={{or @key.autoRotatePeriod "30d"}}
         @initialEnabled={{not (eq @key.autoRotatePeriod "0s")}}
         @label="Auto-rotation period"

ui/app/templates/vault/cluster/access/leases/show.hbs

@@ -66,7 +66,7 @@
   <div class="box is-shadowless" data-test-lease-renew-picker={{true}}>
     <h2 class="title is-6">Renew Lease</h2>
     <form {{action "renewLease" this.model this.increment on="submit"}}>
-      <TtlPicker2
+      <TtlPicker
         @label="Increment"
         @helperTextEnabled="Lease will expire after"
         @helperTextDisabled="Vault will use the default lease duration"

ui/lib/core/addon/components/form-field.hbs

@@ -126,7 +126,7 @@
     {{! TTL Picker }}
     <div class="field">
       {{#let (or (get @model this.valuePath) @attr.options.setDefault) as |initialValue|}}
-        <TtlPicker2
+        <TtlPicker
           data-test-input={{@attr.name}}
           @onChange={{this.setAndBroadcastTtl}}
           @label={{this.labelString}}

ui/lib/core/addon/components/toggle.hbs

@@ -7,8 +7,9 @@
   class={{this.inputClasses}}
   disabled={{this.disabled}}
   data-test-toggle-input={{this.name}}
+  ...attributes
 />
-<label data-test-toggle-label={{this.name}} for={{this.safeId}} class="toggle-label">
+<label data-test-toggle-label={{this.name}} for={{this.safeId}} class="toggle-label {{if this.hideLabel 'sr-only'}}">
   {{#if (has-block)}}
     {{yield}}
   {{else}}