From 1627f65bd7ee120ed70f1ba81a268fad3af995e7 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Sat, 21 Jan 2023 01:38:48 +0530
Subject: [PATCH] feat: using single line editors instead of input boxes

---
 .../RequestPane/FormUrlEncodedParams/index.js | 21 +++++++++++--------
 .../RequestPane/RequestHeaders/index.js       | 21 +++++++++++--------
 .../ResponsePane/Timeline/StyledWrapper.js    |  1 +
 .../SingleLineEditor/StyledWrapper.js         |  2 ++
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
index b8f4a5750..39c3a9569 100644
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
@@ -4,6 +4,8 @@ import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { addFormUrlEncodedParam, updateFormUrlEncodedParam, deleteFormUrlEncodedParam } from 'providers/ReduxStore/slices/collections';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const FormUrlEncodedParams = ({ item, collection }) => {
@@ -19,6 +21,7 @@ const FormUrlEncodedParams = ({ item, collection }) => {
     );
   };
 
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleParamChange = (e, _param, type) => {
     const param = cloneDeep(_param);
     switch (type) {
@@ -82,15 +85,15 @@ const FormUrlEncodedParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={param.value}
-                        className="mousetrap"
-                        onChange={(e) => handleParamChange(e, param, 'value')}
+                      <SingleLineEditor 
+                        value={param.value} 
+                        onChange={(newValue) => handleParamChange({
+                          target: {
+                            value: newValue
+                          }
+                        }, param, 'value')}
+                        onRun={handleRun}
+                        collection={collection}
                       />
                     </td>
                     <td>
diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
index 7608fb0d5..bb7bca93e 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
@@ -4,6 +4,8 @@ import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { addRequestHeader, updateRequestHeader, deleteRequestHeader } from 'providers/ReduxStore/slices/collections';
+import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 
 const RequestHeaders = ({ item, collection }) => {
@@ -19,6 +21,7 @@ const RequestHeaders = ({ item, collection }) => {
     );
   };
 
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleHeaderValueChange = (e, _header, type) => {
     const header = cloneDeep(_header);
     switch (type) {
@@ -82,15 +85,15 @@ const RequestHeaders = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={header.value}
-                        className="mousetrap"
-                        onChange={(e) => handleHeaderValueChange(e, header, 'value')}
+                      <SingleLineEditor 
+                        value={header.value} 
+                        onChange={(newValue) => handleHeaderValueChange({
+                          target: {
+                            value: newValue
+                          }
+                        }, header, 'value')}
+                        onRun={handleRun}
+                        collection={collection}
                       />
                     </td>
                     <td>
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js
index 88a5931be..020d5bd91 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js
@@ -5,6 +5,7 @@ const StyledWrapper = styled.div`
     white-space: pre-line;
     word-wrap: break-word;
     word-break: break-all;
+    font-family: Inter, sans-serif !important;
 
     .arrow {
       opacity: 0.5;
diff --git a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
index e6cfc7fb1..6e456820b 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
@@ -22,6 +22,8 @@ const StyledWrapper = styled.div`
 
     pre {
       font-family: Inter, sans-serif !important;
+      font-weight: 400;
+      }
     }
   }