diff --git a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js index c8eeda531f..43800f0f64 100644 --- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js +++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js @@ -92,15 +92,26 @@ const FormUrlEncodedParams = ({ item, collection }) => { return ( - 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} /> 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', () => {