fix: fixed issue renaming workspaces and creating collections

.github/workflows/playwright.yml

@@ -1,27 +0,0 @@
-name: Playwright Tests
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - name: Install dependencies
-      run: npm i --legacy-peer-deps
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npm run test:e2e
-    - uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30

.github/workflows/unit-tests.yml

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

.gitignore

@@ -17,7 +17,6 @@ chrome-extension
 chrome-extension.pem
 chrome-extension.crx
 bruno.zip
-*.zip
 
 # misc
 .DS_Store
@@ -38,6 +37,3 @@ yarn-error.log*
 /renderer
 /renderer/.next/
 /renderer/out/
-/test-results/
-/playwright-report/
-/playwright/.cache/

.nvmrc

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

contributing.md

@@ -1,35 +1,44 @@
 ## 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.
+I am happy that you are looking to improve bruno. Below are the guidelines to get started bringing up bruno on your computed.
 
 ### Technology Stack
-
 Bruno is built using NextJs and React. We also use electron to ship a desktop version (that supports local collections)
 
-Libraries we use
+Libraries we use 
+* CSS - Tailwind
+* Code Editors - Codemirror
+* State Management - Redux
+* Icons - Tabler Icons
+* Forms - formik
+* Schema Validation - Yup
+* Request Client - axios
+* Filesystem Watcher - chokidar
 
-- CSS - Tailwind
-- Code Editors - Codemirror
-- State Management - Redux
-- Icons - Tabler Icons
-- Forms - formik
-- Schema Validation - Yup
-- Request Client - axios
-- Filesystem Watcher - chokidar
 
 ### 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 v14.x and npm 8.x. We use npm workspaces in the project
 
 ### Lets start coding
 
-Please reference [development.md](docs/development.md) for instructions on running the local development environment.
+```bash
+# clone and cd into bruno
+# use Node 14.x, Npm 8.x 
+
+# Install deps (note that we use npm workspaces)
+npm i
+
+# run next app
+npm run dev:web
+
+# run electron app
+# neededonly if you want to test changes related to electron app
+# please note that both web and electron use the same code
+# if it works in web, then it should also work in electron
+npm run dev:electron
+
+# open in browser
+open http://localhost:3000
+```
 
 ### Raising Pull Request
-
-- Please keep the PR's small and focused on one thing
-- Please follow the format of creating branches
-  - feature/[feature name]: This branch should contain changes for a specific feature
-    - Example: feature/dark-mode
-  - bugfix/[bug name]: This branch should container only bug fixes for a specific bug
-    - Example bugfix/bug-1
+* Please keep the PR's small and focused on one thing

docs/development.md

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

main/app/menu-template.js

@@ -0,0 +1,55 @@
+const { ipcMain } = require('electron');
+
+const template = [
+  {
+    label: 'Collection',
+    submenu: [
+      {
+        label: 'Open Collection',
+        click () {
+          ipcMain.emit('main:open-collection');
+        }
+      },
+      { role: 'quit' }
+    ]
+  },
+  {
+     label: 'Edit',
+     submenu: [
+      { role: 'undo'},
+      { role: 'redo'},
+      { role: 'separator'},
+      { role: 'cut'},
+      { role: 'copy'},
+      { role: 'paste'}
+    ]
+  },
+  {
+     label: 'View',
+     submenu: [
+      { role: 'reload'},
+      { role: 'toggledevtools'},
+      { role: 'separator'},
+      { role: 'resetzoom'},
+      { role: 'zoomin'},
+      { role: 'zoomout'},
+      { role: 'separator'},
+      { role: 'togglefullscreen'}
+    ]
+  },
+  {
+     role: 'window',
+     submenu: [
+      { role: 'minimize'},
+      { role: 'close'}
+    ]
+  },
+  {
+    role: 'help',
+    submenu: [
+      { label: 'Learn More'}
+    ]
+  }
+];
+
+module.exports = template;

main/index.js

@@ -0,0 +1,54 @@
+const path = require('path');
+const { format } = require('url');
+const { BrowserWindow, app, Menu } = require('electron');
+const { setContentSecurityPolicy } = require('electron-util');
+
+const menuTemplate = require('./app/menu-template');
+const registerIpc = require('./ipc');
+const isDev = require('electron-is-dev');
+const prepareNext = require('electron-next');
+
+setContentSecurityPolicy(`
+	default-src * 'unsafe-inline' 'unsafe-eval';
+	script-src * 'unsafe-inline' 'unsafe-eval';
+	connect-src * 'unsafe-inline';
+	base-uri 'none';
+	form-action 'none';
+	frame-ancestors 'none';
+`);
+
+const menu = Menu.buildFromTemplate(menuTemplate);
+Menu.setApplicationMenu(menu);
+
+let mainWindow;
+
+// Prepare the renderer once the app is ready
+app.on('ready', async () => {
+  await prepareNext('./renderer');
+
+  mainWindow = new BrowserWindow({
+    width: 1280,
+    height: 768,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: true,
+      preload: path.join(__dirname, "preload.js")
+    },
+  });
+
+  const url = isDev
+    ? 'http://localhost:8000'
+    : format({
+        pathname: path.join(__dirname, '../renderer/out/index.html'),
+        protocol: 'file:',
+        slashes: true
+      });
+
+  mainWindow.loadURL(url);
+
+  // register all ipc handlers
+  registerIpc(mainWindow);
+});
+
+// Quit the app once all windows are closed
+app.on('window-all-closed', app.quit);

main/ipc.js

@@ -0,0 +1,47 @@
+const axios = require('axios');
+const FormData = require('form-data');
+const { ipcMain } = require('electron');
+const { forOwn, extend } = require('lodash');
+
+
+const registerIpc = () => {
+  // handler for sending http request
+  ipcMain.handle('send-http-request', async (event, request) => {
+    try {
+      // make axios work in node using form data
+      // reference: https://github.com/axios/axios/issues/1006#issuecomment-320165427
+      if(request.headers && request.headers['content-type'] === 'multipart/form-data') {
+        const form = new FormData();
+        forOwn(request.data, (value, key) => {
+          form.append(key, value);
+        });
+        extend(request.headers, form.getHeaders());
+        request.data = form;
+      }
+
+      const result = await axios(request);
+
+      return {
+        status: result.status,
+        headers: result.headers,
+        data: result.data
+      };
+    } catch (error) {
+      if(error.response) {
+        return {
+          status: error.response.status,
+          headers: error.response.headers,
+          data: error.response.data
+        };
+      }
+
+      return {
+        status: -1,
+        headers: [],
+        data: null
+      };
+    }
+  });
+};
+
+module.exports = registerIpc;

main/preload.js

@@ -0,0 +1,14 @@
+const { ipcRenderer, contextBridge } = require('electron');
+
+contextBridge.exposeInMainWorld('ipcRenderer', {
+  invoke: (channel, ...args) => ipcRenderer.invoke(channel, ...args),
+  on: (channel, handler) => {
+    // Deliberately strip event as it includes `sender` 
+    const subscription = (event, ...args) => handler(...args);
+    ipcRenderer.on(channel, subscription);
+
+    return () => {
+      ipcRenderer.removeListener(channel, subscription);
+    };
+  }
+});

main/utils/common.js

@@ -0,0 +1,14 @@
+const { customAlphabet } = require('nanoid');
+
+// a customized version of nanoid without using _ and -
+const uuid = () => {
+  // https://github.com/ai/nanoid/blob/main/url-alphabet/index.js
+  const urlAlphabet = 'useandom26T198340PX75pxJACKVERYMINDBUSHWOLFGQZbfghjklqvwyzrict';
+  const customNanoId = customAlphabet (urlAlphabet, 21);
+
+  return customNanoId();
+};
+
+module.exports = {
+  uuid
+};

package.json

@@ -4,35 +4,19 @@
   "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"
+    "packages/bruno-testbench"
   ],
   "devDependencies": {
-    "@faker-js/faker": "^7.6.0",
-    "@jest/globals": "^29.2.0",
-    "@playwright/test": "^1.27.1",
     "jest": "^29.2.0",
-    "randomstring": "^1.2.2",
-    "ts-jest": "^29.0.5"
+    "randomstring": "^1.2.2"
   },
   "scripts": {
     "dev:web": "npm run dev --workspace=packages/bruno-app",
     "build:web": "npm run build --workspace=packages/bruno-app",
-    "prettier:web": "npm run prettier --workspace=packages/bruno-app",
     "dev:electron": "npm run dev --workspace=packages/bruno-electron",
-    "build:bruno-query": "npm run build --workspace=packages/bruno-query",
-    "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
-    "build:electron": "./scripts/build-electron.sh",
-    "test:e2e": "npx playwright test",
-    "test:report": "npx playwright show-report"
-  },
-  "overrides": {
-    "rollup": "3.2.5"
+    "build:chrome-extension": "./scripts/build-chrome-extension.sh",
+    "build:electron": "./scripts/build-electron.sh"
   }
-}
+}

packages/bruno-app/jsconfig.json

@@ -6,8 +6,6 @@
     "paths": {
       "assets/*": ["src/assets/*"],
       "components/*": ["src/components/*"],
-      "hooks/*": ["src/hooks/*"],
-      "themes/*": ["src/themes/*"],
       "api/*": ["src/api/*"],
       "pageComponents/*": ["src/pageComponents/*"],
       "providers/*": ["src/providers/*"],

packages/bruno-app/next.config.js

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

packages/bruno-app/package.json

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

packages/bruno-app/public/theme/dark.js

@@ -1,30 +0,0 @@
-const darkTheme = {
-  brand: '#546de5',
-  text: 'rgb(52 52 52)',
-  'primary-text': '#ffffff',
-  'primary-theme': '#1e1e1e',
-  'secondary-text': '#929292',
-  'sidebar-collection-item-active-indent-border': '#d0d0d0',
-  'sidebar-collection-item-active-background': '#e1e1e1',
-  'sidebar-background': '#252526',
-  'sidebar-bottom-bg': '#68217a',
-  'request-dragbar-background': '#efefef',
-  'request-dragbar-background-active': 'rgb(200, 200, 200)',
-  'tab-inactive': 'rgb(155 155 155)',
-  'tab-active-border': '#546de5',
-  'layout-border': '#dedede',
-  'codemirror-border': '#efefef',
-  'codemirror-background': 'rgb(243, 243, 243)',
-  'text-link': '#1663bb',
-  'text-danger': 'rgb(185, 28, 28)',
-  'background-danger': '#dc3545',
-  'method-get': 'rgb(5, 150, 105)',
-  'method-post': '#8e44ad',
-  'method-delete': 'rgb(185, 28, 28)',
-  'method-patch': 'rgb(52 52 52)',
-  'method-options': 'rgb(52 52 52)',
-  'method-head': 'rgb(52 52 52)',
-  'table-stripe': '#f3f3f3'
-};
-
-export default darkTheme;

packages/bruno-app/public/theme/index.js

@@ -1,7 +0,0 @@
-import darkTheme from './dark';
-import lightTheme from './light';
-
-export default {
-  Light: lightTheme,
-  Dark: darkTheme
-};

packages/bruno-app/public/theme/light.js

@@ -1,30 +0,0 @@
-const lightTheme = {
-  brand: '#546de5',
-  text: 'rgb(52 52 52)',
-  'primary-text': 'rgb(52 52 52)',
-  'primary-theme': '#ffffff',
-  'secondary-text': '#929292',
-  'sidebar-collection-item-active-indent-border': '#d0d0d0',
-  'sidebar-collection-item-active-background': '#e1e1e1',
-  'sidebar-background': '#f3f3f3',
-  'sidebar-bottom-bg': '#f3f3f3',
-  'request-dragbar-background': '#efefef',
-  'request-dragbar-background-active': 'rgb(200, 200, 200)',
-  'tab-inactive': 'rgb(155 155 155)',
-  'tab-active-border': '#546de5',
-  'layout-border': '#dedede',
-  'codemirror-border': '#efefef',
-  'codemirror-background': 'rgb(243, 243, 243)',
-  'text-link': '#1663bb',
-  'text-danger': 'rgb(185, 28, 28)',
-  'background-danger': '#dc3545',
-  'method-get': 'rgb(5, 150, 105)',
-  'method-post': '#8e44ad',
-  'method-delete': 'rgb(185, 28, 28)',
-  'method-patch': 'rgb(52 52 52)',
-  'method-options': 'rgb(52 52 52)',
-  'method-head': 'rgb(52 52 52)',
-  'table-stripe': '#f3f3f3'
-};
-
-export default lightTheme;

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

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

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

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

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

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

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import Modal from 'components/Modal/index';
-import { IconSpeakerphone, IconBrandTwitter, IconBrandGithub, IconBrandDiscord, IconBook } from '@tabler/icons';
+import { IconSpeakerphone, IconBrandTwitter } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
+import GithubSvg from 'assets/github.svg';
 
 const BrunoSupport = ({ onClose }) => {
   return (
@@ -9,31 +10,19 @@ const BrunoSupport = ({ onClose }) => {
       <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">
+            <a href="https://github.com/usebruno/bruno/issues" target="_blank" className="flex items-center">
               <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} />
+            <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-center">
+              <img src={GithubSvg.src} style={{ width: '18px' }} />
               <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">
+            <a href="https://twitter.com/use_bruno" target="_blank" className="flex items-center">
               <IconBrandTwitter size={18} strokeWidth={2} />
               <span className="label ml-2">Twitter</span>
             </a>

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

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

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

@@ -6,9 +6,6 @@
  */
 
 import React from 'react';
-import isEqual from 'lodash/isEqual';
-import { getEnvironmentVariables } from 'utils/collections';
-import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import StyledWrapper from './StyledWrapper';
 
 let CodeMirror;
@@ -18,7 +15,7 @@ if (!SERVER_RENDERED) {
   CodeMirror = require('codemirror');
 }
 
-export default class CodeEditor extends React.Component {
+export default class QueryEditor extends React.Component {
   constructor(props) {
     super(props);
 
@@ -26,7 +23,6 @@ export default class CodeEditor extends React.Component {
     // editor is updated, which can later be used to protect the editor from
     // unnecessary updates during the update lifecycle.
     this.cachedValue = props.value || '';
-    this.variables = {};
   }
 
   componentDidMount() {
@@ -42,9 +38,7 @@ export default class CodeEditor extends React.Component {
       showCursorWhenSelecting: true,
       foldGutter: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-      readOnly: this.props.readOnly,
-      scrollbarStyle: "overlay",
-      theme: this.props.theme === 'dark' ? 'monokai' : 'default',
+      readOnly: this.props.readOnly ? 'nocursor' : false,
       extraKeys: {
         'Cmd-Enter': () => {
           if (this.props.onRun) {
@@ -66,8 +60,6 @@ export default class CodeEditor extends React.Component {
             this.props.onSave();
           }
         },
-        'Cmd-F': 'findPersistent',
-        'Ctrl-F': 'findPersistent',
         Tab: function (cm) {
           cm.replaceSelection('  ', 'end');
         }
@@ -75,7 +67,6 @@ export default class CodeEditor extends React.Component {
     }));
     if (editor) {
       editor.on('change', this._onEdit);
-      this.addOverlay();
     }
   }
 
@@ -94,17 +85,7 @@ export default class CodeEditor extends React.Component {
     if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
       this.cachedValue = this.props.value;
       this.editor.setValue(this.props.value);
-    }
-
-    if(this.editor) {
-      let variables = getEnvironmentVariables(this.props.collection);
-      if (!isEqual(variables, this.variables)) {
-        this.addOverlay();
-      }
-    }
-
-    if (this.props.theme !== prevProps.theme && this.editor) {
-      this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
+      this.editor.setOption('mode', this.props.mode);
     }
     this.ignoreChangeEvent = false;
   }
@@ -128,15 +109,6 @@ export default class CodeEditor extends React.Component {
     );
   }
 
-  addOverlay = () => {
-    const mode = this.props.mode || 'application/ld+json';
-    let variables = getEnvironmentVariables(this.props.collection);
-    this.variables = variables;
-
-    defineCodeMirrorBrunoVariablesMode(variables, mode);
-    this.editor.setOption('mode', 'brunovariables');
-  }
-
   _onEdit = () => {
     if (!this.ignoreChangeEvent && this.editor) {
       this.cachedValue = this.editor.getValue();

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

@@ -9,11 +9,11 @@ const Wrapper = styled.div`
 
   .tippy-box {
     min-width: 135px;
+    background-color: white;
     font-size: 0.8125rem;
-    color: ${(props) => props.theme.dropdown.color};
-    background-color: ${(props) => props.theme.dropdown.bg};
-    box-shadow: ${(props) => props.theme.dropdown.shadow};
-    border-radius: 3px;
+    color: rgb(48 48 48);
+    background: #fff;
+    box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
 
     .tippy-content {
       padding-left: 0;
@@ -25,7 +25,6 @@ const Wrapper = styled.div`
         display: flex;
         align-items: center;
         padding: 0.35rem 0.6rem;
-        background-color: ${(props) => props.theme.dropdown.labelBg};
       }
 
       .dropdown-item {
@@ -34,16 +33,8 @@ const Wrapper = styled.div`
         padding: 0.35rem 0.6rem;
         cursor: pointer;
 
-        .icon {
-          color: ${(props) => props.theme.dropdown.iconColor};
-        }
-
         &:hover {
-          background-color: ${(props) => props.theme.dropdown.hoverBg};
-        }
-
-        &.border-top {
-          border-top: solid 1px ${(props) => props.theme.dropdown.seperator};
+          background-color: #e9e9e9;
         }
       }
     }

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

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

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

@@ -2,7 +2,7 @@ import React, { useRef, forwardRef, useState } from 'react';
 import find from 'lodash/find';
 import Dropdown from 'components/Dropdown';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import { IconSettings, IconCaretDown, IconDatabase, IconDatabaseOff } from '@tabler/icons';
+import { IconSettings, IconCaretDown, IconDatabase } from '@tabler/icons';
 import EnvironmentSettings from '../EnvironmentSettings';
 import toast from 'react-hot-toast';
 import { useDispatch } from 'react-redux';
@@ -63,14 +63,13 @@ const EnvironmentSelector = ({ collection }) => {
               onSelect(null);
             }}
           >
-            <IconDatabaseOff size={18} strokeWidth={1.5} />
-            <span className='ml-2'>No Environment</span>
+            <span>No Environment</span>
           </div>
-          <div className="dropdown-item border-top" onClick={() => setOpenSettingsModal(true)}>
+          <div className="dropdown-item" style={{ borderTop: 'solid 1px #e7e7e7' }} onClick={() => setOpenSettingsModal(true)}>
             <div className="pr-2 text-gray-600">
               <IconSettings size={18} strokeWidth={1.5} />
             </div>
-            <span>Configure</span>
+            <span>Settings</span>
           </div>
         </Dropdown>
       </div>

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

@@ -8,11 +8,11 @@ const Wrapper = styled.div`
 
     thead,
     td {
-      border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder};
+      border: 1px solid #efefef;
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};;
+      color: #616161;
       font-size: 0.8125rem;
       user-select: none;
     }
@@ -29,7 +29,6 @@ const Wrapper = styled.div`
     width: 100%;
     border: solid 1px transparent;
     outline: none !important;
-    background-color: transparent;
 
     &:focus {
       outline: none !important;

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

@@ -7,6 +7,7 @@ import DeleteEnvironment from '../../DeleteEnvironment';
 const EnvironmentDetails = ({ environment, collection }) => {
   const [openEditModal, setOpenEditModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
+  console.log(environment);
 
   return (
     <div className="px-6 flex-grow flex flex-col pt-6" style={{ maxWidth: '700px' }}>

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

@@ -4,11 +4,8 @@ const StyledWrapper = styled.div`
   margin-inline: -1rem;
   margin-block: -1.5rem;
 
-  background-color: ${(props) => props.theme.collection.environment.settings.bg};
-
   .environments-sidebar {
-    background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg};
-    border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight};
+    background-color: #eaeaea;
     min-height: 400px;
   }
 
@@ -23,15 +20,15 @@ const StyledWrapper = styled.div`
 
     &:hover {
       text-decoration: none;
-      background-color: ${(props) => props.theme.collection.environment.settings.item.hoverBg};
+      background-color: #e4e4e4;
     }
   }
 
   .active {
-    background-color: ${(props) => props.theme.collection.environment.settings.item.active.bg} !important;
-    border-left: solid 2px ${(props) => props.theme.collection.environment.settings.item.border};
+    background-color: #dcdcdc !important;
+    border-left: solid 2px var(--color-brand);
     &:hover {
-      background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
+      background-color: #dcdcdc !important;
     }
   }
 
@@ -39,7 +36,7 @@ const StyledWrapper = styled.div`
     padding: 8px 10px;
     cursor: pointer;
     border-bottom: none;
-    color: ${(props) => props.theme.textLink};
+    color: var(--color-text-link);
 
     &:hover {
       span {

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

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

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

@@ -1,17 +0,0 @@
-import React from 'react';
-
-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>
-  );
-}
-
-export default SendIcon;

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

@@ -66,8 +66,8 @@ const Wrapper = styled.div`
     justify-content: space-between;
     align-items: center;
     text-transform: uppercase;
-    color: ${(props) => props.theme.modal.title.color};
-    background-color: ${(props) => props.theme.modal.title.bg};
+    color: rgb(86 86 86);
+    background-color: #f1f1f1;
     font-size: 0.75rem;
     padding: 12px;
     font-weight: 600;
@@ -77,7 +77,7 @@ const Wrapper = styled.div`
     .close {
       font-size: 1.3rem;
       line-height: 1;
-      color: ${(props) => props.theme.modal.iconColor};
+      color: #000;
       text-shadow: 0 1px 0 #fff;
       opacity: 0.5;
       margin-top: -2px;
@@ -90,30 +90,7 @@ const Wrapper = styled.div`
 
   .bruno-modal-content {
     flex-grow: 1;
-    background-color: ${(props) => props.theme.modal.body.bg};
-
-    .textbox {
-      line-height: 1.42857143;
-      border: 1px solid #ccc;
-      padding: 0.45rem;
-      box-shadow: none;
-      border-radius: 0px;
-      outline: none;
-      box-shadow: none;
-      transition: border-color ease-in-out .1s;
-      border-radius: 3px;
-      background-color: ${(props) => props.theme.modal.input.bg};
-      border: 1px solid ${(props) => props.theme.modal.input.border};
-
-      &:focus {
-        border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
-        outline: none !important;
-      }
-    }
-
-    .bruno-form {
-      color: ${(props) => props.theme.modal.body.color};
-    }
+    background-color: #fff;
   }
 
   .bruno-modal-backdrop {
@@ -130,7 +107,7 @@ const Wrapper = styled.div`
       height: 100%;
       width: 100%;
       left: 0;
-      opacity: ${(props) => props.theme.modal.backdrop.opacity};
+      opacity: 0.4;
       top: 0;
       background: black;
       position: fixed;
@@ -140,17 +117,10 @@ const Wrapper = styled.div`
   }
 
   .bruno-modal-footer {
-    background-color: ${(props) => props.theme.modal.body.bg};
+    background-color: white;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
   }
-
-  &.modal-footer-none {
-    .bruno-modal-content {
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-    }
-  }
 `;
 
 export default Wrapper;

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

@@ -64,9 +64,6 @@ const Modal = ({ size, title, confirmText, cancelText, handleCancel, handleConfi
   if (isClosing) {
     classes += ' modal--animate-out';
   }
-  if(hideFooter) {
-    classes += ' modal-footer-none';
-  }
   return (
     <StyledWrapper className={classes}>
       <div className={`bruno-modal-card modal-${size}`}>

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

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

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

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

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

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

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

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

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

@@ -5,28 +5,19 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
-    table-layout: fixed;
 
     thead,
     td {
-      border: 1px solid ${(props) => props.theme.table.border};
+      border: 1px solid #efefef;
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};
+      color: #616161;
       font-size: 0.8125rem;
       user-select: none;
     }
     td {
       padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(3) {
-        width: 70px;
-      }
     }
   }
 
@@ -38,8 +29,6 @@ const Wrapper = styled.div`
     width: 100%;
     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,15 +3,11 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
-import { useTheme } from 'providers/Theme';
 import { 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 = () => {
@@ -23,8 +19,6 @@ const FormUrlEncodedParams = ({ item, collection }) => {
     );
   };
 
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleParamChange = (e, _param, type) => {
     const param = cloneDeep(_param);
     switch (type) {
@@ -36,6 +30,10 @@ const FormUrlEncodedParams = ({ item, collection }) => {
         param.value = e.target.value;
         break;
       }
+      case 'description': {
+        param.description = e.target.value;
+        break;
+      }
       case 'enabled': {
         param.enabled = e.target.checked;
         break;
@@ -67,6 +65,7 @@ const FormUrlEncodedParams = ({ item, collection }) => {
           <tr>
             <td>Key</td>
             <td>Value</td>
+            <td>Description</td>
             <td></td>
           </tr>
         </thead>
@@ -88,17 +87,27 @@ const FormUrlEncodedParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <SingleLineEditor 
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
                         value={param.value}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) => handleParamChange({
-                          target: {
-                            value: newValue
-                          }
-                        }, param, 'value')}
-                        onRun={handleRun}
-                        collection={collection}
+                        className="mousetrap"
+                        onChange={(e) => handleParamChange(e, param, 'value')}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={param.description}
+                        className="mousetrap"
+                        onChange={(e) => handleParamChange(e, param, 'description')}
                       />
                     </td>
                     <td>

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

@@ -1,14 +1,22 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  div.tabs {
-    div.tab {
+  .react-tabs__tab-list {
+    border-bottom: none !important;
+    padding-top: 0;
+    padding-left: 0 !important;
+    display: flex;
+    align-items: center;
+    margin: 0;
+
+    .react-tabs__tab {
       padding: 6px 0px;
       border: none;
+      user-select: none;
       border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
-      color: var(--color-tab-inactive);
-      cursor: pointer;
+      margin-right: 20px;
+      color: rgb(125 125 125);
+      outline: none !important;
 
       &:focus,
       &:active,
@@ -19,12 +27,36 @@ const StyledWrapper = styled.div`
         box-shadow: none !important;
       }
 
-      &.active {
-        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
+      &:after {
+        display: none !important;
       }
     }
   }
+
+  .react-tabs__tab--selected {
+    border: none;
+    color: #322e2c !important;
+    border-bottom: solid 2px var(--color-tab-active-border) !important;
+    border-color: var(--color-tab-active-border) !important;
+    background: inherit;
+    outline: none !important;
+    box-shadow: none !important;
+
+    &:focus,
+    &:active,
+    &:focus-within,
+    &:focus-visible,
+    &:target {
+      border: none;
+      outline: none !important;
+      box-shadow: none !important;
+      border-bottom: solid 2px var(--color-tab-active-border) !important;
+      border-color: var(--color-tab-active-border) !important;
+      background: inherit;
+      outline: none !important;
+      box-shadow: none !important;
+    }
+  }
 `;
 
 export default StyledWrapper;

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

@@ -1,173 +1,26 @@
-import React, { useEffect } from 'react';
-import find from 'lodash/find';
-import get from 'lodash/get';
-import classnames from 'classnames';
-import { IconRefresh, IconLoader2, IconBook, IconDownload } from '@tabler/icons';
-import { useSelector, useDispatch } from 'react-redux';
-import { updateRequestPaneTab } from 'providers/ReduxStore/slices/tabs';
+import React from 'react';
+import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 import QueryEditor from 'components/RequestPane/QueryEditor';
-import GraphQLVariables from 'components/RequestPane/GraphQLVariables';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
-import Vars from 'components/RequestPane/Vars';
-import Assertions from 'components/RequestPane/Assertions';
-import Script from 'components/RequestPane/Script';
-import Tests from 'components/RequestPane/Tests';
-import { useTheme } from 'providers/Theme';
-import { updateRequestGraphqlQuery } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { findEnvironmentInCollection } from 'utils/collections';
-import useGraphqlSchema from './useGraphqlSchema';
 import StyledWrapper from './StyledWrapper';
 
-const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {
-  const dispatch = useDispatch();
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const query = item.draft ? get(item, 'draft.request.body.graphql.query') : get(item, 'request.body.graphql.query');
-  const variables = item.draft ? get(item, 'draft.request.body.graphql.variables') : get(item, 'request.body.graphql.variables');
-  const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
-  const {
-    storedTheme
-  } = useTheme();
-
-  const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
-  
-  let {
-    schema,
-    loadSchema,
-    isLoading: isSchemaLoading,
-    error: schemaError
-  } = useGraphqlSchema(url, environment);
-
-  const loadGqlSchema = () => {
-    if(!isSchemaLoading) {
-      loadSchema();
-    }
-  };
-
-  useEffect(() => {
-    if(onSchemaLoad) {
-      onSchemaLoad(schema);
-    }
-  }, [schema]);
-
-  const onQueryChange = (value) => {
-    dispatch(
-      updateRequestGraphqlQuery({
-        query: value,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-  const onRun = () => dispatch(sendRequest(item, collection.uid));
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-
-  const selectTab = (tab) => {
-    dispatch(
-      updateRequestPaneTab({
-        uid: item.uid,
-        requestPaneTab: tab
-      })
-    );
-  };
-
-  const getTabPanel = (tab) => {
-    switch (tab) {
-      case 'query': {
-        return <QueryEditor
-          collection={collection}
-          theme={storedTheme}
-          schema={schema}
-          width={leftPaneWidth}
-          onSave={onSave}
-          value={query}
-          onRun={onRun}
-          onEdit={onQueryChange}
-          onClickReference={handleGqlClickReference}
-        />;
-      }
-      case 'variables': {
-        return <GraphQLVariables item={item} variables={variables} collection={collection} />;
-      }
-      case 'headers': {
-        return <RequestHeaders item={item} collection={collection} />;
-      }
-      case 'vars': {
-        return <Vars item={item} collection={collection} />;
-      }
-      case 'assert': {
-        return <Assertions item={item} collection={collection} />;
-      }
-      case 'script': {
-        return <Script item={item} collection={collection} />;
-      }
-      case 'tests': {
-        return <Tests item={item} collection={collection} />;
-      }
-      default: {
-        return <div className="mt-4">404 | Not found</div>;
-      }
-    }
-  };
-
-  if (!activeTabUid) {
-    return <div>Something went wrong</div>;
-  }
-
-  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>;
-  }
-
-  const getTabClassname = (tabName) => {
-    return classnames(`tab select-none ${tabName}`, {
-      active: tabName === focusedTab.requestPaneTab
-    });
-  };
-
+const GraphQLRequestPane = ({ onRunQuery, schema, leftPaneWidth, value, onQueryChange }) => {
   return (
-    <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex items-center tabs" role="tablist">
-        <div className={getTabClassname('query')} role="tab" onClick={() => selectTab('query')}>
-          Query
-        </div>
-        <div className={getTabClassname('variables')} role="tab" onClick={() => selectTab('variables')}>
-          Variables
-        </div>
-        <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
-          Headers
-        </div>
-        <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
-          Vars
-        </div>
-        <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
-          Script
-        </div>
-        <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
-          Assert
-        </div>
-        <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
-          Tests
-        </div>
-        <div className="flex flex-grow justify-end items-center" style={{fontSize: 13}}>
-          <div className='flex items-center cursor-pointer hover:underline' onClick={loadGqlSchema}>
-            {isSchemaLoading ? (
-              <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5}/>
-            ) : null}
-            {!isSchemaLoading && !schema ? <IconDownload size={18} strokeWidth={1.5}/> : null }
-            {!isSchemaLoading && schema ? <IconRefresh size={18} strokeWidth={1.5}/> : null }
-            <span className='ml-1'>Schema</span>
+    <StyledWrapper className="h-full">
+      <Tabs className="react-tabs mt-1 flex flex-grow flex-col h-full" forceRenderTabPanel>
+        <TabList>
+          <Tab tabIndex="-1">Query</Tab>
+          <Tab tabIndex="-1">Headers</Tab>
+        </TabList>
+        <TabPanel>
+          <div className="mt-4">
+            <QueryEditor schema={schema} width={leftPaneWidth} value={value} onRunQuery={onRunQuery} onEdit={onQueryChange} />
           </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>
-        </div>
-      </div>
-      <section className="flex w-full mt-5">{getTabPanel(focusedTab.requestPaneTab)}</section>
+        </TabPanel>
+        <TabPanel>
+          <RequestHeaders />
+        </TabPanel>
+      </Tabs>
     </StyledWrapper>
   );
 };

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

@@ -1,55 +0,0 @@
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import { buildClientSchema } from 'graphql';
-import { fetchGqlSchema } from 'utils/network';
-import { simpleHash } from 'utils/common';
-
-const schemaHashPrefix = 'bruno.graphqlSchema';
-
-const useGraphqlSchema = (endpoint, environment) => {
-  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) {
-        return null;
-      }
-      return buildClientSchema(JSON.parse(saved));
-    } catch {
-      localStorage.setItem(localStorageKey, null);
-      return null;
-    }
-  });
-
-  const loadSchema = () => {
-    setIsLoading(true);
-    fetchGqlSchema(endpoint, environment)
-      .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');
-        } else {
-          return Promise.reject(new Error('An error occurred while introspecting schema'));
-        }
-      })
-      .catch((err) => {
-        setIsLoading(false);
-        setError(err);
-        toast.error('Error occured while loading Graphql Schema');
-      });
-  };
-
-  return {
-    isLoading,
-    schema,
-    loadSchema,
-    error
-  };
-};
-
-export default useGraphqlSchema;

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

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

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

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

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

@@ -20,8 +20,8 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
-        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
+        color: #322e2c !important;
+        border-bottom: solid 2px var(--color-tab-active-border) !important;
       }
     }
   }

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

@@ -7,10 +7,6 @@ import QueryParams from 'components/RequestPane/QueryParams';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import RequestBody from 'components/RequestPane/RequestBody';
 import RequestBodyMode from 'components/RequestPane/RequestBody/RequestBodyMode';
-import 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 }) => {
@@ -38,18 +34,6 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
       case 'headers': {
         return <RequestHeaders item={item} collection={collection} />;
       }
-      case 'vars': {
-        return <Vars item={item} collection={collection} />;
-      }
-      case 'assert': {
-        return <Assertions item={item} collection={collection} />;
-      }
-      case 'script': {
-        return <Script item={item} collection={collection} />;
-      }
-      case 'tests': {
-        return <Tests item={item} collection={collection} />;
-      }
       default: {
         return <div className="mt-4">404 | Not found</div>;
       }
@@ -75,7 +59,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
     <StyledWrapper className="flex flex-col h-full relative">
       <div className="flex items-center tabs" role="tablist">
         <div className={getTabClassname('params')} role="tab" onClick={() => selectTab('params')}>
-          Query
+          Params
         </div>
         <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
           Body
@@ -83,18 +67,6 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
         </div>
-        <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
-          Vars
-        </div>
-        <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
-          Script
-        </div>
-        <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
-          Assert
-        </div>
-        <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
-          Tests
-        </div>
         {/* Moved to post mvp */}
         {/* <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>Auth</div> */}
         {focusedTab.requestPaneTab === 'body' ? (
@@ -103,7 +75,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
           </div>
         ) : null}
       </div>
-      <section className={`flex w-full ${['script', 'vars'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'}`}>{getTabPanel(focusedTab.requestPaneTab)}</section>
+      <section className="flex w-full mt-5">{getTabPanel(focusedTab.requestPaneTab)}</section>
     </StyledWrapper>
   );
 };

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

@@ -5,28 +5,19 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
-    table-layout: fixed;
 
     thead,
     td {
-      border: 1px solid ${(props) => props.theme.table.border};
+      border: 1px solid #efefef;
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};
+      color: #616161;
       font-size: 0.8125rem;
       user-select: none;
     }
     td {
       padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(3) {
-        width: 70px;
-      }
     }
   }
 
@@ -38,9 +29,6 @@ const Wrapper = styled.div`
     width: 100%;
     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,15 +3,11 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
-import { useTheme } from 'providers/Theme';
 import { 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 = () => {
@@ -23,8 +19,6 @@ const MultipartFormParams = ({ item, collection }) => {
     );
   };
 
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleParamChange = (e, _param, type) => {
     const param = cloneDeep(_param);
     switch (type) {
@@ -36,6 +30,10 @@ const MultipartFormParams = ({ item, collection }) => {
         param.value = e.target.value;
         break;
       }
+      case 'description': {
+        param.description = e.target.value;
+        break;
+      }
       case 'enabled': {
         param.enabled = e.target.checked;
         break;
@@ -67,6 +65,7 @@ const MultipartFormParams = ({ item, collection }) => {
           <tr>
             <td>Key</td>
             <td>Value</td>
+            <td>Description</td>
             <td></td>
           </tr>
         </thead>
@@ -88,17 +87,27 @@ const MultipartFormParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <SingleLineEditor 
-                        onSave={onSave}
-                        theme={storedTheme}
-                        value={param.value} 
-                        onChange={(newValue) => handleParamChange({
-                          target: {
-                            value: newValue
-                          }
-                        }, param, 'value')}
-                        onRun={handleRun}
-                        collection={collection}
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        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')}
                       />
                     </td>
                     <td>

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

@@ -2,46 +2,14 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.CodeMirror {
-    background: ${(props) => props.theme.codemirror.bg};
-    border: solid 1px ${(props) => props.theme.codemirror.border};
+    border: solid 1px var(--color-codemirror-border);
     /* todo: find a better way */
-    height: calc(100vh - 220px);
+    height: calc(100vh - 250px);
   }
 
   textarea.cm-editor {
     position: relative;
   }
-
-  // Todo: dark mode temporary fix
-  // Clean this
-  .CodeMirror.cm-s-monokai {
-    .CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
-      background: #444444;
-    }
-  }
-
-  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
-    color: #9cdcfe !important;
-  }
-
-  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
-    color: #9cdcfe !important;
-  }
-
-  .cm-s-monokai span.cm-string {
-    color: #ce9178 !important;
-  }
-
-  .cm-s-monokai span.cm-number{
-    color: #b5cea8 !important;
-  }
-
-  .cm-s-monokai span.cm-atom{
-    color: #569cd6 !important;
-  }
-
-  .cm-variable-valid{color: green}
-  .cm-variable-invalid{color: red}
 `;
 
 export default StyledWrapper;

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

@@ -6,10 +6,7 @@
  */
 
 import React from 'react';
-import isEqual from 'lodash/isEqual';
 import MD from 'markdown-it';
-import { getAllVariables } from 'utils/collections';
-import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import StyledWrapper from './StyledWrapper';
 
 import onHasCompletion from './onHasCompletion';
@@ -32,7 +29,6 @@ export default class QueryEditor extends React.Component {
     // editor is updated, which can later be used to protect the editor from
     // unnecessary updates during the update lifecycle.
     this.cachedValue = props.value || '';
-    this.variables = {};
   }
 
   componentDidMount() {
@@ -41,17 +37,11 @@ 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
@@ -85,51 +75,54 @@ export default class QueryEditor extends React.Component {
         'Alt-Space': () => editor.showHint({ completeSingle: true, container: this._node }),
         'Shift-Space': () => editor.showHint({ completeSingle: true, container: this._node }),
         'Shift-Alt-Space': () => editor.showHint({ completeSingle: true, container: this._node }),
+
         'Cmd-Enter': () => {
-          if (this.props.onRun) {
-            this.props.onRun();
+          if (this.props.onRunQuery) {
+            this.props.onRunQuery();
           }
         },
         'Ctrl-Enter': () => {
-          if (this.props.onRun) {
-            this.props.onRun();
+          if (this.props.onRunQuery) {
+            this.props.onRunQuery();
           }
         },
+
         'Shift-Ctrl-C': () => {
           if (this.props.onCopyQuery) {
             this.props.onCopyQuery();
           }
         },
+
         'Shift-Ctrl-P': () => {
           if (this.props.onPrettifyQuery) {
             this.props.onPrettifyQuery();
           }
         },
+
         /* Shift-Ctrl-P is hard coded in Firefox for private browsing so adding an alternative to Pretiffy */
+
         'Shift-Ctrl-F': () => {
           if (this.props.onPrettifyQuery) {
             this.props.onPrettifyQuery();
           }
         },
+
         'Shift-Ctrl-M': () => {
           if (this.props.onMergeQuery) {
             this.props.onMergeQuery();
           }
         },
         'Cmd-S': () => {
-          if (this.props.onSave) {
-            this.props.onSave();
-            return false;
+          if (this.props.onRunQuery) {
+            // empty
           }
         },
+
         'Ctrl-S': () => {
-          if (this.props.onSave) {
-            this.props.onSave();
-            return false;
+          if (this.props.onRunQuery) {
+            // empty
           }
-        },
-        'Cmd-F': 'findPersistent',
-        'Ctrl-F': 'findPersistent'
+        }
       }
     }));
     if (editor) {
@@ -138,7 +131,6 @@ export default class QueryEditor extends React.Component {
       editor.on('hasCompletion', this._onHasCompletion);
       editor.on('beforeChange', this._onBeforeChange);
     }
-    this.addOverlay();
   }
 
   componentDidUpdate(prevProps) {
@@ -157,15 +149,6 @@ export default class QueryEditor extends React.Component {
       this.cachedValue = this.props.value;
       this.editor.setValue(this.props.value);
     }
-
-    if (this.props.theme !== prevProps.theme && this.editor) {
-      this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
-    }
-    let variables = getAllVariables(this.props.collection);
-    if (!isEqual(variables, this.variables)) {
-      this.editor.options.brunoVarInfo.variables = variables;
-      this.addOverlay();
-    }
     this.ignoreChangeEvent = false;
   }
 
@@ -178,20 +161,10 @@ 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
-        className="h-full w-full"
+        className="h-full"
         aria-label="Query Editor"
         ref={(node) => {
           this._node = node;
@@ -200,11 +173,8 @@ export default class QueryEditor extends React.Component {
     );
   }
 
-  _onKeyUp = (_cm, e) => {
-    if (e.metaKey || e.ctrlKey || e.altKey) {
-      return;
-    }
-    if (AUTO_COMPLETE_AFTER_KEY.test(e.key) && this.editor) {
+  _onKeyUp = (_cm, event) => {
+    if (AUTO_COMPLETE_AFTER_KEY.test(event.key) && this.editor) {
       this.editor.execCommand('autocomplete');
     }
   };

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

@@ -5,28 +5,19 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
-    table-layout: fixed;
 
     thead,
     td {
-      border: 1px solid ${(props) => props.theme.table.border};
+      border: 1px solid #efefef;
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};;
+      color: #616161;
       font-size: 0.8125rem;
       user-select: none;
     }
     td {
       padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(3) {
-        width: 70px;
-      }
     }
   }
 
@@ -41,7 +32,6 @@ const Wrapper = styled.div`
     width: 100%;
     border: solid 1px transparent;
     outline: none !important;
-    background-color: inherit;
 
     &:focus {
       outline: none !important;

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

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

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

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

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

@@ -4,18 +4,18 @@ const Wrapper = styled.div`
   height: 2.3rem;
 
   div.method-selector-container {
-    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+    background-color: var(--color-sidebar-background);
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
   }
 
   div.input-container {
-    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+    background-color: var(--color-sidebar-background);
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
 
     input {
-      background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+      background-color: var(--color-sidebar-background);
       outline: none;
       box-shadow: none;
 

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

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

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

@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   font-size: 0.8125rem;
 
   .body-mode-selector {
-    background: ${(props) => props.theme.requestTabPanel.bodyModeSelect.color};
+    background: #efefef;
     border-radius: 3px;
 
     .dropdown-item {

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

@@ -4,7 +4,6 @@ import CodeEditor from 'components/CodeEditor';
 import FormUrlEncodedParams from 'components/RequestPane/FormUrlEncodedParams';
 import MultipartFormParams from 'components/RequestPane/MultipartFormParams';
 import { useDispatch } from 'react-redux';
-import { useTheme } from 'providers/Theme';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
@@ -13,9 +12,6 @@ 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 onEdit = (value) => {
     dispatch(
@@ -45,7 +41,7 @@ const RequestBody = ({ item, collection }) => {
 
     return (
       <StyledWrapper className="w-full">
-        <CodeEditor collection={collection} theme={storedTheme} value={bodyContent[bodyMode] || ''} onEdit={onEdit} onRun={onRun} onSave={onSave} mode={codeMirrorMode[bodyMode]} />
+        <CodeEditor value={bodyContent[bodyMode] || ''} onEdit={onEdit} onRun={onRun} onSave={onSave} mode={codeMirrorMode[bodyMode]} />
       </StyledWrapper>
     );
   }

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

@@ -5,40 +5,32 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
-    table-layout: fixed;
 
     thead,
     td {
-      border: 1px solid ${(props) => props.theme.table.border};
+      border: 1px solid #efefef;
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};
+      color: #616161;
       font-size: 0.8125rem;
       user-select: none;
     }
     td {
       padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(3) {
-        width: 70px;
-      }
     }
   }
 
   .btn-add-header {
     font-size: 0.8125rem;
+    margin-block: 10px;
+    padding: 5px;
   }
 
   input[type='text'] {
     width: 100%;
     border: solid 1px transparent;
     outline: none !important;
-    background-color: inherit;
 
     &:focus {
       outline: none !important;

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

@@ -3,15 +3,11 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
-import { useTheme } from 'providers/Theme';
 import { addRequestHeader, updateRequestHeader, deleteRequestHeader } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 
 const RequestHeaders = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
   const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
 
   const addHeader = () => {
@@ -23,8 +19,6 @@ const RequestHeaders = ({ item, collection }) => {
     );
   };
 
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleHeaderValueChange = (e, _header, type) => {
     const header = cloneDeep(_header);
     switch (type) {
@@ -36,6 +30,10 @@ const RequestHeaders = ({ item, collection }) => {
         header.value = e.target.value;
         break;
       }
+      case 'description': {
+        header.description = e.target.value;
+        break;
+      }
       case 'enabled': {
         header.enabled = e.target.checked;
         break;
@@ -65,8 +63,9 @@ const RequestHeaders = ({ item, collection }) => {
       <table>
         <thead>
           <tr>
-            <td>Name</td>
+            <td>Key</td>
             <td>Value</td>
+            <td>Description</td>
             <td></td>
           </tr>
         </thead>
@@ -88,17 +87,27 @@ const RequestHeaders = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <SingleLineEditor
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
                         value={header.value}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) => handleHeaderValueChange({
-                          target: {
-                            value: newValue
-                          }
-                        }, header, 'value')}
-                        onRun={handleRun}
-                        collection={collection}
+                        className="mousetrap"
+                        onChange={(e) => handleHeaderValueChange(e, header, 'value')}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={header.description}
+                        className="mousetrap"
+                        onChange={(e) => handleHeaderValueChange(e, header, 'description')}
                       />
                     </td>
                     <td>
@@ -115,7 +124,7 @@ const RequestHeaders = ({ item, collection }) => {
             : null}
         </tbody>
       </table>
-      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
+      <button className="btn-add-header select-none" onClick={addHeader}>
         + Add Header
       </button>
     </StyledWrapper>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -18,30 +18,11 @@ const StyledWrapper = styled.div`
       display: flex;
       height: 100%;
       width: 1px;
-      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
+      border-left: solid 1px var(--color-request-dragbar-background);
     }
 
     &:hover div.drag-request-border {
-      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
-    }
-  }
-
-  div.graphql-docs-explorer-container {
-    background: white;
-    outline: none;
-    box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px;
-    position: absolute;
-    right: 0px;
-    z-index: 2000;
-    width: 350px;
-    height: 100%;
-
-    div.doc-explorer-title {
-      text-align: left;
-    }
-
-    div.doc-explorer-rhs {
-      display: flex;
+      border-left: solid 1px var(--color-request-dragbar-background-active);
     }
   }
 `;

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import find from 'lodash/find';
 import toast from 'react-hot-toast';
 import { useSelector, useDispatch } from 'react-redux';
@@ -12,15 +12,10 @@ 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 { DocExplorer } from '@usebruno/graphql-docs';
+import useGraphqlSchema from '../../hooks/useGraphqlSchema';
 
 import StyledWrapper from './StyledWrapper';
 
-const MIN_LEFT_PANE_WIDTH = 300;
-const MIN_RIGHT_PANE_WIDTH = 350;
-const DEFAULT_PADDING = 5;
-
 const RequestTabPanel = () => {
   if (typeof window == 'undefined') {
     return <div></div>;
@@ -34,43 +29,23 @@ 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 [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
+  const [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - 5);
   const [dragging, setDragging] = useState(false);
 
-  // Not a recommended pattern here to have the child component
-  // make a callback to set state, but treating this as an exception
-  const docExplorerRef = useRef(null);
-  const [schema, setSchema] = useState(null);
-  const [showGqlDocs, setShowGqlDocs] = useState(false);
-  const onSchemaLoad = (schema) => setSchema(schema);
-  const toggleDocs = () => setShowGqlDocs((showGqlDocs) => !showGqlDocs);
-  const handleGqlClickReference = (reference) => {
-    if(docExplorerRef.current) {
-      docExplorerRef.current.showDocForReference(reference);
-    }
-    if(!showGqlDocs) {
-      setShowGqlDocs(true);
-    }
-  };
-
   useEffect(() => {
     const leftPaneWidth = (screenWidth - asideWidth) / 2.2;
     setLeftPaneWidth(leftPaneWidth);
   }, [screenWidth]);
 
   useEffect(() => {
-    setRightPaneWidth(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
+    setRightPaneWidth(screenWidth - asideWidth - leftPaneWidth - 5);
   }, [screenWidth, asideWidth, leftPaneWidth]);
 
   const handleMouseMove = (e) => {
     if (dragging) {
       e.preventDefault();
-      let leftPaneXPosition = e.clientX + 2;
-      if (leftPaneXPosition < (asideWidth+ DEFAULT_PADDING + MIN_LEFT_PANE_WIDTH) || leftPaneXPosition > (screenWidth - MIN_RIGHT_PANE_WIDTH )) {
-        return;
-      }
-      setLeftPaneWidth(leftPaneXPosition- asideWidth);
-      setRightPaneWidth(screenWidth - e.clientX - DEFAULT_PADDING);
+      setLeftPaneWidth(e.clientX - asideWidth - 5);
+      setRightPaneWidth(screenWidth - e.clientX - 5);
     }
   };
   const handleMouseUp = (e) => {
@@ -80,7 +55,7 @@ const RequestTabPanel = () => {
       dispatch(
         updateRequestPaneTabWidth({
           uid: activeTabUid,
-          requestPaneWidth: e.clientX - asideWidth - DEFAULT_PADDING
+          requestPaneWidth: e.clientX - asideWidth - 5
         })
       );
     }
@@ -90,6 +65,11 @@ const RequestTabPanel = () => {
     setDragging(true);
   };
 
+  let schema = null;
+  // let {
+  //   schema
+  // } = useGraphqlSchema('https://api.spacex.land/graphql');
+
   useEffect(() => {
     document.addEventListener('mouseup', handleMouseUp);
     document.addEventListener('mousemove', handleMouseMove);
@@ -113,11 +93,6 @@ const RequestTabPanel = () => {
     return <div className="pb-4 px-4">Collection not found!</div>;
   }
 
-  const showRunner = collection.showRunner;
-  if(showRunner) {
-    return <RunnerResults collection={collection}/>;
-  }
-
   const item = findItemInCollection(collection, activeTabUid);
   if (!item || !item.uid) {
     return <RequestNotFound itemUid={activeTabUid} />;
@@ -130,23 +105,24 @@ const RequestTabPanel = () => {
       })
     );
   };
+  const onGraphqlQueryChange = (value) => {};
+  const runQuery = async () => {};
 
   return (
-    <StyledWrapper className={`flex flex-col flex-grow relative ${dragging ? 'dragging' : ''}`}>
+    <StyledWrapper className={`flex flex-col flex-grow ${dragging ? 'dragging' : ''}`}>
       <div className="pt-4 pb-3 px-4">
         <QueryUrl item={item} collection={collection} handleRun={handleRun} />
       </div>
-      <section className="main flex flex-grow pb-4 relative">
+      <section className="main flex flex-grow pb-4">
         <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: `${leftPaneWidth}px`, height: 'calc(100% - 5px)' }}>
             {item.type === 'graphql-request' ? (
               <GraphQLRequestPane
-                item={item}
-                collection={collection}
+                onRunQuery={runQuery}
+                schema={schema}
                 leftPaneWidth={leftPaneWidth}
-                onSchemaLoad={onSchemaLoad}
-                toggleDocs={toggleDocs}
-                handleGqlClickReference={handleGqlClickReference}
+                value={item.request.body.graphql.query}
+                onQueryChange={onGraphqlQueryChange}
               />
             ) : null}
 
@@ -162,22 +138,8 @@ const RequestTabPanel = () => {
           <ResponsePane item={item} collection={collection} rightPaneWidth={rightPaneWidth} response={item.response} />
         </section>
       </section>
-
-      {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"
-            >
-              {'\u2715'}
-            </button>
-          </DocExplorer>
-        </div>
-      ): null}
     </StyledWrapper>
   );
 };
 
-export default RequestTabPanel;
+export default RequestTabPanel;

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

@@ -1,20 +1,9 @@
 import React from 'react';
-import { IconFiles, IconRun } from '@tabler/icons';
+import { IconFiles } from '@tabler/icons';
 import EnvironmentSelector from 'components/Environments/EnvironmentSelector';
-import VariablesView from 'components/VariablesView';
-import { useDispatch } from 'react-redux';
-import { toggleRunnerView } from 'providers/ReduxStore/slices/collections';
 import StyledWrapper from './StyledWrapper';
 
 const CollectionToolBar = ({ collection }) => {
-  const dispatch = useDispatch();
-
-  const handleRun = () => {
-    dispatch(toggleRunnerView({
-      collectionUid: collection.uid
-    }));
-  };
-
   return (
     <StyledWrapper>
       <div className="flex items-center p-2">
@@ -23,10 +12,6 @@ const CollectionToolBar = ({ collection }) => {
           <span className="ml-2 mr-4 font-semibold">{collection.name}</span>
         </div>
         <div className="flex flex-1 items-center justify-end">
-          <span className="mr-2">
-            <IconRun className="cursor-pointer" size={20} strokeWidth={1.5} onClick={handleRun} />
-          </span>
-          <VariablesView collection={collection}/>
           <EnvironmentSelector collection={collection} />
         </div>
       </div>

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

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

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

@@ -19,7 +19,7 @@ const StyledWrapper = styled.div`
 
     .close-icon {
       display: none;
-      color: ${(props) => props.theme.requestTabs.icon.color};
+      color: #9f9f9f;
       width: 8px;
       padding-bottom: 6px;
       padding-top: 6px;
@@ -27,8 +27,8 @@ const StyledWrapper = styled.div`
 
     &:hover,
     &:hover .close-icon {
-      color: ${(props) => props.theme.requestTabs.icon.hoverColor};
-      background-color: ${(props) => props.theme.requestTabs.icon.hoverBg};
+      background-color: #eaeaea;
+      color: rgb(76 76 76);
     }
 
     .has-changes-icon {

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

@@ -4,7 +4,7 @@ import { closeTabs } from 'providers/ReduxStore/slices/tabs';
 import { useDispatch } from 'react-redux';
 import { findItemInCollection } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
-import RequestTabNotFound from './RequestTabNotFound';
+import { IconAlertTriangle } from '@tabler/icons';
 
 const RequestTab = ({ tab, collection }) => {
   const dispatch = useDispatch();
@@ -61,7 +61,18 @@ const RequestTab = ({ tab, collection }) => {
   if (!item) {
     return (
       <StyledWrapper className="flex items-center justify-between tab-container px-1">
-        <RequestTabNotFound handleCloseClick={handleCloseClick} />
+        <div className="flex items-center tab-label pl-2">
+          <IconAlertTriangle size={18} strokeWidth={1.5} className="text-yellow-600" />
+          <span className="ml-1">Not Found</span>
+        </div>
+        <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e)}>
+          <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
+            <path
+              fill="currentColor"
+              d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
+            ></path>
+          </svg>
+        </div>
       </StyledWrapper>
     );
   }
@@ -74,7 +85,7 @@ const RequestTab = ({ tab, collection }) => {
         <span className="tab-method uppercase" style={{ color: getMethodColor(method), fontSize: 12 }}>
           {method}
         </span>
-        <span className="ml-1 tab-name" title={item.name}>
+        <span className="text-gray-700 ml-1 tab-name" title={item.name}>
           {item.name}
         </span>
       </div>

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  border-bottom: 1px solid ${(props) => props.theme.requestTabs.borromBorder};
+  border-bottom: 1px solid var(--color-request-dragbar-background);
 
   ul {
     padding: 0;
@@ -28,8 +28,7 @@ const Wrapper = styled.div`
       height: 38px;
 
       margin-right: 6px;
-      color: ${(props) => props.theme.requestTabs.color};
-      background: ${(props) => props.theme.requestTabs.bg};
+      background: #f7f7f7;
       border-radius: 0;
 
       .tab-container {
@@ -37,7 +36,7 @@ const Wrapper = styled.div`
       }
 
       &.active {
-        background: ${(props) => props.theme.requestTabs.active.bg};
+        background: #e7e7e7;
         font-weight: 500;
       }
 
@@ -61,9 +60,9 @@ const Wrapper = styled.div`
         padding: 3px 0px;
         display: inline-flex;
         justify-content: center;
-        color: ${(props) => props.theme.requestTabs.shortTab.color};
-        background-color: ${(props) => props.theme.requestTabs.shortTab.bg};
+        color: rgb(117 117 117);
         position: relative;
+        background-color: white;
         top: -1px;
 
         > div {
@@ -86,8 +85,8 @@ const Wrapper = styled.div`
 
         &:hover {
           > div {
-            background-color: ${(props) => props.theme.requestTabs.shortTab.hoverBg};
-            color: ${(props) => props.theme.requestTabs.shortTab.hoverColor};
+            background-color: #eaeaea;
+            color: rgb(76 76 76);
             border-radius: 3px;
           }
         }

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

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import find from 'lodash/find';
 import filter from 'lodash/filter';
 import classnames from 'classnames';
-import { IconChevronRight, IconChevronLeft } from '@tabler/icons';
+import { IconHome2, IconChevronRight, IconChevronLeft } from '@tabler/icons';
 import { useSelector, useDispatch } from 'react-redux';
 import { focusTab } from 'providers/ReduxStore/slices/tabs';
 import NewRequest from 'components/Sidebar/NewRequest';
@@ -76,8 +76,6 @@ const RequestTabs = () => {
     });
   };
 
-  const showRunner = activeCollection && activeCollection.showRunner;
-
   // Todo: Must support ephermal requests
   return (
     <StyledWrapper className={getRootClassname()}>
@@ -85,61 +83,59 @@ const RequestTabs = () => {
       {collectionRequestTabs && collectionRequestTabs.length ? (
         <>
           <CollectionToolBar collection={activeCollection} />
-          {!showRunner ? (
-            <div className="flex items-center pl-4">
-              <ul role="tablist">
-                {showChevrons ? (
-                  <li className="select-none short-tab" onClick={leftSlide}>
-                    <div className="flex items-center">
-                      <IconChevronLeft size={18} strokeWidth={1.5} />
-                    </div>
-                  </li>
-                ) : null}
-                {/* Moved to post mvp */}
-                {/* <li className="select-none new-tab mr-1" onClick={createNewTab}>
-                  <div className="flex items-center home-icon-container">
-                    <IconHome2 size={18} strokeWidth={1.5}/>
-                  </div>
-                </li> */}
-              </ul>
-              <ul role="tablist" style={{ maxWidth: maxTablistWidth }} ref={tabsRef}>
-                {collectionRequestTabs && collectionRequestTabs.length
-                  ? collectionRequestTabs.map((tab, index) => {
-                      return (
-                        <li key={tab.uid} className={getTabClassname(tab, index)} role="tab" onClick={() => handleClick(tab)}>
-                          <RequestTab key={tab.uid} tab={tab} collection={activeCollection} activeTab={activeTab} />
-                        </li>
-                      );
-                    })
-                  : null}
-              </ul>
-
-              <ul role="tablist">
-                {showChevrons ? (
-                  <li className="select-none short-tab" onClick={rightSlide}>
-                    <div className="flex items-center">
-                      <IconChevronRight size={18} strokeWidth={1.5} />
-                    </div>
-                  </li>
-                ) : null}
-                <li className="select-none short-tab" id="create-new-tab" onClick={createNewTab}>
+          <div className="flex items-center pl-4">
+            <ul role="tablist">
+              {showChevrons ? (
+                <li className="select-none short-tab" onClick={leftSlide}>
                   <div className="flex items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
-                      <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
-                    </svg>
+                    <IconChevronLeft size={18} strokeWidth={1.5} />
                   </div>
                 </li>
-                {/* Moved to post mvp */}
-                {/* <li className="select-none new-tab choose-request">
+              ) : null}
+              {/* Moved to post mvp */}
+              {/* <li className="select-none new-tab mr-1" onClick={createNewTab}>
+                <div className="flex items-center home-icon-container">
+                  <IconHome2 size={18} strokeWidth={1.5}/>
+                </div>
+              </li> */}
+            </ul>
+            <ul role="tablist" style={{ maxWidth: maxTablistWidth }} ref={tabsRef}>
+              {collectionRequestTabs && collectionRequestTabs.length
+                ? collectionRequestTabs.map((tab, index) => {
+                    return (
+                      <li key={tab.uid} className={getTabClassname(tab, index)} role="tab" onClick={() => handleClick(tab)}>
+                        <RequestTab key={tab.uid} tab={tab} collection={activeCollection} activeTab={activeTab} />
+                      </li>
+                    );
+                  })
+                : null}
+            </ul>
+
+            <ul role="tablist">
+              {showChevrons ? (
+                <li className="select-none short-tab" onClick={rightSlide}>
                   <div className="flex items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
-                      <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
-                    </svg>
+                    <IconChevronRight size={18} strokeWidth={1.5} />
                   </div>
-                </li> */}
-              </ul>
-            </div>
-          ) : null}
+                </li>
+              ) : null}
+              <li className="select-none short-tab" onClick={createNewTab}>
+                <div className="flex items-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
+                  </svg>
+                </div>
+              </li>
+              {/* Moved to post mvp */}
+              {/* <li className="select-none new-tab choose-request">
+                <div className="flex items-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
+                  </svg>
+                </div>
+              </li> */}
+            </ul>
+          </div>
         </>
       ) : null}
     </StyledWrapper>

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

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

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

@@ -23,7 +23,7 @@ const ResponseLoadingOverlay = ({ item, collection }) => {
         <IconRefresh size={24} className="animate-spin" />
         <button
           onClick={handleCancelRequest}
-          className="mt-4 uppercase btn-md rounded btn-secondary ease-linear transition-all duration-150"
+          className="mt-4 uppercase bg-gray-200 active:bg-blueGray-600 text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
           type="button"
         >
           Cancel Request

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

@@ -3,10 +3,6 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   padding-top: 20%;
   width: 100%;
-
-  .send-icon {
-    color: ${(props) => props.theme.requestTabPanel.responseSendIcon};
-  }
 `;
 
 export default StyledWrapper;

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

@@ -5,7 +5,7 @@ import StyledWrapper from './StyledWrapper';
 const Placeholder = () => {
   return (
     <StyledWrapper>
-      <div className="send-icon flex justify-center" style={{ fontSize: 200 }}>
+      <div className="text-gray-300 flex justify-center" style={{ fontSize: 200 }}>
         <IconSend size={150} strokeWidth={1} />
       </div>
       <div className="flex mt-4">

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

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

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

@@ -22,7 +22,7 @@ const Wrapper = styled.div`
 
     tbody {
       tr:nth-child(odd) {
-        background-color: ${(props) => props.theme.table.striped};
+        background-color: var(--color-table-stripe);
       }
     }
   }

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   font-size: 0.75rem;
   font-weight: 600;
-  color: ${(props) => props.theme.requestTabPanel.responseStatus};
+  color: rgb(117 117 117);
 `;
 
 export default Wrapper;

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   font-size: 0.75rem;
   font-weight: 600;
-  color: ${(props) => props.theme.requestTabPanel.responseStatus};
+  color: rgb(117 117 117);
 `;
 
 export default Wrapper;

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

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

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

@@ -3,20 +3,19 @@ import classnames from 'classnames';
 import statusCodePhraseMap from './get-status-code-phrase';
 import StyledWrapper from './StyledWrapper';
 
-// Todo: text-error class is not getting pulled in for 500 errors
 const StatusCode = ({ status }) => {
-  const getTabClassname = (status) => {
+  const getTabClassname = () => {
     return classnames('', {
-      'text-ok': status >= 100 && status < 200,
-      'text-ok': status >= 200 && status < 300,
-      'text-error': status >= 300 && status < 400,
-      'text-error': status >= 400 && status < 500,
-      'text-error': status >= 500 && status < 600
+      'text-blue-700': status >= 100 && status < 200,
+      'text-green-700': status >= 200 && status < 300,
+      'text-purple-700': status >= 300 && status < 400,
+      'text-yellow-700': status >= 400 && status < 500,
+      'text-red-700': status >= 500 && status < 600
     });
   };
 
   return (
-    <StyledWrapper className={getTabClassname(status)}>
+    <StyledWrapper className={getTabClassname()}>
       {status} {statusCodePhraseMap[status]}
     </StyledWrapper>
   );

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

@@ -20,19 +20,11 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
-        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
+        color: #322e2c !important;
+        border-bottom: solid 2px var(--color-tab-active-border) !important;
       }
     }
   }
-
-  .some-tests-failed {
-    color: ${(props) => props.theme.colors.text.danger} !important;
-  }
-
-  .all-tests-passed {
-    color: ${(props) => props.theme.colors.text.green} !important;
-  }
 `;
 
 export default StyledWrapper;

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

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

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

@@ -1,76 +0,0 @@
-import React from 'react';
-import StyledWrapper from './StyledWrapper';
-
-const TestResults = ({ results, assertionResults }) => {
-  results = results || [];
-  assertionResults = assertionResults || [];
-  if (!results.length && !assertionResults.length) {
-    return (
-      <div className="px-3">
-        No tests found
-      </div>
-    );
-  }
-
-  const passedTests = results.filter((result) => result.status === 'pass');
-  const failedTests = results.filter((result) => result.status === 'fail');
-
-  const passedAssertions = assertionResults.filter((result) => result.status === 'pass');
-  const failedAssertions = assertionResults.filter((result) => result.status === 'fail');
-
-  return (
-    <StyledWrapper className='flex flex-col px-3'>
-      <div className="py-2 font-medium test-summary">
-        Tests ({results.length}/{results.length}), Passed: {passedTests.length}, Failed: {failedTests.length}
-      </div>
-      <ul className="">
-        {results.map((result) => (
-          <li key={result.uid} className="py-1">
-            {result.status === 'pass' ? (
-              <span className="test-success">
-                &#x2714;&nbsp; {result.description}
-              </span>
-            ) : (
-              <>
-                <span className="test-failure">
-                  &#x2718;&nbsp; {result.description}
-                </span>
-                <br />
-                <span className="error-message pl-8">
-                  {result.error}
-                </span>
-              </>
-            )}
-          </li>
-        ))}
-      </ul>
-
-      <div className="py-2 font-medium test-summary">
-        Assertions ({assertionResults.length}/{assertionResults.length}), Passed: {passedAssertions.length}, Failed: {failedAssertions.length}
-      </div>
-      <ul className="">
-        {assertionResults.map((result) => (
-          <li key={result.uid} className="py-1">
-            {result.status === 'pass' ? (
-              <span className="test-success">
-                &#x2714;&nbsp; {result.lhsExpr}: {result.rhsExpr}
-              </span>
-            ) : (
-              <>
-                <span className="test-failure">
-                  &#x2718;&nbsp; {result.lhsExpr}: {result.rhsExpr}
-                </span>
-                <br />
-                <span className="error-message pl-8">
-                  {result.error}
-                </span>
-              </>
-            )}
-          </li>
-        ))}
-      </ul>
-    </StyledWrapper>
-  );
-};
-
-export default TestResults;

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

@@ -1,35 +0,0 @@
-import React from 'react';
-
-const TestResultsLabel = ({ results, assertionResults }) => {
-  results = results || [];
-  assertionResults = assertionResults || [];
-  if(!results.length && !assertionResults.length) {
-    return 'Tests';
-  }
-
-  const numberOfTests = results.length;
-  const numberOfFailedTests = results.filter(result => result.status === 'fail').length;
-
-  const numberOfAssertions = assertionResults.length;
-  const numberOfFailedAssertions = assertionResults.filter(result => result.status === 'fail').length;
-
-  const totalNumberOfTests = numberOfTests + numberOfAssertions;
-  const totalNumberOfFailedTests = numberOfFailedTests + numberOfFailedAssertions;
-
-  return (
-    <div className='flex items-center'>
-      <div>Tests</div>
-      {totalNumberOfFailedTests ? (
-        <sup className='sups some-tests-failed ml-1 font-medium'>
-          {totalNumberOfFailedTests}
-        </sup>
-      ) : (
-        <sup className='sups all-tests-passed ml-1 font-medium'>
-          {totalNumberOfTests}
-        </sup>
-      )}
-      </div>
-  );
-};
-
-export default TestResultsLabel;

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

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .line {
-    white-space: pre-line;
-    word-wrap: break-word;
-    word-break: break-all;
-    font-family: Inter, sans-serif !important;
-
-    .arrow {
-      opacity: 0.5;
-    }
-
-    &.request {
-      color: ${(props) => props.theme.colors.text.green};
-    }
-
-    &.response {
-      color: ${(props) => props.theme.colors.text.purple};
-    }
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,60 +0,0 @@
-import React from 'react';
-import forOwn from 'lodash/forOwn';
-import { safeStringifyJSON } from 'utils/common';
-import StyledWrapper from './StyledWrapper';
-
-const Timeline = ({ request, response}) => {
-  const requestHeaders = [];
-  const responseHeaders = response.headers || [];
-
-  request = request || {};
-  response = response || {};
-
-  forOwn(request.headers, (value, key) => {
-    requestHeaders.push({
-      name: key,
-      value
-    });
-  });
-
-  let requestData = safeStringifyJSON(request.data);
-
-  return (
-    <StyledWrapper className="px-3 pb-4 w-full">
-      <div>
-        <pre className='line request font-bold'>
-          <span className="arrow">{'>'}</span> {request.method} {request.url}
-        </pre>
-        {requestHeaders.map((h) => {
-          return (
-            <pre className='line request' key={h.name}>
-              <span className="arrow">{'>'}</span> {h.name}: {h.value}
-            </pre>
-          );
-        })}
-
-        {requestData ? (
-          <pre className='line request'>
-            <span className="arrow">{'>'}</span> data {requestData}
-          </pre>
-        ) : null}
-      </div>
-
-      <div className='mt-4'>
-        <pre className='line response font-bold'>
-          <span className="arrow">{'<'}</span> {response.status} {response.statusText}
-        </pre>
-
-        {responseHeaders.map((h) => {
-          return (
-            <pre className='line response' key={h[0]}>
-              <span className="arrow">{'<'}</span> {h[0]}: {h[1]}
-            </pre>
-          );
-        })}
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Timeline;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import find from 'lodash/find';
 import classnames from 'classnames';
-import { safeStringifyJSON } from 'utils/common';
 import { useSelector, useDispatch } from 'react-redux';
 import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs';
 import QueryResult from './QueryResult';
@@ -11,16 +10,13 @@ import ResponseHeaders from './ResponseHeaders';
 import StatusCode from './StatusCode';
 import ResponseTime from './ResponseTime';
 import ResponseSize from './ResponseSize';
-import Timeline from './Timeline';
-import TestResults from './TestResults';
-import TestResultsLabel from './TestResultsLabel';
 import StyledWrapper from './StyledWrapper';
 
 const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   const dispatch = useDispatch();
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const isLoading = ['queued', 'sending'].includes(item.requestState);
+  const isLoading = item.response && item.response.state === 'sending';
 
   const selectTab = (tab) => {
     dispatch(
@@ -36,22 +32,11 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   const getTabPanel = (tab) => {
     switch (tab) {
       case 'response': {
-        return <QueryResult
-          item={item}
-          collection={collection}
-          width={rightPaneWidth}
-          value={response.data ? safeStringifyJSON(response.data, true) : ''}
-        />;
+        return <QueryResult width={rightPaneWidth} value={response.data ? JSON.stringify(response.data, null, 2) : ''} />;
       }
       case 'headers': {
         return <ResponseHeaders headers={response.headers} />;
       }
-      case 'timeline': {
-        return <Timeline request={item.requestSent} response={item.response}/>;
-      }
-      case 'tests': {
-        return <TestResults results={item.testResults} assertionResults={item.assertionResults} />;
-      }
 
       default: {
         return <div>404 | Not found</div>;
@@ -99,12 +84,6 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
         </div>
-        <div className={getTabClassname('timeline')} role="tab" onClick={() => selectTab('timeline')}>
-          Timeline
-        </div>
-        <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
-          <TestResultsLabel results={item.testResults} assertionResults={item.assertionResults} />
-        </div>
         {!isLoading ? (
           <div className="flex flex-grow justify-end items-center">
             <StatusCode status={response.status} />

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

@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.tabs {
-    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;
-      }
-    }
-  }
-
-  .some-tests-failed {
-    color: ${(props) => props.theme.colors.text.danger} !important;
-  }
-
-  .all-tests-passed {
-    color: ${(props) => props.theme.colors.text.green} !important;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,90 +0,0 @@
-import React, { useState } from 'react';
-import get from 'lodash/get';
-import classnames from 'classnames';
-import { safeStringifyJSON } from 'utils/common';
-import QueryResult from 'components/ResponsePane/QueryResult';
-import ResponseHeaders from 'components/ResponsePane/ResponseHeaders';
-import StatusCode from 'components/ResponsePane/StatusCode';
-import ResponseTime from 'components/ResponsePane/ResponseTime';
-import ResponseSize from 'components/ResponsePane/ResponseSize';
-import Timeline from 'components/ResponsePane/Timeline';
-import TestResults from 'components/ResponsePane/TestResults';
-import TestResultsLabel from 'components/ResponsePane/TestResultsLabel';
-import StyledWrapper from './StyledWrapper';
-
-const ResponsePane = ({ rightPaneWidth, item, collection }) => {
-  const [selectedTab, setSelectedTab] = useState('response');
-
-  const {
-    requestSent,
-    responseReceived,
-    testResults
-  } = item;
-
-  const headers = get(item, 'responseReceived.headers', {});
-  const status = get(item, 'responseReceived.status', 0);
-  const size = get(item, 'responseReceived.size', 0);
-  const duration = get(item, 'responseReceived.duration', 0);
-
-  const selectTab = (tab) => setSelectedTab(tab);
-
-  const getTabPanel = (tab) => {
-    switch (tab) {
-      case 'response': {
-        return <QueryResult
-          item={item}
-          collection={collection}
-          width={rightPaneWidth}
-          disableRunEventListener={true}
-          value={(responseReceived && responseReceived.data) ? safeStringifyJSON(responseReceived.data, true) : ''}
-        />;
-      }
-      case 'headers': {
-        return <ResponseHeaders headers={headers} />;
-      }
-      case 'timeline': {
-        return <Timeline request={requestSent} response={responseReceived} />;
-      }
-      case 'tests': {
-        return <TestResults results={testResults} />;
-      }
-
-      default: {
-        return <div>404 | Not found</div>;
-      }
-    }
-  };
-
-  const getTabClassname = (tabName) => {
-    return classnames(`tab select-none ${tabName}`, {
-      active: tabName === selectedTab
-    });
-  };
-
-  return (
-    <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex items-center px-3 tabs" role="tablist">
-        <div className={getTabClassname('response')} role="tab" onClick={() => selectTab('response')}>
-          Response
-        </div>
-        <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
-          Headers
-        </div>
-        <div className={getTabClassname('timeline')} role="tab" onClick={() => selectTab('timeline')}>
-          Timeline
-        </div>
-        <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
-          <TestResultsLabel results={testResults} />
-        </div>
-        <div className="flex flex-grow justify-end items-center">
-          <StatusCode status={status} />
-          <ResponseTime duration={duration} />
-          <ResponseSize size={size} />
-        </div>
-      </div>
-      <section className="flex flex-grow mt-5">{getTabPanel(selectedTab)}</section>
-    </StyledWrapper>
-  );
-};
-
-export default ResponsePane;

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

@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  .item-path {
-    .link {
-      color: ${(props) => props.theme.textLink};
-    }
-  }
-  .danger {
-    color: ${(props) => props.theme.colors.text.danger};
-  }
-
-  .test-summary {
-    color: ${(props) => props.theme.tabs.active.border};
-  }
-
-  /* test results */
-  .test-success {
-    color: ${(props) => props.theme.colors.text.green};
-  }
-
-  .test-failure {
-    color: ${(props) => props.theme.colors.text.danger};
-
-    .error-message {
-      color: ${(props) => props.theme.colors.text.muted};
-    }
-  }
-`;
-
-export default Wrapper;