UI: kv-v2 version history & path tests

ui/app/components/diff-version-selector.js

@@ -12,6 +12,7 @@ import { tracked } from '@glimmer/tracking';
 /**
  * @module DiffVersionSelector
  * DiffVersionSelector component includes a toolbar and diff view between KV 2 versions. It uses the library jsondiffpatch.
+ * TODO kv engine cleanup
  *
  * @example
  * ```js

ui/lib/kv/addon/components/kv-version-dropdown.hbs

@@ -22,15 +22,6 @@
             </LinkTo>
           </li>
         {{/each}}
-        {{! version diff }}
-        {{#if (gt @metadata.sortedVersions.length 1)}}
-          <hr />
-          <li data-test-version="diff">
-            <LinkTo @route="secret.metadata.diff" {{on "click" (fn @onClose D)}}>
-              Version Diff
-            </LinkTo>
-          </li>
-        {{/if}}
       </ul>
     </nav>
   </D.Content>

ui/lib/kv/addon/components/page/secret/edit.hbs

@@ -38,6 +38,29 @@
       @modelValidations={{this.modelValidations}}
       @isEdit={{true}}
     />
+
+    <div class="has-top-margin-m">
+      <Toggle
+        @name="Show diff"
+        @status="success"
+        @size="small"
+        @onChange={{fn (mut this.showDiff)}}
+        @checked={{this.showDiff}}
+        @disabled={{not this.diffDelta}}
+      >
+        <span class="ttl-picker-label is-large">Show diff</span><br />
+        <div class="description has-text-grey" data-test-diff-description>{{if
+            this.diffDelta
+            "Showing the diff will reveal secret values"
+            "No changes to show. Update secret to view diff"
+          }}</div>
+        {{#if this.showDiff}}
+          <div class="form-section visual-diff text-grey-lightest background-color-black has-top-margin-s">
+            <pre data-test-visual-diff>{{sanitized-html this.visualDiff}}</pre>
+          </div>
+        {{/if}}
+      </Toggle>
+    </div>
   </div>
   <div class="box is-fullwidth is-bottomless">
     <div class="control">

ui/lib/kv/addon/components/page/secret/edit.js

@@ -26,15 +26,23 @@ import errorMessage from 'vault/utils/error-message';
  * @param {array} breadcrumbs - breadcrumb objects to render in page header
  */
 
+/* eslint-disable no-undef */
 export default class KvSecretEdit extends Component {
   @service controlGroup;
   @service flashMessages;
   @service router;
 
   @tracked showJsonView = false;
+  @tracked showDiff = false;
   @tracked errorMessage;
   @tracked modelValidations;
   @tracked invalidFormAlert;
+  originalSecret;
+
+  constructor() {
+    super(...arguments);
+    this.originalSecret = JSON.stringify(this.args.secret.secretData || {});
+  }
 
   get showOldVersionAlert() {
     const { currentVersion, previousVersion } = this.args;
@@ -44,6 +52,22 @@ export default class KvSecretEdit extends Component {
     return false;
   }
 
+  get diffDelta() {
+    const oldData = JSON.parse(this.originalSecret);
+    const newData = this.args.secret.secretData;
+
+    const diffpatcher = jsondiffpatch.create({});
+    return diffpatcher.diff(oldData, newData);
+  }
+
+  get visualDiff() {
+    if (!this.showDiff) return null;
+    const newData = this.args.secret.secretData;
+    return this.diffDelta
+      ? jsondiffpatch.formatters.html.format(this.diffDelta, newData)
+      : JSON.stringify(newData, undefined, 2);
+  }
+
   @action
   toggleJsonView() {
     this.showJsonView = !this.showJsonView;

ui/lib/kv/addon/routes/secret/metadata.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class KvSecretMetadataRoute extends Route {
+  @service store;
+  @service secretMountPath;
+
+  async model() {
+    const backend = this.secretMountPath.currentPath;
+    const { name: path } = this.paramsFor('secret');
+    const parentModel = this.modelFor('secret');
+    if (!parentModel.metadata) {
+      // metadata read on the secret root fails silently
+      // if there's no metadata, try again in case it's a control group
+      const metadata = await this.store.queryRecord('kv/metadata', { backend, path });
+      return {
+        ...parentModel,
+        metadata,
+      };
+    }
+    return parentModel;
+  }
+}