Form field component ttl picker not initially enabling (#13177) (#13220)

* fixes issue with ttl picker not initially enabling in form field component

* adds changelog entry

* updates test

* updates initial ttl toggle state for default 0s value

changelog/13177.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixes issue with automate secret deletion value not displaying initially if set in secret metadata edit view
+```

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

@@ -127,14 +127,17 @@
 {{else if (eq attr.options.editType "ttl")}}
   {{!-- TTL Picker --}}
   <div class="field">
-    <TtlPicker2
-      @onChange={{action (action "setAndBroadcastTtl" valuePath)}}
-      @label={{labelString}}
-      @helperTextDisabled={{or attr.options.helperTextDisabled "Vault will use the default lease duration."}}
-      @helperTextEnabled={{or attr.options.helperTextEnabled "Lease will expire after"}}
-      @description={{attr.helpText}}
-      @initialValue={{or (get model valuePath) attr.options.setDefault}}
-    />
+    {{#let (or (get model valuePath) attr.options.setDefault) as |initialValue|}}
+      <TtlPicker2
+        @onChange={{action (action "setAndBroadcastTtl" valuePath)}}
+        @label={{labelString}}
+        @helperTextDisabled={{or attr.options.helperTextDisabled "Vault will use the default lease duration."}}
+        @helperTextEnabled={{or attr.options.helperTextEnabled "Lease will expire after"}}
+        @description={{attr.helpText}}
+        @initialValue={{initialValue}}
+        @initialEnabled={{if (eq initialValue "0s") false initialValue}}
+      />
+    {{/let}}
   </div>
 {{else if (eq attr.options.editType "regex")}}
   {{!-- Regex Validated Input --}}

ui/tests/acceptance/settings/configure-secret-backends/pki/section-crl-test.js

@@ -19,7 +19,6 @@ module('Acceptance | settings/configure/secrets/pki/crl', function(hooks) {
     await page.visit({ backend: path, section: 'crl' });
     await settled();
     assert.equal(currentRouteName(), 'vault.cluster.settings.configure-secret-backend.section');
-    await page.form.enableTtl();
     await page.form.fillInUnit('h');
     await page.form.fillInValue(3);
     await page.form.submit();

ui/tests/integration/components/form-field-test.js

@@ -160,4 +160,34 @@ module('Integration | Component | form field', function(hooks) {
     await component.tooltipTrigger();
     assert.ok(component.hasTooltip, 'renders the tooltip component');
   });
+
+  test('it should not expand and toggle ttl when default 0s value is present', async function(assert) {
+    assert.expect(2);
+
+    this.setProperties({
+      model: EmberObject.create({ foo: '0s' }),
+      attr: createAttr('foo', null, { editType: 'ttl' }),
+      onChange: () => {},
+    });
+
+    await render(hbs`{{form-field attr=attr model=model onChange=onChange}}`);
+    assert
+      .dom('[data-test-toggle-input="Foo"]')
+      .isNotChecked('Toggle is initially unchecked when given default value');
+    assert.dom('[data-test-ttl-picker-group="Foo"]').doesNotExist('Ttl input is hidden');
+  });
+
+  test('it should toggle and expand ttl when initial non default value is provided', async function(assert) {
+    assert.expect(2);
+
+    this.setProperties({
+      model: EmberObject.create({ foo: '1s' }),
+      attr: createAttr('foo', null, { editType: 'ttl' }),
+      onChange: () => {},
+    });
+
+    await render(hbs`{{form-field attr=attr model=model onChange=onChange}}`);
+    assert.dom('[data-test-toggle-input="Foo"]').isChecked('Toggle is initially checked when given value');
+    assert.dom('[data-test-ttl-value="Foo"]').hasValue('1', 'Ttl input displays with correct value');
+  });
 });