chore: backstage catalog

.github/workflows/bump-homebrew-cask.yml

@@ -1,12 +0,0 @@
-name: Bump Homebrew Cask
-
-on:
-  release:
-    types: [published]
-
-jobs:
-  bump:
-    runs-on: macos-10.15
-    steps:
-      - name: Bump Homebrew Cask
-        run: brew bump-cask-pr bruno --version "${GITHUB_REF_NAME#v}"  

.github/workflows/unit-tests.yml

@@ -1,29 +0,0 @@
-name: Unit Tests
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - name: Install dependencies
-      run: npm i --legacy-peer-deps
-    - name: Test Package bruno-query
-      run: npm run test --workspace=packages/bruno-query
-    - name: Build Package bruno-query
-      run: npm run build --workspace=packages/bruno-query
-    - name: Test Package bruno-lang
-      run: npm run test --workspace=packages/bruno-lang
-    - name: Test Package bruno-schema
-      run: npm run test --workspace=packages/bruno-schema
-    - name: Test Package bruno-app
-      run: npm run test --workspace=packages/bruno-app
-    - name: Test Package bruno-js
-      run: npm run test --workspace=packages/bruno-js

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx pretty-quick --staged

.nvmrc

@@ -1 +1 @@
-v18.13.0
+v14.18.0

.prettierrc.json

@@ -1,7 +0,0 @@
-{
-  "trailingComma": "none",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120
-}

catalog-info.yaml

@@ -0,0 +1,16 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "bruno"
+  links:
+    - url: https://example.com/user
+      title: Examples Users
+      icon: user
+    - url: https://example.com/group
+      title: Example Group
+      icon: group
+spec:
+  type: component
+  lifecycle: production
+  owner: anoop
+  system: tech-docs

contributing.md

@@ -23,7 +23,25 @@ You would need [Node v14.x or the latest LTS version](https://nodejs.org/en/) an
 
 ### Lets start coding
 
-Please reference [development.md](docs/development.md) for instructions on running the local development environment.
+```bash
+# clone and cd into bruno
+# use Node 14.x, Npm 8.x
+
+# Install deps (note that we use npm workspaces)
+npm i
+
+# run next app
+npm run dev:web
+
+# run electron app
+# neededonly if you want to test changes related to electron app
+# please note that both web and electron use the same code
+# if it works in web, then it should also work in electron
+npm run dev:electron
+
+# open in browser
+open http://localhost:3000
+```
 
 ### Raising Pull Request
 

docs/development.md

@@ -1,53 +1,27 @@
-## Development
-
-Bruno is being developed as a desktop app. You need to load the app by running the nextjs app in one terminal and then run the electron app in another terminal.
-
-### Dependencies
-* NodeJS v18
-
-### Local Development
+## development
 
 ```bash
-# use nodejs 18 version
-nvm use
-
 # install deps
-npm i --legacy-peer-deps
+npm i
 
-# build graphql docs
-# note: you can for now ignore the error thrown while building the graphql docs
-npm run build:graphql-docs
+# run next app
+npm run dev --workspace=packages/bruno-app
 
-# build bruno query
-npm run build:bruno-query
+# run electron app
+npm run dev --workspace=packages/bruno-electron
 
-# run next app (terminal 1)
-npm run dev:web
-
-# run electron app (terminal 2)
-npm run dev:electron
+# build next app
+npm run build --workspace=packages/bruno-app
 ```
 
-### Troubleshooting
+## fix
 
 You might encounter a `Unsupported platform` error when you run `npm install`. To fix this, you will need to delete `node_modules` and `package-lock.json` and run `npm install`. This should install all the necessary packages needed to run the app.
 
-```shell
-# Delete node_modules in sub-directories
-find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
-  rm -rf "$dir"
-done
-
-# Delete package-lock in sub-directories
-find . -type f -name "package-lock.json" -delete
-```
-
-### Testing
+# testing
 
 ```bash
 # bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# bruno-lang
-npm test --workspace=packages/bruno-lang
 ```

package.json

@@ -4,40 +4,29 @@
   "workspaces": [
     "packages/bruno-app",
     "packages/bruno-electron",
-    "packages/bruno-cli",
     "packages/bruno-tauri",
     "packages/bruno-schema",
-    "packages/bruno-query",
-    "packages/bruno-js",
-    "packages/bruno-lang",
     "packages/bruno-testbench",
     "packages/bruno-graphql-docs"
   ],
-  "homepage": "https://usebruno.com",
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
-    "@jest/globals": "^29.2.0",
     "@playwright/test": "^1.27.1",
-    "husky": "^8.0.3",
     "jest": "^29.2.0",
-    "pretty-quick": "^3.1.3",
-    "randomstring": "^1.2.2",
-    "ts-jest": "^29.0.5"
+    "randomstring": "^1.2.2"
   },
   "scripts": {
     "dev:web": "npm run dev --workspace=packages/bruno-app",
     "build:web": "npm run build --workspace=packages/bruno-app",
     "prettier:web": "npm run prettier --workspace=packages/bruno-app",
     "dev:electron": "npm run dev --workspace=packages/bruno-electron",
-    "build:bruno-query": "npm run build --workspace=packages/bruno-query",
     "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
+    "build:chrome-extension": "./scripts/build-chrome-extension.sh",
     "build:electron": "./scripts/build-electron.sh",
     "test:e2e": "npx playwright test",
-    "test:report": "npx playwright show-report",
-    "prepare": "husky install"
+    "test:report": "npx playwright show-report"
   },
   "overrides": {
     "rollup": "3.2.5"
-  },
-  "dependencies": {}
+  }
 }

packages/bruno-app/.prettierrc.json

@@ -3,5 +3,5 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
-  "printWidth": 120
+  "printWidth": 180
 }

packages/bruno-app/next.config.js

@@ -1,9 +1,8 @@
 module.exports = {
-  reactStrictMode: false,
+  reactStrictMode: true,
   publicRuntimeConfig: {
     CI: process.env.CI,
-    PLAYWRIGHT: process.env.PLAYWRIGHT,
-    ENV: process.env.ENV
+    PLAYWRIGHT: process.env.PLAYWRIGHT
   },
   webpack: (config, { isServer }) => {
     // Fixes npm packages that depend on `fs` module

packages/bruno-app/package.json

@@ -1,13 +1,11 @@
 {
   "name": "@usebruno/app",
-  "version": "0.3.0",
   "private": true,
   "scripts": {
-    "dev": "cross-env ENV=dev next dev",
+    "dev": "next dev",
     "build": "next build && next export",
     "start": "next start",
     "lint": "next lint",
-    "test": "jest",
     "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
   },
   "dependencies": {
@@ -17,8 +15,8 @@
     "@reduxjs/toolkit": "^1.8.0",
     "@tabler/icons": "^1.46.0",
     "@tippyjs/react": "^4.2.6",
+    "@usebruno/schema": "0.2.0",
     "@usebruno/graphql-docs": "0.1.0",
-    "@usebruno/schema": "0.5.0",
     "axios": "^0.26.0",
     "classnames": "^2.3.1",
     "codemirror": "^5.65.2",
@@ -28,7 +26,7 @@
     "file-saver": "^2.0.5",
     "formik": "^2.2.9",
     "graphiql": "^1.5.9",
-    "graphql": "^16.6.0",
+    "graphql": "^16.2.0",
     "graphql-request": "^3.7.0",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
@@ -36,24 +34,21 @@
     "markdown-it": "^13.0.1",
     "mousetrap": "^1.6.5",
     "nanoid": "3.3.4",
-    "next": "12.3.3",
+    "next": "12.3.1",
     "path": "^0.12.7",
     "platform": "^1.3.6",
     "posthog-node": "^2.1.0",
     "qs": "^6.11.0",
-    "react": "18.2.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "18.2.0",
-    "react-github-btn": "^1.4.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-hot-toast": "^2.4.0",
-    "react-inspector": "^6.0.2",
     "react-redux": "^7.2.6",
-    "react-tooltip": "^5.5.2",
+    "react-tabs": "^3.2.3",
+    "reckonjs": "^0.1.2",
     "sass": "^1.46.0",
+    "split-on-first": "^3.0.0",
     "styled-components": "^5.3.3",
     "tailwindcss": "^2.2.19",
-    "xml-formatter": "^3.5.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {
@@ -63,7 +58,6 @@
     "@babel/preset-react": "^7.16.0",
     "@babel/runtime": "^7.16.3",
     "babel-loader": "^8.2.3",
-    "cross-env": "^7.0.3",
     "css-loader": "^6.5.1",
     "file-loader": "^6.2.0",
     "html-loader": "^3.0.1",

packages/bruno-app/src/api/auth.js

@@ -0,0 +1,23 @@
+import { get, post, put } from './base';
+
+// not used. kept as a placeholder for reference while implementing license key stuff
+const AuthApi = {
+  whoami: () => get('auth/v1/user/whoami'),
+  signup: (params) => post('auth/v1/user/signup', params),
+  login: (params) => {
+    return new Promise((resolve, reject) => {
+      const { ipcRenderer } = window.require('electron');
+
+      ipcRenderer
+        .invoke('bruno-account-request', {
+          data: params,
+          method: 'POST',
+          url: `${process.env.NEXT_PUBLIC_BRUNO_SERVER_API}/auth/v1/user/login`
+        })
+        .then(resolve)
+        .catch(reject);
+    });
+  }
+};
+
+export default AuthApi;

packages/bruno-app/src/api/base.js

@@ -0,0 +1,30 @@
+import axios from 'axios';
+
+const apiClient = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_GRAFNODE_SERVER_API
+});
+
+apiClient.interceptors.request.use(
+  (config) => {
+    const headers = {
+      'Content-Type': 'application/json'
+    };
+
+    return {
+      ...config,
+      headers: headers
+    };
+  },
+  (error) => Promise.reject(error)
+);
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    return Promise.reject(error.response ? error.response.data : error);
+  }
+);
+
+const { get, post, put, delete: destroy } = apiClient;
+
+export { get, post, put, destroy };

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

@@ -14,11 +14,7 @@ const Bruno = ({ width }) => {
           stroke="none"
           points="36,47.2521 32.9167,49.6688 30.4167,49.6688 30.3333,53.5021 31.0833,57.0021 32.1667,58.9188 35,60.4188 39.5833,59.8355 41.1667,58.0855 42.1667,53.8355 41.9167,49.8355 39.9167,50.0855"
         />
-        <polygon
-          fill="#3F3F3F"
-          stroke="none"
-          points="32.5,36.9188 30.9167,40.6688 33.0833,41.9188 34.3333,42.4188 38.6667,42.5855 41.5833,40.3355 39.8333,37.0855"
-        />
+        <polygon fill="#3F3F3F" stroke="none" points="32.5,36.9188 30.9167,40.6688 33.0833,41.9188 34.3333,42.4188 38.6667,42.5855 41.5833,40.3355 39.8333,37.0855" />
       </g>
       <g id="hair" />
       <g id="skin" />
@@ -88,27 +84,8 @@ const Bruno = ({ width }) => {
           strokeWidth="2"
           d="M52.6309,46.4628c0,0-3.0781,6.7216-7.8049,8.2712"
         />
-        <path
-          fill="none"
-          stroke="#000000"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-          d="M19.437,46.969c0,0,3.0781,6.0823,7.8049,7.632"
-        />
-        <line
-          x1="36.2078"
-          x2="36.2078"
-          y1="47.3393"
-          y2="44.3093"
-          fill="none"
-          stroke="#000000"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-        />
+        <path fill="none" stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth="2" d="M19.437,46.969c0,0,3.0781,6.0823,7.8049,7.632" />
+        <line x1="36.2078" x2="36.2078" y1="47.3393" y2="44.3093" fill="none" stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth="2" />
       </g>
     </svg>
   );

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Modal from 'components/Modal/index';
-import { IconSpeakerphone, IconBrandTwitter, IconBrandGithub, IconBrandDiscord, IconBook } from '@tabler/icons';
+import { IconSpeakerphone, IconBrandTwitter, IconBrandGithub, IconBrandDiscord } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 
 const BrunoSupport = ({ onClose }) => {
@@ -8,12 +8,6 @@ const BrunoSupport = ({ onClose }) => {
     <StyledWrapper>
       <Modal size="sm" title={'Support'} handleCancel={onClose} hideFooter={true}>
         <div className="collection-options">
-          <div className="mt-2">
-            <a href="https://docs.usebruno.com" target="_blank" className="flex items-end">
-              <IconBook size={18} strokeWidth={2} />
-              <span className="label ml-2">Documentation</span>
-            </a>
-          </div>
           <div className="mt-2">
             <a href="https://github.com/usebruno/bruno/issues" target="_blank" className="flex items-end">
               <IconSpeakerphone size={18} strokeWidth={2} />
@@ -29,7 +23,7 @@ const BrunoSupport = ({ onClose }) => {
           <div className="mt-2">
             <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-end">
               <IconBrandGithub size={18} strokeWidth={2} />
-              <span className="label ml-2">GitHub</span>
+              <span className="label ml-2">Github</span>
             </a>
           </div>
           <div className="mt-2">

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

@@ -6,26 +6,13 @@ const StyledWrapper = styled.div`
     border: solid 1px ${(props) => props.theme.codemirror.border};
   }
 
-  .CodeMirror-overlayscroll-horizontal div,
-  .CodeMirror-overlayscroll-vertical div {
-    background: #d2d7db;
-  }
-
   textarea.cm-editor {
     position: relative;
   }
 
   // Todo: dark mode temporary fix
   // Clean this
-  .CodeMirror.cm-s-monokai {
-    .CodeMirror-overlayscroll-horizontal div,
-    .CodeMirror-overlayscroll-vertical div {
-      background: #444444;
-    }
-  }
-
-  .cm-s-monokai span.cm-property,
-  .cm-s-monokai span.cm-attribute {
+  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
     color: #9cdcfe !important;
   }
 
@@ -33,20 +20,13 @@ const StyledWrapper = styled.div`
     color: #ce9178 !important;
   }
 
-  .cm-s-monokai span.cm-number {
+  .cm-s-monokai span.cm-number{
     color: #b5cea8 !important;
   }
 
-  .cm-s-monokai span.cm-atom {
+  .cm-s-monokai span.cm-atom{
     color: #569cd6 !important;
   }
-
-  .cm-variable-valid {
-    color: green;
-  }
-  .cm-variable-invalid {
-    color: red;
-  }
 `;
 
 export default StyledWrapper;

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

@@ -6,9 +6,6 @@
  */
 
 import React from 'react';
-import isEqual from 'lodash/isEqual';
-import { getEnvironmentVariables } from 'utils/collections';
-import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import StyledWrapper from './StyledWrapper';
 
 let CodeMirror;
@@ -18,7 +15,7 @@ if (!SERVER_RENDERED) {
   CodeMirror = require('codemirror');
 }
 
-export default class CodeEditor extends React.Component {
+export default class QueryEditor extends React.Component {
   constructor(props) {
     super(props);
 
@@ -26,7 +23,6 @@ export default class CodeEditor extends React.Component {
     // editor is updated, which can later be used to protect the editor from
     // unnecessary updates during the update lifecycle.
     this.cachedValue = props.value || '';
-    this.variables = {};
   }
 
   componentDidMount() {
@@ -43,7 +39,6 @@ export default class CodeEditor extends React.Component {
       foldGutter: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
       readOnly: this.props.readOnly,
-      scrollbarStyle: 'overlay',
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       extraKeys: {
         'Cmd-Enter': () => {
@@ -75,12 +70,11 @@ export default class CodeEditor extends React.Component {
     }));
     if (editor) {
       editor.on('change', this._onEdit);
-      this.addOverlay();
     }
   }
 
   componentDidUpdate(prevProps) {
-    // Ensure the changes caused by this update are not interpreted as
+    // 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;
@@ -94,13 +88,7 @@ export default class CodeEditor extends React.Component {
     if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
       this.cachedValue = this.props.value;
       this.editor.setValue(this.props.value);
-    }
-
-    if (this.editor) {
-      let variables = getEnvironmentVariables(this.props.collection);
-      if (!isEqual(variables, this.variables)) {
-        this.addOverlay();
-      }
+      this.editor.setOption('mode', this.props.mode);
     }
 
     if (this.props.theme !== prevProps.theme && this.editor) {
@@ -128,15 +116,6 @@ export default class CodeEditor extends React.Component {
     );
   }
 
-  addOverlay = () => {
-    const mode = this.props.mode || 'application/ld+json';
-    let variables = getEnvironmentVariables(this.props.collection);
-    this.variables = variables;
-
-    defineCodeMirrorBrunoVariablesMode(variables, mode);
-    this.editor.setOption('mode', 'brunovariables');
-  };
-
   _onEdit = () => {
     if (!this.ignoreChangeEvent && this.editor) {
       this.cachedValue = this.editor.getValue();

packages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.js

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .settings-label {
-    width: 80px;
-  }
-
-  .textbox {
-    border: 1px solid #ccc;
-    padding: 0.15rem 0.45rem;
-    box-shadow: none;
-    border-radius: 0px;
-    outline: none;
-    box-shadow: none;
-    transition: border-color ease-in-out 0.1s;
-    border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
-
-    &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
-      outline: none !important;
-    }
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js

@@ -1,190 +0,0 @@
-import React, { useEffect } from 'react';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-
-import StyledWrapper from './StyledWrapper';
-
-const ProxySettings = ({ proxyConfig, onUpdate }) => {
-  const formik = useFormik({
-    initialValues: {
-      enabled: proxyConfig.enabled || false,
-      protocol: proxyConfig.protocol || 'http',
-      hostname: proxyConfig.hostname || '',
-      port: proxyConfig.port || '',
-      auth: {
-        enabled: proxyConfig.auth ? proxyConfig.auth.enabled || false : false,
-        username: proxyConfig.auth ? proxyConfig.auth.username || '' : '',
-        password: proxyConfig.auth ? proxyConfig.auth.password || '' : ''
-      }
-    },
-    validationSchema: Yup.object({
-      enabled: Yup.boolean(),
-      protocol: Yup.string().oneOf(['http', 'https']),
-      hostname: Yup.string().max(1024),
-      port: Yup.number().min(0).max(65535),
-      auth: Yup.object({
-        enabled: Yup.boolean(),
-        username: Yup.string().max(1024),
-        password: Yup.string().max(1024)
-      })
-    }),
-    onSubmit: (values) => {
-      onUpdate(values);
-    }
-  });
-
-  useEffect(() => {
-    formik.setValues({
-      enabled: proxyConfig.enabled || false,
-      protocol: proxyConfig.protocol || 'http',
-      hostname: proxyConfig.hostname || '',
-      port: proxyConfig.port || '',
-      auth: {
-        enabled: proxyConfig.auth ? proxyConfig.auth.enabled || false : false,
-        username: proxyConfig.auth ? proxyConfig.auth.username || '' : '',
-        password: proxyConfig.auth ? proxyConfig.auth.password || '' : ''
-      }
-    });
-  }, [proxyConfig]);
-
-  return (
-    <StyledWrapper>
-      <h1 className="font-medium mb-3">Proxy Settings</h1>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div className="ml-4 mb-3 flex items-center">
-          <label className="settings-label" htmlFor="enabled">
-            Enabled
-          </label>
-          <input type="checkbox" name="enabled" checked={formik.values.enabled} onChange={formik.handleChange} />
-        </div>
-        <div className="ml-4 mb-3 flex items-center">
-          <label className="settings-label" htmlFor="protocol">
-            Protocol
-          </label>
-          <div className="flex items-center">
-            <label className="flex items-center mr-4">
-              <input
-                type="radio"
-                name="protocol"
-                value="http"
-                checked={formik.values.protocol === 'http'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              http
-            </label>
-            <label className="flex items-center">
-              <input
-                type="radio"
-                name="protocol"
-                value="https"
-                checked={formik.values.protocol === 'https'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              https
-            </label>
-          </div>
-        </div>
-        <div className="ml-4 mb-3 flex items-center">
-          <label className="settings-label" htmlFor="hostname">
-            Hostname
-          </label>
-          <input
-            id="hostname"
-            type="text"
-            name="hostname"
-            className="block textbox"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.hostname || ''}
-          />
-          {formik.touched.hostname && formik.errors.hostname ? (
-            <div className="text-red-500">{formik.errors.hostname}</div>
-          ) : null}
-        </div>
-        <div className="ml-4 mb-3 flex items-center">
-          <label className="settings-label" htmlFor="port">
-            Port
-          </label>
-          <input
-            id="port"
-            type="number"
-            name="port"
-            className="block textbox"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.port}
-          />
-          {formik.touched.port && formik.errors.port ? <div className="text-red-500">{formik.errors.port}</div> : null}
-        </div>
-        <div className="ml-4 mb-3 flex items-center">
-          <label className="settings-label" htmlFor="auth.enabled">
-            Auth
-          </label>
-          <input
-            type="checkbox"
-            name="auth.enabled"
-            checked={formik.values.auth.enabled}
-            onChange={formik.handleChange}
-          />
-        </div>
-        <div>
-          <div className="ml-4 mb-3 flex items-center">
-            <label className="settings-label" htmlFor="auth.username">
-              Username
-            </label>
-            <input
-              id="auth.username"
-              type="text"
-              name="auth.username"
-              className="block textbox"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              value={formik.values.auth.username}
-              onChange={formik.handleChange}
-            />
-            {formik.touched.auth?.username && formik.errors.auth?.username ? (
-              <div className="text-red-500">{formik.errors.auth.username}</div>
-            ) : null}
-          </div>
-          <div className="ml-4 mb-3 flex items-center">
-            <label className="settings-label" htmlFor="auth.password">
-              Password
-            </label>
-            <input
-              id="auth.password"
-              type="text"
-              name="auth.password"
-              className="block textbox"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              value={formik.values.auth.password}
-              onChange={formik.handleChange}
-            />
-            {formik.touched.auth?.password && formik.errors.auth?.password ? (
-              <div className="text-red-500">{formik.errors.auth.password}</div>
-            ) : null}
-          </div>
-        </div>
-        <div className="mt-6">
-          <button type="submit" className="submit btn btn-md btn-secondary">
-            Save
-          </button>
-        </div>
-      </form>
-    </StyledWrapper>
-  );
-};
-
-export default ProxySettings;

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

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  table {
-    thead,
-    td {
-      border: 1px solid ${(props) => props.theme.table.border};
-
-      li {
-        background-color: ${(props) => props.theme.bg} !important;
-      }
-    }
-  }
-
-  .muted {
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,34 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import cloneDeep from 'lodash/cloneDeep';
-import toast from 'react-hot-toast';
-import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
-import { useDispatch } from 'react-redux';
-import ProxySettings from './ProxySettings';
-import StyledWrapper from './StyledWrapper';
-
-const CollectionSettings = ({ collection }) => {
-  const dispatch = useDispatch();
-
-  const proxyConfig = get(collection, 'brunoConfig.proxy', {});
-
-  const onProxySettingsUpdate = (config) => {
-    const brunoConfig = cloneDeep(collection.brunoConfig);
-    brunoConfig.proxy = config;
-    dispatch(updateBrunoConfig(brunoConfig, collection.uid))
-      .then(() => {
-        toast.success('Collection settings updated successfully');
-      })
-      .catch((err) => console.log(err) && toast.error('Failed to update collection settings'));
-  };
-
-  return (
-    <StyledWrapper className="px-4 py-4">
-      <h1 className="font-semibold mb-4">Collection Settings</h1>
-
-      <ProxySettings proxyConfig={proxyConfig} onUpdate={onProxySettingsUpdate} />
-    </StyledWrapper>
-  );
-};
-
-export default CollectionSettings;

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

@@ -43,7 +43,7 @@ const Wrapper = styled.div`
         }
 
         &.border-top {
-          border-top: solid 1px ${(props) => props.theme.dropdown.separator};
+          border-top: solid 1px ${(props) => props.theme.dropdown.seperator};
         }
       }
     }

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

@@ -5,16 +5,7 @@ import StyledWrapper from './StyledWrapper';
 const Dropdown = ({ icon, children, onCreate, placement }) => {
   return (
     <StyledWrapper className="dropdown">
-      <Tippy
-        content={children}
-        placement={placement || 'bottom-end'}
-        animation={false}
-        arrow={false}
-        onCreate={onCreate}
-        interactive={true}
-        trigger="click"
-        appendTo="parent"
-      >
+      <Tippy content={children} placement={placement || 'bottom-end'} animation={false} arrow={false} onCreate={onCreate} interactive={true} trigger="click" appendTo="parent">
         {icon}
       </Tippy>
     </StyledWrapper>

packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .current-enviroment {
-    background-color: ${(props) => props.theme.sidebar.badge.bg};
+    background-color:  ${(props) => props.theme.sidebar.workspace.bg};
     border-radius: 15px;
 
     .caret {

packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js

@@ -2,7 +2,7 @@ import React, { useRef, forwardRef, useState } from 'react';
 import find from 'lodash/find';
 import Dropdown from 'components/Dropdown';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import { IconSettings, IconCaretDown, IconDatabase, IconDatabaseOff } from '@tabler/icons';
+import { IconSettings, IconCaretDown, IconDatabase } from '@tabler/icons';
 import EnvironmentSettings from '../EnvironmentSettings';
 import toast from 'react-hot-toast';
 import { useDispatch } from 'react-redux';
@@ -35,7 +35,7 @@ const EnvironmentSelector = ({ collection }) => {
           toast.success(`No Environments are active now`);
         }
       })
-      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
+      .catch((err) => console.log(err) && toast.error('An error occured while selecting the environment'));
   };
 
   return (
@@ -63,14 +63,13 @@ const EnvironmentSelector = ({ collection }) => {
               onSelect(null);
             }}
           >
-            <IconDatabaseOff size={18} strokeWidth={1.5} />
-            <span className="ml-2">No Environment</span>
+            <span>No Environment</span>
           </div>
           <div className="dropdown-item border-top" onClick={() => setOpenSettingsModal(true)}>
             <div className="pr-2 text-gray-600">
               <IconSettings size={18} strokeWidth={1.5} />
             </div>
-            <span>Configure</span>
+            <span>Settings</span>
           </div>
         </Dropdown>
       </div>

packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js

@@ -16,10 +16,7 @@ const CreateEnvironment = ({ collection, onClose }) => {
       name: ''
     },
     validationSchema: Yup.object({
-      name: Yup.string()
-        .min(1, 'must be atleast 1 characters')
-        .max(50, 'must be 50 characters or less')
-        .required('name is required')
+      name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
     }),
     onSubmit: (values) => {
       dispatch(addEnvironment(values.name, collection.uid))
@@ -27,7 +24,7 @@ const CreateEnvironment = ({ collection, onClose }) => {
           toast.success('Environment created in collection');
           onClose();
         })
-        .catch(() => toast.error('An error occurred while created the environment'));
+        .catch(() => toast.error('An error occured while created the environment'));
     }
   });
 
@@ -43,13 +40,7 @@ const CreateEnvironment = ({ collection, onClose }) => {
 
   return (
     <Portal>
-      <Modal
-        size="sm"
-        title={'Create Environment'}
-        confirmText="Create"
-        handleConfirm={onSubmit}
-        handleCancel={onClose}
-      >
+      <Modal size="sm" title={'Create Environment'} confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
         <form className="bruno-form" onSubmit={formik.handleSubmit}>
           <div>
             <label htmlFor="name" className="block font-semibold">
@@ -68,9 +59,7 @@ const CreateEnvironment = ({ collection, onClose }) => {
               onChange={formik.handleChange}
               value={formik.values.name || ''}
             />
-            {formik.touched.name && formik.errors.name ? (
-              <div className="text-red-500">{formik.errors.name}</div>
-            ) : null}
+            {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
           </div>
         </form>
       </Modal>

packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js

@@ -14,19 +14,13 @@ const DeleteEnvironment = ({ onClose, environment, collection }) => {
         toast.success('Environment deleted successfully');
         onClose();
       })
-      .catch(() => toast.error('An error occurred while deleting the environment'));
+      .catch(() => toast.error('An error occured while deleting the environment'));
   };
 
   return (
     <Portal>
       <StyledWrapper>
-        <Modal
-          size="sm"
-          title={'Delete Environment'}
-          confirmText="Delete"
-          handleConfirm={onConfirm}
-          handleCancel={onClose}
-        >
+        <Modal size="sm" title={'Delete Environment'} confirmText="Delete" handleConfirm={onConfirm} handleCancel={onClose}>
           Are you sure you want to delete <span className="font-semibold">{environment.name}</span> ?
         </Modal>
       </StyledWrapper>

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js

@@ -5,30 +5,18 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
-    table-layout: fixed;
 
     thead,
     td {
       border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder};
-      padding: 4px 10px;
-
-      &:nth-child(1),
-      &:nth-child(4),
-      &:nth-child(5) {
-        width: 70px;
-      }
-
-      &:nth-child(2) {
-        width: 25%;
-      }
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};
+      color: ${(props) => props.theme.table.thead.color};;
       font-size: 0.8125rem;
       user-select: none;
     }
-    thead td {
+    td {
       padding: 6px 10px;
     }
   }

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js

@@ -2,16 +2,13 @@ import React, { useReducer } from 'react';
 import toast from 'react-hot-toast';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
-import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import reducer from './reducer';
-import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 
 const EnvironmentVariables = ({ environment, collection }) => {
   const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
   const [state, reducerDispatch] = useReducer(reducer, { hasChanges: false, variables: environment.variables || [] });
   const { variables, hasChanges } = state;
 
@@ -23,7 +20,7 @@ const EnvironmentVariables = ({ environment, collection }) => {
           type: 'CHANGES_SAVED'
         });
       })
-      .catch(() => toast.error('An error occurred while saving the changes'));
+      .catch(() => toast.error('An error occured while saving the changes'));
   };
 
   const addVariable = () => {
@@ -47,10 +44,6 @@ const EnvironmentVariables = ({ environment, collection }) => {
         variable.enabled = e.target.checked;
         break;
       }
-      case 'secret': {
-        variable.secret = e.target.checked;
-        break;
-      }
     }
     reducerDispatch({
       type: 'UPDATE_VAR',
@@ -70,10 +63,8 @@ const EnvironmentVariables = ({ environment, collection }) => {
       <table>
         <thead>
           <tr>
-            <td>Enabled</td>
             <td>Name</td>
             <td>Value</td>
-            <td>Secret</td>
             <td></td>
           </tr>
         </thead>
@@ -82,14 +73,6 @@ const EnvironmentVariables = ({ environment, collection }) => {
             ? variables.map((variable, index) => {
                 return (
                   <tr key={variable.uid}>
-                    <td className="text-center">
-                      <input
-                        type="checkbox"
-                        checked={variable.enabled}
-                        className="mr-3 mousetrap"
-                        onChange={(e) => handleVarChange(e, variable, 'enabled')}
-                      />
-                    </td>
                     <td>
                       <input
                         type="text"
@@ -102,26 +85,25 @@ const EnvironmentVariables = ({ environment, collection }) => {
                         onChange={(e) => handleVarChange(e, variable, 'name')}
                       />
                     </td>
-                    <td>
-                      <SingleLineEditor
-                        value={variable.value}
-                        theme={storedTheme}
-                        onChange={(newValue) => handleVarChange({ target: { value: newValue } }, variable, 'value')}
-                        collection={collection}
-                      />
-                    </td>
                     <td>
                       <input
-                        type="checkbox"
-                        checked={variable.secret}
-                        className="mr-3 mousetrap"
-                        onChange={(e) => handleVarChange(e, variable, 'secret')}
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={variable.value}
+                        className="mousetrap"
+                        onChange={(e) => handleVarChange(e, variable, 'value')}
                       />
                     </td>
                     <td>
-                      <button onClick={() => handleRemoveVars(variable)}>
-                        <IconTrash strokeWidth={1.5} size={20} />
-                      </button>
+                      <div className="flex items-center">
+                        <input type="checkbox" checked={variable.enabled} className="mr-3 mousetrap" onChange={(e) => handleVarChange(e, variable, 'enabled')} />
+                        <button onClick={() => handleRemoveVars(variable)}>
+                          <IconTrash strokeWidth={1.5} size={20} />
+                        </button>
+                      </div>
                     </td>
                   </tr>
                 );
@@ -137,12 +119,7 @@ const EnvironmentVariables = ({ environment, collection }) => {
       </div>
 
       <div>
-        <button
-          type="submit"
-          className="submit btn btn-md btn-secondary mt-2"
-          disabled={!hasChanges}
-          onClick={saveChanges}
-        >
+        <button type="submit" className="submit btn btn-md btn-secondary mt-2" disabled={!hasChanges} onClick={saveChanges}>
           Save
         </button>
       </div>

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/reducer.js

@@ -12,7 +12,6 @@ const reducer = (state, action) => {
           name: '',
           value: '',
           type: 'text',
-          secret: false,
           enabled: true
         });
         draft.hasChanges = true;
@@ -25,7 +24,6 @@ const reducer = (state, action) => {
         variable.name = action.variable.name;
         variable.value = action.variable.value;
         variable.enabled = action.variable.enabled;
-        variable.secret = action.variable.secret;
         draft.hasChanges = true;
       });
     }

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js

@@ -7,19 +7,12 @@ import DeleteEnvironment from '../../DeleteEnvironment';
 const EnvironmentDetails = ({ environment, collection }) => {
   const [openEditModal, setOpenEditModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
+  console.log(environment);
 
   return (
     <div className="px-6 flex-grow flex flex-col pt-6" style={{ maxWidth: '700px' }}>
-      {openEditModal && (
-        <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} collection={collection} />
-      )}
-      {openDeleteModal && (
-        <DeleteEnvironment
-          onClose={() => setOpenDeleteModal(false)}
-          environment={environment}
-          collection={collection}
-        />
-      )}
+      {openEditModal && <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} collection={collection} />}
+      {openDeleteModal && <DeleteEnvironment onClose={() => setOpenDeleteModal(false)} environment={environment} collection={collection} />}
       <div className="flex">
         <div className="flex flex-grow items-center">
           <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js

@@ -1,6 +1,4 @@
 import React, { useEffect, useState, forwardRef, useRef } from 'react';
-import { findEnvironmentInCollection } from 'utils/collections';
-import usePrevious from 'hooks/usePrevious';
 import EnvironmentDetails from './EnvironmentDetails';
 import CreateEnvironment from '../CreateEnvironment/index';
 import StyledWrapper from './StyledWrapper';
@@ -10,36 +8,9 @@ const EnvironmentList = ({ collection }) => {
   const [selectedEnvironment, setSelectedEnvironment] = useState(null);
   const [openCreateModal, setOpenCreateModal] = useState(false);
 
-  const envUids = environments ? environments.map((env) => env.uid) : [];
-  const prevEnvUids = usePrevious(envUids);
-
   useEffect(() => {
-    if (selectedEnvironment) {
-      return;
-    }
-
-    const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
-    if (environment) {
-      setSelectedEnvironment(environment);
-    } else {
-      setSelectedEnvironment(environments && environments.length ? environments[0] : null);
-    }
-  }, [collection, environments, selectedEnvironment]);
-
-  useEffect(() => {
-    // check env add
-    if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {
-      const newEnv = environments.find((env) => !prevEnvUids.includes(env.uid));
-      if (newEnv) {
-        setSelectedEnvironment(newEnv);
-      }
-    }
-
-    // check env delete
-    if (prevEnvUids && prevEnvUids.length && envUids.length < prevEnvUids.length) {
-      setSelectedEnvironment(environments && environments.length ? environments[0] : null);
-    }
-  }, [envUids, environments, prevEnvUids]);
+    setSelectedEnvironment(environments && environments.length ? environments[0] : null);
+  }, [environments]);
 
   if (!selectedEnvironment) {
     return null;
@@ -54,11 +25,7 @@ const EnvironmentList = ({ collection }) => {
             {environments &&
               environments.length &&
               environments.map((env) => (
-                <div
-                  key={env.uid}
-                  className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
-                  onClick={() => setSelectedEnvironment(env)}
-                >
+                <div key={env.uid} className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'} onClick={() => setSelectedEnvironment(env)}>
                   <span>{env.name}</span>
                 </div>
               ))}

packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js

@@ -16,10 +16,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
       name: environment.name
     },
     validationSchema: Yup.object({
-      name: Yup.string()
-        .min(1, 'must be atleast 1 characters')
-        .max(50, 'must be 50 characters or less')
-        .required('name is required')
+      name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
     }),
     onSubmit: (values) => {
       dispatch(renameEnvironment(values.name, environment.uid, collection.uid))
@@ -27,7 +24,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
           toast.success('Environment renamed successfully');
           onClose();
         })
-        .catch(() => toast.error('An error occurred while renaming the environment'));
+        .catch(() => toast.error('An error occured while renaming the environment'));
     }
   });
 
@@ -43,13 +40,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
 
   return (
     <Portal>
-      <Modal
-        size="sm"
-        title={'Rename Environment'}
-        confirmText="Rename"
-        handleConfirm={onSubmit}
-        handleCancel={onClose}
-      >
+      <Modal size="sm" title={'Rename Environment'} confirmText="Rename" handleConfirm={onSubmit} handleCancel={onClose}>
         <form className="bruno-form" onSubmit={formik.handleSubmit}>
           <div>
             <label htmlFor="name" className="block font-semibold">
@@ -68,9 +59,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
               onChange={formik.handleChange}
               value={formik.values.name || ''}
             />
-            {formik.touched.name && formik.errors.name ? (
-              <div className="text-red-500">{formik.errors.name}</div>
-            ) : null}
+            {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
           </div>
         </form>
       </Modal>

packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js

@@ -11,21 +11,11 @@ const EnvironmentSettings = ({ collection, onClose }) => {
   if (!environments || !environments.length) {
     return (
       <StyledWrapper>
-        <Modal
-          size="md"
-          title="Environments"
-          confirmText={'Close'}
-          handleConfirm={onClose}
-          handleCancel={onClose}
-          hideCancel={true}
-        >
+        <Modal size="md" title="Environments" confirmText={'Close'} handleConfirm={onClose} handleCancel={onClose} hideCancel={true}>
           {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
           <div className="text-center">
             <p>No environments found!</p>
-            <button
-              className="btn-create-environment text-link pr-2 py-3 mt-2 select-none"
-              onClick={() => setOpenCreateModal(true)}
-            >
+            <button className="btn-create-environment text-link pr-2 py-3 mt-2 select-none" onClick={() => setOpenCreateModal(true)}>
               + <span>Create Environment</span>
             </button>
           </div>

packages/bruno-app/src/components/Icons/Send/index.js

@@ -1,12 +1,17 @@
 import React from 'react';
 
-const SendIcon = ({ color, width }) => {
+const SendIcon = ({color, width}) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={width} viewBox="0 0 48 48">
-      <path fill={color} d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z" />
-      <path d="M0 0h48v48h-48z" fill="none" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 48 48"
+    >
+      <path fill={color} d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z"/>
+      <path d="M0 0h48v48h-48z" fill="none"/>
     </svg>
   );
-};
+}
 
 export default SendIcon;

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

@@ -19,7 +19,7 @@ const Wrapper = styled.div`
     align-items: flex-start;
     justify-content: center;
     overflow-y: auto;
-    z-index: 10;
+    z-index: 1003;
   }
 
   .bruno-modal-card {
@@ -28,7 +28,7 @@ const Wrapper = styled.div`
     background: var(--color-background-top);
     border-radius: var(--border-radius);
     position: relative;
-    z-index: 10;
+    z-index: 1003;
     max-width: calc(100% - var(--spacing-base-unit));
     box-shadow: var(--box-shadow-base);
     display: flex;
@@ -100,7 +100,7 @@ const Wrapper = styled.div`
       border-radius: 0px;
       outline: none;
       box-shadow: none;
-      transition: border-color ease-in-out 0.1s;
+      transition: border-color ease-in-out .1s;
       border-radius: 3px;
       background-color: ${(props) => props.theme.modal.input.bg};
       border: 1px solid ${(props) => props.theme.modal.input.border};

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

@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
 
 const ModalHeader = ({ title, handleCancel }) => (
   <div className="bruno-modal-header">
-    {title ? <div className="bruno-modal-header-title">{title}</div> : null}
+    {title ? <div className="bruno-modal-heade-title">{title}</div> : null}
     {handleCancel ? (
       <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null}>
         ×
@@ -14,15 +14,7 @@ const ModalHeader = ({ title, handleCancel }) => (
 
 const ModalContent = ({ children }) => <div className="bruno-modal-content px-4 py-6">{children}</div>;
 
-const ModalFooter = ({
-  confirmText,
-  cancelText,
-  handleSubmit,
-  handleCancel,
-  confirmDisabled,
-  hideCancel,
-  hideFooter
-}) => {
+const ModalFooter = ({ confirmText, cancelText, handleSubmit, handleCancel, confirmDisabled, hideCancel, hideFooter }) => {
   confirmText = confirmText || 'Save';
   cancelText = cancelText || 'Cancel';
 
@@ -38,12 +30,7 @@ const ModalFooter = ({
         </button>
       </span>
       <span>
-        <button
-          type="submit"
-          className="submit btn btn-md btn-secondary"
-          disabled={confirmDisabled}
-          onClick={handleSubmit}
-        >
+        <button type="submit" className="submit btn btn-md btn-secondary" disabled={confirmDisabled} onClick={handleSubmit}>
           {confirmText}
         </button>
       </span>
@@ -51,18 +38,7 @@ const ModalFooter = ({
   );
 };
 
-const Modal = ({
-  size,
-  title,
-  confirmText,
-  cancelText,
-  handleCancel,
-  handleConfirm,
-  children,
-  confirmDisabled,
-  hideCancel,
-  hideFooter
-}) => {
+const Modal = ({ size, title, confirmText, cancelText, handleCancel, handleConfirm, children, confirmDisabled, hideCancel, hideFooter }) => {
   const [isClosing, setIsClosing] = useState(false);
   const escFunction = (event) => {
     const escKeyCode = 27;
@@ -88,7 +64,7 @@ const Modal = ({
   if (isClosing) {
     classes += ' modal--animate-out';
   }
-  if (hideFooter) {
+  if(hideFooter) {
     classes += ' modal-footer-none';
   }
   return (

packages/bruno-app/src/components/Preferences/General/StyledWrapper.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  color: ${(props) => props.theme.text};
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/Preferences/General/index.js

@@ -1,38 +0,0 @@
-import React, { useState } from 'react';
-import { usePreferences } from 'providers/Preferences';
-import StyledWrapper from './StyledWrapper';
-
-const General = () => {
-  const { preferences, setPreferences } = usePreferences();
-
-  const [sslVerification, setSslVerification] = useState(preferences.request.sslVerification);
-
-  const handleCheckboxChange = () => {
-    const updatedPreferences = {
-      ...preferences,
-      request: {
-        ...preferences.request,
-        sslVerification: !sslVerification
-      }
-    };
-
-    setPreferences(updatedPreferences)
-      .then(() => {
-        setSslVerification(!sslVerification);
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="flex items-center mt-2">
-        <input type="checkbox" checked={sslVerification} onChange={handleCheckboxChange} className="mr-3 mousetrap" />
-        SSL Certificate Verification
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default General;

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

@@ -1,36 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.tabs {
-    margin-top: -0.5rem;
-
-    div.tab {
-      padding: 6px 0px;
-      border: none;
-      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
-      color: var(--color-tab-inactive);
-      cursor: pointer;
-
-      &:focus,
-      &:active,
-      &:focus-within,
-      &:focus-visible,
-      &:target {
-        outline: none !important;
-        box-shadow: none !important;
-      }
-
-      &.active {
-        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
-      }
-    }
-  }
-
-  section.tab-panel {
-    min-height: 300px;
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/Preferences/Support/index.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import { IconSpeakerphone, IconBrandTwitter, IconBrandGithub, IconBrandDiscord, IconBook } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
-
-const Support = () => {
-  return (
-    <StyledWrapper>
-      <div className="rows">
-        <div className="mt-2">
-          <a href="https://docs.usebruno.com" target="_blank" className="flex items-end">
-            <IconBook size={18} strokeWidth={2} />
-            <span className="label ml-2">Documentation</span>
-          </a>
-        </div>
-        <div className="mt-2">
-          <a href="https://github.com/usebruno/bruno/issues" target="_blank" className="flex items-end">
-            <IconSpeakerphone size={18} strokeWidth={2} />
-            <span className="label ml-2">Report Issues</span>
-          </a>
-        </div>
-        <div className="mt-2">
-          <a href="https://discord.com/invite/KgcZUncpjq" target="_blank" className="flex items-end">
-            <IconBrandDiscord size={18} strokeWidth={2} />
-            <span className="label ml-2">Discord</span>
-          </a>
-        </div>
-        <div className="mt-2">
-          <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-end">
-            <IconBrandGithub size={18} strokeWidth={2} />
-            <span className="label ml-2">GitHub</span>
-          </a>
-        </div>
-        <div className="mt-2">
-          <a href="https://twitter.com/use_bruno" target="_blank" className="flex items-end">
-            <IconBrandTwitter size={18} strokeWidth={2} />
-            <span className="label ml-2">Twitter</span>
-          </a>
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Support;

packages/bruno-app/src/components/Preferences/Theme/StyledWrapper.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  color: var(--color-text);
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/Preferences/Theme/index.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import StyledWrapper from './StyledWrapper';
-import { useTheme } from 'providers/Theme';
-
-const Theme = () => {
-  const { storedTheme, setStoredTheme } = useTheme();
-
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      theme: storedTheme
-    },
-    validationSchema: Yup.object({
-      theme: Yup.string().oneOf(['light', 'dark']).required('theme is required')
-    }),
-    onSubmit: (values) => {
-      setStoredTheme(values.theme);
-    }
-  });
-
-  return (
-    <StyledWrapper>
-      <div className="bruno-form">
-        <div className="flex items-center mt-2">
-          <input
-            id="light-theme"
-            className="cursor-pointer"
-            type="radio"
-            name="theme"
-            onChange={(e) => {
-              formik.handleChange(e);
-              formik.handleSubmit();
-            }}
-            value="light"
-            checked={formik.values.theme === 'light'}
-          />
-          <label htmlFor="light-theme" className="ml-1 cursor-pointer select-none">
-            Light
-          </label>
-
-          <input
-            id="dark-theme"
-            className="ml-4 cursor-pointer"
-            type="radio"
-            name="theme"
-            onChange={(e) => {
-              formik.handleChange(e);
-              formik.handleSubmit();
-            }}
-            value="dark"
-            checked={formik.values.theme === 'dark'}
-          />
-          <label htmlFor="dark-theme" className="ml-1 cursor-pointer select-none">
-            Dark
-          </label>
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Theme;

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

@@ -1,54 +0,0 @@
-import Modal from 'components/Modal/index';
-import classnames from 'classnames';
-import React, { useState } from 'react';
-import Support from './Support';
-import General from './General';
-import Theme from './Theme';
-import StyledWrapper from './StyledWrapper';
-
-const Preferences = ({ onClose }) => {
-  const [tab, setTab] = useState('general');
-
-  const getTabClassname = (tabName) => {
-    return classnames(`tab select-none ${tabName}`, {
-      active: tabName === tab
-    });
-  };
-
-  const getTabPanel = (tab) => {
-    switch (tab) {
-      case 'general': {
-        return <General />;
-      }
-
-      case 'theme': {
-        return <Theme />;
-      }
-
-      case 'support': {
-        return <Support />;
-      }
-    }
-  };
-
-  return (
-    <StyledWrapper>
-      <Modal size="lg" title="Preferences" handleCancel={onClose} hideFooter={true}>
-        <div className="flex items-center px-2 tabs" role="tablist">
-          <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
-            General
-          </div>
-          <div className={getTabClassname('theme')} role="tab" onClick={() => setTab('theme')}>
-            Theme
-          </div>
-          <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
-            Support
-          </div>
-        </div>
-        <section className="flex flex-grow px-2 mt-4 tab-panel">{getTabPanel(tab)}</section>
-      </Modal>
-    </StyledWrapper>
-  );
-};
-
-export default Preferences;

packages/bruno-app/src/components/RequestPane/Assertions/AssertionOperator/index.js

@@ -1,90 +0,0 @@
-import React from 'react';
-
-/**
- * Assertion operators
- *
- * eq          : equal to
- * neq         : not equal to
- * gt          : greater than
- * gte         : greater than or equal to
- * lt          : less than
- * lte         : less than or equal to
- * in          : in
- * notIn       : not in
- * contains    : contains
- * notContains : not contains
- * length      : length
- * matches     : matches
- * notMatches  : not matches
- * startsWith  : starts with
- * endsWith    : ends with
- * between     : between
- * isEmpty     : is empty
- * isNull      : is null
- * isUndefined : is undefined
- * isDefined   : is defined
- * isTruthy    : is truthy
- * isFalsy     : is falsy
- * isJson      : is json
- * isNumber    : is number
- * isString    : is string
- * isBoolean   : is boolean
- */
-
-const AssertionOperator = ({ operator, onChange }) => {
-  const operators = [
-    'eq',
-    'neq',
-    'gt',
-    'gte',
-    'lt',
-    'lte',
-    'in',
-    'notIn',
-    'contains',
-    'notContains',
-    'length',
-    'matches',
-    'notMatches',
-    'startsWith',
-    'endsWith',
-    'between',
-    'isEmpty',
-    'isNull',
-    'isUndefined',
-    'isDefined',
-    'isTruthy',
-    'isFalsy',
-    'isJson',
-    'isNumber',
-    'isString',
-    'isBoolean'
-  ];
-
-  const handleChange = (e) => {
-    onChange(e.target.value);
-  };
-
-  const getLabel = (operator) => {
-    switch (operator) {
-      case 'eq':
-        return 'equals';
-      case 'neq':
-        return 'notEquals';
-      default:
-        return operator;
-    }
-  };
-
-  return (
-    <select value={operator} onChange={handleChange} className="mousetrap">
-      {operators.map((operator) => (
-        <option key={operator} value={operator}>
-          {getLabel(operator)}
-        </option>
-      ))}
-    </select>
-  );
-};
-
-export default AssertionOperator;

packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js

@@ -1,212 +0,0 @@
-import React from 'react';
-import { IconTrash } from '@tabler/icons';
-import SingleLineEditor from 'components/SingleLineEditor';
-import AssertionOperator from '../AssertionOperator';
-import { useTheme } from 'providers/Theme';
-
-/**
- * Assertion operators
- *
- * eq          : equal to
- * neq         : not equal to
- * gt          : greater than
- * gte         : greater than or equal to
- * lt          : less than
- * lte         : less than or equal to
- * in          : in
- * notIn       : not in
- * contains    : contains
- * notContains : not contains
- * length      : length
- * matches     : matches
- * notMatches  : not matches
- * startsWith  : starts with
- * endsWith    : ends with
- * between     : between
- * isEmpty     : is empty
- * isNull      : is null
- * isUndefined : is undefined
- * isDefined   : is defined
- * isTruthy    : is truthy
- * isFalsy     : is falsy
- * isJson      : is json
- * isNumber    : is number
- * isString    : is string
- * isBoolean   : is boolean
- */
-const parseAssertionOperator = (str = '') => {
-  if (!str || typeof str !== 'string' || !str.length) {
-    return {
-      operator: 'eq',
-      value: str
-    };
-  }
-
-  const operators = [
-    'eq',
-    'neq',
-    'gt',
-    'gte',
-    'lt',
-    'lte',
-    'in',
-    'notIn',
-    'contains',
-    'notContains',
-    'length',
-    'matches',
-    'notMatches',
-    'startsWith',
-    'endsWith',
-    'between',
-    'isEmpty',
-    'isNull',
-    'isUndefined',
-    'isDefined',
-    'isTruthy',
-    'isFalsy',
-    'isJson',
-    'isNumber',
-    'isString',
-    'isBoolean'
-  ];
-
-  const unaryOperators = [
-    'isEmpty',
-    'isNull',
-    'isUndefined',
-    'isDefined',
-    'isTruthy',
-    'isFalsy',
-    'isJson',
-    'isNumber',
-    'isString',
-    'isBoolean'
-  ];
-
-  const [operator, ...rest] = str.trim().split(' ');
-  const value = rest.join(' ');
-
-  if (unaryOperators.includes(operator)) {
-    return {
-      operator,
-      value: ''
-    };
-  }
-
-  if (operators.includes(operator)) {
-    return {
-      operator,
-      value
-    };
-  }
-
-  return {
-    operator: 'eq',
-    value: str
-  };
-};
-
-const isUnaryOperator = (operator) => {
-  const unaryOperators = [
-    'isEmpty',
-    'isNull',
-    'isUndefined',
-    'isDefined',
-    'isTruthy',
-    'isFalsy',
-    'isJson',
-    'isNumber',
-    'isString',
-    'isBoolean'
-  ];
-
-  return unaryOperators.includes(operator);
-};
-
-const AssertionRow = ({
-  item,
-  collection,
-  assertion,
-  handleAssertionChange,
-  handleRemoveAssertion,
-  onSave,
-  handleRun
-}) => {
-  const { storedTheme } = useTheme();
-
-  const { operator, value } = parseAssertionOperator(assertion.value);
-
-  return (
-    <tr key={assertion.uid}>
-      <td>
-        <input
-          type="text"
-          autoComplete="off"
-          autoCorrect="off"
-          autoCapitalize="off"
-          spellCheck="false"
-          value={assertion.name}
-          className="mousetrap"
-          onChange={(e) => handleAssertionChange(e, assertion, 'name')}
-        />
-      </td>
-      <td>
-        <AssertionOperator
-          operator={operator}
-          onChange={(op) =>
-            handleAssertionChange(
-              {
-                target: {
-                  value: `${op} ${value}`
-                }
-              },
-              assertion,
-              'value'
-            )
-          }
-        />
-      </td>
-      <td>
-        {!isUnaryOperator(operator) ? (
-          <SingleLineEditor
-            value={value}
-            theme={storedTheme}
-            readOnly={true}
-            onSave={onSave}
-            onChange={(newValue) =>
-              handleAssertionChange(
-                {
-                  target: {
-                    value: newValue
-                  }
-                },
-                assertion,
-                'value'
-              )
-            }
-            onRun={handleRun}
-            collection={collection}
-          />
-        ) : (
-          <input type="text" className="cursor-default" disabled />
-        )}
-      </td>
-      <td>
-        <div className="flex items-center">
-          <input
-            type="checkbox"
-            checked={assertion.enabled}
-            className="mr-3 mousetrap"
-            onChange={(e) => handleAssertionChange(e, assertion, 'enabled')}
-          />
-          <button onClick={() => handleRemoveAssertion(assertion)}>
-            <IconTrash strokeWidth={1.5} size={20} />
-          </button>
-        </div>
-      </td>
-    </tr>
-  );
-};
-
-export default AssertionRow;

packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js

@@ -1,60 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    font-weight: 600;
-    table-layout: fixed;
-
-    thead,
-    td {
-      border: 1px solid ${(props) => props.theme.table.border};
-    }
-
-    thead {
-      color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
-      user-select: none;
-    }
-    td {
-      padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(4) {
-        width: 70px;
-      }
-
-      select {
-        background-color: transparent;
-      }
-    }
-  }
-
-  .btn-add-assertion {
-    font-size: 0.8125rem;
-  }
-
-  input[type='text'] {
-    width: 100%;
-    border: solid 1px transparent;
-    outline: none !important;
-    background-color: inherit;
-
-    &:focus {
-      outline: none !important;
-      border: solid 1px transparent;
-    }
-  }
-
-  input[type='checkbox'] {
-    cursor: pointer;
-    position: relative;
-    top: 1px;
-  }
-`;
-
-export default Wrapper;

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

@@ -1,96 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import cloneDeep from 'lodash/cloneDeep';
-import { useDispatch } from 'react-redux';
-import { addAssertion, updateAssertion, deleteAssertion } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import AssertionRow from './AssertionRow';
-import StyledWrapper from './StyledWrapper';
-
-const Assertions = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const assertions = item.draft ? get(item, 'draft.request.assertions') : get(item, 'request.assertions');
-
-  const handleAddAssertion = () => {
-    dispatch(
-      addAssertion({
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleAssertionChange = (e, _assertion, type) => {
-    const assertion = cloneDeep(_assertion);
-    switch (type) {
-      case 'name': {
-        assertion.name = e.target.value;
-        break;
-      }
-      case 'value': {
-        assertion.value = e.target.value;
-        break;
-      }
-      case 'enabled': {
-        assertion.enabled = e.target.checked;
-        break;
-      }
-    }
-    dispatch(
-      updateAssertion({
-        assertion: assertion,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleRemoveAssertion = (assertion) => {
-    dispatch(
-      deleteAssertion({
-        assertUid: assertion.uid,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Expr</td>
-            <td>Operator</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {assertions && assertions.length
-            ? assertions.map((assertion) => {
-                return (
-                  <AssertionRow
-                    key={assertion.uid}
-                    assertion={assertion}
-                    item={item}
-                    collection={collection}
-                    handleAssertionChange={handleAssertionChange}
-                    handleRemoveAssertion={handleRemoveAssertion}
-                    onSave={onSave}
-                    handleRun={handleRun}
-                  />
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-      <button className="btn-add-assertion text-link pr-2 py-3 mt-2 select-none" onClick={handleAddAssertion}>
-        + Add Assertion
-      </button>
-    </StyledWrapper>
-  );
-};
-export default Assertions;

packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  font-size: 0.8125rem;
-
-  .auth-mode-selector {
-    background: ${(props) => props.theme.requestTabPanel.bodyModeSelect.color};
-    border-radius: 3px;
-
-    .dropdown-item {
-      padding: 0.2rem 0.6rem !important;
-    }
-
-    .label-item {
-      padding: 0.2rem 0.6rem !important;
-    }
-  }
-
-  .caret {
-    color: rgb(140, 140, 140);
-    fill: rgb(140 140 140);
-  }
-`;
-
-export default Wrapper;

packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js

@@ -1,70 +0,0 @@
-import React, { useRef, forwardRef } from 'react';
-import get from 'lodash/get';
-import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
-import { useDispatch } from 'react-redux';
-import { updateRequestAuthMode } from 'providers/ReduxStore/slices/collections';
-import { humanizeRequestAuthMode } from 'utils/collections';
-import StyledWrapper from './StyledWrapper';
-
-const AuthMode = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
-
-  const Icon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none">
-        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
-
-  const onModeChange = (value) => {
-    dispatch(
-      updateRequestAuthMode({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        mode: value
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('basic');
-            }}
-          >
-            Basic Auth
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('bearer');
-            }}
-          >
-            Bearer Token
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('none');
-            }}
-          >
-            No Auth
-          </div>
-        </Dropdown>
-      </div>
-    </StyledWrapper>
-  );
-};
-export default AuthMode;

packages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.js

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div``;
-
-export default Wrapper;

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
-import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-
-const RequestBody = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
-
-  const onEdit = (value) => {
-    // dispatch(
-    //   updateRequestBody({
-    //     content: value,
-    //     itemUid: item.uid,
-    //     collectionUid: collection.uid
-    //   })
-    // );
-  };
-
-  if (authMode === 'basic') {
-    return <div>Basic Auth</div>;
-  }
-
-  if (authMode === 'bearer') {
-    return <div>Bearer Token</div>;
-  }
-
-  return <StyledWrapper className="w-full">No Auth</StyledWrapper>;
-};
-export default RequestBody;

packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js

@@ -5,7 +5,6 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
-    table-layout: fixed;
 
     thead,
     td {
@@ -19,14 +18,6 @@ const Wrapper = styled.div`
     }
     td {
       padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(3) {
-        width: 70px;
-      }
     }
   }
 
@@ -39,7 +30,6 @@ const Wrapper = styled.div`
     border: solid 1px transparent;
     outline: none !important;
     color: ${(props) => props.theme.table.input.color};
-    background: transparent;
 
     &:focus {
       outline: none !important;

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

@@ -3,19 +3,11 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
-import { useTheme } from 'providers/Theme';
-import {
-  addFormUrlEncodedParam,
-  updateFormUrlEncodedParam,
-  deleteFormUrlEncodedParam
-} from 'providers/ReduxStore/slices/collections';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { addFormUrlEncodedParam, updateFormUrlEncodedParam, deleteFormUrlEncodedParam } from 'providers/ReduxStore/slices/collections';
 import StyledWrapper from './StyledWrapper';
 
 const FormUrlEncodedParams = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
   const params = item.draft ? get(item, 'draft.request.body.formUrlEncoded') : get(item, 'request.body.formUrlEncoded');
 
   const addParam = () => {
@@ -27,8 +19,6 @@ const FormUrlEncodedParams = ({ item, collection }) => {
     );
   };
 
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleParamChange = (e, _param, type) => {
     const param = cloneDeep(_param);
     switch (type) {
@@ -40,6 +30,10 @@ const FormUrlEncodedParams = ({ item, collection }) => {
         param.value = e.target.value;
         break;
       }
+      case 'description': {
+        param.description = e.target.value;
+        break;
+      }
       case 'enabled': {
         param.enabled = e.target.checked;
         break;
@@ -71,6 +65,7 @@ const FormUrlEncodedParams = ({ item, collection }) => {
           <tr>
             <td>Key</td>
             <td>Value</td>
+            <td>Description</td>
             <td></td>
           </tr>
         </thead>
@@ -92,33 +87,32 @@ const FormUrlEncodedParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <SingleLineEditor
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
                         value={param.value}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleParamChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            param,
-                            'value'
-                          )
-                        }
-                        onRun={handleRun}
-                        collection={collection}
+                        className="mousetrap"
+                        onChange={(e) => handleParamChange(e, param, 'value')}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={param.description}
+                        className="mousetrap"
+                        onChange={(e) => handleParamChange(e, param, 'description')}
                       />
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={param.enabled}
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleParamChange(e, param, 'enabled')}
-                        />
+                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
                         <button onClick={() => handleRemoveParams(param)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>

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

@@ -6,16 +6,10 @@ import { IconRefresh, IconLoader2, IconBook, IconDownload } from '@tabler/icons'
 import { useSelector, useDispatch } from 'react-redux';
 import { updateRequestPaneTab } from 'providers/ReduxStore/slices/tabs';
 import QueryEditor from 'components/RequestPane/QueryEditor';
-import GraphQLVariables from 'components/RequestPane/GraphQLVariables';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
-import Vars from 'components/RequestPane/Vars';
-import Assertions from 'components/RequestPane/Assertions';
-import Script from 'components/RequestPane/Script';
-import Tests from 'components/RequestPane/Tests';
 import { useTheme } from 'providers/Theme';
 import { updateRequestGraphqlQuery } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { findEnvironmentInCollection } from 'utils/collections';
 import useGraphqlSchema from './useGraphqlSchema';
 import StyledWrapper from './StyledWrapper';
 
@@ -24,24 +18,26 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
   const query = item.draft ? get(item, 'draft.request.body.graphql.query') : get(item, 'request.body.graphql.query');
-  const variables = item.draft
-    ? get(item, 'draft.request.body.graphql.variables')
-    : get(item, 'request.body.graphql.variables');
   const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
-  const { storedTheme } = useTheme();
-
-  const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
-
-  let { schema, loadSchema, isLoading: isSchemaLoading, error: schemaError } = useGraphqlSchema(url, environment);
+  const {
+    storedTheme
+  } = useTheme();
+  
+  let {
+    schema,
+    loadSchema,
+    isLoading: isSchemaLoading,
+    error: schemaError
+  } = useGraphqlSchema(url);
 
   const loadGqlSchema = () => {
-    if (!isSchemaLoading) {
+    if(!isSchemaLoading) {
       loadSchema();
     }
   };
 
   useEffect(() => {
-    if (onSchemaLoad) {
+    if(onSchemaLoad) {
       onSchemaLoad(schema);
     }
   }, [schema]);
@@ -70,38 +66,20 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
   const getTabPanel = (tab) => {
     switch (tab) {
       case 'query': {
-        return (
-          <QueryEditor
-            collection={collection}
-            theme={storedTheme}
-            schema={schema}
-            width={leftPaneWidth}
-            onSave={onSave}
-            value={query}
-            onRun={onRun}
-            onEdit={onQueryChange}
-            onClickReference={handleGqlClickReference}
-          />
-        );
-      }
-      case 'variables': {
-        return <GraphQLVariables item={item} variables={variables} collection={collection} />;
+        return <QueryEditor
+          theme={storedTheme}
+          schema={schema}
+          width={leftPaneWidth}
+          onSave={onSave}
+          value={query}
+          onRun={onRun}
+          onEdit={onQueryChange}
+          onClickReference={handleGqlClickReference}
+        />;
       }
       case 'headers': {
         return <RequestHeaders item={item} collection={collection} />;
       }
-      case 'vars': {
-        return <Vars item={item} collection={collection} />;
-      }
-      case 'assert': {
-        return <Assertions item={item} collection={collection} />;
-      }
-      case 'script': {
-        return <Script item={item} collection={collection} />;
-      }
-      case 'tests': {
-        return <Tests item={item} collection={collection} />;
-      }
       default: {
         return <div className="mt-4">404 | Not found</div>;
       }
@@ -114,7 +92,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
 
   const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
   if (!focusedTab || !focusedTab.uid || !focusedTab.requestPaneTab) {
-    return <div className="pb-4 px-4">An error occurred!</div>;
+    return <div className="pb-4 px-4">An error occured!</div>;
   }
 
   const getTabClassname = (tabName) => {
@@ -125,38 +103,27 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex flex-wrap items-center tabs" role="tablist">
+      <div className="flex items-center tabs" role="tablist">
         <div className={getTabClassname('query')} role="tab" onClick={() => selectTab('query')}>
           Query
         </div>
-        <div className={getTabClassname('variables')} role="tab" onClick={() => selectTab('variables')}>
-          Variables
-        </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
         </div>
-        <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
-          Vars
-        </div>
-        <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
-          Script
-        </div>
-        <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
-          Assert
-        </div>
-        <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
-          Tests
-        </div>
-        <div className="flex flex-grow justify-end items-center" style={{ fontSize: 13 }}>
-          <div className="flex items-center cursor-pointer hover:underline" onClick={loadGqlSchema}>
-            {isSchemaLoading ? <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5} /> : null}
-            {!isSchemaLoading && !schema ? <IconDownload size={18} strokeWidth={1.5} /> : null}
-            {!isSchemaLoading && schema ? <IconRefresh size={18} strokeWidth={1.5} /> : null}
-            <span className="ml-1">Schema</span>
+        <div className="flex flex-grow justify-end items-center" style={{fontSize: 13}}>
+          <div className='flex items-center cursor-pointer hover:underline' onClick={loadGqlSchema}>
+            {isSchemaLoading ? (
+              <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5}/>
+            ) : null}
+            {!isSchemaLoading && !schema ? <IconDownload size={18} strokeWidth={1.5}/> : null }
+            {!isSchemaLoading && schema ? <IconRefresh size={18} strokeWidth={1.5}/> : null }
+            <span className='ml-1'>{schema ? 'Schema' : 'Load Schema'}</span>
           </div>
-          <div className="flex items-center cursor-pointer hover:underline ml-2" onClick={toggleDocs}>
-            <IconBook size={18} strokeWidth={1.5} />
-            <span className="ml-1">Docs</span>
+          <div
+            className='flex items-center cursor-pointer hover:underline ml-2'
+            onClick={toggleDocs}
+          >
+            <IconBook size={18} strokeWidth={1.5} /><span className='ml-1'>Docs</span>
           </div>
         </div>
       </div>

packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/useGraphqlSchema.js

@@ -1,19 +1,34 @@
 import { useState } from 'react';
 import toast from 'react-hot-toast';
-import { buildClientSchema } from 'graphql';
-import { fetchGqlSchema } from 'utils/network';
+import { getIntrospectionQuery, buildClientSchema } from 'graphql';
 import { simpleHash } from 'utils/common';
 
 const schemaHashPrefix = 'bruno.graphqlSchema';
 
-const useGraphqlSchema = (endpoint, environment) => {
+const fetchSchema = (endpoint) => {
+  const introspectionQuery = getIntrospectionQuery();
+  const queryParams = {
+    query: introspectionQuery
+  };
+
+  return fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(queryParams)
+  });
+}
+
+const useGraphqlSchema = (endpoint) => {
   const localStorageKey = `${schemaHashPrefix}.${simpleHash(endpoint)}`;
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [schema, setSchema] = useState(() => {
     try {
       const saved = localStorage.getItem(localStorageKey);
-      if (!saved) {
+      if(!saved) {
         return null;
       }
       return buildClientSchema(JSON.parse(saved));
@@ -25,14 +40,14 @@ const useGraphqlSchema = (endpoint, environment) => {
 
   const loadSchema = () => {
     setIsLoading(true);
-    fetchGqlSchema(endpoint, environment)
-      .then((res) => res.data)
+    fetchSchema(endpoint)
+      .then((res) => res.json())
       .then((s) => {
         if (s && s.data) {
           setSchema(buildClientSchema(s.data));
           setIsLoading(false);
           localStorage.setItem(localStorageKey, JSON.stringify(s.data));
-          toast.success('GraphQL Schema loaded successfully');
+          toast.success('Graphql Schema loaded successfully');
         } else {
           return Promise.reject(new Error('An error occurred while introspecting schema'));
         }
@@ -40,7 +55,7 @@ const useGraphqlSchema = (endpoint, environment) => {
       .catch((err) => {
         setIsLoading(false);
         setError(err);
-        toast.error('Error occurred while loading GraphQL Schema');
+        toast.error('Error occured while loading Graphql Schema');
       });
   };
 

packages/bruno-app/src/components/RequestPane/GraphQLVariables/StyledWrapper.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 220px);
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,42 +0,0 @@
-import React from 'react';
-import { useDispatch } from 'react-redux';
-import CodeEditor from 'components/CodeEditor';
-import { updateRequestGraphqlVariables } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
-
-const GraphQLVariables = ({ variables, item, collection }) => {
-  const dispatch = useDispatch();
-
-  const { storedTheme } = useTheme();
-
-  const onEdit = (value) => {
-    dispatch(
-      updateRequestGraphqlVariables({
-        variables: value,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onRun = () => dispatch(sendRequest(item, collection.uid));
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-
-  return (
-    <StyledWrapper className="w-full">
-      <CodeEditor
-        collection={collection}
-        value={variables || ''}
-        theme={storedTheme}
-        onEdit={onEdit}
-        mode="javascript"
-        onRun={onRun}
-        onSave={onSave}
-      />
-    </StyledWrapper>
-  );
-};
-
-export default GraphQLVariables;

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

@@ -7,12 +7,6 @@ import QueryParams from 'components/RequestPane/QueryParams';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import RequestBody from 'components/RequestPane/RequestBody';
 import RequestBodyMode from 'components/RequestPane/RequestBody/RequestBodyMode';
-import Auth from 'components/RequestPane/Auth';
-import AuthMode from 'components/RequestPane/Auth/AuthMode';
-import Vars from 'components/RequestPane/Vars';
-import Assertions from 'components/RequestPane/Assertions';
-import Script from 'components/RequestPane/Script';
-import Tests from 'components/RequestPane/Tests';
 import StyledWrapper from './StyledWrapper';
 
 const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
@@ -40,21 +34,6 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
       case 'headers': {
         return <RequestHeaders item={item} collection={collection} />;
       }
-      case 'auth': {
-        return <Auth item={item} collection={collection} />;
-      }
-      case 'vars': {
-        return <Vars item={item} collection={collection} />;
-      }
-      case 'assert': {
-        return <Assertions item={item} collection={collection} />;
-      }
-      case 'script': {
-        return <Script item={item} collection={collection} />;
-      }
-      case 'tests': {
-        return <Tests item={item} collection={collection} />;
-      }
       default: {
         return <div className="mt-4">404 | Not found</div>;
       }
@@ -67,7 +46,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
 
   const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
   if (!focusedTab || !focusedTab.uid || !focusedTab.requestPaneTab) {
-    return <div className="pb-4 px-4">An error occurred!</div>;
+    return <div className="pb-4 px-4">An error occured!</div>;
   }
 
   const getTabClassname = (tabName) => {
@@ -78,9 +57,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex flex-wrap items-center tabs" role="tablist">
+      <div className="flex items-center tabs" role="tablist">
         <div className={getTabClassname('params')} role="tab" onClick={() => selectTab('params')}>
-          Query
+          Params
         </div>
         <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
           Body
@@ -88,35 +67,15 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
         </div>
-        <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
-          Auth
-        </div>
-        <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
-          Vars
-        </div>
-        <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
-          Script
-        </div>
-        <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
-          Assert
-        </div>
-        <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
-          Tests
-        </div>
+        {/* Moved to post mvp */}
+        {/* <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>Auth</div> */}
         {focusedTab.requestPaneTab === 'body' ? (
           <div className="flex flex-grow justify-end items-center">
             <RequestBodyMode item={item} collection={collection} />
           </div>
         ) : null}
-        {focusedTab.requestPaneTab === 'auth' ? (
-          <div className="flex flex-grow justify-end items-center">
-            <AuthMode item={item} collection={collection} />
-          </div>
-        ) : null}
       </div>
-      <section className={`flex w-full ${['script', 'vars'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'}`}>
-        {getTabPanel(focusedTab.requestPaneTab)}
-      </section>
+      <section className="flex w-full mt-5">{getTabPanel(focusedTab.requestPaneTab)}</section>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js

@@ -5,7 +5,6 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
-    table-layout: fixed;
 
     thead,
     td {
@@ -19,14 +18,6 @@ const Wrapper = styled.div`
     }
     td {
       padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(3) {
-        width: 70px;
-      }
     }
   }
 
@@ -39,7 +30,6 @@ const Wrapper = styled.div`
     border: solid 1px transparent;
     outline: none !important;
     color: ${(props) => props.theme.table.input.color};
-    background: transparent;
 
     &:focus {
       outline: none !important;

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

@@ -3,19 +3,11 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
-import { useTheme } from 'providers/Theme';
-import {
-  addMultipartFormParam,
-  updateMultipartFormParam,
-  deleteMultipartFormParam
-} from 'providers/ReduxStore/slices/collections';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { addMultipartFormParam, updateMultipartFormParam, deleteMultipartFormParam } from 'providers/ReduxStore/slices/collections';
 import StyledWrapper from './StyledWrapper';
 
 const MultipartFormParams = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
   const params = item.draft ? get(item, 'draft.request.body.multipartForm') : get(item, 'request.body.multipartForm');
 
   const addParam = () => {
@@ -27,8 +19,6 @@ const MultipartFormParams = ({ item, collection }) => {
     );
   };
 
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleParamChange = (e, _param, type) => {
     const param = cloneDeep(_param);
     switch (type) {
@@ -40,6 +30,10 @@ const MultipartFormParams = ({ item, collection }) => {
         param.value = e.target.value;
         break;
       }
+      case 'description': {
+        param.description = e.target.value;
+        break;
+      }
       case 'enabled': {
         param.enabled = e.target.checked;
         break;
@@ -71,6 +65,7 @@ const MultipartFormParams = ({ item, collection }) => {
           <tr>
             <td>Key</td>
             <td>Value</td>
+            <td>Description</td>
             <td></td>
           </tr>
         </thead>
@@ -92,33 +87,32 @@ const MultipartFormParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <SingleLineEditor
-                        onSave={onSave}
-                        theme={storedTheme}
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
                         value={param.value}
-                        onChange={(newValue) =>
-                          handleParamChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            param,
-                            'value'
-                          )
-                        }
-                        onRun={handleRun}
-                        collection={collection}
+                        className="mousetrap"
+                        onChange={(e) => handleParamChange(e, param, 'value')}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={param.description}
+                        className="mousetrap"
+                        onChange={(e) => handleParamChange(e, param, 'description')}
                       />
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={param.enabled}
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleParamChange(e, param, 'enabled')}
-                        />
+                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
                         <button onClick={() => handleRemoveParams(param)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>

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

@@ -14,20 +14,7 @@ const StyledWrapper = styled.div`
 
   // Todo: dark mode temporary fix
   // Clean this
-  .CodeMirror.cm-s-monokai {
-    .CodeMirror-overlayscroll-horizontal div,
-    .CodeMirror-overlayscroll-vertical div {
-      background: #444444;
-    }
-  }
-
-  .cm-s-monokai span.cm-property,
-  .cm-s-monokai span.cm-attribute {
-    color: #9cdcfe !important;
-  }
-
-  .cm-s-monokai span.cm-property,
-  .cm-s-monokai span.cm-attribute {
+  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
     color: #9cdcfe !important;
   }
 
@@ -35,20 +22,13 @@ const StyledWrapper = styled.div`
     color: #ce9178 !important;
   }
 
-  .cm-s-monokai span.cm-number {
+  .cm-s-monokai span.cm-number{
     color: #b5cea8 !important;
   }
 
-  .cm-s-monokai span.cm-atom {
+  .cm-s-monokai span.cm-atom{
     color: #569cd6 !important;
   }
-
-  .cm-variable-valid {
-    color: green;
-  }
-  .cm-variable-invalid {
-    color: red;
-  }
 `;
 
 export default StyledWrapper;

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

@@ -6,10 +6,7 @@
  */
 
 import React from 'react';
-import isEqual from 'lodash/isEqual';
 import MD from 'markdown-it';
-import { getAllVariables } from 'utils/collections';
-import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import StyledWrapper from './StyledWrapper';
 
 import onHasCompletion from './onHasCompletion';
@@ -32,7 +29,6 @@ export default class QueryEditor extends React.Component {
     // editor is updated, which can later be used to protect the editor from
     // unnecessary updates during the update lifecycle.
     this.cachedValue = props.value || '';
-    this.variables = {};
   }
 
   componentDidMount() {
@@ -41,17 +37,12 @@ export default class QueryEditor extends React.Component {
       lineNumbers: true,
       tabSize: 2,
       mode: 'graphql',
-      // mode: 'brunovariables',
-      brunoVarInfo: {
-        variables: getAllVariables(this.props.collection)
-      },
       theme: this.props.editorTheme || 'graphiql',
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       keyMap: 'sublime',
       autoCloseBrackets: true,
       matchBrackets: true,
       showCursorWhenSelecting: true,
-      scrollbarStyle: 'overlay',
       readOnly: this.props.readOnly ? 'nocursor' : false,
       foldGutter: {
         minFoldSize: 4
@@ -138,11 +129,10 @@ export default class QueryEditor extends React.Component {
       editor.on('hasCompletion', this._onHasCompletion);
       editor.on('beforeChange', this._onBeforeChange);
     }
-    this.addOverlay();
   }
 
   componentDidUpdate(prevProps) {
-    // Ensure the changes caused by this update are not interpreted as
+    // 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;
@@ -161,11 +151,6 @@ 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');
     }
-    let variables = getAllVariables(this.props.collection);
-    if (!isEqual(variables, this.variables)) {
-      this.editor.options.brunoVarInfo.variables = variables;
-      this.addOverlay();
-    }
     this.ignoreChangeEvent = false;
   }
 
@@ -178,15 +163,6 @@ export default class QueryEditor extends React.Component {
     }
   }
 
-  // Todo: Overlay is messing up with schema hint
-  // Fix this
-  addOverlay = () => {
-    // let variables = getAllVariables(this.props.collection);
-    // this.variables = variables;
-    // defineCodeMirrorBrunoVariablesMode(variables, 'graphql');
-    // this.editor.setOption('mode', 'brunovariables');
-  };
-
   render() {
     return (
       <StyledWrapper

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

@@ -59,10 +59,7 @@ export default function onHasCompletion(_cm, data, onHintInformationRender) {
     const description = ctx.description ? md.render(ctx.description) : 'Self descriptive.';
     const type = ctx.type ? '<span className="infoType">' + renderType(ctx.type) + '</span>' : '';
 
-    information.innerHTML =
-      '<div className="content">' +
-      (description.slice(0, 3) === '<p>' ? '<p>' + type + description.slice(3) : type + description) +
-      '</div>';
+    information.innerHTML = '<div className="content">' + (description.slice(0, 3) === '<p>' ? '<p>' + type + description.slice(3) : type + description) + '</div>';
 
     if (ctx && deprecation && ctx.deprecationReason) {
       const reason = ctx.deprecationReason ? md.render(ctx.deprecationReason) : '';

packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js

@@ -5,7 +5,6 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
-    table-layout: fixed;
 
     thead,
     td {
@@ -13,20 +12,12 @@ const Wrapper = styled.div`
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};
+      color: ${(props) => props.theme.table.thead.color};;
       font-size: 0.8125rem;
       user-select: none;
     }
     td {
       padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(3) {
-        width: 70px;
-      }
     }
   }
 

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

@@ -3,16 +3,12 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
-import { useTheme } from 'providers/Theme';
 import { addQueryParam, updateQueryParam, deleteQueryParam } from 'providers/ReduxStore/slices/collections';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 
 import StyledWrapper from './StyledWrapper';
 
 const QueryParams = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
   const params = item.draft ? get(item, 'draft.request.params') : get(item, 'request.params');
 
   const handleAddParam = () => {
@@ -24,8 +20,6 @@ const QueryParams = ({ item, collection }) => {
     );
   };
 
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleParamChange = (e, _param, type) => {
     const param = cloneDeep(_param);
 
@@ -38,6 +32,10 @@ const QueryParams = ({ item, collection }) => {
         param.value = e.target.value;
         break;
       }
+      case 'description': {
+        param.description = e.target.value;
+        break;
+      }
       case 'enabled': {
         param.enabled = e.target.checked;
         break;
@@ -68,8 +66,9 @@ const QueryParams = ({ item, collection }) => {
       <table>
         <thead>
           <tr>
-            <td>Name</td>
+            <td>Key</td>
             <td>Value</td>
+            <td>Description</td>
             <td></td>
           </tr>
         </thead>
@@ -91,33 +90,32 @@ const QueryParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <SingleLineEditor
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
                         value={param.value}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleParamChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            param,
-                            'value'
-                          )
-                        }
-                        onRun={handleRun}
-                        collection={collection}
+                        className="mousetrap"
+                        onChange={(e) => handleParamChange(e, param, 'value')}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={param.description}
+                        className="mousetrap"
+                        onChange={(e) => handleParamChange(e, param, 'description')}
                       />
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={param.enabled}
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleParamChange(e, param, 'enabled')}
-                        />
+                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
                         <button onClick={() => handleRemoveParam(param)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>

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

@@ -10,9 +10,7 @@ const HttpMethodSelector = ({ method, onMethodSelect }) => {
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="flex w-full items-center pl-3 py-1 select-none uppercase">
-        <div className="flex-grow font-medium" id="create-new-request-method">
-          {method}
-        </div>
+        <div className="flex-grow font-medium" id="create-new-request-method">{method}</div>
         <div>
           <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2} />
         </div>

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

@@ -1,28 +1,18 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import { useDispatch } from 'react-redux';
 import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/slices/collections';
-import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import HttpMethodSelector from './HttpMethodSelector';
 import { useTheme } from 'providers/Theme';
 import SendIcon from 'components/Icons/Send';
-import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 
 const QueryUrl = ({ item, collection, handleRun }) => {
-  const { theme, storedTheme } = useTheme();
+  const { theme } = useTheme();
   const dispatch = useDispatch();
   const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
   const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
 
-  const [methodSelectorWidth, setMethodSelectorWidth] = useState(90);
-
-  useEffect(() => {
-    const el = document.querySelector('.method-selector-container');
-    setMethodSelectorWidth(el.offsetWidth);
-  }, [method]);
-
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
   const onUrlChange = (value) => {
     dispatch(
       requestUrlChanged({
@@ -48,24 +38,19 @@ const QueryUrl = ({ item, collection, handleRun }) => {
       <div className="flex items-center h-full method-selector-container">
         <HttpMethodSelector method={method} onMethodSelect={onMethodSelect} />
       </div>
-      <div
-        className="flex items-center flex-grow input-container h-full"
-        style={{
-          color: 'yellow',
-          width: `calc(100% - ${methodSelectorWidth}px)`,
-          maxWidth: `calc(100% - ${methodSelectorWidth}px)`
-        }}
-      >
-        <SingleLineEditor
+      <div className="flex items-center flex-grow input-container h-full">
+        <input
+          className="px-3 w-full mousetrap"
+          type="text"
           value={url}
-          onSave={onSave}
-          theme={storedTheme}
-          onChange={(newValue) => onUrlChange(newValue)}
-          onRun={handleRun}
-          collection={collection}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck="false"
+          onChange={(event) => onUrlChange(event.target.value)}
         />
         <div className="flex items-center h-full mr-2 cursor-pointer" id="send-request" onClick={handleRun}>
-          <SendIcon color={theme.requestTabPanel.url.icon} width={22} />
+          <SendIcon color={theme.requestTabPanel.url.icon} width={22}/>
         </div>
       </div>
     </StyledWrapper>

packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js

@@ -52,7 +52,7 @@ const RequestBodyMode = ({ item, collection }) => {
               onModeChange('formUrlEncoded');
             }}
           >
-            Form URL Encoded
+            Form Url Encoded
           </div>
           <div className="label-item font-medium">Raw</div>
           <div

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

@@ -13,7 +13,9 @@ const RequestBody = ({ item, collection }) => {
   const dispatch = useDispatch();
   const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
   const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
-  const { storedTheme } = useTheme();
+  const {
+    storedTheme
+  } = useTheme();
 
   const onEdit = (value) => {
     dispatch(
@@ -43,15 +45,7 @@ const RequestBody = ({ item, collection }) => {
 
     return (
       <StyledWrapper className="w-full">
-        <CodeEditor
-          collection={collection}
-          theme={storedTheme}
-          value={bodyContent[bodyMode] || ''}
-          onEdit={onEdit}
-          onRun={onRun}
-          onSave={onSave}
-          mode={codeMirrorMode[bodyMode]}
-        />
+        <CodeEditor theme={storedTheme} value={bodyContent[bodyMode] || ''} onEdit={onEdit} onRun={onRun} onSave={onSave} mode={codeMirrorMode[bodyMode]} />
       </StyledWrapper>
     );
   }

packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js

@@ -5,7 +5,6 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
-    table-layout: fixed;
 
     thead,
     td {
@@ -19,14 +18,6 @@ const Wrapper = styled.div`
     }
     td {
       padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(3) {
-        width: 70px;
-      }
     }
   }
 

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

@@ -3,15 +3,11 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
-import { useTheme } from 'providers/Theme';
 import { addRequestHeader, updateRequestHeader, deleteRequestHeader } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 
 const RequestHeaders = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
   const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
 
   const addHeader = () => {
@@ -23,8 +19,6 @@ const RequestHeaders = ({ item, collection }) => {
     );
   };
 
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleHeaderValueChange = (e, _header, type) => {
     const header = cloneDeep(_header);
     switch (type) {
@@ -36,6 +30,10 @@ const RequestHeaders = ({ item, collection }) => {
         header.value = e.target.value;
         break;
       }
+      case 'description': {
+        header.description = e.target.value;
+        break;
+      }
       case 'enabled': {
         header.enabled = e.target.checked;
         break;
@@ -65,64 +63,56 @@ const RequestHeaders = ({ item, collection }) => {
       <table>
         <thead>
           <tr>
-            <td>Name</td>
+            <td>Key</td>
             <td>Value</td>
+            <td>Description</td>
             <td></td>
           </tr>
         </thead>
         <tbody>
           {headers && headers.length
-            ? headers.map((header) => {
+            ? headers.map((header, index) => {
                 return (
                   <tr key={header.uid}>
                     <td>
-                      <SingleLineEditor
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
                         value={header.name}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleHeaderValueChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            header,
-                            'name'
-                          )
-                        }
-                        onRun={handleRun}
-                        collection={collection}
+                        className="mousetrap"
+                        onChange={(e) => handleHeaderValueChange(e, header, 'name')}
                       />
                     </td>
                     <td>
-                      <SingleLineEditor
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
                         value={header.value}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleHeaderValueChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            header,
-                            'value'
-                          )
-                        }
-                        onRun={handleRun}
-                        collection={collection}
+                        className="mousetrap"
+                        onChange={(e) => handleHeaderValueChange(e, header, 'value')}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={header.description}
+                        className="mousetrap"
+                        onChange={(e) => handleHeaderValueChange(e, header, 'description')}
                       />
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={header.enabled}
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
-                        />
+                        <input type="checkbox" checked={header.enabled} className="mr-3 mousetrap" onChange={(e) => handleHeaderValueChange(e, header, 'enabled')} />
                         <button onClick={() => handleRemoveHeader(header)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>

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

@@ -28,14 +28,7 @@ const SaveRequest = ({ items, onClose }) => {
 
   return (
     <StyledWrapper>
-      <Modal
-        size="md"
-        title="Save Request"
-        confirmText="Save"
-        cancelText="Cancel"
-        handleCancel={onClose}
-        handleConfirm={onClose}
-      >
+      <Modal size="md" title="Save Request" confirmText="Save" cancelText="Cancel" handleCancel={onClose} handleConfirm={onClose}>
         <p className="mb-2">Select a folder to save request:</p>
         <div className="folder-list">
           {showFolders && showFolders.length

packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.CodeMirror {
-    height: inherit;
-  }
-
-  div.title {
-    color: var(--color-tab-inactive);
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,70 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
-import CodeEditor from 'components/CodeEditor';
-import { updateRequestScript, updateResponseScript } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
-
-const Script = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const requestScript = item.draft ? get(item, 'draft.request.script.req') : get(item, 'request.script.req');
-  const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
-
-  const { storedTheme } = useTheme();
-
-  const onRequestScriptEdit = (value) => {
-    dispatch(
-      updateRequestScript({
-        script: value,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onResponseScriptEdit = (value) => {
-    dispatch(
-      updateResponseScript({
-        script: value,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onRun = () => dispatch(sendRequest(item, collection.uid));
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-
-  return (
-    <StyledWrapper className="w-full flex flex-col">
-      <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Pre Request</div>
-        <CodeEditor
-          collection={collection}
-          value={requestScript || ''}
-          theme={storedTheme}
-          onEdit={onRequestScriptEdit}
-          mode="javascript"
-          onRun={onRun}
-          onSave={onSave}
-        />
-      </div>
-      <div className="flex-1 mt-6">
-        <div className="mt-1 mb-1 title text-xs">Post Response</div>
-        <CodeEditor
-          collection={collection}
-          value={responseScript || ''}
-          theme={storedTheme}
-          onEdit={onResponseScriptEdit}
-          mode="javascript"
-          onRun={onRun}
-          onSave={onSave}
-        />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Script;

packages/bruno-app/src/components/RequestPane/Tests/StyledWrapper.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 220px);
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,44 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
-import CodeEditor from 'components/CodeEditor';
-import { updateRequestTests } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
-
-const Tests = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const tests = item.draft ? get(item, 'draft.request.tests') : get(item, 'request.tests');
-
-  const { storedTheme } = useTheme();
-
-  const onEdit = (value) => {
-    dispatch(
-      updateRequestTests({
-        tests: value,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onRun = () => dispatch(sendRequest(item, collection.uid));
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-
-  return (
-    <StyledWrapper className="w-full">
-      <CodeEditor
-        collection={collection}
-        value={tests || ''}
-        theme={storedTheme}
-        onEdit={onEdit}
-        mode="javascript"
-        onRun={onRun}
-        onSave={onSave}
-      />
-    </StyledWrapper>
-  );
-};
-
-export default Tests;

packages/bruno-app/src/components/RequestPane/Vars/StyledWrapper.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.title {
-    color: var(--color-tab-inactive);
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/RequestPane/Vars/VarsTable/StyledWrapper.js

@@ -1,56 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    font-weight: 600;
-    table-layout: fixed;
-
-    thead,
-    td {
-      border: 1px solid ${(props) => props.theme.table.border};
-    }
-
-    thead {
-      color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
-      user-select: none;
-    }
-    td {
-      padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(3) {
-        width: 70px;
-      }
-    }
-  }
-
-  .btn-add-var {
-    font-size: 0.8125rem;
-  }
-
-  input[type='text'] {
-    width: 100%;
-    border: solid 1px transparent;
-    outline: none !important;
-    background-color: inherit;
-
-    &:focus {
-      outline: none !important;
-      border: solid 1px transparent;
-    }
-  }
-
-  input[type='checkbox'] {
-    cursor: pointer;
-    position: relative;
-    top: 1px;
-  }
-`;
-
-export default Wrapper;

packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js

@@ -1,151 +0,0 @@
-import React from 'react';
-import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
-import { useTheme } from 'providers/Theme';
-import { addVar, updateVar, deleteVar } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import SingleLineEditor from 'components/SingleLineEditor';
-import Tooltip from 'components/Tooltip';
-import StyledWrapper from './StyledWrapper';
-
-const VarsTable = ({ item, collection, vars, varType }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-
-  const handleAddVar = () => {
-    dispatch(
-      addVar({
-        type: varType,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleVarChange = (e, v, type) => {
-    const _var = cloneDeep(v);
-    switch (type) {
-      case 'name': {
-        _var.name = e.target.value;
-        break;
-      }
-      case 'value': {
-        _var.value = e.target.value;
-        break;
-      }
-      case 'enabled': {
-        _var.enabled = e.target.checked;
-        break;
-      }
-    }
-    dispatch(
-      updateVar({
-        type: varType,
-        var: _var,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleRemoveVar = (_var) => {
-    dispatch(
-      deleteVar({
-        type: varType,
-        varUid: _var.uid,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Name</td>
-            {varType === 'request' ? (
-              <td>
-                <div className="flex items-center">
-                  <span>Value</span>
-                  <Tooltip text="You can write any valid JS Template Literal here" tooltipId="request-var" />
-                </div>
-              </td>
-            ) : (
-              <td>
-                <div className="flex items-center">
-                  <span>Expr</span>
-                  <Tooltip text="You can write any valid JS expression here" tooltipId="response-var" />
-                </div>
-              </td>
-            )}
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {vars && vars.length
-            ? vars.map((_var, index) => {
-                return (
-                  <tr key={_var.uid}>
-                    <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={_var.name}
-                        className="mousetrap"
-                        onChange={(e) => handleVarChange(e, _var, 'name')}
-                      />
-                    </td>
-                    <td>
-                      <SingleLineEditor
-                        value={_var.value}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleVarChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            _var,
-                            'value'
-                          )
-                        }
-                        onRun={handleRun}
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={_var.enabled}
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleVarChange(e, _var, 'enabled')}
-                        />
-                        <button onClick={() => handleRemoveVar(_var)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-      <button className="btn-add-var text-link pr-2 py-3 mt-2 select-none" onClick={handleAddVar}>
-        + Add
-      </button>
-    </StyledWrapper>
-  );
-};
-export default VarsTable;

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

@@ -1,54 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
-import { updateRequestScript, updateResponseScript } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { useTheme } from 'providers/Theme';
-import VarsTable from './VarsTable';
-import StyledWrapper from './StyledWrapper';
-
-const Vars = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const requestVars = item.draft ? get(item, 'draft.request.vars.req') : get(item, 'request.vars.req');
-  const responseVars = item.draft ? get(item, 'draft.request.vars.res') : get(item, 'request.vars.res');
-
-  const { storedTheme } = useTheme();
-
-  const onRequestScriptEdit = (value) => {
-    dispatch(
-      updateRequestScript({
-        script: value,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onResponseScriptEdit = (value) => {
-    dispatch(
-      updateResponseScript({
-        script: value,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onRun = () => dispatch(sendRequest(item, collection.uid));
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-
-  return (
-    <StyledWrapper className="w-full flex flex-col">
-      <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Pre Request</div>
-        <VarsTable item={item} collection={collection} vars={requestVars} varType="request" />
-      </div>
-      <div className="flex-1">
-        <div className="mt-1 mb-1 title text-xs">Post Response</div>
-        <VarsTable item={item} collection={collection} vars={responseVars} varType="response" />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Vars;

packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js

@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { closeTabs } from 'providers/ReduxStore/slices/tabs';
 import { useDispatch } from 'react-redux';
 
 const RequestNotFound = ({ itemUid }) => {
   const dispatch = useDispatch();
-  const [showErrorMessage, setShowErrorMessage] = useState(false);
 
   const closeTab = () => {
     dispatch(
@@ -14,27 +13,11 @@ const RequestNotFound = ({ itemUid }) => {
     );
   };
 
-  useEffect(() => {
-    setTimeout(() => {
-      setShowErrorMessage(true);
-    }, 300);
-  }, []);
-
-  // add a delay component in react that shows a loading spinner
-  // and then shows the error message after a delay
-  // this will prevent the error message from flashing on the screen
-
-  if (!showErrorMessage) {
-    return null;
-  }
-
   return (
     <div className="mt-6 px-6">
       <div className="p-4 bg-orange-100 border-l-4 border-yellow-500 text-yellow-700 bg-yellow-100 p-4">
         <div>Request no longer exists.</div>
-        <div className="mt-2">
-          This can happen when the .bru file associated with this request was deleted on your filesystem.
-        </div>
+        <div className="mt-2">This can happen when the yml file associated with this request was deleted on your filesystem.</div>
       </div>
       <button className="btn btn-md btn-secondary mt-6" onClick={closeTab}>
         Close Tab

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

@@ -12,9 +12,6 @@ import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import RequestNotFound from './RequestNotFound';
 import QueryUrl from 'components/RequestPane/QueryUrl';
 import NetworkError from 'components/ResponsePane/NetworkError';
-import RunnerResults from 'components/RunnerResults';
-import VariablesEditor from 'components/VariablesEditor';
-import CollectionSettings from 'components/CollectionSettings';
 import { DocExplorer } from '@usebruno/graphql-docs';
 
 import StyledWrapper from './StyledWrapper';
@@ -35,9 +32,7 @@ const RequestTabPanel = () => {
 
   let asideWidth = useSelector((state) => state.app.leftSidebarWidth);
   const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
-  const [leftPaneWidth, setLeftPaneWidth] = useState(
-    focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / 2.2
-  ); // 2.2 so that request pane is relatively smaller
+  const [leftPaneWidth, setLeftPaneWidth] = useState(focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / 2.2); // 2.2 so that request pane is relatively smaller
   const [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
   const [dragging, setDragging] = useState(false);
 
@@ -49,10 +44,10 @@ const RequestTabPanel = () => {
   const onSchemaLoad = (schema) => setSchema(schema);
   const toggleDocs = () => setShowGqlDocs((showGqlDocs) => !showGqlDocs);
   const handleGqlClickReference = (reference) => {
-    if (docExplorerRef.current) {
+    if(docExplorerRef.current) {
       docExplorerRef.current.showDocForReference(reference);
     }
-    if (!showGqlDocs) {
+    if(!showGqlDocs) {
       setShowGqlDocs(true);
     }
   };
@@ -70,13 +65,10 @@ const RequestTabPanel = () => {
     if (dragging) {
       e.preventDefault();
       let leftPaneXPosition = e.clientX + 2;
-      if (
-        leftPaneXPosition < asideWidth + DEFAULT_PADDING + MIN_LEFT_PANE_WIDTH ||
-        leftPaneXPosition > screenWidth - MIN_RIGHT_PANE_WIDTH
-      ) {
+      if (leftPaneXPosition < (asideWidth+ DEFAULT_PADDING + MIN_LEFT_PANE_WIDTH) || leftPaneXPosition > (screenWidth - MIN_RIGHT_PANE_WIDTH )) {
         return;
       }
-      setLeftPaneWidth(leftPaneXPosition - asideWidth);
+      setLeftPaneWidth(leftPaneXPosition- asideWidth);
       setRightPaneWidth(screenWidth - e.clientX - DEFAULT_PADDING);
     }
   };
@@ -112,7 +104,7 @@ const RequestTabPanel = () => {
   }
 
   if (!focusedTab || !focusedTab.uid || !focusedTab.collectionUid) {
-    return <div className="pb-4 px-4">An error occurred!</div>;
+    return <div className="pb-4 px-4">An error occured!</div>;
   }
 
   let collection = find(collections, (c) => c.uid === focusedTab.collectionUid);
@@ -120,18 +112,6 @@ const RequestTabPanel = () => {
     return <div className="pb-4 px-4">Collection not found!</div>;
   }
 
-  if (focusedTab.type === 'collection-runner') {
-    return <RunnerResults collection={collection} />;
-  }
-
-  if (focusedTab.type === 'variables') {
-    return <VariablesEditor collection={collection} />;
-  }
-
-  if (focusedTab.type === 'collection-settings') {
-    return <CollectionSettings collection={collection} />;
-  }
-
   const item = findItemInCollection(collection, activeTabUid);
   if (!item || !item.uid) {
     return <RequestNotFound itemUid={activeTabUid} />;
@@ -152,13 +132,7 @@ const RequestTabPanel = () => {
       </div>
       <section className="main flex flex-grow pb-4 relative">
         <section className="request-pane">
-          <div
-            className="px-4"
-            style={{
-              width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`,
-              height: `calc(100% - ${DEFAULT_PADDING}px)`
-            }}
-          >
+          <div className="px-4" style={{ width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`, height: `calc(100% - ${DEFAULT_PADDING}px)` }}>
             {item.type === 'graphql-request' ? (
               <GraphQLRequestPane
                 item={item}
@@ -170,9 +144,7 @@ const RequestTabPanel = () => {
               />
             ) : null}
 
-            {item.type === 'http-request' ? (
-              <HttpRequestPane item={item} collection={collection} leftPaneWidth={leftPaneWidth} />
-            ) : null}
+            {item.type === 'http-request' ? <HttpRequestPane item={item} collection={collection} leftPaneWidth={leftPaneWidth} /> : null}
           </div>
         </section>
 
@@ -187,15 +159,19 @@ const RequestTabPanel = () => {
 
       {item.type === 'graphql-request' ? (
         <div className={`graphql-docs-explorer-container ${showGqlDocs ? '' : 'hidden'}`}>
-          <DocExplorer schema={schema} ref={(r) => (docExplorerRef.current = r)}>
-            <button className="mr-2" onClick={toggleDocs} aria-label="Close Documentation Explorer">
+          <DocExplorer schema={schema} ref={(r) => docExplorerRef.current = r}>
+            <button
+              className='mr-2'
+              onClick={toggleDocs}
+              aria-label="Close Documentation Explorer"
+            >
               {'\u2715'}
             </button>
           </DocExplorer>
         </div>
-      ) : null}
+      ): null}
     </StyledWrapper>
   );
 };
 
-export default RequestTabPanel;
+export default RequestTabPanel;

packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js

@@ -1,44 +1,9 @@
 import React from 'react';
-import { uuid } from 'utils/common';
-import { IconFiles, IconRun, IconEye, IconSettings } from '@tabler/icons';
+import { IconFiles } from '@tabler/icons';
 import EnvironmentSelector from 'components/Environments/EnvironmentSelector';
-import { addTab } from 'providers/ReduxStore/slices/tabs';
-import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 
 const CollectionToolBar = ({ collection }) => {
-  const dispatch = useDispatch();
-
-  const handleRun = () => {
-    dispatch(
-      addTab({
-        uid: uuid(),
-        collectionUid: collection.uid,
-        type: 'collection-runner'
-      })
-    );
-  };
-
-  const viewVariables = () => {
-    dispatch(
-      addTab({
-        uid: uuid(),
-        collectionUid: collection.uid,
-        type: 'variables'
-      })
-    );
-  };
-
-  const viewCollectionSettings = () => {
-    dispatch(
-      addTab({
-        uid: uuid(),
-        collectionUid: collection.uid,
-        type: 'collection-settings'
-      })
-    );
-  };
-
   return (
     <StyledWrapper>
       <div className="flex items-center p-2">
@@ -47,15 +12,6 @@ const CollectionToolBar = ({ collection }) => {
           <span className="ml-2 mr-4 font-semibold">{collection.name}</span>
         </div>
         <div className="flex flex-1 items-center justify-end">
-          <span className="mr-2">
-            <IconRun className="cursor-pointer" size={20} strokeWidth={1.5} onClick={handleRun} />
-          </span>
-          <span className="mr-3">
-            <IconEye className="cursor-pointer" size={18} strokeWidth={1.5} onClick={viewVariables} />
-          </span>
-          <span className="mr-3">
-            <IconSettings className="cursor-pointer" size={18} strokeWidth={1.5} onClick={viewCollectionSettings} />
-          </span>
           <EnvironmentSelector collection={collection} />
         </div>
       </div>

packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js

@@ -1,42 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { IconAlertTriangle } from '@tabler/icons';
-
-const RequestTabNotFound = ({ handleCloseClick }) => {
-  const [showErrorMessage, setShowErrorMessage] = useState(false);
-
-  // add a delay component in react that shows a loading spinner
-  // and then shows the error message after a delay
-  // this will prevent the error message from flashing on the screen
-  useEffect(() => {
-    setTimeout(() => {
-      setShowErrorMessage(true);
-    }, 300);
-  }, []);
-
-  if (!showErrorMessage) {
-    return null;
-  }
-
-  return (
-    <>
-      <div className="flex items-center tab-label pl-2">
-        {showErrorMessage ? (
-          <>
-            <IconAlertTriangle size={18} strokeWidth={1.5} className="text-yellow-600" />
-            <span className="ml-1">Not Found</span>
-          </>
-        ) : null}
-      </div>
-      <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e)}>
-        <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
-          <path
-            fill="currentColor"
-            d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
-          ></path>
-        </svg>
-      </div>
-    </>
-  );
-};
-
-export default RequestTabNotFound;

packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import { IconVariable, IconSettings, IconRun } from '@tabler/icons';
-
-const SpecialTab = ({ handleCloseClick, type }) => {
-  const getTabInfo = (type) => {
-    switch (type) {
-      case 'collection-settings': {
-        return (
-          <>
-            <IconSettings size={18} strokeWidth={1.5} className="text-yellow-600" />
-            <span className="ml-1">Settings</span>
-          </>
-        );
-      }
-      case 'variables': {
-        return (
-          <>
-            <IconVariable size={18} strokeWidth={1.5} className="text-yellow-600" />
-            <span className="ml-1">Variables</span>
-          </>
-        );
-      }
-      case 'collection-runner': {
-        return (
-          <>
-            <IconRun size={18} strokeWidth={1.5} className="text-yellow-600" />
-            <span className="ml-1">Runner</span>
-          </>
-        );
-      }
-    }
-  };
-
-  return (
-    <>
-      <div className="flex items-center tab-label pl-2">{getTabInfo(type)}</div>
-      <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e)}>
-        <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
-          <path
-            fill="currentColor"
-            d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
-          ></path>
-        </svg>
-      </div>
-    </>
-  );
-};
-
-export default SpecialTab;

packages/bruno-app/src/components/RequestTabs/RequestTab/index.js

@@ -4,8 +4,7 @@ import { closeTabs } from 'providers/ReduxStore/slices/tabs';
 import { useDispatch } from 'react-redux';
 import { findItemInCollection } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
-import RequestTabNotFound from './RequestTabNotFound';
-import SpecialTab from './SpecialTab';
+import { IconAlertTriangle } from '@tabler/icons';
 
 const RequestTab = ({ tab, collection }) => {
   const dispatch = useDispatch();
@@ -57,20 +56,23 @@ const RequestTab = ({ tab, collection }) => {
     return color;
   };
 
-  if (['collection-settings', 'variables', 'collection-runner'].includes(tab.type)) {
-    return (
-      <StyledWrapper className="flex items-center justify-between tab-container px-1">
-        <SpecialTab handleCloseClick={handleCloseClick} type={tab.type} />
-      </StyledWrapper>
-    );
-  }
-
   const item = findItemInCollection(collection, tab.uid);
 
   if (!item) {
     return (
       <StyledWrapper className="flex items-center justify-between tab-container px-1">
-        <RequestTabNotFound handleCloseClick={handleCloseClick} />
+        <div className="flex items-center tab-label pl-2">
+          <IconAlertTriangle size={18} strokeWidth={1.5} className="text-yellow-600" />
+          <span className="ml-1">Not Found</span>
+        </div>
+        <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e)}>
+          <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
+            <path
+              fill="currentColor"
+              d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
+            ></path>
+          </svg>
+        </div>
       </StyledWrapper>
     );
   }
@@ -96,15 +98,7 @@ const RequestTab = ({ tab, collection }) => {
             ></path>
           </svg>
         ) : (
-          <svg
-            focusable="false"
-            xmlns="http://www.w3.org/2000/svg"
-            width="8"
-            height="16"
-            fill="#cc7b1b"
-            className="has-changes-icon"
-            viewBox="0 0 8 8"
-          >
+          <svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="8" height="16" fill="#cc7b1b" className="has-changes-icon" viewBox="0 0 8 8">
             <circle cx="4" cy="4" r="3" />
           </svg>
         )}

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  border-bottom: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
+  border-bottom: 1px solid ${(props) => props.theme.requestTabs.borromBorder};
 
   ul {
     padding: 0;

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

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import find from 'lodash/find';
 import filter from 'lodash/filter';
 import classnames from 'classnames';
-import { IconChevronRight, IconChevronLeft } from '@tabler/icons';
+import { IconHome2, IconChevronRight, IconChevronLeft } from '@tabler/icons';
 import { useSelector, useDispatch } from 'react-redux';
 import { focusTab } from 'providers/ReduxStore/slices/tabs';
 import NewRequest from 'components/Sidebar/NewRequest';
@@ -76,12 +76,10 @@ const RequestTabs = () => {
     });
   };
 
-  // Todo: Must support ephemeral requests
+  // Todo: Must support ephermal requests
   return (
     <StyledWrapper className={getRootClassname()}>
-      {newRequestModalOpen && (
-        <NewRequest collection={activeCollection} onClose={() => setNewRequestModalOpen(false)} />
-      )}
+      {newRequestModalOpen && <NewRequest collection={activeCollection} onClose={() => setNewRequestModalOpen(false)} />}
       {collectionRequestTabs && collectionRequestTabs.length ? (
         <>
           <CollectionToolBar collection={activeCollection} />
@@ -105,13 +103,8 @@ const RequestTabs = () => {
               {collectionRequestTabs && collectionRequestTabs.length
                 ? collectionRequestTabs.map((tab, index) => {
                     return (
-                      <li
-                        key={tab.uid}
-                        className={getTabClassname(tab, index)}
-                        role="tab"
-                        onClick={() => handleClick(tab)}
-                      >
-                        <RequestTab key={tab.uid} tab={tab} collection={activeCollection} />
+                      <li key={tab.uid} className={getTabClassname(tab, index)} role="tab" onClick={() => handleClick(tab)}>
+                        <RequestTab key={tab.uid} tab={tab} collection={activeCollection} activeTab={activeTab} />
                       </li>
                     );
                   })
@@ -128,13 +121,7 @@ const RequestTabs = () => {
               ) : null}
               <li className="select-none short-tab" id="create-new-tab" onClick={createNewTab}>
                 <div className="flex items-center">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="22"
-                    height="22"
-                    fill="currentColor"
-                    viewBox="0 0 16 16"
-                  >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
                     <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                   </svg>
                 </div>

packages/bruno-app/src/components/ResponsePane/NetworkError/index.js

@@ -7,6 +7,9 @@ const NetworkError = ({ onClose }) => {
         <div className="flex items-start">
           <div className="ml-3 flex-1">
             <p className="text-sm font-medium text-red-800">Network Error</p>
+            <p className="mt-2 text-xs text-gray-500">
+              Please note that if you are using Bruno on the web, then the api you are connecting to must allow CORS. If not, please use the chrome extension or the desktop app
+            </p>
           </div>
         </div>
       </div>

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js

@@ -1,33 +1,17 @@
 import React from 'react';
 import CodeEditor from 'components/CodeEditor';
 import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
-import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
-
 import StyledWrapper from './StyledWrapper';
 
-const QueryResult = ({ item, collection, value, width, disableRunEventListener, mode }) => {
-  const { storedTheme } = useTheme();
-  const dispatch = useDispatch();
-
-  const onRun = () => {
-    if (disableRunEventListener) {
-      return;
-    }
-    dispatch(sendRequest(item, collection.uid));
-  };
+const QueryResult = ({ value, width }) => {
+  const {
+    storedTheme
+  } = useTheme();
 
   return (
     <StyledWrapper className="px-3 w-full" style={{ maxWidth: width }}>
       <div className="h-full">
-        <CodeEditor
-          collection={collection}
-          theme={storedTheme}
-          onRun={onRun}
-          value={value || ''}
-          mode={mode}
-          readOnly
-        />
+        <CodeEditor theme={storedTheme} value={value || ''} readOnly />
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/ResponsePane/StatusCode/StyledWrapper.js

@@ -3,11 +3,11 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   font-size: 0.75rem;
   font-weight: 600;
-
+  
   &.text-ok {
     color: ${(props) => props.theme.requestTabPanel.responseOk};
   }
-
+  
   &.text-error {
     color: ${(props) => props.theme.requestTabPanel.responseError};
   }

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

@@ -25,14 +25,6 @@ const StyledWrapper = styled.div`
       }
     }
   }
-
-  .some-tests-failed {
-    color: ${(props) => props.theme.colors.text.danger} !important;
-  }
-
-  .all-tests-passed {
-    color: ${(props) => props.theme.colors.text.green} !important;
-  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/ResponsePane/TestResults/StyledWrapper.js

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .test-success {
-    color: ${(props) => props.theme.colors.text.green};
-  }
-
-  .test-failure {
-    color: ${(props) => props.theme.colors.text.danger};
-  }
-
-  .error-message {
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-`;
-
-export default StyledWrapper;