Secrets header version badge (hashicorp#13015)

* updates secret list header to display badge for all versions

* adds changelog entry

* updates secret list header to only show badge for kv and generic engine types

* adds secret-engine mirage factory

* adds test helper for pushing serialized mirage data into store and returning ember data models

* adds secret engine type version badge display test

* updates mirage application serializer to return singular type key

changelog/13015.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Display badge for all versions in secrets engine header
+```

ui/app/components/secret-list-header.js

@@ -8,4 +8,8 @@ export default class SecretListHeader extends Component {
   backendCrumb = null;
   model = null;
   options = null;
+
+  get isKV() {
+    return ['kv', 'generic'].includes(this.args.model.engineType);
+  }
 }

ui/app/templates/components/secret-list-header.hbs

@@ -16,9 +16,9 @@
       <h1 class="title is-3">
         <Icon @glyph={{or @model.engineType "secrets"}} @size="xl" class="has-text-grey-light" />
         {{@model.id}}
-        {{#if (eq @model.options.version 2)}}
-          <span class="tag">
-            Version 2
+        {{#if this.isKV}}
+          <span class="tag" data-test-kv-version-badge>
+            Version {{or @model.options.version "1"}}
           </span>
         {{/if}}
       </h1>

ui/mirage/factories/secret-engine.js

@@ -0,0 +1,31 @@
+import { Factory } from 'ember-cli-mirage';
+import faker from 'faker';
+import { supportedSecretBackends } from 'vault/helpers/supported-secret-backends';
+
+export default Factory.extend({
+  path: () => faker.system.directoryPath(),
+  description: () => faker.git.commitMessage(),
+  local: () => faker.datatype.boolean(),
+  sealWrap: () => faker.datatype.boolean(),
+  // set in afterCreate
+  accessor: null,
+  type: null,
+  options: null,
+
+  afterCreate(secretEngine) {
+    if (!secretEngine.type) {
+      const type = faker.random.arrayElement(supportedSecretBackends());
+      secretEngine.type = type;
+
+      if (!secretEngine.accessor) {
+        secretEngine.accessor = `type_${faker.git.shortSha()}`;
+      }
+    }
+
+    if (!secretEngine.options && ['generic', 'kv'].includes(secretEngine.type)) {
+      secretEngine.options = {
+        version: faker.random.arrayElement('1', '2'),
+      };
+    }
+  },
+});

ui/mirage/serializers/application.js

@@ -1,3 +1,7 @@
 import { JSONAPISerializer } from 'ember-cli-mirage';
 
-export default JSONAPISerializer.extend({});
+export default JSONAPISerializer.extend({
+  typeKeyForModel(model) {
+    return model.modelName;
+  },
+});

ui/package.json

@@ -208,6 +208,7 @@
     ]
   },
   "dependencies": {
+    "faker": "^5.5.3",
     "handlebars": "^4.3.0",
     "highlight.js": "^10.4.1",
     "jquery": "^3.5.0",

ui/tests/helpers/mirage-to-models.js

@@ -0,0 +1,12 @@
+import { getContext } from '@ember/test-helpers';
+
+export default data => {
+  const context = getContext();
+  const store = context.owner.lookup('service:store');
+  const modelName = Array.isArray(data) ? data[0].modelName : data.modelName;
+  const json = context.server.serializerOrRegistry.serialize(data);
+  store.push(json);
+  return Array.isArray(data)
+    ? data.map(({ id }) => store.peekRecord(modelName, id))
+    : store.peekRecord(modelName, data.id);
+};

ui/tests/integration/components/secret-list-header-test.js

@@ -0,0 +1,40 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+import { supportedSecretBackends } from 'vault/helpers/supported-secret-backends';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import mirageToModels from 'vault/tests/helpers/mirage-to-models';
+
+module('Integration | Component | secret-list-header', function(hooks) {
+  setupRenderingTest(hooks);
+  setupMirage(hooks);
+
+  test('it should render version badge for kv and generic engine types', async function(assert) {
+    const backends = supportedSecretBackends();
+    assert.expect(backends.length);
+
+    this.server.post('/sys/capabilities-self', () => {});
+
+    for (let type of backends) {
+      const data = this.server.create('secret-engine', 2, { type });
+      this.model = mirageToModels(data);
+      await render(hbs`
+        <SecretListHeader
+          @model={{this.model}}
+        />
+      `);
+      const selector = '[data-test-kv-version-badge]';
+      if (['kv', 'generic'].includes(type)) {
+        assert
+          .dom(selector)
+          .hasText(
+            `Version ${this.model.options.version}`,
+            `Badge renders with correct version for ${type} engine type`
+          );
+      } else {
+        assert.dom(selector).doesNotExist(`Version badge does not render for ${type} engine type`);
+      }
+    }
+  });
+});

ui/yarn.lock

@@ -9620,6 +9620,11 @@ fake-xml-http-request@^2.1.1:
   resolved "https://registry.yarnpkg.com/fake-xml-http-request/-/fake-xml-http-request-2.1.2.tgz#f1786720cae50bbb46273035a0173414f3e85e74"
   integrity sha512-HaFMBi7r+oEC9iJNpc3bvcW7Z7iLmM26hPDmlb0mFwyANSsOQAtJxbdWsXITKOzZUyMYK0zYCv3h5yDj9TsiXg==
 
+faker@^5.5.3:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-5.5.3.tgz#c57974ee484431b25205c2c8dc09fda861e51e0e"
+  integrity sha512-wLTv2a28wjUyWkbnX7u/ABZBkUkIF2fCd73V6P2oFqEGEktDfzWx4UxrSqtPRw0xPRAcjeAOIiJWqZm3pP4u3g==
+
 fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"