feat: response overlay polish

request colors made consistent on the sidebar and tabs

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,35 @@
+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: Check package-lock.json
+        run: npm ci
+      - 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
+      - name: Test Package bruno-cli
+        run: npm run test --workspace=packages/bruno-cli
+      - name: Test Package bruno-electron
+        run: npm run test --workspace=packages/bruno-electron

.gitignore

@@ -4,7 +4,6 @@
 node_modules
 yarn.lock
 pnpm-lock.yaml
-package-lock.json
 .pnp
 .pnp.js
 
@@ -41,3 +40,7 @@ yarn-error.log*
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+#dev editor
+bruno.iml
+.idea

.husky/pre-commit

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

.nvmrc

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

.prettierrc.json

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

contributing.md

@@ -1,3 +1,5 @@
+**English** | [Русский](/contributing_ru.md)
+
 ## Lets make bruno better, together !!
 
 I am happy that you are looking to improve bruno. Below are the guidelines to get started bringing up bruno on your computer.
@@ -19,29 +21,11 @@ Libraries we use
 
 ### Dependencies
 
-You would need [Node v14.x or the latest LTS version](https://nodejs.org/en/) and npm 8.x. We use npm workspaces in the project
+You would need [Node v18.x or the latest LTS version](https://nodejs.org/en/) and npm 8.x. We use npm workspaces in the project
 
 ### Lets start coding
 
-```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
-```
+Please reference [development.md](docs/development.md) for instructions on running the local development environment.
 
 ### Raising Pull Request
 

contributing_ru.md

@@ -0,0 +1,37 @@
+[English](/contributing.md) | **Русский**
+
+## Давайте вместе сделаем Бруно лучше!!!
+
+Я рад, что Вы хотите усовершенствовать bruno. Ниже приведены рекомендации по запуску bruno на вашем компьютере.
+
+### Стек
+
+Bruno построен с использованием NextJs и React. Мы также используем electron для поставки десктопной версии ( которая поддерживает локальные коллекции )
+
+Библиотеки, которые мы используем
+
+- CSS - Tailwind
+- Редакторы кода - Codemirror
+- Управление состоянием - Redux
+- Иконки - Tabler Icons
+- Формы - formik
+- Валидация схем - Yup
+- Запросы клиента - axios
+- Наблюдатель за файловой системой - chokidar
+
+### Зависимости
+
+Вам потребуется [Node v18.x или последняя версия LTS](https://nodejs.org/en/) и npm 8.x. В проекте мы используем рабочие пространства npm
+
+### Приступим к коду
+
+Пожалуйста, обратитесь к [development_ru.md](docs/development_ru.md) для получения инструкций по запуску локальной среды разработки.
+
+### Создание Pull Request
+
+- Пожалуйста, пусть PR будет небольшим и сфокусированным на одной вещи
+- Пожалуйста, соблюдайте формат создания веток
+  - feature/[название функции]: Эта ветка должна содержать изменения для конкретной функции
+    - Пример: feature/dark-mode
+  - bugfix/[название ошибки]: Эта ветка должна содержать только исправления для конкретной ошибки
+    - Пример bugfix/bug-1

docs/development.md

@@ -1,27 +1,55 @@
-## development
+**English** | [Русский](/docs/development_ru.md)
+
+## 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
 
 ```bash
+# use nodejs 18 version
+nvm use
+
 # install deps
-npm i
+npm i --legacy-peer-deps
 
-# run next app
-npm run dev --workspace=packages/bruno-app
+# build graphql docs
+npm run build:graphql-docs
 
-# run electron app
-npm run dev --workspace=packages/bruno-electron
+# build bruno query
+npm run build:bruno-query
 
-# build next app
-npm run build --workspace=packages/bruno-app
+# run next app (terminal 1)
+npm run dev:web
+
+# run electron app (terminal 2)
+npm run dev:electron
 ```
 
-## fix
+### Troubleshooting
 
 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.
 
-# testing
+```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
 
 ```bash
 # bruno-schema
 npm test --workspace=packages/bruno-schema
 
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

docs/development_ru.md

@@ -0,0 +1,55 @@
+[English](/docs/development.md) | **Русский**
+
+## Разработка
+
+Bruno разрабатывается как десктопное приложение. Необходимо загрузить приложение, запустив приложение nextjs в одном терминале, а затем запустить приложение electron в другом терминале.
+
+### Зависимости
+
+- NodeJS v18
+
+### Локальная разработка
+
+```bash
+# используйте nodejs 18 версии
+nvm use
+
+# установите зависимости
+npm i --legacy-peer-deps
+
+# билд документации по graphql
+npm run build:graphql-docs
+
+# билд bruno query
+npm run build:bruno-query
+
+# запустить next приложение ( терминал 1 )
+npm run dev:web
+
+# запустить приложение electron ( терминал 2 )
+npm run dev:electron
+```
+
+### Устранение неисправностей
+
+При запуске `npm install` может возникнуть ошибка `Unsupported platform`. Чтобы исправить это, необходимо удалить `node_modules` и `package-lock.json` и запустить `npm install`. В результате будут установлены все пакеты, необходимые для работы приложения.
+
+```shell
+# Удаление node_modules в подкаталогах
+find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
+  rm -rf "$dir"
+done
+
+# Удаление package-lock в подкаталогах
+find . -type f -name "package-lock.json" -delete
+```
+
+### Тестирование
+
+```bash
+# bruno-schema
+npm test --workspace=packages/bruno-schema
+
+# bruno-lang
+npm test --workspace=packages/bruno-lang
+```

package.json

@@ -4,27 +4,37 @@
   "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",
-    "randomstring": "^1.2.2"
+    "pretty-quick": "^3.1.3",
+    "randomstring": "^1.2.2",
+    "ts-jest": "^29.0.5"
   },
   "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"
+    "test:report": "npx playwright show-report",
+    "prepare": "husky install"
   },
   "overrides": {
     "rollup": "3.2.5"

packages/bruno-app/.prettierrc.json

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

packages/bruno-app/next.config.js

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

packages/bruno-app/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@usebruno/app",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "cross-env ENV=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": {
@@ -15,8 +17,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",
@@ -26,29 +28,35 @@
     "file-saver": "^2.0.5",
     "formik": "^2.2.9",
     "graphiql": "^1.5.9",
-    "graphql": "^16.2.0",
+    "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
+    "handlebars": "^4.7.8",
+    "httpsnippet": "^3.0.1",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
+    "know-your-http-well": "^0.5.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
     "mousetrap": "^1.6.5",
     "nanoid": "3.3.4",
-    "next": "12.3.1",
+    "next": "12.3.3",
     "path": "^0.12.7",
     "platform": "^1.3.6",
     "posthog-node": "^2.1.0",
     "qs": "^6.11.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "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-hot-toast": "^2.4.0",
+    "react-inspector": "^6.0.2",
     "react-redux": "^7.2.6",
-    "react-tabs": "^3.2.3",
-    "reckonjs": "^0.1.2",
+    "react-tooltip": "^5.5.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": {
@@ -58,6 +66,7 @@
     "@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

@@ -1,23 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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,7 +14,11 @@ 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" />
@@ -84,8 +88,27 @@ 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 } from '@tabler/icons';
+import { IconSpeakerphone, IconBrandTwitter, IconBrandGithub, IconBrandDiscord, IconBook } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 
 const BrunoSupport = ({ onClose }) => {
@@ -8,6 +8,12 @@ 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} />
@@ -23,7 +29,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,13 +6,26 @@ 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
-  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
+  .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;
   }
 
@@ -20,13 +33,20 @@ 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,6 +6,9 @@
  */
 
 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;
@@ -15,7 +18,7 @@ if (!SERVER_RENDERED) {
   CodeMirror = require('codemirror');
 }
 
-export default class QueryEditor extends React.Component {
+export default class CodeEditor extends React.Component {
   constructor(props) {
     super(props);
 
@@ -23,6 +26,7 @@ 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() {
@@ -39,6 +43,7 @@ export default class QueryEditor 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': () => {
@@ -70,11 +75,12 @@ export default class QueryEditor extends React.Component {
     }));
     if (editor) {
       editor.on('change', this._onEdit);
+      this.addOverlay();
     }
   }
 
   componentDidUpdate(prevProps) {
-    // Ensure the changes caused by this update are not interpretted as
+    // Ensure the changes caused by this update are not interpreted as
     // user-input changes which could otherwise result in an infinite
     // event loop.
     this.ignoreChangeEvent = true;
@@ -88,7 +94,13 @@ export default class QueryEditor 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);
-      this.editor.setOption('mode', this.props.mode);
+    }
+
+    if (this.editor) {
+      let variables = getEnvironmentVariables(this.props.collection);
+      if (!isEqual(variables, this.variables)) {
+        this.addOverlay();
+      }
     }
 
     if (this.props.theme !== prevProps.theme && this.editor) {
@@ -107,7 +119,7 @@ export default class QueryEditor extends React.Component {
   render() {
     return (
       <StyledWrapper
-        className="h-full"
+        className="h-full w-full"
         aria-label="Code Editor"
         ref={(node) => {
           this._node = node;
@@ -116,6 +128,15 @@ export default class QueryEditor 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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,190 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,34 @@
+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.seperator};
+          border-top: solid 1px ${(props) => props.theme.dropdown.separator};
         }
       }
     }

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

@@ -5,7 +5,16 @@ 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.workspace.bg};
+    background-color: ${(props) => props.theme.sidebar.badge.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 } from '@tabler/icons';
+import { IconSettings, IconCaretDown, IconDatabase, IconDatabaseOff } 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 occured while selecting the environment'));
+      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
   };
 
   return (
@@ -63,13 +63,14 @@ const EnvironmentSelector = ({ collection }) => {
               onSelect(null);
             }}
           >
-            <span>No Environment</span>
+            <IconDatabaseOff size={18} strokeWidth={1.5} />
+            <span className="ml-2">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>Settings</span>
+            <span>Configure</span>
           </div>
         </Dropdown>
       </div>

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

@@ -1,30 +1,33 @@
-import React, { useEffect, useRef } from 'react';
-import Portal from 'components/Portal/index';
 import Modal from 'components/Modal/index';
+import Portal from 'components/Portal/index';
 import { useFormik } from 'formik';
-import { renameWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
-import * as Yup from 'yup';
-import { useDispatch } from 'react-redux';
+import { copyEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { useEffect, useRef } from 'react';
 import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
+import * as Yup from 'yup';
 
-const EditWorkspace = ({ onClose, workspace }) => {
+const CopyEnvironment = ({ collection, environment, onClose }) => {
   const dispatch = useDispatch();
   const inputRef = useRef();
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
-      name: workspace.name
+      name: environment.name + ' - Copy'
     },
     validationSchema: Yup.object({
-      name: Yup.string().min(1, 'must be atleast 1 characters').max(30, 'must be 30 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(renameWorkspace(values.name, workspace.uid))
+      dispatch(copyEnvironment(values.name, environment.uid, collection.uid))
         .then(() => {
-          toast.success('Workspace renamed!');
+          toast.success('Environment created in collection');
           onClose();
         })
-        .catch(() => toast.error('An error occured while renaming the workspace'));
+        .catch(() => toast.error('An error occurred while created the environment'));
     }
   });
 
@@ -40,14 +43,14 @@ const EditWorkspace = ({ onClose, workspace }) => {
 
   return (
     <Portal>
-      <Modal size="sm" title={'Rename Workspace'} confirmText="Rename" handleConfirm={onSubmit} handleCancel={onClose}>
+      <Modal size="sm" title={'Copy Environment'} confirmText="Copy" handleConfirm={onSubmit} handleCancel={onClose}>
         <form className="bruno-form" onSubmit={formik.handleSubmit}>
           <div>
             <label htmlFor="name" className="block font-semibold">
-              Workspace Name
+              New Environment Name
             </label>
             <input
-              id="workspace-name"
+              id="environment-name"
               type="text"
               name="name"
               ref={inputRef}
@@ -59,7 +62,9 @@ const EditWorkspace = ({ onClose, workspace }) => {
               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>
@@ -67,4 +72,4 @@ const EditWorkspace = ({ onClose, workspace }) => {
   );
 };
 
-export default EditWorkspace;
+export default CopyEnvironment;

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

@@ -16,7 +16,10 @@ 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))
@@ -24,7 +27,7 @@ const CreateEnvironment = ({ collection, onClose }) => {
           toast.success('Environment created in collection');
           onClose();
         })
-        .catch(() => toast.error('An error occured while created the environment'));
+        .catch(() => toast.error('An error occurred while created the environment'));
     }
   });
 
@@ -40,7 +43,13 @@ 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">
@@ -59,7 +68,9 @@ 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,13 +14,19 @@ const DeleteEnvironment = ({ onClose, environment, collection }) => {
         toast.success('Environment deleted successfully');
         onClose();
       })
-      .catch(() => toast.error('An error occured while deleting the environment'));
+      .catch(() => toast.error('An error occurred 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,18 +5,30 @@ 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;
     }
-    td {
+    thead td {
       padding: 6px 10px;
     }
   }

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

@@ -2,13 +2,16 @@ 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;
 
@@ -20,7 +23,7 @@ const EnvironmentVariables = ({ environment, collection }) => {
           type: 'CHANGES_SAVED'
         });
       })
-      .catch(() => toast.error('An error occured while saving the changes'));
+      .catch(() => toast.error('An error occurred while saving the changes'));
   };
 
   const addVariable = () => {
@@ -44,6 +47,10 @@ const EnvironmentVariables = ({ environment, collection }) => {
         variable.enabled = e.target.checked;
         break;
       }
+      case 'secret': {
+        variable.secret = e.target.checked;
+        break;
+      }
     }
     reducerDispatch({
       type: 'UPDATE_VAR',
@@ -63,8 +70,10 @@ const EnvironmentVariables = ({ environment, collection }) => {
       <table>
         <thead>
           <tr>
+            <td>Enabled</td>
             <td>Name</td>
             <td>Value</td>
+            <td>Secret</td>
             <td></td>
           </tr>
         </thead>
@@ -73,6 +82,14 @@ 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"
@@ -86,24 +103,25 @@ const EnvironmentVariables = ({ environment, collection }) => {
                       />
                     </td>
                     <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
+                      <SingleLineEditor
                         value={variable.value}
-                        className="mousetrap"
-                        onChange={(e) => handleVarChange(e, variable, 'value')}
+                        theme={storedTheme}
+                        onChange={(newValue) => handleVarChange({ target: { value: newValue } }, variable, 'value')}
+                        collection={collection}
                       />
                     </td>
                     <td>
-                      <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>
+                      <input
+                        type="checkbox"
+                        checked={variable.secret}
+                        className="mr-3 mousetrap"
+                        onChange={(e) => handleVarChange(e, variable, 'secret')}
+                      />
+                    </td>
+                    <td>
+                      <button onClick={() => handleRemoveVars(variable)}>
+                        <IconTrash strokeWidth={1.5} size={20} />
+                      </button>
                     </td>
                   </tr>
                 );
@@ -119,7 +137,12 @@ 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,6 +12,7 @@ const reducer = (state, action) => {
           name: '',
           value: '',
           type: 'text',
+          secret: false,
           enabled: true
         });
         draft.hasChanges = true;
@@ -24,6 +25,7 @@ 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

@@ -1,18 +1,30 @@
-import React, { useState } from 'react';
-import { IconEdit, IconTrash, IconDatabase } from '@tabler/icons';
-import EnvironmentVariables from './EnvironmentVariables';
-import RenameEnvironment from '../../RenameEnvironment';
+import { IconCopy, IconDatabase, IconEdit, IconTrash } from '@tabler/icons';
+import { useState } from 'react';
+import CopyEnvironment from '../../CopyEnvironment';
 import DeleteEnvironment from '../../DeleteEnvironment';
+import RenameEnvironment from '../../RenameEnvironment';
+import EnvironmentVariables from './EnvironmentVariables';
 
 const EnvironmentDetails = ({ environment, collection }) => {
   const [openEditModal, setOpenEditModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
-  console.log(environment);
+  const [openCopyModal, setOpenCopyModal] = useState(false);
 
   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}
+        />
+      )}
+      {openCopyModal && (
+        <CopyEnvironment onClose={() => setOpenCopyModal(false)} environment={environment} collection={collection} />
+      )}
       <div className="flex">
         <div className="flex flex-grow items-center">
           <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
@@ -20,6 +32,7 @@ const EnvironmentDetails = ({ environment, collection }) => {
         </div>
         <div className="flex gap-x-4 pl-4">
           <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />
+          <IconCopy className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenCopyModal(true)} />
           <IconTrash className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenDeleteModal(true)} />
         </div>
       </div>

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

@@ -1,4 +1,6 @@
 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';
@@ -8,9 +10,36 @@ 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(() => {
-    setSelectedEnvironment(environments && environments.length ? environments[0] : null);
-  }, [environments]);
+    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]);
 
   if (!selectedEnvironment) {
     return null;
@@ -25,7 +54,11 @@ 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,7 +16,10 @@ 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))
@@ -24,7 +27,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
           toast.success('Environment renamed successfully');
           onClose();
         })
-        .catch(() => toast.error('An error occured while renaming the environment'));
+        .catch(() => toast.error('An error occurred while renaming the environment'));
     }
   });
 
@@ -40,7 +43,13 @@ 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">
@@ -59,7 +68,9 @@ 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,11 +11,21 @@ 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,17 +1,12 @@
 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

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
+  color: ${(props) => props.theme.text};
+
   &.modal--animate-out {
     animation: fade-out 0.5s forwards cubic-bezier(0.19, 1, 0.22, 1);
 
@@ -19,7 +21,7 @@ const Wrapper = styled.div`
     align-items: flex-start;
     justify-content: center;
     overflow-y: auto;
-    z-index: 1003;
+    z-index: 10;
   }
 
   .bruno-modal-card {
@@ -28,7 +30,7 @@ const Wrapper = styled.div`
     background: var(--color-background-top);
     border-radius: var(--border-radius);
     position: relative;
-    z-index: 1003;
+    z-index: 10;
     max-width: calc(100% - var(--spacing-base-unit));
     box-shadow: var(--box-shadow-base);
     display: flex;
@@ -100,7 +102,7 @@ const Wrapper = styled.div`
       border-radius: 0px;
       outline: none;
       box-shadow: none;
-      transition: border-color ease-in-out .1s;
+      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};

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-heade-title">{title}</div> : null}
+    {title ? <div className="bruno-modal-header-title">{title}</div> : null}
     {handleCancel ? (
       <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null}>
         ×
@@ -14,7 +14,15 @@ 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';
 
@@ -30,7 +38,12 @@ const ModalFooter = ({ confirmText, cancelText, handleSubmit, handleCancel, conf
         </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>
@@ -38,18 +51,30 @@ const ModalFooter = ({ confirmText, cancelText, handleSubmit, handleCancel, conf
   );
 };
 
-const Modal = ({ size, title, confirmText, cancelText, handleCancel, handleConfirm, children, confirmDisabled, hideCancel, hideFooter }) => {
+const Modal = ({
+  size,
+  title,
+  confirmText,
+  cancelText,
+  handleCancel,
+  handleConfirm,
+  children,
+  confirmDisabled,
+  hideCancel,
+  hideFooter,
+  closeModalFadeTimeout = 500
+}) => {
   const [isClosing, setIsClosing] = useState(false);
   const escFunction = (event) => {
     const escKeyCode = 27;
     if (event.keyCode === escKeyCode) {
-      closeModal();
+      closeModal({ type: 'esc' });
     }
   };
 
-  const closeModal = () => {
+  const closeModal = (args) => {
     setIsClosing(true);
-    setTimeout(() => handleCancel(), 500);
+    setTimeout(() => handleCancel(args), closeModalFadeTimeout);
   };
 
   useEffect(() => {
@@ -64,18 +89,18 @@ const Modal = ({ size, title, confirmText, cancelText, handleCancel, handleConfi
   if (isClosing) {
     classes += ' modal--animate-out';
   }
-  if(hideFooter) {
+  if (hideFooter) {
     classes += ' modal-footer-none';
   }
   return (
     <StyledWrapper className={classes}>
       <div className={`bruno-modal-card modal-${size}`}>
-        <ModalHeader title={title} handleCancel={() => closeModal()} />
+        <ModalHeader title={title} handleCancel={() => closeModal({ type: 'icon' })} />
         <ModalContent>{children}</ModalContent>
         <ModalFooter
           confirmText={confirmText}
           cancelText={cancelText}
-          handleCancel={() => closeModal()}
+          handleCancel={() => closeModal({ type: 'button' })}
           handleSubmit={handleConfirm}
           confirmDisabled={confirmDisabled}
           hideCancel={hideCancel}
@@ -84,7 +109,12 @@ const Modal = ({ size, title, confirmText, cancelText, handleCancel, handleConfi
       </div>
 
       {/* Clicking on backdrop closes the modal */}
-      <div className="bruno-modal-backdrop" onClick={() => closeModal()} />
+      <div
+        className="bruno-modal-backdrop"
+        onClick={() => {
+          closeModal({ type: 'backdrop' });
+        }}
+      />
     </StyledWrapper>
   );
 };

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,36 @@
+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/StyledWrapper.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  color: var(--color-text);
-  .collection-options {
+  color: ${(props) => props.theme.text};
+  .rows {
     svg {
       position: relative;
       top: -1px;

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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,213 @@
+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}
+            tabIndex="-1"
+            className="mr-3 mousetrap"
+            onChange={(e) => handleAssertionChange(e, assertion, 'enabled')}
+          />
+          <button tabIndex="-1" 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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  font-size: 0.8125rem;
+
+  .auth-mode-selector {
+    background: transparent;
+
+    .auth-mode-label {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+
+    .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

@@ -0,0 +1,70 @@
+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 auth-mode-label select-none">
+        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" 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/BasicAuth/StyledWrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+
+  .single-line-editor-wrapper {
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+const BasicAuth = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const basicAuth = item.draft ? get(item, 'draft.request.auth.basic', {}) : get(item, 'request.auth.basic', {});
+
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
+  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  const handleUsernameChange = (username) => {
+    dispatch(
+      updateAuth({
+        mode: 'basic',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          username: username,
+          password: basicAuth.password
+        }
+      })
+    );
+  };
+
+  const handlePasswordChange = (password) => {
+    dispatch(
+      updateAuth({
+        mode: 'basic',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          username: basicAuth.username,
+          password: password
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Username</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={basicAuth.username || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleUsernameChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Password</label>
+      <div className="single-line-editor-wrapper">
+        <SingleLineEditor
+          value={basicAuth.password || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handlePasswordChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default BasicAuth;

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

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+
+  .single-line-editor-wrapper {
+    padding: 0.15rem 0.4rem;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+const BearerAuth = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const bearerToken = item.draft
+    ? get(item, 'draft.request.auth.bearer.token')
+    : get(item, 'request.auth.bearer.token');
+
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
+  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  const handleTokenChange = (token) => {
+    dispatch(
+      updateAuth({
+        mode: 'bearer',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          token: token
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Token</label>
+      <div className="single-line-editor-wrapper">
+        <SingleLineEditor
+          value={bearerToken}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleTokenChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default BearerAuth;

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

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import get from 'lodash/get';
+import AuthMode from './AuthMode';
+import BearerAuth from './BearerAuth';
+import BasicAuth from './BasicAuth';
+import StyledWrapper from './StyledWrapper';
+
+const Auth = ({ item, collection }) => {
+  const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
+
+  const getAuthView = () => {
+    switch (authMode) {
+      case 'basic': {
+        return <BasicAuth collection={collection} item={item} />;
+      }
+      case 'bearer': {
+        return <BearerAuth collection={collection} item={item} />;
+      }
+    }
+  };
+
+  return (
+    <StyledWrapper className="w-full mt-1">
+      <div className="flex flex-grow justify-start items-center">
+        <AuthMode item={item} collection={collection} />
+      </div>
+      {getAuthView()}
+    </StyledWrapper>
+  );
+};
+export default Auth;

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

@@ -5,6 +5,7 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
+    table-layout: fixed;
 
     thead,
     td {
@@ -18,6 +19,14 @@ const Wrapper = styled.div`
     }
     td {
       padding: 6px 10px;
+
+      &:nth-child(1) {
+        width: 30%;
+      }
+
+      &:nth-child(3) {
+        width: 70px;
+      }
     }
   }
 
@@ -30,6 +39,7 @@ 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,11 +3,19 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
-import { addFormUrlEncodedParam, updateFormUrlEncodedParam, deleteFormUrlEncodedParam } from 'providers/ReduxStore/slices/collections';
+import { 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 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 = () => {
@@ -19,6 +27,8 @@ 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) {
@@ -30,10 +40,6 @@ 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;
@@ -65,7 +71,6 @@ const FormUrlEncodedParams = ({ item, collection }) => {
           <tr>
             <td>Key</td>
             <td>Value</td>
-            <td>Description</td>
             <td></td>
           </tr>
         </thead>
@@ -87,33 +92,35 @@ const FormUrlEncodedParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
+                      <SingleLineEditor
                         value={param.value}
-                        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')}
+                        theme={storedTheme}
+                        onSave={onSave}
+                        onChange={(newValue) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'value'
+                          )
+                        }
+                        onRun={handleRun}
+                        collection={collection}
                       />
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
-                        <button onClick={() => handleRemoveParams(param)}>
+                        <input
+                          type="checkbox"
+                          checked={param.enabled}
+                          tabIndex="-1"
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleParamChange(e, param, 'enabled')}
+                        />
+                        <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
                       </div>

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

@@ -6,10 +6,17 @@ 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 Auth from 'components/RequestPane/Auth';
+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';
 
@@ -18,26 +25,31 @@ 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 { storedTheme } = useTheme();
+
+  const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
+
+  const request = item.draft ? item.draft.request : item.request;
+
   let {
     schema,
     loadSchema,
     isLoading: isSchemaLoading,
     error: schemaError
-  } = useGraphqlSchema(url);
+  } = useGraphqlSchema(url, environment, request, collection.collectionVariables);
 
   const loadGqlSchema = () => {
-    if(!isSchemaLoading) {
+    if (!isSchemaLoading) {
       loadSchema();
     }
   };
 
   useEffect(() => {
-    if(onSchemaLoad) {
+    if (onSchemaLoad) {
       onSchemaLoad(schema);
     }
   }, [schema]);
@@ -66,20 +78,41 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
   const getTabPanel = (tab) => {
     switch (tab) {
       case 'query': {
-        return <QueryEditor
-          theme={storedTheme}
-          schema={schema}
-          width={leftPaneWidth}
-          onSave={onSave}
-          value={query}
-          onRun={onRun}
-          onEdit={onQueryChange}
-          onClickReference={handleGqlClickReference}
-        />;
+        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} />;
       }
       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>;
       }
@@ -92,7 +125,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 occured!</div>;
+    return <div className="pb-4 px-4">An error occurred!</div>;
   }
 
   const getTabClassname = (tabName) => {
@@ -103,27 +136,41 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex items-center tabs" role="tablist">
+      <div className="flex flex-wrap 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="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 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>
+        <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>
-          <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,34 +1,19 @@
 import { useState } from 'react';
 import toast from 'react-hot-toast';
-import { getIntrospectionQuery, buildClientSchema } from 'graphql';
+import { buildClientSchema } from 'graphql';
+import { fetchGqlSchema } from 'utils/network';
 import { simpleHash } from 'utils/common';
 
 const schemaHashPrefix = 'bruno.graphqlSchema';
 
-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 useGraphqlSchema = (endpoint, environment, request, collectionVariables) => {
   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));
@@ -40,14 +25,14 @@ const useGraphqlSchema = (endpoint) => {
 
   const loadSchema = () => {
     setIsLoading(true);
-    fetchSchema(endpoint)
-      .then((res) => res.json())
+    fetchGqlSchema(endpoint, environment, request, collectionVariables)
+      .then((res) => res.data)
       .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'));
         }
@@ -55,7 +40,7 @@ const useGraphqlSchema = (endpoint) => {
       .catch((err) => {
         setIsLoading(false);
         setError(err);
-        toast.error('Error occured while loading Graphql Schema');
+        toast.error('Error occurred while loading GraphQL Schema');
       });
   };
 

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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,42 @@
+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,6 +7,12 @@ 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 }) => {
@@ -34,6 +40,21 @@ 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>;
       }
@@ -46,7 +67,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 occured!</div>;
+    return <div className="pb-4 px-4">An error occurred!</div>;
   }
 
   const getTabClassname = (tabName) => {
@@ -57,9 +78,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex items-center tabs" role="tablist">
+      <div className="flex flex-wrap items-center tabs" role="tablist">
         <div className={getTabClassname('params')} role="tab" onClick={() => selectTab('params')}>
-          Params
+          Query
         </div>
         <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
           Body
@@ -67,15 +88,32 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
         </div>
-        {/* Moved to post mvp */}
-        {/* <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>Auth</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>
         {focusedTab.requestPaneTab === 'body' ? (
           <div className="flex flex-grow justify-end items-center">
             <RequestBodyMode item={item} collection={collection} />
           </div>
         ) : null}
       </div>
-      <section className="flex w-full mt-5">{getTabPanel(focusedTab.requestPaneTab)}</section>
+      <section
+        className={`flex w-full ${['script', 'vars', 'auth'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'}`}
+      >
+        {getTabPanel(focusedTab.requestPaneTab)}
+      </section>
     </StyledWrapper>
   );
 };

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

@@ -5,6 +5,7 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
+    table-layout: fixed;
 
     thead,
     td {
@@ -18,6 +19,14 @@ const Wrapper = styled.div`
     }
     td {
       padding: 6px 10px;
+
+      &:nth-child(1) {
+        width: 30%;
+      }
+
+      &:nth-child(3) {
+        width: 70px;
+      }
     }
   }
 
@@ -30,6 +39,7 @@ 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,11 +3,19 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
-import { addMultipartFormParam, updateMultipartFormParam, deleteMultipartFormParam } from 'providers/ReduxStore/slices/collections';
+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 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 = () => {
@@ -19,6 +27,8 @@ 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) {
@@ -30,10 +40,6 @@ 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;
@@ -65,7 +71,6 @@ const MultipartFormParams = ({ item, collection }) => {
           <tr>
             <td>Key</td>
             <td>Value</td>
-            <td>Description</td>
             <td></td>
           </tr>
         </thead>
@@ -87,33 +92,35 @@ const MultipartFormParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
+                      <SingleLineEditor
+                        onSave={onSave}
+                        theme={storedTheme}
                         value={param.value}
-                        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')}
+                        onChange={(newValue) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'value'
+                          )
+                        }
+                        onRun={handleRun}
+                        collection={collection}
                       />
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
-                        <button onClick={() => handleRemoveParams(param)}>
+                        <input
+                          type="checkbox"
+                          checked={param.enabled}
+                          tabIndex="-1"
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleParamChange(e, param, 'enabled')}
+                        />
+                        <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
                       </div>

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

@@ -14,7 +14,20 @@ const StyledWrapper = styled.div`
 
   // Todo: dark mode temporary fix
   // Clean this
-  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
+  .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 {
     color: #9cdcfe !important;
   }
 
@@ -22,13 +35,20 @@ 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,7 +6,10 @@
  */
 
 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';
@@ -29,6 +32,7 @@ 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() {
@@ -37,12 +41,17 @@ 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
@@ -129,10 +138,11 @@ 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 interpretted as
+    // Ensure the changes caused by this update are not interpreted as
     // user-input changes which could otherwise result in an infinite
     // event loop.
     this.ignoreChangeEvent = true;
@@ -151,6 +161,11 @@ 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;
   }
 
@@ -163,6 +178,15 @@ 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,7 +59,10 @@ 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,6 +5,7 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
+    table-layout: fixed;
 
     thead,
     td {
@@ -12,12 +13,20 @@ 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,12 +3,16 @@ 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 = () => {
@@ -20,6 +24,8 @@ 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);
 
@@ -32,10 +38,6 @@ 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;
@@ -66,9 +68,8 @@ const QueryParams = ({ item, collection }) => {
       <table>
         <thead>
           <tr>
-            <td>Key</td>
+            <td>Name</td>
             <td>Value</td>
-            <td>Description</td>
             <td></td>
           </tr>
         </thead>
@@ -90,33 +91,35 @@ const QueryParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
+                      <SingleLineEditor
                         value={param.value}
-                        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')}
+                        theme={storedTheme}
+                        onSave={onSave}
+                        onChange={(newValue) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'value'
+                          )
+                        }
+                        onRun={handleRun}
+                        collection={collection}
                       />
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
-                        <button onClick={() => handleRemoveParam(param)}>
+                        <input
+                          type="checkbox"
+                          checked={param.enabled}
+                          tabIndex="-1"
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleParamChange(e, param, 'enabled')}
+                        />
+                        <button tabIndex="-1" onClick={() => handleRemoveParam(param)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
                       </div>

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

@@ -10,7 +10,9 @@ 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/StyledWrapper.js

@@ -32,6 +32,50 @@ const Wrapper = styled.div`
     position: relative;
     top: 1px;
   }
+
+  .tooltip {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .tooltiptext {
+    visibility: hidden;
+    width: auto;
+    background-color: ${(props) => props.theme.requestTabs.active.bg};
+    color: ${(props) => props.theme.text};
+    text-align: center;
+    border-radius: 4px;
+    padding: 4px 8px;
+    position: absolute;
+    z-index: 1;
+    bottom: 34px;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    white-space: nowrap;
+  }
+
+  .tooltiptext::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -4px;
+    border-width: 4px;
+    border-style: solid;
+    border-color: ${(props) => props.theme.requestTabs.active.bg} transparent transparent transparent;
+  }
+
+  .shortcut {
+    font-size: 0.625rem;
+  }
 `;
 
 export default Wrapper;

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

@@ -1,17 +1,33 @@
-import React from 'react';
+import React, { useState, useEffect } 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 { IconDeviceFloppy, IconArrowRight } from '@tabler/icons';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { isMacOS } from 'utils/common/platform';
 import StyledWrapper from './StyledWrapper';
 
 const QueryUrl = ({ item, collection, handleRun }) => {
-  const { theme } = useTheme();
+  const { theme, storedTheme } = 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 isMac = isMacOS();
+  const saveShortcut = isMac ? 'Cmd + S' : 'Ctrl + S';
+
+  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(
@@ -38,19 +54,42 @@ 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">
-        <input
-          className="px-3 w-full mousetrap"
-          type="text"
+      <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
           value={url}
-          autoComplete="off"
-          autoCorrect="off"
-          autoCapitalize="off"
-          spellCheck="false"
-          onChange={(event) => onUrlChange(event.target.value)}
+          onSave={onSave}
+          theme={storedTheme}
+          onChange={(newValue) => onUrlChange(newValue)}
+          onRun={handleRun}
+          collection={collection}
         />
         <div className="flex items-center h-full mr-2 cursor-pointer" id="send-request" onClick={handleRun}>
-          <SendIcon color={theme.requestTabPanel.url.icon} width={22}/>
+          <div
+            className="tooltip mr-3"
+            onClick={(e) => {
+              e.stopPropagation();
+              if (!item.draft) return;
+              onSave();
+            }}
+          >
+            <IconDeviceFloppy
+              color={item.draft ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+              strokeWidth={1.5}
+              size={22}
+              className={`${item.draft ? 'cursor-pointer' : 'cursor-default'}`}
+            />
+            <span className="tooltiptext text-xs">
+              Save <span className="shortcut">({saveShortcut})</span>
+            </span>
+          </div>
+          <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={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,9 +13,7 @@ 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(
@@ -45,7 +43,15 @@ const RequestBody = ({ item, collection }) => {
 
     return (
       <StyledWrapper className="w-full">
-        <CodeEditor theme={storedTheme} value={bodyContent[bodyMode] || ''} onEdit={onEdit} onRun={onRun} onSave={onSave} mode={codeMirrorMode[bodyMode]} />
+        <CodeEditor
+          collection={collection}
+          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,6 +5,7 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
+    table-layout: fixed;
 
     thead,
     td {
@@ -18,6 +19,14 @@ 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,11 +3,17 @@ 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';
+import { headers as StandardHTTPHeaders } from 'know-your-http-well';
+const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 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 = () => {
@@ -19,6 +25,8 @@ 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) {
@@ -30,10 +38,6 @@ 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;
@@ -63,57 +67,67 @@ const RequestHeaders = ({ item, collection }) => {
       <table>
         <thead>
           <tr>
-            <td>Key</td>
+            <td>Name</td>
             <td>Value</td>
-            <td>Description</td>
             <td></td>
           </tr>
         </thead>
         <tbody>
           {headers && headers.length
-            ? headers.map((header, index) => {
+            ? headers.map((header) => {
                 return (
                   <tr key={header.uid}>
                     <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
+                      <SingleLineEditor
                         value={header.name}
-                        className="mousetrap"
-                        onChange={(e) => handleHeaderValueChange(e, header, 'name')}
+                        theme={storedTheme}
+                        onSave={onSave}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            header,
+                            'name'
+                          )
+                        }
+                        autocomplete={headerAutoCompleteList}
+                        onRun={handleRun}
+                        collection={collection}
                       />
                     </td>
                     <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
+                      <SingleLineEditor
                         value={header.value}
-                        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')}
+                        theme={storedTheme}
+                        onSave={onSave}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            header,
+                            'value'
+                          )
+                        }
+                        onRun={handleRun}
+                        collection={collection}
                       />
                     </td>
                     <td>
                       <div className="flex items-center">
-                        <input type="checkbox" checked={header.enabled} className="mr-3 mousetrap" onChange={(e) => handleHeaderValueChange(e, header, 'enabled')} />
-                        <button onClick={() => handleRemoveHeader(header)}>
+                        <input
+                          type="checkbox"
+                          checked={header.enabled}
+                          tabIndex="-1"
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
+                        />
+                        <button tabIndex="-1" onClick={() => handleRemoveHeader(header)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
                       </div>

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

@@ -28,7 +28,14 @@ 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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,152 @@
+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}
+                          tabIndex="-1"
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleVarChange(e, _var, 'enabled')}
+                        />
+                        <button tabIndex="-1" 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

@@ -0,0 +1,54 @@
+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,9 +1,10 @@
-import React from 'react';
+import React, { useEffect, useState } 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(
@@ -13,11 +14,27 @@ 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 yml file associated with this request was deleted on your filesystem.</div>
+        <div className="mt-2">
+          This can happen when the .bru 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,6 +12,9 @@ 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';
@@ -32,7 +35,9 @@ 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);
 
@@ -44,10 +49,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);
     }
   };
@@ -65,10 +70,13 @@ 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);
     }
   };
@@ -104,7 +112,7 @@ const RequestTabPanel = () => {
   }
 
   if (!focusedTab || !focusedTab.uid || !focusedTab.collectionUid) {
-    return <div className="pb-4 px-4">An error occured!</div>;
+    return <div className="pb-4 px-4">An error occurred!</div>;
   }
 
   let collection = find(collections, (c) => c.uid === focusedTab.collectionUid);
@@ -112,6 +120,18 @@ 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} />;
@@ -132,7 +152,13 @@ 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}
@@ -144,7 +170,9 @@ 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>
 
@@ -159,19 +187,15 @@ 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,9 +1,44 @@
 import React from 'react';
-import { IconFiles } from '@tabler/icons';
+import { uuid } from 'utils/common';
+import { IconFiles, IconRun, IconEye, IconSettings } 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">
@@ -12,6 +47,15 @@ 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>