wip: abstracting parse and stringify operations

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: helloanoop

.github/ISSUE_TEMPLATE/BugReport.yaml

@@ -6,58 +6,26 @@ body:
     attributes:
       value: |
         Thanks for taking the time to fill out this bug report!
-
-        Before submitting, please make sure you've searched existing issues:
-        👉 [Search existing issues](https://github.com/usebruno/bruno/issues?q=is%3Aissue)
-
   - type: checkboxes
     attributes:
       label: 'I have checked the following:'
       options:
-        - label: "I have searched existing issues and found nothing related to my issue."
+        - label: I use the newest version of bruno.
+          required: true
+        - label: I've searched existing issues and found nothing related to my issue.
           required: true
-
-  - type: checkboxes
-    attributes:
-      label: 'This bug is:'
-      options:
-        - label: making Bruno unusable for me
-          required: false
-        - label: slowing me down but I'm able to continue working
-          required: false
-        - label: annoying
-          required: false
-          
-  - type: input
-    attributes:
-      label: Bruno version
-      description: Please specify the version of Bruno you are using in which the issue occurs.
-      placeholder: 1.38.1
-    validations:
-      required: true
-
-  - type: input
-    attributes:
-      label: Operating System
-      description: Information about the operating system the issue occurs on.
-      placeholder: Windows 11 26100.3037 / macOS 15.1 (24B83) / Linux 6.13.1
-    validations:
-      required: true
-
   - type: textarea
     attributes:
       label: Describe the bug
-      description: A clear and concise description of the bug and how it's effecting your work along with steps to reproduce. 
+      description: A clear and concise description of the bug.
     validations:
       required: true
-
   - type: textarea
     attributes:
       label: .bru file to reproduce the bug
-      description: Attach your .bru file here that can reproduce the problem.
+      description: Attach your .bru file here that can reqroduce the problem.
     validations:
       required: false
-
   - type: textarea
     attributes:
       label: Screenshots/Live demo link

.github/ISSUE_TEMPLATE/FeatureRequest.yaml

@@ -8,23 +8,13 @@ body:
       options:
         - label: I've searched existing issues and found nothing related to my issue.
           required: true
-  - type: checkboxes
-    attributes:
-      label: 'This feature'
-      options:
-        - label: blocks me from using Bruno 
-          required: false
-        - label: would improve my quality of life in Bruno 
-          required: false
-        - label: is something I've never seen an API client do before
-          required: false
   - type: markdown
     attributes:
       value: |
         Suggest an idea for this project.
   - type: textarea
     attributes:
-      label: Describe the feature you want to add, and how it would change your usage of Bruno 
+      label: Describe the feature you want to add
       description: A clear and concise description of the feature you want to be added.
     validations:
       required: true
@@ -33,4 +23,4 @@ body:
       label: Mockups or Images of the feature
       description: Add some images to support your feature.
     validations:
-      required: false
+      required: true

.github/dependabot.yml

@@ -1,31 +0,0 @@
-version: 2
-
-updates:
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: weekly
-  
-  - package-ecosystem: npm
-    directory: "/"
-    schedule:
-      interval: weekly
-    groups:
-      bruno-dependencies:
-        patterns:
-          - "*usebruno*"
-      babel-dependencies:
-        patterns:
-          - "*babel*"
-      fortawesome-dependencies:
-        patterns:
-          - "*fortawesome*"
-      electron-dependencies:
-        patterns:
-          - "*electron*"
-      rollup-dependencies:
-        patterns:
-          - "*rollup*"
-      jest-dependencies:
-        patterns:
-          - "*jest*"

.github/workflows/npm-bru-cli.yml

@@ -26,7 +26,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
 
@@ -43,7 +43,7 @@ jobs:
           bru run --env Prod --output junit.xml --format junit
 
       - name: Publish Test Report
-        uses: dorny/test-reporter@v2
+        uses: dorny/test-reporter@v1
         if: success() || failure()
         with:
           name: Test Report

.github/workflows/tests.yml

@@ -5,13 +5,14 @@ on:
   pull_request:
     branches: [main]
 
+permissions:
+  contents: read
+
 jobs:
   unit-test:
     name: Unit Tests
     timeout-minutes: 60
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -54,7 +55,6 @@ jobs:
     permissions:
       checks: write
       pull-requests: write
-      contents: read
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

contributing.md

@@ -86,11 +86,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testing
 
 ```bash
-# run bruno-schema tests
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# run tests over all workspaces
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Raising Pull Requests

docs/contributing/contributing_bn.md

@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testing (পরীক্ষা)
 
 ```bash
-# ব্রুনো-স্কিমা পরীক্ষা চালান
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# সমস্ত কর্মক্ষেত্রে পরীক্ষা চালান
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Raising Pull Request (পুল অনুরোধ উত্থাপন)

docs/contributing/contributing_cn.md

@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### 测试
 
 ```bash
-# 运行 bruno-schema 测试
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# 在所有工作区上运行测试
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### 提交 Pull Request

docs/contributing/contributing_de.md

@@ -83,9 +83,9 @@ find . -type f -name "package-lock.json" -delete
 ### Testen
 
 ```bash
-# Führen Sie Bruno-Schema-Tests aus
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# Führen Sie Tests für alle Arbeitsbereiche durch
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

docs/contributing/contributing_es.md

@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### Pruebas
 
 ```bash
-# ejecutar pruebas de esquema bruno
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# ejecutar pruebas en todos los espacios de trabajo
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Crea un Pull Request

docs/contributing/contributing_fr.md

@@ -73,11 +73,11 @@ find . -type f -name "package-lock.json" -delete
 ### Tests
 
 ```bash
-# exécuter des tests de schéma bruno
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# exécuter des tests sur tous les espaces de travail
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Ouvrir une Pull Request

docs/contributing/contributing_hi.md

@@ -65,11 +65,11 @@ find . -type f -name "package-lock.json" -delete
 ### परिक्षण
 
 ```bash
-# ब्रूनो-स्कीमा परीक्षण चलाएँ
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# सभी कार्यस्थानों पर परीक्षण चलाएँ
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### पुल अनुरोध प्रक्रिया

docs/contributing/contributing_it.md

@@ -83,9 +83,9 @@ find . -type f -name "package-lock.json" -delete
 ### Tests
 
 ```bash
-# esegui i test dello schema bruno
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# esegui test su tutti gli spazi di lavoro
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

docs/contributing/contributing_ja.md

@@ -65,11 +65,11 @@ find . -type f -name "package-lock.json" -delete
 ### テストを動かすには
 
 ```bash
-# ブルーノスキーマのテストを実行します
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# すべてのワークスペースでテストを実行します
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### プルリクエストの手順

docs/contributing/contributing_kr.md

@@ -66,11 +66,11 @@ find . -type f -name "package-lock.json" -delete
 ### 테스팅
 
 ```bash
-# bruno-schema 테스트 실행
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# 모든 작업 공간에서 테스트 실행
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Pull Requests 요청

docs/contributing/contributing_nl.md

@@ -65,11 +65,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testen
 
 ```bash
-# voer bruno-schema tests uit
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# voer tests uit over alle werkruimten
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Pull Requests indienen

docs/contributing/contributing_pl.md

@@ -71,11 +71,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testowanie
 
 ```bash
-# uruchom testy bruno-schema
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# uruchom testy we wszystkich przestrzeniach roboczych
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Tworzenie Pull Request

docs/contributing/contributing_pt_br.md

@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testando
 
 ```bash
-# executar testes do bruno-schema
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# executar testes em todos os ambientes de trabalho
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Envio de Pull Request

docs/contributing/contributing_ro.md

@@ -64,11 +64,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testarea
 
 ```shell
-# executați teste bruno-schema
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# executați teste peste toate spațiile de lucru
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Crearea unui Pull Request

docs/contributing/contributing_ru.md

@@ -83,9 +83,9 @@ find . -type f -name "package-lock.json" -delete
 ### Тестирование
 
 ```bash
-# запустите тесты bruno-schema
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# запустите тесты во всех рабочих пространствах
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

docs/contributing/contributing_sk.md

@@ -67,11 +67,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testovanie
 
 ````bash
-# spustiť bruno-schema testy
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# spustiť testy vo všetkých pracovných priestoroch
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Vyrobenie Pull Request

docs/contributing/contributing_tr.md

@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### Test
 
 ```bash
-# bruno-schema testlerini çalıştır
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# tüm çalışma alanlarında testleri çalıştır
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Pull Request Oluşturma

docs/contributing/contributing_ua.md

@@ -83,9 +83,9 @@ find . -type f -name "package-lock.json" -delete
 ### Тестування
 
 ```bash
-# запустити тести bruno-schema
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# запустити тести у всіх робочих просторах
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

docs/contributing/contributing_zhtw.md

@@ -70,11 +70,11 @@ find . -type f -name "package-lock.json" -delete
 ### 測試
 
 ```bash
-# 執行布魯諾架構測試
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# 對所有工作區執行測試
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### 發送 Pull Request

docs/readme/readme_ua.md

@@ -29,13 +29,13 @@
 | [日本語](./readme_ja.md)
 | [ქართული](./readme_ka.md)
 
-Bruno це новий та іноваційний API клієнт, націлений на революційну зміну статусy кво, запровадженого інструментами на кшталт Postman.
+Bruno це новий та іноваційний API клієнт, націлений на революційну зміну статус кво, запровадженого інструментами на кшталт Postman.
 
 Bruno зберігає ваші колекції напряму у теці на вашому диску. Він використовує текстову мову розмітки Bru для збереження інформації про ваші API запити.
 
 Ви можете використовувати git або будь-яку іншу систему контролю версій щоб спільно працювати над вашими колекціями API запитів.
 
-Bruno є повністю автономним. Немає жодних планів додавати будь-які синхронізації через хмару, ніколи. Ми цінуємо приватність ваших даних, і вважаєм, що вони мають залишитись лише на вашому комп'ютері. Дізнатись більше про наше бачення у довготривалій перспективі можна [тут](https://github.com/usebruno/bruno/discussions/269)
+Bruno є повністю автономним. Немає жодних планів додавати будь-які синхронізації через хмару, ніколи. Ми цінуємо приватність ваших даних, і вважаєм, що вони мають залишитись лише на вашому комп'ютері. Взнати більше про наше бачення у довготривалій перспективі можна [тут](https://github.com/usebruno/bruno/discussions/269)
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
@@ -69,13 +69,13 @@ Bruno є повністю автономним. Немає жодних план
 
 ### Поділитись відгуками 📣
 
-Якщо Bruno допоміг у роботі вам або вашій команді, будь ласка не забудьте поділитись вашими [відгуками у github дискусії](https://github.com/usebruno/bruno/discussions/343)
+Якщо Bruno допоміг вам у вашій роботі і вашим командам, будь ласка не забудьте поділитись вашими [відгуками у github дискусії](https://github.com/usebruno/bruno/discussions/343)
 
 ### Зробити свій внесок 👩‍💻🧑‍💻
 
 Я радий що ви бажаєте покращити Bruno. Будь ласка переглянте [інструкцію по контрибуції](../contributing/contributing_ua.md)
 
-Навіть якщо ви не можете зробити свій внесок пишучи код, будь ласка не соромтесь рапортувати про помилки і писати запити на новий функціонал, який потрібен вам у вашій роботі.
+Навіть якщо ви не можете зробити свій внесок пишучи програмний код, будь ласка не соромтесь рапортувати про помилки і писати запити на новий функціонал, який потрібен вам у вашій роботі.
 
 ### Автори
 

package.json

@@ -27,7 +27,7 @@
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
     "rimraf": "^6.0.1",
-    "ts-jest": "^29.2.6"
+    "ts-jest": "^29.0.5"
   },
   "scripts": {
     "setup": "node ./scripts/setup.js",
@@ -47,7 +47,6 @@
     "build:electron:deb": "./scripts/build-electron.sh deb",
     "build:electron:rpm": "./scripts/build-electron.sh rpm",
     "build:electron:snap": "./scripts/build-electron.sh snap",
-    "test:codegen": "npm run dev:web & node ./scripts/playwright-codegen.js",
     "test:e2e": "npx playwright test",
     "test:report": "npx playwright show-report",
     "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",

packages/bruno-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usebruno/app",
-  "version": "2.0.0",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "dev": "rsbuild dev",
@@ -24,7 +24,6 @@
     "codemirror": "5.65.2",
     "codemirror-graphql": "2.1.1",
     "cookie": "0.7.1",
-    "dompurify": "^3.2.4",
     "escape-html": "^1.0.3",
     "file": "^0.2.2",
     "file-dialog": "^0.0.8",
@@ -34,22 +33,19 @@
     "graphiql": "3.7.1",
     "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
-    "httpsnippet": "^3.0.9",
+    "httpsnippet": "^3.0.6",
     "i18next": "24.1.2",
-    "iconv-lite": "^0.6.3",
     "idb": "^7.0.0",
     "immer": "^9.0.15",
     "jsesc": "^3.0.2",
     "jshint": "^2.13.6",
     "json5": "^2.2.3",
     "jsonc-parser": "^3.2.1",
-    "jsonpath-plus": "^10.3.0",
+    "jsonpath-plus": "10.2.0",
     "know-your-http-well": "^0.5.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
     "markdown-it-replace-link": "^1.2.0",
-    "moment": "^2.30.1",
-    "moment-timezone": "^0.5.47",
     "mousetrap": "^1.6.5",
     "nanoid": "3.3.8",
     "path": "^0.12.7",
@@ -72,7 +68,6 @@
     "react-redux": "^7.2.9",
     "react-tooltip": "^5.5.2",
     "sass": "^1.46.0",
-    "semver": "^7.7.1",
     "strip-json-comments": "^5.0.1",
     "styled-components": "^5.3.3",
     "system": "^2.0.1",

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

@@ -1,62 +0,0 @@
-import React, { createContext, useContext, useState } from 'react';
-import { IconChevronDown } from '@tabler/icons';
-import { AccordionItem, AccordionHeader, AccordionContent } from './styledWrapper';
-
-const AccordionContext = createContext();
-
-const Accordion = ({ children, defaultIndex }) => {
-  const [openIndex, setOpenIndex] = useState(defaultIndex);
-
-  const toggleItem = (index) => {
-    setOpenIndex(openIndex === index ? null : index);
-  };
-
-  return (
-    <AccordionContext.Provider value={{ openIndex, toggleItem }}>
-      <div>{children}</div>
-    </AccordionContext.Provider>
-  );
-};
-
-const Item = ({ index, children, ...props }) => {
-  return (
-    <AccordionItem {...props}>
-      {React.Children.map(children, (child) => React.cloneElement(child, { index }))}
-    </AccordionItem>
-  );
-};
-
-export const Header = ({ index, children, ...props }) => {
-  const { openIndex, toggleItem } = useContext(AccordionContext);
-  const isOpen = openIndex === index;
-
-  return (
-    <AccordionHeader onClick={() => toggleItem(index)} {...props} className={isOpen ? 'open' : ''}>
-      <div className="w-full">{children}</div>
-
-      <IconChevronDown
-        className="w-5 h-5 ml-auto"
-        style={{
-          transform: `rotate(${isOpen ? '180deg' : '0deg'})`,
-          transition: 'transform 0.3s ease-in-out'
-        }}
-      />
-    </AccordionHeader>
-  );
-};
-
-const Content = ({ index, children, ...props }) => {
-  const { openIndex } = useContext(AccordionContext);
-  const isOpen = openIndex === index;
-
-  return (
-    <AccordionContent isOpen={isOpen} {...props}>
-      {children}
-    </AccordionContent>
-  );
-};
-
-Accordion.Item = Item;
-Accordion.Header = Header;
-Accordion.Content = Content;
-export default Accordion;

packages/bruno-app/src/components/Accordion/styledWrapper.js

@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-
-const AccordionItem = styled.div`
-  border: 1px solid ${(props) => props.theme.input.border};
-  border-radius: 4px;
-  overflow: hidden;
-  margin-bottom: 1rem;
-`;
-
-const AccordionHeader = styled.button`
-  width: 100%;
-  display: flex;
-  padding: 0.75rem 1rem;
-  background: transparent;
-  cursor: pointer;
-  font-weight: 500;
-
-  &.open, &:hover {
-    background-color: ${(props) => props.theme.plainGrid.hoverBg};
-  }
-`;
-
-const AccordionContent = styled.div`
-  padding: ${(props) => (props.isOpen ? '1rem' : '0')};
-  max-height: ${(props) => (props.isOpen ? 'auto' : '0')};
-`;
-
-export { AccordionItem, AccordionHeader, AccordionContent };

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

@@ -31,7 +31,6 @@ if (!SERVER_RENDERED) {
     'res.body',
     'res.responseTime',
     'res.getStatus()',
-    'res.getStatusText()',
     'res.getHeader(name)',
     'res.getHeaders()',
     'res.getBody()',
@@ -84,7 +83,7 @@ if (!SERVER_RENDERED) {
     'bru.runner',
     'bru.runner.setNextRequest(requestName)',
     'bru.runner.skipRequest()',
-    'bru.runner.stopExecution()'
+    'bru.runner.stopExecution()',
   ];
   CodeMirror.registerHelper('hint', 'brunoJS', (editor, options) => {
     const cursor = editor.getCursor();
@@ -175,21 +174,11 @@ export default class CodeEditor extends React.Component {
           }
         },
         'Cmd-F': (cm) => {
-          if (this._isSearchOpen()) {
-            // replace the older search component with the new one
-            const search = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
-            search && search.remove();
-          }
           cm.execCommand('findPersistent');
           this._bindSearchHandler();
           this._appendSearchResultsCount();
         },
         'Ctrl-F': (cm) => {
-          if (this._isSearchOpen()) {
-            // replace the older search component with the new one
-            const search = document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
-            search && search.remove();
-          }
           cm.execCommand('findPersistent');
           this._bindSearchHandler();
           this._appendSearchResultsCount();
@@ -376,10 +365,6 @@ export default class CodeEditor extends React.Component {
     }
   };
 
-  _isSearchOpen = () => {
-    return document.querySelector('.CodeMirror-dialog.CodeMirror-dialog-top');
-  };
-
   /**
    * Bind handler to search input to count number of search results
    */

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

@@ -95,7 +95,7 @@ const AuthMode = ({ collection }) => {
               onModeChange('oauth2');
             }}
           >
-            OAuth 2.0
+            Oauth2
           </div>
           <div
             className="dropdown-item"

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

@@ -13,4 +13,4 @@ const Wrapper = styled.div`
   }
 `;
 
-export default Wrapper; 
+export default Wrapper;

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

@@ -0,0 +1,120 @@
+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 { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { inputsConfig } from './inputsConfig';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
+import { clearOauth2Cache } from 'utils/network/index';
+import toast from 'react-hot-toast';
+
+const OAuth2AuthorizationCode = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+
+  const handleRun = async () => {
+    dispatch(sendCollectionOauth2Request(collection.uid));
+  };
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const { callbackUrl, authorizationUrl, accessTokenUrl, clientId, clientSecret, scope, state, pkce } = oAuth;
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType: 'authorization_code',
+          callbackUrl,
+          authorizationUrl,
+          accessTokenUrl,
+          clientId,
+          clientSecret,
+          scope,
+          state,
+          pkce,
+          [key]: value
+        }
+      })
+    );
+  };
+
+  const handlePKCEToggle = (e) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType: 'authorization_code',
+          callbackUrl,
+          authorizationUrl,
+          accessTokenUrl,
+          clientId,
+          clientSecret,
+          scope,
+          state,
+          pkce: !Boolean(oAuth?.['pkce'])
+        }
+      })
+    );
+  };
+
+  const handleClearCache = (e) => {
+    clearOauth2Cache(collection?.uid)
+      .then(() => {
+        toast.success('cleared cache successfully');
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      });
+  };
+
+  return (
+    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
+      {inputsConfig.map((input) => {
+        const { key, label, isSecret } = input;
+        return (
+          <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
+            <label className="block font-medium">{label}</label>
+            <div className="single-line-editor-wrapper">
+              <SingleLineEditor
+                value={oAuth[key] || ''}
+                theme={storedTheme}
+                onSave={handleSave}
+                onChange={(val) => handleChange(key, val)}
+                onRun={handleRun}
+                collection={collection}
+                isSecret={isSecret}
+              />
+            </div>
+          </div>
+        );
+      })}
+      <div className="flex flex-row w-full gap-4" key="pkce">
+        <label className="block font-medium">Use PKCE</label>
+        <input
+          className="cursor-pointer"
+          type="checkbox"
+          checked={Boolean(oAuth?.['pkce'])}
+          onChange={handlePKCEToggle}
+        />
+      </div>
+      <div className="flex flex-row gap-4">
+        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+          Get Access Token
+        </button>
+        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
+          Clear Cache
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2AuthorizationCode;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/inputsConfig.js

@@ -0,0 +1,33 @@
+const inputsConfig = [
+  {
+    key: 'callbackUrl',
+    label: 'Callback URL'
+  },
+  {
+    key: 'authorizationUrl',
+    label: 'Authorization URL'
+  },
+  {
+    key: 'accessTokenUrl',
+    label: 'Access Token URL'
+  },
+  {
+    key: 'clientId',
+    label: 'Client ID'
+  },
+  {
+    key: 'clientSecret',
+    label: 'Client Secret',
+    isSecret: true
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  },
+  {
+    key: 'state',
+    label: 'State'
+  }
+];
+
+export { inputsConfig };

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

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    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/OAuth2/ClientCredentials/index.js

@@ -0,0 +1,70 @@
+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 { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { inputsConfig } from './inputsConfig';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
+
+const OAuth2ClientCredentials = ({ collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+
+  const handleRun = async () => {
+    dispatch(sendCollectionOauth2Request(collection.uid));
+  };
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const { accessTokenUrl, clientId, clientSecret, scope } = oAuth;
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType: 'client_credentials',
+          accessTokenUrl,
+          clientId,
+          clientSecret,
+          scope,
+          [key]: value
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
+      {inputsConfig.map((input) => {
+        const { key, label, isSecret } = input;
+        return (
+          <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
+            <label className="block font-medium">{label}</label>
+            <div className="single-line-editor-wrapper">
+              <SingleLineEditor
+                value={oAuth[key] || ''}
+                theme={storedTheme}
+                onSave={handleSave}
+                onChange={(val) => handleChange(key, val)}
+                onRun={handleRun}
+                collection={collection}
+                isSecret={isSecret}
+              />
+            </div>
+          </div>
+        );
+      })}
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2ClientCredentials;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/inputsConfig.js

@@ -0,0 +1,21 @@
+const inputsConfig = [
+  {
+    key: 'accessTokenUrl',
+    label: 'Access Token URL'
+  },
+  {
+    key: 'clientId',
+    label: 'Client ID'
+  },
+  {
+    key: 'clientSecret',
+    label: 'Client Secret',
+    isSecret: true
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  }
+];
+
+export { inputsConfig };

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

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  font-size: 0.8125rem;
+
+  .grant-type-mode-selector {
+    padding: 0.5rem 0px;
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+
+    .dropdown {
+      width: fit-content;
+
+      div[data-tippy-root] {
+        width: fit-content;
+      }
+      .tippy-box {
+        width: fit-content;
+        max-width: none !important;
+
+        .tippy-content: {
+          width: fit-content;
+          max-width: none !important;
+        }
+      }
+    }
+
+    .grant-type-label {
+      width: fit-content;
+      color: ${(props) => props.theme.colors.text.yellow};
+      justify-content: space-between;
+      padding: 0 0.5rem;
+    }
+
+    .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);
+  }
+  label {
+    font-size: 0.8125rem;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,98 @@
+import React, { useRef, forwardRef } from 'react';
+import get from 'lodash/get';
+import Dropdown from 'components/Dropdown';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+import { IconCaretDown } from '@tabler/icons';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { humanizeGrantType } from 'utils/collections';
+import { useEffect } from 'react';
+import { updateCollectionAuth, updateCollectionAuthMode } from 'providers/ReduxStore/slices/collections/index';
+
+const GrantTypeSelector = ({ collection }) => {
+  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-end grant-type-label select-none">
+        {humanizeGrantType(oAuth?.grantType)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
+      </div>
+    );
+  });
+
+  const onGrantTypeChange = (grantType) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType
+        }
+      })
+    );
+  };
+
+  useEffect(() => {
+    // initialize redux state with a default oauth2 grant type
+    // authorization_code - default option
+    !oAuth?.grantType &&
+      dispatch(
+        updateCollectionAuthMode({
+          mode: 'oauth2',
+          collectionUid: collection.uid
+        })
+      );
+    !oAuth?.grantType &&
+      dispatch(
+        updateCollectionAuth({
+          mode: 'oauth2',
+          collectionUid: collection.uid,
+          content: {
+            grantType: 'authorization_code'
+          }
+        })
+      );
+  }, [oAuth]);
+
+  return (
+    <StyledWrapper>
+      <label className="block font-medium mb-2">Grant Type</label>
+      <div className="inline-flex items-center cursor-pointer grant-type-mode-selector w-fit">
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onGrantTypeChange('password');
+            }}
+          >
+            Password Credentials
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onGrantTypeChange('authorization_code');
+            }}
+          >
+            Authorization Code
+          </div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onGrantTypeChange('client_credentials');
+            }}
+          >
+            Client Credentials
+          </div>
+        </Dropdown>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default GrantTypeSelector;

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

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    font-size: 0.8125rem;
+  }
+  .single-line-editor-wrapper {
+    max-width: 400px;
+    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/OAuth2/PasswordCredentials/index.js

@@ -0,0 +1,72 @@
+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 { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import { inputsConfig } from './inputsConfig';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
+
+const OAuth2AuthorizationCode = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+
+  const oAuth = get(collection, 'root.request.auth.oauth2', {});
+
+  const handleRun = async () => {
+    dispatch(sendCollectionOauth2Request(collection.uid));
+  };
+
+  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
+
+  const { accessTokenUrl, username, password, clientId, clientSecret, scope } = oAuth;
+
+  const handleChange = (key, value) => {
+    dispatch(
+      updateCollectionAuth({
+        mode: 'oauth2',
+        collectionUid: collection.uid,
+        content: {
+          grantType: 'password',
+          accessTokenUrl,
+          username,
+          password,
+          clientId,
+          clientSecret,
+          scope,
+          [key]: value
+        }
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
+      {inputsConfig.map((input) => {
+        const { key, label, isSecret } = input;
+        return (
+          <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
+            <label className="block font-medium">{label}</label>
+            <div className="single-line-editor-wrapper">
+              <SingleLineEditor
+                value={oAuth[key] || ''}
+                theme={storedTheme}
+                onSave={handleSave}
+                onChange={(val) => handleChange(key, val)}
+                onRun={handleRun}
+                collection={collection}
+                isSecret={isSecret}
+              />
+            </div>
+          </div>
+        );
+      })}
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
+    </StyledWrapper>
+  );
+};
+
+export default OAuth2AuthorizationCode;

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/inputsConfig.js

@@ -0,0 +1,29 @@
+const inputsConfig = [
+  {
+    key: 'accessTokenUrl',
+    label: 'Access Token URL'
+  },
+  {
+    key: 'username',
+    label: 'Username'
+  },
+  {
+    key: 'password',
+    label: 'Password'
+  },
+  {
+    key: 'clientId',
+    label: 'Client ID'
+  },
+  {
+    key: 'clientSecret',
+    label: 'Client Secret',
+    isSecret: true
+  },
+  {
+    key: 'scope',
+    label: 'Scope'
+  }
+];
+
+export { inputsConfig };

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

@@ -1,33 +1,21 @@
 import React from 'react';
 import get from 'lodash/get';
 import StyledWrapper from './StyledWrapper';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import OAuth2AuthorizationCode from 'components/RequestPane/Auth/OAuth2/AuthorizationCode/index';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
-import { useDispatch } from 'react-redux';
-import OAuth2PasswordCredentials from 'components/RequestPane/Auth/OAuth2/PasswordCredentials/index';
-import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCredentials/index';
-import GrantTypeSelector from 'components/RequestPane/Auth/OAuth2/GrantTypeSelector/index';
-
-const GrantTypeComponentMap = ({collection }) => {
-  const dispatch = useDispatch();
-
-  const save = () => {
-    dispatch(saveCollectionRoot(collection.uid));
-  };
-
-  let request = collection.draft ? get(collection, 'draft.request', {}) : get(collection, 'root.request', {});
-  const grantType = get(request, 'auth.oauth2.grantType', {});
+import GrantTypeSelector from './GrantTypeSelector/index';
+import OAuth2PasswordCredentials from './PasswordCredentials/index';
+import OAuth2AuthorizationCode from './AuthorizationCode/index';
+import OAuth2ClientCredentials from './ClientCredentials/index';
 
+const grantTypeComponentMap = (grantType, collection) => {
   switch (grantType) {
     case 'password':
-      return <OAuth2PasswordCredentials save={save} request={request} updateAuth={updateCollectionAuth} collection={collection} />;
+      return <OAuth2PasswordCredentials collection={collection} />;
       break;
     case 'authorization_code':
-      return <OAuth2AuthorizationCode save={save} request={request} updateAuth={updateCollectionAuth} collection={collection} />;
+      return <OAuth2AuthorizationCode collection={collection} />;
       break;
     case 'client_credentials':
-      return <OAuth2ClientCredentials save={save} request={request} updateAuth={updateCollectionAuth} collection={collection} />;
+      return <OAuth2ClientCredentials collection={collection} />;
       break;
     default:
       return <div>TBD</div>;
@@ -36,12 +24,12 @@ const GrantTypeComponentMap = ({collection }) => {
 };
 
 const OAuth2 = ({ collection }) => {
-  let request = collection.draft ? get(collection, 'draft.request', {}) : get(collection, 'root.request', {});
+  const oAuth = get(collection, 'root.request.auth.oauth2', {});
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <GrantTypeSelector request={request} updateAuth={updateCollectionAuth} collection={collection} />
-      <GrantTypeComponentMap collection={collection} />
+      <GrantTypeSelector collection={collection} />
+      {grantTypeComponentMap(oAuth?.grantType, collection)}
     </StyledWrapper>
   );
 };

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

@@ -8,7 +8,9 @@ import { useState } from 'react';
 
 import StyledWrapper from './StyledWrapper';
 import { useRef } from 'react';
-import path from 'utils/common/path';
+import path from 'path';
+import slash from 'utils/common/slash';
+import { isWindowsOS } from 'utils/common/platform';
 
 const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
   const certFilePathInputRef = useRef();
@@ -25,10 +27,7 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
       passphrase: ''
     },
     validationSchema: Yup.object({
-      domain: Yup.string()
-        .required()
-        .trim()
-        .test('not-empty-after-trim', 'Domain is required', value => value && value.trim().length > 0),
+      domain: Yup.string().required(),
       type: Yup.string().required().oneOf(['cert', 'pfx']),
       certFilePath: Yup.string().when('type', {
         is: (type) => type == 'cert',
@@ -48,7 +47,7 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
       let relevantValues = {};
       if (values.type === 'cert') {
         relevantValues = {
-          domain: values.domain?.trim(),
+          domain: values.domain,
           type: values.type,
           certFilePath: values.certFilePath,
           keyFilePath: values.keyFilePath,
@@ -56,7 +55,7 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
         };
       } else {
         relevantValues = {
-          domain: values.domain?.trim(),
+          domain: values.domain,
           type: values.type,
           pfxFilePath: values.pfxFilePath,
           passphrase: values.passphrase
@@ -71,7 +70,12 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
   const getFile = (e) => {
     const filePath = window?.ipcRenderer?.getFilePath(e?.files?.[0]);
     if (filePath) {
-      let relativePath = path.relative(root, filePath);
+      let relativePath;
+      if (isWindowsOS()) {
+        relativePath = slash(path.win32.relative(root, filePath));
+      } else {
+        relativePath = path.posix.relative(root, filePath);
+      }
       formik.setFieldValue(e.name, relativePath);
     }
   };
@@ -105,23 +109,23 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
       <ul className="mt-4">
         {!clientCertConfig.length
           ? 'No client certificates added'
-          : clientCertConfig.map((clientCert, index) => (
-            <li key={`client-cert-${index}`} className="flex items-center available-certificates p-2 rounded-lg mb-2">
-              <div className="flex items-center w-full justify-between">
-                <div className="flex w-full items-center">
-                  <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
-                  {clientCert.domain}
+          : clientCertConfig.map((clientCert) => (
+              <li key={uuid()} className="flex items-center available-certificates p-2 rounded-lg mb-2">
+                <div className="flex items-center w-full justify-between">
+                  <div className="flex w-full items-center">
+                    <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
+                    {clientCert.domain}
+                  </div>
+                  <div className="flex w-full items-center">
+                    <IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
+                    {clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
+                  </div>
+                  <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
+                    <IconTrash size={18} strokeWidth={1.5} />
+                  </button>
                 </div>
-                <div className="flex w-full items-center">
-                  <IconCertificate className="mr-2 flex-shrink-0" size={18} strokeWidth={1.5} />
-                  {clientCert.type === 'cert' ? clientCert.certFilePath : clientCert.pfxFilePath}
-                </div>
-                <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
-                  <IconTrash size={18} strokeWidth={1.5} />
-                </button>
-              </div>
-            </li>
-          ))}
+              </li>
+            ))}
       </ul>
 
       <h1 className="font-semibold mt-8 mb-2">Add Client Certificate</h1>
@@ -130,20 +134,15 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
           <label className="settings-label" htmlFor="domain">
             Domain
           </label>
-          <div className="relative flex items-center">
-            <div className="absolute left-0 pl-2 text-gray-400 pointer-events-none flex items-center h-full">
-              https://
-            </div>
-            <input
-              id="domain"
-              type="text"
-              name="domain"
-              placeholder="example.org"
-              className="block textbox non-passphrase-input !pl-[60px]"
-              onChange={formik.handleChange}
-              value={formik.values.domain || ''}
-            />
-          </div>
+          <input
+            id="domain"
+            type="text"
+            name="domain"
+            placeholder="*.example.org"
+            className="block textbox non-passphrase-input"
+            onChange={formik.handleChange}
+            value={formik.values.domain || ''}
+          />
           {formik.touched.domain && formik.errors.domain ? (
             <div className="ml-1 text-red-500">{formik.errors.domain}</div>
           ) : null}
@@ -199,9 +198,9 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
                   <div className="flex flex-row gap-2 items-center">
                     <div
                       className="my-[3px] overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px]"
-                      title={path.basename(formik.values.certFilePath)}
+                      title={path.basename(slash(formik.values.certFilePath))}
                     >
-                      {path.basename(formik.values.certFilePath)}
+                      {path.basename(slash(formik.values.certFilePath))}
                     </div>
                     <IconTrash
                       size={18}
@@ -239,9 +238,9 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
                   <div className="flex flex-row gap-2 items-center">
                     <div
                       className="my-[3px] overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px]"
-                      title={path.basename(formik.values.keyFilePath)}
+                      title={path.basename(slash(formik.values.keyFilePath))}
                     >
-                      {path.basename(formik.values.keyFilePath)}
+                      {path.basename(slash(formik.values.keyFilePath))}
                     </div>
                     <IconTrash
                       size={18}
@@ -282,9 +281,9 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
                   <div className="flex flex-row gap-2 items-center">
                     <div
                       className="my-[3px] overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px]"
-                      title={path.basename(formik.values.pfxFilePath)}
+                      title={path.basename(slash(formik.values.pfxFilePath))}
                     >
-                      {path.basename(formik.values.pfxFilePath)}
+                      {path.basename(slash(formik.values.pfxFilePath))}
                     </div>
                     <IconTrash
                       size={18}

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

@@ -1,7 +1,11 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-
+  div.CodeMirror {
+    .CodeMirror-scroll {
+      padding-bottom: 0px;
+    }
+  }
   .editing-mode {
     cursor: pointer;
   }

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

@@ -119,6 +119,6 @@ This documentation supports Markdown formatting! You can use:
 - **Bold** and *italic* text
 - \`code blocks\` and syntax highlighting
 - Tables and lists
-- [Links](https://usebruno.com)
+- [Links](https://example.com)
 - And more!
 `;

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

@@ -1,21 +1,10 @@
-import React from "react";
+import React from 'react';
 import { getTotalRequestCountInCollection } from 'utils/collections/';
-import { IconFolder, IconWorld, IconApi, IconShare } from '@tabler/icons';
-import { areItemsLoading, getItemsLoadStats } from "utils/collections/index";
-import { useState } from "react";
-import ShareCollection from "components/ShareCollection/index";
+import { IconFolder, IconFileOff, IconWorld, IconApi } from '@tabler/icons';
 
 const Info = ({ collection }) => {
   const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
 
-  const isCollectionLoading = areItemsLoading(collection);
-  const { loading: itemsLoadingCount, total: totalItems } = getItemsLoadStats(collection);
-  const [showShareCollectionModal, toggleShowShareCollectionModal] = useState(false);
-  
-  const handleToggleShowShareCollectionModal = (value) => (e) => {
-    toggleShowShareCollectionModal(value);
-  }
-
   return (
     <div className="w-full flex flex-col h-fit">
       <div className="rounded-lg py-6">
@@ -53,30 +42,15 @@ const Info = ({ collection }) => {
             </div>
             <div className="ml-4">
               <div className="font-semibold text-sm">Requests</div>
-              <div className="mt-1 text-sm text-muted font-mono">
-                {
-                  isCollectionLoading? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
-                }
+              <div className="mt-1 text-sm text-muted">
+                {totalRequestsInCollection} request{totalRequestsInCollection !== 1 ? 's' : ''} in collection
               </div>
             </div>
           </div>
-
-          <div className="flex items-start group cursor-pointer" onClick={handleToggleShowShareCollectionModal(true)}>
-            <div className="flex-shrink-0 p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
-              <IconShare className="w-5 h-5 text-indigo-500" stroke={1.5} />
-            </div>
-            <div className="ml-4 h-full flex flex-col justify-start">
-              <div className="font-semibold text-sm h-fit my-auto">Share</div>
-              <div className="mt-1 text-sm group-hover:underline text-link">
-                Share Collection
-              </div>
-            </div>
-          </div>
-          {showShareCollectionModal && <ShareCollection collection={collection} onClose={handleToggleShowShareCollectionModal(false)} />}
         </div>
       </div>
     </div>
   );
 };
 
-export default Info;
+export default Info;

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

@@ -2,15 +2,8 @@ import React from 'react';
 import { flattenItems } from "utils/collections";
 import { IconAlertTriangle } from '@tabler/icons';
 import StyledWrapper from "./StyledWrapper";
-import { useDispatch, useSelector } from 'react-redux';
-import { isItemARequest, itemIsOpenedInTabs } from 'utils/tabs/index';
-import { getDefaultRequestPaneTab } from 'utils/collections/index';
-import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
-import { hideHomePage } from 'providers/ReduxStore/slices/app';
 
 const RequestsNotLoaded = ({ collection }) => {
-  const dispatch = useDispatch();
-  const tabs = useSelector((state) => state.tabs.tabs);
   const flattenedItems = flattenItems(collection.items);
   const itemsFailedLoading = flattenedItems?.filter(item => item?.partial && !item?.loading);
 
@@ -18,29 +11,6 @@ const RequestsNotLoaded = ({ collection }) => {
     return null;
   }
 
-  const handleRequestClick = (item) => e => {
-    e.preventDefault();
-    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;
-    }
-  }
-
   return (
     <StyledWrapper className="w-full card my-2">
       <div className="flex items-center gap-2 px-3 py-2 title bg-yellow-50 dark:bg-yellow-900/20">
@@ -61,7 +31,7 @@ const RequestsNotLoaded = ({ collection }) => {
         <tbody>
           {flattenedItems?.map((item, index) => (
             item?.partial && !item?.loading ? (
-              <tr key={index} className='cursor-pointer' onClick={handleRequestClick(item)}>
+              <tr key={index}>
                 <td className="py-1.5 px-3">
                   {item?.pathname?.split(`${collection?.pathname}/`)?.[1]}
                 </td>

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

@@ -104,15 +104,18 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
         <div className="mb-3 flex items-center">
           <label className="settings-label flex items-center" htmlFor="enabled">
             Config
-            <InfoTip infotipId="request-var">
+            <InfoTip
+              text={`
               <div>
                 <ul>
-                  <li><span style={{width: "50px", display: "inline-block"}}>global</span> - use global proxy config</li>
-                  <li><span style={{width: "50px", display: "inline-block"}}>enabled</span> - use collection proxy config</li>
-                  <li><span style={{width: "50px", display: "inline-block"}}>disable</span> - disable proxy</li>
+                  <li><span style="width: 50px;display:inline-block;">global</span> - use global proxy config</li>
+                  <li><span style="width: 50px;display:inline-block;">enabled</span> - use collection proxy config</li>
+                  <li><span style="width: 50px;display:inline-block;">disable</span> - disable proxy</li>
                 </ul>
               </div>
-            </InfoTip>
+            `}
+              infotipId="request-var"
+            />
           </label>
           <div className="flex items-center">
             <label className="flex items-center">

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

@@ -89,7 +89,7 @@ const VarsTable = ({ collection, vars, varType }) => {
               <td>
                 <div className="flex items-center">
                   <span>Expr</span>
-                  <InfoTip content="You can write any valid JS Template Literal here" infotipId="request-var" />
+                  <InfoTip text="You can write any valid JS Template Literal here" infotipId="request-var" />
                 </div>
               </td>
             )}

packages/bruno-app/src/components/Cookies/ModifyCookieModal/StyledWrapper.js

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

packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js

@@ -1,371 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import Modal from 'components/Modal/index';
-import { modifyCookie, addCookie, getParsedCookie, createCookieString } from 'providers/ReduxStore/slices/app';
-import { useDispatch } from 'react-redux';
-import toast from 'react-hot-toast';
-import ToggleSwitch from 'components/ToggleSwitch/index';
-import { IconInfoCircle } from '@tabler/icons';
-import moment from 'moment';
-import 'moment-timezone';
-import { Tooltip } from 'react-tooltip';
-import { isEmpty } from 'lodash';
-
-const removeEmptyValues = (obj) => {
-  return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value !== null && value !== undefined));
-};
-
-const ModifyCookieModal = ({ onClose, domain, cookie }) => {
-  const dispatch = useDispatch();
-  const [isRawMode, setIsRawMode] = useState(false);
-  const [cookieString, setCookieString] = useState('');
-  const initialParseRef = useRef(false);
-
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      ...(cookie ? cookie : {}),
-      key: cookie?.key || '',
-      value: cookie?.value || '',
-      path: cookie?.path || '/',
-      domain: cookie?.domain || domain || '',
-      expires: cookie?.expires ? moment(cookie.expires).format(moment.HTML5_FMT.DATETIME_LOCAL) : '',
-      secure: cookie?.secure || false,
-      httpOnly: cookie?.httpOnly || false
-    },
-    validationSchema: Yup.object({
-      key: Yup.string().required('Key is required'),
-      value: Yup.string().required('Value is required'),
-      domain: Yup.string().required('Domain is required'),
-      secure: Yup.boolean(),
-      httpOnly: Yup.boolean(),
-      expires: Yup.mixed()
-        .nullable()
-        .transform((value) => {
-          if (!value || value === '') return null;
-          return moment(value).isValid() ? moment(value).toDate() : null;
-        })
-        .test('future-date', 'Expiration date must be in the future', (value) => {
-          if (!value) return true;
-          return moment(value).isAfter(moment());
-        })
-    }),
-    onSubmit: (values) => {
-      const modValues = removeEmptyValues({
-        ...(cookie ? cookie : {}),
-        ...values,
-        expires: values.expires
-          ? moment(values.expires).isValid()
-            ? moment(values.expires).toDate()
-            : Infinity
-          : Infinity
-      });
-
-      handleCookieDispatch(cookie, domain, modValues, onClose);
-    }
-  });
-
-  const title = cookie ? 'Modify Cookie' : 'Add Cookie';
-
-  const handleCookieDispatch = (cookie, domain, modValues, onClose) => {
-    if (cookie) {
-      dispatch(modifyCookie(domain, cookie, modValues))
-        .then(() => {
-          toast.success('Cookie modified successfully');
-          onClose();
-        })
-        .catch((err) => {
-          toast.error('An error occurred while modifying cookie');
-          console.error(err);
-        });
-    } else {
-      dispatch(addCookie(domain, modValues))
-        .then(() => {
-          toast.success('Cookie added successfully');
-          onClose();
-        })
-        .catch((err) => {
-          toast.error('An error occurred while adding cookie');
-          console.error(err);
-        });
-    }
-  };
-
-  const onSubmit = async () => {
-    try {
-      if (isRawMode) {
-        const cookieObj = await dispatch(getParsedCookie(cookieString));
-
-        const modifiedCookie = removeEmptyValues({
-          ...formik.values,
-          ...cookieObj,
-          expires: cookieObj?.expires
-            ? moment(cookieObj.expires).isValid()
-              ? moment(cookieObj.expires).toDate()
-              : Infinity
-            : Infinity
-        });
-
-        if (!cookieObj) {
-          toast.error('Please enter a valid cookie string');
-          return;
-        }
-
-        const validationErrors = await formik.setValues(
-          (values) => ({
-            ...values,
-            ...modifiedCookie,
-            expires:
-              modifiedCookie?.expires && moment(modifiedCookie.expires).isValid()
-                ? moment(new Date(modifiedCookie.expires)).format(moment.HTML5_FMT.DATETIME_LOCAL)
-                : ''
-          }),
-          true
-        );
-
-        if (!isEmpty(validationErrors)) {
-          toast.error(Object.values(validationErrors).join("\n"));
-          return;
-        }
-
-        handleCookieDispatch(cookie, domain, modifiedCookie, onClose);
-      } else {
-        formik.handleSubmit();
-      }
-    } catch (error) {
-      const errMsg = error.message || 'An error occurred while parsing cookie string';
-      toast.error(errMsg);
-    }
-  };
-
-  useEffect(() => {
-    if (!isRawMode) return;
-    const loadCookieString = async () => {
-      if (cookie) {
-        const str = await dispatch(createCookieString(cookie));
-        setCookieString(str);
-      }
-      return '';
-    };
-
-    loadCookieString();
-  }, [cookie, isRawMode]);
-
-  // create the cookieString when raw mode is enabled
-  useEffect(() => {
-    if (isRawMode) {
-      const createCookieStr = async () => {
-        const str = await dispatch(createCookieString(formik.values));
-        setCookieString(str);
-      };
-
-      createCookieStr();
-    }
-  }, [isRawMode, formik.values]);
-
-  useEffect(() => {
-    // Reset the ref when raw mode changes
-    if (isRawMode) {
-      initialParseRef.current = false;
-      return;
-    }
-
-    const setParsedCookie = async () => {
-      if (!isRawMode && cookieString && !initialParseRef.current) {
-        initialParseRef.current = true;
-
-        try {
-          const cookieObj = await dispatch(getParsedCookie(cookieString));
-
-          if (!cookieObj) return;
-
-          formik.setValues(
-            (values) => ({
-              ...values,
-              ...removeEmptyValues(cookieObj),
-              expires:
-                cookieObj?.expires && moment(cookieObj.expires).isValid()
-                  ? moment(new Date(cookieObj.expires)).format(moment.HTML5_FMT.DATETIME_LOCAL)
-                  : ''
-            }),
-            true
-          );
-        } catch (error) {
-          const errMsg = error.message || 'An error occurred while parsing cookie string';
-          toast.error(errMsg);
-        }
-      }
-    };
-
-    setParsedCookie();
-  }, [isRawMode, cookieString, dispatch, formik]);
-
-  return (
-    <Modal
-      size="lg"
-      title={title}
-      onClose={onClose}
-      handleCancel={onClose}
-      handleConfirm={onSubmit}
-      customHeader={
-        <div className="flex items-center justify-between w-full">
-          <h2 className="text-sm font-bold">{title}</h2>
-          <div className="ml-auto flex items-center ">
-            <ToggleSwitch
-              className="mr-2"
-              isOn={isRawMode}
-              size="2xs"
-              handleToggle={(e) => {
-                setIsRawMode(e.target.checked);
-              }}
-            />
-            <label className="text-sm font-normal mr-4 normal-case">Edit Raw</label>
-          </div>
-        </div>
-      }
-    >
-      <form onSubmit={(e) => e.preventDefault()} className="px-2">
-        {isRawMode ? (
-          <div>
-            <div className="flex items-center gap-2 mb-1">
-              <label className="block text-sm">Set-Cookie String</label>
-              <IconInfoCircle id="cookie-raw-info" size={16} strokeWidth={1.5} className="text-gray-400" />
-              <Tooltip
-                anchorId="cookie-raw-info"
-                className="tooltip-mod"
-                html="Key, Path, and Domain are immutable properties and cannot be modified for existing cookies"
-              />
-            </div>
-            <textarea
-              value={cookieString}
-              onChange={(e) => setCookieString(e.target.value)}
-              className="block textbox w-full h-24"
-              placeholder="key=value; key2=value2"
-            />
-          </div>
-        ) : (
-          <div className="space-y-4">
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm mb-1">
-                  Domain<span className="text-red-600">*</span>{' '}
-                </label>
-                <input
-                  type="text"
-                  name="domain"
-                  // Auto-focus if its add-new i.e. when domain prop is empty
-                  autoFocus={!domain && !formik.values.domain}
-                  value={formik.values.domain}
-                  onChange={formik.handleChange}
-                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
-                  disabled={!!cookie}
-                />
-                {formik.touched.domain && formik.errors.domain && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.domain}</div>
-                )}
-              </div>
-              <div>
-                <label className="block text-sm mb-1">Path</label>
-                <input
-                  type="text"
-                  name="path"
-                  value={formik.values.path}
-                  onChange={formik.handleChange}
-                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
-                  disabled={!!cookie}
-                />
-                {formik.touched.path && formik.errors.path && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.path}</div>
-                )}
-              </div>
-              <div>
-                <label className="block text-sm mb-1">
-                  Key<span className="text-red-600">*</span>{' '}
-                </label>
-                <input
-                  type="text"
-                  name="key"
-                  // Auto focus when add-for-domain i.e. if domain is already prefilled
-                  autoFocus={!!domain && !formik.values.key}
-                  value={formik.values.key}
-                  onChange={formik.handleChange}
-                  className="block textbox non-passphrase-input w-full disabled:opacity-50"
-                  disabled={!!cookie}
-                />
-                {formik.touched.key && formik.errors.key && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.key}</div>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-sm mb-1">
-                  Value<span className="text-red-600">*</span>{' '}
-                </label>
-                <input
-                  type="text"
-                  name="value"
-                  // Auto-focus when its in edit mode i.e. cookie prop is present
-                  autoFocus={!!cookie}
-                  value={formik.values.value}
-                  onChange={formik.handleChange}
-                  className="block textbox non-passphrase-input w-full"
-                />
-                {formik.touched.value && formik.errors.value && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.value}</div>
-                )}
-              </div>
-            </div>
-
-            {/* Date Picker */}
-            <div className="w-full flex items-end">
-              <div>
-                <label className="block text-sm mb-1">Expiration ({moment.tz.guess()})</label>
-                <input
-                  type="datetime-local"
-                  name="expires"
-                  value={formik.values.expires}
-                  onChange={(e) => {
-                    formik.handleChange(e);
-                  }}
-                  className="block textbox non-passphrase-input w-full"
-                  min={moment().format(moment.HTML5_FMT.DATETIME_LOCAL)}
-                />
-                {formik.touched.expires && formik.errors.expires && (
-                  <div className="text-red-500 text-sm mt-1">{formik.errors.expires}</div>
-                )}
-              </div>
-
-              {/* Checkboxes */}
-              <div className="flex space-x-4 ml-auto">
-                <label className="flex items-center">
-                  <input
-                    type="checkbox"
-                    name="secure"
-                    checked={formik.values.secure}
-                    onChange={formik.handleChange}
-                    className="mr-2"
-                  />
-                  <span className="text-sm">Secure</span>
-                </label>
-
-                <label className="flex items-center">
-                  <input
-                    type="checkbox"
-                    name="httpOnly"
-                    checked={formik.values.httpOnly}
-                    onChange={formik.handleChange}
-                    className="mr-2"
-                  />
-                  <span className="text-sm">HTTP Only</span>
-                </label>
-              </div>
-            </div>
-          </div>
-        )}
-      </form>
-    </Modal>
-  );
-};
-
-export default ModifyCookieModal;

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

@@ -11,65 +11,6 @@ const Wrapper = styled.div`
       user-select: none;
     }
   }
-
-  &.header {
-    input {
-      padding: 0.3rem 0.5rem;
-    }
-  }
-
-  .textbox {
-    line-height: 1.42857143;
-    border: 1px solid #ccc;
-    padding: 0.45rem;
-    box-shadow: none;
-    border-radius: 0px;
-    outline: none;
-    box-shadow: none;
-    transition: border-color ease-in-out 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;
-    }
-  }
-
-  .scroll-box {
-    max-height: 500px;
-    overflow-y: auto;
-
-    background:
-    /* Shadow Cover TOP */
-    linear-gradient(
-      ${(props) => props.theme.modal.body.bg} 20%,
-      rgba(255, 255, 255, 0)
-    ) center top,
-    
-    /* Shadow Cover BOTTOM */
-    linear-gradient(
-      rgba(255, 255, 255, 0),
-      ${(props) => props.theme.modal.body.bg} 80%
-    ) center bottom,
-    
-    /* Shadow TOP */
-    linear-gradient(
-      rgba(0, 0, 0, 0.1) 0%,
-      rgba(0, 0, 0, 0) 100%
-    ) center top,
-    
-    /* Shadow BOTTOM */
-    linear-gradient(
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0.1) 100%
-    ) center bottom;
-
-    background-repeat: no-repeat;
-    background-size: 100% 30px, 100% 30px, 100% 10px, 100% 10px;
-    background-attachment: local, local, scroll, scroll;
-  }
 `;
 
 export default Wrapper;

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

@@ -1,331 +1,53 @@
-import React, { useState, useRef, useEffect, useMemo } from 'react';
+import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Modal from 'components/Modal';
-import Accordion from 'components/Accordion/index';
-import { IconTrash, IconEdit, IconCirclePlus, IconCookieOff, IconAlertTriangle, IconSearch } from '@tabler/icons';
-import { deleteCookiesForDomain, deleteCookie } from 'providers/ReduxStore/slices/app';
+import { IconTrash } from '@tabler/icons';
+import { deleteCookiesForDomain } from 'providers/ReduxStore/slices/app';
 import toast from 'react-hot-toast';
-import ModifyCookieModal from 'components/Cookies/ModifyCookieModal/index';
+
 import StyledWrapper from './StyledWrapper';
-import moment from 'moment';
-import { Tooltip } from 'react-tooltip';
-
-const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (
-  <Modal onClose={onClose} handleCancel={onClose} title="Clear Domain Cookies" hideFooter={true}>
-    <div className="flex items-center font-normal">
-      <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-      <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
-    </div>
-    <div className="font-normal mt-4">
-      Are you sure you want to clear all cookies for the domain {domain}?
-    </div>
-
-    <div className="flex justify-between mt-6">
-      <div>
-        <button className="btn btn-sm btn-close" onClick={onClose}>
-          Close
-        </button>
-      </div>
-      <div>
-        <button className="btn btn-sm btn-danger" onClick={onClear}>
-          Clear All
-        </button>
-      </div>
-    </div>
-  </Modal>
-);
-
-const DeleteCookieModal = ({ onClose, cookieName, onDelete }) => (
-  <Modal onClose={onClose} handleCancel={onClose} title="Delete Cookie" hideFooter={true}>
-    <div className="flex items-center font-normal">
-      <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
-      <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
-    </div>
-    <div className="font-normal mt-4">
-      Are you sure you want to delete the cookie {cookieName}?
-    </div>
-
-    <div className="flex justify-between mt-6">
-      <div>
-        <button className="btn btn-sm btn-close" onClick={onClose}>
-          Close
-        </button>
-      </div>
-      <div>
-        <button className="btn btn-sm btn-danger" onClick={onDelete}>
-          Delete
-        </button>
-      </div>
-    </div>
-  </Modal>
-);
 
 const CollectionProperties = ({ onClose }) => {
   const dispatch = useDispatch();
   const cookies = useSelector((state) => state.app.cookies) || [];
-  const [isModifyCookieModalOpen, setIsModifyCookieModalOpen] = useState(false);
-  const [currentDomain, setCurrentDomain] = useState(null);
-  const [cookieToEdit, setCookieToEdit] = useState(null);
 
-  const [domainToClear, setDomainToClear] = useState(null);
-  const [cookieToDelete, setCookieToDelete] = useState(null);
-  const [searchText, setSearchText] = useState(null);
-
-  const handleAddCookie = (domain) => {
-    if(domain) setCurrentDomain(domain);
-    setIsModifyCookieModalOpen(true);
-  };
-
-  const handleEditCookie = (domain, cookie) => {
-    setCurrentDomain(domain);
-    setCookieToEdit(cookie);
-    setIsModifyCookieModalOpen(true);
-  };
-
-  const handleClearDomainCookies = (domain) => {
-    setDomainToClear(domain);
-  };
-
-  const clearDomainCookiesAction = () => {
-    dispatch(deleteCookiesForDomain(domainToClear))
+  const handleDeleteDomain = (domain) => {
+    dispatch(deleteCookiesForDomain(domain))
       .then(() => {
-        toast.success('Domain cookies cleared successfully');
+        toast.success('Domain deleted successfully');
       })
-      .catch((err) => console.log(err) && toast.error('Failed to clear domain cookies'));
-    setDomainToClear(null);
+      .catch((err) => console.log(err) && toast.error('Failed to delete domain'));
   };
 
-  const handleDeleteCookie = (domain, path, key) => {
-    setCookieToDelete({ key, domain, path });
-  };
-
-  const deleteCookieAction = () => {
-    if (cookieToDelete) {
-      const { domain, path, key } = cookieToDelete;
-      dispatch(deleteCookie(domain, path, key))
-        .then(() => {
-          toast.success('Cookie deleted successfully');
-        })
-        .catch((err) => console.log(err) && toast.error('Failed to delete cookie'));
-    }
-    setCookieToDelete(null);
-  };
-
-  const filteredCookies = useMemo(() => {
-    if (!searchText) return cookies;
-
-    return cookies.filter((cookie) =>
-      cookie.domain.toLowerCase().includes(searchText.toLowerCase())
-    );
-  }, [cookies, searchText]);
-
-  const shouldShowHeader = cookies && cookies.length > 0;
-
   return (
-    <>
-      <Modal
-        size="xl"
-        title="Cookies"
-        hideFooter={true}
-        handleCancel={onClose}
-        customHeader={shouldShowHeader ? (
-          <StyledWrapper className="header flex items-center justify-between w-full">
-            <h2 className="text-xs font-medium">Cookies</h2>
-            <input
-              type="search"
-              placeholder="Search by domain"
-              value={searchText || ''}
-              onChange={(e) => setSearchText(e.target.value)}
-              className="block textbox non-passphrase-input ml-auto font-normal"
-            />
-            <button
-              type="submit"
-              className="submit btn btn-sm btn-secondary flex items-center gap-1 mx-4 font-medium"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleAddCookie();
-              }}
-            >
-              <IconCirclePlus strokeWidth={1.5} size={16} />
-              <span>Add Cookie</span>
-            </button>
-          </StyledWrapper>
-        ) : null}
-      >
-        <StyledWrapper>
-          {!cookies || !cookies.length ? (
-            // No cookies found
-            <div className="flex items-center justify-center flex-col">
-              <IconCookieOff size={48} strokeWidth={1.5} className="text-gray-500" />
-              <h2 className="text-lg font-semibold mt-4">No cookies found</h2>
-              <p className="text-gray-500 mt-2">Add cookies to get started</p>
-              <button
-                type="submit"
-                className="submit btn btn-sm btn-secondary flex items-center gap-1 mt-8"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleAddCookie();
-                }}
-              >
-                <IconCirclePlus strokeWidth={1.5} size={16} />
-                <span>Add Cookie</span>
-              </button>
-            </div>
-          ) : cookies.length && !filteredCookies.length ? (
-            // No search results
-            <div className="flex items-center justify-center flex-col">
-              <IconSearch size={48} />
-              <h2 className="text-lg font-semibold mt-4">No search results</h2>
-              <p className="text-gray-500 mt-2">Try a different search term</p>
-            </div>
-          ) : (
-            // Show cookies list
-            <div className="scroll-box">
-              <Accordion defaultIndex={0}>
-                {filteredCookies.map((domainWithCookies, i) => (
-                  <Accordion.Item key={i} index={i}>
-                    <Accordion.Header index={i} className="flex items-center">
-                      <div className="flex items-center">
-                        <span>{domainWithCookies.domain}</span>
-                        <span className="ml-2 text-xs dark:text-gray-300 text-gray-500">
-                          ({domainWithCookies.cookies.length}{' '}
-                          {domainWithCookies.cookies.length === 1 ? 'cookie' : 'cookies'})
-                        </span>
-                        <div className="ml-auto flex items-center gap-2">
-                          <button
-                            type="submit"
-                            className="flex items-center gap-1 text-gray-500 hover:text-gray-950 dark:text-white dark:hover:text-gray-300"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleAddCookie(domainWithCookies.domain);
-                            }}
-                          >
-                            <IconCirclePlus strokeWidth={1.5} size={16} />
-                          </button>
-                          <button
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleClearDomainCookies(domainWithCookies.domain);
-                            }}
-                            className="text-gray-950 dark:text-white dark:hover:hover:text-red-600 hover:text-red-600  mr-2"
-                          >
-                            <IconTrash strokeWidth={1.5} size={16} />
-                          </button>
-                        </div>
-                      </div>
-                    </Accordion.Header>
-                    <Accordion.Content index={i}>
-                      <div className="flex items-center justify-between">
-                        <table className="w-full">
-                          <thead>
-                            <tr className="text-left border-b border-gray-200 dark:border-neutral-600 text-gray-700 dark:text-gray-300">
-                              <th className="py-2 px-4 font-semibold w-32">Name</th>
-                              <th className="py-2 px-4 font-semibold w-52">Value</th>
-                              <th className="py-2 px-4 font-semibold">Path</th>
-                              <th className="py-2 px-4 font-semibold">Expires</th>
-                              <th className="py-2 px-4 font-semibold text-center">Secure</th>
-                              <th className="py-2 px-4 font-semibold text-center">HTTP Only</th>
-                              <th className="py-2 px-4 font-semibold text-right w-24">Actions</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {domainWithCookies.cookies.map((cookie) => (
-                              <tr key={cookie.key} className="border-b border-gray-200 dark:border-neutral-600 last:border-none">
-                                <td className="py-2 px-4 truncate">
-                                  <span id={`cookie-key-${cookie.key}`}>{cookie.key}</span>
-                                  <Tooltip
-                                    anchorId={`cookie-key-${cookie.key}`}
-                                    className="tooltip-mod"
-                                    html={cookie.key}
-                                  />
-                                </td>
-                                <td className="py-2 px-4 truncate">
-                                  <span id={`cookie-value-${cookie.key}`}>{cookie.value}</span>
-                                  <Tooltip
-                                    anchorId={`cookie-value-${cookie.key}`}
-                                    className="tooltip-mod"
-                                    html={cookie.value}
-                                  />
-                                </td>
-                                <td className="py-2 px-4 truncate">{cookie.path || '/'}</td>
-                                <td className="py-2 px-4 truncate">
-                                  <span id={`cookie-expires-${cookie.key}`}>
-                                    {cookie.expires && moment(cookie.expires).isValid()
-                                      ? new Date(cookie.expires).toLocaleString()
-                                      : 'Session'}
-                                  </span>
-                                  {cookie.expires && moment(cookie.expires).isValid() && (
-                                    <Tooltip
-                                      anchorId={`cookie-expires-${cookie.key}`}
-                                      className="tooltip-mod"
-                                      html={new Date(cookie.expires).toLocaleString()}
-                                    />
-                                  )}
-                                </td>
-                                <td className="py-2 px-4 text-center">{cookie.secure ? '✓' : ''}</td>
-                                <td className="py-2 px-4 text-center">{cookie.httpOnly ? '✓' : ''}</td>
-                                <td className="py-2 px-4">
-                                  <div className="flex items-center justify-end gap-2">
-                                    <button
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleEditCookie(domainWithCookies.domain, cookie);
-                                      }}
-                                      className="text-gray-700  hover:text-gray-950
-                                    dark:text-white dark:hover:text-gray-300"
-                                    >
-                                      <IconEdit strokeWidth={1.5} size={16} />
-                                    </button>
-                                    <button
-                                      onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleDeleteCookie(domainWithCookies.domain, cookie.path, cookie.key);
-                                      }}
-                                      className="text-gray-950 dark:text-white dark:hover:hover:text-red-600  hover:text-red-600"
-                                    >
-                                      <IconTrash strokeWidth={1.5} size={16} />
-                                    </button>
-                                  </div>
-                                </td>
-                              </tr>
-                            ))}
-                          </tbody>
-                        </table>
-                      </div>
-                    </Accordion.Content>
-                  </Accordion.Item>
-                ))}
-              </Accordion>
-            </div>
-          )}
-        </StyledWrapper>
-      </Modal>
-      {isModifyCookieModalOpen && (
-        <ModifyCookieModal
-          onClose={() => {
-            setCookieToEdit(null);
-            setCurrentDomain(null);
-            setIsModifyCookieModalOpen(false);
-          }}
-          domain={currentDomain}
-          cookie={cookieToEdit}
-        />
-      )}
-      {domainToClear ? (
-        <ClearDomainCookiesModal
-          onClose={() => setDomainToClear(null)}
-          domain={domainToClear}
-          onClear={clearDomainCookiesAction}
-        />
-      ) : null}
-      {cookieToDelete ? (
-        <DeleteCookieModal
-          onClose={() => setCookieToDelete(null)}
-          cookieName={cookieToDelete.key}
-          onDelete={deleteCookieAction}
-        />
-      ) : null}
-    </>
+    <Modal size="md" title="Cookies" hideFooter={true} handleCancel={onClose}>
+      <StyledWrapper>
+        <table className="w-full border-collapse" style={{ marginTop: '-1rem' }}>
+          <thead>
+            <tr>
+              <th className="py-2 px-2 text-left">Domain</th>
+              <th className="py-2 px-2 text-left">Cookie</th>
+              <th className="py-2 px-2 text-center" style={{ width: 80 }}>
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {cookies.map((cookie) => (
+              <tr key={cookie.domain}>
+                <td className="py-2 px-2">{cookie.domain}</td>
+                <td className="py-2 px-2 break-all">{cookie.cookieString}</td>
+                <td className="text-center">
+                  <button tabIndex="-1" onClick={() => handleDeleteDomain(cookie.domain)}>
+                    <IconTrash strokeWidth={1.5} size={20} />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </StyledWrapper>
+    </Modal>
   );
 };
 

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

@@ -6,7 +6,6 @@ import * as Yup from 'yup';
 import { useDispatch } from 'react-redux';
 import Portal from 'components/Portal';
 import Modal from 'components/Modal';
-import { validateName, validateNameError } from 'utils/common/regex';
 
 const CreateEnvironment = ({ collection, onClose }) => {
   const dispatch = useDispatch();
@@ -24,11 +23,7 @@ const CreateEnvironment = ({ collection, onClose }) => {
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'Must be at least 1 character')
-        .max(255, 'Must be 255 characters or less')
-        .test('is-valid-filename', function(value) {
-          const isValid = validateName(value);
-          return isValid ? true : this.createError({ message: validateNameError(value) });
-        })
+        .max(50, 'Must be 50 characters or less')
         .required('Name is required')
         .test('duplicate-name', 'Environment already exists', validateEnvironmentName)
     }),

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

@@ -6,7 +6,6 @@ import { useFormik } from 'formik';
 import { renameEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import * as Yup from 'yup';
 import { useDispatch } from 'react-redux';
-import { validateName, validateNameError } from 'utils/common/regex';
 
 const RenameEnvironment = ({ onClose, environment, collection }) => {
   const dispatch = useDispatch();
@@ -19,11 +18,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(255, 'Must be 255 characters or less')
-        .test('is-valid-filename', function(value) {
-          const isValid = validateName(value);
-          return isValid ? true : this.createError({ message: validateNameError(value) });
-        })
+        .max(50, 'must be 50 characters or less')
         .required('name is required')
     }),
     onSubmit: (values) => {

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

@@ -1,13 +1,15 @@
 import React from 'react';
-import path from 'utils/common/path';
+import path from 'path';
 import { useDispatch } from 'react-redux';
 import { browseFiles } from 'providers/ReduxStore/slices/collections/actions';
 import { IconX } from '@tabler/icons';
 import { isWindowsOS } from 'utils/common/platform';
+import slash from 'utils/common/slash';
 
-const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = false }) => {
+const FilePickerEditor = ({ value, onChange, collection }) => {
+  value = value || [];
   const dispatch = useDispatch();
-  const filenames = (isSingleFilePicker ? [value] : value || [])
+  const filenames = value
     .filter((v) => v != null && v != '')
     .map((v) => {
       const separator = isWindowsOS() ? '\\' : '/';
@@ -18,7 +20,7 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
   const title = filenames.map((v) => `- ${v}`).join('\n');
 
   const browse = () => {
-    dispatch(browseFiles([], [!isSingleFilePicker ? "multiSelections": ""]))
+    dispatch(browseFiles())
       .then((filePaths) => {
         // If file is in the collection's directory, then we use relative path
         // Otherwise, we use the absolute path
@@ -26,13 +28,13 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
           const collectionDir = collection.pathname;
 
           if (filePath.startsWith(collectionDir)) {
-            return path.relative(collectionDir, filePath);
+            return path.relative(slash(collectionDir), slash(filePath));
           }
 
           return filePath;
         });
 
-        onChange(isSingleFilePicker ? filePaths[0] : filePaths);
+        onChange(filePaths);
       })
       .catch((error) => {
         console.error(error);
@@ -40,14 +42,14 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
   };
 
   const clear = () => {
-    onChange(isSingleFilePicker ? '' : []);
+    onChange([]);
   };
 
   const renderButtonText = (filenames) => {
     if (filenames.length == 1) {
       return filenames[0];
     }
-    return filenames.length + ' file(s) selected';
+    return filenames.length + ' files selected';
   };
 
   return filenames.length > 0 ? (
@@ -64,9 +66,9 @@ const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = fa
     </div>
   ) : (
     <button className="btn btn-secondary px-1" style={{ width: '100%' }} onClick={browse}>
-      {isSingleFilePicker ? 'Select File' : 'Select Files'}
+      Select Files
     </button>
   );
 };
 
-export default FilePickerEditor;
+export default FilePickerEditor;

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

@@ -1,86 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import StyledWrapper from './StyledWrapper';
-import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
-import OAuth2AuthorizationCode from 'components/RequestPane/Auth/OAuth2/AuthorizationCode/index';
-import { updateFolderAuth } from 'providers/ReduxStore/slices/collections';
-import { useDispatch } from 'react-redux';
-import OAuth2PasswordCredentials from 'components/RequestPane/Auth/OAuth2/PasswordCredentials/index';
-import OAuth2ClientCredentials from 'components/RequestPane/Auth/OAuth2/ClientCredentials/index';
-import GrantTypeSelector from 'components/RequestPane/Auth/OAuth2/GrantTypeSelector/index';
-import AuthMode from '../AuthMode';
-
-const GrantTypeComponentMap = ({ collection, folder }) => {
-  const dispatch = useDispatch();
-
-  const save = () => {
-    dispatch(saveFolderRoot(collection.uid, folder.uid));
-  };
-
-  let request = get(folder, 'root.request', {});
-  const grantType = get(request, 'auth.oauth2.grantType', 'authorization_code');
-
-  switch (grantType) {
-    case 'password':
-      return <OAuth2PasswordCredentials save={save} item={folder} request={request} updateAuth={updateFolderAuth} collection={collection} folder={folder} />;
-    case 'authorization_code':
-      return <OAuth2AuthorizationCode save={save} item={folder} request={request} updateAuth={updateFolderAuth} collection={collection} folder={folder} />;
-    case 'client_credentials':
-      return <OAuth2ClientCredentials save={save} item={folder} request={request} updateAuth={updateFolderAuth} collection={collection} folder={folder} />;
-    default:
-      return <div>TBD</div>;
-  }
-};
-
-const Auth = ({ collection, folder }) => {
-  const dispatch = useDispatch();
-  let request = get(folder, 'root.request', {});
-  const authMode = get(folder, 'root.request.auth.mode');
-
-  const handleSave = () => {
-    dispatch(saveFolderRoot(collection.uid, folder.uid));
-  };
-
-  const getAuthView = () => {
-    switch (authMode) {
-      case 'oauth2': {
-        return (
-          <>
-            <GrantTypeSelector
-              request={request} 
-              updateAuth={updateFolderAuth} 
-              collection={collection}
-              item={folder}
-            />
-            <GrantTypeComponentMap collection={collection} folder={folder} />
-          </>
-        );
-      }
-      case 'none': {
-        return null;
-      }
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <StyledWrapper className="w-full">
-      <div className="text-xs mb-4 text-muted">
-        Configures authentication for the entire folder. This applies to all requests using the{' '}
-        <span className="font-medium">Inherit</span> option in the <span className="font-medium">Auth</span> tab.
-      </div>
-      <div className="flex flex-grow justify-start items-center mb-4">
-        <AuthMode collection={collection} folder={folder} />
-      </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/FolderSettings/AuthMode/StyledWrapper.js

@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .auth-mode-selector {
-    border: 1px solid ${({ theme }) => theme.colors.border};
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 0.8125rem;
-  }
-
-  .auth-mode-label {
-    color: ${({ theme }) => theme.colors.text};
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/FolderSettings/AuthMode/index.js

@@ -1,62 +0,0 @@
-import React, { useRef, forwardRef } from 'react';
-import get from 'lodash/get';
-import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
-import { useDispatch } from 'react-redux';
-import { updateFolderAuthMode } from 'providers/ReduxStore/slices/collections';
-import { humanizeRequestAuthMode } from 'utils/collections';
-import StyledWrapper from './StyledWrapper';
-
-const AuthMode = ({ collection, folder }) => {
-  const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const authMode = get(folder, '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(
-      updateFolderAuthMode({
-        mode: value,
-        collectionUid: collection.uid,
-        folderUid: folder.uid
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="inline-flex items-center cursor-pointer">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">      
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('oauth2');
-            }}
-          >
-            OAuth 2.0
-          </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/FolderSettings/Vars/VarsTable/index.js

@@ -88,7 +88,7 @@ const VarsTable = ({ folder, collection, vars, varType }) => {
               <td>
                 <div className="flex items-center">
                   <span>Expr</span>
-                  <InfoTip content="You can write any valid JS expression here" infotipId="response-var" />
+                  <InfoTip text="You can write any valid JS expression here" infotipId="response-var" />
                 </div>
               </td>
             )}

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

@@ -8,9 +8,7 @@ import Tests from './Tests';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars';
 import Documentation from './Documentation';
-import Auth from './Auth';
 import DotIcon from 'components/Icons/Dot';
-import get from 'lodash/get';
 
 const ContentIndicator = () => {
   return (
@@ -39,9 +37,6 @@ const FolderSettings = ({ collection, folder }) => {
   const responseVars = folderRoot?.request?.vars?.res || [];
   const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
 
-  const auth = get(folderRoot, 'request.auth.mode');
-  const hasAuth = auth && auth !== 'none';
-
   const setTab = (tab) => {
     dispatch(
       updatedFolderSettingsSelectedTab({
@@ -66,9 +61,6 @@ const FolderSettings = ({ collection, folder }) => {
       case 'vars': {
         return <Vars collection={collection} folder={folder} />;
       }
-      case 'auth': {
-        return <Auth collection={collection} folder={folder} />;
-      }
       case 'docs': {
         return <Documentation collection={collection} folder={folder} />;
       }
@@ -101,10 +93,6 @@ const FolderSettings = ({ collection, folder }) => {
             Vars
             {activeVarsCount > 0 && <sup className="ml-1 font-medium">{activeVarsCount}</sup>}
           </div>
-          <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
-            Auth
-            {hasAuth && <ContentIndicator />}
-          </div>
           <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
             Docs
           </div>

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

@@ -81,10 +81,7 @@ const EnvironmentSelector = () => {
             <IconDatabaseOff size={18} strokeWidth={1.5} />
             <span className="ml-2">No Environment</span>
           </div>
-          <div className="dropdown-item border-top" onClick={() => {
-            handleSettingsIconClick();
-            dropdownTippyRef.current.hide();
-          }}>
+          <div className="dropdown-item border-top" onClick={handleSettingsIconClick}>
             <div className="pr-2 text-gray-600">
               <IconSettings size={18} strokeWidth={1.5} />
             </div>

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

@@ -6,7 +6,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import Portal from 'components/Portal';
 import Modal from 'components/Modal';
 import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
-import { validateName, validateNameError } from 'utils/common/regex';
 
 const CreateEnvironment = ({ onClose }) => {
   const globalEnvs = useSelector((state) => state?.globalEnvironments?.globalEnvironments);
@@ -26,11 +25,7 @@ const CreateEnvironment = ({ onClose }) => {
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'Must be at least 1 character')
-        .max(255, 'Must be 255 characters or less')
-        .test('is-valid-filename', function(value) {
-          const isValid = validateName(value);
-          return isValid ? true : this.createError({ message: validateNameError(value) });
-        })
+        .max(50, 'Must be 50 characters or less')
         .required('Name is required')
         .test('duplicate-name', 'Global Environment already exists', validateEnvironmentName)
     }),

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

@@ -3,10 +3,10 @@ import Portal from 'components/Portal/index';
 import Modal from 'components/Modal/index';
 import toast from 'react-hot-toast';
 import { useFormik } from 'formik';
+import { renameEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import * as Yup from 'yup';
 import { useDispatch } from 'react-redux';
 import { renameGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
-import { validateName, validateNameError } from 'utils/common/regex';
 
 const RenameEnvironment = ({ onClose, environment }) => {
   const dispatch = useDispatch();
@@ -19,11 +19,7 @@ const RenameEnvironment = ({ onClose, environment }) => {
     validationSchema: Yup.object({
       name: Yup.string()
         .min(1, 'must be at least 1 character')
-        .max(255, 'Must be 255 characters or less')
-        .test('is-valid-filename', function(value) {
-          const isValid = validateName(value);
-          return isValid ? true : this.createError({ message: validateNameError(value) });
-        })
+        .max(50, 'must be 50 characters or less')
         .required('name is required')
     }),
     onSubmit: (values) => {

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

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  font-weight: 400;
-  font-size: 0.75rem;
-  background-color: ${props => props.theme.infoTip.bg};
-  border: 1px solid ${props => props.theme.infoTip.border};
-  box-shadow: ${props => props.theme.infoTip.boxShadow};
-`;
-
-export default Wrapper;

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

@@ -1,40 +0,0 @@
-/**
- * The InfoTip components needs to be nuked
- * This component will be the future replacement
- * We should allow icon and placement props to be passed in
- */
-
-import React, { useState } from 'react';
-import HelpIcon from 'components/Icons/Help';
-import StyledWrapper from './StyledWrapper';
-
-const Help = ({ children, width = 200 }) => {
-  const [showTooltip, setShowTooltip] = useState(false);
-
-  return (
-    <div className="flex items-center relative">
-      <span
-        className="flex items-center"
-        onMouseEnter={() => setShowTooltip(true)}
-        onMouseLeave={() => setShowTooltip(false)}
-      >
-        <HelpIcon size={14}/>
-      </span>
-      {showTooltip && (
-        <StyledWrapper
-          className="absolute z-50 rounded-md p-3"
-          style={{ 
-            top: '50%',
-            left: 'calc(100% + 8px)',
-            transform: 'translateY(-50%)',
-            width: `${width}px`
-          }}
-        >
-          {children}
-        </StyledWrapper>
-      )}
-    </div>
-  );
-};
-
-export default Help; 

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

@@ -1,20 +0,0 @@
-import React from 'react';
-
-const HelpIcon = ({ size = 14 }) => {
-  return (
-    <svg
-      tabIndex="-1"
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      fill="currentColor"
-      className="inline-block ml-2 cursor-pointer"
-      viewBox="0 0 16 16"
-    >
-      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-      <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
-    </svg>
-  )
-}
-
-export default HelpIcon;

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

@@ -1,104 +0,0 @@
-const OpenApiLogo = () => {
-  return (
-    <svg width="28" height="28" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
-      <path
-        style={{
-          fill: "#91d400",
-          fillOpacity: 1,
-          fillRule: "nonzero",
-          stroke: "none"
-        }} d="M43.125 51.148H20.781l.012.325c.012.21.027.418.039.625.004.09.008.18.016.27a41.442 41.442 0 0 0 .164 1.687c0 .027.004.05.008.078.035.285.07.574.113.86 0 .003 0 .007.004.01a36.98 36.98 0 0 0 1.152 5.255c.004.008.008.012.008.02a27.978 27.978 0 0 0 .265.859c.004.015.012.031.016.047.078.242.164.484.246.73.024.059.043.121.067.184.074.207.148.418.226.629.04.093.074.187.11.285.07.172.136.343.203.52.054.128.11.257.164.39.054.133.113.27.168.406.074.164.148.328.218.492.047.102.09.2.133.297.09.195.184.395.278.59l.093.191c.11.227.223.45.336.672.02.035.035.07.051.102a36.344 36.344 0 0 0 .41.773c.028.051.059.102.086.149L44.45 56.156l.07-.043a15.031 15.031 0 0 1-1.394-4.965Zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
-      />
-      <path 
-        style={{
-          fill: "#91d400",
-          fillOpacity: 1,
-          fillRule: "nonzero",
-          stroke: "none"
-        }} d="m22.563 61.137-.727.207.008.02zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
-        />
-      <path
-        style={{
-          fill: "#4c5930",
-          fillOpacity: 1,
-          fillRule: "nonzero",
-          stroke: "none"
-        }} d="m48.613 61.355-.05.055-15.739 15.664c.082.074.16.149.242.223.149.133.297.266.446.394.078.067.152.137.23.204.18.152.36.3.54.449.046.043.097.082.144.12a21.669 21.669 0 0 0 .691.556c.227.175.45.343.676.515.012.008.02.012.027.02.95.707 1.93 1.367 2.946 1.98.035.024.07.043.105.067l.578.34c.117.066.239.132.356.203.113.062.222.125.336.187.207.11.41.223.617.328a35.567 35.567 0 0 0 1.824.887l.559-1.348 7.918-19.133.027-.07a15.337 15.337 0 0 1-2.473-1.64Zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
-      />
-      <path
-        style={{
-          fill: "#68a338",
-          fillOpacity: 1,
-          fillRule: "nonzero",
-          stroke: "none"
-        }} d="M46.977 59.797a16.778 16.778 0 0 1-.899-1.102c-.152-.203-.3-.406-.437-.617a15.93 15.93 0 0 1-.41-.633L26.124 68.902c.297.485.602.957.914 1.422.012.016.02.035.031.051l.012.016c.008.015.02.03.027.046.004.004.004.004.004.008.028.035.051.07.078.11 0 .004 0 .004.004.007v.004a35.121 35.121 0 0 0 1.051 1.465c.008.012.016.02.02.031.156.2.308.403.464.602.024.027.043.05.063.078.164.203.328.406.496.61.04.046.078.093.117.144.153.18.305.36.457.535.067.078.137.153.203.227.13.148.262.297.395.445.074.082.152.16.226.242.032.035.067.075.102.11l.293.316.121.121c.176.184.352.363.531.54l15.758-15.684a22.18 22.18 0 0 1-.515-.551Zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
-      />
-      <path
-        style={{
-          fill: "#4c5930",
-          fillOpacity: 1,
-          fillRule: "nonzero",
-          stroke: "none"
-        }} d="M67.867 61.348c-.176.136-.347.273-.527.406l.039.066L78.87 80.805a38.54 38.54 0 0 0 1.57-1.078 38.099 38.099 0 0 0 3.227-2.653L67.93 61.41Zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
-      />
-      <path
-        style={{
-          fill: "#91d400",
-          fillOpacity: 1,
-          fillRule: "nonzero",
-          stroke: "none"
-        }} d="m77.418 81.707.023-.012-.023.012zm.023-.012c.051-.027.102-.054.153-.086l-.004-.004c-.05.032-.098.06-.149.09zm-.023.012-.008.004zm-.039-.039.027.047zm.039.039.023-.012-.023.012zm-.016.012.004-.004zm.008-.009-.004.005c.004-.004.008-.004.012-.008-.004.004-.004.004-.008.004zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
-      />
-      <path
-        style={{
-          fill: "#91d400",
-          fillOpacity: 1,
-          fillRule: "nonzero",
-          stroke: "none"
-        }} d="M77.441 81.695c.051-.03.102-.054.153-.086-.051.032-.102.059-.153.086zm.149-.09.004.004zm-.2.118.005-.004zm-.19-.763-.391-.644-10.727-17.722c-.215.133-.437.25-.66.367-.223.121-.45.23-.676.34a15.303 15.303 0 0 1-6.523 1.469c-1.465 0-2.93-.211-4.344-.63-.238-.074-.473-.167-.711-.25-.238-.085-.48-.156-.715-.253l-7.91 19.117-.309.75-.265.644h-.004l.062.024c.024.012.043.016.067.027h.004c.004 0 .007.004.011.004.188.078.375.145.563.215.238.094.473.184.707.27.121.042.238.097.36.136a38.13 38.13 0 0 0 7.648 1.824c.105.012.207.028.308.04l.32.035c.2.023.4.047.602.066l.149.012c.25.023.496.043.742.062.082.004.168.008.25.016.219.016.433.027.648.039.133.004.266.008.399.016.172.004.343.011.515.015.246.008.496.008.746.012h.176c2.082 0 4.164-.172 6.223-.516l.105-.015c.215-.04.434-.078.653-.117.125-.024.246-.047.37-.075.126-.023.255-.05.384-.078.21-.043.421-.09.632-.14l.118-.024a37.8 37.8 0 0 0 8.992-3.34c.187-.097.367-.207.554-.308.22-.121.438-.246.657-.371.152-.086.308-.164.457-.254l.004-.004h.004l.003-.004c.004 0 .004 0 .004-.004l-.027-.047.027.047h.004c.004-.004.008-.004.008-.004.008-.008.016-.012.023-.016.051-.03.102-.058.149-.09zM48.625 37.938c.172-.141.348-.274.523-.407l-.039-.066L37.621 18.48c-.535.348-1.062.704-1.578 1.082a37.213 37.213 0 0 0-3.219 2.649l15.739 15.664Zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
-      />
-      <path
-        style={{
-          fill: "#4c5930",
-          fillOpacity: 1,
-          fillRule: "nonzero",
-          stroke: "none"
-        }} d="M31.73 23.254c-.18.18-.347.363-.523.543-.172.18-.352.36-.523.543a38.163 38.163 0 0 0-3.32 4.125c-.106.156-.216.312-.321.469-.11.164-.219.328-.324.496-.04.058-.078.12-.117.18a37.099 37.099 0 0 0-5.82 18.527c-.009.25-.016.504-.02.754s-.012.5-.012.75h22.29c0-.25.023-.5.034-.75.012-.254.016-.504.043-.754a15.002 15.002 0 0 1 3.36-8.078c.16-.192.34-.375.507-.559.172-.188.329-.379.508-.559zm45.993-5.508a46.43 46.43 0 0 0-.684-.402c-.117-.067-.23-.133-.348-.196-.117-.066-.23-.128-.347-.195-.2-.11-.403-.219-.606-.324-.031-.016-.062-.031-.093-.05a38.014 38.014 0 0 0-4.02-1.798c-.035-.015-.074-.027-.11-.039a37.527 37.527 0 0 0-8.41-2.102c-.101-.015-.207-.027-.312-.042l-.313-.036a31.754 31.754 0 0 0-.777-.078c-.238-.023-.48-.043-.719-.062-.093-.004-.187-.012-.28-.016-.204-.015-.415-.027-.618-.039l-.328-.012v22.239c1.144.117 2.281.363 3.383.734l16.445-16.367a41.117 41.117 0 0 0-1.863-1.215zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
-      />
-      <path
-        style={{
-          fill: "#68a338",
-          fillOpacity: 1,
-          fillRule: "nonzero",
-          stroke: "none"
-        }} d="m38.898 17.68.391.644zm18.59-5.34c-.25.004-.504.004-.754.015a38.117 38.117 0 0 0-4.71.48c-.036.009-.07.013-.106.02-.219.036-.434.079-.652.118l-.371.07c-.13.027-.258.05-.383.082a36.99 36.99 0 0 0-.75.164 37.925 37.925 0 0 0-8.996 3.336c-.184.098-.368.21-.551.312-.219.118-.438.243-.66.368-.16.093-.325.18-.489.277h-.003a.162.162 0 0 1-.036.02c-.043.027-.086.046-.129.074l.004.004.387.644 11.117 18.367c.215-.132.438-.25.66-.367a15.15 15.15 0 0 1 5.668-1.73c.25-.028.5-.047.754-.063.25-.011.504-.023.758-.023V12.324c-.254 0-.504.008-.758.016zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
-      />
-      <path
-        style={{
-          fill: "#4c5930",
-          fillOpacity: 1,
-          fillRule: "nonzero",
-          stroke: "none"
-        }} d="m95.695 47.809-.035-.598c-.008-.102-.012-.2-.02-.3l-.058-.704c-.008-.059-.012-.121-.016-.18a53.501 53.501 0 0 0-.086-.785c-.003-.023-.003-.043-.007-.062 0-.012 0-.02-.004-.032-.035-.28-.07-.562-.114-.843 0-.012 0-.02-.003-.028a36.772 36.772 0 0 0-1.153-5.246 47.929 47.929 0 0 0-.258-.832c-.011-.035-.023-.07-.03-.105-.083-.242-.161-.48-.247-.719-.023-.063-.043-.129-.066-.195a39.302 39.302 0 0 0-.34-.91c-.067-.172-.133-.344-.2-.512-.054-.137-.109-.27-.163-.403-.055-.132-.114-.261-.168-.394l-.223-.504-.129-.285c-.09-.2-.188-.402-.281-.602-.032-.058-.059-.12-.086-.18-.113-.23-.227-.456-.34-.683-.016-.031-.031-.062-.05-.094-.13-.25-.259-.5-.395-.746l-.012-.023a36.958 36.958 0 0 0-2.133-3.446L72.628 44.77c.376 1.097.618 2.23.735 3.37h22.344l-.012-.331zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
-      />
-      <path
-        style={{
-          fill: "#68a338",
-          fillOpacity: 1,
-          fillRule: "nonzero",
-          stroke: "none"
-        }} d="M73.45 49.64c0 .255-.024.505-.036.755-.012.25-.016.503-.043.753a15.002 15.002 0 0 1-3.36 8.079c-.16.191-.335.375-.507.558-.168.188-.328.38-.508.559L84.758 76.03c.18-.18.347-.363.523-.543.172-.183.352-.363.52-.547a36.965 36.965 0 0 0 3.195-3.937c.04-.055.074-.11.11-.16.117-.168.234-.34.347-.508.102-.152.203-.3.3-.453.048-.074.095-.153.142-.223a37.055 37.055 0 0 0 5.808-18.515c.012-.25.016-.5.024-.75.003-.25.011-.5.011-.754zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
-      />
-      <path
-        style={{
-          fill: "#3f3f42",
-          fillOpacity: 1,
-          fillRule: "nonzero",
-          stroke: "none"
-        }} d="M102.36 5.734c-4.079-4.058-10.688-4.058-14.766 0-3.254 3.235-3.903 8.075-1.965 11.961l-22.746 22.64c-3.906-1.925-8.77-1.28-12.024 1.958-4.078 4.059-4.074 10.64 0 14.7 4.082 4.058 10.692 4.054 14.77 0a10.356 10.356 0 0 0 1.965-11.966l22.746-22.64c3.906 1.93 8.765 1.281 12.02-1.957a10.355 10.355 0 0 0 0-14.696zm0 0" transform="translate(-26.793 -.606) scale(1.44332)"
-      />
-    </svg>
-  );
-};
-
-export default OpenApiLogo;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tooltip as ReactInfoTip } from 'react-tooltip';
 
-const InfoTip = ({ html: _ignored, infotipId, ...props }) => {
+const InfoTip = ({ text, infotipId }) => {
   return (
     <>
       <svg
@@ -17,7 +17,7 @@ const InfoTip = ({ html: _ignored, infotipId, ...props }) => {
         <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
         <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
       </svg>
-      <ReactInfoTip anchorId={infotipId} {...props} />
+      <ReactInfoTip anchorId={infotipId} html={text} />
     </>
   );
 };

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

@@ -15,14 +15,14 @@ const StyledMarkdownBodyWrapper = styled.div`
       margin: 0.67em 0;
       font-weight: var(--base-text-weight-semibold, 600);
       padding-bottom: 0.3em;
-      font-size: 1.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.2em;
+      font-size: 1.2;
       border-bottom: 1px solid var(--color-border-muted);
     }
 

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

@@ -16,7 +16,7 @@ const ModalHeader = ({ title, handleCancel, customHeader, hideClose }) => (
   </div>
 );
 
-const ModalContent = ({ children }) => <div className="bruno-modal-content px-4 py-4">{children}</div>;
+const ModalContent = ({ children }) => <div className="bruno-modal-content px-4 py-6">{children}</div>;
 
 const ModalFooter = ({
   confirmText,

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

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import StyledWrapper from './StyleWrapper';
 import Modal from 'components/Modal/index';
 import { useEffect } from 'react';
-import { useApp } from 'providers/App';
 import {
   fetchNotifications,
   markAllNotificationsAsRead,
@@ -12,18 +11,18 @@ import {
 import { useDispatch, useSelector } from 'react-redux';
 import { humanizeDate, relativeDate } from 'utils/common';
 import ToolHint from 'components/ToolHint';
-import DOMPurify from 'dompurify';
+import { useTheme } from 'providers/Theme';
 
 const PAGE_SIZE = 5;
 
 const Notifications = () => {
   const dispatch = useDispatch();
-  const { version } = useApp();
   const notifications = useSelector((state) => state.notifications.notifications);
 
   const [showNotificationsModal, setShowNotificationsModal] = useState(false);
   const [selectedNotification, setSelectedNotification] = useState(null);
   const [pageNumber, setPageNumber] = useState(1);
+  const { storedTheme } = useTheme();
 
   const notificationsStartIndex = (pageNumber - 1) * PAGE_SIZE;
   const notificationsEndIndex = pageNumber * PAGE_SIZE;
@@ -31,9 +30,7 @@ const Notifications = () => {
   const unreadNotifications = notifications.filter((notification) => !notification.read);
 
   useEffect(() => {
-    dispatch(fetchNotifications({
-      currentVersion: version
-    }));
+    dispatch(fetchNotifications());
   }, []);
 
   useEffect(() => {
@@ -69,13 +66,6 @@ const Notifications = () => {
     dispatch(markNotificationAsRead({ notificationId: notification?.id }));
   };
 
-  const getSanitizedDescription = (description) => {
-    return DOMPurify.sanitize(encodeURIComponent(description), {
-      ALLOWED_TAGS: ['a', 'ul', 'img', 'li', 'div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-      ALLOWED_ATTR: ['href', 'style', 'target', 'src', 'alt']
-    });
-  };
-
   const modalCustomHeader = (
     <div className="flex flex-row gap-8">
       <div>NOTIFICATIONS</div>
@@ -100,9 +90,7 @@ const Notifications = () => {
       <a
         className="relative cursor-pointer"
         onClick={() => {
-          dispatch(fetchNotifications({
-            currentVersion: version
-          }));
+          dispatch(fetchNotifications());
           setShowNotificationsModal(true);
         }}
         aria-label="Check all Notifications"
@@ -191,11 +179,10 @@ const Notifications = () => {
                   <div className="w-full notification-date text-xs mb-4">
                     {humanizeDate(selectedNotification?.date)}
                   </div>
-                  <iframe
-                    src={`data:text/html,${getSanitizedDescription(selectedNotification?.description)}`}
-                    sandbox="allow-popups"
-                    style={{ width: '100%', height: '100%' }}
-                  ></iframe>
+                  <div
+                    className="flex w-full flex-col flex-wrap h-fit"
+                    dangerouslySetInnerHTML={{ __html: selectedNotification?.description }}
+                  ></div>
                 </div>
               </div>
             ) : (

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

@@ -1,39 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  width: 100%;
-  .path-display {
-    background: ${(props) => props.theme.requestTabPanel.url.bg};
-    border-radius: 4px;
-    padding: 8px 12px;
-    font-size: 0.8125rem;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    
-    .icon-column {
-      padding-right: 8px;
-      align-items: flex-start;
-      padding-top: 2px;
-    }
-
-    .path-container {
-      flex-wrap: wrap;
-    }
-
-    .path-segment {
-      white-space: nowrap;
-    }
-
-    
-    .name-container, .file-extension {
-      color: ${(props) => props.theme.colors.text.yellow};
-    }
-
-    .separator {
-      color: ${(props) => props.theme.text};
-      opacity: 0.6;
-      margin: 0 2px;
-    }
-  }
-`;
-
-export default StyledWrapper; 

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import { IconFolder, IconFile } from '@tabler/icons';
-import path from 'utils/common/path';
-import StyledWrapper from './StyledWrapper';
-
-const PathDisplay = ({ 
-  baseName = '',
-  iconType = 'file'
-}) => {
-  return (
-    <StyledWrapper>
-        <div className="path-display mt-2">
-        <div className="path-layout flex font-mono">
-          <div className="icon-column flex">
-            {iconType === 'file' ? <IconFile size={16} /> : <IconFolder size={16} />} 
-          </div>
-          <span className="name-container">
-            {baseName}
-          </span>
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default PathDisplay;

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

@@ -6,7 +6,8 @@ import { savePreferences } from 'providers/ReduxStore/slices/app';
 import StyledWrapper from './StyledWrapper';
 import * as Yup from 'yup';
 import toast from 'react-hot-toast';
-import path from 'utils/common/path';
+import path from 'path';
+import slash from 'utils/common/slash';
 import { IconTrash } from '@tabler/icons';
 
 const General = ({ close }) => {
@@ -133,7 +134,7 @@ const General = ({ close }) => {
             className={`flex items-center mt-2 pl-6 ${formik.values.customCaCertificate.enabled ? '' : 'opacity-25'}`}
           >
             <span className="flex items-center border px-2 rounded-md">
-              {path.basename(formik.values.customCaCertificate.filePath)}
+              {path.basename(slash(formik.values.customCaCertificate.filePath))}
               <button
                 type="button"
                 tabIndex="-1"

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

@@ -46,7 +46,7 @@ const Preferences = ({ onClose }) => {
   return (
     <StyledWrapper>
       <Modal size="lg" title="Preferences" handleCancel={onClose} hideFooter={true}>
-        <div className='flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem] py-2'>
+        <div className='flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem]'>
           <div className="flex flex-col items-center tabs" role="tablist">
             <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
               General

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

@@ -11,47 +11,6 @@ const Wrapper = styled.div`
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};
   }
-
-  .token-placement-selector {
-    padding: 0.5rem 0px;
-    border-radius: 3px;
-    border: solid 1px ${(props) => props.theme.input.border};
-    background-color: ${(props) => props.theme.input.bg};
-    min-width: 100px;
-
-    .dropdown {
-      width: fit-content;
-      min-width: 100px;
-
-      div[data-tippy-root] {
-        width: fit-content;
-        min-width: 100px;
-      }
-      .tippy-box {
-        width: fit-content;
-        max-width: none !important;
-        min-width: 100px;
-
-        .tippy-content: {
-          width: fit-content;
-          max-width: none !important;
-          min-width: 100px;
-        }
-      }
-    }
-
-    .token-placement-label {
-      width: fit-content;
-      // color: ${(props) => props.theme.colors.text.yellow};
-      justify-content: space-between;
-      padding: 0 0.5rem;
-      min-width: 100px;
-    }
-
-    .dropdown-item {
-      padding: 0.2rem 0.6rem !important;
-    }
-  }
 `;
 
 export default Wrapper;

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

@@ -1,63 +1,28 @@
-import React, { useRef, forwardRef } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
-import { IconCaretDown, IconSettings, IconKey, IconHelp, IconAdjustmentsHorizontal } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
 import SingleLineEditor from 'components/SingleLineEditor';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
-import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
-import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
+import { clearOauth2Cache } from 'utils/network/index';
+import toast from 'react-hot-toast';
 
-const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAuth, collection, folder }) => {
+const OAuth2AuthorizationCode = ({ item, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
-  const oAuth = get(request, 'auth.oauth2', {});
-  const {
-    callbackUrl,
-    authorizationUrl,
-    accessTokenUrl,
-    clientId,
-    clientSecret,
-    scope,
-    credentialsPlacement,
-    state,
-    pkce,
-    credentialsId,
-    tokenPlacement,
-    tokenHeaderPrefix,
-    tokenQueryKey,
-    refreshTokenUrl,
-    autoRefreshToken,
-    autoFetchToken
-  } = oAuth;
+  const oAuth = item.draft ? get(item, 'draft.request.auth.oauth2', {}) : get(item, 'request.auth.oauth2', {});
 
-  const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
-  const isAutoRefreshDisabled = !refreshTokenUrlAvailable;
+  const handleRun = async () => {
+    dispatch(sendRequest(item, collection.uid));
+  };
 
-  const TokenPlacementIcon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-end token-placement-label select-none">
-        {tokenPlacement == 'url' ? 'URL' : 'Headers'}
-        <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
+  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
-  const CredentialsPlacementIcon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-end token-placement-label select-none">
-        {credentialsPlacement == 'body' ? 'Request Body' : 'Basic Auth Header'}
-        <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
-
-  const handleSave = () => { save(); };
+  const { callbackUrl, authorizationUrl, accessTokenUrl, clientId, clientSecret, scope, state, pkce } = oAuth;
 
   const handleChange = (key, value) => {
     dispatch(
@@ -75,15 +40,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           state,
           scope,
           pkce,
-          credentialsPlacement,
-          credentialsId,
-          tokenPlacement,
-          tokenHeaderPrefix,
-          tokenQueryKey,
-          refreshTokenUrl,
-          autoRefreshToken,
-          autoFetchToken,
-          [key]: value,
+          [key]: value
         }
       })
     );
@@ -104,35 +61,30 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           clientSecret,
           state,
           scope,
-          credentialsPlacement,
-          credentialsId,
-          tokenPlacement,
-          tokenHeaderPrefix,
-          tokenQueryKey,
-          autoFetchToken,
           pkce: !Boolean(oAuth?.['pkce'])
         }
       })
     );
   };
 
+  const handleClearCache = (e) => {
+    clearOauth2Cache(collection?.uid)
+      .then(() => {
+        toast.success('cleared cache successfully');
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      });
+  };
+
   return (
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
-      <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
-      <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium">
-          Configuration
-        </span>
-      </div>
       {inputsConfig.map((input) => {
         const { key, label, isSecret } = input;
         return (
-          <div className="flex items-center gap-4 w-full" key={`input-${key}`}>
-            <label className="block min-w-[140px]">{label}</label>
-            <div className="single-line-editor-wrapper flex-1">
+          <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
+            <label className="block font-medium">{label}</label>
+            <div className="single-line-editor-wrapper">
               <SingleLineEditor
                 value={oAuth[key] || ''}
                 theme={storedTheme}
@@ -147,33 +99,8 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           </div>
         );
       })}
-      <div className="flex items-center gap-4 w-full" key={`input-credentials-placement`}>
-        <label className="block min-w-[140px]">Add Credentials to</label>
-        <div className="inline-flex items-center cursor-pointer token-placement-selector">
-          <Dropdown onCreate={onDropdownCreate} icon={<CredentialsPlacementIcon />} placement="bottom-end">
-            <div
-              className="dropdown-item"
-              onClick={() => {
-                dropdownTippyRef.current.hide();
-                handleChange('credentialsPlacement', 'body');
-              }}
-            >
-              Request Body
-            </div>
-            <div
-              className="dropdown-item"
-              onClick={() => {
-                dropdownTippyRef.current.hide();
-                handleChange('credentialsPlacement', 'basic_auth_header');
-              }}
-            >
-              Basic Auth Header
-            </div>
-          </Dropdown>
-        </div>
-      </div>
       <div className="flex flex-row w-full gap-4" key="pkce">
-        <label className="block">Use PKCE</label>
+        <label className="block font-medium">Use PKCE</label>
         <input
           className="cursor-pointer"
           type="checkbox"
@@ -181,154 +108,16 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           onChange={handlePKCEToggle}
         />
       </div>
-      <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
-          Token
-        </span>
+      <div className="flex flex-row gap-4">
+        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+          Get Access Token
+        </button>
+        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
+          Clear Cache
+        </button>
       </div>
-      <div className="flex items-center gap-4 w-full" key={`input-token-name`}>
-        <label className="block min-w-[140px]">Token ID</label>
-        <div className="single-line-editor-wrapper flex-1">
-          <SingleLineEditor
-            value={oAuth['credentialsId'] || ''}
-            theme={storedTheme}
-            onSave={handleSave}
-            onChange={(val) => handleChange('credentialsId', val)}
-            onRun={handleRun}
-            collection={collection}
-            item={item}
-          />
-        </div>
-      </div>
-      <div className="flex items-center gap-4 w-full" key={`input-token-placement`}>
-        <label className="block min-w-[140px]">Add token to</label>
-        <div className="inline-flex items-center cursor-pointer token-placement-selector">
-          <Dropdown onCreate={onDropdownCreate} icon={<TokenPlacementIcon />} placement="bottom-end">
-            <div
-              className="dropdown-item"
-              onClick={() => {
-                dropdownTippyRef.current.hide();
-                handleChange('tokenPlacement', 'header');
-              }}
-            >
-              Header
-            </div>
-            <div
-              className="dropdown-item"
-              onClick={() => {
-                dropdownTippyRef.current.hide();
-                handleChange('tokenPlacement', 'url');
-              }}
-            >
-              URL
-            </div>
-          </Dropdown>
-        </div>
-      </div>
-      {
-        tokenPlacement === 'header' ?
-          <div className="flex items-center gap-4 w-full" key={`input-token-prefix`}>
-            <label className="block min-w-[140px]">Header Prefix</label>
-            <div className="single-line-editor-wrapper flex-1">
-              <SingleLineEditor
-                value={oAuth['tokenHeaderPrefix'] || ''}
-                theme={storedTheme}
-                onSave={handleSave}
-                onChange={(val) => handleChange('tokenHeaderPrefix', val)}
-                onRun={handleRun}
-                collection={collection}
-              />
-            </div>
-          </div>
-          :
-          <div className="flex items-center gap-4 w-full" key={`input-token-query-param-key`}>
-            <label className="block font-medium min-w-[140px]">Query Param Key</label>
-            <div className="single-line-editor-wrapper flex-1">
-              <SingleLineEditor
-                value={oAuth['tokenQueryKey'] || ''}
-                theme={storedTheme}
-                onSave={handleSave}
-                onChange={(val) => handleChange('tokenQueryKey', val)}
-                onRun={handleRun}
-                collection={collection}
-              />
-            </div>
-          </div>
-      }
-      <div className="flex items-center gap-2.5 mt-4 mb-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
-          Advanced Settings
-        </span>
-      </div>
-
-      <div className="flex items-center gap-4 w-full mb-4">
-        <label className="block min-w-[140px]">Refresh Token URL</label>
-        <div className="single-line-editor-wrapper flex-1">
-          <SingleLineEditor
-            value={get(request, 'auth.oauth2.refreshTokenUrl', '')}
-            theme={storedTheme}
-            onSave={handleSave}
-            onChange={(val) => handleChange("refreshTokenUrl", val)}
-            collection={collection}
-            item={item}
-          />
-        </div>
-      </div>
-
-      <div className="flex items-center gap-2.5 mt-4">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium">Settings</span>
-      </div>
-
-      {/* Automatically Fetch Token */}
-      <div className="flex items-center gap-4 w-full">
-        <input
-          type="checkbox"
-          checked={Boolean(autoFetchToken)}
-          onChange={(e) => handleChange('autoFetchToken', e.target.checked)}
-          className="cursor-pointer ml-1"
-        />
-        <label className="block min-w-[140px]">Automatically fetch token if not found</label>
-        <div className="flex items-center gap-2">
-          <div className="relative group cursor-pointer">
-            <IconHelp size={16} className="text-gray-500" />
-            <span className="group-hover:opacity-100 pointer-events-none opacity-0 max-w-60 absolute left-0 bottom-full mb-1 w-max p-2 bg-gray-700 text-white text-xs rounded-md transition-opacity duration-200">
-              Automatically fetch a new token when you try to access a resource and don't have one.
-            </span>
-          </div>
-        </div>
-      </div>
-
-      {/* Auto Refresh Token (With Refresh URL) */}
-      <div className="flex items-center gap-4 w-full">
-        <input
-          type="checkbox"
-          checked={Boolean(autoRefreshToken)}
-          onChange={(e) => handleChange('autoRefreshToken', e.target.checked)}
-          className={`cursor-pointer ml-1 ${isAutoRefreshDisabled ? 'opacity-50 cursor-not-allowed' : ''}`}
-          disabled={isAutoRefreshDisabled}
-        />
-        <label className={`block min-w-[140px] ${isAutoRefreshDisabled ? 'text-gray-500' : ''}`}>Auto refresh token (with refresh URL)</label>
-        <div className="flex items-center gap-2">
-          <div className="relative group cursor-pointer">
-            <IconHelp size={16} className="text-gray-500" />
-            <span className="group-hover:opacity-100 pointer-events-none opacity-0 max-w-60 absolute left-0 bottom-full mb-1 w-max p-2 bg-gray-700 text-white text-xs rounded-md transition-opacity duration-200">
-              Automatically refresh your token using the refresh URL when it expires.
-            </span>
-          </div>
-        </div>
-      </div>
-      <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
     </StyledWrapper>
   );
 };
 
-export default OAuth2AuthorizationCode;
+export default OAuth2AuthorizationCode;

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

@@ -11,47 +11,6 @@ const Wrapper = styled.div`
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};
   }
-
-  .token-placement-selector {
-    padding: 0.5rem 0px;
-    border-radius: 3px;
-    border: solid 1px ${(props) => props.theme.input.border};
-    background-color: ${(props) => props.theme.input.bg};
-    min-width: 100px;
-
-    .dropdown {
-      width: fit-content;
-      min-width: 100px;
-
-      div[data-tippy-root] {
-        width: fit-content;
-        min-width: 100px;
-      }
-      .tippy-box {
-        width: fit-content;
-        max-width: none !important;
-        min-width: 100px;
-
-        .tippy-content: {
-          width: fit-content;
-          max-width: none !important;
-          min-width: 100px;
-        }
-      }
-    }
-
-    .token-placement-label {
-      width: fit-content;
-      // color: ${(props) => props.theme.colors.text.yellow};
-      justify-content: space-between;
-      padding: 0 0.5rem;
-      min-width: 100px;
-    }
-
-    .dropdown-item {
-      padding: 0.2rem 0.6rem !important;
-    }
-  }
 `;
 
 export default Wrapper;

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

@@ -1,61 +1,26 @@
-import React, { useRef, forwardRef } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
-import { IconCaretDown, IconSettings, IconKey, IconAdjustmentsHorizontal, IconHelp } from '@tabler/icons';
 import SingleLineEditor from 'components/SingleLineEditor';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
-import Dropdown from 'components/Dropdown';
-import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
-import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
 
-const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAuth, collection }) => {
+const OAuth2ClientCredentials = ({ item, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
-  const oAuth = get(request, 'auth.oauth2', {});
+  const oAuth = item.draft ? get(item, 'draft.request.auth.oauth2', {}) : get(item, 'request.auth.oauth2', {});
 
-  const { 
-    accessTokenUrl, 
-    clientId, 
-    clientSecret, 
-    scope, 
-    credentialsPlacement, 
-    credentialsId, 
-    tokenPlacement, 
-    tokenHeaderPrefix, 
-    tokenQueryKey, 
-    refreshTokenUrl,
-    autoRefreshToken,
-    autoFetchToken
-  } = oAuth;
+  const handleRun = async () => {
+    dispatch(sendRequest(item, collection.uid));
+  };
 
-  const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
-  const isAutoRefreshDisabled = !refreshTokenUrlAvailable;
+  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
-
-  const handleSave = () => { save(); };
-
-  const TokenPlacementIcon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-end token-placement-label select-none">
-        {tokenPlacement == 'url' ?  'URL' : 'Headers'}
-        <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
-
-  const CredentialsPlacementIcon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-end token-placement-label select-none">
-        {credentialsPlacement == 'body' ?  'Request Body' : 'Basic Auth Header'}
-        <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
+  const { accessTokenUrl, clientId, clientSecret, scope } = oAuth;
 
   const handleChange = (key, value) => {
     dispatch(
@@ -69,14 +34,6 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
           clientId,
           clientSecret,
           scope,
-          credentialsPlacement,
-          credentialsId,
-          tokenPlacement,
-          tokenHeaderPrefix,
-          tokenQueryKey,
-          refreshTokenUrl,
-          autoRefreshToken,
-          autoFetchToken,
           [key]: value
         }
       })
@@ -85,21 +42,12 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
 
   return (
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
-      <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
-      <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium">
-          Configuration
-        </span>
-      </div>
       {inputsConfig.map((input) => {
         const { key, label, isSecret } = input;
         return (
-          <div className="flex items-center gap-4 w-full" key={`input-${key}`}>
-            <label className="block min-w-[140px]">{label}</label>
-            <div className="single-line-editor-wrapper flex-1">
+          <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
+            <label className="block font-medium">{label}</label>
+            <div className="single-line-editor-wrapper">
               <SingleLineEditor
                 value={oAuth[key] || ''}
                 theme={storedTheme}
@@ -114,190 +62,9 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
           </div>
         );
       })}
-      <div className="flex items-center gap-4 w-full" key={`input-credentials-placement`}>
-        <label className="block min-w-[140px]">Add Credentials to</label>
-        <div className="inline-flex items-center cursor-pointer token-placement-selector">
-          <Dropdown onCreate={onDropdownCreate} icon={<CredentialsPlacementIcon />} placement="bottom-end">
-            <div
-              className="dropdown-item"
-              onClick={() => {
-                dropdownTippyRef.current.hide();
-                handleChange('credentialsPlacement', 'body');
-              }}
-            >
-              Request Body
-            </div>
-            <div
-              className="dropdown-item"
-              onClick={() => {
-                dropdownTippyRef.current.hide();
-                handleChange('credentialsPlacement', 'basic_auth_header');
-              }}
-            >
-              Basic Auth Header
-            </div>
-          </Dropdown>
-        </div>
-      </div>
-      <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
-          Token
-        </span>
-      </div>
-      <div className="flex items-center gap-4 w-full" key={`input-token-name`}>
-        <label className="block min-w-[140px]">Token ID</label>
-        <div className="single-line-editor-wrapper flex-1">
-          <SingleLineEditor
-            value={oAuth['credentialsId'] || ''}
-            theme={storedTheme}
-            onSave={handleSave}
-            onChange={(val) => handleChange('credentialsId', val)}
-            onRun={handleRun}
-            collection={collection}
-            item={item}
-          />
-        </div>
-      </div>
-      <div className="flex items-center gap-4 w-full" key={`input-token-placement`}>
-        <label className="block min-w-[140px]">Add token to</label>
-        <div className="inline-flex items-center cursor-pointer token-placement-selector w-fit">
-          <Dropdown onCreate={onDropdownCreate} icon={<TokenPlacementIcon />} placement="bottom-end">
-            <div
-              className="dropdown-item"
-              onClick={() => {
-                dropdownTippyRef.current.hide();
-                handleChange('tokenPlacement', 'header');
-              }}
-            >
-              Header
-            </div>
-            <div
-              className="dropdown-item"
-              onClick={() => {
-                dropdownTippyRef.current.hide();
-                handleChange('tokenPlacement', 'url');
-              }}
-            >
-              URL
-            </div>
-          </Dropdown>
-        </div>
-      </div>
-      {
-        tokenPlacement === 'header' ?
-          <div className="flex items-center gap-4 w-full" key={`input-token-prefix`}>
-            <label className="block min-w-[140px]">Header Prefix</label>
-            <div className="single-line-editor-wrapper flex-1">
-              <SingleLineEditor
-                value={oAuth['tokenHeaderPrefix'] || ''}
-                theme={storedTheme}
-                onSave={handleSave}
-                onChange={(val) => handleChange('tokenHeaderPrefix', val)}
-                onRun={handleRun}
-                collection={collection}
-              />
-            </div>
-          </div>
-          :
-          <div className="flex items-center gap-4 w-full" key={`input-token-query-param-key`}>
-            <label className="block font-medium min-w-[140px]">Query Param Key</label>
-            <div className="single-line-editor-wrapper flex-1">
-              <SingleLineEditor
-                value={oAuth['tokenQueryKey'] || ''}
-                theme={storedTheme}
-                onSave={handleSave}
-                onChange={(val) => handleChange('tokenQueryKey', val)}
-                onRun={handleRun}
-                collection={collection}
-              />
-            </div>
-          </div>
-      }
-      <div className="flex items-center gap-2.5 mt-4 mb-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
-          Advanced Settings
-        </span>
-      </div>
-
-      <div className="flex items-center gap-4 w-full mb-4">
-        <label className="block min-w-[140px]">Refresh Token URL</label>
-        <div className="single-line-editor-wrapper flex-1">
-          <SingleLineEditor
-            value={get(request, 'auth.oauth2.refreshTokenUrl', '')}
-            theme={storedTheme}
-            onSave={handleSave}
-            onChange={(val) => handleChange("refreshTokenUrl", val)}
-            collection={collection}
-            item={item}
-          />
-        </div>
-      </div>
-
-      <div className="flex items-center gap-4 w-full mb-4">
-        <label className="block min-w-[140px]">Auto-refresh token</label>
-        <input
-          type="checkbox"
-          className="cursor-pointer w-4 h-4 accent-indigo-600"
-          checked={get(request, 'auth.oauth2.autoRefreshToken', false)}
-          onChange={(e) => handleChange('autoRefreshToken', e.target.checked)}
-        />
-        <span className="text-xs text-gray-500">Automatically refresh the token when it expires</span>
-      </div>
-
-      <div className="flex items-center gap-2.5 mt-4">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium">Settings</span>
-      </div>
-
-      {/* Automatically Fetch Token */}
-      <div className="flex items-center gap-4 w-full">
-        <input
-          type="checkbox"
-          checked={Boolean(autoFetchToken)}
-          onChange={(e) => handleChange('autoFetchToken', e.target.checked)}
-          className="cursor-pointer ml-1"
-        />
-        <label className="block min-w-[140px]">Automatically fetch token if not found</label>
-        <div className="flex items-center gap-2">
-          <div className="relative group cursor-pointer">
-            <IconHelp size={16} className="text-gray-500" />
-            <span className="group-hover:opacity-100 pointer-events-none opacity-0 max-w-60 absolute left-0 bottom-full mb-1 w-max p-2 bg-gray-700 text-white text-xs rounded-md transition-opacity duration-200">
-              Automatically fetch a new token when you try to access a resource and don't have one.
-            </span>
-          </div>
-        </div>
-      </div>
-
-      {/* Auto Refresh Token (With Refresh URL) */}
-      <div className="flex items-center gap-4 w-full">
-        <input
-          type="checkbox"
-          checked={Boolean(autoRefreshToken)}
-          onChange={(e) => handleChange('autoRefreshToken', e.target.checked)}
-          className={`cursor-pointer ml-1 ${isAutoRefreshDisabled ? 'opacity-50 cursor-not-allowed' : ''}`}
-          disabled={isAutoRefreshDisabled}
-        />
-        <label className={`block min-w-[140px] ${isAutoRefreshDisabled ? 'text-gray-500' : ''}`}>Auto refresh token (with refresh URL)</label>
-        <div className="flex items-center gap-2">
-          <div className="relative group cursor-pointer">
-            <IconHelp size={16} className="text-gray-500" />
-            <span className="group-hover:opacity-100 pointer-events-none opacity-0 max-w-60 absolute left-0 bottom-full mb-1 w-max p-2 bg-gray-700 text-white text-xs rounded-md transition-opacity duration-200">
-              Automatically refresh your token using the refresh URL when it expires.
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
-
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
     </StyledWrapper>
   );
 };

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

@@ -3,20 +3,18 @@ import get from 'lodash/get';
 import Dropdown from 'components/Dropdown';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
-import { IconCaretDown, IconKey } from '@tabler/icons';
+import { IconCaretDown } from '@tabler/icons';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { humanizeGrantType } from 'utils/collections';
 import { useEffect } from 'react';
-import { useState } from 'react';
 
-const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
+const GrantTypeSelector = ({ item, collection }) => {
   const dispatch = useDispatch();
   const dropdownTippyRef = useRef();
-  const oAuth = get(request, 'auth.oauth2', {});
-  const [valuesCache, setValuesCache] = useState({
-    ...oAuth
-  });
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
+  const oAuth = item.draft ? get(item, 'draft.request.auth.oauth2', {}) : get(item, 'request.auth.oauth2', {});
+
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="flex items-center justify-end grant-type-label select-none">
@@ -26,19 +24,13 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
   });
 
   const onGrantTypeChange = (grantType) => {
-    let updatedValues = {
-      ...valuesCache,
-      ...oAuth,
-      grantType
-    };
-    setValuesCache(updatedValues);
     dispatch(
       updateAuth({
         mode: 'oauth2',
         collectionUid: collection.uid,
         itemUid: item.uid,
         content: {
-          ...updatedValues
+          grantType
         }
       })
     );
@@ -54,18 +46,7 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
           collectionUid: collection.uid,
           itemUid: item.uid,
           content: {
-            grantType: 'authorization_code',
-            accessTokenUrl: '',
-            username: '',
-            password: '',
-            clientId: '',
-            clientSecret: '',
-            scope: '',
-            credentialsPlacement: 'body',
-            credentialsId: 'credentials',
-            tokenPlacement: 'header',
-            tokenHeaderPrefix: 'Bearer',
-            tokenQueryKey: 'access_token',
+            grantType: 'authorization_code'
           }
         })
       );
@@ -73,14 +54,7 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
 
   return (
     <StyledWrapper>
-      <div className="flex items-center gap-2.5 my-4">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium">
-          Grant Type
-        </span>
-      </div>
+      <label className="block font-medium mb-2">Grant Type</label>
       <div className="inline-flex items-center cursor-pointer grant-type-mode-selector w-fit">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
           <div
@@ -115,4 +89,4 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
     </StyledWrapper>
   );
 };
-export default GrantTypeSelector;
+export default GrantTypeSelector;

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

@@ -1,96 +0,0 @@
-import { useMemo, useState } from "react";
-import { useDispatch } from "react-redux";
-import toast from 'react-hot-toast';
-import { cloneDeep, find } from 'lodash';
-import { IconLoader2 } from '@tabler/icons';
-import brunoCommon from '@usebruno/common';
-const { interpolate } = brunoCommon;
-import { fetchOauth2Credentials, clearOauth2Cache, refreshOauth2Credentials } from 'providers/ReduxStore/slices/collections/actions';
-import { getAllVariables } from "utils/collections/index";
-
-const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, credentialsId }) => {
-  const { uid: collectionUid } = collection;
-
-  const dispatch = useDispatch();
-  const [fetchingToken, toggleFetchingToken] = useState(false);
-  const [refreshingToken, toggleRefreshingToken] = useState(false);
-
-  const interpolatedAccessTokenUrl = useMemo(() => {
-    const variables = getAllVariables(collection, item);
-    return interpolate(accessTokenUrl, variables);
-  }, [collection, item, accessTokenUrl]);
-
-  const credentialsData = find(collection?.oauth2Credentials, creds => creds?.url == interpolatedAccessTokenUrl && creds?.collectionUid == collectionUid && creds?.credentialsId == credentialsId);
-  const creds = credentialsData?.credentials || {};
-
-  const handleFetchOauth2Credentials = async () => {
-    let requestCopy = cloneDeep(request);
-    requestCopy.oauth2 = requestCopy?.auth.oauth2;
-    requestCopy.headers = {};
-    toggleFetchingToken(true);
-    try {
-      const credentials = await dispatch(fetchOauth2Credentials({ itemUid: item.uid, request: requestCopy, collection }));
-      toggleFetchingToken(false);
-      if (credentials?.access_token) {
-        toast.success('token fetched successfully!'); 
-      }
-      else {
-        toast.error('An error occured while fetching token!');  
-      }
-    }
-    catch (error) {
-      console.error('could not fetch the token!');
-      console.error(error);
-      toggleFetchingToken(false);
-      toast.error('An error occured while fetching token!');
-    }
-  }
-
-  const handleRefreshAccessToken = async () => {
-    let requestCopy = cloneDeep(request);
-    requestCopy.oauth2 = requestCopy?.auth.oauth2;
-    requestCopy.headers = {};
-    toggleRefreshingToken(true);
-    try {
-      const credentials = await dispatch(refreshOauth2Credentials({ itemUid: item.uid, request: requestCopy, collection }));
-      toggleRefreshingToken(false);
-      if (credentials?.access_token) {
-        toast.success('token refreshed successfully!'); 
-      }
-      else {
-        toast.error('An error occured while refreshing token!');  
-      }
-    }
-    catch(error) {
-      console.error(error);
-      toggleRefreshingToken(false);
-      toast.error('An error occured while refreshing token!');
-    }
-  };
-
-  const handleClearCache = (e) => {
-    dispatch(clearOauth2Cache({ collectionUid: collection?.uid, url: interpolatedAccessTokenUrl, credentialsId }))
-    .then(() => {
-      toast.success('cleared cache successfully');
-    })
-    .catch((err) => {
-      toast.error(err.message);
-    });
-  };
-
-  return (
-    <div className="flex flex-row gap-4 mt-4">
-      <button onClick={handleFetchOauth2Credentials} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
-        Get Access Token{fetchingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
-      </button>
-      {creds?.refresh_token ? <button onClick={handleRefreshAccessToken} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
-        Refresh Token{refreshingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
-      </button> : null}
-      <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-        Clear Cache
-      </button>
-    </div>
-  )
-}
-
-export default Oauth2ActionButtons;

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

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  ol[role="tree"] {
-    overflow: hidden;
-  }
-  ol[role="group"] span {
-    line-break: anywhere;
-  }
-`;
-
-export default Wrapper;

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

@@ -1,173 +0,0 @@
-import { find } from "lodash";
-import StyledWrapper from "./StyledWrapper";
-import { useState, useEffect } from "react";
-import { IconChevronDown, IconChevronRight, IconCopy, IconCheck } from '@tabler/icons';
-import { getAllVariables } from 'utils/collections/index';
-import brunoCommon from '@usebruno/common';
-const { interpolate } = brunoCommon;
-
-const TokenSection = ({ title, token }) => {
-  if (!token) return null;
-
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [decodedToken, setDecodedToken] = useState(null);
-  const [copied, setCopied] = useState(false);
-
-  useEffect(() => {
-    if (token) {
-      try {
-        const parts = token.split('.');
-        if (parts.length === 3) {
-          const payload = JSON.parse(atob(parts[1]));
-          setDecodedToken(payload);
-        }
-      } catch (err) {
-        console.error('Error decoding token:', err);
-      }
-    }
-  }, [token]);
-
-  const handleCopy = async (text) => {
-    await navigator.clipboard.writeText(text);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <div className="mb-2 border dark:border-gray-700 rounded-lg overflow-hidden">
-      <div
-        className="flex items-center justify-between px-3 py-2 bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors"
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        <div className="flex items-center space-x-2 w-full">
-          {isExpanded ?
-            <IconChevronDown size={18} className="text-gray-500" /> :
-            <IconChevronRight size={18} className="text-gray-500" />
-          }
-          <div className="flex flex-row justify-between w-full">
-            <h3 className="text-sm font-medium">{title}</h3>
-            {decodedToken?.exp && <ExpiryTimer expiresIn={decodedToken?.exp} />}
-          </div>
-        </div>
-      </div>
-      {isExpanded && (
-        <div className="p-3 text-sm">
-          <div className="relative group">
-            <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
-              <button
-                onClick={() => handleCopy(token)}
-                className="p-1 bg-indigo-100 dark:hover:bg-indigo-200 rounded"
-                title="Copy token"
-              >
-                {copied ?
-                  <IconCheck size={16} className="text-green-700" /> :
-                  <IconCopy size={16} className="text-gray-500" />
-                }
-              </button>
-            </div>
-            <div className="font-mono text-xs bg-gray-50 dark:bg-gray-800 p-2 rounded break-all">
-              {token}
-            </div>
-          </div>
-          {decodedToken && (
-            <div className="mt-3">
-              <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Decoded Payload</div>
-              <div className="grid grid-cols-2 gap-x-4 gap-y-1">
-                {Object.entries(decodedToken).map(([key, value]) => (
-                  <div key={key} className="overflow-hidden text-ellipsis">
-                    <span className="font-medium text-xs">{key}: </span>
-                    <span className="text-xs text-gray-600 dark:text-gray-300">
-                      {typeof value === 'object' ? JSON.stringify(value) : value.toString()}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-const formatExpiryTime = (seconds) => {
-  if (seconds < 60) return `${seconds}s`;
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
-  return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
-};
-
-const ExpiryTimer = ({ expiresIn }) => {
-  if (!expiresIn) return null;
-
-  const calculateTimeLeft = () => Math.max(0, Math.floor(expiresIn - Date.now() / 1000));
-
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft);
-
-  useEffect(() => {
-    setTimeLeft(calculateTimeLeft());
-
-    const timer = setInterval(() => {
-      setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [expiresIn]);
-
-  return (
-    <div
-      className={`text-xs px-2 py-1 rounded-full min-w-[120px] text-center ${timeLeft <= 30
-          ? "bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400"
-          : "bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400"
-        }`}
-    >
-      {timeLeft > 0 ? `Expires in ${formatExpiryTime(timeLeft)}` : `Expired`}
-    </div>
-  );
-};
-
-
-const Oauth2TokenViewer = ({ collection, item, url, credentialsId, handleRun }) => {
-  const { uid: collectionUid } = collection;
-
-  const interpolatedUrl = useMemo(() => {
-    const variables = getAllVariables(collection, item);
-    return interpolate(url, variables);
-  }, [collection, item, url]);
-
-  const credentialsData = find(collection?.oauth2Credentials, creds => creds?.url == interpolatedUrl && creds?.collectionUid == collectionUid && creds?.credentialsId == credentialsId);
-  const creds = credentialsData?.credentials || {};
-
-  return (
-    <StyledWrapper className="relative w-auto h-fit mt-2">
-      {Object.keys(creds)?.length ? (
-        creds?.error ? (
-          <pre className="text-red-600 dark:text-red-400">Error fetching token. Check network logs for more details.</pre>
-        ) : (
-          <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm">
-            <TokenSection title="Access Token" token={creds.access_token} />
-            <TokenSection title="Refresh Token" token={creds.refresh_token} />
-            <TokenSection title="ID Token" token={creds.id_token} />
-            {(creds.token_type || creds.scope) ? <div className="mt-3 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg text-xs">
-              <div className="grid grid-cols-2 gap-2">
-                {creds.token_type ? <div className="flex items-center space-x-1">
-                  <span className="font-medium">Token Type:</span>
-                  <span className="text-gray-600 dark:text-gray-300">{creds.token_type}</span>
-                </div> : null}
-                {creds?.scope ? <div className="flex items-center space-x-1 min-w-0">
-                  <span className="font-medium flex-shrink-0">Scope:</span>
-                  <span className="text-gray-600 dark:text-gray-300 truncate" title={creds.scope}>
-                    {creds.scope}
-                  </span>
-                </div> : null}
-              </div>
-            </div> : null}
-          </div>
-        )     
-      ) : (
-        <div className="text-sm text-gray-500 dark:text-gray-400">No token found</div>
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default Oauth2TokenViewer;

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

@@ -11,47 +11,6 @@ const Wrapper = styled.div`
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};
   }
-
-  .token-placement-selector {
-    padding: 0.5rem 0px;
-    border-radius: 3px;
-    border: solid 1px ${(props) => props.theme.input.border};
-    background-color: ${(props) => props.theme.input.bg};
-    min-width: 100px;
-
-    .dropdown {
-      width: fit-content;
-      min-width: 100px;
-
-      div[data-tippy-root] {
-        width: fit-content;
-        min-width: 100px;
-      }
-      .tippy-box {
-        width: fit-content;
-        max-width: none !important;
-        min-width: 100px;
-
-        .tippy-content: {
-          width: fit-content;
-          max-width: none !important;
-          min-width: 100px;
-        }
-      }
-    }
-
-    .token-placement-label {
-      width: fit-content;
-      // color: ${(props) => props.theme.colors.text.yellow};
-      justify-content: space-between;
-      padding: 0 0.5rem;
-      min-width: 100px;
-    }
-
-    .dropdown-item {
-      padding: 0.2rem 0.6rem !important;
-    }
-  }
 `;
 
 export default Wrapper;

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

@@ -1,62 +1,26 @@
-import React, { useRef, forwardRef } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
-import { IconCaretDown, IconSettings, IconKey, IconAdjustmentsHorizontal, IconHelp } from '@tabler/icons';
 import SingleLineEditor from 'components/SingleLineEditor';
+import { updateAuth } from 'providers/ReduxStore/slices/collections';
+import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
-import Dropdown from 'components/Dropdown';
-import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
-import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
 
-const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, updateAuth, collection }) => {
+const OAuth2AuthorizationCode = ({ item, collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
 
-  const oAuth = get(request, 'auth.oauth2', {});
+  const oAuth = item.draft ? get(item, 'draft.request.auth.oauth2', {}) : get(item, 'request.auth.oauth2', {});
 
-  const { 
-    accessTokenUrl, 
-    username, 
-    password, 
-    clientId, 
-    clientSecret, 
-    scope, 
-    credentialsPlacement, 
-    credentialsId, 
-    tokenPlacement, 
-    tokenHeaderPrefix, 
-    tokenQueryKey, 
-    refreshTokenUrl,
-    autoRefreshToken,
-    autoFetchToken
-  } = oAuth;
+  const handleRun = async () => {
+    dispatch(sendRequest(item, collection.uid));
+  };
 
-  const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
-  const isAutoRefreshDisabled = !refreshTokenUrlAvailable;
+  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
-  const handleSave = () => { save(); }
-
-  const TokenPlacementIcon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-end token-placement-label select-none">
-        {tokenPlacement == 'url' ?  'URL' : 'Headers'}
-        <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
-
-  const CredentialsPlacementIcon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-end token-placement-label select-none">
-        {credentialsPlacement == 'body' ?  'Request Body' : 'Basic Auth Header'}
-        <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
+  const { accessTokenUrl, username, password, clientId, clientSecret, scope } = oAuth;
 
   const handleChange = (key, value) => {
     dispatch(
@@ -72,14 +36,6 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
           clientId,
           clientSecret,
           scope,
-          credentialsPlacement,
-          credentialsId,
-          tokenPlacement,
-          tokenHeaderPrefix,
-          tokenQueryKey,
-          refreshTokenUrl,
-          autoRefreshToken,
-          autoFetchToken,
           [key]: value
         }
       })
@@ -88,21 +44,12 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
 
   return (
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
-      <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
-      <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium">
-          Configuration
-        </span>
-      </div>
       {inputsConfig.map((input) => {
         const { key, label, isSecret } = input;
         return (
-          <div className="flex items-center gap-4 w-full" key={`input-${key}`}>
-            <label className="block min-w-[140px]">{label}</label>
-            <div className="single-line-editor-wrapper flex-1">
+          <div className="flex flex-col w-full gap-1" key={`input-${key}`}>
+            <label className="block font-medium">{label}</label>
+            <div className="single-line-editor-wrapper">
               <SingleLineEditor
                 value={oAuth[key] || ''}
                 theme={storedTheme}
@@ -117,190 +64,11 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
           </div>
         );
       })}
-      <div className="flex items-center gap-4 w-full" key={`input-credentials-placement`}>
-        <label className="block min-w-[140px]">Add Credentials to</label>
-        <div className="inline-flex items-center cursor-pointer token-placement-selector">
-          <Dropdown onCreate={onDropdownCreate} icon={<CredentialsPlacementIcon />} placement="bottom-end">
-            <div
-              className="dropdown-item"
-              onClick={() => {
-                dropdownTippyRef.current.hide();
-                handleChange('credentialsPlacement', 'body');
-              }}
-            >
-              Request Body
-            </div>
-            <div
-              className="dropdown-item"
-              onClick={() => {
-                dropdownTippyRef.current.hide();
-                handleChange('credentialsPlacement', 'basic_auth_header');
-              }}
-            >
-              Basic Auth Header
-            </div>
-          </Dropdown>
-        </div>
-      </div>
-      <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
-          Token
-        </span>
-      </div>
-      <div className="flex items-center gap-4 w-full" key={`input-token-name`}>
-        <label className="block min-w-[140px]">Token ID</label>
-        <div className="single-line-editor-wrapper flex-1">
-          <SingleLineEditor
-            value={oAuth['credentialsId'] || ''}
-            theme={storedTheme}
-            onSave={handleSave}
-            onChange={(val) => handleChange('credentialsId', val)}
-            onRun={handleRun}
-            collection={collection}
-            item={item}
-          />
-        </div>
-      </div>
-      <div className="flex items-center gap-4 w-full" key={`input-token-placement`}>
-        <label className="block min-w-[140px]">Add token to</label>
-        <div className="inline-flex items-center cursor-pointer token-placement-selector">
-          <Dropdown onCreate={onDropdownCreate} icon={<TokenPlacementIcon />} placement="bottom-end">
-            <div
-              className="dropdown-item"
-              onClick={() => {
-                dropdownTippyRef.current.hide();
-                handleChange('tokenPlacement', 'header');
-              }}
-            >
-              Header
-            </div>
-            <div
-              className="dropdown-item"
-              onClick={() => {
-                dropdownTippyRef.current.hide();
-                handleChange('tokenPlacement', 'url');
-              }}
-            >
-              URL
-            </div>
-          </Dropdown>
-        </div>
-      </div>
-      {
-        tokenPlacement === 'header' ?
-          <div className="flex items-center gap-4 w-full" key={`input-token-prefix`}>
-            <label className="block min-w-[140px]">Header Prefix</label>
-            <div className="single-line-editor-wrapper flex-1">
-              <SingleLineEditor
-                value={oAuth['tokenHeaderPrefix'] || ''}
-                theme={storedTheme}
-                onSave={handleSave}
-                onChange={(val) => handleChange('tokenHeaderPrefix', val)}
-                onRun={handleRun}
-                collection={collection}
-              />
-            </div>
-          </div>
-          :
-          <div className="flex items-center gap-4 w-full" key={`input-token-query-param-key`}>
-            <label className="block font-medium min-w-[140px]">Query Param Key</label>
-            <div className="single-line-editor-wrapper flex-1">
-              <SingleLineEditor
-                value={oAuth['tokenQueryKey'] || ''}
-                theme={storedTheme}
-                onSave={handleSave}
-                onChange={(val) => handleChange('tokenQueryKey', val)}
-                onRun={handleRun}
-                collection={collection}
-              />
-            </div>
-          </div>
-      }
-      <div className="flex items-center gap-2.5 mt-4 mb-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
-          Advanced Settings
-        </span>
-      </div>
-
-      <div className="flex items-center gap-4 w-full mb-4">
-        <label className="block min-w-[140px]">Refresh Token URL</label>
-        <div className="single-line-editor-wrapper flex-1">
-          <SingleLineEditor
-            value={get(request, 'auth.oauth2.refreshTokenUrl', '')}
-            theme={storedTheme}
-            onSave={handleSave}
-            onChange={(val) => handleChange("refreshTokenUrl", val)}
-            collection={collection}
-            item={item}
-          />
-        </div>
-      </div>
-
-      <div className="flex items-center gap-4 w-full mb-4">
-        <label className="block min-w-[140px]">Auto-refresh token</label>
-        <input
-          type="checkbox"
-          className="cursor-pointer w-4 h-4 accent-indigo-600"
-          checked={get(request, 'auth.oauth2.autoRefreshToken', false)}
-          onChange={(e) => handleChange('autoRefreshToken', e.target.checked)}
-        />
-        <span className="text-xs text-gray-500">Automatically refresh the token when it expires</span>
-      </div>
-
-      <div className="flex items-center gap-2.5 mt-4">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium">Settings</span>
-      </div>
-
-      {/* Automatically Fetch Token */}
-      <div className="flex items-center gap-4 w-full">
-        <input
-          type="checkbox"
-          checked={Boolean(autoFetchToken)}
-          onChange={(e) => handleChange('autoFetchToken', e.target.checked)}
-          className="cursor-pointer ml-1"
-        />
-        <label className="block min-w-[140px]">Automatically fetch token if not found</label>
-        <div className="flex items-center gap-2">
-          <div className="relative group cursor-pointer">
-            <IconHelp size={16} className="text-gray-500" />
-            <span className="group-hover:opacity-100 pointer-events-none opacity-0 max-w-60 absolute left-0 bottom-full mb-1 w-max p-2 bg-gray-700 text-white text-xs rounded-md transition-opacity duration-200">
-              Automatically fetch a new token when you try to access a resource and don't have one.
-            </span>
-          </div>
-        </div>
-      </div>
-
-      {/* Auto Refresh Token (With Refresh URL) */}
-      <div className="flex items-center gap-4 w-full">
-        <input
-          type="checkbox"
-          checked={Boolean(autoRefreshToken)}
-          onChange={(e) => handleChange('autoRefreshToken', e.target.checked)}
-          className={`cursor-pointer ml-1 ${isAutoRefreshDisabled ? 'opacity-50 cursor-not-allowed' : ''}`}
-          disabled={isAutoRefreshDisabled}
-        />
-        <label className={`block min-w-[140px] ${isAutoRefreshDisabled ? 'text-gray-500' : ''}`}>Auto refresh token (with refresh URL)</label>
-        <div className="flex items-center gap-2">
-          <div className="relative group cursor-pointer">
-            <IconHelp size={16} className="text-gray-500" />
-            <span className="group-hover:opacity-100 pointer-events-none opacity-0 max-w-60 absolute left-0 bottom-full mb-1 w-max p-2 bg-gray-700 text-white text-xs rounded-md transition-opacity duration-200">
-              Automatically refresh your token using the refresh URL when it expires.
-            </span>
-          </div>
-        </div>
-      </div>
-      <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
+      <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+        Get Access Token
+      </button>
     </StyledWrapper>
   );
 };
 
-export default OAuth2PasswordCredentials;
+export default OAuth2AuthorizationCode;

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

@@ -5,34 +5,17 @@ import GrantTypeSelector from './GrantTypeSelector/index';
 import OAuth2PasswordCredentials from './PasswordCredentials/index';
 import OAuth2AuthorizationCode from './AuthorizationCode/index';
 import OAuth2ClientCredentials from './ClientCredentials/index';
-import { updateAuth } from 'providers/ReduxStore/slices/collections';
-import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { useDispatch } from 'react-redux';
-
-const GrantTypeComponentMap = ({ item, collection }) => {
-  const dispatch = useDispatch();
-
-  const save = () => {
-    dispatch(saveRequest(item.uid, collection.uid));
-  };
-
-  let request = item.draft ? get(item, 'draft.request', {}) : get(item, 'request', {});
-  const grantType = get(request, 'auth.oauth2.grantType', {});
-
-  const handleRun = async () => {
-    dispatch(sendRequest(item, collection.uid));
-  };
-
 
+const grantTypeComponentMap = (grantType, item, collection) => {
   switch (grantType) {
     case 'password':
-      return <OAuth2PasswordCredentials item={item} save={save} request={request} handleRun={handleRun} updateAuth={updateAuth} collection={collection} />;
+      return <OAuth2PasswordCredentials item={item} collection={collection} />;
       break;
     case 'authorization_code':
-      return <OAuth2AuthorizationCode item={item} save={save} request={request} handleRun={handleRun} updateAuth={updateAuth} collection={collection} />;
+      return <OAuth2AuthorizationCode item={item} collection={collection} />;
       break;
     case 'client_credentials':
-      return <OAuth2ClientCredentials item={item} save={save} request={request} handleRun={handleRun} updateAuth={updateAuth} collection={collection} />;
+      return <OAuth2ClientCredentials item={item} collection={collection} />;
       break;
     default:
       return <div>TBD</div>;
@@ -41,12 +24,12 @@ const GrantTypeComponentMap = ({ item, collection }) => {
 };
 
 const OAuth2 = ({ item, collection }) => {
-  let request = item.draft ? get(item, 'draft.request', {}) : get(item, 'request', {});
+  const oAuth = item.draft ? get(item, 'draft.request.auth.oauth2', {}) : get(item, 'request.auth.oauth2', {});
 
   return (
     <StyledWrapper className="mt-2 w-full">
-      <GrantTypeSelector item={item} request={request} updateAuth={updateAuth} collection={collection} />
-      <GrantTypeComponentMap item={item} collection={collection} />
+      <GrantTypeSelector item={item} collection={collection} />
+      {grantTypeComponentMap(oAuth?.grantType, item, collection)}
     </StyledWrapper>
   );
 };

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

@@ -10,51 +10,14 @@ import NTLMAuth from './NTLMAuth';
 
 import ApiKeyAuth from './ApiKeyAuth';
 import StyledWrapper from './StyledWrapper';
-import { humanizeRequestAuthMode } from 'utils/collections';
+import { humanizeRequestAuthMode } from 'utils/collections/index';
 import OAuth2 from './OAuth2/index';
-import { findItemInCollection, findParentItemInCollection } from 'utils/collections/index';
-
-const getTreePathFromCollectionToItem = (collection, _item) => {
-  let path = [];
-  let item = findItemInCollection(collection, _item?.uid);
-  while (item) {
-    path.unshift(item);
-    item = findParentItemInCollection(collection, item?.uid);
-  }
-  return path;
-};
 
 const Auth = ({ item, collection }) => {
   const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
-  const requestTreePath = getTreePathFromCollectionToItem(collection, item);
 
-  const getEffectiveAuthSource = () => {
-    if (authMode !== 'inherit') return null;
-
-    const collectionAuth = get(collection, 'root.request.auth');
-    let effectiveSource = {
-      type: 'collection',
-      name: 'Collection',
-      auth: collectionAuth
-    };
-
-    // Check folders in reverse to find the closest auth configuration
-    for (let i of [...requestTreePath].reverse()) {
-      if (i.type === 'folder') {
-        const folderAuth = get(i, 'root.request.auth');
-        if (folderAuth && folderAuth.mode && folderAuth.mode !== 'none' && folderAuth.mode !== 'inherit') {
-          effectiveSource = {
-            type: 'folder',
-            name: i.name,
-            auth: folderAuth
-          };
-          break;
-        }
-      }
-    }
-
-    return effectiveSource;
-  };
+  const collectionRoot = get(collection, 'root', {});
+  const collectionAuth = get(collectionRoot, 'request.auth');
 
   const getAuthView = () => {
     switch (authMode) {
@@ -83,21 +46,32 @@ const Auth = ({ item, collection }) => {
         return <ApiKeyAuth collection={collection} item={item} />;
       }
       case 'inherit': {
-        const source = getEffectiveAuthSource();
         return (
-          <>
-            <div className="flex flex-row w-full mt-2 gap-2">
-              <div>Auth inherited from {source.name}: </div>
-              <div className="inherit-mode-text">{humanizeRequestAuthMode(source.auth?.mode)}</div>
-            </div>
-          </>
+          <div className="flex flex-row w-full mt-2 gap-2">
+            {collectionAuth?.mode === 'oauth2' ? (
+              <div className="flex flex-col gap-2">
+                <div className="flex flex-row gap-1">
+                  <div>Collection level auth is: </div>
+                  <div className="inherit-mode-text">{humanizeRequestAuthMode(collectionAuth?.mode)}</div>
+                </div>
+                <div className="text-sm opacity-50">
+                  Note: You need to use scripting to set the access token in the request headers.
+                </div>
+              </div>
+            ) : (
+              <>
+                <div>Auth inherited from the Collection: </div>
+                <div className="inherit-mode-text">{humanizeRequestAuthMode(collectionAuth?.mode)}</div>
+              </>
+            )}
+          </div>
         );
       }
     }
   };
 
   return (
-    <StyledWrapper className="w-full mt-1 overflow-y-scroll">
+    <StyledWrapper className="w-full mt-1">
       <div className="flex flex-grow justify-start items-center">
         <AuthMode item={item} collection={collection} />
       </div>

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

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

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

@@ -1,164 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { get, cloneDeep, isArray } from 'lodash';
-import { IconTrash } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
-import { useTheme } from 'providers/Theme';
-import { addFile as _addFile, updateFile, deleteFile } from 'providers/ReduxStore/slices/collections/index';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-import FilePickerEditor from 'components/FilePickerEditor/index';
-import SingleLineEditor from 'components/SingleLineEditor/index';
-
-const FileBody = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-  const params = item.draft ? get(item, 'draft.request.body.file') : get(item, 'request.body.file');
-
-  const [enabledFileUid, setEnableFileUid] = useState(params && params.length ? params[0].uid : '');
-
-  const addFile = () => {
-    dispatch(
-      _addFile({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-      })
-    );
-  };
-
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
-
-  const handleParamChange = (e, _param, type) => {
-    const param = cloneDeep(_param);
-    switch (type) {
-      case 'filePath': {
-        param.filePath = e.target.filePath;
-        param.contentType = "";
-        break;
-      }
-      case 'contentType': {
-        param.contentType = e.target.contentType;
-        break;
-      }
-      case 'selected': {
-        param.selected = e.target.selected;
-        setEnableFileUid(param.uid)
-        break;
-      }
-    }
-    dispatch(
-      updateFile({
-        param: param,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleRemoveParams = (param) => {
-    dispatch(
-      deleteFile({
-        paramUid: param.uid,
-        itemUid: item.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>
-              <div className="flex items-center justify-center">File</div>
-            </td>
-            <td>
-              <div className="flex items-center justify-center">Content-Type</div>
-            </td>
-            <td>
-              <div className="flex items-center justify-center">Selected</div>
-            </td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {params && params.length
-            ? params.map((param, index) => {
-                return (
-                  <tr key={param.uid}>
-                    <td>
-                      <FilePickerEditor
-                        isSingleFilePicker={true}
-                        value={param.filePath}
-                        onChange={(path) =>
-                          handleParamChange(
-                            {
-                              target: {
-                                filePath: path
-                              }
-                            },
-                            param,
-                            'filePath'
-                          )
-                        }
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <SingleLineEditor
-                        className="flex items-center justify-center"
-                        onSave={onSave}
-                        theme={storedTheme}
-                        placeholder="Auto"
-                        value={param.contentType}
-                        onChange={(newValue) =>
-                          handleParamChange(
-                            {
-                              target: {
-                                contentType: newValue
-                              }
-                            },
-                            param,
-                            'contentType'
-                          )
-                        }
-                        onRun={handleRun}
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center justify-center">
-                        <input
-                          key={param.uid}
-                          type="radio"
-                          name="selected"
-                          checked={enabledFileUid === param.uid || param.selected}
-                          tabIndex="-1"
-                          className="mr-1 mousetrap"
-                          onChange={(e) => handleParamChange(e, param, 'selected')}
-                        />
-                      </div>
-                    </td>
-                    <td>
-                      <div className="flex items-center justify-center">
-                        <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-      <div>
-        <button className="btn-add-param text-link pr-2 pt-3 select-none" onClick={addFile}>
-          + Add File
-        </button>
-      </div>
-    </StyledWrapper>
-  );
-};
-export default FileBody;

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

@@ -154,7 +154,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
         </div>
         <GraphQLSchemaActions item={item} collection={collection} onSchemaLoad={setSchema} toggleDocs={toggleDocs} />
       </div>
-      <section className="flex w-full mt-5 flex-1 relative">{getTabPanel(focusedTab.requestPaneTab)}</section>
+      <section className="flex w-full mt-5 flex-1">{getTabPanel(focusedTab.requestPaneTab)}</section>
     </StyledWrapper>
   );
 };

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

@@ -49,7 +49,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   return (
-    <>
+    <StyledWrapper className="w-full relative">
       <button
         className="btn-add-param text-link px-4 py-4 select-none absolute top-0 right-0 z-10"
         onClick={onPrettify}
@@ -68,7 +68,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
         onRun={onRun}
         onSave={onSave}
       />
-    </>
+    </StyledWrapper>
   );
 };
 

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

@@ -15,7 +15,6 @@ import Tests from 'components/RequestPane/Tests';
 import StyledWrapper from './StyledWrapper';
 import { find, get } from 'lodash';
 import Documentation from 'components/Documentation/index';
-import { useEffect } from 'react';
 
 const ContentIndicator = () => {
   return (
@@ -25,14 +24,6 @@ const ContentIndicator = () => {
   );
 };
 
-const ErrorIndicator = () => {
-  return (
-    <sup className="ml-[.125rem] opacity-80 font-medium text-red-500">
-      <DotIcon width="10" ></DotIcon>
-    </sup>
-  );
-};
-
 const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
   const dispatch = useDispatch();
   const tabs = useSelector((state) => state.tabs.tabs);
@@ -120,12 +111,6 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
     requestVars.filter((request) => request.enabled).length +
     responseVars.filter((response) => response.enabled).length;
 
-  useEffect(() => {
-    if (activeParamsLength === 0 && body.mode !== 'none') {
-      selectTab('body');
-    }
-  }, []);
-
   return (
     <StyledWrapper className="flex flex-col h-full relative">
       <div className="flex flex-wrap items-center tabs" role="tablist">
@@ -151,11 +136,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
           Script
-          {(script.req || script.res) && (
-            item.preRequestScriptErrorMessage || item.postResponseScriptErrorMessage ? 
-            <ErrorIndicator /> : 
-            <ContentIndicator />
-          )}
+          {(script.req || script.res) && <ContentIndicator />}
         </div>
         <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
           Assert