UI: VAULT-20186 Backport 1.14.x: Decode connection_url in database (#23705)

changelog/23695.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Decode the connection url for display on the connection details page
+```

ui/app/helpers/decode-uri.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { helper as buildHelper } from '@ember/component/helper';
+
+export function decodeUri(string) {
+  return decodeURI(string);
+}
+
+export default buildHelper(decodeUri);

ui/app/templates/components/database-connection.hbs

@@ -337,7 +337,7 @@
           @alwaysRender={{not (is-empty-value (get @model attr.name) hasDefault=defaultDisplay)}}
           @defaultShown={{defaultDisplay}}
           @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
-          @value={{get @model attr.name}}
+          @value={{if (eq attr.name "connection_url") (decode-uri (get @model attr.name)) (get @model attr.name)}}
         />
       {{/if}}
     {{/let}}

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

@@ -34,12 +34,16 @@ const mount = async () => {
   return path;
 };
 
-const newConnection = async (backend, plugin = 'mongodb-database-plugin') => {
+const newConnection = async (
+  backend,
+  plugin = 'mongodb-database-plugin',
+  connectionUrl = `mongodb://127.0.0.1:4321/${name}`
+) => {
   const name = `connection-${Date.now()}`;
   await connectionPage.visitCreate({ backend });
   await connectionPage.dbPlugin(plugin);
   await connectionPage.name(name);
-  await connectionPage.connectionUrl(`mongodb://127.0.0.1:4321/${name}`);
+  await connectionPage.connectionUrl(connectionUrl);
   await connectionPage.toggleVerify();
   await connectionPage.save();
   await connectionPage.enable();
@@ -462,6 +466,19 @@ module('Acceptance | secrets/database/*', function (hooks) {
     assert.dom('[data-test-get-credentials]').isEnabled();
   });
 
+  test('connection_url must be decoded', async function (assert) {
+    const backend = await mount();
+    const connection = await newConnection(
+      backend,
+      'mongodb-database-plugin',
+      '{{username}}/{{password}}@oracle-xe:1521/XEPDB1'
+    );
+    await connectionPage.visitShow({ backend, id: connection });
+    assert
+      .dom('[data-test-row-value="Connection URL"]')
+      .hasText('{{username}}/{{password}}@oracle-xe:1521/XEPDB1');
+  });
+
   test('Role create form', async function (assert) {
     const backend = await mount();
     // Connection needed for role fields