feat: async parser workers (#3834)

* feat: async parser workers (#3834)
---------
Co-authored-by: Anoop M D <anoop.md1421@gmail.com>

.github/CODEOWNERS

@@ -1 +0,0 @@
-* @helloanoop @maintainer-bruno @lohit-bruno @naman-bruno

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/BugReport.yaml

@@ -6,60 +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
-        - label: this feature was working in a previous version but is broken in the current release.
-          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
@@ -28,11 +29,6 @@ jobs:
           npm run build --workspace=packages/bruno-common
           npm run build --workspace=packages/bruno-query
           npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-          npm run build --workspace=packages/bruno-converters
-          npm run build --workspace=packages/bruno-requests
-
-      - name: Lint Check
-        run: npm run lint
 
       # tests
       - name: Test Package bruno-js
@@ -50,18 +46,12 @@ jobs:
         run: npm run test --workspace=packages/bruno-app
       - name: Test Package bruno-common
         run: npm run test --workspace=packages/bruno-common
-      - name: Test Package bruno-converters
-        run: npm run test --workspace=packages/bruno-converters
       - name: Test Package bruno-electron
         run: npm run test --workspace=packages/bruno-electron
 
   cli-test:
     name: CLI Tests
     runs-on: ubuntu-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -78,8 +68,6 @@ jobs:
           npm run build --workspace=packages/bruno-query
           npm run build --workspace=packages/bruno-common
           npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-          npm run build --workspace=packages/bruno-converters
-          npm run build --workspace=packages/bruno-requests
 
       - name: Run tests
         run: |
@@ -91,47 +79,5 @@ jobs:
         uses: EnricoMi/publish-unit-test-result-action@v2
         if: always()
         with:
-          check_name: CLI Test Results
           files: packages/bruno-tests/collection/junit.xml
           comment_mode: always
-  e2e-test:
-    name: Playwright E2E Tests
-    timeout-minutes: 60
-    runs-on: ubuntu-24.04
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: v22.11.x
-    - name: Install dependencies
-      run: |
-        sudo apt-get update
-        sudo apt-get --no-install-recommends install -y \
-          libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libasound2t64 \
-          xvfb
-        npm ci --legacy-peer-deps
-        sudo chown root /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
-        sudo chmod 4755 /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
-
-    - name: Install dependencies for test collection environment
-      run: |
-        npm ci --prefix packages/bruno-tests/collection
-
-    - name: Build libraries
-      run: |
-        npm run build:graphql-docs
-        npm run build:bruno-query
-        npm run build:bruno-common
-        npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-        npm run build:bruno-converters
-        npm run build:bruno-requests
-
-    - name: Run Playwright tests
-      run: |
-        xvfb-run npm run test:e2e
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30

.gitignore

@@ -46,8 +46,4 @@ yarn-error.log*
 
 #dev editor
 bruno.iml
-.idea
-.vscode
-
-# Playwright
-/blob-report/
+.idea

contributing.md

@@ -15,15 +15,15 @@
 | [正體中文](docs/contributing/contributing_zhtw.md)
 | [日本語](docs/contributing/contributing_ja.md)
 | [हिंदी](docs/contributing/contributing_hi.md)
-| [Dutch](docs/contributing/contributing_nl.md)
+| [Nederlands](docs/contributing/contributing_nl.md)
 
 ## Let's make Bruno better, together!!
 
-We are happy that you are looking to improve Bruno. Below are the guidelines to run Bruno on your computer.
+We are happy that you are looking to improve Bruno. Below are the guidelines to get started bringing up Bruno on your computer.
 
 ### Technology Stack
 
-Bruno is built using React and Electron.
+Bruno is built using Next.js and React. We also use electron to ship a desktop version (that supports local collections)
 
 Libraries we use
 
@@ -37,76 +37,38 @@ Libraries we use
 - Filesystem Watcher - chokidar
 - i18n - i18next
 
-> [!IMPORTANT]
-> You would need [Node v22.x or the latest LTS version](https://nodejs.org/en/). We use npm workspaces in the project
+### Dependencies
+
+You would need [Node v20.x or the latest LTS version](https://nodejs.org/en/) and npm 8.x. We use npm workspaces in the project
 
 ## Development
 
-Bruno is a desktop app. Below are the instructions to run Bruno.
+Bruno is being developed as a desktop app. You need to load the app by running the Next.js app in one terminal and then run the electron app in another terminal.
 
-> Note: We use React for the frontend and rsbuild for build and dev server.
-
-## Install Dependencies
+### Local Development
 
 ```bash
-# use nodejs 22 version
+# use nodejs 20 version
 nvm use
 
 # install deps
 npm i --legacy-peer-deps
-```
 
-### Local Development
-
-#### Build packages
-
-##### Option 1
-
-```bash
 # build packages
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
 # bundle js sandbox libraries
 npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-```
-##### Option 2
 
-```bash
-# install dependencies and setup
-npm run setup
-```
-
-#### Run the app
-
-##### Option 1
-
-```bash
-# run react app (terminal 1)
+# run next app (terminal 1)
 npm run dev:web
 
 # run electron app (terminal 2)
 npm run dev:electron
 ```
 
-##### Option 2
-```bash
-# run electron and react app concurrently
-npm run dev
-```
-
-#### Customize Electron `userData` path
-If `ELECTRON_USER_DATA_PATH` env-variable is present and its development mode, then `userData` path is modified accordingly.
-
-e.g.
-```sh
-ELECTRON_USER_DATA_PATH=$(realpath ~/Desktop/bruno-test) npm run dev:electron
-```
-This will create a `bruno-test` folder on your Desktop and use it as the `userData` path.
-
 ### Troubleshooting
 
 You might encounter a `Unsupported platform` error when you run `npm install`. To fix this, you will need to delete `node_modules` and `package-lock.json` and run `npm install`. This should install all the necessary packages needed to run the app.
@@ -124,32 +86,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testing
 
 ```bash
-# run bruno-schema tests
-npm run test --workspace=packages/bruno-schema
+# bruno-schema
+npm test --workspace=packages/bruno-schema
 
-# run bruno-query tests
-npm run test --workspace=packages/bruno-query
-
-# run bruno-common tests
-npm run test --workspace=packages/bruno-common
-
-# run bruno-converters tests
-npm run test --workspace=packages/bruno-converters
-
-# run bruno-app tests
-npm run test --workspace=packages/bruno-app
-
-# run bruno-electron tests
-npm run test --workspace=packages/bruno-electron
-
-# run bruno-lang tests
-npm run test --workspace=packages/bruno-lang
-
-# run bruno-toml tests
-npm run test --workspace=packages/bruno-toml
-
-# 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

@@ -21,7 +21,7 @@ Bibliotheken die wir benutzen
 
 ### Abhängigkeiten
 
-Du benötigst [Node v22.x oder die neuste LTS Version](https://nodejs.org/en/) und npm 8.x. Wir benutzen npm workspaces in dem Projekt.
+Du benötigst [Node v20.x oder die neuste LTS Version](https://nodejs.org/en/) und npm 8.x. Wir benutzen npm workspaces in dem Projekt.
 
 ### Lass uns coden
 
@@ -42,12 +42,12 @@ Bruno wird als Desktop-Anwendung entwickelt. Um die App zu starten, musst Du zue
 
 ### Abhängigkeiten
 
-- NodeJS v22
+- NodeJS v18
 
 ### Lokales Entwickeln
 
 ```bash
-# use nodejs 22 version
+# use nodejs 18 version
 nvm use
 
 # install deps
@@ -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

@@ -1,4 +1,4 @@
-[Inglés](../../contributing.md)
+[English](../../contributing.md)
 
 ## ¡Juntos, hagamos a Bruno mejor!
 
@@ -6,111 +6,58 @@ Estamos encantados de que quieras ayudar a mejorar Bruno. A continuación encont
 
 ### Tecnologías utilizadas
 
-Bruno está construido con React y Electron
+Bruno está construido con NextJs y React. También usamos electron para distribuir una versión de escritorio (que soporta colecciones locales).
 
 Librerías que utilizamos:
 
-- CSS - Tailwind CSS
-- Editores de código - CodeMirror
+- CSS - Tailwind
+- Editores de código - Codemirror
 - Manejo del estado - Redux
 - Íconos - Tabler Icons
 - Formularios - formik
 - Validación de esquemas - Yup
 - Cliente de peticiones - axios
 - Monitor del sistema de archivos - chokidar
-- i18n (internacionalización) - i18next
 
 ### Dependencias
 
-> [!IMPORTANT]
-> Necesitarás [Node v22.x o la última versión LTS](https://nodejs.org/es/). Ten en cuenta que Bruno usa los espacios de trabajo de npm
+Necesitarás [Node v20.x o la última versión LTS](https://nodejs.org/es) y npm 8.x. Ten en cuenta que utilizamos espacios de trabajo de npm en el proyecto.
 
 ## Desarrollo
 
-Bruno es una aplicación de escritorio. A continuación se detallan las instrucciones paso a paso para ejecutar Bruno.
+Bruno está siendo desarrollado como una aplicación de escritorio. Para ejecutarlo, primero debes ejecutar la aplicación de nextjs en una terminal y luego ejecutar la aplicación de electron en otra terminal.
 
-> Nota: Utilizamos React para el frontend y rsbuild para el servidor de desarrollo.
+### Dependencias
 
-### Instalar dependencias
-
-```bash
-# Use la versión 22.x o LTS (Soporte a Largo Plazo) de Node.js
-nvm use 22.11.0
-
-# instalar las dependencias
-npm i --legacy-peer-deps
-```
-
-> ¿Por qué `--legacy-peer-deps`?: Fuerza la instalación ignorando conflictos en dependencias “peer”, evitando errores de árbol de dependencias.
+- NodeJS v18
 
 ### Desarrollo local
 
-#### Construir paquetes
-
-##### Opción 1
-
 ```bash
-# construir paquetes
+# Utiliza la versión 18 de nodejs
+nvm use
+
+# Instala las dependencias
+npm i --legacy-peer-deps
+
+# Construye la documentación de graphql
 npm run build:graphql-docs
+
+# Construye bruno-query
 npm run build:bruno-query
-npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
-# empaquetar bibliotecas JavaScript del entorno de pruebas aislado
-npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-```
-
-##### Opción 2
-
-```bash
-# instalar dependencias y configurar el entorno
-npm run setup
-```
-
-#### Ejecutar la aplicación
-
-```bash
-# ejecutar aplicación react (terminal 1)
+# Ejecuta la aplicación de nextjs (terminal 1)
 npm run dev:web
 
-# ejecutar aplicación electron (terminal 2)
+# Ejecuta la aplicación de electron (terminal 2)
 npm run dev:electron
 ```
 
-##### Opción 1
-
-```bash
-# ejecutar aplicación react (terminal 1)
-npm run dev:web
-
-# ejecutar aplicación electron (terminal 2)
-npm run dev:electron
-```
-
-##### Opción 2
-
-```bash
-# ejecutar aplicación electron y react de forma concurrente
-npm run dev
-```
-
-#### Personalizar la ruta `userData` de Electron
-
-Si la variable de entorno `ELECTRON_USER_DATA_PATH` está presente y se encuentra en modo de desarrollo, entonces la ruta `userData` se modifica en consecuencia.
-ejemplo:
-
-```sh
-ELECTRON_USER_DATA_PATH=$(realpath ~/Desktop/bruno-test) npm run dev:electron
-```
-
-Esto creará una carpeta llamada `bruno-test` en tu escritorio y la usará como la ruta userData.
-
 ### Solución de problemas
 
-Es posible que te encuentres con un error `Unsupported platform` cuando ejecutes `npm install`. Para solucionarlo, tendrás que eliminar las carpetas `node_modules` y el archivo `package-lock.json`, y luego volver a ejecutar `npm install`. Esto debería instalar todos los paquetes necesarios para que la aplicación funcione.
+Es posible que encuentres un error de `Unsupported platform` cuando ejecutes `npm install`. Para solucionarlo, debes eliminar la carpeta `node_modules` y el archivo `package-lock.json`, luego, ejecuta `npm install`. Lo anterior debería instalar todos los paquetes necesarios para ejecutar la aplicación.
 
-```sh
+```shell
 # Elimina la carpeta node_modules en los subdirectorios
 find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
   rm -rf "$dir"
@@ -122,44 +69,12 @@ find . -type f -name "package-lock.json" -delete
 
 ### Pruebas
 
-#### Pruebas individuales
-
 ```bash
-# ejecutar pruebas de bruno-app
-npm run test --workspace=packages/bruno-app
+# bruno-schema
+npm test --workspace=packages/bruno-schema
 
-# ejecutar pruebas de bruno-electron
-npm run test --workspace=packages/bruno-electron
-
-# ejecutar pruebas de bruno-cli
-npm run test --workspace=packages/bruno-cli
-
-# ejecutar pruebas de bruno-common
-npm run test --workspace=packages/bruno-common
-
-# ejecutar pruebas de bruno-converters
-npm run test --workspace=packages/bruno-converters
-
-# ejecutar pruebas de bruno-schema
-npm run test --workspace=packages/bruno-schema
-
-# ejecutar pruebas de bruno-query
-npm run test --workspace=packages/bruno-query
-
-# ejecutar pruebas de bruno-js
-npm run test --workspace=packages/bruno-js
-
-# ejecutar pruebas de bruno-lang
-npm run test --workspace=packages/bruno-lang
-
-# ejecutar pruebas de bruno-toml
-npm run test --workspace=packages/bruno-toml
-```
-#### Pruebas en conjunto
-
-```bash
-# 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

@@ -40,8 +40,6 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
 # Next.js ऐप चलाएँ (टर्मिनल 1 पर)
 npm run dev:web
@@ -67,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

@@ -40,8 +40,6 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
 # run next app (terminal 1)
 npm run dev:web
@@ -67,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

@@ -40,8 +40,6 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
 # next 앱 실행 (1번 터미널)
 npm run dev:web
@@ -68,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

@@ -40,8 +40,6 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
 # draai next app (terminal 1)
 npm run dev:web
@@ -67,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

@@ -42,8 +42,6 @@ npm i --legacy-peer-deps
 npm run build:graphql-docs
 npm run build:bruno-query
 npm run build:bruno-common
-npm run build:bruno-converters
-npm run build:bruno-requests
 
 # spustite ďalšiu aplikáciu (terminál 1)
 npm run dev:web
@@ -69,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_ar.md

@@ -74,11 +74,12 @@ flatpak install com.usebruno.Bruno
 
 # على نظام Linux عبر Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt
 ```
 
 ### التشغيل عبر منصات متعددة 🖥️

docs/readme/readme_bn.md

@@ -59,11 +59,12 @@ snap install bruno
 
 # Apt এর মাধ্যমে লিনাক্সে
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### একাধিক প্ল্যাটফর্মে চালান 🖥️

docs/readme/readme_cn.md

@@ -63,11 +63,12 @@ snap install bruno
 
 # 在 Linux 上用 Apt 安装
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### 在 Mac 上通过 Homebrew 安装 🖥️

docs/readme/readme_de.md

@@ -78,11 +78,12 @@ flatpak install com.usebruno.Bruno
 
 # Auf Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### Einsatz auf verschiedensten Plattformen 🖥️

docs/readme/readme_es.md

@@ -75,11 +75,12 @@ flatpak install com.usebruno.Bruno
 
 # En Linux con Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### Ejecútalo en múltiples plataformas 🖥️

docs/readme/readme_fr.md

@@ -63,11 +63,12 @@ snap install bruno
 
 # Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### Fonctionne sur de multiples plateformes 🖥️

docs/readme/readme_hi.md

@@ -1,151 +0,0 @@
-<br />
-<img src="../../assets/images/logo-transparent.png" width="80"/>
-
-### ब्रूनो - API इंटरफेस (API) का अन्वेषण और परीक्षण करने के लिए एक ओपन-सोर्स विकास वातावरण।
-
-[![GitHub संस्करण](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%2Fbruno)
-[![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
-[![कमिट गतिविधि](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
-[![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
-[![वेबसाइट](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
-[![डाउनलोड](https://img.shields.io/badge/Download-Latest-brightgreen)](https://www.usebruno.com/downloads)
-
-[English](../../readme.md)
-| [Українська](./readme_ua.md)
-| [Русский](./readme_ru.md)
-| [Türkçe](./readme_tr.md)
-| [Deutsch](./readme_de.md)
-| [Français](./readme_fr.md)
-| [Português (BR)](./readme_pt_br.md)
-| [한국어](./readme_kr.md)
-| [বাংলা](./readme_bn.md)
-| [Español](./readme_es.md)
-| [Italiano](./readme_it.md)
-| [Română](./readme_ro.md)
-| [Polski](./readme_pl.md)
-| [简体中文](./readme_cn.md)
-| [正體中文](./readme_zhtw.md)
-| [العربية](./readme_ar.md)
-| [日本語](./readme_ja.md)
-| [ქართული](./readme_ka.md)
-| **हिन्दी**
-
-ब्रूनो एक नया और अभिनव API क्लाइंट है, जिसका उद्देश्य Postman और अन्य समान उपकरणों द्वारा प्रस्तुत स्थिति को बदलना है।
-
-ब्रूनो आपकी कलेक्शनों को सीधे आपकी फाइल सिस्टम के एक फ़ोल्डर में संग्रहीत करता है। हम API अनुरोधों के बारे में जानकारी सहेजने के लिए एक सामान्य टेक्स्ट मार्कअप भाषा, Bru, का उपयोग करते हैं।
-
-आप अपनी API कलेक्शनों पर सहयोग करने के लिए Git या अपनी पसंद के किसी भी संस्करण नियंत्रण प्रणाली का उपयोग कर सकते हैं।
-
-ब्रूनो केवल ऑफ़लाइन उपयोग के लिए है। ब्रूनो में कभी भी क्लाउड-सिंक जोड़ने की कोई योजना नहीं है। हम आपके डेटा की गोपनीयता को महत्व देते हैं और मानते हैं कि इसे आपके डिवाइस पर ही रहना चाहिए। हमारी दीर्घकालिक दृष्टि [यहाँ](https://github.com/usebruno/bruno/discussions/269) पढ़ें।
-
-📢 हमारे हालिया India FOSS 3.0 सम्मेलन में हमारे वार्तालाप को [यहाँ](https://www.youtube.com/watch?v=7bSMFpbcPiY) देखें।
-
-![bruno](/assets/images/landing-2.png) <br /><br />
-
-### गोल्डन संस्करण ✨
-
-हमारी अधिकांश सुविधाएँ मुफ्त और ओपन-सोर्स हैं।
-हम [पारदर्शिता और स्थिरता के सिद्धांतों](https://github.com/usebruno/bruno/discussions/269) के बीच एक सामंजस्यपूर्ण संतुलन प्राप्त करने का प्रयास करते हैं।
-
-[गोल्डन संस्करण](https://www.usebruno.com/pricing) के लिए खरीदारी जल्द ही $9 की कीमत पर उपलब्ध होगी! <br/>
-[यहाँ सदस्यता लें](https://usebruno.ck.page/4c65576bd4) ताकि आपको लॉन्च पर सूचनाएं मिलें।
-
-### स्थापना
-
-ब्रूनो Mac, Windows और Linux के लिए हमारे [वेबसाइट](https://www.usebruno.com/downloads) पर एक बाइनरी डाउनलोड के रूप में उपलब्ध है।
-
-आप ब्रूनो को Homebrew, Chocolatey, Scoop, Snap, Flatpak और Apt जैसे पैकेज प्रबंधकों के माध्यम से भी स्थापित कर सकते हैं।
-
-```sh
-# Mac पर Homebrew के माध्यम से
-brew install bruno
-
-# Windows पर Chocolatey के माध्यम से
-choco install bruno
-
-# Windows पर Scoop के माध्यम से
-scoop bucket add extras
-scoop install bruno
-
-# Linux पर Snap के माध्यम से
-snap install bruno
-
-# Linux पर Flatpak के माध्यम से
-flatpak install com.usebruno.Bruno
-
-# Linux पर Apt के माध्यम से
-sudo mkdir -p /etc/apt/keyrings
-sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-
-echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-
-sudo apt update
-sudo apt install bruno
-
-कई प्लेटफार्मों पर चलाएं 🖥️
-<br /><br />
-
-Git के माध्यम से सहयोग करें 👩‍💻🧑‍💻
-या अपनी पसंद के किसी भी संस्करण नियंत्रण प्रणाली का उपयोग करें
-
-<br /><br />
-
-महत्वपूर्ण लिंक 📌
-हमारी दीर्घकालिक दृष्टि
-
-रोडमैप
-
-प्रलेखन
-
-Stack Overflow
-
-वेबसाइट
-
-मूल्य निर्धारण
-
-डाउनलोड
-
-GitHub प्रायोजक
-
-प्रस्तुतियाँ 🎥
-प्रशंसापत्र
-
-ज्ञान केंद्र
-
-Scriptmania
-
-समर्थन ❤️
-यदि आप ब्रूनो को पसंद करते हैं और हमारे ओपन-सोर्स कार्य का समर्थन करना चाहते हैं, तो कृपया GitHub प्रायोजक के माध्यम से हमें प्रायोजित करने पर विचार करें।
-
-प्रशंसापत्र साझा करें 📣
-यदि ब्रूनो ने आपके और आपकी टीमों के लिए काम में मदद की है, तो कृपया हमारे GitHub चर्चा में अपने प्रशंसापत्र साझा करना न भूलें
-
-नए पैकेज प्रबंधकों में प्रकाशित करना
-अधिक जानकारी के लिए कृपया यहाँ देखें।
-
-हमसे संपर्क करें 🌐
-𝕏 (ट्विटर) <br />
-वेबसाइट <br />
-डिस्कॉर्ड <br />
-लिंक्डइन
-
-ट्रेडमार्क
-नाम
-
-ब्रूनो एक ट्रेडमार्क है जो अनूप एम डी के स्वामित्व में है।
-
-लोगो
-
-लोगो OpenMoji से लिया गया है। लाइसेंस: CC BY-SA 4.0
-
-योगदान 👩‍💻🧑‍💻
-हमें खुशी है कि आप ब्रूनो को बेहतर बनाने में रुचि रखते हैं। कृपया योगदान गाइड देखें।
-
-यदि आप सीधे कोड के माध्यम से योगदान नहीं कर सकते, तो भी कृपया बग्स की रिपोर्ट करने और उन सुविधाओं का अनुरोध करने में संकोच न करें जिन्हें आपकी स्थिति को हल करने के लिए लागू किया जाना चाहिए।
-
-लेखक
-<div align="center"> <a href="https://github.com/usebruno/bruno/graphs/contributors"> <img src="https://contrib.rocks/image?repo=usebruno/bruno" /> </a> </div>
-
-लाइसेंस 📄
-MIT
-

docs/readme/readme_it.md

@@ -59,11 +59,12 @@ snap install bruno
 
 # Su Linux tramite Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### Funziona su diverse piattaforme 🖥️

docs/readme/readme_ja.md

@@ -78,11 +78,12 @@ flatpak install com.usebruno.Bruno
 
 # LinuxでAptを使ってインストール
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### マルチプラットフォームでの実行に対応 🖥️

docs/readme/readme_kr.md

@@ -59,11 +59,12 @@ snap install bruno
 
 # On Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### 여러 플랫폼에서 실행하세요. 🖥️

docs/readme/readme_pl.md

@@ -69,11 +69,12 @@ flatpak install com.usebruno.Bruno
 
 # On Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+
 echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### Uruchom na wielu platformach 🖥️

docs/readme/readme_pt_br.md

@@ -76,11 +76,12 @@ flatpak install com.usebruno.Bruno
 
 # No Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### Execute em várias plataformas 🖥️

docs/readme/readme_ro.md

@@ -59,11 +59,12 @@ snap install bruno
 
 # Pe Linux cu Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### Utilizați pe mai multe platforme 🖥️

docs/readme/readme_tr.md

@@ -63,11 +63,12 @@ snap install bruno
 
 # Apt aracılığıyla Linux'ta
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### Birden fazla platformda çalıştırın 🖥️

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)
 
-Навіть якщо ви не можете зробити свій внесок пишучи код, будь ласка не соромтесь рапортувати про помилки і писати запити на новий функціонал, який потрібен вам у вашій роботі.
+Навіть якщо ви не можете зробити свій внесок пишучи програмний код, будь ласка не соромтесь рапортувати про помилки і писати запити на новий функціонал, який потрібен вам у вашій роботі.
 
 ### Автори
 

docs/readme/readme_zhtw.md

@@ -63,11 +63,12 @@ snap install bruno
 
 # 在 Linux 上使用 Apt 安裝
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg
-sudo gpg --list-keys
 sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 ```
 
 ### 跨多個平台運行 🖥️

e2e-tests/001-sanity-tests/001-home-screen.spec.ts

@@ -1,5 +0,0 @@
-import { test, expect } from '../../playwright';
-
-test('Check if the logo on top left is visible', async ({ page }) => {
-  await expect(page.getByRole('button', { name: 'bruno' })).toBeVisible();
-});

e2e-tests/001-sanity-tests/002-create-new-collection-and-new-request.spec.ts

@@ -1,31 +0,0 @@
-import { test, expect } from '../../playwright';
-
-test('Create new collection and add a simple HTTP request', async ({ page, createTmpDir }) => {
-  await page.getByLabel('Create Collection').click();
-  await page.getByLabel('Name').click();
-  await page.getByLabel('Name').fill('test-collection');
-  await page.getByLabel('Name').press('Tab');
-  await page.getByLabel('Location').fill(await createTmpDir('test-collection'));
-  await page.getByRole('button', { name: 'Create', exact: true }).click();
-  await page.getByText('test-collection').click();
-  await page.getByLabel('Safe Mode').check();
-  await page.getByRole('button', { name: 'Save' }).click();
-  await page.locator('#create-new-tab').getByRole('img').click();
-  await page.getByPlaceholder('Request Name').fill('r1');
-  await page.locator('#new-request-url .CodeMirror').click();
-  await page.locator('textarea').fill('http://localhost:8081');
-  await page.getByRole('button', { name: 'Create' }).click();
-  await page.locator('#request-url .CodeMirror').click();
-  await page.locator('textarea').fill('/ping');
-  await page.locator('#send-request').getByRole('img').nth(2).click();
-
-  await expect(page.getByRole('main')).toContainText('200 OK');
-
-  await page.getByRole('tab', { name: 'GET r1' }).locator('circle').click();
-  await page.getByRole('button', { name: 'Save', exact: true }).click();
-  await page.getByText('GETr1').click();
-  await page.getByRole('button', { name: 'Clear response' }).click();
-  await page.locator('body').press('ControlOrMeta+Enter');
-
-  await expect(page.getByRole('main')).toContainText('200 OK');
-});

e2e-tests/bruno-testbench/init-user-data/preferences.json

@@ -1,4 +0,0 @@
-{
-  "maximized": true,
-  "lastOpenedCollections": ["{{projectRoot}}/packages/bruno-tests/collection"]
-}

e2e-tests/bruno-testbench/run-testbench-requests.spec.ts

@@ -1,49 +0,0 @@
-import { test, expect } from '../../playwright';
-
-test.describe.parallel('Run Testbench Requests', () => {
-  test('Run bruno-testbench in Developer Mode', async ({ pageWithUserData: page }) => {
-    test.setTimeout(2 * 60 * 1000);
-
-    await page.getByText('bruno-testbench').click();
-    await page.getByLabel('Developer Mode(use only if').check();
-    await page.getByRole('button', { name: 'Save' }).click();
-    await page.locator('.environment-selector').nth(1).click();
-    await page.locator('.dropdown-item').getByText('Prod').click();
-    await page.locator('.collection-actions').hover();
-    await page.locator('.collection-actions .icon').click();
-    await page.getByText('Run', { exact: true }).click();
-    await page.getByRole('button', { name: 'Run Collection' }).click();
-    await page.getByRole('button', { name: 'Run Again' }).waitFor({ timeout: 2 * 60 * 1000 });
-
-    const result = await page.getByText('Total Requests: ').innerText();
-    const [totalRequests, passed, failed, skipped] = result
-      .match(/Total Requests: (\d+), Passed: (\d+), Failed: (\d+), Skipped: (\d+)/)
-      .slice(1);
-
-    await expect(parseInt(failed)).toBe(0);
-    await expect(parseInt(passed)).toBe(parseInt(totalRequests) - parseInt(skipped) - parseInt(failed));
-  });
-
-  test.fixme('Run bruno-testbench in Safe Mode', async ({ pageWithUserData: page }) => {
-    test.setTimeout(2 * 60 * 1000);
-
-    await page.getByText('bruno-testbench').click();
-    await page.getByLabel('Safe Mode').check();
-    await page.getByRole('button', { name: 'Save' }).click();
-    await page.locator('.environment-selector').nth(1).click();
-    await page.locator('.dropdown-item').getByText('Prod').click();
-    await page.locator('.collection-actions').hover();
-    await page.locator('.collection-actions .icon').click();
-    await page.getByText('Run', { exact: true }).click();
-    await page.getByRole('button', { name: 'Run Collection' }).click();
-    await page.getByRole('button', { name: 'Run Again' }).waitFor({ timeout: 2 * 60 * 1000 });
-
-    const result = await page.getByText('Total Requests: ').innerText();
-    const [totalRequests, passed, failed, skipped] = result
-      .match(/Total Requests: (\d+), Passed: (\d+), Failed: (\d+), Skipped: (\d+)/)
-      .slice(1);
-
-    await expect(parseInt(failed)).toBe(0);
-    await expect(parseInt(passed)).toBe(parseInt(totalRequests) - parseInt(skipped) - parseInt(failed));
-  });
-});

e2e-tests/preferences/verify-support-links-in-preferences.spec.js

@@ -1,27 +0,0 @@
-import { test, expect } from '../../playwright';
-
-test('Should verify all support links with correct URL in preference > Support tab', async ({ page }) => {
-
-   // Open Preferences
-   await page.getByLabel('Open Preferences').click();
-   
-   // Verify Support tab
-   await page.getByRole('tab', { name: 'Support' }).click();
-
-   const locator_twitter = page.getByRole('link', { name: 'Twitter' });
-   expect(await locator_twitter.getAttribute('href')).toEqual('https://twitter.com/use_bruno');
-
-   const locator_github = page.getByRole('link', { name: 'GitHub', exact: true });
-   expect(await locator_github.getAttribute('href')).toEqual('https://github.com/usebruno/bruno');
-
-   const locator_discord = page.getByRole('link', { name: 'Discord', exact: true });
-   expect(await locator_discord.getAttribute('href')).toEqual('https://discord.com/invite/KgcZUncpjq');
-
-   const locator_reportissues = page.getByRole('link', { name: 'Report Issues', exact: true });
-   expect(await locator_reportissues.getAttribute('href')).toEqual('https://github.com/usebruno/bruno/issues');
-
-   const locator_documentation = page.getByRole('link', { name: 'Documentation', exact: true });
-   expect(await locator_documentation.getAttribute('href')).toEqual('https://docs.usebruno.com');
-
-  
-});

eslint.config.js

@@ -1,54 +0,0 @@
-// eslint.config.js
-const { defineConfig } = require("eslint/config");
-const globals = require("globals");
-
-module.exports = defineConfig([
-  {
-    files: ["packages/bruno-app/**/*.{js,jsx,ts}"],
-    ignores: ["**/*.config.js"],
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.jest,
-        global: false,
-        require: false,
-        Buffer: false,
-        process: false
-      },
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  },
-  {
-    // It prevents lint errors when using CommonJS exports (module.exports) in Jest mocks.
-    files: ["packages/bruno-app/src/test-utils/mocks/codemirror.js"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest,
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  },
-  {
-    files: ["packages/bruno-electron/**/*.{js}"],
-    ignores: ["**/*.config.js"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest,
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  }
-]);

package.json

@@ -6,49 +6,37 @@
     "packages/bruno-electron",
     "packages/bruno-cli",
     "packages/bruno-common",
-    "packages/bruno-converters",
     "packages/bruno-schema",
     "packages/bruno-query",
     "packages/bruno-js",
     "packages/bruno-lang",
     "packages/bruno-tests",
     "packages/bruno-toml",
-    "packages/bruno-graphql-docs",
-    "packages/bruno-requests"
+    "packages/bruno-graphql-docs"
   ],
   "homepage": "https://usebruno.com",
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
-    "@playwright/test": "^1.51.1",
+    "@playwright/test": "^1.27.1",
     "@types/jest": "^29.5.11",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.14.1",
     "concurrently": "^8.2.2",
-    "eslint": "^9.26.0",
     "fs-extra": "^11.1.1",
-    "globals": "^16.1.0",
+    "husky": "^8.0.3",
     "jest": "^29.2.0",
-    "lodash-es": "^4.17.21",
-    "playwright": "^1.51.1",
     "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",
-    "watch:converters": "npm run watch --workspace=packages/bruno-converters",
     "dev": "concurrently --kill-others \"npm run dev:web\" \"npm run dev:electron\"",
-    "dev:watch": "node ./scripts/dev-hot-reload.js",
     "dev:web": "npm run dev --workspace=packages/bruno-app",
     "build:web": "npm run build --workspace=packages/bruno-app",
     "prettier:web": "npm run prettier --workspace=packages/bruno-app",
     "dev:electron": "npm run dev --workspace=packages/bruno-electron",
-    "dev:electron:debug": "npm run debug --workspace=packages/bruno-electron",
     "build:bruno-common": "npm run build --workspace=packages/bruno-common",
-    "build:bruno-requests": "npm run build --workspace=packages/bruno-requests",
-    "build:bruno-converters": "npm run build --workspace=packages/bruno-converters",
     "build:bruno-query": "npm run build --workspace=packages/bruno-query",
     "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
     "build:electron": "node ./scripts/build-electron.js",
@@ -58,18 +46,12 @@
     "build:electron:deb": "./scripts/build-electron.sh deb",
     "build:electron:rpm": "./scripts/build-electron.sh rpm",
     "build:electron:snap": "./scripts/build-electron.sh snap",
-    "watch:common": "npm run watch --workspace=packages/bruno-common",
-    "test:codegen": "node playwright/codegen.ts",
-    "test:e2e": "playwright test",
+    "test:e2e": "npx playwright test",
+    "test:report": "npx playwright show-report",
     "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
-    "lint": "node --max_old_space_size=4096 $(npx which eslint)"
+    "prepare": "husky install"
   },
   "overrides": {
-    "rollup": "3.29.5",
-    "electron-store": {
-      "conf": {
-        "json-schema-typed": "8.0.1"
-      }
-    }
+    "rollup": "3.29.5"
   }
-}
+}

packages/bruno-app/.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": ["@babel/preset-env"],
   "plugins": [["styled-components", { "ssr": true }]]
 }

packages/bruno-app/babel.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  presets: [
-    '@babel/preset-env',
-    ['@babel/preset-react', {
-      runtime: 'automatic'
-    }]
-  ],
-  plugins: ['babel-plugin-styled-components']
-};

packages/bruno-app/jest.config.js

@@ -1,11 +1,5 @@
 module.exports = {
   rootDir: '.',
-  transform: {
-    '^.+\\.[jt]sx?$': 'babel-jest',
-  },
-  transformIgnorePatterns: [
-    "/node_modules/(?!strip-json-comments|nanoid|xml-formatter)/",
-  ],
   moduleNameMapper: {
     '^assets/(.*)$': '<rootDir>/src/assets/$1',
     '^components/(.*)$': '<rootDir>/src/components/$1',
@@ -14,17 +8,9 @@ module.exports = {
     '^api/(.*)$': '<rootDir>/src/api/$1',
     '^pageComponents/(.*)$': '<rootDir>/src/pageComponents/$1',
     '^providers/(.*)$': '<rootDir>/src/providers/$1',
-    '^utils/(.*)$': '<rootDir>/src/utils/$1',
-    '^test-utils/(.*)$': '<rootDir>/src/test-utils/$1'
+    '^utils/(.*)$': '<rootDir>/src/utils/$1'
   },
   clearMocks: true,
   moduleDirectories: ['node_modules', 'src'],
-  testEnvironment: 'jsdom',
-  setupFilesAfterEnv: ['@testing-library/jest-dom'],
-  setupFiles: [
-    '<rootDir>/jest.setup.js',
-  ],
-  testMatch: [
-    '<rootDir>/src/**/*.spec.[jt]s?(x)'
-  ]
-};
+  testEnvironment: 'node'
+};

packages/bruno-app/jest.setup.js

@@ -1,11 +0,0 @@
-jest.mock('nanoid', () => {
-  return {
-    nanoid: () => {}
-  };
-});
-
-jest.mock('strip-json-comments', () => {
-  return {
-    stripJsonComments: (str) => str
-  };
-});

packages/bruno-app/jsconfig.json

@@ -6,7 +6,6 @@
     "baseUrl": "./",
     "paths": {
       "assets/*": ["src/assets/*"],
-      "ui/*": ["src/ui/*"],
       "components/*": ["src/components/*"],
       "hooks/*": ["src/hooks/*"],
       "themes/*": ["src/themes/*"],

packages/bruno-app/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@usebruno/app",
-  "version": "2.0.0",
-  "license": "MIT",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "dev": "rsbuild dev",
@@ -12,6 +11,7 @@
     "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
   },
   "dependencies": {
+    "@babel/preset-env": "^7.26.0",
     "@fontsource/inter": "^5.0.15",
     "@prantlf/jsonlint": "^16.0.0",
     "@reduxjs/toolkit": "^1.8.0",
@@ -20,11 +20,11 @@
     "@usebruno/common": "0.1.0",
     "@usebruno/graphql-docs": "0.1.0",
     "@usebruno/schema": "0.7.0",
+    "axios": "1.7.5",
     "classnames": "^2.3.1",
     "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 +34,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",
@@ -67,44 +64,33 @@
     "react-hot-toast": "^2.4.0",
     "react-i18next": "^15.0.1",
     "react-inspector": "^6.0.2",
-    "react-json-view": "^1.21.3",
     "react-pdf": "9.1.1",
     "react-player": "^2.16.0",
     "react-redux": "^7.2.9",
     "react-tooltip": "^5.5.2",
     "sass": "^1.46.0",
-    "semver": "^7.7.1",
-    "shell-quote": "^1.8.3",
     "strip-json-comments": "^5.0.1",
     "styled-components": "^5.3.3",
     "system": "^2.0.1",
     "url": "^0.11.3",
     "xml-formatter": "^3.5.0",
+    "yargs-parser": "^21.1.1",
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.1",
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-react": "^7.27.1",
     "@rsbuild/core": "^1.1.2",
     "@rsbuild/plugin-babel": "^1.0.3",
     "@rsbuild/plugin-node-polyfill": "^1.2.0",
     "@rsbuild/plugin-react": "^1.0.7",
     "@rsbuild/plugin-sass": "^1.1.0",
     "@rsbuild/plugin-styled-components": "1.1.0",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
     "autoprefixer": "10.4.20",
-    "babel-jest": "^29.7.0",
     "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
-    "babel-plugin-styled-components": "^2.1.4",
     "cross-env": "^7.0.3",
     "css-loader": "7.1.2",
     "file-loader": "^6.2.0",
     "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.5.0",
-    "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.4.5",
     "postcss": "8.4.47",
     "style-loader": "^3.3.1",

packages/bruno-app/rsbuild.config.mjs

@@ -19,12 +19,7 @@ export default defineConfig({
     })
   ],
   source: {
-    tsconfigPath: './jsconfig.json', // Specifies the path to the JavaScript/TypeScript configuration file,
-    exclude: [
-      '**/test-utils/**',
-      '**/*.test.*',
-      '**/*.spec.*'
-    ]
+    tsconfigPath: './jsconfig.json', // Specifies the path to the JavaScript/TypeScript configuration file
   },
   html: {
     title: 'Bruno'
@@ -39,16 +34,6 @@ export default defineConfig({
           },
         },
       },
-      ignoreWarnings: [
-        (warning) =>  warning.message.includes('Critical dependency: the request of a dependency is an expression') && warning?.moduleDescriptor?.name?.includes('flow-parser')
-      ],
-      // Add externals configuration to exclude Node.js libraries
-      externals: {
-        // List specific Node.js modules you want to exclude
-        // Format: 'module-name': 'commonjs module-name'
-        'worker_threads': 'commonjs worker_threads',
-        // 'path': 'commonjs path'
-      }
     },
   }
 });

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/BulkEditor/index.js

@@ -1,40 +0,0 @@
-import React, { useMemo } from 'react';
-import CodeEditor from 'components/CodeEditor';
-import { useTheme } from 'providers/Theme';
-import { useSelector } from 'react-redux';
-import { parseBulkKeyValue, serializeBulkKeyValue } from 'utils/common/bulkKeyValueUtils';
-
-const BulkEditor = ({ params, onChange, onToggle, onSave, onRun }) => {
-  const preferences = useSelector((state) => state.app.preferences);
-  const { displayedTheme } = useTheme();
-
-  const parsedParams = useMemo(() => serializeBulkKeyValue(params), [params]);
-
-  const handleEdit = (value) => {
-    const parsed = parseBulkKeyValue(value);
-    onChange(parsed);
-  };
-
-  return (
-    <>
-      <div className="h-[200px]">
-        <CodeEditor
-          mode="text/plain"
-          theme={displayedTheme}
-          font={preferences.codeFont || 'default'}
-          value={parsedParams}
-          onEdit={handleEdit}
-          onSave={onSave}
-          onRun={onRun}
-        />
-      </div>
-      <div className="flex btn-action justify-between items-center mt-3">
-        <button className="text-link select-none ml-auto" onClick={onToggle}>
-          Key/Value Edit
-        </button>
-      </div>
-    </>
-  );
-};
-
-export default BulkEditor;

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

@@ -8,8 +8,6 @@ const StyledWrapper = styled.div`
     font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : 'inherit')};
     line-break: anywhere;
     flex: 1 1 0;
-    display: flex;
-    flex-direction: column-reverse;
   }
 
   /* Removes the glow outline around the folded json */
@@ -28,10 +26,6 @@ const StyledWrapper = styled.div`
 
   .CodeMirror-dialog {
     overflow: visible;
-    position: relative;
-    top: unset;
-    left: unset;
-
     input {
       background: transparent;
       border: 1px solid #d3d6db;
@@ -102,13 +96,6 @@ const StyledWrapper = styled.div`
   .cm-s-default span.cm-variable {
     color: #397d13 !important;
   }
-  
-  //matching bracket fix
-  .CodeMirror-matchingbracket {
-    background: #5cc0b48c !important;
-    text-decoration:unset;
-  }
-
 `;
 
 export default StyledWrapper;

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

@@ -8,19 +8,112 @@
 import React from 'react';
 import { isEqual, escapeRegExp } from 'lodash';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
-import { setupAutoComplete } from 'utils/codemirror/autocomplete';
 import StyledWrapper from './StyledWrapper';
 import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
 
-const CodeMirror = require('codemirror');
-window.jsonlint = jsonlint;
-window.JSHINT = JSHINT;
-
+let CodeMirror;
+const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 const TAB_SIZE = 2;
 
+if (!SERVER_RENDERED) {
+  CodeMirror = require('codemirror');
+  window.jsonlint = jsonlint;
+  window.JSHINT = JSHINT;
+  //This should be done dynamically if possible
+  const hintWords = [
+    'res',
+    'res.status',
+    'res.statusText',
+    'res.headers',
+    'res.body',
+    'res.responseTime',
+    'res.getStatus()',
+    'res.getHeader(name)',
+    'res.getHeaders()',
+    'res.getBody()',
+    'res.getResponseTime()',
+    'req',
+    'req.url',
+    'req.method',
+    'req.headers',
+    'req.body',
+    'req.timeout',
+    'req.getUrl()',
+    'req.setUrl(url)',
+    'req.getMethod()',
+    'req.getAuthMode()',
+    'req.setMethod(method)',
+    'req.getHeader(name)',
+    'req.getHeaders()',
+    'req.setHeader(name, value)',
+    'req.setHeaders(data)',
+    'req.getBody()',
+    'req.setBody(data)',
+    'req.setMaxRedirects(maxRedirects)',
+    'req.getTimeout()',
+    'req.setTimeout(timeout)',
+    'req.getExecutionMode()',
+    'bru',
+    'bru.cwd()',
+    'bru.getEnvName()',
+    'bru.getProcessEnv(key)',
+    'bru.hasEnvVar(key)',
+    'bru.getEnvVar(key)',
+    'bru.getFolderVar(key)',
+    'bru.getCollectionVar(key)',
+    'bru.setEnvVar(key,value)',
+    'bru.deleteEnvVar(key)',
+    'bru.hasVar(key)',
+    'bru.getVar(key)',
+    'bru.setVar(key,value)',
+    'bru.deleteVar(key)',
+    'bru.deleteAllVars()',
+    'bru.setNextRequest(requestName)',
+    'req.disableParsingResponseJson()',
+    'bru.getRequestVar(key)',
+    'bru.sleep(ms)',
+    'bru.getGlobalEnvVar(key)',
+    'bru.setGlobalEnvVar(key, value)',
+    'bru.runner',
+    'bru.runner.setNextRequest(requestName)',
+    'bru.runner.skipRequest()',
+    'bru.runner.stopExecution()'
+  ];
+  CodeMirror.registerHelper('hint', 'brunoJS', (editor, options) => {
+    const cursor = editor.getCursor();
+    const currentLine = editor.getLine(cursor.line);
+    let startBru = cursor.ch;
+    let endBru = startBru;
+    while (endBru < currentLine.length && /[\w.]/.test(currentLine.charAt(endBru))) ++endBru;
+    while (startBru && /[\w.]/.test(currentLine.charAt(startBru - 1))) --startBru;
+    let curWordBru = startBru != endBru && currentLine.slice(startBru, endBru);
+
+    let start = cursor.ch;
+    let end = start;
+    while (end < currentLine.length && /[\w]/.test(currentLine.charAt(end))) ++end;
+    while (start && /[\w]/.test(currentLine.charAt(start - 1))) --start;
+    const jsHinter = CodeMirror.hint.javascript;
+    let result = jsHinter(editor) || { list: [] };
+    result.to = CodeMirror.Pos(cursor.line, end);
+    result.from = CodeMirror.Pos(cursor.line, start);
+    if (curWordBru) {
+      hintWords.forEach((h) => {
+        if (h.includes('.') == curWordBru.includes('.') && h.startsWith(curWordBru)) {
+          result.list.push(curWordBru.includes('.') ? h.split('.')?.at(-1) : h);
+        }
+      });
+      result.list?.sort();
+    }
+    return result;
+  });
+  CodeMirror.commands.autocomplete = (cm, hint, options) => {
+    cm.showHint({ hint, ...options });
+  };
+}
+
 export default class CodeEditor extends React.Component {
   constructor(props) {
     super(props);
@@ -40,17 +133,12 @@ export default class CodeEditor extends React.Component {
   }
 
   componentDidMount() {
-    const variables = getAllVariables(this.props.collection, this.props.item);
-
     const editor = (this.editor = CodeMirror(this._node, {
       value: this.props.value || '',
       lineNumbers: true,
       lineWrapping: true,
       tabSize: TAB_SIZE,
       mode: this.props.mode || 'application/ld+json',
-      brunoVarInfo: {
-        variables
-      },
       keyMap: 'sublime',
       autoCloseBrackets: true,
       matchBrackets: true,
@@ -83,21 +171,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();
@@ -116,20 +194,8 @@ export default class CodeEditor extends React.Component {
         'Cmd-Y': 'foldAll',
         'Ctrl-I': 'unfoldAll',
         'Cmd-I': 'unfoldAll',
-        'Ctrl-/': () => {
-          if (['application/ld+json', 'application/json'].includes(this.props.mode)) {
-            this.editor.toggleComment({ lineComment: '//', blockComment: '/*' });
-          } else {
-            this.editor.toggleComment();
-          }
-        },
-        'Cmd-/': () => {
-          if (['application/ld+json', 'application/json'].includes(this.props.mode)) {
-            this.editor.toggleComment({ lineComment: '//', blockComment: '/*' });
-          } else {
-            this.editor.toggleComment();
-          }
-        }
+        'Ctrl-/': 'toggleComment',
+        'Cmd-/': 'toggleComment'
       },
       foldOptions: {
         widget: (from, to) => {
@@ -182,24 +248,30 @@ export default class CodeEditor extends React.Component {
       }
       return found;
     });
-    
     if (editor) {
       editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
       editor.on('change', this._onEdit);
       this.addOverlay();
-
-      const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
-      
-      // Setup AutoComplete Helper for all modes
-      const autoCompleteOptions = {
-        showHintsFor: this.props.showHintsFor,
-        getAllVariables: getAllVariablesHandler
-      };
-
-      this.brunoAutoCompleteCleanup = setupAutoComplete(
-        editor,
-        autoCompleteOptions
-      );
+    }
+    if (this.props.mode == 'javascript') {
+      editor.on('keyup', function (cm, event) {
+        const cursor = editor.getCursor();
+        const currentLine = editor.getLine(cursor.line);
+        let start = cursor.ch;
+        let end = start;
+        while (end < currentLine.length && /[^{}();\s\[\]\,]/.test(currentLine.charAt(end))) ++end;
+        while (start && /[^{}();\s\[\]\,]/.test(currentLine.charAt(start - 1))) --start;
+        let curWord = start != end && currentLine.slice(start, end);
+        // Qualify if autocomplete will be shown
+        if (
+          /^(?!Shift|Tab|Enter|Escape|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Meta|Alt|Home|End\s)\w*/.test(event.key) &&
+          curWord.length > 0 &&
+          !/\/\/|\/\*|.*{{|`[^$]*{|`[^{]*$/.test(currentLine.slice(0, end)) &&
+          /(?<!\d)[a-zA-Z\._]$/.test(curWord)
+        ) {
+          CodeMirror.commands.autocomplete(cm, CodeMirror.hint.brunoJS, { completeSingle: false });
+        }
+      });
     }
   }
 
@@ -240,9 +312,6 @@ export default class CodeEditor extends React.Component {
     }
 
     this._unbindSearchHandler();
-    if (this.brunoAutoCompleteCleanup) {
-      this.brunoAutoCompleteCleanup();
-    }
   }
 
   render() {
@@ -267,7 +336,7 @@ export default class CodeEditor extends React.Component {
     let variables = getAllVariables(this.props.collection, this.props.item);
     this.variables = variables;
 
-    defineCodeMirrorBrunoVariablesMode(variables, mode, false, this.props.enableVariableHighlighting);
+    defineCodeMirrorBrunoVariablesMode(variables, mode);
     this.editor.setOption('mode', 'brunovariables');
   };
 
@@ -281,10 +350,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/CodeEditor/index.spec.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { render, act } from '@testing-library/react';
-import CodeEditor from './index';
-import { ThemeProvider } from 'styled-components';
-
-jest.mock('codemirror', () => {
-  const codemirror = require('test-utils/mocks/codemirror');
-  return codemirror;
-});
-
-const MOCK_THEME = {
-  codemirror: {
-    bg: "#1e1e1e",
-    border: "#333",
-  },
-  textLink: "#007acc",
-};
-
-const setupEditorState = (editor, { value, cursorPosition }) => {
-  editor._currentValue = value;
-  editor.getCursor.mockReturnValue({ line: 0, ch: cursorPosition });
-  editor.getRange.mockImplementation((from, to) => {
-    if (from.line === 0 && from.ch === 0 && to.line === 0 && to.ch === cursorPosition) {
-      return value;
-    }
-    return editor._currentValue.slice(from.ch, to.ch);
-  });
-
-  editor.state = {
-    completionActive: null,
-  }
-};
-
-const setupEditorWithRef = () => {
-  const ref = React.createRef();
-  const { rerender } = render(
-    <ThemeProvider theme={MOCK_THEME}>
-      <CodeEditor ref={ref} />
-    </ThemeProvider>
-  );
-  return { ref, rerender };
-};
-
-describe('CodeEditor', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    jest.resetModules();
-  });
-
-  it("add CodeEditor related tests here", () => {});
-});

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/AwsV4Auth/index.js

@@ -21,12 +21,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: accessKeyId || '',
-          secretAccessKey: awsv4Auth.secretAccessKey || '',
-          sessionToken: awsv4Auth.sessionToken || '',
-          service: awsv4Auth.service || '',
-          region: awsv4Auth.region || '',
-          profileName: awsv4Auth.profileName || ''
+          accessKeyId: accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
         }
       })
     );
@@ -38,12 +38,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId || '',
-          secretAccessKey: secretAccessKey || '',
-          sessionToken: awsv4Auth.sessionToken || '',
-          service: awsv4Auth.service || '',
-          region: awsv4Auth.region || '',
-          profileName: awsv4Auth.profileName || ''
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
         }
       })
     );
@@ -55,12 +55,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId || '',
-          secretAccessKey: awsv4Auth.secretAccessKey || '',
-          sessionToken: sessionToken || '',
-          service: awsv4Auth.service || '',
-          region: awsv4Auth.region || '',
-          profileName: awsv4Auth.profileName || ''
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
         }
       })
     );
@@ -72,12 +72,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId || '',
-          secretAccessKey: awsv4Auth.secretAccessKey || '',
-          sessionToken: awsv4Auth.sessionToken || '',
-          service: service || '',
-          region: awsv4Auth.region || '',
-          profileName: awsv4Auth.profileName || ''
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: service,
+          region: awsv4Auth.region,
+          profileName: awsv4Auth.profileName
         }
       })
     );
@@ -89,12 +89,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId || '',
-          secretAccessKey: awsv4Auth.secretAccessKey || '',
-          sessionToken: awsv4Auth.sessionToken || '',
-          service: awsv4Auth.service || '',
-          region: region || '',
-          profileName: awsv4Auth.profileName || ''
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: region,
+          profileName: awsv4Auth.profileName
         }
       })
     );
@@ -106,12 +106,12 @@ const AwsV4Auth = ({ collection }) => {
         mode: 'awsv4',
         collectionUid: collection.uid,
         content: {
-          accessKeyId: awsv4Auth.accessKeyId || '',
-          secretAccessKey: awsv4Auth.secretAccessKey || '',
-          sessionToken: awsv4Auth.sessionToken || '',
-          service: awsv4Auth.service || '',
-          region: awsv4Auth.region || '',
-          profileName: profileName || ''
+          accessKeyId: awsv4Auth.accessKeyId,
+          secretAccessKey: awsv4Auth.secretAccessKey,
+          sessionToken: awsv4Auth.sessionToken,
+          service: awsv4Auth.service,
+          region: awsv4Auth.region,
+          profileName: profileName
         }
       })
     );

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

@@ -21,8 +21,8 @@ const BasicAuth = ({ collection }) => {
         mode: 'basic',
         collectionUid: collection.uid,
         content: {
-          username: username || '',
-          password: basicAuth.password || ''
+          username: username,
+          password: basicAuth.password
         }
       })
     );
@@ -34,8 +34,8 @@ const BasicAuth = ({ collection }) => {
         mode: 'basic',
         collectionUid: collection.uid,
         content: {
-          username: basicAuth.username || '',
-          password: password || ''
+          username: basicAuth.username,
+          password: password
         }
       })
     );

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

@@ -21,8 +21,8 @@ const DigestAuth = ({ collection }) => {
         mode: 'digest',
         collectionUid: collection.uid,
         content: {
-          username: username || '',
-          password: digestAuth.password || ''
+          username: username,
+          password: digestAuth.password
         }
       })
     );
@@ -34,8 +34,8 @@ const DigestAuth = ({ collection }) => {
         mode: 'digest',
         collectionUid: collection.uid,
         content: {
-          username: digestAuth.username || '',
-          password: password || ''
+          username: digestAuth.username,
+          password: password
         }
       })
     );

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

@@ -28,9 +28,9 @@ const NTLMAuth = ({ collection }) => {
         mode: 'ntlm',
         collectionUid: collection.uid,
         content: {
-          username: username || '',
-          password: ntlmAuth.password || '',
-          domain: ntlmAuth.domain || ''
+          username: username,
+          password: ntlmAuth.password,
+          domain: ntlmAuth.domain
 
         }
       })
@@ -43,9 +43,9 @@ const NTLMAuth = ({ collection }) => {
         mode: 'ntlm',
         collectionUid: collection.uid,
         content: {
-          username: ntlmAuth.username || '',
-          password: password || '',
-          domain: ntlmAuth.domain || ''
+          username: ntlmAuth.username,
+          password: password,
+          domain: ntlmAuth.domain
         }
       })
     );
@@ -57,9 +57,9 @@ const NTLMAuth = ({ collection }) => {
         mode: 'ntlm',
         collectionUid: collection.uid,
         content: {
-          username: ntlmAuth.username || '',
-          password: ntlmAuth.password || '',
-          domain: domain || ''
+          username: ntlmAuth.username,
+          password: ntlmAuth.password,
+          domain: domain
         }
       })
     );

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

@@ -11,12 +11,6 @@ const Wrapper = styled.div`
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};
   }
-  .inherit-mode-text {
-    color: ${(props) => props.theme.colors.text.yellow};
-  }
-  .auth-mode-label {
-    color: ${(props) => props.theme.colors.text.yellow};
-  }
 `;
 
-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

@@ -7,10 +7,19 @@ const inputsConfig = [
     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'
@@ -21,4 +30,4 @@ const inputsConfig = [
   }
 ];
 
-export { inputsConfig }; 
+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

@@ -1,61 +1,54 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  label {
-    font-size: 0.8125rem;
-  }
-  .oauth2-input-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};
-  }
+  font-size: 0.8125rem;
 
-  .token-placement-selector {
+  .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};
-    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 {
+        .tippy-content: {
           width: fit-content;
           max-width: none !important;
-          min-width: 100px;
         }
       }
     }
 
-    .token-placement-label {
+    .grant-type-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;
     }
+
+    .label-item {
+      padding: 0.2rem 0.6rem !important;
+    }
   }
-  
-  .checkbox-label {
-    color: ${(props) => props.theme.colors.text.primary};
-    user-select: none;
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
+  }
+  label {
+    font-size: 0.8125rem;
   }
 `;
 
-export default Wrapper; 
+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,37 +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 OAuth2Implicit from 'components/RequestPane/Auth/OAuth2/Implicit/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} />;
-      break;
-    case 'implicit':
-      return <OAuth2Implicit save={save} request={request} updateAuth={updateCollectionAuth} collection={collection} />;
+      return <OAuth2ClientCredentials collection={collection} />;
       break;
     default:
       return <div>TBD</div>;
@@ -40,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/Auth/WsseAuth/index.js

@@ -21,8 +21,8 @@ const WsseAuth = ({ collection }) => {
         mode: 'wsse',
         collectionUid: collection.uid,
         content: {
-          username: username || '',
-          password: wsseAuth.password || ''
+          username,
+          password: wsseAuth.password
         }
       })
     );
@@ -34,8 +34,8 @@ const WsseAuth = ({ collection }) => {
         mode: 'wsse',
         collectionUid: collection.uid,
         content: {
-          username: wsseAuth.username || '',
-          password: password || ''
+          username: wsseAuth.username,
+          password
         }
       })
     );

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">
@@ -54,29 +43,14 @@ const Info = ({ collection }) => {
             <div className="ml-4">
               <div className="font-semibold text-sm">Requests</div>
               <div className="mt-1 text-sm text-muted">
-                {
-                  isCollectionLoading? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
-                }
+                {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 collectionUid={collection.uid} 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/Script/index.js

@@ -53,7 +53,6 @@ const Script = ({ collection }) => {
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
           fontSize={get(preferences, 'font.codeFontSize')}
-          showHintsFor={['req', 'bru']}
         />
       </div>
       <div className="flex-1 mt-6">
@@ -67,7 +66,6 @@ const Script = ({ collection }) => {
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
           fontSize={get(preferences, 'font.codeFontSize')}
-          showHintsFor={['req', 'res', 'bru']}
         />
       </div>
 

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

@@ -37,7 +37,6 @@ const Tests = ({ collection }) => {
         onSave={handleSave}
         font={get(preferences, 'font.codeFont', 'default')}
         fontSize={get(preferences, 'font.codeFontSize')}
-        showHintsFor={['req', 'res', 'bru']}
       />
 
       <div className="mt-6">

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/CollectionSettings/index.js

@@ -15,9 +15,17 @@ import Test from './Tests';
 import Presets from './Presets';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
-import StatusDot from 'components/StatusDot';
+import DotIcon from 'components/Icons/Dot';
 import Overview from './Overview/index';
 
+const ContentIndicator = () => {
+  return (
+    <sup className="ml-[.125rem] opacity-80 font-medium">
+      <DotIcon width="10"></DotIcon>
+    </sup>
+  );
+};
+
 const CollectionSettings = ({ collection }) => {
   const dispatch = useDispatch();
   const tab = collection.settingsSelectedTab;
@@ -41,7 +49,7 @@ const CollectionSettings = ({ collection }) => {
   const requestVars = get(collection, 'root.request.vars.req', []);
   const responseVars = get(collection, 'root.request.vars.res', []);
   const activeVarsCount = requestVars.filter((v) => v.enabled).length + responseVars.filter((v) => v.enabled).length;
-  const authMode = get(collection, 'root.request.auth', {}).mode || 'none';
+  const auth = get(collection, 'root.request.auth', {}).mode;
 
   const proxyConfig = get(collection, 'brunoConfig.proxy', {});
   const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
@@ -132,7 +140,7 @@ const CollectionSettings = ({ collection }) => {
   };
 
   return (
-    <StyledWrapper className="flex flex-col h-full relative px-4 py-4 overflow-scroll">
+    <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
       <div className="flex flex-wrap items-center tabs" role="tablist">
       <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
           Overview
@@ -147,29 +155,29 @@ const CollectionSettings = ({ collection }) => {
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
           Auth
-          {authMode !== 'none' && <StatusDot />}
+          {auth !== 'none' && <ContentIndicator />}
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
           Script
-          {hasScripts && <StatusDot />}
+          {hasScripts && <ContentIndicator />}
         </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
           Tests
-          {hasTests && <StatusDot />}
+          {hasTests && <ContentIndicator />}
         </div>
         <div className={getTabClassname('presets')} role="tab" onClick={() => setTab('presets')}>
           Presets
         </div>
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
-          {Object.keys(proxyConfig).length > 0  && <StatusDot />}
+          {Object.keys(proxyConfig).length > 0  && <ContentIndicator />}
         </div>
         <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
           Client Certificates
-          {clientCertConfig.length > 0 && <StatusDot />}
+          {clientCertConfig.length > 0 && <ContentIndicator />}
         </div>
       </div>
-      <section className="mt-4 h-full overflow-scroll">{getTabPanel(tab)}</section>
+      <section className="mt-4 h-full">{getTabPanel(tab)}</section>
     </StyledWrapper>
   );
 };

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>
   );
 };