UI: add subkey request to kv v2 adapter

ui/app/adapters/kv/data.js

@@ -4,7 +4,14 @@
  */
 
 import ApplicationAdapter from '../application';
-import { kvDataPath, kvDeletePath, kvDestroyPath, kvMetadataPath, kvUndeletePath } from 'vault/utils/kv-path';
+import {
+  buildKvPath,
+  kvDataPath,
+  kvDeletePath,
+  kvDestroyPath,
+  kvMetadataPath,
+  kvUndeletePath,
+} from 'vault/utils/kv-path';
 import { assert } from '@ember/debug';
 import ControlGroupError from 'vault/lib/control-group-error';
 
@@ -31,6 +38,19 @@ export default class KvDataAdapter extends ApplicationAdapter {
     });
   }
 
+  // TODO use query-param-string util when https://github.com/hashicorp/vault/pull/27455 is merged
+  fetchSubkeys(query) {
+    const { backend, path, version, depth } = query;
+    const apiPath = buildKvPath(backend, path, 'subkeys'); // encodes mount and secret paths
+    // if no version, defaults to latest
+    const versionParam = version ? `&version=${version}` : '';
+    // depth=1 returns just top-level keys, depth=0 returns all subkeys
+    const queryParams = `?depth=${depth || '0'}${versionParam}`;
+    // TODO subkeys response handles deleted records the same as queryRecord and returns a 404
+    // extrapolate error handling logic from queryRecord and share between these two methods
+    return this.ajax(this._url(`${apiPath}${queryParams}`), 'GET').then((resp) => resp.data);
+  }
+
   fetchWrapInfo(query) {
     const { backend, path, version, wrapTTL } = query;
     const id = kvDataPath(backend, path, version);

ui/app/models/kv/data.js

@@ -88,6 +88,7 @@ export default class KvSecretDataModel extends Model {
   @lazyCapabilities(apiPath`${'backend'}/delete/${'path'}`, 'backend', 'path') deletePath;
   @lazyCapabilities(apiPath`${'backend'}/destroy/${'path'}`, 'backend', 'path') destroyPath;
   @lazyCapabilities(apiPath`${'backend'}/undelete/${'path'}`, 'backend', 'path') undeletePath;
+  @lazyCapabilities(apiPath`${'backend'}/subkeys/${'path'}`, 'backend', 'path') subkeysPath;
 
   get canDeleteLatestVersion() {
     return this.dataPath.get('canDelete') !== false;
@@ -119,4 +120,7 @@ export default class KvSecretDataModel extends Model {
   get canDeleteMetadata() {
     return this.metadataPath.get('canDelete') !== false;
   }
+  get canReadSubkeys() {
+    return this.subkeysPath.get('canRead') !== false;
+  }
 }

ui/app/styles/helper-classes/spacing.scss

@@ -90,6 +90,7 @@
   margin: 0 !important;
 }
 
+// spacing-18 is between medium + large
 .has-top-bottom-margin {
   margin: $spacing-18 0rem;
 }
@@ -98,6 +99,10 @@
   margin: $spacing-4 0;
 }
 
+.has-top-bottom-margin-12 {
+  margin: $spacing-12 0;
+}
+
 .has-top-margin-negative-m {
   margin-top: -$spacing-16;
 }

ui/app/utils/kv-path.ts

@@ -11,7 +11,6 @@
 import { sanitizeStart } from 'core/utils/sanitize-path';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 
-// only exported for testing
 export function buildKvPath(backend: string, path: string, type: string, version?: number | string) {
   const sanitizedPath = sanitizeStart(path); // removing leading slashes
   const url = `${encodePath(backend)}/${type}/${encodePath(sanitizedPath)}`;

ui/lib/core/addon/components/overview-card.hbs

@@ -10,7 +10,7 @@
   data-test-overview-card-container={{@cardTitle}}
   ...attributes
 >
-  <div class="flex row-wrap space-between has-bottom-margin-m" data-test-overview-card={{@cardTitle}}>
+  <div class="flex row-wrap space-between has-bottom-margin-s" data-test-overview-card={{@cardTitle}}>
     <Hds::Text::Display @weight="bold" @size="300" data-test-overview-card-title={{@cardTitle}}>
       {{@cardTitle}}
     </Hds::Text::Display>
@@ -20,9 +20,17 @@
     {{/if}}
   </div>
 
-  <Hds::Text::Body @color="faint" data-test-overview-card-subtitle={{@cardTitle}}>
-    {{@subText}}
-  </Hds::Text::Body>
+  {{! Pass @subText for text only content to use default styling. }}
+  {{#if @subText}}
+    <Hds::Text::Body @color="faint" data-test-overview-card-subtitle={{@cardTitle}}>
+      {{@subText}}
+    </Hds::Text::Body>
+  {{/if}}
+
+  {{! Use the "subtext" yield for stylized subtext or including elements like doc links. }}
+  {{#if (has-block "subtext")}}
+    {{yield to="subtext"}}
+  {{/if}}
 
   {{#if (has-block "content")}}
     {{yield to="content"}}

ui/lib/kv/addon/components/kv-subkeys.hbs

@@ -0,0 +1,48 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<OverviewCard @cardTitle="Subkeys">
+  <:subtext>
+    <Hds::Text::Body @color="faint" data-test-overview-card-subtitle="Subkeys">
+      {{#if this.showJson}}
+        These are the subkeys within this secret. All underlying values of leaf keys are not retrieved and instead are
+        replaced with
+        <code>null</code>. Subkey
+        <Hds::Link::Inline
+          @icon="docs-link"
+          @iconPosition="trailing"
+          @href={{doc-link "/vault/api-docs/secret/kv/kv-v2#read-secret-subkeys"}}
+        >API documentation</Hds::Link::Inline>.
+      {{else}}
+        The table is displaying the top level subkeys. Toggle on the JSON view to see the full depth.
+      {{/if}}
+    </Hds::Text::Body>
+  </:subtext>
+  <:action>
+    <div>
+      <Toggle @name="kv-subkeys" @checked={{this.showJson}} @onChange={{fn (mut this.showJson)}}>
+        <p class="has-text-grey">JSON</p>
+      </Toggle>
+    </div>
+  </:action>
+  <:content>
+    <div class="has-top-margin-s" data-test-overview-card-content="Subkeys">
+      {{#if this.showJson}}
+        <Hds::CodeBlock @value={{stringify @subkeys}} @hasLineNumbers={{false}} />
+      {{else}}
+        <Hds::Text::Display @tag="p" @size="200" @weight="semibold" @color="faint" class="has-bottom-margin-s">
+          Keys
+        </Hds::Text::Display>
+        <hr class="has-background-gray-100 is-marginless" />
+        {{#each-in @subkeys as |key|}}
+          <Hds::Text::Display @tag="p" @size="200" @weight="semibold" class="has-top-bottom-margin-12">
+            {{key}}
+          </Hds::Text::Display>
+          <hr class="has-background-gray-100 is-marginless" />
+        {{/each-in}}
+      {{/if}}
+    </div>
+  </:content>
+</OverviewCard>

ui/lib/kv/addon/components/kv-subkeys.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+/**
+ * @module KvSubkeys
+ * @description
+sample secret data:
+```
+ {
+  "foo": "abc",
+  "bar": {
+    "baz": "def"
+  },
+  "quux": {}
+}
+```
+sample subkeys:
+```
+ this.subkeys = {
+    "bar": {
+        "baz": null
+    },
+    "foo": null,
+    "quux": null
+}
+```
+ * 
+ * @example
+ * <KvSubkeys @subkeys={{this.subkeys}} />
+ *
+ * @param {object} subkeys - leaf keys of a kv v2 secret, all values (unless a nested object with more keys) return null
+ */
+
+export default class KvSubkeys extends Component {
+  @tracked showJson = false;
+}

ui/tests/helpers/kv/kv-selectors.js

@@ -44,6 +44,7 @@ export const PAGE = {
     destroy: '[data-test-kv-delete="destroy"]',
     undelete: '[data-test-kv-delete="undelete"]',
     copy: '[data-test-copy-menu-trigger]',
+    wrap: '[data-test-wrap-button]',
     deleteModal: '[data-test-delete-modal]',
     deleteModalTitle: '[data-test-delete-modal] [data-test-modal-title]',
     deleteOption: 'input#delete-version',

ui/tests/integration/components/kv/kv-subkeys-test.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'vault/tests/helpers';
+import { setupEngine } from 'ember-engines/test-support';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
+
+const { overviewCard } = GENERAL;
+module('Integration | Component | kv | kv-subkeys', function (hooks) {
+  setupRenderingTest(hooks);
+  setupEngine(hooks, 'kv');
+  hooks.beforeEach(function () {
+    this.subkeys = {
+      foo: null,
+      bar: {
+        baz: null,
+      },
+    };
+    this.renderComponent = async () => {
+      return render(hbs`<KvSubkeys @subkeys={{this.subkeys}} />`, {
+        owner: this.engine,
+      });
+    };
+  });
+
+  test('it renders', async function (assert) {
+    assert.expect(4);
+    await this.renderComponent();
+
+    assert.dom(overviewCard.title('Subkeys')).exists();
+    assert
+      .dom(overviewCard.description('Subkeys'))
+      .hasText(
+        'The table is displaying the top level subkeys. Toggle on the JSON view to see the full depth.'
+      );
+    assert.dom(overviewCard.content('Subkeys')).hasText('Keys foo bar');
+    assert.dom(GENERAL.toggleInput('kv-subkeys')).isNotChecked('JSON toggle is not checked by default');
+  });
+
+  test('it toggles to JSON', async function (assert) {
+    assert.expect(4);
+    await this.renderComponent();
+
+    assert.dom(GENERAL.toggleInput('kv-subkeys')).isNotChecked();
+    await click(GENERAL.toggleInput('kv-subkeys'));
+    assert.dom(GENERAL.toggleInput('kv-subkeys')).isChecked('JSON toggle is checked');
+    assert.dom(overviewCard.description('Subkeys')).hasText(
+      'These are the subkeys within this secret. All underlying values of leaf keys are not retrieved and instead are replaced with null. Subkey API documentation .' // space is intentional because a trailing icon renders after the inline link
+    );
+    assert.dom(overviewCard.content('Subkeys')).hasText(JSON.stringify(this.subkeys, null, 2));
+  });
+});

ui/tests/integration/components/kv/page/kv-page-secret-details-test.js

@@ -13,6 +13,7 @@ import { kvDataPath, kvMetadataPath } from 'vault/utils/kv-path';
 import { allowAllCapabilitiesStub } from 'vault/tests/helpers/stubs';
 import { FORM, PAGE, parseJsonEditor } from 'vault/tests/helpers/kv/kv-selectors';
 import { syncStatusResponse } from 'vault/mirage/handlers/sync';
+import { encodePath } from 'vault/utils/path-encoding-helpers';
 
 module('Integration | Component | kv-v2 | Page::Secret::Details', function (hooks) {
   setupRenderingTest(hooks);
@@ -286,6 +287,39 @@ module('Integration | Component | kv-v2 | Page::Secret::Details', function (hook
     await click(`${PAGE.detail.syncAlert()} button`);
   });
 
+  test('it makes request to wrap a secret', async function (assert) {
+    assert.expect(2);
+    const url = `${encodePath(this.backend)}/data/${encodePath(this.path)}`;
+
+    this.server.get(url, (schema, { requestHeaders }) => {
+      assert.true(true, `GET request made to url: ${url}`);
+      assert.strictEqual(requestHeaders['X-Vault-Wrap-TTL'], '1800', 'request header includes wrap ttl');
+      return {
+        data: null,
+        token: 'hvs.token',
+        accessor: 'nTgqnw3S4GMz8NKHsOhTBhlk',
+        ttl: 1800,
+        creation_time: '2024-07-26T10:20:32.359107-07:00',
+        creation_path: `${this.backend}/data/${this.path}}`,
+      };
+    });
+
+    await render(
+      hbs`
+       <Page::Secret::Details
+        @path={{this.model.path}}
+        @secret={{this.model.secret}}
+        @metadata={{this.model.metadata}}
+        @breadcrumbs={{this.breadcrumbs}}
+      />
+      `,
+      { owner: this.engine }
+    );
+
+    await click(PAGE.detail.copy);
+    await click(PAGE.detail.wrap);
+  });
+
   test('it renders sync status page alert for multiple destinations', async function (assert) {
     assert.expect(3); // assert count important because confirms request made to fetch sync status twice
     this.server.create('sync-association', {