chore: bumped version to v0.24.0

fix(ui): add minHeight & minWidth

.github/workflows/release-snap.yml

@@ -0,0 +1,46 @@
+name: Publish to Snapcraft
+
+on:
+  workflow_dispatch:
+    inputs:
+      build:
+        description: 'Build and publish to Snapcraft'
+        required: true
+        default: 'true'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Check package-lock.json
+        run: npm ci
+
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Build Electron app
+        run: npm run build:electron:snap
+
+      - name: Install Snapcraft
+        run: |
+          sudo snap install snapcraft --classic
+        continue-on-error: true
+
+      - name: Configure Snapcraft
+        run: snapcraft whoami
+        env:
+          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_API_KEY }}
+
+      - name: Publish to Snapcraft
+        run: |
+          snapcraft upload --release=stable packages/bruno-electron/out/*.snap
+        env:
+          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_API_KEY }}

.github/workflows/unit-tests.yml

@@ -1,29 +1,35 @@
 name: Unit Tests
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    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
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Check package-lock.json
+        run: npm ci
+      - name: Install dependencies
+        run: npm i --legacy-peer-deps
+      - name: Test Package bruno-query
+        run: npm run test --workspace=packages/bruno-query
+      - name: Build Package bruno-query
+        run: npm run build --workspace=packages/bruno-query
+      - name: Test Package bruno-lang
+        run: npm run test --workspace=packages/bruno-lang
+      - name: Test Package bruno-schema
+        run: npm run test --workspace=packages/bruno-schema
+      - name: Test Package bruno-app
+        run: npm run test --workspace=packages/bruno-app
+      - name: Test Package bruno-js
+        run: npm run test --workspace=packages/bruno-js
+      - name: Test Package bruno-cli
+        run: npm run test --workspace=packages/bruno-cli
+      - name: Test Package bruno-electron
+        run: npm run test --workspace=packages/bruno-electron

.gitignore

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

contributing.md

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

contributing_ru.md

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

docs/development.md

@@ -1,9 +1,12 @@
+**English** | [Русский](/docs/development_ru.md)
+
 ## 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.
+Bruno is being developed as a desktop app. You need to load the app by running the nextjs app in one terminal and then run the electron app in another terminal.
 
 ### Dependencies
-* NodeJS v18
+
+- NodeJS v18
 
 ### Local Development
 
@@ -15,7 +18,6 @@ nvm use
 npm i --legacy-peer-deps
 
 # build graphql docs
-# note: you can for now ignore the error thrown while building the graphql docs
 npm run build:graphql-docs
 
 # build bruno query

docs/development_ru.md

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

package.json

@@ -13,6 +13,7 @@
     "packages/bruno-testbench",
     "packages/bruno-graphql-docs"
   ],
+  "homepage": "https://usebruno.com",
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
@@ -30,7 +31,7 @@
     "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",
+    "build:electron:snap": "./scripts/build-electron.sh snap",
     "test:e2e": "npx playwright test",
     "test:report": "npx playwright show-report",
     "prepare": "husky install"

packages/bruno-app/package.json

@@ -18,7 +18,7 @@
     "@tabler/icons": "^1.46.0",
     "@tippyjs/react": "^4.2.6",
     "@usebruno/graphql-docs": "0.1.0",
-    "@usebruno/schema": "0.3.1",
+    "@usebruno/schema": "0.5.0",
     "axios": "^0.26.0",
     "classnames": "^2.3.1",
     "codemirror": "^5.65.2",
@@ -27,13 +27,17 @@
     "file-dialog": "^0.0.8",
     "file-saver": "^2.0.5",
     "formik": "^2.2.9",
+    "github-markdown-css": "^5.2.0",
     "graphiql": "^1.5.9",
     "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
+    "handlebars": "^4.7.8",
+    "httpsnippet": "^3.0.1",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
+    "know-your-http-well": "^0.5.0",
     "lodash": "^4.17.21",
-    "markdown-it": "^13.0.1",
+    "markdown-it": "^13.0.2",
     "mousetrap": "^1.6.5",
     "nanoid": "3.3.4",
     "next": "12.3.3",
@@ -47,11 +51,13 @@
     "react-dom": "18.2.0",
     "react-github-btn": "^1.4.0",
     "react-hot-toast": "^2.4.0",
+    "react-inspector": "^6.0.2",
     "react-redux": "^7.2.6",
     "react-tooltip": "^5.5.2",
     "sass": "^1.46.0",
     "styled-components": "^5.3.3",
     "tailwindcss": "^2.2.19",
+    "xml-formatter": "^3.5.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {

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

@@ -29,7 +29,7 @@ const BrunoSupport = ({ onClose }) => {
           <div className="mt-2">
             <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-end">
               <IconBrandGithub size={18} strokeWidth={2} />
-              <span className="label ml-2">Github</span>
+              <span className="label ml-2">GitHub</span>
             </a>
           </div>
           <div className="mt-2">

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

@@ -80,7 +80,7 @@ export default class CodeEditor extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    // Ensure the changes caused by this update are not interpretted as
+    // Ensure the changes caused by this update are not interpreted as
     // user-input changes which could otherwise result in an infinite
     // event loop.
     this.ignoreChangeEvent = true;
@@ -119,7 +119,7 @@ export default class CodeEditor extends React.Component {
   render() {
     return (
       <StyledWrapper
-        className="h-full"
+        className="h-full w-full"
         aria-label="Code Editor"
         ref={(node) => {
           this._node = node;

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

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

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

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

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

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

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

@@ -0,0 +1,192 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+const AwsV4Auth = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
+  console.log('saved auth', awsv4Auth);
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const handleAccessKeyIdChange = (accessKeyId) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        content: {
+          accessKeyId: accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleSecretAccessKeyChange = (secretAccessKey) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleSessionTokenChange = (sessionToken) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleServiceChange = (service) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleRegionChange = (region) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleProfileNameChange = (profileName) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: profileName
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Access Key ID</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.accessKeyId || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleAccessKeyIdChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Secret Access Key</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.secretAccessKey || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleSecretAccessKeyChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Session Token</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.sessionToken || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleSessionTokenChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Service</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.service || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleServiceChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Region</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.region || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleRegionChange(val)}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Profile Name</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.profileName || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleProfileNameChange(val)}
+          collection={collection}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default AwsV4Auth;

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useDispatch } from 'react-redux';
+import AuthMode from './AuthMode';
+import AwsV4Auth from './AwsV4Auth';
+import BearerAuth from './BearerAuth';
+import BasicAuth from './BasicAuth';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+
+const Auth = ({ collection }) => {
+  const authMode = get(collection, 'root.request.auth.mode');
+  const dispatch = useDispatch();
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const getAuthView = () => {
+    switch (authMode) {
+      case 'awsv4': {
+        return <AwsV4Auth collection={collection} />;
+      }
+      case 'basic': {
+        return <BasicAuth collection={collection} />;
+      }
+      case 'bearer': {
+        return <BearerAuth collection={collection} />;
+      }
+    }
+  };
+
+  return (
+    <StyledWrapper className="w-full mt-2">
+      <div className="flex flex-grow justify-start items-center">
+        <AuthMode collection={collection} />
+      </div>
+      {getAuthView()}
+
+      <div className="mt-6">
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          Save
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default Auth;

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

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.table.border};
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 0.8125rem;
+      user-select: none;
+    }
+    td {
+      padding: 6px 10px;
+
+      &:nth-child(1) {
+        width: 30%;
+      }
+
+      &:nth-child(3) {
+        width: 70px;
+      }
+    }
+  }
+
+  .btn-add-header {
+    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/CollectionSettings/Headers/index.js

@@ -0,0 +1,151 @@
+import React from 'react';
+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 {
+  addCollectionHeader,
+  updateCollectionHeader,
+  deleteCollectionHeader
+} from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import SingleLineEditor from 'components/SingleLineEditor';
+import StyledWrapper from './StyledWrapper';
+import { headers as StandardHTTPHeaders } from 'know-your-http-well';
+const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
+
+const Headers = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const headers = get(collection, 'root.request.headers', []);
+
+  const addHeader = () => {
+    dispatch(
+      addCollectionHeader({
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+  const handleHeaderValueChange = (e, _header, type) => {
+    const header = cloneDeep(_header);
+    switch (type) {
+      case 'name': {
+        header.name = e.target.value;
+        break;
+      }
+      case 'value': {
+        header.value = e.target.value;
+        break;
+      }
+      case 'enabled': {
+        header.enabled = e.target.checked;
+        break;
+      }
+    }
+    dispatch(
+      updateCollectionHeader({
+        header: header,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleRemoveHeader = (header) => {
+    dispatch(
+      deleteCollectionHeader({
+        headerUid: header.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="w-full">
+      <table>
+        <thead>
+          <tr>
+            <td>Name</td>
+            <td>Value</td>
+            <td></td>
+          </tr>
+        </thead>
+        <tbody>
+          {headers && headers.length
+            ? headers.map((header) => {
+                return (
+                  <tr key={header.uid}>
+                    <td>
+                      <SingleLineEditor
+                        value={header.name}
+                        theme={storedTheme}
+                        onSave={handleSave}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            header,
+                            'name'
+                          )
+                        }
+                        autocomplete={headerAutoCompleteList}
+                        collection={collection}
+                      />
+                    </td>
+                    <td>
+                      <SingleLineEditor
+                        value={header.value}
+                        theme={storedTheme}
+                        onSave={handleSave}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            header,
+                            'value'
+                          )
+                        }
+                        collection={collection}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center">
+                        <input
+                          type="checkbox"
+                          checked={header.enabled}
+                          tabIndex="-1"
+                          className="mr-3 mousetrap"
+                          onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
+                        />
+                        <button tabIndex="-1" onClick={() => handleRemoveHeader(header)}>
+                          <IconTrash strokeWidth={1.5} size={20} />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </tbody>
+      </table>
+      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
+        + Add Header
+      </button>
+
+      <div className="mt-6">
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          Save
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default Headers;

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

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

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

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

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

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

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useDispatch } from 'react-redux';
+import CodeEditor from 'components/CodeEditor';
+import { updateCollectionRequestScript, updateCollectionResponseScript } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { useTheme } from 'providers/Theme';
+import StyledWrapper from './StyledWrapper';
+
+const Script = ({ collection }) => {
+  const dispatch = useDispatch();
+  const requestScript = get(collection, 'root.request.script.req', '');
+  const responseScript = get(collection, 'root.request.script.res', '');
+
+  const { storedTheme } = useTheme();
+
+  const onRequestScriptEdit = (value) => {
+    dispatch(
+      updateCollectionRequestScript({
+        script: value,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const onResponseScriptEdit = (value) => {
+    dispatch(
+      updateCollectionResponseScript({
+        script: value,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleSave = () => {
+    dispatch(saveCollectionRoot(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"
+          onSave={handleSave}
+        />
+      </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"
+          onSave={handleSave}
+        />
+      </div>
+
+      <div className="mt-12">
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          Save
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Script;

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

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

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

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

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import get from 'lodash/get';
+import { useDispatch } from 'react-redux';
+import CodeEditor from 'components/CodeEditor';
+import { updateCollectionTests } from 'providers/ReduxStore/slices/collections';
+import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
+import { useTheme } from 'providers/Theme';
+import StyledWrapper from './StyledWrapper';
+
+const Tests = ({ collection }) => {
+  const dispatch = useDispatch();
+  const tests = get(collection, 'root.request.tests', '');
+
+  const { storedTheme } = useTheme();
+
+  const onEdit = (value) => {
+    dispatch(
+      updateCollectionTests({
+        tests: value,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  return (
+    <StyledWrapper className="w-full flex flex-col h-full">
+      <CodeEditor
+        collection={collection}
+        value={tests || ''}
+        theme={storedTheme}
+        onEdit={onEdit}
+        mode="javascript"
+        onSave={handleSave}
+      />
+
+      <div className="mt-6">
+        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          Save
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Tests;

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import classnames from 'classnames';
+import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
+import toast from 'react-hot-toast';
+import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
+import { updateSettingsSelectedTab } from 'providers/ReduxStore/slices/collections';
+import { useDispatch } from 'react-redux';
+import ProxySettings from './ProxySettings';
+import Headers from './Headers';
+import Auth from './Auth';
+import Script from './Script';
+import Test from './Tests';
+import StyledWrapper from './StyledWrapper';
+
+const CollectionSettings = ({ collection }) => {
+  const dispatch = useDispatch();
+  const tab = collection.settingsSelectedTab;
+  const setTab = (tab) => {
+    dispatch(
+      updateSettingsSelectedTab({
+        collectionUid: collection.uid,
+        tab
+      })
+    );
+  };
+
+  const proxyConfig = get(collection, 'brunoConfig.proxy', {});
+
+  const onProxySettingsUpdate = (config) => {
+    const brunoConfig = cloneDeep(collection.brunoConfig);
+    brunoConfig.proxy = config;
+    dispatch(updateBrunoConfig(brunoConfig, collection.uid))
+      .then(() => {
+        toast.success('Collection settings updated successfully');
+      })
+      .catch((err) => console.log(err) && toast.error('Failed to update collection settings'));
+  };
+
+  const getTabPanel = (tab) => {
+    switch (tab) {
+      case 'headers': {
+        return <Headers collection={collection} />;
+      }
+      case 'auth': {
+        return <Auth collection={collection} />;
+      }
+      case 'script': {
+        return <Script collection={collection} />;
+      }
+      case 'tests': {
+        return <Test collection={collection} />;
+      }
+      case 'proxy': {
+        return <ProxySettings proxyConfig={proxyConfig} onUpdate={onProxySettingsUpdate} />;
+      }
+    }
+  };
+
+  const getTabClassname = (tabName) => {
+    return classnames(`tab select-none ${tabName}`, {
+      active: tabName === tab
+    });
+  };
+
+  return (
+    <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
+      <div className="flex flex-wrap items-center tabs" role="tablist">
+        <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
+          Headers
+        </div>
+        <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
+          Auth
+        </div>
+        <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
+          Script
+        </div>
+        <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
+          Tests
+        </div>
+        <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
+          Proxy
+        </div>
+      </div>
+      <section className={`flex ${['auth', 'script'].includes(tab) ? '' : 'mt-4'}`}>{getTabPanel(tab)}</section>
+    </StyledWrapper>
+  );
+};
+
+export default CollectionSettings;

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  div.CodeMirror {
+    /* todo: find a better way */
+    height: calc(100vh - 240px);
+
+    .CodeMirror-scroll {
+      padding-bottom: 0px;
+    }
+  }
+  .editing-mode {
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,60 @@
+import 'github-markdown-css/github-markdown.css';
+import get from 'lodash/get';
+import { updateRequestDocs } from 'providers/ReduxStore/slices/collections';
+import { useTheme } from 'providers/Theme/index';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import Markdown from 'components/MarkDown';
+import CodeEditor from 'components/CodeEditor';
+import StyledWrapper from './StyledWrapper';
+
+const Documentation = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const [isEditing, setIsEditing] = useState(false);
+  const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
+
+  const toggleViewMode = () => {
+    setIsEditing((prev) => !prev);
+  };
+
+  const onEdit = (value) => {
+    dispatch(
+      updateRequestDocs({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        docs: value
+      })
+    );
+  };
+
+  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  if (!item) {
+    return null;
+  }
+
+  return (
+    <StyledWrapper className="mt-1 h-full w-full relative">
+      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
+        {isEditing ? 'Preview' : 'Edit'}
+      </div>
+
+      {isEditing ? (
+        <CodeEditor
+          collection={collection}
+          theme={storedTheme}
+          value={docs || ''}
+          onEdit={onEdit}
+          onSave={onSave}
+          mode="application/text"
+        />
+      ) : (
+        <Markdown onDoubleClick={toggleViewMode} content={docs} />
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default Documentation;

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

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

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

@@ -0,0 +1,75 @@
+import Modal from 'components/Modal/index';
+import Portal from 'components/Portal/index';
+import { useFormik } from 'formik';
+import { copyEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { useEffect, useRef } from 'react';
+import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
+import * as Yup from 'yup';
+
+const CopyEnvironment = ({ collection, environment, onClose }) => {
+  const dispatch = useDispatch();
+  const inputRef = useRef();
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      name: environment.name + ' - Copy'
+    },
+    validationSchema: Yup.object({
+      name: Yup.string()
+        .min(1, 'must be at least 1 character')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required')
+    }),
+    onSubmit: (values) => {
+      dispatch(copyEnvironment(values.name, environment.uid, collection.uid))
+        .then(() => {
+          toast.success('Environment created in collection');
+          onClose();
+        })
+        .catch(() => toast.error('An error occurred while created the environment'));
+    }
+  });
+
+  useEffect(() => {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
+  const onSubmit = () => {
+    formik.handleSubmit();
+  };
+
+  return (
+    <Portal>
+      <Modal size="sm" title={'Copy Environment'} confirmText="Copy" handleConfirm={onSubmit} handleCancel={onClose}>
+        <form className="bruno-form" onSubmit={formik.handleSubmit}>
+          <div>
+            <label htmlFor="name" className="block font-semibold">
+              New Environment Name
+            </label>
+            <input
+              id="environment-name"
+              type="text"
+              name="name"
+              ref={inputRef}
+              className="block textbox mt-2 w-full"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              onChange={formik.handleChange}
+              value={formik.values.name || ''}
+            />
+            {formik.touched.name && formik.errors.name ? (
+              <div className="text-red-500">{formik.errors.name}</div>
+            ) : null}
+          </div>
+        </form>
+      </Modal>
+    </Portal>
+  );
+};
+
+export default CopyEnvironment;

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

@@ -17,7 +17,7 @@ const CreateEnvironment = ({ collection, onClose }) => {
     },
     validationSchema: Yup.object({
       name: Yup.string()
-        .min(1, 'must be atleast 1 characters')
+        .min(1, 'must be at least 1 character')
         .max(50, 'must be 50 characters or less')
         .required('name is required')
     }),
@@ -27,7 +27,7 @@ const CreateEnvironment = ({ collection, onClose }) => {
           toast.success('Environment created in collection');
           onClose();
         })
-        .catch(() => toast.error('An error occured while created the environment'));
+        .catch(() => toast.error('An error occurred while created the environment'));
     }
   });
 

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

@@ -14,7 +14,7 @@ const DeleteEnvironment = ({ onClose, environment, collection }) => {
         toast.success('Environment deleted successfully');
         onClose();
       })
-      .catch(() => toast.error('An error occured while deleting the environment'));
+      .catch(() => toast.error('An error occurred while deleting the environment'));
   };
 
   return (

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

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

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

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

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

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

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

@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
-import { IconEdit, IconTrash, IconDatabase } from '@tabler/icons';
-import EnvironmentVariables from './EnvironmentVariables';
-import RenameEnvironment from '../../RenameEnvironment';
+import { IconCopy, IconDatabase, IconEdit, IconTrash } from '@tabler/icons';
+import { useState } from 'react';
+import CopyEnvironment from '../../CopyEnvironment';
 import DeleteEnvironment from '../../DeleteEnvironment';
+import RenameEnvironment from '../../RenameEnvironment';
+import EnvironmentVariables from './EnvironmentVariables';
 
 const EnvironmentDetails = ({ environment, collection }) => {
   const [openEditModal, setOpenEditModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
+  const [openCopyModal, setOpenCopyModal] = useState(false);
 
   return (
     <div className="px-6 flex-grow flex flex-col pt-6" style={{ maxWidth: '700px' }}>
@@ -20,6 +22,9 @@ const EnvironmentDetails = ({ environment, collection }) => {
           collection={collection}
         />
       )}
+      {openCopyModal && (
+        <CopyEnvironment onClose={() => setOpenCopyModal(false)} environment={environment} collection={collection} />
+      )}
       <div className="flex">
         <div className="flex flex-grow items-center">
           <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
@@ -27,6 +32,7 @@ const EnvironmentDetails = ({ environment, collection }) => {
         </div>
         <div className="flex gap-x-4 pl-4">
           <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />
+          <IconCopy className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenCopyModal(true)} />
           <IconTrash className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenDeleteModal(true)} />
         </div>
       </div>

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

@@ -17,7 +17,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
     },
     validationSchema: Yup.object({
       name: Yup.string()
-        .min(1, 'must be atleast 1 characters')
+        .min(1, 'must be at least 1 character')
         .max(50, 'must be 50 characters or less')
         .required('name is required')
     }),
@@ -27,7 +27,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
           toast.success('Environment renamed successfully');
           onClose();
         })
-        .catch(() => toast.error('An error occured while renaming the environment'));
+        .catch(() => toast.error('An error occurred while renaming the environment'));
     }
   });
 

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

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+
+const StyledMarkdownBodyWrapper = styled.div`
+  background: transparent;
+  height: inherit;
+  .markdown-body {
+    background: transparent;
+    overflow-y: auto;
+    color: ${(props) => props.theme.text};
+    box-sizing: border-box;
+    height: 100%;
+    margin: 0 auto;
+    padding-top: 0.5rem;
+    font-size: 0.875rem;
+
+    h1 {
+      margin: 0.67em 0;
+      font-weight: var(--base-text-weight-semibold, 600);
+      padding-bottom: 0.3em;
+      font-size: 1.3;
+      border-bottom: 1px solid var(--color-border-muted);
+    }
+
+    h2 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      padding-bottom: 0.3em;
+      font-size: 1.2;
+      border-bottom: 1px solid var(--color-border-muted);
+    }
+
+    h3 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      font-size: 1.1em;
+    }
+
+    h4 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      font-size: 1em;
+    }
+
+    h5 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      font-size: 0.95em;
+    }
+
+    h6 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      font-size: 0.9em;
+      color: var(--color-fg-muted);
+    }
+
+    hr {
+      box-sizing: content-box;
+      overflow: hidden;
+      border-bottom: 1px solid var(--color-border-muted);
+      height: 1px;
+      padding: 0;
+      margin: 24px 0;
+      background-color: var(--color-border-default);
+      border: 0;
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    pre {
+      background: ${(props) => props.theme.sidebar.bg};
+    }
+  }
+
+  @media (max-width: 767px) {
+    .markdown-body {
+      padding: 15px;
+    }
+  }
+`;
+
+export default StyledMarkdownBodyWrapper;

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

@@ -0,0 +1,32 @@
+import MarkdownIt from 'markdown-it';
+import StyledWrapper from './StyledWrapper';
+
+const md = new MarkdownIt();
+
+const Markdown = ({ onDoubleClick, content }) => {
+  const handleOnDoubleClick = (event) => {
+    switch (event.detail) {
+      case 2: {
+        onDoubleClick();
+        break;
+      }
+      case 1:
+      default: {
+        break;
+      }
+    }
+  };
+  const htmlFromMarkdown = md.render(content || '');
+
+  return (
+    <StyledWrapper>
+      <div
+        className="markdown-body"
+        dangerouslySetInnerHTML={{ __html: htmlFromMarkdown }}
+        onClick={handleOnDoubleClick}
+      />
+    </StyledWrapper>
+  );
+};
+
+export default Markdown;

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

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

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

@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
 
 const ModalHeader = ({ title, handleCancel }) => (
   <div className="bruno-modal-header">
-    {title ? <div className="bruno-modal-heade-title">{title}</div> : null}
+    {title ? <div className="bruno-modal-header-title">{title}</div> : null}
     {handleCancel ? (
       <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null}>
         ×
@@ -61,19 +61,20 @@ const Modal = ({
   children,
   confirmDisabled,
   hideCancel,
-  hideFooter
+  hideFooter,
+  closeModalFadeTimeout = 500
 }) => {
   const [isClosing, setIsClosing] = useState(false);
   const escFunction = (event) => {
     const escKeyCode = 27;
     if (event.keyCode === escKeyCode) {
-      closeModal();
+      closeModal({ type: 'esc' });
     }
   };
 
-  const closeModal = () => {
+  const closeModal = (args) => {
     setIsClosing(true);
-    setTimeout(() => handleCancel(), 500);
+    setTimeout(() => handleCancel(args), closeModalFadeTimeout);
   };
 
   useEffect(() => {
@@ -94,12 +95,12 @@ const Modal = ({
   return (
     <StyledWrapper className={classes}>
       <div className={`bruno-modal-card modal-${size}`}>
-        <ModalHeader title={title} handleCancel={() => closeModal()} />
+        <ModalHeader title={title} handleCancel={() => closeModal({ type: 'icon' })} />
         <ModalContent>{children}</ModalContent>
         <ModalFooter
           confirmText={confirmText}
           cancelText={cancelText}
-          handleCancel={() => closeModal()}
+          handleCancel={() => closeModal({ type: 'button' })}
           handleSubmit={handleConfirm}
           confirmDisabled={confirmDisabled}
           hideCancel={hideCancel}
@@ -108,7 +109,12 @@ const Modal = ({
       </div>
 
       {/* Clicking on backdrop closes the modal */}
-      <div className="bruno-modal-backdrop" onClick={() => closeModal()} />
+      <div
+        className="bruno-modal-backdrop"
+        onClick={() => {
+          closeModal({ type: 'backdrop' });
+        }}
+      />
     </StyledWrapper>
   );
 };

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

@@ -27,7 +27,7 @@ const Support = () => {
         <div className="mt-2">
           <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-end">
             <IconBrandGithub size={18} strokeWidth={2} />
-            <span className="label ml-2">Github</span>
+            <span className="label ml-2">GitHub</span>
           </a>
         </div>
         <div className="mt-2">

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

@@ -178,7 +178,7 @@ const AssertionRow = ({
               handleAssertionChange(
                 {
                   target: {
-                    value: newValue
+                    value: `${operator} ${newValue}`
                   }
                 },
                 assertion,
@@ -197,10 +197,11 @@ const AssertionRow = ({
           <input
             type="checkbox"
             checked={assertion.enabled}
+            tabIndex="-1"
             className="mr-3 mousetrap"
             onChange={(e) => handleAssertionChange(e, assertion, 'enabled')}
           />
-          <button onClick={() => handleRemoveAssertion(assertion)}>
+          <button tabIndex="-1" onClick={() => handleRemoveAssertion(assertion)}>
             <IconTrash strokeWidth={1.5} size={20} />
           </button>
         </div>

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

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

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

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

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

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

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

@@ -0,0 +1,206 @@
+import React, { useState } from 'react';
+import get from 'lodash/get';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { update } from 'lodash';
+
+const AwsV4Auth = ({ onTokenChange, item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const awsv4Auth = item.draft ? get(item, 'draft.request.auth.awsv4', {}) : get(item, 'request.auth.awsv4', {});
+  console.log('saved auth', awsv4Auth);
+
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
+  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+  const handleAccessKeyIdChange = (accessKeyId) => {
+    dispatch(
+      updateAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          accessKeyId: accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleSecretAccessKeyChange = (secretAccessKey) => {
+    dispatch(
+      updateAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleSessionTokenChange = (sessionToken) => {
+    dispatch(
+      updateAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleServiceChange = (service) => {
+    dispatch(
+      updateAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleRegionChange = (region) => {
+    dispatch(
+      updateAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: region,
+          profileName: awsv4Auth.profileName
+        }
+      })
+    );
+  };
+
+  const handleProfileNameChange = (profileName) => {
+    dispatch(
+      updateAuth({
+        mode: 'awsv4',
+        collectionUid: collection.uid,
+        itemUid: item.uid,
+        content: {
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: profileName
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 w-full">
+      <label className="block font-medium mb-2">Access Key ID</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.accessKeyId || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleAccessKeyIdChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Secret Access Key</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.secretAccessKey || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleSecretAccessKeyChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Session Token</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.sessionToken || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleSessionTokenChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Service</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.service || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleServiceChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Region</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.region || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleRegionChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+
+      <label className="block font-medium mb-2">Profile Name</label>
+      <div className="single-line-editor-wrapper mb-2">
+        <SingleLineEditor
+          value={awsv4Auth.profileName || ''}
+          theme={storedTheme}
+          onSave={handleSave}
+          onChange={(val) => handleProfileNameChange(val)}
+          onRun={handleRun}
+          collection={collection}
+        />
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default AwsV4Auth;

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -116,10 +116,11 @@ const FormUrlEncodedParams = ({ item, collection }) => {
                         <input
                           type="checkbox"
                           checked={param.enabled}
+                          tabIndex="-1"
                           className="mr-3 mousetrap"
                           onChange={(e) => handleParamChange(e, param, 'enabled')}
                         />
-                        <button onClick={() => handleRemoveParams(param)}>
+                        <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
                       </div>

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

@@ -6,6 +6,7 @@ import { IconRefresh, IconLoader2, IconBook, IconDownload } from '@tabler/icons'
 import { useSelector, useDispatch } from 'react-redux';
 import { updateRequestPaneTab } from 'providers/ReduxStore/slices/tabs';
 import QueryEditor from 'components/RequestPane/QueryEditor';
+import Auth from 'components/RequestPane/Auth';
 import GraphQLVariables from 'components/RequestPane/GraphQLVariables';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import Vars from 'components/RequestPane/Vars';
@@ -18,6 +19,7 @@ import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collection
 import { findEnvironmentInCollection } from 'utils/collections';
 import useGraphqlSchema from './useGraphqlSchema';
 import StyledWrapper from './StyledWrapper';
+import Documentation from 'components/Documentation/index';
 
 const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {
   const dispatch = useDispatch();
@@ -32,7 +34,14 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
 
   const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
 
-  let { schema, loadSchema, isLoading: isSchemaLoading, error: schemaError } = useGraphqlSchema(url, environment);
+  const request = item.draft ? item.draft.request : item.request;
+
+  let {
+    schema,
+    loadSchema,
+    isLoading: isSchemaLoading,
+    error: schemaError
+  } = useGraphqlSchema(url, environment, request, collection);
 
   const loadGqlSchema = () => {
     if (!isSchemaLoading) {
@@ -90,6 +99,9 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
       case 'headers': {
         return <RequestHeaders item={item} collection={collection} />;
       }
+      case 'auth': {
+        return <Auth item={item} collection={collection} />;
+      }
       case 'vars': {
         return <Vars item={item} collection={collection} />;
       }
@@ -102,6 +114,9 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
       case 'tests': {
         return <Tests item={item} collection={collection} />;
       }
+      case 'docs': {
+        return <Documentation item={item} collection={collection} />;
+      }
       default: {
         return <div className="mt-4">404 | Not found</div>;
       }
@@ -114,7 +129,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
 
   const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
   if (!focusedTab || !focusedTab.uid || !focusedTab.requestPaneTab) {
-    return <div className="pb-4 px-4">An error occured!</div>;
+    return <div className="pb-4 px-4">An error occurred!</div>;
   }
 
   const getTabClassname = (tabName) => {
@@ -125,7 +140,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex items-center tabs" role="tablist">
+      <div className="flex flex-wrap items-center tabs" role="tablist">
         <div className={getTabClassname('query')} role="tab" onClick={() => selectTab('query')}>
           Query
         </div>
@@ -135,6 +150,9 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
         </div>
+        <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
+          Auth
+        </div>
         <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
           Vars
         </div>
@@ -147,6 +165,9 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
         <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
           Tests
         </div>
+        <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
+          Docs
+        </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}

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

@@ -6,7 +6,7 @@ import { simpleHash } from 'utils/common';
 
 const schemaHashPrefix = 'bruno.graphqlSchema';
 
-const useGraphqlSchema = (endpoint, environment) => {
+const useGraphqlSchema = (endpoint, environment, request, collection) => {
   const localStorageKey = `${schemaHashPrefix}.${simpleHash(endpoint)}`;
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -25,7 +25,7 @@ const useGraphqlSchema = (endpoint, environment) => {
 
   const loadSchema = () => {
     setIsLoading(true);
-    fetchGqlSchema(endpoint, environment)
+    fetchGqlSchema(endpoint, environment, request, collection)
       .then((res) => res.data)
       .then((s) => {
         if (s && s.data) {
@@ -40,7 +40,7 @@ const useGraphqlSchema = (endpoint, environment) => {
       .catch((err) => {
         setIsLoading(false);
         setError(err);
-        toast.error('Error occured while loading GraphQL Schema');
+        toast.error('Error occurred while loading GraphQL Schema');
       });
   };
 

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

@@ -7,11 +7,15 @@ import QueryParams from 'components/RequestPane/QueryParams';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import RequestBody from 'components/RequestPane/RequestBody';
 import RequestBodyMode from 'components/RequestPane/RequestBody/RequestBodyMode';
+import Auth from 'components/RequestPane/Auth';
+import AuthMode from 'components/RequestPane/Auth/AuthMode';
 import Vars from 'components/RequestPane/Vars';
 import Assertions from 'components/RequestPane/Assertions';
 import Script from 'components/RequestPane/Script';
 import Tests from 'components/RequestPane/Tests';
 import StyledWrapper from './StyledWrapper';
+import { get } from 'lodash';
+import Documentation from 'components/Documentation/index';
 
 const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
   const dispatch = useDispatch();
@@ -38,6 +42,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
       case 'headers': {
         return <RequestHeaders item={item} collection={collection} />;
       }
+      case 'auth': {
+        return <Auth item={item} collection={collection} />;
+      }
       case 'vars': {
         return <Vars item={item} collection={collection} />;
       }
@@ -50,6 +57,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
       case 'tests': {
         return <Tests item={item} collection={collection} />;
       }
+      case 'docs': {
+        return <Documentation item={item} collection={collection} />;
+      }
       default: {
         return <div className="mt-4">404 | Not found</div>;
       }
@@ -62,7 +72,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
 
   const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
   if (!focusedTab || !focusedTab.uid || !focusedTab.requestPaneTab) {
-    return <div className="pb-4 px-4">An error occured!</div>;
+    return <div className="pb-4 px-4">An error occurred!</div>;
   }
 
   const getTabClassname = (tabName) => {
@@ -71,39 +81,65 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
     });
   };
 
+  // get the length of active params, headers, asserts and vars
+  const params = item.draft ? get(item, 'draft.request.params', []) : get(item, 'request.params', []);
+  const headers = item.draft ? get(item, 'draft.request.headers', []) : get(item, 'request.headers', []);
+  const assertions = item.draft ? get(item, 'draft.request.assertions', []) : get(item, 'request.assertions', []);
+  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 activeParamsLength = params.filter((param) => param.enabled).length;
+  const activeHeadersLength = headers.filter((header) => header.enabled).length;
+  const activeAssertionsLength = assertions.filter((assertion) => assertion.enabled).length;
+  const activeVarsLength =
+    requestVars.filter((request) => request.enabled).length +
+    responseVars.filter((response) => response.enabled).length;
+
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex items-center tabs" role="tablist">
+      <div className="flex flex-wrap items-center tabs" role="tablist">
         <div className={getTabClassname('params')} role="tab" onClick={() => selectTab('params')}>
           Query
+          {activeParamsLength > 0 && <sup className="ml-1 font-medium">{activeParamsLength}</sup>}
         </div>
         <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
           Body
         </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
+          {activeHeadersLength > 0 && <sup className="ml-1 font-medium">{activeHeadersLength}</sup>}
+        </div>
+        <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
+          Auth
         </div>
         <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
           Vars
+          {activeVarsLength > 0 && <sup className="ml-1 font-medium">{activeVarsLength}</sup>}
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
           Script
         </div>
         <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
           Assert
+          {activeAssertionsLength > 0 && <sup className="ml-1 font-medium">{activeAssertionsLength}</sup>}
         </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> */}
+        <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
+          Docs
+        </div>
         {focusedTab.requestPaneTab === 'body' ? (
           <div className="flex flex-grow justify-end items-center">
             <RequestBodyMode item={item} collection={collection} />
           </div>
         ) : null}
       </div>
-      <section className={`flex w-full ${['script', 'vars'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'}`}>
+      <section
+        className={`flex w-full ${
+          ['script', 'vars', 'auth', 'docs'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'
+        }`}
+      >
         {getTabPanel(focusedTab.requestPaneTab)}
       </section>
     </StyledWrapper>

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

@@ -116,10 +116,11 @@ const MultipartFormParams = ({ item, collection }) => {
                         <input
                           type="checkbox"
                           checked={param.enabled}
+                          tabIndex="-1"
                           className="mr-3 mousetrap"
                           onChange={(e) => handleParamChange(e, param, 'enabled')}
                         />
-                        <button onClick={() => handleRemoveParams(param)}>
+                        <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
                       </div>

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

@@ -142,7 +142,7 @@ export default class QueryEditor extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    // Ensure the changes caused by this update are not interpretted as
+    // Ensure the changes caused by this update are not interpreted as
     // user-input changes which could otherwise result in an infinite
     // event loop.
     this.ignoreChangeEvent = true;

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

@@ -115,10 +115,11 @@ const QueryParams = ({ item, collection }) => {
                         <input
                           type="checkbox"
                           checked={param.enabled}
+                          tabIndex="-1"
                           className="mr-3 mousetrap"
                           onChange={(e) => handleParamChange(e, param, 'enabled')}
                         />
-                        <button onClick={() => handleRemoveParam(param)}>
+                        <button tabIndex="-1" onClick={() => handleRemoveParam(param)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
                       </div>

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

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

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

@@ -5,8 +5,9 @@ import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/sli
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import HttpMethodSelector from './HttpMethodSelector';
 import { useTheme } from 'providers/Theme';
-import SendIcon from 'components/Icons/Send';
+import { IconDeviceFloppy, IconArrowRight } from '@tabler/icons';
 import SingleLineEditor from 'components/SingleLineEditor';
+import { isMacOS } from 'utils/common/platform';
 import StyledWrapper from './StyledWrapper';
 
 const QueryUrl = ({ item, collection, handleRun }) => {
@@ -14,6 +15,8 @@ const QueryUrl = ({ item, collection, handleRun }) => {
   const dispatch = useDispatch();
   const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
   const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
+  const isMac = isMacOS();
+  const saveShortcut = isMac ? 'Cmd + S' : 'Ctrl + S';
 
   const [methodSelectorWidth, setMethodSelectorWidth] = useState(90);
 
@@ -22,7 +25,10 @@ const QueryUrl = ({ item, collection, handleRun }) => {
     setMethodSelectorWidth(el.offsetWidth);
   }, [method]);
 
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
+  const onSave = () => {
+    dispatch(saveRequest(item.uid, collection.uid));
+  };
+
   const onUrlChange = (value) => {
     dispatch(
       requestUrlChanged({
@@ -65,7 +71,25 @@ const QueryUrl = ({ item, collection, handleRun }) => {
           collection={collection}
         />
         <div className="flex items-center h-full mr-2 cursor-pointer" id="send-request" onClick={handleRun}>
-          <SendIcon color={theme.requestTabPanel.url.icon} width={22} />
+          <div
+            className="tooltip mr-3"
+            onClick={(e) => {
+              e.stopPropagation();
+              if (!item.draft) return;
+              onSave();
+            }}
+          >
+            <IconDeviceFloppy
+              color={item.draft ? theme.colors.text.yellow : theme.requestTabs.icon.color}
+              strokeWidth={1.5}
+              size={22}
+              className={`${item.draft ? 'cursor-pointer' : 'cursor-default'}`}
+            />
+            <span className="tooltiptext text-xs">
+              Save <span className="shortcut">({saveShortcut})</span>
+            </span>
+          </div>
+          <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={22} />
         </div>
       </div>
     </StyledWrapper>

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

@@ -82,6 +82,15 @@ const RequestBodyMode = ({ item, collection }) => {
           >
             TEXT
           </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('sparql');
+            }}
+          >
+            SPARQL
+          </div>
           <div className="label-item font-medium">Other</div>
           <div
             className="dropdown-item"

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

@@ -28,17 +28,19 @@ const RequestBody = ({ item, collection }) => {
   const onRun = () => dispatch(sendRequest(item, collection.uid));
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
-  if (['json', 'xml', 'text'].includes(bodyMode)) {
+  if (['json', 'xml', 'text', 'sparql'].includes(bodyMode)) {
     let codeMirrorMode = {
       json: 'application/ld+json',
       text: 'application/text',
-      xml: 'application/xml'
+      xml: 'application/xml',
+      sparql: 'application/sparql-query'
     };
 
     let bodyContent = {
       json: body.json,
       text: body.text,
-      xml: body.xml
+      xml: body.xml,
+      sparql: body.sparql
     };
 
     return (

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

@@ -8,6 +8,8 @@ import { addRequestHeader, updateRequestHeader, deleteRequestHeader } from 'prov
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
+import { headers as StandardHTTPHeaders } from 'know-your-http-well';
+const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const RequestHeaders = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -72,19 +74,28 @@ const RequestHeaders = ({ item, collection }) => {
         </thead>
         <tbody>
           {headers && headers.length
-            ? headers.map((header, index) => {
+            ? headers.map((header) => {
                 return (
                   <tr key={header.uid}>
                     <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
+                      <SingleLineEditor
                         value={header.name}
-                        className="mousetrap"
-                        onChange={(e) => handleHeaderValueChange(e, header, 'name')}
+                        theme={storedTheme}
+                        onSave={onSave}
+                        onChange={(newValue) =>
+                          handleHeaderValueChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            header,
+                            'name'
+                          )
+                        }
+                        autocomplete={headerAutoCompleteList}
+                        onRun={handleRun}
+                        collection={collection}
                       />
                     </td>
                     <td>
@@ -112,10 +123,11 @@ const RequestHeaders = ({ item, collection }) => {
                         <input
                           type="checkbox"
                           checked={header.enabled}
+                          tabIndex="-1"
                           className="mr-3 mousetrap"
                           onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
                         />
-                        <button onClick={() => handleRemoveHeader(header)}>
+                        <button tabIndex="-1" onClick={() => handleRemoveHeader(header)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
                       </div>

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

@@ -128,10 +128,11 @@ const VarsTable = ({ item, collection, vars, varType }) => {
                         <input
                           type="checkbox"
                           checked={_var.enabled}
+                          tabIndex="-1"
                           className="mr-3 mousetrap"
                           onChange={(e) => handleVarChange(e, _var, 'enabled')}
                         />
-                        <button onClick={() => handleRemoveVar(_var)}>
+                        <button tabIndex="-1" onClick={() => handleRemoveVar(_var)}>
                           <IconTrash strokeWidth={1.5} size={20} />
                         </button>
                       </div>

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

@@ -13,6 +13,8 @@ import RequestNotFound from './RequestNotFound';
 import QueryUrl from 'components/RequestPane/QueryUrl';
 import NetworkError from 'components/ResponsePane/NetworkError';
 import RunnerResults from 'components/RunnerResults';
+import VariablesEditor from 'components/VariablesEditor';
+import CollectionSettings from 'components/CollectionSettings';
 import { DocExplorer } from '@usebruno/graphql-docs';
 
 import StyledWrapper from './StyledWrapper';
@@ -110,7 +112,7 @@ const RequestTabPanel = () => {
   }
 
   if (!focusedTab || !focusedTab.uid || !focusedTab.collectionUid) {
-    return <div className="pb-4 px-4">An error occured!</div>;
+    return <div className="pb-4 px-4">An error occurred!</div>;
   }
 
   let collection = find(collections, (c) => c.uid === focusedTab.collectionUid);
@@ -118,11 +120,18 @@ const RequestTabPanel = () => {
     return <div className="pb-4 px-4">Collection not found!</div>;
   }
 
-  const showRunner = collection.showRunner;
-  if (showRunner) {
+  if (focusedTab.type === 'collection-runner') {
     return <RunnerResults collection={collection} />;
   }
 
+  if (focusedTab.type === 'variables') {
+    return <VariablesEditor collection={collection} />;
+  }
+
+  if (focusedTab.type === 'collection-settings') {
+    return <CollectionSettings collection={collection} />;
+  }
+
   const item = findItemInCollection(collection, activeTabUid);
   if (!item || !item.uid) {
     return <RequestNotFound itemUid={activeTabUid} />;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { IconFiles, IconRun } from '@tabler/icons';
+import { uuid } from 'utils/common';
+import { IconFiles, IconRun, IconEye, IconSettings } from '@tabler/icons';
 import EnvironmentSelector from 'components/Environments/EnvironmentSelector';
-import VariablesView from 'components/VariablesView';
+import { addTab } from 'providers/ReduxStore/slices/tabs';
 import { useDispatch } from 'react-redux';
-import { toggleRunnerView } from 'providers/ReduxStore/slices/collections';
 import StyledWrapper from './StyledWrapper';
 
 const CollectionToolBar = ({ collection }) => {
@@ -11,8 +11,30 @@ const CollectionToolBar = ({ collection }) => {
 
   const handleRun = () => {
     dispatch(
-      toggleRunnerView({
-        collectionUid: collection.uid
+      addTab({
+        uid: uuid(),
+        collectionUid: collection.uid,
+        type: 'collection-runner'
+      })
+    );
+  };
+
+  const viewVariables = () => {
+    dispatch(
+      addTab({
+        uid: uuid(),
+        collectionUid: collection.uid,
+        type: 'variables'
+      })
+    );
+  };
+
+  const viewCollectionSettings = () => {
+    dispatch(
+      addTab({
+        uid: uuid(),
+        collectionUid: collection.uid,
+        type: 'collection-settings'
       })
     );
   };
@@ -28,7 +50,12 @@ const CollectionToolBar = ({ collection }) => {
           <span className="mr-2">
             <IconRun className="cursor-pointer" size={20} strokeWidth={1.5} onClick={handleRun} />
           </span>
-          <VariablesView collection={collection} />
+          <span className="mr-3">
+            <IconEye className="cursor-pointer" size={18} strokeWidth={1.5} onClick={viewVariables} />
+          </span>
+          <span className="mr-3">
+            <IconSettings className="cursor-pointer" size={18} strokeWidth={1.5} onClick={viewCollectionSettings} />
+          </span>
           <EnvironmentSelector collection={collection} />
         </div>
       </div>

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import Modal from 'components/Modal';
+
+const ConfirmRequestClose = ({ onCancel, onCloseWithoutSave, onSaveAndClose }) => {
+  const _handleCancel = ({ type }) => {
+    if (type === 'button') {
+      return onCloseWithoutSave();
+    }
+
+    return onCancel();
+  };
+
+  return (
+    <Modal
+      size="sm"
+      title="Unsaved changes"
+      confirmText="Save and Close"
+      cancelText="Close without saving"
+      handleConfirm={onSaveAndClose}
+      handleCancel={_handleCancel}
+      disableEscapeKey={true}
+      disableCloseOnOutsideClick={true}
+      closeModalFadeTimeout={150}
+    >
+      <div className="font-normal">You have unsaved changes in you request.</div>
+    </Modal>
+  );
+};
+
+export default ConfirmRequestClose;

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

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

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

@@ -1,13 +1,22 @@
-import React from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
 import { closeTabs } from 'providers/ReduxStore/slices/tabs';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { deleteRequestDraft } from 'providers/ReduxStore/slices/collections';
 import { useDispatch } from 'react-redux';
 import { findItemInCollection } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import RequestTabNotFound from './RequestTabNotFound';
+import ConfirmRequestClose from './ConfirmRequestClose';
+import SpecialTab from './SpecialTab';
+import { useTheme } from 'providers/Theme';
+import darkTheme from 'themes/dark';
+import lightTheme from 'themes/light';
 
 const RequestTab = ({ tab, collection }) => {
   const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const [showConfirmClose, setShowConfirmClose] = useState(false);
 
   const handleCloseClick = (event) => {
     event.stopPropagation();
@@ -20,35 +29,38 @@ const RequestTab = ({ tab, collection }) => {
   };
 
   const getMethodColor = (method = '') => {
+    const theme = storedTheme === 'dark' ? darkTheme : lightTheme;
+
     let color = '';
     method = method.toLocaleLowerCase();
+
     switch (method) {
       case 'get': {
-        color = 'var(--color-method-get)';
+        color = theme.request.methods.get;
         break;
       }
       case 'post': {
-        color = 'var(--color-method-post)';
+        color = theme.request.methods.post;
         break;
       }
       case 'put': {
-        color = 'var(--color-method-put)';
+        color = theme.request.methods.put;
         break;
       }
       case 'delete': {
-        color = 'var(--color-method-delete)';
+        color = theme.request.methods.delete;
         break;
       }
       case 'patch': {
-        color = 'var(--color-method-patch)';
+        color = theme.request.methods.patch;
         break;
       }
       case 'options': {
-        color = 'var(--color-method-options)';
+        color = theme.request.methods.options;
         break;
       }
       case 'head': {
-        color = 'var(--color-method-head)';
+        color = theme.request.methods.head;
         break;
       }
     }
@@ -56,6 +68,14 @@ const RequestTab = ({ tab, collection }) => {
     return color;
   };
 
+  if (['collection-settings', 'variables', 'collection-runner'].includes(tab.type)) {
+    return (
+      <StyledWrapper className="flex items-center justify-between tab-container px-1">
+        <SpecialTab handleCloseClick={handleCloseClick} type={tab.type} />
+      </StyledWrapper>
+    );
+  }
+
   const item = findItemInCollection(collection, tab.uid);
 
   if (!item) {
@@ -70,6 +90,39 @@ const RequestTab = ({ tab, collection }) => {
 
   return (
     <StyledWrapper className="flex items-center justify-between tab-container px-1">
+      {showConfirmClose && (
+        <ConfirmRequestClose
+          onCancel={() => setShowConfirmClose(false)}
+          onCloseWithoutSave={() => {
+            dispatch(
+              deleteRequestDraft({
+                itemUid: item.uid,
+                collectionUid: collection.uid
+              })
+            );
+            dispatch(
+              closeTabs({
+                tabUids: [tab.uid]
+              })
+            );
+            setShowConfirmClose(false);
+          }}
+          onSaveAndClose={() => {
+            dispatch(saveRequest(item.uid, collection.uid))
+              .then(() => {
+                dispatch(
+                  closeTabs({
+                    tabUids: [tab.uid]
+                  })
+                );
+                setShowConfirmClose(false);
+              })
+              .catch((err) => {
+                console.log('err', err);
+              });
+          }}
+        />
+      )}
       <div className="flex items-baseline tab-label pl-2">
         <span className="tab-method uppercase" style={{ color: getMethodColor(method), fontSize: 12 }}>
           {method}
@@ -78,7 +131,14 @@ const RequestTab = ({ tab, collection }) => {
           {item.name}
         </span>
       </div>
-      <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e)}>
+      <div
+        className="flex px-2 close-icon-container"
+        onClick={(e) => {
+          if (!item.draft) return handleCloseClick(e);
+
+          setShowConfirmClose(true);
+        }}
+      >
         {!item.draft ? (
           <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
             <path

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 ${(props) => props.theme.requestTabs.bottomBorder};
 
   ul {
     padding: 0;

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

@@ -76,9 +76,7 @@ const RequestTabs = () => {
     });
   };
 
-  const showRunner = activeCollection && activeCollection.showRunner;
-
-  // Todo: Must support ephermal requests
+  // Todo: Must support ephemeral requests
   return (
     <StyledWrapper className={getRootClassname()}>
       {newRequestModalOpen && (
@@ -87,72 +85,70 @@ 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} />
+                      </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" id="create-new-tab" onClick={createNewTab}>
+                <div className="flex items-center">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="22"
+                    height="22"
+                    fill="currentColor"
+                    viewBox="0 0 16 16"
+                  >
+                    <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/Overlay/StyledWrapper.js

@@ -1,12 +1,13 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  position: absolute;
+  height: 100%;
+  z-index: 1;
+  background-color: ${(props) => props.theme.requestTabPanel.responseOverlayBg};
+
   div.overlay {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
+    height: 100%;
     z-index: 9;
     display: flex;
     flex-direction: column;
@@ -14,6 +15,11 @@ const StyledWrapper = styled.div`
     padding-top: 20%;
     overflow: hidden;
     text-align: center;
+
+    .loading-icon {
+      transform: scaleY(-1);
+      animation: rotateCounterClockwise 1s linear infinite;
+    }
   }
 `;
 

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

@@ -13,17 +13,17 @@ const ResponseLoadingOverlay = ({ item, collection }) => {
   };
 
   return (
-    <StyledWrapper className="mt-4 px-3 w-full">
+    <StyledWrapper className="px-3 w-full">
       <div className="overlay">
         <div style={{ marginBottom: 15, fontSize: 26 }}>
-          <div style={{ display: 'inline-block', fontSize: 24, marginLeft: 5, marginRight: 5 }}>
+          <div style={{ display: 'inline-block', fontSize: 20, marginLeft: 5, marginRight: 5 }}>
             <StopWatch />
           </div>
         </div>
-        <IconRefresh size={24} className="animate-spin" />
+        <IconRefresh size={24} className="loading-icon" />
         <button
           onClick={handleCancelRequest}
-          className="mt-4 uppercase btn-md rounded btn-secondary ease-linear transition-all duration-150"
+          className="mt-4 uppercase btn-sm rounded btn-secondary ease-linear transition-all duration-150"
           type="button"
         >
           Cancel Request

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

@@ -1,8 +1,14 @@
 import React from 'react';
 import { IconSend } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
+import { isMacOS } from 'utils/common/platform';
 
 const Placeholder = () => {
+  const isMac = isMacOS();
+  const sendRequestShortcut = isMac ? 'Cmd + Enter' : 'Ctrl + Enter';
+  const newRequestShortcut = isMac ? 'Cmd + B' : 'Ctrl + B';
+  const editEnvironmentShortcut = isMac ? 'Cmd + E' : 'Ctrl + E';
+
   return (
     <StyledWrapper>
       <div className="send-icon flex justify-center" style={{ fontSize: 200 }}>
@@ -13,13 +19,11 @@ const Placeholder = () => {
           <div className="px-1 py-2">Send Request</div>
           <div className="px-1 py-2">New Request</div>
           <div className="px-1 py-2">Edit Environments</div>
-          <div className="px-1 py-2">Help</div>
         </div>
         <div className="flex flex-1 flex-col px-1">
-          <div className="px-1 py-2">Cmd + Enter</div>
-          <div className="px-1 py-2">Cmd + B</div>
-          <div className="px-1 py-2">Cmd + E</div>
-          <div className="px-1 py-2">Cmd + H</div>
+          <div className="px-1 py-2">{sendRequestShortcut}</div>
+          <div className="px-1 py-2">{newRequestShortcut}</div>
+          <div className="px-1 py-2">{editEnvironmentShortcut}</div>
         </div>
       </div>
     </StyledWrapper>

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

@@ -1,9 +1,27 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 1.25rem calc(100% - 1.25rem);
+
+  /* This is a hack to force Codemirror to use all available space */
+  > div {
+    position: relative;
+  }
+
   div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 220px);
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  div[role='tablist'] {
+    .active {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
   }
 `;
 

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

@@ -3,12 +3,61 @@ import CodeEditor from 'components/CodeEditor';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import classnames from 'classnames';
+import { getContentType, safeStringifyJSON, safeParseXML } from 'utils/common';
+import { getCodeMirrorModeBasedOnContentType } from 'utils/common/codemirror';
 
 import StyledWrapper from './StyledWrapper';
+import { useState } from 'react';
+import { useMemo } from 'react';
 
-const QueryResult = ({ item, collection, value, width, disableRunEventListener, mode }) => {
+const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers, error }) => {
   const { storedTheme } = useTheme();
+  const [tab, setTab] = useState('preview');
   const dispatch = useDispatch();
+  const contentType = getContentType(headers);
+  const mode = getCodeMirrorModeBasedOnContentType(contentType);
+
+  const formatResponse = (data, mode) => {
+    if (!data) {
+      return '';
+    }
+
+    if (mode.includes('json')) {
+      return safeStringifyJSON(data, true);
+    }
+
+    if (mode.includes('xml')) {
+      let parsed = safeParseXML(data, { collapseContent: true });
+
+      if (typeof parsed === 'string') {
+        return parsed;
+      }
+
+      return safeStringifyJSON(parsed, true);
+    }
+
+    if (['text', 'html'].includes(mode)) {
+      if (typeof data === 'string') {
+        return data;
+      }
+
+      return safeStringifyJSON(data);
+    }
+
+    if (mode.includes('image')) {
+      return item.requestSent.url;
+    }
+
+    // final fallback
+    if (typeof data === 'string') {
+      return data;
+    }
+
+    return safeStringifyJSON(data);
+  };
+
+  const value = formatResponse(data, mode);
 
   const onRun = () => {
     if (disableRunEventListener) {
@@ -17,18 +66,60 @@ const QueryResult = ({ item, collection, value, width, disableRunEventListener,
     dispatch(sendRequest(item, collection.uid));
   };
 
-  return (
-    <StyledWrapper className="px-3 w-full" style={{ maxWidth: width }}>
-      <div className="h-full">
-        <CodeEditor
-          collection={collection}
-          theme={storedTheme}
-          onRun={onRun}
-          value={value || ''}
-          mode={mode}
-          readOnly
+  const getTabClassname = (tabName) => {
+    return classnames(`select-none ${tabName}`, {
+      active: tabName === tab,
+      'cursor-pointer': tabName !== tab
+    });
+  };
+
+  const getTabs = () => {
+    if (!mode.includes('html')) {
+      return null;
+    }
+
+    return (
+      <>
+        <div className={getTabClassname('raw')} role="tab" onClick={() => setTab('raw')}>
+          Raw
+        </div>
+        <div className={getTabClassname('preview')} role="tab" onClick={() => setTab('preview')}>
+          Preview
+        </div>
+      </>
+    );
+  };
+
+  const activeResult = useMemo(() => {
+    if (
+      tab === 'preview' &&
+      mode.includes('html') &&
+      item.requestSent &&
+      item.requestSent.url &&
+      typeof data === 'string'
+    ) {
+      // Add the Base tag to the head so content loads properly. This also needs the correct CSP settings
+      const webViewSrc = data.replace('<head>', `<head><base href="${item.requestSent.url}">`);
+      return (
+        <webview
+          src={`data:text/html; charset=utf-8,${encodeURIComponent(webViewSrc)}`}
+          webpreferences="disableDialogs=true, javascript=yes"
+          className="h-full bg-white"
         />
+      );
+    } else if (mode.includes('image')) {
+      return <img src={item.requestSent.url} alt="image" />;
+    }
+
+    return <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value} mode={mode} readOnly />;
+  }, [tab, collection, storedTheme, onRun, value, mode]);
+
+  return (
+    <StyledWrapper className="w-full h-full" style={{ maxWidth: width }}>
+      <div className="flex justify-end gap-2 text-xs" role="tablist">
+        {getTabs()}
       </div>
+      {error ? <span className="text-red-500">{error}</span> : activeResult}
     </StyledWrapper>
   );
 };

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

@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
 
 const ResponseHeaders = ({ headers }) => {
   return (
-    <StyledWrapper className="px-3 pb-4 w-full">
+    <StyledWrapper className="pb-4 w-full">
       <table>
         <thead>
           <tr>

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

@@ -7,7 +7,7 @@ const ResponseSize = ({ size }) => {
   if (size > 1024) {
     // size is greater than 1kb
     let kb = Math.floor(size / 1024);
-    let decimal = ((size % 1024) / 1024).toFixed(2) * 100;
+    let decimal = Math.round(((size % 1024) / 1024).toFixed(2) * 100);
     sizeToDisplay = kb + '.' + decimal + 'KB';
   } else {
     sizeToDisplay = size + 'B';

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

@@ -15,8 +15,8 @@ const TestResults = ({ results, assertionResults }) => {
   const failedAssertions = assertionResults.filter((result) => result.status === 'fail');
 
   return (
-    <StyledWrapper className="flex flex-col px-3">
-      <div className="py-2 font-medium test-summary">
+    <StyledWrapper className="flex flex-col">
+      <div className="pb-2 font-medium test-summary">
         Tests ({results.length}/{results.length}), Passed: {passedTests.length}, Failed: {failedTests.length}
       </div>
       <ul className="">

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

@@ -20,7 +20,7 @@ const Timeline = ({ request, response }) => {
   let requestData = safeStringifyJSON(request.data);
 
   return (
-    <StyledWrapper className="px-3 pb-4 w-full">
+    <StyledWrapper className="pb-4 w-full">
       <div>
         <pre className="line request font-bold">
           <span className="arrow">{'>'}</span> {request.method} {request.url}

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 { useDispatch, useSelector } from 'react-redux';
 import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs';
 import QueryResult from './QueryResult';
@@ -41,10 +40,9 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
             item={item}
             collection={collection}
             width={rightPaneWidth}
-            value={
-              response.data ? (isJson(response.headers) ? safeStringifyJSON(response.data, true) : response.data) : ''
-            }
-            mode={getContentType(response.headers)}
+            data={response.data}
+            headers={response.headers}
+            error={response.error}
           />
         );
       }
@@ -64,15 +62,15 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
     }
   };
 
-  if (isLoading) {
+  if (isLoading && !item.response) {
     return (
-      <StyledWrapper className="flex h-full relative">
+      <StyledWrapper className="flex flex-col h-full relative">
         <Overlay item={item} collection={collection} />
       </StyledWrapper>
     );
   }
 
-  if (response.state !== 'success') {
+  if (!item.response) {
     return (
       <StyledWrapper className="flex h-full relative">
         <Placeholder />
@@ -95,31 +93,9 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
     });
   };
 
-  const getContentType = (headers) => {
-    if (headers && headers.length) {
-      let contentType = headers
-        .filter((header) => header[0].toLowerCase() === 'content-type')
-        .map((header) => {
-          return header[1];
-        });
-      if (contentType && contentType.length) {
-        if (typeof contentType[0] == 'string' && /^[\w\-]+\/([\w\-]+\+)?json/.test(contentType[0])) {
-          return 'application/ld+json';
-        } else if (typeof contentType[0] == 'string' && /^[\w\-]+\/([\w\-]+\+)?xml/.test(contentType[0])) {
-          return 'application/xml';
-        }
-      }
-    }
-    return '';
-  };
-
-  const isJson = (headers) => {
-    return getContentType(headers) === 'application/ld+json';
-  };
-
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex items-center px-3 tabs" role="tablist">
+      <div className="flex flex-wrap items-center pl-3 pr-4 tabs" role="tablist">
         <div className={getTabClassname('response')} role="tab" onClick={() => selectTab('response')}>
           Response
         </div>
@@ -140,7 +116,12 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
           </div>
         ) : null}
       </div>
-      <section className="flex flex-grow mt-5">{getTabPanel(focusedTab.responsePaneTab)}</section>
+      <section
+        className={`flex flex-grow relative pl-3 pr-4 ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}
+      >
+        {isLoading ? <Overlay item={item} collection={collection} /> : null}
+        {getTabPanel(focusedTab.responsePaneTab)}
+      </section>
     </StyledWrapper>
   );
 };

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

@@ -33,7 +33,8 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
             collection={collection}
             width={rightPaneWidth}
             disableRunEventListener={true}
-            value={responseReceived && responseReceived.data ? safeStringifyJSON(responseReceived.data, true) : ''}
+            data={responseReceived.data}
+            headers={responseReceived.headers}
           />
         );
       }

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

@@ -3,7 +3,7 @@ import path from 'path';
 import { useDispatch } from 'react-redux';
 import { get, each, cloneDeep } from 'lodash';
 import { runCollectionFolder } from 'providers/ReduxStore/slices/collections/actions';
-import { closeCollectionRunner } from 'providers/ReduxStore/slices/collections';
+import { resetCollectionRunner } from 'providers/ReduxStore/slices/collections';
 import { findItemInCollection, getTotalRequestCountInCollection } from 'utils/collections';
 import { IconRefresh, IconCircleCheck, IconCircleX, IconCheck, IconX, IconRun } from '@tabler/icons';
 import slash from 'utils/common/slash';
@@ -69,9 +69,9 @@ export default function RunnerResults({ collection }) {
     dispatch(runCollectionFolder(collection.uid, runnerInfo.folderUid, runnerInfo.isRecursive));
   };
 
-  const closeRunner = () => {
+  const resetRunner = () => {
     dispatch(
-      closeCollectionRunner({
+      resetCollectionRunner({
         collectionUid: collection.uid
       })
     );
@@ -101,8 +101,8 @@ export default function RunnerResults({ collection }) {
           Run Collection
         </button>
 
-        <button className="submit btn btn-sm btn-close mt-6 ml-3" onClick={closeRunner}>
-          Close
+        <button className="submit btn btn-sm btn-close mt-6 ml-3" onClick={resetRunner}>
+          Reset
         </button>
       </StyledWrapper>
     );
@@ -202,8 +202,8 @@ export default function RunnerResults({ collection }) {
               <button type="submit" className="submit btn btn-sm btn-secondary mt-6 ml-3" onClick={runCollection}>
                 Run Collection
               </button>
-              <button className="btn btn-sm btn-close mt-6 ml-3" onClick={closeRunner}>
-                Close
+              <button className="btn btn-sm btn-close mt-6 ml-3" onClick={resetRunner}>
+                Reset
               </button>
             </div>
           ) : null}

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index.js

@@ -18,7 +18,7 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
     },
     validationSchema: Yup.object({
       name: Yup.string()
-        .min(1, 'must be atleast 1 characters')
+        .min(1, 'must be at least 1 character')
         .max(50, 'must be 50 characters or less')
         .required('name is required')
     }),
@@ -28,7 +28,7 @@ const CloneCollectionItem = ({ collection, item, onClose }) => {
           onClose();
         })
         .catch((err) => {
-          toast.error(err ? err.message : 'An error occured while cloning the request');
+          toast.error(err ? err.message : 'An error occurred while cloning the request');
         });
     }
   });

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js

@@ -0,0 +1,21 @@
+import CodeEditor from 'components/CodeEditor/index';
+import { HTTPSnippet } from 'httpsnippet';
+import { useTheme } from 'providers/Theme/index';
+import { buildHarRequest } from 'utils/codegenerator/har';
+
+const CodeView = ({ language, item }) => {
+  const { storedTheme } = useTheme();
+  const { target, client, language: lang } = language;
+  let snippet = '';
+
+  try {
+    snippet = new HTTPSnippet(buildHarRequest(item.request)).convert(target, client);
+  } catch (e) {
+    console.error(e);
+    snippet = 'Error generating code snippet';
+  }
+
+  return <CodeEditor readOnly value={snippet} theme={storedTheme} mode={lang} />;
+};
+
+export default CodeView;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  margin-inline: -1rem;
+  margin-block: -1.5rem;
+  background-color: ${(props) => props.theme.collection.environment.settings.bg};
+
+  .generate-code-sidebar {
+    background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg};
+    border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight};
+    min-height: 400px;
+  }
+
+  .generate-code-item {
+    min-width: 150px;
+    display: block;
+    position: relative;
+    cursor: pointer;
+    padding: 8px 10px;
+    border-left: solid 2px transparent;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
+      background-color: ${(props) => props.theme.collection.environment.settings.item.hoverBg};
+    }
+  }
+
+  .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};
+    &:hover {
+      background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js

@@ -0,0 +1,149 @@
+import Modal from 'components/Modal/index';
+import { useState } from 'react';
+import CodeView from './CodeView';
+import StyledWrapper from './StyledWrapper';
+import { isValidUrl } from 'utils/url/index';
+import get from 'lodash/get';
+import handlebars from 'handlebars';
+import { findEnvironmentInCollection } from 'utils/collections';
+
+const interpolateUrl = ({ url, envVars, collectionVariables, processEnvVars }) => {
+  if (!url || !url.length || typeof url !== 'string') {
+    return;
+  }
+
+  const template = handlebars.compile(url, { noEscape: true });
+
+  return template({
+    ...envVars,
+    ...collectionVariables,
+    process: {
+      env: {
+        ...processEnvVars
+      }
+    }
+  });
+};
+
+const languages = [
+  {
+    name: 'HTTP',
+    target: 'http',
+    client: 'http1.1'
+  },
+  {
+    name: 'JavaScript-Fetch',
+    target: 'javascript',
+    client: 'fetch'
+  },
+  {
+    name: 'Javascript-jQuery',
+    target: 'javascript',
+    client: 'jquery'
+  },
+  {
+    name: 'Javascript-axios',
+    target: 'javascript',
+    client: 'axios'
+  },
+  {
+    name: 'Python-Python3',
+    target: 'python',
+    client: 'python3'
+  },
+  {
+    name: 'Python-Requests',
+    target: 'python',
+    client: 'requests'
+  },
+  {
+    name: 'PHP',
+    target: 'php',
+    client: 'curl'
+  },
+  {
+    name: 'Shell-curl',
+    target: 'shell',
+    client: 'curl'
+  },
+  {
+    name: 'Shell-httpie',
+    target: 'shell',
+    client: 'httpie'
+  }
+];
+
+const GenerateCodeItem = ({ collection, item, onClose }) => {
+  const url = get(item, 'draft.request.url') !== undefined ? get(item, 'draft.request.url') : get(item, 'request.url');
+  const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
+  let envVars = {};
+  if (environment) {
+    const vars = get(environment, 'variables', []);
+    envVars = vars.reduce((acc, curr) => {
+      acc[curr.name] = curr.value;
+      return acc;
+    }, {});
+  }
+
+  const interpolatedUrl = interpolateUrl({
+    url,
+    envVars,
+    collectionVariables: collection.collectionVariables,
+    processEnvVars: collection.processEnvVariables
+  });
+  const [selectedLanguage, setSelectedLanguage] = useState(languages[0]);
+  return (
+    <Modal size="lg" title="Generate Code" handleCancel={onClose} hideFooter={true}>
+      <StyledWrapper>
+        <div className="flex w-full">
+          <div>
+            <div className="generate-code-sidebar">
+              {languages &&
+                languages.length &&
+                languages.map((language) => (
+                  <div
+                    key={language.name}
+                    className={
+                      language.name === selectedLanguage.name ? 'generate-code-item active' : 'generate-code-item'
+                    }
+                    onClick={() => setSelectedLanguage(language)}
+                  >
+                    <span className="capitalize">{language.name}</span>
+                  </div>
+                ))}
+            </div>
+          </div>
+          <div className="flex-grow p-4">
+            {isValidUrl(interpolatedUrl) ? (
+              <CodeView
+                language={selectedLanguage}
+                item={{
+                  ...item,
+                  request:
+                    item.request.url !== ''
+                      ? {
+                          ...item.request,
+                          url: interpolatedUrl
+                        }
+                      : {
+                          ...item.draft.request,
+                          url: interpolatedUrl
+                        }
+                }}
+              />
+            ) : (
+              <div className="flex flex-col justify-center items-center w-full">
+                <div className="text-center">
+                  <h1 className="text-2xl font-bold">Invalid URL: {interpolatedUrl}</h1>
+                  <p className="text-gray-500">Please check the URL and try again</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </StyledWrapper>
+    </Modal>
+  );
+};
+
+export default GenerateCodeItem;

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RenameCollectionItem/index.js

@@ -17,7 +17,7 @@ const RenameCollectionItem = ({ collection, item, onClose }) => {
     },
     validationSchema: Yup.object({
       name: Yup.string()
-        .min(1, 'must be atleast 1 characters')
+        .min(1, 'must be at least 1 character')
         .max(50, 'must be 50 characters or less')
         .required('name is required')
     }),

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js

@@ -25,13 +25,13 @@ const Wrapper = styled.div`
     color: ${(props) => props.theme.request.methods.delete};
   }
   .method-patch {
-    color: ${(props) => props.theme.request.methods.put};
+    color: ${(props) => props.theme.request.methods.patch};
   }
   .method-options {
-    color: ${(props) => props.theme.request.methods.put};
+    color: ${(props) => props.theme.request.methods.options};
   }
   .method-head {
-    color: ${(props) => props.theme.request.methods.put};
+    color: ${(props) => props.theme.request.methods.head};
   }
 `;
 

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/index.js

@@ -15,7 +15,8 @@ const RequestMethod = ({ item }) => {
       'method-put': method === 'put',
       'method-delete': method === 'delete',
       'method-patch': method === 'patch',
-      'method-head': method === 'head'
+      'method-head': method === 'head',
+      'method-options': method == 'options'
     });
   };
 

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RunCollectionItem/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import get from 'lodash/get';
+import { uuid } from 'utils/common';
 import Modal from 'components/Modal';
 import { useDispatch } from 'react-redux';
+import { addTab } from 'providers/ReduxStore/slices/tabs';
 import { runCollectionFolder } from 'providers/ReduxStore/slices/collections/actions';
-import { showRunnerView } from 'providers/ReduxStore/slices/collections';
 import { flattenItems } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 
@@ -12,8 +13,10 @@ const RunCollectionItem = ({ collection, item, onClose }) => {
 
   const onSubmit = (recursive) => {
     dispatch(
-      showRunnerView({
-        collectionUid: collection.uid
+      addTab({
+        uid: uuid(),
+        collectionUid: collection.uid,
+        type: 'collection-runner'
       })
     );
     dispatch(runCollectionFolder(collection.uid, item ? item.uid : null, recursive));

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js

@@ -6,7 +6,7 @@ import { useDrag, useDrop } from 'react-dnd';
 import { IconChevronRight, IconDots } from '@tabler/icons';
 import { useSelector, useDispatch } from 'react-redux';
 import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
-import { collectionFolderClicked, hideRunnerView } from 'providers/ReduxStore/slices/collections';
+import { collectionFolderClicked } from 'providers/ReduxStore/slices/collections';
 import { moveItem } from 'providers/ReduxStore/slices/collections/actions';
 import Dropdown from 'components/Dropdown';
 import NewRequest from 'components/Sidebar/NewRequest';
@@ -16,11 +16,12 @@ import RenameCollectionItem from './RenameCollectionItem';
 import CloneCollectionItem from './CloneCollectionItem';
 import DeleteCollectionItem from './DeleteCollectionItem';
 import RunCollectionItem from './RunCollectionItem';
+import GenerateCodeItem from './GenerateCodeItem';
 import { isItemARequest, isItemAFolder, itemIsOpenedInTabs } from 'utils/tabs';
 import { doesRequestMatchSearchText, doesFolderHaveItemsMatchSearchText } from 'utils/collections/search';
 import { getDefaultRequestPaneTab } from 'utils/collections';
 import { hideHomePage } from 'providers/ReduxStore/slices/app';
-
+import toast from 'react-hot-toast';
 import StyledWrapper from './StyledWrapper';
 
 const CollectionItem = ({ item, collection, searchText }) => {
@@ -32,6 +33,7 @@ const CollectionItem = ({ item, collection, searchText }) => {
   const [renameItemModalOpen, setRenameItemModalOpen] = useState(false);
   const [cloneItemModalOpen, setCloneItemModalOpen] = useState(false);
   const [deleteItemModalOpen, setDeleteItemModalOpen] = useState(false);
+  const [generateCodeItemModalOpen, setGenerateCodeItemModalOpen] = useState(false);
   const [newRequestModalOpen, setNewRequestModalOpen] = useState(false);
   const [newFolderModalOpen, setNewFolderModalOpen] = useState(false);
   const [runCollectionModalOpen, setRunCollectionModalOpen] = useState(false);
@@ -86,38 +88,51 @@ const CollectionItem = ({ item, collection, searchText }) => {
   });
 
   const handleClick = (event) => {
-    dispatch(
-      hideRunnerView({
-        collectionUid: collection.uid
-      })
-    );
-    if (isItemARequest(item)) {
-      if (itemIsOpenedInTabs(item, tabs)) {
+    switch (event.button) {
+      case 0: // left click
+        if (isItemARequest(item)) {
+          dispatch(hideHomePage());
+          if (itemIsOpenedInTabs(item, tabs)) {
+            dispatch(
+              focusTab({
+                uid: item.uid
+              })
+            );
+            return;
+          }
+          dispatch(
+            addTab({
+              uid: item.uid,
+              collectionUid: collection.uid,
+              requestPaneTab: getDefaultRequestPaneTab(item)
+            })
+          );
+          return;
+        }
         dispatch(
-          focusTab({
-            uid: item.uid
+          collectionFolderClicked({
+            itemUid: item.uid,
+            collectionUid: collection.uid
           })
         );
-      } else {
-        dispatch(
-          addTab({
-            uid: item.uid,
-            collectionUid: collection.uid,
-            requestPaneTab: getDefaultRequestPaneTab(item)
-          })
-        );
-      }
-      dispatch(hideHomePage());
-    } else {
-      dispatch(
-        collectionFolderClicked({
-          itemUid: item.uid,
-          collectionUid: collection.uid
-        })
-      );
+        return;
+      case 2: // right click
+        const _menuDropdown = dropdownTippyRef.current;
+        if (_menuDropdown) {
+          let menuDropdownBehavior = 'show';
+          if (_menuDropdown.state.isShown) {
+            menuDropdownBehavior = 'hide';
+          }
+          _menuDropdown[menuDropdownBehavior]();
+        }
+        return;
     }
   };
 
+  const handleDoubleClick = (event) => {
+    setRenameItemModalOpen(true);
+  };
+
   let indents = range(item.depth);
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
   const isFolder = isItemAFolder(item);
@@ -147,7 +162,15 @@ const CollectionItem = ({ item, collection, searchText }) => {
   const sortFolderItems = (items = []) => {
     return items.sort((a, b) => a.name.localeCompare(b.name));
   };
-
+  const handleGenerateCode = (e) => {
+    e.stopPropagation();
+    dropdownTippyRef.current.hide();
+    if (item.request.url !== '' || (item.draft?.request.url !== undefined && item.draft?.request.url !== '')) {
+      setGenerateCodeItemModalOpen(true);
+    } else {
+      toast.error('URL is required');
+    }
+  };
   const requestItems = sortRequestItems(filter(item.items, (i) => isItemARequest(i)));
   const folderItems = sortFolderItems(filter(item.items, (i) => isItemAFolder(i)));
 
@@ -171,13 +194,17 @@ const CollectionItem = ({ item, collection, searchText }) => {
       {runCollectionModalOpen && (
         <RunCollectionItem collection={collection} item={item} onClose={() => setRunCollectionModalOpen(false)} />
       )}
+      {generateCodeItemModalOpen && (
+        <GenerateCodeItem collection={collection} item={item} onClose={() => setGenerateCodeItemModalOpen(false)} />
+      )}
       <div className={itemRowClassName} ref={(node) => drag(drop(node))}>
         <div className="flex items-center h-full w-full">
           {indents && indents.length
             ? indents.map((i) => {
                 return (
                   <div
-                    onClick={handleClick}
+                    onMouseUp={handleClick}
+                    onDoubleClick={handleDoubleClick}
                     className="indent-block"
                     key={i}
                     style={{
@@ -192,7 +219,8 @@ const CollectionItem = ({ item, collection, searchText }) => {
               })
             : null}
           <div
-            onClick={handleClick}
+            onMouseUp={handleClick}
+            onDoubleClick={handleDoubleClick}
             className="flex flex-grow items-center h-full overflow-hidden"
             style={{
               paddingLeft: 8
@@ -269,6 +297,16 @@ const CollectionItem = ({ item, collection, searchText }) => {
                   Clone
                 </div>
               )}
+              {!isFolder && item.type === 'http-request' && (
+                <div
+                  className="dropdown-item"
+                  onClick={(e) => {
+                    handleGenerateCode(e);
+                  }}
+                >
+                  Generate Code
+                </div>
+              )}
               <div
                 className="dropdown-item delete-item"
                 onClick={(e) => {