From 843cf29953534fe24d9cd4f7efe4d17e12e0388d Mon Sep 17 00:00:00 2001
From: Kianna Quach <kianna.quach@hashicorp.com>
Date: Tue, 17 Oct 2023 09:17:09 -0700
Subject: [PATCH 1/3] VAULT-20186 decode uri for all attributes in the table

---
 ui/app/helpers/decode-uri.js                        | 12 ++++++++++++
 ui/app/templates/components/database-connection.hbs |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 ui/app/helpers/decode-uri.js

diff --git a/ui/app/helpers/decode-uri.js b/ui/app/helpers/decode-uri.js
new file mode 100644
index 000000000000..be4f471770ab
--- /dev/null
+++ b/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);
diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs
index dae1eb023a5c..7b469552f64d 100644
--- a/ui/app/templates/components/database-connection.hbs
+++ b/ui/app/templates/components/database-connection.hbs
@@ -345,7 +345,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={{decode-uri (get @model attr.name)}}
         />
       {{/if}}
     {{/let}}

From bf6f7fedb0c5e64a57dadbcb780c7828b58f187e Mon Sep 17 00:00:00 2001
From: Kianna Quach <kianna.quach@hashicorp.com>
Date: Tue, 17 Oct 2023 09:26:29 -0700
Subject: [PATCH 2/3] Only decode for connection_url

---
 ui/app/templates/components/database-connection.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs
index 7b469552f64d..d2f26bd79aa7 100644
--- a/ui/app/templates/components/database-connection.hbs
+++ b/ui/app/templates/components/database-connection.hbs
@@ -345,7 +345,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={{decode-uri (get @model attr.name)}}
+          @value={{if (eq attr.name "connection_url") (decode-uri (get @model attr.name)) (get @model attr.name)}}
         />
       {{/if}}
     {{/let}}

From 43395cdf56b24dade3c2b1bee98c0e722b19b1e3 Mon Sep 17 00:00:00 2001
From: Kianna Quach <kianna.quach@hashicorp.com>
Date: Tue, 17 Oct 2023 10:20:52 -0700
Subject: [PATCH 3/3] Add test for decoding connection_url

---
 .../secrets/backend/database/secret-test.js   | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/ui/tests/acceptance/secrets/backend/database/secret-test.js b/ui/tests/acceptance/secrets/backend/database/secret-test.js
index 57994b1af841..b128aa377ab9 100644
--- a/ui/tests/acceptance/secrets/backend/database/secret-test.js
+++ b/ui/tests/acceptance/secrets/backend/database/secret-test.js
@@ -19,12 +19,16 @@ import { deleteEngineCmd, mountEngineCmd, runCmd, tokenWithPolicyCmd } from 'vau
 
 const searchSelectComponent = create(searchSelect);
 
-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();
@@ -480,6 +484,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 = this.backend;
+    const connection = await newConnection(
+      backend,
+      'mongodb-database-plugin',
+      '{{username}}/{{password}}@oracle-xe:1521/XEPDB1'
+    );
+    await navToConnection(backend, 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 = this.backend;
     // Connection needed for role fields