UI/kv creation time

changelog/12663.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Add creation time to KV 2 version history and version view
+```

ui/app/styles/components/info-table-row.scss

@@ -35,6 +35,10 @@
     .helper-text {
       font-weight: normal;
     }
+    &.justify-right {
+      display: flex;
+      justify-content: right;
+    }
   }
 
   .hs-icon {

ui/app/styles/components/list-item-row.scss

@@ -8,6 +8,14 @@
   .ember-basic-dropdown-trigger {
     display: inline-block;
   }
+
+  .center-inside-row {
+    width: 50%;
+    margin-left: auto;
+    font-size: $size-8;
+    font-weight: $font-weight-semibold;
+    color: $ui-gray-500;
+  }
 }
 
 a.list-item-row,

ui/app/styles/components/tool-tip.scss

@@ -23,6 +23,9 @@
   &.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
     animation: drop-fade-below 0.15s reverse;
   }
+  &.smaller-font {
+    font-size: $size-8;
+  }
 }
 
 .ember-basic-dropdown-content--left.tool-tip {

ui/app/templates/components/secret-form-show.hbs

@@ -47,6 +47,18 @@
         <div class="th column">
           Value
         </div>
+        <div class="th column justify-right" data-test-created-time>
+          <ToolTip @verticalPosition="above" @horizontalPosition="center" as |T|>
+            <T.trigger data-test-tooltip-trigger tabindex="-1" data-test-created-time>
+              Version created {{date-format @modelForData.createdTime 'MMM dd, yyyy hh:mm a'}}
+            </T.trigger>
+            <T.content @class="tool-tip smaller-font">
+              <div class="box" data-test-hover-copy-tooltip-text>
+                {{@modelForData.createdTime}}
+              </div>
+            </T.content>
+          </ToolTip>
+        </div>
       </div>
     </div>
     {{#if @modelForData.secretKeyAndValue}}

ui/app/templates/vault/cluster/secrets/backend/versions.hbs

@@ -27,7 +27,7 @@
     <Item.content>
       <div class="columns is-flex-1">
         <div>
-          <Icon @glyph="file-outline" class="has-text-grey" />
+          <Icon @glyph="history" class="has-text-grey" />
           Version {{list.item.version}}
         </div>
         {{#if (eq list.item.version model.currentVersion)}}
@@ -50,7 +50,19 @@
               <Icon @glyph="cancel-square-fill" />Destroyed
             </span>      
           </div>
-        {{/if}}    
+        {{/if}}
+        <div class="center-inside-row">
+          <ToolTip @verticalPosition="above" @horizontalPosition="center" as |T|>
+            <T.trigger data-test-tooltip-trigger tabindex="-1">
+              Created {{date-format list.item.createdTime 'MMM dd, yyyy hh:mm a'}}
+            </T.trigger>
+            <T.content @class="tool-tip smaller-font">
+              <div class="box" data-test-hover-copy-tooltip-text>
+                {{list.item.createdTime}}
+              </div>
+            </T.content>
+          </ToolTip>
+        </div>
       </div>
     </Item.content>
     <Item.menu>

ui/tests/acceptance/secrets/backend/kv/secret-test.js

@@ -226,18 +226,22 @@ module('Acceptance | secrets/secret/create', function(hooks) {
 
   test('it navigates to version history and to a specific version', async function(assert) {
     const path = `kv-path-${new Date().getTime()}`;
+    let today = new Date();
+    let month = today.toString().split(' ')[1];
     await listPage.visitRoot({ backend: 'secret' });
     await settled();
     await listPage.create();
     await settled();
     await editPage.createSecret(path, 'foo', 'bar');
     await click('[data-test-popup-menu-trigger="version"]');
     await settled();
+    assert.dom('[ data-test-created-time]').includesText(month, 'created time shows todays month');
+
     await click('[data-test-version-history]');
     await settled();
     assert
       .dom('[data-test-list-item-content]')
-      .hasText('Version 1 Current', 'shows version one data on the version history as current');
+      .includesText('Version 1 Current', 'shows version one data on the version history as current');
     assert.dom('[data-test-list-item-content]').exists({ count: 1 }, 'renders a single version');
 
     await click('.linked-block');