From 161384c1c783674b408e873f60f7b29029d70db6 Mon Sep 17 00:00:00 2001
From: Sebastian Ebling <sebastian.ebling@gmail.com>
Date: Fri, 21 Feb 2025 23:04:56 +0100
Subject: [PATCH 1/2] Add support to use variables in Form URL Encoded key

---
 .../RequestPane/FormUrlEncodedParams/index.js | 28 ++++++++++-----
 .../src/ipc/network/interpolate-vars.js       |  6 +++-
 .../tests/network/interpolate-vars.spec.js    | 35 ++++++++++++++++++-
 3 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
index c8eeda531f..532a5719bd 100644
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
@@ -15,6 +15,7 @@ import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collection
 import StyledWrapper from './StyledWrapper';
 import ReorderTable from 'components/ReorderTable/index';
 import Table from 'components/Table/index';
+import SingleLineEditor from 'components/SingleLineEditor/index';
 
 const FormUrlEncodedParams = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -92,15 +93,26 @@ const FormUrlEncodedParams = ({ item, collection }) => {
               return (
                 <tr key={param.uid} data-uid={param.uid}>
                   <td className='flex relative'>
-                    <input
-                      type="text"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      autoCapitalize="off"
-                      spellCheck="false"
+                    <MultiLineEditor
                       value={param.name}
-                      className="mousetrap"
-                      onChange={(e) => handleParamChange(e, param, 'name')}
+                      theme={storedTheme}
+                      onSave={onSave}
+                      onChange={(newValue) =>
+                        handleParamChange(
+                          {
+                            target: {
+                              value: newValue
+                            }
+                          },
+                          param,
+                          'name'
+                        )
+                      }
+                      allowNewlines={false}
+                      onRun={handleRun}
+                      collection={collection}
+                      item={item}
+                      variablesAutocomplete={true}
                     />
                   </td>
                   <td>
diff --git a/packages/bruno-electron/src/ipc/network/interpolate-vars.js b/packages/bruno-electron/src/ipc/network/interpolate-vars.js
index 0b8e300eda..048441e7f3 100644
--- a/packages/bruno-electron/src/ipc/network/interpolate-vars.js
+++ b/packages/bruno-electron/src/ipc/network/interpolate-vars.js
@@ -84,9 +84,13 @@ const interpolateVars = (request, envVariables = {}, runtimeVariables = {}, proc
   } else if (contentType === 'application/x-www-form-urlencoded') {
     if (typeof request.data === 'object') {
       try {
+        const interpolatedData = {};
         forOwn(request?.data, (value, key) => {
-          request.data[key] = _interpolate(value);
+          const interpolatedKey = _interpolate(key);
+          const interpolatedValue = _interpolate(value);
+          interpolatedData[interpolatedKey] = interpolatedValue;
         });
+        request.data = interpolatedData;
       } catch (err) {}
     }
   } else if (contentType === 'multipart/form-data') {
diff --git a/packages/bruno-electron/tests/network/interpolate-vars.spec.js b/packages/bruno-electron/tests/network/interpolate-vars.spec.js
index 7a769ea3a9..a01b8def50 100644
--- a/packages/bruno-electron/tests/network/interpolate-vars.spec.js
+++ b/packages/bruno-electron/tests/network/interpolate-vars.spec.js
@@ -31,7 +31,7 @@ describe('interpolate-vars: interpolateVars', () => {
         expect(result.url).toEqual('test.com');
       });
 
-      it('If there are multiple variables', async () => {
+      it('If there are multiple variables in json', async () => {
         const body =
           '{\n  "firstElem": {{body-var-1}},\n  "secondElem": [{{body.var.2}}],\n  "thirdElem": {\n    "fourthElem": {{body_var_3}},\n    "{{varAsKey}}": {{valueForKey}} }}';
         const expectedBody =
@@ -52,6 +52,39 @@ describe('interpolate-vars: interpolateVars', () => {
         );
         expect(result.data).toEqual(expectedBody);
       });
+
+      it('If there are multiple variables in x-www-form-urlencoded', async () => {
+        const request = {
+          method: 'POST',
+          url: 'test',
+          data: {
+            '{{prefix}}_{{suffix}}': '{{value1}}-{{value2}}',
+            '{{key2}}': '{{value3}}'
+          },
+          headers: {
+            'content-type': 'application/x-www-form-urlencoded'
+          }
+        };
+    
+        const result = interpolateVars(
+          request,
+          {
+            prefix: 'test',
+            suffix: 'key',
+            value1: 'hello',
+            value2: 'world',
+            key2: 'anotherKey',
+            value3: 'anotherValue'
+          },
+          null,
+          null
+        );
+    
+        expect(result.data).toEqual({
+          'test_key': 'hello-world',
+          'anotherKey': 'anotherValue'
+        });
+      });
     });
 
     describe('With process environment variables', () => {

From ad0cb46a404ce83f5e3d21095baa8cca24375aa8 Mon Sep 17 00:00:00 2001
From: Sebastian Ebling <sebastian.ebling@gmail.com>
Date: Fri, 21 Feb 2025 23:41:29 +0100
Subject: [PATCH 2/2] Remove unused import again

---
 .../src/components/RequestPane/FormUrlEncodedParams/index.js     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
index 532a5719bd..43800f0f64 100644
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
@@ -15,7 +15,6 @@ import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collection
 import StyledWrapper from './StyledWrapper';
 import ReorderTable from 'components/ReorderTable/index';
 import Table from 'components/Table/index';
-import SingleLineEditor from 'components/SingleLineEditor/index';
 
 const FormUrlEncodedParams = ({ item, collection }) => {
   const dispatch = useDispatch();