Fix KV Version History queryParams on the component LinkedBlock (#12079)

* fix the issue

* add test coverage

* add documentation to link-block

* add changelog

* modify for browserstack

changelog/12079.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix Version History queryParams on LinkedBlock
+```

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

@@ -19,7 +19,11 @@
   </p.levelLeft>
 </PageHeader>
 <ListView @items={{reverse model.versions}} @itemNoun="version" as |list|>
-  <ListItem @hasMenu={{false}} @linkParams={{array 'vault.cluster.secrets.backend.show' model.id (query-params version=list.item.version) }} as |Item|>
+  <ListItem 
+    @hasMenu={{false}} 
+    @linkParams={{array 'vault.cluster.secrets.backend.show' model.id}}
+    @queryParams={{hash version=list.item.version}}
+  as |Item|>
     <Item.content>
       <div class="columns is-flex-1">
         <div>

ui/lib/core/addon/components/linked-block.js

@@ -3,6 +3,28 @@ import Component from '@ember/component';
 import hbs from 'htmlbars-inline-precompile';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 
+/**
+ * @module LinkedBlock
+ * LinkedBlock components are linkable divs that yield any content nested within them. They are often used in list views such as when listing the secret engines.
+ *
+ * @example
+ * ```js
+ * <LinkedBlock
+ *  @params={{array 'vault.cluster.secrets.backend.show 'my-secret-path'}}
+ *  @queryParams={{hash version=1}}
+ *  @class="list-item-row"
+ *  data-test-list-item-link
+ *  >
+ * // Use any wrapped content here
+ * </LinkedBlock>
+ * ```
+ *
+ * @param {Array} params=null - These are values sent to the router's transitionTo method.  First item is route, second is the optional path.
+ * @param {Object} [queryParams=null] - queryParams can be passed via this property. It needs to be an object.
+ * @param {String} [linkPrefix=null] - Overwrite the params with custom route.  See KMIP.
+ * @param {Boolean} [encode=false] - Encode the path.
+ */
+
 let LinkedBlockComponent = Component.extend({
   router: service(),
 

ui/lib/core/addon/components/list-item.js

@@ -8,6 +8,7 @@ export default Component.extend({
   flashMessages: service(),
   tagName: '',
   linkParams: null,
+  queryParams: null,
   componentName: null,
   hasMenu: true,
 

ui/lib/core/addon/templates/components/list-item.hbs

@@ -1,7 +1,13 @@
 {{#if componentName}}
   {{component componentName item=item}}
 {{else if linkParams}}
-  <LinkedBlock @params={{linkParams}} @linkPrefix={{@linkPrefix}} @class="list-item-row" data-test-list-item-link>
+  <LinkedBlock 
+    @params={{linkParams}}
+    @queryParams={{@queryParams}}
+    @linkPrefix={{@linkPrefix}}
+    @class="list-item-row"
+    data-test-list-item-link
+  >
     <div class="level is-mobile">
       <div class="level-left is-flex-1" data-test-list-item-content>
         {{#link-to params=linkParams class="has-text-weight-semibold has-text-black is-display-flex is-flex-1 is-no-underline"}}

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

@@ -114,6 +114,33 @@ module('Acceptance | secrets/secret/create', function(hooks) {
     assert.equal(currentURL(), `/vault/secrets/${enginePath}/show/meep`, 'navigates to show secret');
   });
 
+  test('it navigates to version history and to a specific version', async function(assert) {
+    const path = `kv-path-${new Date().getTime()}`;
+    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();
+    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');
+    assert.dom('[data-test-list-item-content]').exists({ count: 1 }, 'renders a single version');
+
+    await click('.linked-block');
+    await settled();
+    await settled();
+    assert.dom('[data-test-masked-input]').hasText('bar', 'renders secret on the secret version show page');
+    assert.equal(
+      currentURL(),
+      `/vault/secrets/secret/show/${path}?version=1`,
+      'redirects to the show page with queryParam version=1'
+    );
+  });
+
   test('version 1 performs the correct capabilities lookup', async function(assert) {
     let enginePath = `kv-${new Date().getTime()}`;
     let secretPath = 'foo/bar';
@@ -188,6 +215,7 @@ module('Acceptance | secrets/secret/create', function(hooks) {
       'navigates to the ancestor created earlier'
     );
   });
+
   test('first level secrets redirect properly upon deletion', async function(assert) {
     let enginePath = `kv-${new Date().getTime()}`;
     let secretPath = 'test';