From 36f9902f2e8cba9fd77da2d39450de92205691e9 Mon Sep 17 00:00:00 2001
From: Mirko Golze <mirko.golze@t-systems.com>
Date: Thu, 21 Sep 2023 22:17:46 +0200
Subject: [PATCH] #191 interpolate header names with variables

---
 .../RequestPane/RequestHeaders/index.js       | 26 ++++++++++++-------
 .../bruno-cli/src/runner/interpolate-vars.js  |  3 ++-
 .../src/ipc/network/interpolate-vars.js       |  3 ++-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
index 04cb04d88..2cd5ccade 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
@@ -72,19 +72,27 @@ const RequestHeaders = ({ item, collection }) => {
         </thead>
         <tbody>
           {headers && headers.length
-            ? headers.map((header, index) => {
+            ? headers.map((header) => {
                 return (
                   <tr key={header.uid}>
                     <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
+                      <SingleLineEditor
                         value={header.name}
-                        className="mousetrap"
-                        onChange={(e) => handleHeaderValueChange(e, header, 'name')}
+                        theme={storedTheme}
+                        onSave={onSave}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            header,
+                            'name'
+                          )
+                        }
+                        onRun={handleRun}
+                        collection={collection}
                       />
                     </td>
                     <td>
diff --git a/packages/bruno-cli/src/runner/interpolate-vars.js b/packages/bruno-cli/src/runner/interpolate-vars.js
index bfb0601da..ae30a7b29 100644
--- a/packages/bruno-cli/src/runner/interpolate-vars.js
+++ b/packages/bruno-cli/src/runner/interpolate-vars.js
@@ -51,7 +51,8 @@ const interpolateVars = (request, envVars = {}, collectionVariables = {}, proces
   request.url = interpolate(request.url);
 
   forOwn(request.headers, (value, key) => {
-    request.headers[key] = interpolate(value);
+    delete request.headers[key];
+    request.headers[interpolate(key)] = interpolate(value);
   });
 
   if (request.headers['content-type'] === 'application/json') {
diff --git a/packages/bruno-electron/src/ipc/network/interpolate-vars.js b/packages/bruno-electron/src/ipc/network/interpolate-vars.js
index 7cdbcd255..fb0221505 100644
--- a/packages/bruno-electron/src/ipc/network/interpolate-vars.js
+++ b/packages/bruno-electron/src/ipc/network/interpolate-vars.js
@@ -51,7 +51,8 @@ const interpolateVars = (request, envVars = {}, collectionVariables = {}, proces
   request.url = interpolate(request.url);
 
   forOwn(request.headers, (value, key) => {
-    request.headers[key] = interpolate(value);
+    delete request.headers[key];
+    request.headers[interpolate(key)] = interpolate(value);
   });
 
   if (request.headers['content-type'] === 'application/json') {