Merge branch 'main' into fix/json-serialization-issues

* disable response json parse flag

* fix: pr review comments

* update bru req function name

.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

@@ -20,13 +20,10 @@ permissions:
 jobs:
   test:
     name: CLI Tests
-    strategy:
-      matrix:
-        os: [ubuntu-latest, macos-latest]
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
 
@@ -43,7 +40,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

@@ -10,8 +10,6 @@ jobs:
     name: Unit Tests
     timeout-minutes: 60
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -28,8 +26,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
 
       # tests
       - name: Test Package bruno-js
@@ -47,18 +43,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
@@ -75,8 +65,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: |

.nvmrc

@@ -1 +1 @@
-v22.11.0
+v20.9.0

contributing.md

@@ -15,7 +15,6 @@
 | [正體中文](docs/contributing/contributing_zhtw.md)
 | [日本語](docs/contributing/contributing_ja.md)
 | [हिंदी](docs/contributing/contributing_hi.md)
-| [Nederlands](docs/contributing/contributing_nl.md)
 
 ## Let's make Bruno better, together!!
 
@@ -37,27 +36,23 @@ 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 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.
 
-
-## Install Dependencies
+### Local Development
 
 ```bash
-# use nodejs 20 version
+# use nodejs 18 version
 nvm use
 
 # install deps
 npm i --legacy-peer-deps
-```
 
-### Local Development (Option 1)
-
-```bash 
 # build packages
 npm run build:graphql-docs
 npm run build:bruno-query
@@ -66,23 +61,13 @@ npm run build:bruno-common
 # bundle js sandbox libraries
 npm run sandbox:bundle-libraries --workspace=packages/bruno-js
 
-# run react app (terminal 1)
+# run next app (terminal 1)
 npm run dev:web
 
 # run electron app (terminal 2)
 npm run dev:electron
 ```
 
-### Local Development (Option 2)
-
-```bash
-# install dependencies and setup 
-npm run setup 
-
-# run electron and react app concurrently
-npm run dev
-```
-
 ### 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.
@@ -100,11 +85,11 @@ find . -type f -name "package-lock.json" -delete
 ### Testing
 
 ```bash
-# run bruno-schema tests
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# run tests over all workspaces
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Raising Pull Requests

docs/contributing/contributing_bn.md

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| **বাংলা**
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## আসুন ব্রুনোকে আরও ভালো করি, একসাথে!!
 
@@ -70,11 +86,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

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| **简体中文**
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## 让我们一起改进 Bruno！
 
@@ -70,11 +86,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

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| **Deutsch**
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## Lass uns Bruno noch besser machen, gemeinsam!!
 
@@ -21,7 +37,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 +58,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 +99,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,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| **Español**
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## ¡Juntos, hagamos a Bruno mejor!
 
@@ -70,11 +86,11 @@ find . -type f -name "package-lock.json" -delete
 ### Pruebas
 
 ```bash
-# ejecutar pruebas de esquema bruno
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# ejecutar pruebas en todos los espacios de trabajo
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```
 
 ### Crea un Pull Request

docs/contributing/contributing_fr.md

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| **Français**
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## Ensemble, améliorons Bruno !
 
@@ -73,11 +89,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

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| **हिंदी**
 
 ## आइए मिलकर Bruno को बेहतर बनाएं !!
 
@@ -65,11 +81,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

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| **Italiano**
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## Insieme, miglioriamo Bruno!
 
@@ -83,9 +99,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

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| **日本語**
+| [हिंदी](./contributing_hi.md)
 
 ## 一緒に Bruno をよりよいものにしていきましょう！！
 
@@ -65,11 +81,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

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| **한국어**
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## 함께 Bruno를 더 좋게 만들어요!!
 
@@ -66,11 +82,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

@@ -1,82 +0,0 @@
-[English](../../contributing.md)
-
-## Laten we Bruno samen beter maken !!
-
-We zijn blij dat je Bruno wilt verbeteren. Hieronder staan de richtlijnen om Bruno op je computer op te zetten.
-
-### Technologiestack
-
-Bruno is gebouwd met Next.js en React. We gebruiken ook Electron om een desktopversie te leveren (die lokale collecties ondersteunt).
-
-Bibliotheken die we gebruiken:
-
-- CSS - Tailwind
-- Code Editors - Codemirror
-- State Management - Redux
-- Iconen - Tabler Icons
-- Formulieren - formik
-- Schema Validatie - Yup
-- Request Client - axios
-- Bestandsysteem Watcher - chokidar
-
-### Afhankelijkheden
-
-Je hebt [Node v18.x of de nieuwste LTS-versie](https://nodejs.org/en/) en npm 8.x nodig. We gebruiken npm workspaces in het project.
-
-## Ontwikkeling
-
-Bruno wordt ontwikkeld als een desktop-app. Je moet de app laden door de Next.js app in één terminal te draaien en daarna de Electron app in een andere terminal te draaien.
-
-### Lokale Ontwikkeling
-
-```bash
-# gebruik voorgeschreven node versie
-nvm use
-
-# installeer afhankelijkheden
-npm i --legacy-peer-deps
-
-# build pakketten
-npm run build:graphql-docs
-npm run build:bruno-query
-npm run build:bruno-common
-
-# draai next app (terminal 1)
-npm run dev:web
-
-# draai electron app (terminal 2)
-npm run dev:electron
-```
-
-### Problemen oplossen
-
-Je kunt een `Unsupported platform`-fout tegenkomen wanneer je `npm install` uitvoert. Om dit te verhelpen, moet je `node_modules` en `package-lock.json` verwijderen en `npm install` uitvoeren. Dit zou alle benodigde afhankelijkheden moeten installeren om de app te draaien.
-
-```shell
-# Verwijder node_modules in subdirectories
-find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
-  rm -rf "$dir"
-done
-
-# Verwijder package-lock in subdirectories
-find . -type f -name "package-lock.json" -delete
-```
-
-### Testen
-
-```bash
-# voer bruno-schema tests uit
-npm test --workspace=packages/bruno-schema
-
-# voer tests uit over alle werkruimten
-npm test --workspaces --if-present
-```
-
-### Pull Requests indienen
-
-- Houd de PR's klein en gefocust op één ding
-- Volg het formaat voor het aanmaken van branches
-  - feature/[feature naam]: Deze branch moet wijzigingen voor een specifieke functie bevatten
-    - Voorbeeld: feature/dark-mode
-  - bugfix/[bug naam]: Deze branch moet alleen bugfixes voor een specifieke bug bevatten
-    - Voorbeeld: bugfix/bug-1

docs/contributing/contributing_pl.md

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| **Polski**
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## Wspólnie uczynijmy Bruno lepszym !!
 
@@ -71,11 +87,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

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| **Português (BR)**
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## Vamos tornar o Bruno melhor, juntos!!
 
@@ -70,11 +86,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

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| **Română**
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## Haideţi să îmbunătățim Bruno, împreună!!
 
@@ -64,11 +80,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

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| **Русский**
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## Давайте вместе сделаем Бруно лучше!!!
 
@@ -83,9 +99,9 @@ find . -type f -name "package-lock.json" -delete
 ### Тестирование
 
 ```bash
-# запустите тесты bruno-schema
+# bruno-schema
 npm test --workspace=packages/bruno-schema
 
-# запустите тесты во всех рабочих пространствах
-npm test --workspaces --if-present
+# bruno-lang
+npm test --workspace=packages/bruno-lang
 ```

docs/contributing/contributing_sk.md

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

docs/contributing/contributing_tr.md

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| **Türkçe**
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## Bruno'yu birlikte daha iyi hale getirelim!!!
 
@@ -70,11 +86,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

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| **Українська**
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| [正體中文](./contributing_zhtw.md)
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## Давайте зробимо Bruno краще, разом !!
 
@@ -83,9 +99,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

@@ -1,4 +1,20 @@
 [English](../../contributing.md)
+| [Українська](./contributing_ua.md)
+| [Русский](./contributing_ru.md)
+| [Türkçe](./contributing_tr.md)
+| [Deutsch](./contributing_de.md)
+| [Français](./contributing_fr.md)
+| [Português (BR)](./contributing_pt_br.md)
+| [한국어](./contributing_kr.md)
+| [বাংলা](./contributing_bn.md)
+| [Español](./contributing_es.md)
+| [Italiano](./contributing_it.md)
+| [Română](./contributing_ro.md)
+| [Polski](./contributing_pl.md)
+| [简体中文](./contributing_cn.md)
+| **正體中文**
+| [日本語](./contributing_ja.md)
+| [हिंदी](./contributing_hi.md)
 
 ## 讓我們一起來讓 Bruno 變得更好！
 
@@ -70,11 +86,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/publishing/publishing_bn.md

@@ -1,4 +1,14 @@
 [English](../../publishing.md)
+| [Türkçe](./publishing_tr.md)
+| [Deutsch](./publishing_de.md)
+| [Français](./publishing_fr.md)
+| [Português (BR)](./publishing_pt_br.md)
+| **বাংলা**
+| [Română](./publishing_ro.md)
+| [Polski](./publishing_pl.md)
+| [简体中文](./publishing_cn.md)
+| [正體中文](./publishing_zhtw.md)
+| [日本語](./publishing_ja.md)
 
 ### ব্রুনোকে নতুন প্যাকেজ ম্যানেজারে প্রকাশ করা
 

docs/publishing/publishing_cn.md

@@ -1,4 +1,14 @@
 [English](../../publishing.md)
+| [Türkçe](./publishing_tr.md)
+| [Deutsch](./publishing_de.md)
+| [Français](./publishing_fr.md)
+| [Português (BR)](./publishing_pt_br.md)
+| [বাংলা](./publishing_bn.md)
+| [Română](./publishing_ro.md)
+| [Polski](./publishing_pl.md)
+| **简体中文**
+| [正體中文](./publishing_zhtw.md)
+| [日本語](./publishing_ja.md)
 
 ### 将 Bruno 发布到新的包管理器
 

docs/publishing/publishing_de.md

@@ -1,4 +1,14 @@
 [English](../../publishing.md)
+| [Türkçe](./publishing_tr.md)
+| **Deutsch**
+| [Français](./publishing_fr.md)
+| [Português (BR)](./publishing_pt_br.md)
+| [বাংলা](./publishing_bn.md)
+| [Română](./publishing_ro.md)
+| [Polski](./publishing_pl.md)
+| [简体中文](./publishing_cn.md)
+| [正體中文](./publishing_zhtw.md)
+| [日本語](./publishing_ja.md)
 
 ### Veröffentlichung von Bruno über neue Paket-Manager
 

docs/publishing/publishing_fr.md

@@ -1,4 +1,14 @@
 [English](../../publishing.md)
+| [Türkçe](./publishing_tr.md)
+| [Deutsch](./publishing_de.md)
+| **Français**
+| [Português (BR)](./publishing_pt_br.md)
+| [বাংলা](./publishing_bn.md)
+| [Română](./publishing_ro.md)
+| [Polski](./publishing_pl.md)
+| [简体中文](./publishing_cn.md)
+| [正體中文](./publishing_zhtw.md)
+| [日本語](./publishing_ja.md)
 
 ### Publier Bruno dans un nouveau gestionnaire de paquets
 

docs/publishing/publishing_ja.md

@@ -1,4 +1,14 @@
 [English](../../publishing.md)
+| [Türkçe](./publishing_tr.md)
+| [Deutsch](./publishing_de.md)
+| [Français](./publishing_fr.md)
+| [Português (BR)](./publishing_pt_br.md)
+| [বাংলা](./publishing_bn.md)
+| [Română](./publishing_ro.md)
+| [Polski](./publishing_pl.md)
+| [简体中文](./publishing_cn.md)
+| [正體中文](./publishing_zhtw.md)
+| **日本語**
 
 ### Bruno を新しいパッケージマネージャに公開する場合の注意
 

docs/publishing/publishing_nl.md

@@ -1,7 +0,0 @@
-[English](../../publishing.md)
-
-### Bruno publiceren naar een nieuwe pakketbeheerder
-
-Hoewel onze code open source is en beschikbaar voor iedereen, verzoeken we je vriendelijk om contact met ons op te nemen voordat je publicatie overweegt op nieuwe pakketbeheerders. Als de maker van Bruno houd ik het handelsmerk `Bruno` voor dit project en wil ik het distributieproces beheren. Als je Bruno op een nieuwe pakketbeheerder wilt zien, dien dan een GitHub-issue in.
-
-Hoewel de meerderheid van onze functies gratis en open source zijn (die REST en GraphQL API's dekken), streven we ernaar een harmonieuze balans te vinden tussen open-source principes en duurzaamheid - https://github.com/usebruno/bruno/discussions/269

docs/publishing/publishing_pl.md

@@ -1,4 +1,14 @@
 [English](../../publishing.md)
+| [Türkçe](./publishing_tr.md)
+| [Deutsch](./publishing_de.md)
+| [Français](./publishing_fr.md)
+| [Português (BR)](./publishing_pt_br.md)
+| [বাংলা](./publishing_bn.md)
+| [Română](./publishing_ro.md)
+| **Polski**
+| [简体中文](./publishing_cn.md)
+| [正體中文](./publishing_zhtw.md)
+| [日本語](./publishing_ja.md)
 
 ### Publikowanie Bruno w nowym menedżerze pakietów
 

docs/publishing/publishing_pt_br.md

@@ -1,4 +1,14 @@
 [English](../../publishing.md)
+| [Türkçe](./publishing_tr.md)
+| [Deutsch](./publishing_de.md)
+| [Français](./publishing_fr.md)
+| **Português (BR)**
+| [বাংলা](./publishing_bn.md)
+| [Română](./publishing_ro.md)
+| [Polski](./publishing_pl.md)
+| [简体中文](./publishing_cn.md)
+| [正體中文](./publishing_zhtw.md)
+| [日本語](./publishing_ja.md)
 
 ### Publicando Bruno em um novo gerenciador de pacotes
 

docs/publishing/publishing_ro.md

@@ -1,4 +1,14 @@
 [English](../../publishing.md)
+| [Türkçe](./publishing_tr.md)
+| [Deutsch](./publishing_de.md)
+| [Français](./publishing_fr.md)
+| [Português (BR)](./publishing_pt_br.md)
+| [বাংলা](./publishing_bn.md)
+| **Română**
+| [Polski](./publishing_pl.md)
+| [简体中文](./publishing_cn.md)
+| [正體中文](./publishing_zhtw.md)
+| [日本語](./publishing_ja.md)
 
 ### Publicarea lui Bruno la un gestionar de pachete nou
 

docs/publishing/publishing_tr.md

@@ -1,4 +1,14 @@
 [English](../../publishing.md)
+| **Türkçe**
+| [Deutsch](./publishing_de.md)
+| [Français](./publishing_fr.md)
+| [Português (BR)](./publishing_pt_br.md)
+| [বাংলা](./publishing_bn.md)
+| [Română](./publishing_ro.md)
+| [Polski](./publishing_pl.md)
+| [简体中文](./publishing_cn.md)
+| [正體中文](./publishing_zhtw.md)
+| [日本語](./publishing_ja.md)
 
 ### Bruno'yu yeni bir paket yöneticisine yayınlama
 

docs/publishing/publishing_zhtw.md

@@ -1,4 +1,14 @@
 [English](../../publishing.md)
+| [Türkçe](./publishing_tr.md)
+| [Deutsch](./publishing_de.md)
+| [Français](./publishing_fr.md)
+| [Português (BR)](./publishing_pt_br.md)
+| [বাংলা](./publishing_bn.md)
+| [Română](./publishing_ro.md)
+| [Polski](./publishing_pl.md)
+| [简体中文](./publishing_cn.md)
+| **正體中文**
+| [日本語](./publishing_ja.md)
 
 ### 將 Bruno 發佈到新的套件管理器
 

docs/readme/readme_de.md

@@ -39,7 +39,7 @@ Bruno ist ein reines Offline-Tool. Es gibt keine Pläne, Bruno um eine Cloud-Syn
 
 [Download Bruno](https://www.usebruno.com/downloads)
 
-📢 Sieh Dir unseren Vortrag auf der India FOSS 3.0 Conference [hier](https://www.youtube.com/watch?v=7bSMFpbcPiY) an.
+📢 Sehen Sie sich unseren Vortrag auf der India FOSS 3.0 Conference [hier](https://www.youtube.com/watch?v=7bSMFpbcPiY) an.
 
 ![bruno](/assets/images/landing-2.png) <br /><br />
 
@@ -48,13 +48,13 @@ Bruno ist ein reines Offline-Tool. Es gibt keine Pläne, Bruno um eine Cloud-Syn
 Die meisten unserer Funktionen sind kostenlos und quelloffen.
 Wir bemühen uns um ein Gleichgewicht zwischen [Open-Source-Prinzipien und Nachhaltigkeit](https://github.com/usebruno/bruno/discussions/269)
 
-Du kannst die [Golden Edition](https://www.usebruno.com/pricing) bestellen **$19**! <br/>
+Sie können die [Golden Edition](https://www.usebruno.com/pricing) vorbestellen ~~$19~~ **$9** ! <br/>
 
 ### Installation
 
 Bruno ist als Download [auf unserer Website](https://www.usebruno.com/downloads) für Mac, Windows und Linux verfügbar.
 
-Du kannst Bruno auch über Paketmanager wie Homebrew, Chocolatey, Scoop, Snap, Flatpak und Apt installieren.
+Sie können Bruno auch über Paketmanager wie Homebrew, Chocolatey, Scoop, Snap, Flatpak und Apt installieren.
 
 ```sh
 # Auf Mac via Homebrew
@@ -123,11 +123,11 @@ Oder einer Versionskontrolle deiner Wahl
 
 ### Unterstützung ❤️
 
-Wuff! Wenn du dieses Projekt magst, klick auf den ⭐ Button !!
+Wuff! Wenn du dieses Projekt magst, klick den ⭐ Button !!
 
 ### Teile Erfahrungsberichte 📣
 
-Wenn Bruno dir und in deinem Team bei der Arbeit geholfen hat, vergiss bitte nicht, deine [Erfahrungsberichte in unserer GitHub-Diskussion](https://github.com/usebruno/bruno/discussions/343) zu teilen.
+Wenn Bruno dir und in deinen Teams bei der Arbeit geholfen hat, vergiss bitte nicht, deine [Erfahrungsberichte auf unserer GitHub-Diskussion](https://github.com/usebruno/bruno/discussions/343) zu teilen.
 
 ### Bereitstellung in neuen Paket-Managern
 

docs/readme/readme_nl.md

@@ -1,157 +0,0 @@
-<br />
-<img src="../../assets/images/logo-transparent.png" width="80"/>
-
-### Bruno - Open source IDE voor het verkennen en testen van API's.
-
-[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
-[![CI](https://github.com/usebruno/bruno/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/actions/workflows/tests.yml)
-[![Commit Activity](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)
-[![Website](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
-[![Download](https://img.shields.io/badge/Download-Latest-brightgreen)](https://www.usebruno.com/downloads)
-
-[English](../../readme.md) | [Українська](docs/readme/readme_ua.md) | [Русский](docs/readme/readme_ru.md) | [Türkçe](docs/readme/readme_tr.md) | [Deutsch](docs/readme/readme_de.md) | ** Nederlands ** | [Français](docs/readme/readme_fr.md) | [Português (BR)](docs/readme/readme_pt_br.md) | [한국어](docs/readme/readme_kr.md) | [বাংলা](docs/readme/readme_bn.md) | [Español](docs/readme/readme_es.md) | [Italiano](docs/readme/readme_it.md) | [Română](docs/readme/readme_ro.md) | [Polski](docs/readme/readme_pl.md) | [简体中文](docs/readme/readme_cn.md) | [正體中文](docs/readme/readme_zhtw.md) | [العربية](docs/readme/readme_ar.md) | [日本語](docs/readme/readme_ja.md)
-
-Bruno is een nieuwe en innovatieve API-client, gericht op het revolutioneren van de status quo die wordt vertegenwoordigd door Postman en vergelijkbare tools.
-
-Bruno slaat je collecties direct op in een map op je bestandssysteem. We gebruiken een platte tekst opmaaktaal, Bru, om informatie over API-verzoeken op te slaan.
-
-Je kunt Git of elke versiebeheertool naar keuze gebruiken om samen te werken aan je API-collecties.
-
-Bruno is uitsluitend offline. Er zijn geen plannen om ooit cloud-synchronisatie aan Bruno toe te voegen. We waarderen je gegevensprivacy en geloven dat deze op je apparaat moet blijven. Lees onze langetermijnvisie [hier](https://github.com/usebruno/bruno/discussions/269)
-
-[Download Bruno](https://www.usebruno.com/downloads)
-
-📢 Bekijk onze recente presentatie op de India FOSS 3.0 Conference [hier](https://www.youtube.com/watch?v=7bSMFpbcPiY)
-
-![bruno](/assets/images/landing-2.png) <br /><br />
-
-### Golden Edition ✨
-
-De meeste van onze functies zijn gratis en open source.
-We streven naar een harmonieuze balans tussen [open-source principes en duurzaamheid](https://github.com/usebruno/bruno/discussions/269).
-
-Je kunt de [Golden Edition](https://www.usebruno.com/pricing) kopen voor een eenmalige betaling van **$19**! <br/>
-
-### Installatie
-
-Bruno is beschikbaar als binaire download [op onze website](https://www.usebruno.com/downloads) voor Mac, Windows en Linux.
-
-Je kunt Bruno ook installeren via pakketbeheerders zoals Homebrew, Chocolatey, Scoop, Snap, Flatpak en Apt.
-
-```sh
-# Op Mac via Homebrew
-brew install bruno
-
-# Op Windows via Chocolatey
-choco install bruno
-
-# Op Windows via Scoop
-scoop bucket add extras
-scoop install bruno
-
-# Op Windows via winget
-winget install Bruno.Bruno
-
-# Op Linux via Snap
-snap install bruno
-
-# Op Linux via Flatpak
-flatpak install com.usebruno.Bruno
-
-# Op Linux via 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 [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
-```
-
-### Draai op meerdere platformen 🖥️
-
-![bruno](/assets/images/run-anywhere.png) <br /><br />
-
-### Samenwerken via Git 👩‍💻🧑‍💻
-
-Of elk versiebeheersysteem naar keuze
-
-![bruno](/assets/images/version-control.png) <br /><br />
-
-### Sponsors
-
-#### Gouden Sponsors
-
-<img src="../../assets/images/sponsors/samagata.png" width="150"/>
-
-#### Zilveren Sponsors
-
-<img src="../../assets/images/sponsors/commit-company.png" width="70"/>
-
-#### Bronzen Sponsors
-
-<a href="https://zuplo.link/bruno">
-    <img src="../../assets/images/sponsors/zuplo.png" width="120"/>
-</a>
-
-### Belangrijke Links 📌
-
-- [Onze Langetermijnvisie](https://github.com/usebruno/bruno/discussions/269)
-- [Roadmap](https://github.com/usebruno/bruno/discussions/384)
-- [Documentatie](https://docs.usebruno.com)
-- [Stack Overflow](https://stackoverflow.com/questions/tagged/bruno)
-- [Website](https://www.usebruno.com)
-- [Prijzen](https://www.usebruno.com/pricing)
-- [Download](https://www.usebruno.com/downloads)
-- [GitHub Sponsors](https://github.com/sponsors/helloanoop)
-
-### Showcase 🎥
-
-- [Getuigenissen](https://github.com/usebruno/bruno/discussions/343)
-- [Kenniscentrum](https://github.com/usebruno/bruno/discussions/386)
-- [Scriptmania](https://github.com/usebruno/bruno/discussions/385)
-
-### Ondersteuning ❤️
-
-Als je Bruno leuk vindt en ons open-source werk wilt ondersteunen, overweeg dan om ons te sponsoren via [GitHub Sponsors](https://github.com/sponsors/helloanoop).
-
-### Deel Getuigenissen 📣
-
-Als Bruno je heeft geholpen op je werk en in je teams, deel dan je [getuigenissen op onze GitHub-discussie](https://github.com/usebruno/bruno/discussions/343).
-
-
-### Blijf in contact 🌐
-
-[𝕏 (Twitter)](https://twitter.com/use_bruno) <br />
-[Website](https://www.usebruno.com) <br />
-[Discord](https://discord.com/invite/KgcZUncpjq) <br />
-[LinkedIn](https://www.linkedin.com/company/usebruno)
-
-### Handelsmerk
-
-**Naam**
-
-`Bruno` is een handelsmerk in bezit van [Anoop M D](https://www.helloanoop.com/).
-
-**Logo**
-
-Het logo is afkomstig van [OpenMoji](https://openmoji.org/library/emoji-1F436/). Licentie: CC [BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
-
-### Bijdragen 👩‍💻🧑‍💻
-
-Ik ben blij dat je Bruno wilt verbeteren. Bekijk de [bijdragegids](contributing.md).
-
-Zelfs als je geen bijdragen via code kunt leveren, aarzel dan niet om bugs en functieverzoeken in te dienen die moeten worden geïmplementeerd om jouw gebruiksscenario op te lossen.
-
-### Auteurs
-
-<div align="center">
-    <a href="https://github.com/usebruno/bruno/graphs/contributors">
-        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
-    </a>
-</div>
-
-### Licentie 📄
-
-[MIT](../../license.md)

docs/readme/readme_ua.md

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

package.json

@@ -6,15 +6,13 @@
     "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": {
@@ -22,29 +20,22 @@
     "@jest/globals": "^29.2.0",
     "@playwright/test": "^1.27.1",
     "@types/jest": "^29.5.11",
-    "@types/lodash-es": "^4.17.12",
     "concurrently": "^8.2.2",
     "fs-extra": "^11.1.1",
     "husky": "^8.0.3",
     "jest": "^29.2.0",
-    "lodash-es": "^4.17.21",
     "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: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",
@@ -54,19 +45,16 @@
     "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": "npm run dev:web & node ./scripts/playwright-codegen.js",
     "test:e2e": "npx playwright test",
     "test:report": "npx playwright show-report",
     "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
     "prepare": "husky install"
   },
   "overrides": {
-    "rollup": "3.29.5",
-    "electron-store": {
-      "conf": {
-        "json-schema-typed": "8.0.1"
-      }
-    }
+    "rollup":"3.29.4"
+  },
+  "dependencies": {
+    "json-bigint": "^1.0.0",
+    "lossless-json": "^4.0.1"
   }
 }

packages/bruno-app/.babelrc

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

packages/bruno-app/.gitignore

@@ -31,6 +31,4 @@ yarn-error.log*
 
 # next.js
 .next/
-dist/
-
-.env
+out/

packages/bruno-app/jest.config.js

@@ -1,16 +0,0 @@
-module.exports = {
-  rootDir: '.',
-  moduleNameMapper: {
-    '^assets/(.*)$': '<rootDir>/src/assets/$1',
-    '^components/(.*)$': '<rootDir>/src/components/$1',
-    '^hooks/(.*)$': '<rootDir>/src/hooks/$1',
-    '^themes/(.*)$': '<rootDir>/src/themes/$1',
-    '^api/(.*)$': '<rootDir>/src/api/$1',
-    '^pageComponents/(.*)$': '<rootDir>/src/pageComponents/$1',
-    '^providers/(.*)$': '<rootDir>/src/providers/$1',
-    '^utils/(.*)$': '<rootDir>/src/utils/$1'
-  },
-  clearMocks: true,
-  moduleDirectories: ['node_modules', 'src'],
-  testEnvironment: 'node'
-};

packages/bruno-app/next.config.js

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

packages/bruno-app/package.json

@@ -1,78 +1,78 @@
 {
   "name": "@usebruno/app",
-  "version": "2.0.0",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
-    "dev": "rsbuild dev",
-    "build": "rsbuild build -m production",
-    "preview": "rsbuild preview",
+    "dev": "cross-env ENV=dev next dev -p 3000",
+    "build": "next build && next export",
+    "start": "next start",
+    "lint": "next lint",
     "test": "jest",
     "test:prettier": "prettier --check \"./src/**/*.{js,jsx,json,ts,tsx}\"",
     "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",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
     "@reduxjs/toolkit": "^1.8.0",
     "@tabler/icons": "^1.46.0",
     "@tippyjs/react": "^4.2.6",
     "@usebruno/common": "0.1.0",
     "@usebruno/graphql-docs": "0.1.0",
     "@usebruno/schema": "0.7.0",
+    "axios": "^1.5.1",
     "classnames": "^2.3.1",
     "codemirror": "5.65.2",
-    "codemirror-graphql": "2.1.1",
-    "cookie": "0.7.1",
-    "dompurify": "^3.2.4",
+    "codemirror-graphql": "1.2.5",
+    "cookie": "^0.6.0",
     "escape-html": "^1.0.3",
     "file": "^0.2.2",
     "file-dialog": "^0.0.8",
     "file-saver": "^2.0.5",
     "formik": "^2.2.9",
     "github-markdown-css": "^5.2.0",
-    "graphiql": "3.7.1",
+    "graphiql": "^1.5.9",
     "graphql": "^16.6.0",
     "graphql-request": "^3.7.0",
-    "httpsnippet": "^3.0.9",
-    "i18next": "24.1.2",
-    "iconv-lite": "^0.6.3",
+    "httpsnippet": "^3.0.6",
+    "i18next": "^23.14.0",
     "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",
+    "jsonlint": "^1.6.3",
+    "jsonpath-plus": "^7.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",
+    "nanoid": "3.3.4",
+    "next": "12.3.3",
     "path": "^0.12.7",
-    "pdfjs-dist": "4.4.168",
+    "pdfjs-dist": "^3.11.174",
     "platform": "^1.3.6",
-    "posthog-node": "4.2.1",
+    "posthog-node": "^2.1.0",
     "prettier": "^2.7.1",
     "qs": "^6.11.0",
     "query-string": "^7.0.1",
-    "react": "19.0.0",
+    "react": "18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "19.0.0",
+    "react-dom": "18.2.0",
+    "react-github-btn": "^1.4.0",
     "react-hot-toast": "^2.4.0",
     "react-i18next": "^15.0.1",
     "react-inspector": "^6.0.2",
-    "react-pdf": "9.1.1",
-    "react-player": "^2.16.0",
-    "react-redux": "^7.2.9",
+    "react-pdf": "^7.5.1",
+    "react-redux": "^7.2.6",
     "react-tooltip": "^5.5.2",
     "sass": "^1.46.0",
-    "semver": "^7.7.1",
     "strip-json-comments": "^5.0.1",
     "styled-components": "^5.3.3",
     "system": "^2.0.1",
@@ -82,21 +82,20 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@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",
-    "autoprefixer": "10.4.20",
-    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-transform-spread": "^7.16.7",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/runtime": "^7.16.3",
+    "autoprefixer": "^10.4.17",
+    "babel-loader": "^8.2.3",
     "cross-env": "^7.0.3",
-    "css-loader": "7.1.2",
+    "css-loader": "^6.5.1",
     "file-loader": "^6.2.0",
     "html-loader": "^3.0.1",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "8.4.47",
+    "postcss": "^8.4.35",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.4.1",
     "webpack": "^5.64.4",

packages/bruno-app/rsbuild.config.mjs

@@ -1,39 +0,0 @@
-import { defineConfig } from '@rsbuild/core';
-import { pluginReact } from '@rsbuild/plugin-react';
-import { pluginBabel } from '@rsbuild/plugin-babel';
-import { pluginStyledComponents } from '@rsbuild/plugin-styled-components';
-import { pluginSass } from '@rsbuild/plugin-sass';
-import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill'
-
-export default defineConfig({
-  plugins: [
-    pluginNodePolyfill(),
-    pluginReact(),
-    pluginStyledComponents(),
-    pluginSass(),
-    pluginBabel({
-      include: /\.(?:js|jsx|tsx)$/,
-      babelLoaderOptions(opts) {
-        opts.plugins?.unshift('babel-plugin-react-compiler');
-      }
-    })
-  ],
-  source: {
-    tsconfigPath: './jsconfig.json', // Specifies the path to the JavaScript/TypeScript configuration file
-  },
-  html: {
-    title: 'Bruno'
-  },
-  tools: {
-    rspack: {
-      module: {
-        parser: {
-          javascript: {
-            // This loads the JavaScript contents from a library along with the main JavaScript bundle.
-            dynamicImportMode: "eager",
-          },
-        },
-      },
-    },
-  }
-});

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

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

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

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

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

@@ -5,20 +5,8 @@ const StyledWrapper = styled.div`
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};
     font-family: ${(props) => (props.font ? props.font : 'default')};
-    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 */
-  .CodeMirror-foldmarker {
-    text-shadow: none;
-    color: ${(props) => props.theme.textLink};
-    background: none;
-    padding: 0;
-    margin: 0;
   }
 
   .CodeMirror-overlayscroll-horizontal div,
@@ -28,16 +16,6 @@ const StyledWrapper = styled.div`
 
   .CodeMirror-dialog {
     overflow: visible;
-    position: relative;
-    top: unset;
-    left: unset;
-
-    input {
-      background: transparent;
-      border: 1px solid #d3d6db;
-      outline: none;
-      border-radius: 0px;
-    }
   }
 
   #search-results-count {
@@ -90,25 +68,6 @@ const StyledWrapper = styled.div`
   .cm-variable-invalid {
     color: red;
   }
-
-  .CodeMirror-search-hint {
-    display: inline;
-  }
-
-  .cm-s-default span.cm-property {
-    color: #1f61a0 !important;
-  }
-
-  .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

@@ -6,16 +6,16 @@
  */
 
 import React from 'react';
-import { isEqual, escapeRegExp } from 'lodash';
+import isEqual from 'lodash/isEqual';
+import { getEnvironmentVariables } from 'utils/collections';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import StyledWrapper from './StyledWrapper';
-import * as jsonlint from '@prantlf/jsonlint';
+import jsonlint from 'jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
-import { getAllVariables } from 'utils/collections';
 
 let CodeMirror;
-const SERVER_RENDERED = typeof window === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
+const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 const TAB_SIZE = 2;
 
 if (!SERVER_RENDERED) {
@@ -31,11 +31,9 @@ if (!SERVER_RENDERED) {
     'res.body',
     'res.responseTime',
     'res.getStatus()',
-    'res.getStatusText()',
     'res.getHeader(name)',
     'res.getHeaders()',
     'res.getBody()',
-    'res.setBody(data)',
     'res.getResponseTime()',
     'req',
     'req.url',
@@ -57,35 +55,21 @@ if (!SERVER_RENDERED) {
     'req.setMaxRedirects(maxRedirects)',
     'req.getTimeout()',
     'req.setTimeout(timeout)',
-    'req.getExecutionMode()',
     'bru',
     'bru.cwd()',
-    'bru.getEnvName()',
+    'bru.getEnvName(key)',
     '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()',
+    'req.disableParsingResponseJson()'
     'bru.getRequestVar(key)',
-    'bru.runRequest(requestPathName)',
-    'bru.getAssertionResults()',
-    'bru.getTestResults()',
-    'bru.sleep(ms)',
-    'bru.getGlobalEnvVar(key)',
-    'bru.setGlobalEnvVar(key, value)',
-    'bru.runner',
-    'bru.runner.setNextRequest(requestName)',
-    'bru.runner.skipRequest()',
-    'bru.runner.stopExecution()'
+    'bru.sleep(ms)'
   ];
   CodeMirror.registerHelper('hint', 'brunoJS', (editor, options) => {
     const cursor = editor.getCursor();
@@ -107,7 +91,7 @@ if (!SERVER_RENDERED) {
     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.push(curWordBru.includes('.') ? h.split('.')[1] : h);
         }
       });
       result.list?.sort();
@@ -176,21 +160,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();
@@ -209,19 +183,31 @@ 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();
-          }
+        'Cmd-/': (cm) => {
+          // comment/uncomment every selected line(s)
+          const selections = cm.listSelections();
+          selections.forEach((range) => {
+            for (let i = range.from().line; i <= range.to().line; i++) {
+              const selectedLine = cm.getLine(i);
+              // if commented line, remove comment
+              if (selectedLine.trim().startsWith('//')) {
+                cm.replaceRange(
+                  selectedLine.replace(/^(\s*)\/\/\s?/, '$1'),
+                  { line: i, ch: 0 },
+                  { line: i, ch: selectedLine.length }
+                );
+                continue;
+              }
+              // otherwise add comment
+              cm.replaceRange(
+                selectedLine.search(/\S|$/) >= TAB_SIZE
+                  ? ' '.repeat(TAB_SIZE) + '// ' + selectedLine.trim()
+                  : '// ' + selectedLine,
+                { line: i, ch: 0 },
+                { line: i, ch: selectedLine.length }
+              );
+            }
+          });
         }
       },
       foldOptions: {
@@ -259,20 +245,17 @@ export default class CodeEditor extends React.Component {
         return found;
       }
       let jsonlint = window.jsonlint.parser || window.jsonlint;
+      jsonlint.parseError = function (str, hash) {
+        let loc = hash.loc;
+        found.push({
+          from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
+          to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
+          message: str
+        });
+      };
       try {
         jsonlint.parse(stripJsonComments(text.replace(/(?<!"[^":{]*){{[^}]*}}(?![^"},]*")/g, '1')));
-      } catch (error) {
-        const { message, location } = error;
-        const line = location?.start?.line;
-        const column = location?.start?.column;
-        if (line && column) {
-          found.push({
-            from: CodeMirror.Pos(line - 1, column),
-            to: CodeMirror.Pos(line - 1, column),
-            message
-          });
-        }
-      }
+      } catch (e) {}
       return found;
     });
     if (editor) {
@@ -289,9 +272,9 @@ export default class CodeEditor extends React.Component {
         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
+        //Qualify if autocomplete will be shown
         if (
-          /^(?!Shift|Tab|Enter|Escape|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Meta|Alt|Home|End\s)\w*/.test(event.key) &&
+          /^(?!Shift|Tab|Enter|Escape|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|\s)\w*/.test(event.key) &&
           curWord.length > 0 &&
           !/\/\/|\/\*|.*{{|`[^$]*{|`[^{]*$/.test(currentLine.slice(0, end)) &&
           /(?<!\d)[a-zA-Z\._]$/.test(curWord)
@@ -320,7 +303,7 @@ export default class CodeEditor extends React.Component {
     }
 
     if (this.editor) {
-      let variables = getAllVariables(this.props.collection, this.props.item);
+      let variables = getEnvironmentVariables(this.props.collection);
       if (!isEqual(variables, this.variables)) {
         this.addOverlay();
       }
@@ -347,10 +330,9 @@ export default class CodeEditor extends React.Component {
     }
     return (
       <StyledWrapper
-        className="h-full w-full flex flex-col relative graphiql-container"
+        className="h-full w-full flex flex-col relative"
         aria-label="Code Editor"
         font={this.props.font}
-        fontSize={this.props.fontSize}
         ref={(node) => {
           this._node = node;
         }}
@@ -360,7 +342,7 @@ export default class CodeEditor extends React.Component {
 
   addOverlay = () => {
     const mode = this.props.mode || 'application/ld+json';
-    let variables = getAllVariables(this.props.collection, this.props.item);
+    let variables = getEnvironmentVariables(this.props.collection);
     this.variables = variables;
 
     defineCodeMirrorBrunoVariablesMode(variables, mode);
@@ -377,10 +359,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
    */
@@ -427,8 +405,7 @@ export default class CodeEditor extends React.Component {
     const searchInput = document.querySelector('.CodeMirror-search-field');
 
     if (searchInput && searchInput.value.length > 0) {
-      // Escape special characters in search input to prevent RegExp crashes. Fixes #3051
-      const text = new RegExp(escapeRegExp(searchInput.value), 'gi');
+      const text = new RegExp(searchInput.value, 'gi');
       const matches = this.editor.getValue().match(text);
       count = matches ? matches.length : 0;
     }

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

@@ -1,109 +0,0 @@
-import React, { useRef, forwardRef, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import get from 'lodash/get';
-import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
-import { useTheme } from 'providers/Theme';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-import { humanizeRequestAPIKeyPlacement } from 'utils/collections';
-
-const ApiKeyAuth = ({ collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-
-  const apikeyAuth = get(collection, 'root.request.auth.apikey', {});
-
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
-
-  const Icon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-end auth-type-label select-none">
-        {humanizeRequestAPIKeyPlacement(apikeyAuth?.placement)}
-        <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
-
-  const handleAuthChange = (property, value) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'apikey',
-        collectionUid: collection.uid,
-        content: {
-          ...apikeyAuth,
-          [property]: value
-        }
-      })
-    );
-  };
-
-  useEffect(() => {
-    !apikeyAuth?.placement &&
-      dispatch(
-        updateCollectionAuth({
-          mode: 'apikey',
-          collectionUid: collection.uid,
-          content: {
-            placement: 'header'
-          }
-        })
-      );
-  }, [apikeyAuth]);
-
-  return (
-    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Key</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={apikeyAuth.key || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleAuthChange('key', val)}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Value</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={apikeyAuth.value || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleAuthChange('value', val)}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Add To</label>
-      <div className="inline-flex items-center cursor-pointer auth-placement-selector w-fit">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              handleAuthChange('placement', 'header');
-            }}
-          >
-            Header
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              handleAuthChange('placement', 'queryparams');
-            }}
-          >
-            Query Params
-          </div>
-        </Dropdown>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default ApiKeyAuth;

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

@@ -52,15 +52,6 @@ const AuthMode = ({ collection }) => {
           >
             Basic Auth
           </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('wsse');
-            }}
-          >
-            WSSE Auth
-          </div>
           <div
             className="dropdown-item"
             onClick={() => {
@@ -79,15 +70,6 @@ const AuthMode = ({ collection }) => {
           >
             Digest Auth
           </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('ntlm');
-            }}
-          >
-            NTLM Auth
-          </div>          
           <div
             className="dropdown-item"
             onClick={() => {
@@ -95,16 +77,7 @@ const AuthMode = ({ collection }) => {
               onModeChange('oauth2');
             }}
           >
-            OAuth 2.0
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('apikey');
-            }}
-          >
-            API Key
+            Oauth2
           </div>
           <div
             className="dropdown-item"

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

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

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

@@ -4,7 +4,6 @@ const Wrapper = styled.div`
   label {
     font-size: 0.8125rem;
   }
-
   .single-line-editor-wrapper {
     max-width: 400px;
     padding: 0.15rem 0.4rem;

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

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

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

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

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

@@ -4,7 +4,6 @@ const Wrapper = styled.div`
   label {
     font-size: 0.8125rem;
   }
-
   .single-line-editor-wrapper {
     max-width: 400px;
     padding: 0.15rem 0.4rem;

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,18 +1,9 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  label {
-    font-size: 0.8125rem;
-  }
+  font-size: 0.8125rem;
 
-  .single-line-editor-wrapper {
-    padding: 0.15rem 0.4rem;
-    border-radius: 3px;
-    border: solid 1px ${(props) => props.theme.input.border};
-    background-color: ${(props) => props.theme.input.bg};
-  }
-
-  .auth-placement-selector {
+  .grant-type-mode-selector {
     padding: 0.5rem 0px;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};
@@ -35,7 +26,7 @@ const Wrapper = styled.div`
       }
     }
 
-    .auth-type-label {
+    .grant-type-label {
       width: fit-content;
       color: ${(props) => props.theme.colors.text.yellow};
       justify-content: space-between;
@@ -45,12 +36,19 @@ const Wrapper = styled.div`
     .dropdown-item {
       padding: 0.2rem 0.6rem !important;
     }
+
+    .label-item {
+      padding: 0.2rem 0.6rem !important;
+    }
   }
 
   .caret {
     color: rgb(140, 140, 140);
     fill: rgb(140 140 140);
   }
+  label {
+    font-size: 0.8125rem;
+  }
 `;
 
 export default Wrapper;

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

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

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

@@ -4,7 +4,6 @@ const Wrapper = styled.div`
   label {
     font-size: 0.8125rem;
   }
-
   .single-line-editor-wrapper {
     max-width: 400px;
     padding: 0.15rem 0.4rem;

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

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

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

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

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

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

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

@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
-const Wrapper = styled.div`
-  max-width: 800px;
-`;
+const Wrapper = styled.div``;
 
 export default Wrapper;

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

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

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

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

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

@@ -6,13 +6,9 @@ import AwsV4Auth from './AwsV4Auth';
 import BearerAuth from './BearerAuth';
 import BasicAuth from './BasicAuth';
 import DigestAuth from './DigestAuth';
-import WsseAuth from './WsseAuth';
-import ApiKeyAuth from './ApiKeyAuth/';
 import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import OAuth2 from './OAuth2';
-import NTLMAuth from './NTLMAuth';
-
 
 const Auth = ({ collection }) => {
   const authMode = get(collection, 'root.request.auth.mode');
@@ -34,18 +30,9 @@ const Auth = ({ collection }) => {
       case 'digest': {
         return <DigestAuth collection={collection} />;
       }
-      case 'ntlm': {
-        return <NTLMAuth collection={collection} />;
-      }       
       case 'oauth2': {
         return <OAuth2 collection={collection} />;
       }
-      case 'wsse': {
-        return <WsseAuth collection={collection} />;
-      }
-      case 'apikey': {
-        return <ApiKeyAuth collection={collection} />;
-      }
     }
   };
 

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

@@ -8,9 +8,10 @@ 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';
 
-const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
+const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
   const certFilePathInputRef = useRef();
   const keyFilePathInputRef = useRef();
   const pfxFilePathInputRef = useRef();
@@ -25,10 +26,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 +46,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 +54,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
@@ -69,11 +67,7 @@ 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);
-      formik.setFieldValue(e.name, relativePath);
-    }
+    e.files?.[0]?.path && formik.setFieldValue(e.name, e.files?.[0]?.path);
   };
 
   const resetFileInputFields = () => {
@@ -105,23 +99,19 @@ 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 items-center">
+                    <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
+                    {clientCert.domain}
+                  </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 +120,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 +184,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 +224,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 +267,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,9 +1,17 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  div.CodeMirror {
+    /* todo: find a better way */
+    height: calc(100vh - 240px);
 
+    .CodeMirror-scroll {
+      padding-bottom: 0px;
+    }
+  }
   .editing-mode {
     cursor: pointer;
+    color: ${(props) => props.theme.colors.text.yellow};
   }
 `;
 

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

@@ -8,7 +8,6 @@ import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/acti
 import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
-import { IconEdit, IconX, IconFileText } from '@tabler/icons';
 
 const Docs = ({ collection }) => {
   const dispatch = useDispatch();
@@ -30,95 +29,29 @@ const Docs = ({ collection }) => {
     );
   };
 
-  const handleDiscardChanges = () => {
-    dispatch(
-      updateCollectionDocs({
-        collectionUid: collection.uid,
-        docs: docs
-      })
-    );
-    toggleViewMode();
-  }
-
-  const onSave = () => {
-    dispatch(saveCollectionRoot(collection.uid));
-    toggleViewMode();
-  }
+  const onSave = () => dispatch(saveCollectionRoot(collection.uid));
 
   return (
-    <StyledWrapper className="mt-1 h-full w-full relative flex flex-col">
-      <div className='flex flex-row w-full justify-between items-center mb-4'>
-        <div className='text-lg font-medium flex items-center gap-2'>
-          <IconFileText size={20} strokeWidth={1.5} />
-          Documentation
-        </div>
-        <div className='flex flex-row gap-2 items-center justify-center'>
-          {isEditing ? (
-            <>
-              <div className="editing-mode" role="tab" onClick={handleDiscardChanges}>
-                <IconX className="cursor-pointer" size={20} strokeWidth={1.5} />
-              </div>
-              <button type="submit" className="submit btn btn-sm btn-secondary" onClick={onSave}>
-                Save
-              </button>
-            </>
-          ) : (
-            <div className="editing-mode" role="tab" onClick={toggleViewMode}>
-              <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} />
-            </div>
-          )}
-        </div>
+    <StyledWrapper className="mt-1 h-full w-full relative">
+      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
+        {isEditing ? 'Preview' : 'Edit'}
       </div>
+
       {isEditing ? (
         <CodeEditor
           collection={collection}
           theme={displayedTheme}
-          value={docs}
+          value={docs || ''}
           onEdit={onEdit}
           onSave={onSave}
           mode="application/text"
           font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
         />
       ) : (
-        <div className='h-full overflow-auto pl-1'>
-          <div className='h-[1px] min-h-[500px]'>
-            {
-              docs?.length > 0 ?
-                <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
-                :
-                <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={documentationPlaceholder} />
-            }         
-          </div>
-        </div>
+        <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />
       )}
     </StyledWrapper>
   );
 };
 
 export default Docs;
-
-
-const documentationPlaceholder = `
-Welcome to your collection documentation! This space is designed to help you document your API collection effectively.
-
-## Overview
-Use this section to provide a high-level overview of your collection. You can describe:
-- The purpose of these API endpoints
-- Key features and functionalities
-- Target audience or users
-
-## Best Practices
-- Keep documentation up to date
-- Include request/response examples
-- Document error scenarios
-- Add relevant links and references
-
-## Markdown Support
-This documentation supports Markdown formatting! You can use:
-- **Bold** and *italic* text
-- \`code blocks\` and syntax highlighting
-- Tables and lists
-- [Links](https://usebruno.com)
-- And more!
-`;

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

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  max-width: 800px;
-
   table {
     width: 100%;
     border-collapse: collapse;

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

@@ -1,10 +1,12 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  max-width: 800px;
-
-  div.title {
-    color: var(--color-tab-inactive);
+  table {
+    td {
+      &:first-child {
+        width: 120px;
+      }
+    }
   }
 `;
 

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+import { getTotalRequestCountInCollection } from 'utils/collections/';
+
+const Info = ({ collection }) => {
+  const totalRequestsInCollection = getTotalRequestCountInCollection(collection);
+
+  return (
+    <StyledWrapper className="w-full flex flex-col h-full">
+      <div className="text-xs mb-4 text-muted">General information about the collection.</div>
+      <table className="w-full border-collapse">
+        <tbody>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Name&nbsp;:</td>
+            <td className="py-2 px-2">{collection.name}</td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Location&nbsp;:</td>
+            <td className="py-2 px-2 break-all">{collection.pathname}</td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Ignored files&nbsp;:</td>
+            <td className="py-2 px-2 break-all">{collection.brunoConfig?.ignore?.map((x) => `'${x}'`).join(', ')}</td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Environments&nbsp;:</td>
+            <td className="py-2 px-2">{collection.environments?.length || 0}</td>
+          </tr>
+          <tr className="">
+            <td className="py-2 px-2 text-right">Requests&nbsp;:</td>
+            <td className="py-2 px-2">{totalRequestsInCollection}</td>
+          </tr>
+        </tbody>
+      </table>
+    </StyledWrapper>
+  );
+};
+
+export default Info;

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

@@ -1,82 +0,0 @@
-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";
-
-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">
-        <div className="grid gap-6">
-          {/* Location Row */}
-          <div className="flex items-start">
-            <div className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
-              <IconFolder className="w-5 h-5 text-blue-500" stroke={1.5} />
-            </div>
-            <div className="ml-4">
-              <div className="font-semibold text-sm">Location</div>
-              <div className="mt-1 text-sm text-muted break-all">
-                {collection.pathname}
-              </div>
-            </div>
-          </div>
-
-          {/* Environments Row */}
-          <div className="flex items-start">
-            <div className="flex-shrink-0 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
-              <IconWorld className="w-5 h-5 text-green-500" stroke={1.5} />
-            </div>
-            <div className="ml-4">
-              <div className="font-semibold text-sm">Environments</div>
-              <div className="mt-1 text-sm text-muted">
-                {collection.environments?.length || 0} environment{collection.environments?.length !== 1 ? 's' : ''} configured
-              </div>
-            </div>
-          </div>
-
-          {/* Requests Row */}
-          <div className="flex items-start">
-            <div className="flex-shrink-0 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
-              <IconApi className="w-5 h-5 text-purple-500" stroke={1.5} />
-            </div>
-            <div className="ml-4">
-              <div className="font-semibold text-sm">Requests</div>
-              <div className="mt-1 text-sm text-muted font-mono">
-                {
-                  isCollectionLoading? `${totalItems - itemsLoadingCount} out of ${totalItems} requests in the collection loaded` : `${totalRequestsInCollection} request${totalRequestsInCollection !== 1 ? 's' : ''} in collection`
-                }
-              </div>
-            </div>
-          </div>
-
-          <div className="flex items-start group cursor-pointer" onClick={handleToggleShowShareCollectionModal(true)}>
-            <div className="flex-shrink-0 p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
-              <IconShare className="w-5 h-5 text-indigo-500" stroke={1.5} />
-            </div>
-            <div className="ml-4 h-full flex flex-col justify-start">
-              <div className="font-semibold text-sm h-fit my-auto">Share</div>
-              <div className="mt-1 text-sm group-hover:underline text-link">
-                Share Collection
-              </div>
-            </div>
-          </div>
-          {showShareCollectionModal && <ShareCollection collection={collection} onClose={handleToggleShowShareCollectionModal(false)} />}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Info;

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

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  &.card {
-    background-color: ${(props) => props.theme.requestTabPanel.card.bg};
-
-    .title {
-      border-top: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
-      border-left: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
-      border-right: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
-
-      border-top-left-radius: 3px;
-      border-top-right-radius: 3px;
-    }
-
-    .table {
-      thead {
-        background-color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.bg};
-        color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.color};
-      }
-    }
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,80 +0,0 @@
-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);
-
-  if (!itemsFailedLoading?.length) {
-    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">
-        <IconAlertTriangle size={16} className="text-yellow-500" />
-        <span className="font-medium">Following requests were not loaded</span>
-      </div>
-      <table className="w-full border-collapse">
-        <thead>
-          <tr>
-            <th className="py-2 px-3 text-left font-medium">
-              Pathname
-            </th>
-            <th className="py-2 px-3 text-left font-medium">
-              Size
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {flattenedItems?.map((item, index) => (
-            item?.partial && !item?.loading ? (
-              <tr key={index} className='cursor-pointer' onClick={handleRequestClick(item)}>
-                <td className="py-1.5 px-3">
-                  {item?.pathname?.split(`${collection?.pathname}/`)?.[1]}
-                </td>
-                <td className="py-1.5 px-3">
-                  {item?.size?.toFixed?.(2)}&nbsp;MB
-                </td>
-              </tr>
-            ) : null
-          ))}
-        </tbody>
-      </table>
-    </StyledWrapper>
-  );
-};
-
-export default RequestsNotLoaded;

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

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .partial {
-    color: ${(props) => props.theme.colors.text.yellow};
-    opacity: 0.8;
-  }
-
-  .loading {
-    color: ${(props) => props.theme.colors.text.muted};
-    opacity: 0.8;
-  }
-
-  .completed {
-    color: ${(props) => props.theme.colors.text.green};
-    opacity: 0.8;
-  }
-
-  .failed {
-    color: ${(props) => props.theme.colors.text.danger};
-    opacity: 0.8;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,27 +0,0 @@
-import StyledWrapper from "./StyledWrapper";
-import Docs from "../Docs";
-import Info from "./Info";
-import { IconBox } from '@tabler/icons';
-import RequestsNotLoaded from "./RequestsNotLoaded";
-
-const Overview = ({ collection }) => {
-  return (
-    <div className="h-full">
-      <div className="grid grid-cols-5 gap-4 h-full">
-        <div className="col-span-2">
-          <div className="text-xl font-semibold flex items-center gap-2">
-            <IconBox size={24} stroke={1.5} />
-            {collection?.name}
-          </div>
-          <Info collection={collection} />
-          <RequestsNotLoaded collection={collection} />
-        </div>
-        <div className="col-span-3">
-          <Docs collection={collection} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Overview;

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

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  max-width: 800px;
-
   .settings-label {
     width: 110px;
   }

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useFormik } from 'formik';
-import InfoTip from 'components/InfoTip';
+import Tooltip from 'components/Tooltip';
 import StyledWrapper from './StyledWrapper';
 import * as Yup from 'yup';
 import toast from 'react-hot-toast';
@@ -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">
+            <Tooltip
+              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>
+            `}
+              tooltipId="request-var"
+            />
           </label>
           <div className="flex items-center">
             <label className="flex items-center">
@@ -333,4 +336,4 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
   );
 };
 
-export default ProxySettings;
+export default ProxySettings;

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

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  max-width: 800px;
-
   div.CodeMirror {
     height: inherit;
   }

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

@@ -52,7 +52,6 @@ const Script = ({ collection }) => {
           mode="javascript"
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
         />
       </div>
       <div className="flex-1 mt-6">
@@ -65,7 +64,6 @@ const Script = ({ collection }) => {
           mode="javascript"
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
-          fontSize={get(preferences, 'font.codeFontSize')}
         />
       </div>
 

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

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  max-width: 800px;
+
   div.tabs {
     div.tab {
       padding: 6px 0px;

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

@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
-const StyledWrapper = styled.div`
-  max-width: 800px;
-`;
+const StyledWrapper = styled.div``;
 
 export default StyledWrapper;

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

@@ -36,7 +36,6 @@ const Tests = ({ collection }) => {
         mode="javascript"
         onSave={handleSave}
         font={get(preferences, 'font.codeFont', 'default')}
-        fontSize={get(preferences, 'font.codeFontSize')}
       />
 
       <div className="mt-6">

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

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

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

@@ -1,161 +0,0 @@
-import React from 'react';
-import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
-import { useTheme } from 'providers/Theme';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import SingleLineEditor from 'components/SingleLineEditor';
-import InfoTip from 'components/InfoTip';
-import StyledWrapper from './StyledWrapper';
-import toast from 'react-hot-toast';
-import { variableNameRegex } from 'utils/common/regex';
-import {
-  addCollectionVar,
-  deleteCollectionVar,
-  updateCollectionVar
-} from 'providers/ReduxStore/slices/collections/index';
-
-const VarsTable = ({ collection, vars, varType }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-
-  const addVar = () => {
-    dispatch(
-      addCollectionVar({
-        collectionUid: collection.uid,
-        type: varType
-      })
-    );
-  };
-
-  const onSave = () => dispatch(saveCollectionRoot(collection.uid));
-  const handleVarChange = (e, v, type) => {
-    const _var = cloneDeep(v);
-    switch (type) {
-      case 'name': {
-        const value = e.target.value;
-
-        if (variableNameRegex.test(value) === false) {
-          toast.error(
-            'Variable contains invalid characters! Variables must only contain alpha-numeric characters, "-", "_", "."'
-          );
-          return;
-        }
-
-        _var.name = value;
-        break;
-      }
-      case 'value': {
-        _var.value = e.target.value;
-        break;
-      }
-      case 'enabled': {
-        _var.enabled = e.target.checked;
-        break;
-      }
-    }
-    dispatch(
-      updateCollectionVar({
-        type: varType,
-        var: _var,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleRemoveVar = (_var) => {
-    dispatch(
-      deleteCollectionVar({
-        type: varType,
-        varUid: _var.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Name</td>
-            {varType === 'request' ? (
-              <td>
-                <div className="flex items-center">
-                  <span>Value</span>
-                </div>
-              </td>
-            ) : (
-              <td>
-                <div className="flex items-center">
-                  <span>Expr</span>
-                  <InfoTip content="You can write any valid JS Template Literal here" infotipId="request-var" />
-                </div>
-              </td>
-            )}
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {vars && vars.length
-            ? vars.map((_var) => {
-                return (
-                  <tr key={_var.uid}>
-                    <td>
-                      <input
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
-                        value={_var.name}
-                        className="mousetrap"
-                        onChange={(e) => handleVarChange(e, _var, 'name')}
-                      />
-                    </td>
-                    <td>
-                      <SingleLineEditor
-                        value={_var.value}
-                        theme={storedTheme}
-                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleVarChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            _var,
-                            'value'
-                          )
-                        }
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={_var.enabled}
-                          tabIndex="-1"
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleVarChange(e, _var, 'enabled')}
-                        />
-                        <button tabIndex="-1" onClick={() => handleRemoveVar(_var)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-      <button className="btn-add-var text-link pr-2 py-3 mt-2 select-none" onClick={addVar}>
-        + Add
-      </button>
-    </StyledWrapper>
-  );
-};
-export default VarsTable;

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import VarsTable from './VarsTable';
-import StyledWrapper from './StyledWrapper';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import { useDispatch } from 'react-redux';
-
-const Vars = ({ collection }) => {
-  const dispatch = useDispatch();
-  const requestVars = get(collection, 'root.request.vars.req', []);
-  const responseVars = get(collection, 'root.request.vars.res', []);
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
-  return (
-    <StyledWrapper className="w-full flex flex-col">
-      <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Pre Request</div>
-        <VarsTable collection={collection} vars={requestVars} varType="request" />
-      </div>
-      <div className="flex-1">
-        <div className="mt-1 mb-1 title text-xs">Post Response</div>
-        <VarsTable collection={collection} vars={responseVars} varType="response" />
-      </div>
-      <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-          Save
-        </button>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Vars;

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

@@ -12,19 +12,10 @@ import Headers from './Headers';
 import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
+import Docs from './Docs';
 import Presets from './Presets';
+import Info from './Info';
 import StyledWrapper from './StyledWrapper';
-import Vars from './Vars/index';
-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();
@@ -38,22 +29,9 @@ const CollectionSettings = ({ collection }) => {
     );
   };
 
-  const root = collection?.root;
-  const hasScripts = root?.request?.script?.res || root?.request?.script?.req;
-  const hasTests = root?.request?.tests;
-  const hasDocs = root?.docs;
-
-  const headers = get(collection, 'root.request.headers', []);
-  const activeHeadersCount = headers.filter((header) => header.enabled).length;
-
-  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 auth = get(collection, 'root.request.auth', {}).mode;
-
   const proxyConfig = get(collection, 'brunoConfig.proxy', {});
-  const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
 
+  const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
 
   const onProxySettingsUpdate = (config) => {
     const brunoConfig = cloneDeep(collection.brunoConfig);
@@ -96,15 +74,9 @@ const CollectionSettings = ({ collection }) => {
 
   const getTabPanel = (tab) => {
     switch (tab) {
-      case 'overview': {
-        return <Overview collection={collection} />;
-      }
       case 'headers': {
         return <Headers collection={collection} />;
       }
-      case 'vars': {
-        return <Vars collection={collection} />;
-      }
       case 'auth': {
         return <Auth collection={collection} />;
       }
@@ -123,13 +95,18 @@ const CollectionSettings = ({ collection }) => {
       case 'clientCert': {
         return (
           <ClientCertSettings
-            root={collection.pathname}
             clientCertConfig={clientCertConfig}
             onUpdate={onClientCertSettingsUpdate}
             onRemove={onClientCertSettingsRemove}
           />
         );
       }
+      case 'docs': {
+        return <Docs collection={collection} />;
+      }
+      case 'info': {
+        return <Info collection={collection} />;
+      }
     }
   };
 
@@ -142,39 +119,32 @@ const CollectionSettings = ({ collection }) => {
   return (
     <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
       <div className="flex flex-wrap items-center tabs" role="tablist">
-      <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
-          Overview
-        </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
           Headers
-          {activeHeadersCount > 0 && <sup className="ml-1 font-medium">{activeHeadersCount}</sup>}
-        </div>
-        <div className={getTabClassname('vars')} role="tab" onClick={() => setTab('vars')}>
-          Vars
-          {activeVarsCount > 0 && <sup className="ml-1 font-medium">{activeVarsCount}</sup>}
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
           Auth
-          {auth !== 'none' && <ContentIndicator />}
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
           Script
-          {hasScripts && <ContentIndicator />}
         </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
           Tests
-          {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  && <ContentIndicator />}
         </div>
         <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
           Client Certificates
-          {clientCertConfig.length > 0 && <ContentIndicator />}
+        </div>
+        <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
+          Docs
+        </div>
+        <div className={getTabClassname('info')} role="tab" onClick={() => setTab('info')}>
+          Info
         </div>
       </div>
       <section className="mt-4 h-full">{getTabPanel(tab)}</section>

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