feat: refactored logic around query param parsing

packages/bruno-app/package.json

@@ -7,6 +7,7 @@
     "build": "next build && next export",
     "start": "next start",
     "lint": "next lint",
+    "test": "jest",
     "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
   },
   "dependencies": {

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

@@ -160,12 +160,12 @@ export default class QueryEditor extends React.Component {
     if (this.props.theme !== prevProps.theme && this.editor) {
       this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
     }
-    this.ignoreChangeEvent = false;
     let variables = getEnvironmentVariables(this.props.collection);
     if (!isEqual(variables, this.variables)) {
       this.editor.options.brunoVarInfo.variables = variables;
       this.addOverlay();
     }
+    this.ignoreChangeEvent = false;
   }
 
   componentWillUnmount() {

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

@@ -1,13 +1,14 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  width: 100%;
   height: 30px;
   overflow-y: hidden;
   overflow-x: hidden;
 
   .CodeMirror {
     background: transparent;
-    height: 30px;
+    height: 34px;
     font-size: 14px;
     line-height: 30px;
     overflow: hidden;
@@ -16,6 +17,10 @@ const StyledWrapper = styled.div`
       display: none !important;
     }
 
+    .CodeMirror-scroll {
+      overflow: hidden !important;
+    }
+
     .CodeMirror-hscrollbar {
       display: none !important;
     }

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

@@ -14,6 +14,10 @@ if (!SERVER_RENDERED) {
 class SingleLineEditor extends Component {
   constructor(props) {
     super(props);
+    // Keep a cached version of the value, this cache will be updated when the
+    // editor is updated, which can later be used to protect the editor from
+    // unnecessary updates during the update lifecycle.
+    this.cachedValue = props.value || '';
     this.editorRef = React.createRef();
     this.variables = {};
   }
@@ -68,14 +72,26 @@ class SingleLineEditor extends Component {
         'Tab': () => {}
       },
     });
-    this.editor.setValue(this.props.value);
+    this.editor.setValue(this.props.value || '');
-    this.editor.on('change', (cm) => {
+    this.editor.on('change', this._onEdit);
-      this.props.onChange(cm.getValue());
-    });
     this.addOverlay();
   }
 
+  _onEdit = () => {
+    if (!this.ignoreChangeEvent && this.editor) {
+      this.cachedValue = this.editor.getValue();
+      if (this.props.onChange) {
+        this.props.onChange(this.cachedValue);
+      }
+    }
+  };
+
   componentDidUpdate(prevProps) {
+    // Ensure the changes caused by this update are not interpretted as
+    // user-input changes which could otherwise result in an infinite
+    // event loop.
+    this.ignoreChangeEvent = true;
+
     let variables = getEnvironmentVariables(this.props.collection);
     if (!isEqual(variables, this.variables)) {
       this.editor.options.brunoVarInfo.variables = variables;
@@ -84,6 +100,11 @@ class SingleLineEditor extends Component {
     if (this.props.theme !== prevProps.theme && this.editor) {
       this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
     }
+    if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
+      this.cachedValue = this.props.value;
+      this.editor.setValue(this.props.value);
+    }
+    this.ignoreChangeEvent = false;
   }
 
   componentWillUnmount() {

packages/bruno-app/src/utils/url/index.js

@@ -1,25 +1,29 @@
 import isEmpty from 'lodash/isEmpty';
 import trim from 'lodash/trim';
 import each from 'lodash/each';
-import splitOnFirst from 'split-on-first';
+import filter from 'lodash/filter';
+
+const hasLength = (str) => {
+  if(!str || !str.length) {
+    return false;
+  }
+
+  str = str.trim();
+
+  return str.length > 0;
+};
 
 export const parseQueryParams = (query) => {
   if (!query || !query.length) {
     return [];
   }
 
-  let params = query.split('&');
+  let params =  query.split('&').map(param => {
-  let result = [];
+    let [name, value = ''] = param.split('=');
+    return { name, value };
+  });
 
-  for (let i = 0; i < params.length; i++) {
+  return filter(params, (p) => hasLength(p.name));
-    let pair = splitOnFirst(params[i], '=');
-    result.push({
-      name: pair[0],
-      value: pair[1]
-    });
-  }
-
-  return result;
 };
 
 export const stringifyQueryParams = (params) => {

packages/bruno-app/src/utils/url/index.spec.js

@@ -0,0 +1,43 @@
+import { parseQueryParams } from './index';
+
+describe('Url Utils - parseQueryParams', () => {
+  it('should parse query - case 1',  () => {
+    const params = parseQueryParams("");
+    expect(params).toEqual([]);
+  });
+
+  it('should parse query - case 2',  () => {
+    const params = parseQueryParams("a");
+    expect(params).toEqual([{name: 'a', value: ''}]);
+  });
+
+  it('should parse query - case 3',  () => {
+    const params = parseQueryParams("a=");
+    expect(params).toEqual([{name: 'a', value: ''}]);
+  });
+
+  it('should parse query - case 4',  () => {
+    const params = parseQueryParams("a=1");
+    expect(params).toEqual([{name: 'a', value: '1'}]);
+  });
+
+  it('should parse query - case 5',  () => {
+    const params = parseQueryParams("a=1&");
+    expect(params).toEqual([{name: 'a', value: '1'}]);
+  });
+
+  it('should parse query - case 6',  () => {
+    const params = parseQueryParams("a=1&b");
+    expect(params).toEqual([{name: 'a', value: '1'}, {name: 'b', value: ''}]);
+  });
+
+  it('should parse query - case 7',  () => {
+    const params = parseQueryParams("a=1&b=");
+    expect(params).toEqual([{name: 'a', value: '1'}, {name: 'b', value: ''}]);
+  });
+
+  it('should parse query - case 8',  () => {
+    const params = parseQueryParams("a=1&b=2");
+    expect(params).toEqual([{name: 'a', value: '1'}, {name: 'b', value: '2'}]);
+  });
+});