UI: fix LIST request for metadata endpoint (#10371) (#10584)

* fix LIST request for metadata endpoint

* add test coverage

* update kv suggestion input compoent

* update comment, add another test for kv suggestion input

* fix typo in web REPL for metadata flag, add test

* update from curly to angle bracket syntax

* sanitize url in api service VAULT-40414

* add fallback return for no url to removeDuplicateSlashes method

* move sanitization directly to middleware

* remove sanitization for kv list requests

* strip requests of trailing slash

* revert changes to api pre request middleware

* update vault-client-typescript

* add changelog

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

changelog/_10371.txt

@@ -0,0 +1,7 @@
+```release-note:bug
+ui (enterprise): Fix KV v2 not displaying secrets in namespaces.
+```
+
+```release-note:bug
+ui: Fix KV v2 metadata list request failing for policies without a trailing slash in the path.
+```

ui/app/components/console/ui-panel.hbs

@@ -35,7 +35,7 @@
     <p class="console-ui-panel-intro is-font-mono">
       <span aria-hidden="true">→ </span>Read a kv v2 secret: kv-get &lt;mount&gt;/secret-path</p>
     <p class="console-ui-panel-intro is-font-mono">
-      <span aria-hidden="true">→ </span>Read a kv v2 secret's metadata: kv-get &lt;mount&gt;/secret-path-metadata</p>
+      <span aria-hidden="true">→ </span>Read a kv v2 secret's metadata: kv-get &lt;mount&gt;/secret-path -metadata</p>
   </div>
   <Console::OutputLog @outputLog={{this.cliLog}} />
   <Console::CommandInput

ui/lib/core/addon/components/kv-suggestion-input.ts

@@ -74,6 +74,10 @@ export default class KvSuggestionInputComponent extends Component<Args> {
       const backend = keyIsFolder(mountPath) ? mountPath.slice(0, -1) : mountPath;
       const parentDirectory = parentKeyForKey(this.args.value);
       this.pathToSecret = this.isDirectory ? this.args.value : parentDirectory;
+      // kvV2List => GET /:secret-mount-path/metadata/:secret_path/?list=true
+      // This request can either list secrets at the mount root or for a specified :secret_path.
+      // Since :secret_path already contains a trailing slash, e.g. /metadata/my-secret//
+      // the request URL is sanitized by the api service to remove duplicate slashes.
       const { keys } = await this.api.secrets.kvV2List(this.pathToSecret, backend, KvV2ListListEnum.TRUE);
       // this will be used to filter the existing result set when the search term changes within the same path
       this._cachedSecrets = keys || [];

ui/lib/kv/addon/routes/list-directory.js

@@ -26,6 +26,10 @@ export default class KvSecretsListRoute extends Route {
 
   async fetchMetadata(backend, pathToSecret, params) {
     try {
+      // kvV2List => GET /:secret-mount-path/metadata/:secret_path/?list=true
+      // This request can either list secrets at the mount root or for a specified :secret_path.
+      // Since :secret_path already contains a trailing slash, e.g. /metadata/my-secret//
+      // the request URL is sanitized by the api service to remove duplicate slashes.
       const { keys } = await this.api.secrets.kvV2List(pathToSecret, backend, true);
       return paginate(keys, { page: Number(params.page) || 1, filter: params.pageFilter });
     } catch (error) {

ui/tests/acceptance/secrets/backend/kv/kv-v2-workflow-edge-cases-test.js

@@ -39,6 +39,8 @@ import codemirror, { getCodeEditorValue, setCodeEditorValue } from 'vault/tests/
 import { personas } from 'vault/tests/helpers/kv/policy-generator';
 import { capabilitiesStub } from 'vault/tests/helpers/stubs';
 import { setupMirage } from 'ember-cli-mirage/test-support';
+import { selectChoose } from 'ember-power-select/test-support';
+import { DASHBOARD } from 'vault/tests/helpers/components/dashboard/dashboard-selectors';
 
 /**
  * This test set is for testing edge cases, such as specific bug fixes or reported user workflows
@@ -66,7 +68,7 @@ module('Acceptance | kv-v2 workflow | edge cases', function (hooks) {
     return;
   });
 
-  module('persona with read and list access on the secret level', function (hooks) {
+  module('persona with glob (*) read and list access on the secret level', function (hooks) {
     // see github issue for more details https://github.com/hashicorp/vault/issues/5362
     hooks.beforeEach(async function () {
       const secretPath = `${this.rootSecret}/*`; // user has LIST and READ access within this root secret directory
@@ -228,6 +230,62 @@ module('Acceptance | kv-v2 workflow | edge cases', function (hooks) {
     });
   });
 
+  module('persona with list access on a secret path', function (hooks) {
+    // test coverage for this regression: https://github.com/hashicorp/vault/issues/31606
+    hooks.beforeEach(async function () {
+      const secretPath = this.rootSecret;
+      const capabilities = ['list'];
+      const backend = this.backend;
+      const token = await runCmd([
+        createPolicyCmd(
+          `secret-lister-${this.backend}`,
+          metadataPolicy({ backend, secretPath, capabilities })
+        ),
+        createTokenCmd(`secret-lister-${this.backend}`),
+      ]);
+      await login(token);
+    });
+
+    test('it lists secrets within the root directory from the kv engine list', async function (assert) {
+      assert.expect(4);
+      const backend = this.backend;
+      const [root, subdirectory] = this.fullSecretPath.split('/');
+
+      await visit(`/vault/secrets-engines/${backend}/kv/list`);
+      assert.strictEqual(
+        currentURL(),
+        `/vault/secrets-engines/${backend}/kv/list`,
+        'lands on secrets list page'
+      );
+
+      await typeIn(PAGE.list.overviewInput, `${root}/`);
+      await click(GENERAL.submitButton);
+      assert.strictEqual(
+        currentURL(),
+        `/vault/secrets-engines/${backend}/kv/list/${root}/`,
+        'it navigates to secret list'
+      );
+      assert.dom(PAGE.list.filter).hasValue(`${root}/`);
+      assert.dom(PAGE.list.item(`${subdirectory}/`)).exists('it renders nested secret');
+    });
+
+    test('it lists secrets within the root directory from the quick actions card', async function (assert) {
+      assert.expect(2);
+      const backend = this.backend;
+      const [root, subdirectory] = this.fullSecretPath.split('/');
+
+      await visit(`/vault`);
+      await selectChoose(DASHBOARD.searchSelect('secrets-engines'), backend);
+      await fillIn(DASHBOARD.selectEl, 'Find KV secrets');
+      await typeIn(GENERAL.kvSuggestion.input, `${root}/`);
+      await click(GENERAL.kvSuggestion.input);
+      assert
+        .dom(GENERAL.searchSelect.options)
+        .hasText(`${subdirectory}/`)
+        .exists({ count: 1 }, 'expected options render');
+    });
+  });
+
   module('destruction without read', function (hooks) {
     hooks.beforeEach(async function () {
       const backend = this.backend;

ui/tests/integration/components/console/ui-panel-test.js

@@ -16,20 +16,24 @@ module('Integration | Component | console/ui panel', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`{{console/ui-panel}}`);
-
+    await render(hbs`<div class="panel-open"><Console::UiPanel /></div>`);
     assert.ok(component.hasInput);
+    assert
+      .dom(this.element)
+      .hasText(
+        "The Vault Web REPL provides an easy way to execute common Vault CLI commands, such as write, read, delete, and list. It does not include KV version 2 write or put commands. For guidance, type `help`. For more detailed documentation, see the HashiCorp Developer site. Examples: → Write secrets to kv v1: write <mount>/my-secret foo=bar → List kv v1 secret keys: list <mount>/ → Read a kv v1 secret: read <mount>/my-secret → Mount a kv v2 secret engine: write sys/mounts/<mount> type=kv options=version=2 → Read a kv v2 secret: kv-get <mount>/secret-path → Read a kv v2 secret's metadata: kv-get <mount>/secret-path -metadata"
+      );
   });
 
   test('it clears console input on enter', async function (assert) {
-    await render(hbs`{{console/ui-panel}}`);
+    await render(hbs`<Console::UiPanel />`);
     await component.runCommands('list this/thing/here', false);
     await settled();
     assert.strictEqual(component.consoleInputValue, '', 'empties input field on enter');
   });
 
   test('it clears the log when using clear command', async function (assert) {
-    await render(hbs`{{console/ui-panel}}`);
+    await render(hbs`<Console::UiPanel />`);
     await component.runCommands(
       ['list this/thing/here', 'list this/other/thing', 'read another/thing'],
       false
@@ -50,7 +54,7 @@ module('Integration | Component | console/ui panel', function (hooks) {
   });
 
   test('it adds command to history on enter', async function (assert) {
-    await render(hbs`{{console/ui-panel}}`);
+    await render(hbs`<Console::UiPanel />`);
 
     await component.runCommands('list this/thing/here', false);
     await settled();
@@ -67,7 +71,7 @@ module('Integration | Component | console/ui panel', function (hooks) {
   });
 
   test('it cycles through history with more than one command', async function (assert) {
-    await render(hbs`{{console/ui-panel}}`);
+    await render(hbs`<Console::UiPanel />`);
     await component.runCommands(['list this/thing/here', 'read that/thing/there', 'qwerty'], false);
     await settled();
     await component.up();

ui/yarn.lock

@@ -2752,8 +2752,8 @@ __metadata:
 
 "@hashicorp/vault-client-typescript@hashicorp/vault-client-typescript":
   version: 0.0.0
-  resolution: "@hashicorp/vault-client-typescript@https://github.com/hashicorp/vault-client-typescript.git#commit=192d6367eca00c22e887e5de00586b394a0be03f"
-  checksum: eed9bcd9c37377337a7a5e378f807c949926b39b8c2b36b8a442a2b9727a152cf73370a396f868a82d3318d69532089e25b2dc27f1072e0a709b06fe4c49b0f6
+  resolution: "@hashicorp/vault-client-typescript@https://github.com/hashicorp/vault-client-typescript.git#commit=a3dda25d161198fe514ad37f8ecc11820b281916"
+  checksum: cc3ddde3e03906c308e5049b01b28c7d9c22e541772b4a1f07dddf5a82879bd3fb691b92543f25b2cee71461ec8c6226438ee1cc88d7686fc4122a9b45930c5f
   languageName: node
   linkType: hard