UI: Better default transit auto-rotation (#15474)

* TTL Picker convers to largest unit when value is number

* Initial value for transit auto-rotation period is 30d

* Add auto-rotation check to transit test

* Add changelog

* Add clarifying comment

changelog/15474.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Default auto-rotation period in transit is 30 days
+```

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

@@ -8,7 +8,7 @@
     </div>
     <div class="field">
       <TtlPicker2
-        @initialValue="1h"
+        @initialValue="30d"
         @initialEnabled={{false}}
         @label="Auto-rotation period"
         @helperTextDisabled="Key will never be automatically rotated"

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

@@ -18,7 +18,7 @@
     </div>
     <div class="field">
       <TtlPicker2
-        @initialValue={{or @key.autoRotatePeriod "1h"}}
+        @initialValue={{or @key.autoRotatePeriod "30d"}}
         @initialEnabled={{not (eq @key.autoRotatePeriod "0s")}}
         @label="Auto-rotation period"
         @helperTextDisabled="Key will never be automatically rotated"

ui/lib/core/addon/components/ttl-picker2.js

@@ -74,7 +74,15 @@ export default TtlForm.extend({
 
     if (typeOf(value) === 'number') {
       // if the passed value is a number, assume unit is seconds
-      time = value;
+      // then check if the value can be converted into a larger unit
+      if (value % secondsMap.d === 0) {
+        unit = 'd';
+      } else if (value % secondsMap.h === 0) {
+        unit = 'h';
+      } else if (value % secondsMap.m === 0) {
+        unit = 'm';
+      }
+      time = convertFromSeconds(value, unit);
     } else {
       try {
         const seconds = Duration.parse(value).seconds();

ui/tests/acceptance/transit-test.js

@@ -42,6 +42,7 @@ const keyTypes = [
     type: 'chacha20-poly1305',
     convergent: true,
     supportsEncryption: true,
+    autoRotate: true,
   },
   {
     name: (ts) => `ecdsa-${ts}`,
@@ -84,6 +85,7 @@ const keyTypes = [
     type: `rsa-4096`,
     supportsSigning: true,
     supportsEncryption: true,
+    autoRotate: true,
   },
 ];
 
@@ -102,6 +104,9 @@ let generateTransitKey = async function (key, now) {
   if (key.convergent) {
     await click('[data-test-transit-key-convergent-encryption]');
   }
+  if (key.autoRotate) {
+    await click('[data-test-toggle-label="Auto-rotation period"]');
+  }
   await click('[data-test-transit-key-create]');
   await settled(); // eslint-disable-line
   // link back to the list
@@ -298,10 +303,15 @@ module('Acceptance | transit', function (hooks) {
   });
   for (let key of keyTypes) {
     test(`transit backend: ${key.type}`, async function (assert) {
-      assert.expect(key.convergent ? 42 : 6);
+      assert.expect(key.convergent ? 43 : 7);
       let name = await generateTransitKey(key, now);
       await visit(`vault/secrets/${path}/show/${name}`);
 
+      const expectedRotateValue = key.autoRotate ? '30 days' : 'Key will not be automatically rotated';
+      assert
+        .dom('[data-test-row-value="Auto-rotation period"]')
+        .hasText(expectedRotateValue, 'Has expected auto rotate value');
+
       await click('[data-test-transit-link="versions"]');
       // wait for capabilities
 

ui/tests/integration/components/ttl-picker2-test.js

@@ -232,4 +232,17 @@ module('Integration | Component | ttl-picker2', function (hooks) {
     assert.dom('[data-test-ttl-value]').hasValue('1000', 'time value is converted');
     assert.dom('[data-test-select="ttl-unit"]').hasValue('m', 'unit value is m (minutes)');
   });
+
+  test('it converts to the largest round unit on init when no unit provided', async function (assert) {
+    await render(hbs`
+      <TtlPicker2
+        @label="convertunits"
+        @onChange={{onChange}}
+        @initialValue={{86400}}
+        @initialEnabled="true"
+      />
+    `);
+    assert.dom('[data-test-ttl-value]').hasValue('1', 'time value is converted');
+    assert.dom('[data-test-select="ttl-unit"]').hasValue('d', 'unit value is d (days)');
+  });
 });