bugfix: Use SingleLineEditor in New Request form to add env variable highlighting (#4954)

* Use SingleLineEditor in New Request form to add variable highlighting

e2e-tests/001-sanity-tests/002-create-new-collection.spec.ts

@@ -12,10 +12,10 @@ test('Create new collection and add a simple HTTP request', async ({ page, creat
   await page.getByRole('button', { name: 'Save' }).click();
   await page.locator('#create-new-tab').getByRole('img').click();
   await page.getByPlaceholder('Request Name').fill('r1');
-  await page.getByPlaceholder('Request URL').click();
-  await page.getByPlaceholder('Request URL').fill('http://localhost:8081');
+  await page.locator('#new-request-url .CodeMirror').click();
+  await page.locator('textarea').fill('http://localhost:8081');
   await page.getByRole('button', { name: 'Create' }).click();
-  await page.locator('pre').filter({ hasText: 'http://localhost:' }).click();
+  await page.locator('#request-url .CodeMirror').click();
   await page.locator('textarea').fill('/ping');
   await page.locator('#send-request').getByRole('img').nth(2).click();
 

packages/bruno-app/src/components/RequestPane/QueryUrl/index.js

@@ -83,6 +83,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
         <HttpMethodSelector method={method} onMethodSelect={onMethodSelect} />
       </div>
       <div
+        id="request-url"
         className="flex items-center flex-grow input-container h-full"
         style={{
           color: 'yellow',

packages/bruno-app/src/components/Sidebar/NewRequest/index.js

@@ -19,11 +19,15 @@ import PathDisplay from 'components/PathDisplay';
 import Portal from 'components/Portal';
 import Help from 'components/Help';
 import StyledWrapper from './StyledWrapper';
+import SingleLineEditor from 'components/SingleLineEditor/index';
+import { useTheme } from 'styled-components';
 
 const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
   const dispatch = useDispatch();
   const inputRef = useRef();
 
+  const storedTheme = useTheme();
+
   const collection = useSelector(state => state.collections.collections?.find(c => c.uid === collectionUid));
   const {
     brunoConfig: { presets: collectionPresets = {} }
@@ -413,20 +417,22 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
                         onMethodSelect={(val) => formik.setFieldValue('requestMethod', val)}
                       />
                     </div>
-                    <div className="flex items-center flex-grow input-container h-full">
-                      <input
-                        id="request-url"
-                        type="text"
-                        name="requestUrl"
-                        placeholder="Request URL"
-                        className="px-3 w-full "
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        onChange={formik.handleChange}
-                        value={formik.values.requestUrl || ''}
+                    <div id="new-request-url" className="flex px-2 items-center flex-grow input-container h-full">
+                      <SingleLineEditor
                         onPaste={handlePaste}
+                        placeholder="Request URL"
+                        value={formik.values.requestUrl || ''}
+                        theme={storedTheme}
+                        onChange={(value) => {
+                          formik.handleChange({
+                            target: {
+                              name: "requestUrl",
+                              value: value
+                            }
+                          });
+                        }}
+                        collection={collection}
+                        variablesAutocomplete={true}
                       />
                     </div>
                   </div>

packages/bruno-app/src/components/SingleLineEditor/index.js

@@ -90,6 +90,7 @@ class SingleLineEditor extends Component {
     
     this.editor.setValue(String(this.props.value ?? ''));
     this.editor.on('change', this._onEdit);
+    this.editor.on('paste', this._onPaste);
     this.addOverlay(variables);
     this._enableMaskedEditor(this.props.isSecret);
     this.setState({ maskInput: this.props.isSecret });
@@ -117,6 +118,8 @@ class SingleLineEditor extends Component {
     }
   };
 
+  _onPaste = (_, event) => this.props.onPaste?.(event);
+
   componentDidUpdate(prevProps) {
     // Ensure the changes caused by this update are not interpreted as
     // user-input changes which could otherwise result in an infinite
@@ -147,6 +150,7 @@ class SingleLineEditor extends Component {
   componentWillUnmount() {
     if (this.editor) {
       this.editor.off('change', this._onEdit);
+      this.editor.off('paste', this._onPaste);
       this.editor.getWrapperElement().remove();
       this.editor = null;
     }