Handle decryption for secret env vars (#5285)

.github/CODEOWNERS

@@ -1 +1 @@
-* @helloanoop @maintainer-bruno @bijin-bruno @lohit-bruno @naman-bruno
+* @helloanoop @maintainer-bruno @lohit-bruno @naman-bruno

.github/actions/common/setup-node-deps/action.yml

@@ -1,26 +0,0 @@
-name: 'Setup Node Dependencies'
-description: 'Install Node.js and npm dependencies'
-runs:
-  using: 'composite'
-  steps:
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: v22.17.0
-        cache: 'npm'
-        cache-dependency-path: './package-lock.json'
-    
-    - name: Install node dependencies
-      shell: bash
-      run: npm ci --legacy-peer-deps
-    
-    - name: Build libraries
-      shell: bash
-      run: |
-        npm run build:graphql-docs
-        npm run build:bruno-query
-        npm run build:bruno-common
-        npm run sandbox:bundle-libraries --workspace=packages/bruno-js
-        npm run build:bruno-converters
-        npm run build:bruno-requests
-        npm run build:bruno-filestore

.github/actions/ssl/linux/run-basic-ssl-cli-tests/action.yml

@@ -1,36 +0,0 @@
-name: 'Run Basic SSL CLI Tests - Linux'
-description: 'Run basic SSL CLI tests on Linux'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run CLI tests
-      shell: bash
-      run: |
-        set -euo pipefail
-        
-        # navigate to basic SSL test collection directory
-        cd tests/ssl/basic-ssl/collections/badssl
-
-        echo "basic ssl success"
-        # should pass
-        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit1.xml --insecure --format junit
-        xmllint --xpath 'count(//testsuite[@errors="0"])' junit1.xml | grep -q "^1$" || exit 1
-
-        echo "with default/system ca certs"
-        # should pass
-        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit2.xml --format junit
-        xmllint --xpath 'count(//testsuite[@errors="0"])' junit2.xml | grep -q "^1$" || exit 1
-
-        # navigate to self-signed SSL test collection directory
-        cd ../self-signed-badssl
-
-        echo "self-signed ssl with validation disabled"
-        # should pass
-        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit3.xml --insecure --format junit
-        xmllint --xpath 'count(//testsuite[@errors="0"])' junit3.xml | grep -q "^1$" || exit 1
-
-        echo "self-signed ssl with default/system ca certs"
-        echo "request will error"
-        # should fail
-        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit4.xml --format junit 2>/dev/null || true
-        xmllint --xpath 'count(//testsuite[@errors="1"])' junit4.xml | grep -q "^1$" || exit 1

.github/actions/ssl/linux/run-custom-ca-certs-cli-tests/action.yml

@@ -1,33 +0,0 @@
-name: 'Run Custom CA Certs CLI Tests - Linux'
-description: 'Run custom CA certs CLI tests on Linux'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run CLI tests
-      shell: bash
-      run: |
-        set -euo pipefail
-        
-        # navigate to CA certificates test collection directory
-        cd tests/ssl/custom-ca-certs/collection
-
-        echo "custom valid ca cert"
-        # should pass
-        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit1.xml --cacert ../server/certs/ca-cert.pem --ignore-truststore --format junit
-        xmllint --xpath 'count(//testsuite[@errors="0"])' junit1.xml | grep -q "^1$" || exit 1
-
-        echo "custom valid ca cert with defaults"
-        # should pass
-        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit2.xml --cacert ../server/certs/ca-cert.pem --format junit
-        xmllint --xpath 'count(//testsuite[@errors="0"])' junit2.xml | grep -q "^1$" || exit 1
-
-        echo "custom invalid ca cert"
-        echo "request will error"
-        # should fail
-        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit3.xml --cacert ../server/certs/ca-key.pem --ignore-truststore --format junit 2>/dev/null || true
-        xmllint --xpath 'count(//testsuite[@errors="1"])' junit3.xml | grep -q "^1$" || exit 1
-
-        echo "custom invalid ca cert with defaults"
-        # should pass
-        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit4.xml --cacert ../server/certs/ca-key.pem --format junit
-        xmllint --xpath 'count(//testsuite[@errors="0"])' junit4.xml | grep -q "^1$" || exit 1

.github/actions/ssl/linux/run-ssl-e2e-tests/action.yml

@@ -1,19 +0,0 @@
-name: 'Run SSL E2E Tests - Linux'
-description: 'Run SSL E2E tests on Linux'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run E2E tests
-      shell: bash
-      run: |
-        set -euo pipefail
-        
-        xvfb-run npm run test:e2e:ssl
-
-    - name: Upload Playwright Report
-      if: ${{ !cancelled() }}
-      uses: actions/upload-artifact@v4
-      with:
-        name: playwright-report-linux
-        path: playwright-report/
-        retention-days: 30

.github/actions/ssl/linux/setup-ca-certs/action.yml

@@ -1,26 +0,0 @@
-name: 'Setup CA Certificates - Linux'
-description: 'Setup CA certificates and start test server for custom CA certs tests on Linux'
-runs:
-  using: 'composite'
-  steps:
-    - name: Setup CA certificates
-      shell: bash
-      run: |
-        set -euo pipefail
-        
-        cd tests/ssl/custom-ca-certs/server
-        
-        echo "running certificate setup"
-        node scripts/generate-certs.js
-
-    - name: Start test server
-      shell: bash
-      run: |
-        set -euo pipefail
-        
-        cd tests/ssl/custom-ca-certs/server
-        
-        echo "starting server in background"
-        node index.js &
-        
-        echo "server started with PID: $!"

.github/actions/ssl/linux/setup-feature-specific-deps/action.yml

@@ -1,15 +0,0 @@
-name: 'Setup Custom CA Certs Feature Dependencies - Linux'
-description: 'Setup feature-specific dependencies for custom CA certs tests on Linux'
-runs:
-  using: 'composite'
-  steps:
-    - name: Install additional OS dependencies for custom CA certs
-      shell: bash
-      run: |
-        sudo apt-get update
-        sudo apt-get --no-install-recommends install -y \
-          libglib2.0-0 libnss3 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgtk-3-0 libasound2t64 \
-          xvfb libxml2-utils
-
-        sudo chown root /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox
-        sudo chmod 4755 /home/runner/work/bruno/bruno/node_modules/electron/dist/chrome-sandbox

.github/actions/ssl/macos/run-basic-ssl-cli-tests/action.yml

@@ -1,36 +0,0 @@
-name: 'Run Basic SSL CLI Tests - macOS'
-description: 'Run basic SSL CLI tests on macOS'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run CLI tests
-      shell: bash
-      run: |
-        set -euo pipefail
-        
-        # navigate to basic SSL test collection directory
-        cd tests/ssl/basic-ssl/collections/badssl
-
-        echo "basic ssl success"
-        # should pass
-        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit1.xml --insecure --format junit
-        xmllint --xpath 'count(//testsuite[@errors="0"])' junit1.xml | grep -q "^1$" || exit 1
-
-        echo "with default/system ca certs"
-        # should pass
-        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit2.xml --format junit
-        xmllint --xpath 'count(//testsuite[@errors="0"])' junit2.xml | grep -q "^1$" || exit 1
-
-        # navigate to self-signed SSL test collection directory
-        cd ../self-signed-badssl
-
-        echo "self-signed ssl with validation disabled"
-        # should pass
-        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit3.xml --insecure --format junit
-        xmllint --xpath 'count(//testsuite[@errors="0"])' junit3.xml | grep -q "^1$" || exit 1
-
-        echo "self-signed ssl with default/system ca certs"
-        echo "request will error"
-        # should fail
-        node ../../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit4.xml --format junit 2>/dev/null || true
-        xmllint --xpath 'count(//testsuite[@errors="1"])' junit4.xml | grep -q "^1$" || exit 1

.github/actions/ssl/macos/run-custom-ca-certs-cli-tests/action.yml

@@ -1,33 +0,0 @@
-name: 'Run Custom CA Certs CLI Tests - macOS'
-description: 'Run custom CA certs CLI tests on macOS'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run CLI tests
-      shell: bash
-      run: |
-        set -euo pipefail
-        
-        # navigate to CA certificates test collection directory
-        cd tests/ssl/custom-ca-certs/collection
-
-        echo "custom valid ca cert"
-        # should pass
-        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit1.xml --cacert ../server/certs/ca-cert.pem --ignore-truststore --format junit
-        xmllint --xpath 'count(//testsuite[@errors="0"])' junit1.xml | grep -q "^1$" || exit 1
-
-        echo "custom valid ca cert with defaults"
-        # should pass
-        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit2.xml --cacert ../server/certs/ca-cert.pem --format junit
-        xmllint --xpath 'count(//testsuite[@errors="0"])' junit2.xml | grep -q "^1$" || exit 1
-
-        echo "custom invalid ca cert"
-        echo "request will error"
-        # should fail
-        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit3.xml --cacert ../server/certs/ca-key.pem --ignore-truststore --format junit 2>/dev/null || true
-        xmllint --xpath 'count(//testsuite[@errors="1"])' junit3.xml | grep -q "^1$" || exit 1
-
-        echo "custom invalid ca cert with defaults"
-        # should pass
-        node ../../../../packages/bruno-cli/bin/bru.js run ./request.bru --output junit4.xml --cacert ../server/certs/ca-key.pem --format junit
-        xmllint --xpath 'count(//testsuite[@errors="0"])' junit4.xml | grep -q "^1$" || exit 1

.github/actions/ssl/macos/run-ssl-e2e-tests/action.yml

@@ -1,17 +0,0 @@
-name: 'Run SSL E2E Tests - macOS'
-description: 'Run SSL E2E tests on macOS'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run E2E tests
-      shell: bash
-      run: |
-        npm run test:e2e:ssl
-
-    - name: Upload Playwright Report
-      if: ${{ !cancelled() }}
-      uses: actions/upload-artifact@v4
-      with:
-        name: playwright-report-macos
-        path: playwright-report/
-        retention-days: 30

.github/actions/ssl/macos/setup-ca-certs/action.yml

@@ -1,26 +0,0 @@
-name: 'Setup CA Certificates - macOS'
-description: 'Setup CA certificates and start test server for custom CA certs tests on macOS'
-runs:
-  using: 'composite'
-  steps:
-    - name: Setup CA certificates
-      shell: bash
-      run: |
-        set -euo pipefail
-        
-        cd tests/ssl/custom-ca-certs/server
-        
-        echo "running certificate setup"
-        node scripts/generate-certs.js
-
-    - name: Start test server
-      shell: bash
-      run: |
-        set -euo pipefail
-        
-        cd tests/ssl/custom-ca-certs/server
-        
-        echo "starting server in background"
-        node index.js &
-        
-        echo "server started with PID: $!"

.github/actions/ssl/macos/setup-feature-specific-deps/action.yml

@@ -1,9 +0,0 @@
-name: 'Setup Custom CA Certs Feature Dependencies - macOS'
-description: 'Setup feature-specific dependencies for custom CA certs tests on macOS'
-runs:
-  using: 'composite'
-  steps:
-    - name: Install additional OS dependencies for custom CA certs
-      shell: bash
-      run: |
-        brew install libxml2

.github/actions/ssl/windows/run-basic-ssl-cli-tests/action.yml

@@ -1,50 +0,0 @@
-name: 'Run Basic SSL CLI Tests - Windows'
-description: 'Run basic SSL CLI tests on Windows'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run CLI tests
-      shell: pwsh
-      run: |
-        Set-StrictMode -Version Latest
-        $ErrorActionPreference = "Stop"
-        
-        # navigate to basic SSL test collection directory
-        Set-Location tests\ssl\basic-ssl\collections\badssl
-
-        Write-Host "basic ssl success"
-        # should pass
-        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit1.xml --insecure --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
-        [xml]$xml1 = Get-Content junit1.xml
-        $testsuites1 = if ($xml1.testsuites) { $xml1.testsuites.testsuite } else { $xml1.testsuite }
-        $errorCount1 = ($testsuites1 | Where-Object { $_.errors -eq "0" } | Measure-Object).Count
-        if ($errorCount1 -ne 1) { exit 1 }
-
-        Write-Host "with default/system ca certs"
-        # should pass
-        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit2.xml --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
-        [xml]$xml2 = Get-Content junit2.xml
-        $testsuites2 = if ($xml2.testsuites) { $xml2.testsuites.testsuite } else { $xml2.testsuite }
-        $errorCount2 = ($testsuites2 | Where-Object { $_.errors -eq "0" } | Measure-Object).Count
-        if ($errorCount2 -ne 1) { exit 1 }
-
-        # navigate to self-signed SSL test collection directory
-        Set-Location ..\self-signed-badssl
-
-        Write-Host "self-signed ssl with validation disabled"
-        # should pass
-        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit3.xml --insecure --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
-        [xml]$xml3 = Get-Content junit3.xml
-        $testsuites3 = if ($xml3.testsuites) { $xml3.testsuites.testsuite } else { $xml3.testsuite }
-        $errorCount3 = ($testsuites3 | Where-Object { $_.errors -eq "0" } | Measure-Object).Count
-        if ($errorCount3 -ne 1) { exit 1 }
-
-        Write-Host "self-signed ssl with default/system ca certs"
-        Write-Host "request will error"
-        # should fail
-        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit4.xml --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
-        # Ignore the exit code - we expect this to fail
-        [xml]$xml4 = Get-Content junit4.xml
-        $testsuites4 = if ($xml4.testsuites) { $xml4.testsuites.testsuite } else { $xml4.testsuite }
-        $errorCount4 = ($testsuites4 | Where-Object { $_.errors -eq "1" } | Measure-Object).Count
-        if ($errorCount4 -ne 1) { exit 1 }

.github/actions/ssl/windows/run-custom-ca-certs-cli-tests/action.yml

@@ -1,47 +0,0 @@
-name: 'Run Custom CA Certs CLI Tests - Windows'
-description: 'Run custom CA certs CLI tests on Windows'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run CLI tests
-      shell: pwsh
-      run: |
-        Set-StrictMode -Version Latest
-        $ErrorActionPreference = "Stop"
-        
-        # navigate to CA certificates test collection directory
-        Set-Location tests\ssl\custom-ca-certs\collection
-
-        Write-Host "custom valid ca cert"
-        # should pass
-        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit1.xml --cacert ..\server\certs\ca-cert.pem --ignore-truststore --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
-        [xml]$xml1 = Get-Content junit1.xml
-        $testsuites1 = if ($xml1.testsuites) { $xml1.testsuites.testsuite } else { $xml1.testsuite }
-        $errorCount1 = ($testsuites1 | Where-Object { $_.errors -eq "0" } | Measure-Object).Count
-        if ($errorCount1 -ne 1) { exit 1 }
-
-        Write-Host "custom valid ca cert with defaults"
-        # should pass
-        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit2.xml --cacert ..\server\certs\ca-cert.pem --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
-        [xml]$xml2 = Get-Content junit2.xml
-        $testsuites2 = if ($xml2.testsuites) { $xml2.testsuites.testsuite } else { $xml2.testsuite }
-        $errorCount2 = ($testsuites2 | Where-Object { $_.errors -eq "0" } | Measure-Object).Count
-        if ($errorCount2 -ne 1) { exit 1 }
-
-        Write-Host "custom invalid ca cert"
-        Write-Host "request will error"
-        # should fail
-        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit3.xml --cacert ..\server\certs\ca-key.pem --ignore-truststore --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
-        # Ignore the exit code - we expect this to fail
-        [xml]$xml3 = Get-Content junit3.xml
-        $testsuites3 = if ($xml3.testsuites) { $xml3.testsuites.testsuite } else { $xml3.testsuite }
-        $errorCount3 = ($testsuites3 | Where-Object { $_.errors -eq "1" } | Measure-Object).Count
-        if ($errorCount3 -ne 1) { exit 1 }
-
-        Write-Host "custom invalid ca cert with defaults"
-        # should pass
-        $process = Start-Process -FilePath "node" -ArgumentList "..\..\..\..\packages\bruno-cli\bin\bru.js run .\request.bru --output junit4.xml --cacert ..\server\certs\ca-key.pem --format junit" -NoNewWindow -Wait -PassThru -RedirectStandardError "nul"
-        [xml]$xml4 = Get-Content junit4.xml
-        $testsuites4 = if ($xml4.testsuites) { $xml4.testsuites.testsuite } else { $xml4.testsuite }
-        $errorCount4 = ($testsuites4 | Where-Object { $_.errors -eq "0" } | Measure-Object).Count
-        if ($errorCount4 -ne 1) { exit 1 }

.github/actions/ssl/windows/run-ssl-e2e-tests/action.yml

@@ -1,17 +0,0 @@
-name: 'Run SSL E2E Tests - Windows'
-description: 'Run SSL E2E tests on Windows'
-runs:
-  using: 'composite'
-  steps:
-    - name: Run E2E tests
-      shell: pwsh
-      run: |
-        npm run test:e2e:ssl
-
-    - name: Upload Playwright Report
-      if: ${{ !cancelled() }}
-      uses: actions/upload-artifact@v4
-      with:
-        name: playwright-report-windows
-        path: playwright-report/
-        retention-days: 30

.github/actions/ssl/windows/setup-ca-certs/action.yml

@@ -1,25 +0,0 @@
-name: 'Setup CA Certificates - Windows'
-description: 'Setup CA certificates and start test server for custom CA certs tests on Windows'
-runs:
-  using: 'composite'
-  steps:
-    - name: Setup CA certificates
-      shell: pwsh
-      run: |
-        Set-StrictMode -Version Latest
-        $ErrorActionPreference = "Stop"
-        
-        Set-Location tests\ssl\custom-ca-certs\server
-        
-        Write-Host "running certificate setup"
-        node scripts/generate-certs.js
-
-    - name: Start test server
-      shell: pwsh
-      run: |
-        Set-StrictMode -Version Latest
-        
-        Set-Location tests\ssl\custom-ca-certs\server
-        
-        Write-Host "starting server in background"
-        Start-Process -FilePath "node" -ArgumentList "index.js" -PassThru -WindowStyle Hidden

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

@@ -26,7 +26,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v5
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
 

.github/workflows/ssl-tests.yml

@@ -1,91 +0,0 @@
-name: SSL Tests
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  tests-for-linux:
-    name: SSL Tests - Linux
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Setup Feature Dependencies
-        uses: ./.github/actions/ssl/linux/setup-feature-specific-deps
-
-      - name: Setup CA Certificates
-        uses: ./.github/actions/ssl/linux/setup-ca-certs
-
-      - name: Run Basic SSL CLI Tests
-        uses: ./.github/actions/ssl/linux/run-basic-ssl-cli-tests
-
-      - name: Run Custom CA Certs CLI Tests
-        uses: ./.github/actions/ssl/linux/run-custom-ca-certs-cli-tests
-
-      - name: Run Custom CA Certs E2E Tests
-        uses: ./.github/actions/ssl/linux/run-ssl-e2e-tests
-
-  tests-for-macos:
-    name: SSL Tests - macOS
-    timeout-minutes: 60
-    runs-on: macos-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Setup Feature Dependencies
-        uses: ./.github/actions/ssl/macos/setup-feature-specific-deps
-
-      - name: Setup CA Certificates
-        uses: ./.github/actions/ssl/macos/setup-ca-certs
-
-      - name: Run Basic SSL CLI Tests
-        uses: ./.github/actions/ssl/macos/run-basic-ssl-cli-tests
-
-      - name: Run Custom CA Certs CLI Tests
-        uses: ./.github/actions/ssl/macos/run-custom-ca-certs-cli-tests
-
-      - name: Run Custom CA Certs E2E Tests
-        uses: ./.github/actions/ssl/macos/run-ssl-e2e-tests
-
-  tests-for-windows:
-    name: SSL Tests - Windows
-    timeout-minutes: 60
-    runs-on: windows-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v4
-      
-      - name: Setup Node Dependencies
-        uses: ./.github/actions/common/setup-node-deps
-
-      - name: Setup CA Certificates
-        uses: ./.github/actions/ssl/windows/setup-ca-certs
-
-      - name: Run Basic SSL CLI Tests
-        uses: ./.github/actions/ssl/windows/run-basic-ssl-cli-tests
-
-      - name: Run Custom CA Certs CLI Tests
-        uses: ./.github/actions/ssl/windows/run-custom-ca-certs-cli-tests
-
-      - name: Run Custom CA Certs E2E Tests
-        uses: ./.github/actions/ssl/windows/run-ssl-e2e-tests

.github/workflows/tests.yml

@@ -14,7 +14,7 @@ jobs:
       contents: read
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v5
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
@@ -65,7 +65,7 @@ jobs:
       contents: read
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v5
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
@@ -83,11 +83,6 @@ jobs:
           npm run build --workspace=packages/bruno-requests
           npm run build --workspace=packages/bruno-filestore
 
-      - name: Run Local Testbench
-        run: |
-          npm start --workspace=packages/bruno-tests &
-          sleep 5
-
       - name: Run tests
         run: |
           cd packages/bruno-tests/collection
@@ -107,7 +102,7 @@ jobs:
     runs-on: ubuntu-24.04
     steps:
     - uses: actions/checkout@v4
-    - uses: actions/setup-node@v5
+    - uses: actions/setup-node@v4
       with:
         node-version: v22.11.x
     - name: Install dependencies

contributing.md

@@ -69,7 +69,6 @@ npm run build:bruno-query
 npm run build:bruno-common
 npm run build:bruno-converters
 npm run build:bruno-requests
-npm run build:bruno-filestore
 
 # bundle js sandbox libraries
 npm run sandbox:bundle-libraries --workspace=packages/bruno-js

docs/playwright-testing-guide.md

@@ -1,470 +0,0 @@
-# Playwright Testing Guide for Bruno
-
-This guide explains how to create and run Playwright test cases for the Bruno application using the UI.
-
-## Table of Contents
-
-- [Overview](#overview)
-- [Prerequisites](#prerequisites)
-- [Creating Tests Using Codegen](#creating-tests-using-codegen)
-- [Manual Test Creation](#manual-test-creation)
-- [Test Structure and Organization](#test-structure-and-organization)
-- [Available Test Fixtures](#available-test-fixtures)
-- [Running Tests](#running-tests)
-- [Best Practices](#best-practices)
-- [Examples](#examples)
-- [Troubleshooting](#troubleshooting)
-
-## Overview
-
-Bruno uses Playwright for end-to-end testing of its Electron application. The testing setup includes custom fixtures for Electron app testing and utilities for managing test data.
-
-## Prerequisites
-
-- Node.js installed
-- All dependencies installed (`npm install`)
-- Electron app can be built and run
-
-## Creating Tests Using Codegen
-
-The easiest way to create tests is using Playwright's codegen feature, which records your UI interactions and generates test code.
-
-### Using the Built-in Codegen Script
-
-```bash
-# Generate a test with a specific name
-npm run test:codegen my-new-test
-
-# Generate a test without specifying a name (will prompt for input)
-npm run test:codegen
-```
-
-### What Happens During Codegen
-
-1. The Electron app launches automatically
-2. Playwright Inspector opens in a separate window
-3. You interact with the Bruno UI
-4. Actions are recorded and converted to test code
-5. The generated test file is saved in `e2e-tests/`
-
-### Codegen Workflow
-
-1. **Start Recording**: Run the codegen command
-2. **Interact with UI**: Perform the actions you want to test
-3. **Add Assertions**: Use the inspector to add assertions
-4. **Save Test**: The test file is automatically generated
-5. **Review and Refine**: Edit the generated test as needed
-
-## Manual Test Creation
-
-You can also create tests manually by following the established patterns.
-
-### Basic Test Structure
-
-```typescript
-import { test, expect } from '../../playwright';
-
-test('Test description', async ({ page }) => {
-  // Test steps here
-  await page.getByLabel('Some Label').click();
-
-  // Assertions
-  await expect(page.getByText('Expected Text')).toBeVisible();
-});
-```
-
-### Test with Temporary Data
-
-```typescript
-import { test, expect } from '../../playwright';
-
-test('Test with temporary data', async ({ page, createTmpDir }) => {
-  // Create temporary directory for test data
-  const testDir = await createTmpDir('test-collection');
-
-  // Test steps
-  await page.getByLabel('Create Collection').click();
-  await page.getByLabel('Name').fill('test-collection');
-  await page.getByLabel('Location').fill(testDir);
-
-  // Assertions
-  await expect(page.getByText('test-collection')).toBeVisible();
-});
-```
-
-## Test Structure and Organization
-
-### Directory Structure
-
-```
-e2e-tests/
-├── 001-sanity-tests/          # Basic functionality tests
-│   ├── 001-home-screen.spec.ts
-│   └── 002-create-new-collection-and-new-request.spec.ts
-├── 002-feature-tests/         # Specific feature tests
-├── 003-integration-tests/     # Complex workflow tests
-└── bruno-testbench/           # Test utilities and helpers
-```
-
-### Naming Conventions
-
-- **Files**: Use descriptive names with `.spec.ts` extension
-- **Tests**: Use clear, descriptive test names
-- **Folders**: Use numbered prefixes for ordering
-
-### Test File Template
-
-```typescript
-import { test, expect } from '../../playwright';
-
-test.describe('Feature Name', () => {
-  test('should perform specific action', async ({ page }) => {
-    // Arrange
-    // Act
-    // Assert
-  });
-
-  test('should handle error case', async ({ page }) => {
-    // Test error scenarios
-  });
-});
-```
-
-## Available Test Fixtures
-
-The Bruno Playwright setup provides several custom fixtures:
-
-### Core Fixtures
-
-- `page`: Main page for testing
-- `context`: Browser context
-- `electronApp`: Electron application instance
-
-### Utility Fixtures
-
-- `createTmpDir`: Creates temporary directories for test data
-- `newPage`: Creates a new page instance
-- `pageWithUserData`: Page with custom user data
-- `launchElectronApp`: Launches a new Electron app instance
-- `reuseOrLaunchElectronApp`: Reuses existing app or launches new one
-
-### Using Fixtures
-
-```typescript
-test('Test with multiple fixtures', async ({ page, createTmpDir, electronApp }) => {
-  const testDir = await createTmpDir('test-data');
-
-  // Your test logic here
-});
-```
-
-## Running Tests
-
-### Basic Commands
-
-```bash
-# Run all tests
-npm run test:e2e
-
-# Run specific test file
-npx playwright test e2e-tests/001-sanity-tests/001-home-screen.spec.ts
-
-# Run tests in a specific folder
-npx playwright test e2e-tests/001-sanity-tests/
-```
-
-### Advanced Options
-
-```bash
-# Run with UI mode (for debugging)
-npx playwright test --ui
-
-# Run in headed mode (see browser)
-npx playwright test --headed
-
-# Run with specific browser
-npx playwright test --project="Bruno Electron App"
-
-# Run with debugging
-npx playwright test --debug
-
-# Run with trace recording
-npx playwright test --trace on
-```
-
-### CI/CD Integration
-
-```bash
-# Install browsers for CI
-npx playwright install
-
-# Run tests in CI mode
-npm run test:e2e
-```
-
-## Best Practices
-
-### 1. Use Semantic Selectors
-
-**Preferred:**
-
-```typescript
-await page.getByRole('button', { name: 'Create' }).click();
-await page.getByLabel('Collection Name').fill('test');
-await page.getByText('Success message').toBeVisible();
-```
-
-**Avoid:**
-
-```typescript
-await page.locator('.btn-primary').click();
-await page.locator('#collection-name').fill('test');
-```
-
-### 2. Create Isolated Tests
-
-Each test should be independent and not rely on other tests:
-
-```typescript
-test('should create collection', async ({ page, createTmpDir }) => {
-  const testDir = await createTmpDir('collection-test');
-
-  // Test creates its own data
-  await page.getByLabel('Create Collection').click();
-  await page.getByLabel('Name').fill('test-collection');
-  await page.getByLabel('Location').fill(testDir);
-
-  // Clean up happens automatically via createTmpDir
-});
-```
-
-### 3. Add Meaningful Assertions
-
-Always verify the expected outcomes:
-
-```typescript
-test('should save request successfully', async ({ page }) => {
-  // Arrange
-  await page.getByLabel('Create Collection').click();
-
-  // Act
-  await page.getByRole('button', { name: 'Save' }).click();
-
-  // Assert
-  await expect(page.getByText('Request saved successfully')).toBeVisible();
-  await expect(page.getByRole('tab', { name: 'GET request' })).toBeVisible();
-});
-```
-
-### 4. Handle Async Operations
-
-```typescript
-test('should wait for network requests', async ({ page }) => {
-  // Wait for specific network request
-  await page.waitForResponse((response) => response.url().includes('/api/endpoint'));
-
-  // Or wait for element to be stable
-  await page.waitForSelector('[data-testid="loading"]', { state: 'hidden' });
-});
-```
-
-### 5. Use Test Data Management
-
-```typescript
-test('should work with test data', async ({ page, createTmpDir }) => {
-  const testDir = await createTmpDir('test-data');
-
-  // Create test files
-  await fs.writeFile(path.join(testDir, 'test.bru'), testContent);
-
-  // Use in test
-  await page.getByLabel('Open Collection').click();
-  await page.getByText(testDir).click();
-});
-```
-
-## Examples
-
-### Example 1: Basic Collection Creation
-
-```typescript
-import { test, expect } from '../../playwright';
-
-test('should create a new collection', async ({ page, createTmpDir }) => {
-  const testDir = await createTmpDir('new-collection');
-
-  await page.getByLabel('Create Collection').click();
-  await page.getByLabel('Name').fill('My Test Collection');
-  await page.getByLabel('Location').fill(testDir);
-  await page.getByRole('button', { name: 'Create' }).click();
-
-  await expect(page.getByText('My Test Collection')).toBeVisible();
-});
-```
-
-### Example 2: Request Creation and Execution
-
-```typescript
-import { test, expect } from '../../playwright';
-
-test('should create and execute HTTP request', async ({ page, createTmpDir }) => {
-  const testDir = await createTmpDir('request-test');
-
-  // Create collection
-  await page.getByLabel('Create Collection').click();
-  await page.getByLabel('Name').fill('Request Test');
-  await page.getByLabel('Location').fill(testDir);
-  await page.getByRole('button', { name: 'Create' }).click();
-
-  // Create request
-  await page.locator('#create-new-tab').getByRole('img').click();
-  await page.getByPlaceholder('Request Name').fill('Test Request');
-  await page.locator('#new-request-url .CodeMirror').click();
-  await page.locator('textarea').fill('http://localhost:8081/ping');
-  await page.getByRole('button', { name: 'Create' }).click();
-
-  // Execute request
-  await page.locator('#send-request').getByRole('img').nth(2).click();
-
-  // Verify response
-  await expect(page.getByRole('main')).toContainText('200 OK');
-});
-```
-
-### Example 3: Environment Management
-
-```typescript
-import { test, expect } from '../../playwright';
-
-test('should create and use environment variables', async ({ page, createTmpDir }) => {
-  const testDir = await createTmpDir('env-test');
-
-  // Setup collection
-  await page.getByLabel('Create Collection').click();
-  await page.getByLabel('Name').fill('Environment Test');
-  await page.getByLabel('Location').fill(testDir);
-  await page.getByRole('button', { name: 'Create' }).click();
-
-  // Create environment
-  await page.getByRole('button', { name: 'Environments' }).click();
-  await page.getByRole('button', { name: 'Add Environment' }).click();
-  await page.getByLabel('Environment Name').fill('Development');
-  await page.getByRole('button', { name: 'Create' }).click();
-
-  // Add variable
-  await page.getByRole('button', { name: 'Add Variable' }).click();
-  await page.getByLabel('Variable Name').fill('API_URL');
-  await page.getByLabel('Variable Value').fill('http://localhost:3000');
-  await page.getByRole('button', { name: 'Save' }).click();
-
-  await expect(page.getByText('API_URL')).toBeVisible();
-});
-```
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Electron App Not Starting**
-
-   ```bash
-   # Ensure dependencies are installed
-   npm install
-
-   # Try running the app manually first
-   npm run dev:electron
-   ```
-
-2. **Tests Timing Out**
-
-   ```typescript
-   // Increase timeout for specific test
-   test('slow test', async ({ page }) => {
-     test.setTimeout(60000); // 60 seconds
-     // Test steps
-   });
-   ```
-
-3. **Element Not Found**
-
-   ```typescript
-   // Wait for element to be present
-   await page.waitForSelector('[data-testid="element"]');
-
-   // Or use more specific selectors
-   await page.getByRole('button', { name: 'Exact Button Text' }).click();
-   ```
-
-4. **Flaky Tests**
-
-   ```typescript
-   // Use stable selectors
-   await page.getByTestId('stable-id').click();
-
-   // Wait for state changes
-   await page.waitForLoadState('networkidle');
-   ```
-
-### Debug Mode
-
-```bash
-# Run with debug mode
-npx playwright test --debug
-
-# Run specific test in debug mode
-npx playwright test --debug e2e-tests/001-sanity-tests/001-home-screen.spec.ts
-```
-
-### Trace Analysis
-
-```bash
-# Run with trace recording
-npx playwright test --trace on
-
-# View trace in browser
-npx playwright show-trace test-results/trace-*.zip
-```
-
-## Configuration
-
-The Playwright configuration is in `playwright.config.ts`:
-
-```typescript
-export default defineConfig({
-  testDir: './e2e-tests',
-  fullyParallel: false,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 1 : 0,
-  workers: process.env.CI ? undefined : 1,
-
-  projects: [
-    {
-      name: 'Bruno Electron App'
-    }
-  ],
-
-  webServer: [
-    {
-      command: 'npm run dev:web',
-      url: 'http://localhost:3000',
-      reuseExistingServer: !process.env.CI
-    },
-    {
-      command: 'npm start --workspace=packages/bruno-tests',
-      url: 'http://localhost:8081/ping',
-      reuseExistingServer: !process.env.CI
-    }
-  ]
-});
-```
-
-## Additional Resources
-
-- [Playwright Documentation](https://playwright.dev/)
-- [Playwright Test API](https://playwright.dev/docs/api/class-test)
-- [Electron Testing with Playwright](https://playwright.dev/docs/api/class-electronapplication)
-- [Bruno Project Structure](../readme.md)
-
----
-
-For questions or issues with testing, please refer to the project's contributing guidelines or create an issue in the repository.

docs/readme/readme_ar.md

@@ -74,13 +74,10 @@ flatpak install com.usebruno.Bruno
 
 # على نظام Linux عبر Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_bn.md

@@ -59,13 +59,10 @@ snap install bruno
 
 # Apt এর মাধ্যমে লিনাক্সে
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_cn.md

@@ -63,13 +63,10 @@ snap install bruno
 
 # 在 Linux 上用 Apt 安装
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_de.md

@@ -78,13 +78,10 @@ flatpak install com.usebruno.Bruno
 
 # Auf Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_es.md

@@ -75,13 +75,10 @@ flatpak install com.usebruno.Bruno
 
 # En Linux con Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_fr.md

@@ -63,13 +63,10 @@ snap install bruno
 
 # Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_hi.md

@@ -75,14 +75,12 @@ flatpak install com.usebruno.Bruno
 
 # Linux पर Apt के माध्यम से
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
-  | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt install bruno
 
 कई प्लेटफार्मों पर चलाएं 🖥️
 <br /><br />
@@ -150,3 +148,4 @@ Scriptmania
 
 लाइसेंस 📄
 MIT
+

docs/readme/readme_it.md

@@ -59,13 +59,10 @@ snap install bruno
 
 # Su Linux tramite Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_ja.md

@@ -78,13 +78,10 @@ flatpak install com.usebruno.Bruno
 
 # LinuxでAptを使ってインストール
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_ka.md

@@ -77,14 +77,12 @@ flatpak install com.usebruno.Bruno
 
 # Linux-ზე Apt-ის საშუალებით
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
-  | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+sudo 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
 ```
 
 ### პლატფორმებს შორის მუშაობა 🖥️

docs/readme/readme_kr.md

@@ -59,13 +59,10 @@ snap install bruno
 
 # On Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_nl.md

@@ -61,14 +61,12 @@ flatpak install com.usebruno.Bruno
 
 # Op Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" \
-  | sudo tee /etc/apt/sources.list.d/bruno.list
-sudo apt update && sudo apt install bruno
+sudo 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 🖥️

docs/readme/readme_pl.md

@@ -69,13 +69,10 @@ flatpak install com.usebruno.Bruno
 
 # On Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_pt_br.md

@@ -76,13 +76,10 @@ flatpak install com.usebruno.Bruno
 
 # No Linux via Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_ro.md

@@ -59,13 +59,10 @@ snap install bruno
 
 # Pe Linux cu Apt
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_tr.md

@@ -63,13 +63,10 @@ snap install bruno
 
 # Apt aracılığıyla Linux'ta
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

docs/readme/readme_zhtw.md

@@ -63,13 +63,10 @@ snap install bruno
 
 # 在 Linux 上使用 Apt 安裝
 sudo mkdir -p /etc/apt/keyrings
-sudo apt update && sudo apt install gpg curl
-curl -fsSL "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x9FA6017ECABE0266" \
-  | gpg --dearmor \
-  | sudo tee /etc/apt/keyrings/bruno.gpg > /dev/null
-sudo chmod 644 /etc/apt/keyrings/bruno.gpg
-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 gpg
+sudo gpg --list-keys
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
 sudo apt update && sudo apt install bruno
 ```
 

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { test, expect } from '../../playwright';
 
-test.describe.parallel('Collection Run', () => {
+test.describe.parallel('Run Testbench Requests', () => {
   test('Run bruno-testbench in Developer Mode', async ({ pageWithUserData: page }) => {
     test.setTimeout(2 * 60 * 1000);
 

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

@@ -1,13 +1,13 @@
 import { test, expect } from '../../playwright';
 
 test('Should verify all support links with correct URL in preference > Support tab', async ({ page }) => {
+
    // Open Preferences
    await page.getByLabel('Open Preferences').click();
    
-   // Go to Support tab
+   // Verify Support tab
    await page.getByRole('tab', { name: 'Support' }).click();
 
-   // Verify all support links with correct URL
    const locator_twitter = page.getByRole('link', { name: 'Twitter' });
    expect(await locator_twitter.getAttribute('href')).toEqual('https://twitter.com/use_bruno');
 
@@ -22,4 +22,6 @@ test('Should verify all support links with correct URL in preference > Support t
 
    const locator_documentation = page.getByRole('link', { name: 'Documentation', exact: true });
    expect(await locator_documentation.getAttribute('href')).toEqual('https://docs.usebruno.com');
+
+  
 });

eslint.config.js

@@ -5,7 +5,7 @@ const globals = require("globals");
 module.exports = defineConfig([
   {
     files: ["packages/bruno-app/**/*.{js,jsx,ts}"],
-    ignores: ["**/*.config.js", "**/public/**/*"],
+    ignores: ["**/*.config.js"],
     languageOptions: {
       globals: {
         ...globals.browser,
@@ -13,8 +13,7 @@ module.exports = defineConfig([
         global: false,
         require: false,
         Buffer: false,
-        process: false,
-        ipcRenderer: false
+        process: false
       },
       parserOptions: {
         ecmaFeatures: {
@@ -40,161 +39,16 @@ module.exports = defineConfig([
     },
   },
   {
-    files: ["packages/bruno-cli/**/*.js"],
+    files: ["packages/bruno-electron/**/*.{js}"],
     ignores: ["**/*.config.js"],
     languageOptions: {
       globals: {
         ...globals.node,
         ...globals.jest,
       },
-      parserOptions: {
-        ecmaVersion: "latest"
-      },
     },
     rules: {
       "no-undef": "error",
     },
-  },
-  {
-    files: ["packages/bruno-common/**/*.ts"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest,
-      },
-      parser: require("@typescript-eslint/parser"),
-      parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-        project: "./packages/bruno-common/tsconfig.json",
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  },
-  {
-    files: ["packages/bruno-converters/**/*.js"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest,
-      },
-      parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  },
-  {
-    files: ["packages/bruno-electron/**/*.js"],
-    ignores: ["**/*.config.js", "**/web/**/*"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest,
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  },
-  {
-    files: ["packages/bruno-filestore/**/*.ts"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest,
-      },
-      parser: require("@typescript-eslint/parser"),
-      parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-        project: "./packages/bruno-filestore/tsconfig.json",
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  },
-  {
-    files: ["packages/bruno-js/**/*.js"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest,
-        window: false,
-        self: false,
-        HTMLElement: false,
-        typeDetectGlobalObject: false
-      },
-      parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  },
-  {
-    files: ["packages/bruno-lang/**/*.js"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest,
-      },
-      parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  },
-  {
-    files: ["packages/bruno-requests/**/*.ts"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest,
-      },
-      parser: require("@typescript-eslint/parser"),
-      parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-        project: "./packages/bruno-requests/tsconfig.json",
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  },
-  {
-    files: ["packages/bruno-requests/**/*.js"],
-    ignores: ["**/*.config.js", "**/dist/**/*"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.jest,
-      },
-      parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-      },
-    },
-    rules: {
-      "no-undef": "error",
-    },
-  },
+  }
 ]);

package.json

@@ -22,11 +22,9 @@
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
     "@playwright/test": "^1.51.1",
-    "@rollup/plugin-json": "^6.1.0",
     "@types/jest": "^29.5.11",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.14.1",
-    "@typescript-eslint/parser": "^8.39.0",
     "concurrently": "^8.2.2",
     "eslint": "^9.26.0",
     "fs-extra": "^11.1.1",
@@ -65,8 +63,7 @@
     "build:electron:snap": "./scripts/build-electron.sh snap",
     "watch:common": "npm run watch --workspace=packages/bruno-common",
     "test:codegen": "node playwright/codegen.ts",
-    "test:e2e": "playwright test --project=default",
-    "test:e2e:ssl": "playwright test --project=ssl",
+    "test:e2e": "playwright test",
     "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
     "lint": "node --max_old_space_size=4096 $(npx which eslint)"
   },
@@ -78,4 +75,4 @@
       }
     }
   }
-}
+}

packages/bruno-app/package.json

@@ -16,7 +16,6 @@
     "@prantlf/jsonlint": "^16.0.0",
     "@reduxjs/toolkit": "^1.8.0",
     "@tabler/icons": "^1.46.0",
-    "@testing-library/user-event": "^14.6.1",
     "@tippyjs/react": "^4.2.6",
     "@usebruno/common": "0.1.0",
     "@usebruno/graphql-docs": "0.1.0",
@@ -93,7 +92,7 @@
     "@rsbuild/plugin-react": "^1.0.7",
     "@rsbuild/plugin-sass": "^1.1.0",
     "@rsbuild/plugin-styled-components": "1.1.0",
-    "@testing-library/dom": "^10.4.1",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "autoprefixer": "10.4.20",
@@ -112,10 +111,5 @@
     "tailwindcss": "^3.4.1",
     "webpack": "^5.64.4",
     "webpack-cli": "^4.9.1"
-  },
-  "overrides": {
-    "httpsnippet": {
-      "form-data": "4.0.4"
-    }
   }
 }

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

@@ -186,8 +186,6 @@ export default class CodeEditor extends React.Component {
     if (editor) {
       editor.setOption('lint', this.props.mode && editor.getValue().trim().length > 0 ? this.lintOptions : false);
       editor.on('change', this._onEdit);
-      editor.on('scroll', this.onScroll);
-      editor.scrollTo(null, this.props.initialScroll);
       this.addOverlay();
 
       const getAllVariablesHandler = () => getAllVariables(this.props.collection, this.props.item);
@@ -232,18 +230,12 @@ export default class CodeEditor extends React.Component {
     if (this.props.theme !== prevProps.theme && this.editor) {
       this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
     }
-
-    if (this.props.initialScroll !== prevProps.initialScroll) {
-      this.editor.scrollTo(null, this.props.initialScroll);
-    }
-
     this.ignoreChangeEvent = false;
   }
 
   componentWillUnmount() {
     if (this.editor) {
       this.editor.off('change', this._onEdit);
-      this.editor.off('scroll', this.onScroll);
       this.editor = null;
     }
 
@@ -279,8 +271,6 @@ export default class CodeEditor extends React.Component {
     this.editor.setOption('mode', 'brunovariables');
   };
 
-  onScroll = (event) => this.props.onScroll?.(event);
-
   _onEdit = () => {
     if (!this.ignoreChangeEvent && this.editor) {
       this.editor.setOption('lint', this.editor.getValue().trim().length > 0 ? this.lintOptions : false);

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

@@ -38,48 +38,6 @@ const StyledWrapper = styled.div`
       outline: none !important;
     }
   }
-
-  .protocol-placeholder {
-    height: 100%;
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    overflow: hidden;
-  }
-
-  .protocol-https,
-  .protocol-grpcs {
-    position: absolute;
-    right: 8px;
-    top: 0;
-    bottom: 0;
-    transition: transform 0.3s ease-in-out;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .protocol-https {
-    animation: slideUpDown 6s infinite;
-    transform: translateY(0);
-  }
-
-  .protocol-grpcs {
-    animation: slideUpDown 6s infinite 3s;
-    transform: translateY(100%);
-  }
-
-  @keyframes slideUpDown {
-    0%, 45% {
-      transform: translateY(0);
-    }
-    50%, 95% {
-      transform: translateY(100%);
-    }
-    100% {
-      transform: translateY(0);
-    }
-  }
 `;
 
 export default StyledWrapper;

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

@@ -132,10 +132,7 @@ const ClientCertSettings = ({ root, clientCertConfig, onUpdate, onRemove }) => {
           </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">
-              <span className="protocol-placeholder">
-                <span className="protocol-https">https://</span>
-                <span className="protocol-grpcs">grpcs://</span>
-              </span>
+              https://
             </div>
             <input
               id="domain"

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

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .available-certificates {
-    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
-
-    button.remove-certificate {
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
-`;
-
-export default StyledWrapper; 

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

@@ -1,263 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { useFormik } from 'formik';
-import { useDispatch } from 'react-redux';
-import StyledWrapper from './StyledWrapper';
-import toast from 'react-hot-toast';
-import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
-import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash, IconFile, IconFileImport, IconAlertCircle } from '@tabler/icons';
-import { getRelativePath, getBasename, getDirPath } from 'utils/common/path';
-import { Tooltip } from 'react-tooltip';
-import { existsSync, resolvePath } from '../../../utils/filesystem';
-
-const GrpcSettings = ({ collection }) => {
-  const dispatch = useDispatch();
-  const {
-    brunoConfig: { grpc: grpcConfig = {} }
-  } = collection;
-
-  const fileInputRef = useRef(null);
-  const [protoFileValidity, setProtoFileValidity] = useState({});
-
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      protoFiles: grpcConfig.protoFiles || []
-    },
-    onSubmit: (newGrpcConfig) => {
-      const brunoConfig = cloneDeep(collection.brunoConfig);
-      brunoConfig.grpc = newGrpcConfig;
-      dispatch(updateBrunoConfig(brunoConfig, collection.uid));
-      toast.success('gRPC settings updated');
-    }
-  });
-
-  // Get file path using the ipcRenderer
-  const getProtoFile = (event) => {
-    const files = event?.files;
-    if (files && files.length > 0) {
-      const newProtoFiles = [...formik.values.protoFiles];
-      
-      for (let i = 0; i < files.length; i++) {
-        const filePath = window?.ipcRenderer?.getFilePath(files[i]);
-        if (filePath) {
-          const relativePath = getRelativePath(filePath, collection.pathname);
-          const protoFileObj = {
-            path: relativePath,
-            type: 'file'
-          };
-          
-          // Check if this path already exists
-          const exists = newProtoFiles.some(pf => pf.path === protoFileObj.path);
-          if (!exists) {
-            newProtoFiles.push(protoFileObj);
-          }
-        }
-      }
-      
-      formik.setFieldValue('protoFiles', newProtoFiles);
-      // Reset the file input
-      if (fileInputRef.current) {
-        fileInputRef.current.value = '';
-      }
-    }
-  };
-
-  // Handler for removing a proto file
-  const handleRemoveProtoFile = (index) => {
-    const updatedProtoFiles = [...formik.values.protoFiles];
-    updatedProtoFiles.splice(index, 1);
-    formik.setFieldValue('protoFiles', updatedProtoFiles);
-  };
-
-  // Handle the browse button click
-  const handleBrowseClick = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
-    }
-  };
-
-  // Check if a proto file path is valid
-  const isProtoFileValid = async (protoFile) => {
-    try {
-      const absolutePath = await resolvePath(protoFile.path, collection.pathname);
-      return await existsSync(absolutePath);
-    } catch (error) {
-      return false;
-    }
-  };
-
-  // Validate all proto files and update state
-  useEffect(() => {
-    const validateProtoFiles = async () => {
-      const validityMap = {};
-      for (const file of formik.values.protoFiles) {
-        validityMap[file.path] = await isProtoFileValid(file);
-      }
-      setProtoFileValidity(validityMap);
-    };
-
-    validateProtoFiles();
-  }, [formik.values.protoFiles, collection.pathname]);
-
-  // Handle replacing an invalid proto file
-  const handleReplaceProtoFile = (index) => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
-      // Store the index to replace after file selection
-      fileInputRef.current.dataset.replaceIndex = index;
-    }
-  };
-
-  // Handle file input change
-  const handleFileInputChange = (e) => {
-    const replaceIndex = e.target.dataset.replaceIndex;
-    if (replaceIndex !== undefined) {
-      // Handle replacement
-      const files = e.target.files;
-      if (files && files.length > 0) {
-        const filePath = window?.ipcRenderer?.getFilePath(files[0]);
-        if (filePath) {
-          const relativePath = getRelativePath(filePath, collection.pathname);
-          const updatedProtoFiles = [...formik.values.protoFiles];
-          updatedProtoFiles[replaceIndex] = {
-            path: relativePath,
-            type: 'file'
-          };
-          formik.setFieldValue('protoFiles', updatedProtoFiles);
-        }
-      }
-      delete e.target.dataset.replaceIndex;
-    } else {
-      getProtoFile(e.target);
-    }
-  };
-
-  return (
-    <StyledWrapper className="h-full w-full">
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div className="mb-3">
-          <label className="font-semibold text-sm mb-3 flex items-center" htmlFor="protoFiles">
-            Add Proto Files
-            <span id="proto-files-tooltip" className="ml-2">
-              <IconAlertCircle size={16} className="text-gray-500 cursor-pointer" />
-            </span>
-            <Tooltip
-              anchorId="proto-files-tooltip"
-              className="tooltip-mod font-normal"
-              html="Keep your proto files within the collection folder or the corresponding git repository to ensure paths remain valid when sharing the collection."
-            />
-          </label>
-          <div className="flex flex-col">
-            {/* Hidden file input for file selection */}
-            <input
-              type="file"
-              ref={fileInputRef}
-              style={{ display: 'none' }}
-              accept=".proto"
-              multiple
-              onChange={handleFileInputChange}
-            />
-            
-            <div className="flex flex-col gap-3">
-              {/* File selection options */}
-              <div className="flex flex-col space-y-3">
-                <div className="flex items-center">
-                  <button
-                    type="button"
-                    className="btn btn-sm btn-secondary flex items-center"
-                    onClick={handleBrowseClick}
-                  >
-                    <IconFileImport size={16} strokeWidth={1.5} className="mr-1" />
-                    Browse for proto files
-                  </button>
-                </div>
-              </div>
-              
-              {/* Divider */}
-              <div className="border-t border-neutral-600 my-2"></div>
-              
-              {/* List of added proto files */}
-              <div>
-                <div className="text-sm font-semibold mb-2 flex items-center">
-                  <IconFile size={16} strokeWidth={1.5} className="mr-1" />
-                  Added Proto Files ({formik.values.protoFiles.length})
-                </div>
-                
-                {formik.values.protoFiles.length === 0 ? (
-                  <div className="text-neutral-500 text-sm italic">No proto files added yet</div>
-                ) : (
-                  <>
-                    {formik.values.protoFiles.some(file => !protoFileValidity[file.path]) && (
-                      <div className="text-xs text-red-500 mb-2 flex items-center bg-red-50 dark:bg-red-900/20 p-2 rounded">
-                        <IconAlertCircle size={14} className="mr-1" />
-                        Some proto files cannot be found at their specified paths. Use the "Replace" option to update their locations.
-                      </div>
-                    )}
-                    <ul className="mt-4">
-                      {formik.values.protoFiles.map((file, index) => {
-                        const isValid = protoFileValidity[file.path];
-                        return (
-                          <li key={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">
-                                <IconFile className="mr-2" size={18} strokeWidth={1.5} />
-                                <div
-                                  className="overflow-hidden text-ellipsis whitespace-nowrap max-w-[300px] text-sm"
-                                  title={file.path}
-                                >
-                                  {getBasename(file.path)}
-                                  <span className="text-xs text-neutral-500 ml-2">
-                                    {getDirPath(file.path)}
-                                  </span>
-                                </div>
-                              </div>
-                              <div className="flex w-full items-center justify-end">
-                                {!isValid && (
-                                  <div className="flex items-center mr-2">
-                                    <IconAlertCircle
-                                      size={16}
-                                      className="text-red-500"
-                                      title="Proto file not found. Click to replace."
-                                    />
-                                    <button
-                                      type="button"
-                                      className="text-xs text-red-500 ml-1 hover:underline"
-                                      onClick={() => handleReplaceProtoFile(index)}
-                                    >
-                                      Replace
-                                    </button>
-                                  </div>
-                                )}
-                                <button
-                                  type="button"
-                                  className="remove-certificate ml-2"
-                                  onClick={() => handleRemoveProtoFile(index)}
-                                  title="Remove file"
-                                >
-                                  <IconTrash size={18} strokeWidth={1.5} />
-                                </button>
-                              </div>
-                            </div>
-                          </li>
-                        );
-                      })}
-                    </ul>
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-6">
-          <button type="submit" className="submit btn btn-sm btn-secondary">
-            Save
-          </button>
-        </div>
-      </form>
-    </StyledWrapper>
-  );
-};
-
-export default GrpcSettings; 

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
@@ -7,30 +7,19 @@ import { useTheme } from 'providers/Theme';
 import {
   addCollectionHeader,
   updateCollectionHeader,
-  deleteCollectionHeader,
-  setCollectionHeaders
+  deleteCollectionHeader
 } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
-import BulkEditor from 'components/BulkEditor/index';
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const Headers = ({ collection }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const headers = get(collection, 'root.request.headers', []);
-  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
-
-  const toggleBulkEditMode = () => {
-    setIsBulkEditMode(!isBulkEditMode);
-  };
-
-  const handleBulkHeadersChange = (newHeaders) => {
-    dispatch(setCollectionHeaders({ collectionUid: collection.uid, headers: newHeaders }));
-  };
 
   const addHeader = () => {
     dispatch(
@@ -74,22 +63,6 @@ const Headers = ({ collection }) => {
     );
   };
 
-  if (isBulkEditMode) {
-    return (
-      <StyledWrapper className="h-full w-full">
-        <div className="text-xs mb-4 text-muted">
-          Add request headers that will be sent with every request in this collection.
-        </div>
-        <BulkEditor
-          params={headers}
-          onChange={handleBulkHeadersChange}
-          onToggle={toggleBulkEditMode}
-          onSave={handleSave}
-        />
-      </StyledWrapper>
-    );
-  }
-
   return (
     <StyledWrapper className="h-full w-full">
       <div className="text-xs mb-4 text-muted">
@@ -168,14 +141,9 @@ const Headers = ({ collection }) => {
             : null}
         </tbody>
       </table>
-      <div className="flex justify-between mt-2">
-        <button className="btn-add-header text-link pr-2 py-3 select-none" onClick={addHeader}>
-          + Add Header
-        </button>
-        <button className="text-link select-none" onClick={toggleBulkEditMode}>
-          Bulk Edit
-        </button>
-      </div>
+      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
+        + Add Header
+      </button>
 
       <div className="mt-6">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>

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

@@ -1,15 +1,13 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useFormik } from 'formik';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 import toast from 'react-hot-toast';
 import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
 import cloneDeep from 'lodash/cloneDeep';
-import { useBetaFeature, BETA_FEATURES } from 'utils/beta-features';
 
 const PresetsSettings = ({ collection }) => {
   const dispatch = useDispatch();
-  const isGrpcEnabled = useBetaFeature(BETA_FEATURES.GRPC);
   const {
     brunoConfig: { presets: presets = {} }
   } = collection;
@@ -17,15 +15,10 @@ const PresetsSettings = ({ collection }) => {
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
-      requestType: presets.requestType === 'grpc' && !isGrpcEnabled ? 'http' : presets.requestType || 'http',
+      requestType: presets.requestType || 'http',
       requestUrl: presets.requestUrl || ''
     },
     onSubmit: (newPresets) => {
-      // If gRPC is disabled but the preset is set to grpc, change it to http
-      if (!isGrpcEnabled && newPresets.requestType === 'grpc') {
-        newPresets.requestType = 'http';
-      }
-
       const brunoConfig = cloneDeep(collection.brunoConfig);
       brunoConfig.presets = newPresets;
       dispatch(updateBrunoConfig(brunoConfig, collection.uid));
@@ -69,23 +62,6 @@ const PresetsSettings = ({ collection }) => {
             <label htmlFor="graphql" className="ml-1 cursor-pointer select-none">
               GraphQL
             </label>
-
-            {isGrpcEnabled && (
-              <>
-                <input
-                  id="grpc"
-                  className="ml-4 cursor-pointer"
-                  type="radio"
-                  name="requestType"
-                  onChange={formik.handleChange}
-                  value="grpc"
-                  checked={formik.values.requestType === 'grpc'}
-                />
-                <label htmlFor="grpc" className="ml-1 cursor-pointer select-none">
-                  gRPC
-                </label>
-              </>
-            )}
           </div>
         </div>
         <div className="mb-3 flex items-center">
@@ -98,7 +74,7 @@ const PresetsSettings = ({ collection }) => {
                 id="request-url"
                 type="text"
                 name="requestUrl"
-                placeholder="Request URL"
+                placeholder='Request URL'
                 className="block textbox"
                 autoComplete="off"
                 autoCorrect="off"
@@ -111,7 +87,6 @@ const PresetsSettings = ({ collection }) => {
             </div>
           </div>
         </div>
-
         <div className="mt-6">
           <button type="submit" className="submit btn btn-sm btn-secondary">
             Save

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

@@ -13,16 +13,13 @@ import Auth from './Auth';
 import Script from './Script';
 import Test from './Tests';
 import Presets from './Presets';
-import Grpc from './Grpc';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
 import StatusDot from 'components/StatusDot';
 import Overview from './Overview/index';
-import { useBetaFeature, BETA_FEATURES } from 'utils/beta-features';
 
 const CollectionSettings = ({ collection }) => {
   const dispatch = useDispatch();
-  const isGrpcEnabled = useBetaFeature(BETA_FEATURES.GRPC);
   const tab = collection.settingsSelectedTab;
   const setTab = (tab) => {
     dispatch(
@@ -48,7 +45,7 @@ const CollectionSettings = ({ collection }) => {
 
   const proxyConfig = get(collection, 'brunoConfig.proxy', {});
   const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
-  const grpcConfig = get(collection, 'brunoConfig.grpc', {});
+
 
   const onProxySettingsUpdate = (config) => {
     const brunoConfig = cloneDeep(collection.brunoConfig);
@@ -125,9 +122,6 @@ const CollectionSettings = ({ collection }) => {
           />
         );
       }
-      case 'grpc': {
-        return <Grpc collection={collection} />;
-      }
     }
   };
 
@@ -140,7 +134,7 @@ const CollectionSettings = ({ collection }) => {
   return (
     <StyledWrapper className="flex flex-col h-full relative px-4 py-4 overflow-hidden">
       <div className="flex flex-wrap items-center tabs" role="tablist">
-        <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
+      <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
           Overview
         </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
@@ -168,18 +162,12 @@ const CollectionSettings = ({ collection }) => {
         </div>
         <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
           Proxy
-          {Object.keys(proxyConfig).length > 0 && <StatusDot />}
+          {Object.keys(proxyConfig).length > 0  && <StatusDot />}
         </div>
         <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
           Client Certificates
           {clientCertConfig.length > 0 && <StatusDot />}
         </div>
-        {isGrpcEnabled && (
-          <div className={getTabClassname('grpc')} role="tab" onClick={() => setTab('grpc')}>
-            gRPC
-            {grpcConfig.protoFiles && grpcConfig.protoFiles.length > 0 && <StatusDot />}
-          </div>
-        )}
       </div>
       <section className="mt-4 h-full overflow-auto">{getTabPanel(tab)}</section>
     </StyledWrapper>

packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/index.js

@@ -67,10 +67,10 @@ const RequestTab = ({ request, response }) => {
         )}
       </div>
 
-      {request?.data && (
+      {request?.body && (
         <div className="section">
           <h4>Request Body</h4>
-          <pre className="code-block">{formatBody(request.data)}</pre>
+          <pre className="code-block">{formatBody(request.body)}</pre>
         </div>
       )}
     </div>
@@ -239,4 +239,4 @@ const RequestDetailsPanel = () => {
   );
 };
 
-export default RequestDetailsPanel; 
+export default RequestDetailsPanel; 

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

@@ -16,7 +16,6 @@ const Wrapper = styled.div`
     border-radius: 3px;
     max-height: 90vh;
     overflow-y: auto;
-    max-width: unset !important;
 
     .tippy-content {
       padding-left: 0;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import Tippy from '@tippyjs/react';
 import StyledWrapper from './StyledWrapper';
 
-const Dropdown = ({ icon, children, onCreate, placement, transparent, ...props }) => {
+const Dropdown = ({ icon, children, onCreate, placement, transparent }) => {
   return (
     <StyledWrapper className="dropdown" transparent={transparent}>
       <Tippy
@@ -14,7 +14,6 @@ const Dropdown = ({ icon, children, onCreate, placement, transparent, ...props }
         interactive={true}
         trigger="click"
         appendTo="parent"
-        {...props}
       >
         {icon}
       </Tippy>

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

@@ -1,60 +0,0 @@
-import React from 'react';
-import { IconPlus, IconDownload, IconSettings } from '@tabler/icons';
-
-const EnvironmentListContent = ({
-  environments,
-  activeEnvironmentUid,
-  description,
-  onEnvironmentSelect,
-  onSettingsClick,
-  onCreateClick,
-  onImportClick
-}) => {
-  return (
-    <div>
-      {environments && environments.length > 0 ? (
-        <>
-          <div className="environment-list">
-            <div className="dropdown-item no-environment" onClick={() => onEnvironmentSelect(null)}>
-              <span>No Environment</span>
-            </div>
-            <div>
-              {environments.map((env) => (
-                <div
-                  key={env.uid}
-                  className={`dropdown-item ${env.uid === activeEnvironmentUid ? 'active' : ''}`}
-                  onClick={() => onEnvironmentSelect(env)}
-                >
-                  <span className="max-w-32 truncate no-wrap">{env.name}</span>
-                </div>
-              ))}
-            </div>
-            <div className="dropdown-item configure-button">
-              <button onClick={onSettingsClick} id="configure-env">
-                <IconSettings size={16} strokeWidth={1.5} />
-                <span>Configure</span>
-              </button>
-            </div>
-          </div>
-        </>
-      ) : (
-        <div className="empty-state">
-          <h3>Ready to get started?</h3>
-          <p>{description}</p>
-          <div className="space-y-2">
-            <button onClick={onCreateClick} id="create-env">
-              <IconPlus size={16} strokeWidth={1.5} />
-              Create
-            </button>
-            <button onClick={onImportClick} id="import-env">
-              <IconDownload size={16} strokeWidth={1.5} />
-              Import
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default EnvironmentListContent;

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

@@ -2,227 +2,14 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .current-environment {
-    border-radius: 0.9375rem;
-    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
-    user-select: none;
-    background-color: transparent;
-    border: 1px solid ${(props) => props.theme.dropdown.selectedColor};
-    line-height: 1rem;
+    background-color: ${(props) => props.theme.sidebar.badge.bg};
+    border-radius: 15px;
 
     .caret {
       margin-left: 0.25rem;
       color: rgb(140, 140, 140);
       fill: rgb(140, 140, 140);
     }
-
-    .env-icon {
-      margin-right: 0.25rem;
-      color: ${(props) => props.theme.dropdown.selectedColor};
-    }
-
-    .env-text {
-      color: ${(props) => props.theme.dropdown.selectedColor};
-      font-size: 0.875rem;
-    }
-
-    .env-separator {
-      color: #8c8c8c;
-      margin: 0 0.25rem;
-      opacity: 0.7;
-    }
-
-    .env-text-inactive {
-      color: ${(props) => props.theme.dropdown.color};
-      font-size: 0.875rem;
-      opacity: 0.7;
-    }
-
-    &.no-environments {
-      background-color: ${(props) => props.theme.sidebar.badge.bg};
-      border: 1px solid transparent;
-      color: ${(props) => props.theme.dropdown.secondaryText};
-    }
-  }
-
-  .tippy-box {
-    min-width: 11.875rem;
-    min-height: 15.0625rem;
-    max-height: 75vh;
-    font-size: 0.8125rem;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .tippy-box .tippy-content {
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    .dropdown-item {
-      display: flex;
-      align-items: center;
-      padding: 0.35rem 0.6rem;
-      cursor: pointer;
-      font-size: 0.8125rem;
-      color: ${(props) => props.theme.dropdown.primaryText};
-
-      &:hover:not(:disabled) {
-        background-color: ${(props) => props.theme.dropdown.hoverBg};
-      }
-
-      &.active {
-        background-color: ${(props) => props.theme.dropdown.selectedBg};
-        color: ${(props) => props.theme.dropdown.selectedColor};
-      }
-
-      &.no-environment {
-        color: ${(props) => props.theme.dropdown.mutedText};
-      }
-    }
-  }
-
-  .configure-button {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: ${(props) => props.theme.dropdown.bg};
-    border-top: 0.0625rem solid ${(props) => props.theme.dropdown.separator};
-    z-index: 10;
-    margin: 0;
-    
-    &:hover {
-      background-color: ${(props) => props.theme.dropdown.bg + ' !important'};
-    }
-
-    button {
-      color: ${(props) => props.theme.dropdown.primaryText};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      gap: 0.5rem;
-    }
-  }
-
-  .tab-button {
-    color: var(--color-tab-inactive);
-    font-size: 0.8125rem;
-
-    .tab-content-wrapper {
-      position: relative;
-      display: flex;
-      align-items: center;
-      gap: 0.125rem;
-    }
-
-    &.active {
-      color: ${(props) => props.theme.tabs.active.color};
-      border-bottom-color: ${(props) => props.theme.tabs.active.border};
-    }
-
-    &.inactive {
-      border-bottom-color: transparent;
-    }
-  }
-
-  .tab-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .environment-list {
-    flex: 1;
-    overflow-y: auto;
-    max-height: calc(75vh - 8rem); 
-    padding-bottom: 2.625rem;
-  }
-
-  .dropdown-item-list {
-    max-height: 75vh;
-    overflow-y: scroll;
-  }
-
-  .empty-state {
-    max-width: 20rem;
-    margin: 0 auto;
-    padding: 0.35rem 0.6rem;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 12.5rem;
-
-    h3 {
-      color: ${(props) => props.theme.dropdown.primaryText};
-      font-size: 1rem;
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-      line-height: 1.4;
-    }
-
-    p {
-      color: ${(props) => props.theme.dropdown.primaryText};
-      opacity: 0.75;
-      font-size: 0.6875rem;
-      line-height: 1.5;
-      margin-bottom: 1rem;
-      max-width: 11.875rem;
-      margin: 0 auto;
-      margin-bottom: 1rem;
-    }
-
-    .space-y-2 {
-      width: 100%;
-      align-self: stretch;
-    }
-
-    .space-y-2 > button {
-      border: 0.0625rem solid ${(props) => props.theme.dropdown.primaryText};
-      background: transparent;
-      color: ${(props) => props.theme.dropdown.primaryText};
-      padding: 0.5rem 1rem;
-      border-radius: 0.375rem;
-      width: 100%;
-      margin-bottom: 0.5rem;
-      font-size: 0.75rem;
-      font-weight: 500;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.5rem;
-
-      &:hover {
-        background-color: ${(props) => props.theme.dropdown.hoverBg};
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .no-collection-message {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem 1rem;
-    color: ${(props) => props.theme.dropdown.primaryText};
-    font-size: 0.8125rem;
-    line-height: 1.5;
-    text-align: center;
-    opacity: 0.75;
-
-    svg {
-      margin: 0 auto 1rem auto;
-      color: ${(props) => props.theme.dropdown.primaryText};
-      opacity: 0.5;
-    }
   }
 `;
 

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

@@ -1,240 +1,95 @@
-import React, { useState, useRef, forwardRef } from 'react';
+import React, { useRef, forwardRef, useState } from 'react';
 import find from 'lodash/find';
 import Dropdown from 'components/Dropdown';
-import { IconWorld, IconDatabase, IconCaretDown, IconSettings, IconPlus, IconDownload } from '@tabler/icons';
-import { useSelector, useDispatch } from 'react-redux';
-import { updateEnvironmentSettingsModalVisibility } from 'providers/ReduxStore/slices/app';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import { selectGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
-import toast from 'react-hot-toast';
-import EnvironmentListContent from './EnvironmentListContent/index';
+import { updateEnvironmentSettingsModalVisibility } from 'providers/ReduxStore/slices/app';
+import { IconSettings, IconCaretDown, IconDatabase, IconDatabaseOff } from '@tabler/icons';
 import EnvironmentSettings from '../EnvironmentSettings';
-import GlobalEnvironmentSettings from 'components/GlobalEnvironments/EnvironmentSettings';
-import CreateEnvironment from '../EnvironmentSettings/CreateEnvironment';
-import ImportEnvironment from '../EnvironmentSettings/ImportEnvironment';
-import CreateGlobalEnvironment from 'components/GlobalEnvironments/EnvironmentSettings/CreateEnvironment';
-import ImportGlobalEnvironment from 'components/GlobalEnvironments/EnvironmentSettings/ImportEnvironment';
+import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
 
 const EnvironmentSelector = ({ collection }) => {
   const dispatch = useDispatch();
   const dropdownTippyRef = useRef();
-  const [activeTab, setActiveTab] = useState('collection');
-  const [showGlobalSettings, setShowGlobalSettings] = useState(false);
-  const [showCollectionSettings, setShowCollectionSettings] = useState(false);
-  const [showCreateGlobalModal, setShowCreateGlobalModal] = useState(false);
-  const [showImportGlobalModal, setShowImportGlobalModal] = useState(false);
-  const [showCreateCollectionModal, setShowCreateCollectionModal] = useState(false);
-  const [showImportCollectionModal, setShowImportCollectionModal] = useState(false);
+  const [openSettingsModal, setOpenSettingsModal] = useState(false);
+  const { environments, activeEnvironmentUid } = collection;
+  const activeEnvironment = activeEnvironmentUid ? find(environments, (e) => e.uid === activeEnvironmentUid) : null;
 
-  const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
-  const activeGlobalEnvironmentUid = useSelector((state) => state.globalEnvironments.activeGlobalEnvironmentUid);
-  const activeGlobalEnvironment = activeGlobalEnvironmentUid
-    ? find(globalEnvironments, (e) => e.uid === activeGlobalEnvironmentUid)
-    : null;
-
-  const environments = collection?.environments || [];
-  const activeEnvironmentUid = collection?.activeEnvironmentUid;
-  const activeCollectionEnvironment = activeEnvironmentUid
-    ? find(environments, (e) => e.uid === activeEnvironmentUid)
-    : null;
-
-  const tabs = [
-    { id: 'collection', label: 'Collection', icon: <IconDatabase size={16} strokeWidth={1.5} /> },
-    { id: 'global', label: 'Global', icon: <IconWorld size={16} strokeWidth={1.5} /> }
-  ];
-
-  const onDropdownCreate = (ref) => {
-    dropdownTippyRef.current = ref;
-  };
-
-  // Get description based on active tab
-  const description =
-    activeTab === 'collection'
-      ? 'Create your first environment to begin working with your collection.'
-      : 'Create your first global environment to begin working across collections.';
-
-  // Environment selection handler
-  const handleEnvironmentSelect = (environment) => {
-    const action =
-      activeTab === 'collection'
-        ? selectEnvironment(environment ? environment.uid : null, collection.uid)
-        : selectGlobalEnvironment({ environmentUid: environment ? environment.uid : null });
-
-    dispatch(action)
-      .then(() => {
-        if (environment) {
-          toast.success(`Environment changed to ${environment.name}`);
-        } else {
-          toast.success('No Environments are active now');
-        }
-        dropdownTippyRef.current.hide();
-      })
-      .catch((err) => {
-        toast.error('An error occurred while selecting the environment');
-      });
-  };
-
-  // Settings handler
-  const handleSettingsClick = () => {
-    if (activeTab === 'collection') {
-      dispatch(updateEnvironmentSettingsModalVisibility(true));
-      setShowCollectionSettings(true);
-    } else {
-      setShowGlobalSettings(true);
-    }
-    dropdownTippyRef.current.hide();
-  };
-
-  // Create handler
-  const handleCreateClick = () => {
-    if (activeTab === 'collection') {
-      setShowCreateCollectionModal(true);
-    } else {
-      setShowCreateGlobalModal(true);
-    }
-    dropdownTippyRef.current.hide();
-  };
-
-  // Import handler
-  const handleImportClick = () => {
-    if (activeTab === 'collection') {
-      setShowImportCollectionModal(true);
-    } else {
-      setShowImportGlobalModal(true);
-    }
-    dropdownTippyRef.current.hide();
-  };
-
-  // Modal handlers
-  const handleCloseSettings = () => {
-    setShowGlobalSettings(false);
-    setShowCollectionSettings(false);
-    dispatch(updateEnvironmentSettingsModalVisibility(false));
-  };
-
-  // Create icon component for dropdown trigger
   const Icon = forwardRef((props, ref) => {
-    const hasAnyEnv = activeGlobalEnvironment || activeCollectionEnvironment;
-
-    const displayContent = hasAnyEnv ? (
-      <>
-        {activeCollectionEnvironment && (
-          <>
-            <div className="flex items-center">
-              <IconDatabase size={14} strokeWidth={1.5} className="env-icon" />
-              <span className="env-text max-w-24 truncate no-wrap">{activeCollectionEnvironment.name}</span>
-            </div>
-            {activeGlobalEnvironment && <span className="env-separator">|</span>}
-          </>
-        )}
-        {activeGlobalEnvironment && (
-          <div className="flex items-center">
-            <IconWorld size={14} strokeWidth={1.5} className="env-icon" />
-            <span className="env-text max-w-24 truncate no-wrap">{activeGlobalEnvironment.name}</span>
-          </div>
-        )}
-      </>
-    ) : (
-      <span className="env-text-inactive max-w-36 truncate no-wrap">No environments</span>
-    );
-
     return (
-      <div
-        ref={ref}
-        className={`current-environment flex align-center justify-center cursor-pointer bg-transparent ${
-          !hasAnyEnv ? 'no-environments' : ''
-        }`}
-        data-testid="environment-selector-trigger"
-      >
-        {displayContent}
+      <div ref={ref} className="current-environment flex items-center justify-center pl-3 pr-2 py-1 select-none">
+        <p className="text-nowrap truncate max-w-32">{activeEnvironment ? activeEnvironment.name : 'No Environment'}</p>
         <IconCaretDown className="caret" size={14} strokeWidth={2} />
       </div>
     );
   });
 
+  const handleSettingsIconClick = () => {
+    setOpenSettingsModal(true);
+    dispatch(updateEnvironmentSettingsModalVisibility(true));
+  };
+
+  const handleModalClose = () => {
+    setOpenSettingsModal(false);
+    dispatch(updateEnvironmentSettingsModalVisibility(false));
+  };
+
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  const onSelect = (environment) => {
+    dispatch(selectEnvironment(environment ? environment.uid : null, collection.uid))
+      .then(() => {
+        if (environment) {
+          toast.success(`Environment changed to ${environment.name}`);
+        } else {
+          toast.success(`No Environments are active now`);
+        }
+      })
+      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
+  };
+
   return (
     <StyledWrapper>
-      <div className="environment-selector flex align-center cursor-pointer">
+      <div className="flex items-center cursor-pointer environment-selector">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          {/* Tab Headers */}
-          <div className="tab-header flex justify-center p-[0.75rem]">
-            {tabs.map((tab) => (
-              <button
-                key={tab.id}
-                className={`tab-button whitespace-nowrap pb-[0.375rem] border-b-[0.125rem] bg-transparent flex align-center cursor-pointer transition-all duration-200 mr-[1.25rem] ${
-                  activeTab === tab.id ? 'active' : 'inactive'
-                }`}
-                onClick={() => setActiveTab(tab.id)}
-                data-testid={`env-tab-${tab.id}`}
-              >
-                <span className="tab-content-wrapper">
-                  {tab.icon}
-                  {tab.label}
-                </span>
-              </button>
-            ))}
+          <div className="label-item font-medium">Collection Environments</div>
+          {environments && environments.length
+            ? environments.map((e) => (
+                <div
+                  className={`dropdown-item ${e?.uid === activeEnvironmentUid ? 'active' : ''}`}
+                  key={e.uid}
+                  onClick={() => {
+                    onSelect(e);
+                    dropdownTippyRef.current.hide();
+                  }}
+                >
+                  <IconDatabase size={18} strokeWidth={1.5} /> <span className="ml-2 break-all">{e.name}</span>
+                </div>
+              ))
+            : null}
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onSelect(null);
+            }}
+          >
+            <IconDatabaseOff size={18} strokeWidth={1.5} />
+            <span className="ml-2">No Environment</span>
           </div>
-
-          {/* Tab Content */}
-          <div className="tab-content">
-            <EnvironmentListContent
-              environments={activeTab === 'collection' ? environments : globalEnvironments}
-              activeEnvironmentUid={activeTab === 'collection' ? activeEnvironmentUid : activeGlobalEnvironmentUid}
-              description={description}
-              onEnvironmentSelect={handleEnvironmentSelect}
-              onSettingsClick={handleSettingsClick}
-              onCreateClick={handleCreateClick}
-              onImportClick={handleImportClick}
-            />
+          <div className="dropdown-item border-top" onClick={() => {
+            handleSettingsIconClick();
+            dropdownTippyRef.current.hide();
+          }}>
+            <div className="pr-2 text-gray-600">
+              <IconSettings size={18} strokeWidth={1.5} />
+            </div>
+            <span>Configure</span>
           </div>
         </Dropdown>
       </div>
-
-      {/* Modals - Rendered outside dropdown to avoid conflicts */}
-      {showGlobalSettings && (
-        <GlobalEnvironmentSettings globalEnvironments={globalEnvironments} collection={collection} onClose={handleCloseSettings} />
-      )}
-
-      {showCollectionSettings && <EnvironmentSettings collection={collection} onClose={handleCloseSettings} />}
-
-      {showCreateGlobalModal && (
-        <CreateGlobalEnvironment
-          onClose={() => setShowCreateGlobalModal(false)}
-          onEnvironmentCreated={() => {
-            setShowGlobalSettings(true);
-          }}
-        />
-      )}
-
-      {showImportGlobalModal && (
-        <ImportGlobalEnvironment
-          onClose={() => setShowImportGlobalModal(false)}
-          onEnvironmentCreated={() => {
-            setShowGlobalSettings(true);
-          }}
-        />
-      )}
-
-      {showCreateCollectionModal && (
-        <CreateEnvironment
-          collection={collection}
-          onClose={() => setShowCreateCollectionModal(false)}
-          onEnvironmentCreated={() => {
-            setShowCollectionSettings(true);
-          }}
-        />
-      )}
-
-      {showImportCollectionModal && (
-        <ImportEnvironment
-          collection={collection}
-          onClose={() => setShowImportCollectionModal(false)}
-          onEnvironmentCreated={() => {
-            setShowCollectionSettings(true);
-          }}
-        />
-      )}
+      {openSettingsModal && <EnvironmentSettings collection={collection} onClose={handleModalClose} />}
     </StyledWrapper>
   );
 };

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

@@ -8,7 +8,7 @@ import Portal from 'components/Portal';
 import Modal from 'components/Modal';
 import { validateName, validateNameError } from 'utils/common/regex';
 
-const CreateEnvironment = ({ collection, onClose, onEnvironmentCreated }) => {
+const CreateEnvironment = ({ collection, onClose }) => {
   const dispatch = useDispatch();
   const inputRef = useRef();
 
@@ -37,10 +37,6 @@ const CreateEnvironment = ({ collection, onClose, onEnvironmentCreated }) => {
         .then(() => {
           toast.success('Environment created in collection');
           onClose();
-          // Call the callback if provided
-          if (onEnvironmentCreated) {
-            onEnvironmentCreated();
-          }
         })
         .catch(() => toast.error('An error occurred while creating the environment'));
     }

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

@@ -5,7 +5,7 @@ import { IconTrash, IconAlertCircle, IconDeviceFloppy, IconRefresh, IconCircleCh
 import { useTheme } from 'providers/Theme';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import MultiLineEditor from 'components/MultiLineEditor/index';
+import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
 import { useFormik } from 'formik';
@@ -173,7 +173,7 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
   return (
     <StyledWrapper className="w-full mt-6 mb-6">
       <div className="h-[50vh] overflow-y-auto w-full">
-        <table className="environment-variables">
+        <table>
           <thead>
             <tr>
               <td className="text-center">Enabled</td>
@@ -214,7 +214,7 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
                 </td>
                 <td className="flex flex-row flex-nowrap items-center">
                   <div className="overflow-hidden grow w-full relative">
-                    <MultiLineEditor
+                    <SingleLineEditor
                       theme={storedTheme}
                       collection={_collection}
                       name={`${index}.value`}
@@ -253,8 +253,6 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
             ref={addButtonRef}
             className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
             onClick={addVariable}
-            id="add-variable"
-            data-testid="add-variable"
           >
             + Add Variable
           </button>
@@ -262,15 +260,15 @@ const EnvironmentVariables = ({ environment, collection, setIsModified, original
       </div>
 
       <div className="flex items-center">
-        <button type="submit" className="submit btn btn-sm btn-secondary mt-2 flex items-center" onClick={formik.handleSubmit} data-testid="save-env">
+        <button type="submit" className="submit btn btn-sm btn-secondary mt-2 flex items-center" onClick={formik.handleSubmit}>
           <IconDeviceFloppy size={16} strokeWidth={1.5} className="mr-1" />
           Save
         </button>
-        <button type="submit" className="ml-2 px-1 submit btn btn-sm btn-close mt-2 flex items-center" onClick={handleReset} data-testid="reset-env">
+        <button type="submit" className="ml-2 px-1 submit btn btn-sm btn-close mt-2 flex items-center" onClick={handleReset}>
           <IconRefresh size={16} strokeWidth={1.5} className="mr-1" />
           Reset
         </button>
-        <button type="submit" className="submit btn btn-sm btn-close mt-2 flex items-center" onClick={onActivate} data-testid="activate-env">
+        <button type="submit" className="submit btn btn-sm btn-close mt-2 flex items-center" onClick={onActivate}>
           <IconCircleCheck size={16} strokeWidth={1.5} className="mr-1" />
           Activate
         </button>

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

@@ -8,7 +8,7 @@ import { importEnvironment } from 'providers/ReduxStore/slices/collections/actio
 import { toastError } from 'utils/common/error';
 import { IconDatabaseImport } from '@tabler/icons';
 
-const ImportEnvironment = ({ collection, onClose, onEnvironmentCreated }) => {
+const ImportEnvironment = ({ collection, onClose }) => {
   const dispatch = useDispatch();
 
   const handleImportPostmanEnvironment = () => {
@@ -36,22 +36,17 @@ const ImportEnvironment = ({ collection, onClose, onEnvironmentCreated }) => {
       })
       .then(() => {
         onClose();
-        // Call the callback if provided
-        if (onEnvironmentCreated) {
-          onEnvironmentCreated();
-        }
       })
       .catch((err) => toastError(err, 'Postman Import environment failed'));
   };
 
   return (
     <Portal>
-      <Modal size="sm" title="Import Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose} dataTestId="import-environment-modal">
+      <Modal size="sm" title="Import Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
         <button
           type="button"
           onClick={handleImportPostmanEnvironment}
           className="flex justify-center flex-col items-center w-full dark:bg-zinc-700 rounded-lg border-2 border-dashed border-zinc-300 dark:border-zinc-400 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
-          data-testid="import-postman-environment"
         >
           <IconDatabaseImport size={64} />
           <span className="mt-2 block text-sm font-semibold">Import your Postman environments</span>

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

@@ -56,8 +56,9 @@ const EnvironmentSettings = ({ collection, onClose }) => {
           ) : tab === 'import' ? (
             <ImportEnvironment collection={collection} onClose={() => setTab('default')} />
           ) : (
-            <DefaultTab setTab={setTab} />
+            <></>
           )}
+          <DefaultTab setTab={setTab} />
         </Modal>
       </StyledWrapper>
     );

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

@@ -1,31 +1,21 @@
-import React, { useState } from 'react';
+import React from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import { addFolderHeader, updateFolderHeader, deleteFolderHeader, setFolderHeaders } from 'providers/ReduxStore/slices/collections';
+import { addFolderHeader, updateFolderHeader, deleteFolderHeader } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
-import BulkEditor from 'components/BulkEditor/index';
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
 const Headers = ({ collection, folder }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const headers = get(folder, 'root.request.headers', []);
-  const [isBulkEditMode, setIsBulkEditMode] = useState(false);
-
-  const toggleBulkEditMode = () => {
-    setIsBulkEditMode(!isBulkEditMode);
-  };
-
-  const handleBulkHeadersChange = (newHeaders) => {
-    dispatch(setFolderHeaders({ collectionUid: collection.uid, folderUid: folder.uid, headers: newHeaders }));
-  };
 
   const addHeader = () => {
     dispatch(
@@ -72,22 +62,6 @@ const Headers = ({ collection, folder }) => {
     );
   };
 
-  if (isBulkEditMode) {
-    return (
-      <StyledWrapper className="w-full">
-        <div className="text-xs mb-4 text-muted">
-          Request headers that will be sent with every request inside this folder.
-        </div>
-        <BulkEditor
-          params={headers}
-          onChange={handleBulkHeadersChange}
-          onToggle={toggleBulkEditMode}
-          onSave={handleSave}
-        />
-      </StyledWrapper>
-    );
-  }
-
   return (
     <StyledWrapper className="w-full">
       <div className="text-xs mb-4 text-muted">
@@ -167,14 +141,9 @@ const Headers = ({ collection, folder }) => {
             : null}
         </tbody>
       </table>
-      <div className="flex justify-between mt-2">
-        <button className="btn-add-header text-link pr-2 py-3 select-none" onClick={addHeader}>
-          + Add Header
-        </button>
-        <button className="text-link select-none" onClick={toggleBulkEditMode}>
-          Bulk Edit
-        </button>
-      </div>
+      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
+        + Add Header
+      </button>
 
       <div className="mt-6">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .current-environment {
+  }
+  .environment-active {
+    padding: 0.3rem 0.4rem;
+    color: ${(props) => props.theme.colors.text.yellow};
+    border: solid 1px ${(props) => props.theme.colors.text.yellow} !important;
+  }
+  .environment-selector {
+    .active: {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,100 @@
+import React, { useRef, forwardRef, useState } from 'react';
+import find from 'lodash/find';
+import Dropdown from 'components/Dropdown';
+import { IconSettings, IconWorld, IconDatabase, IconDatabaseOff, IconCheck } from '@tabler/icons';
+import EnvironmentSettings from '../EnvironmentSettings';
+import toast from 'react-hot-toast';
+import { useDispatch, useSelector } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+import { selectGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
+import ToolHint from 'components/ToolHint/index';
+
+const EnvironmentSelector = () => {
+  const dispatch = useDispatch();
+  const dropdownTippyRef = useRef();
+  const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
+  const activeGlobalEnvironmentUid = useSelector((state) => state.globalEnvironments.activeGlobalEnvironmentUid);
+  const [openSettingsModal, setOpenSettingsModal] = useState(false);
+  const activeEnvironment = activeGlobalEnvironmentUid ? find(globalEnvironments, (e) => e.uid === activeGlobalEnvironmentUid) : null;
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+        <div ref={ref} className={`current-environment flex flex-row gap-1 rounded-xl text-xs cursor-pointer items-center justify-center select-none ${activeGlobalEnvironmentUid? 'environment-active': ''}`}>
+          <ToolHint text="Global Environments" toolhintId="GlobalEnvironmentsToolhintId" className='flex flex-row'>
+            <IconWorld className="globe" size={16} strokeWidth={1.5} />
+            {
+              activeEnvironment ? <div className='text-nowrap truncate max-w-32'>{activeEnvironment?.name}</div> : null
+            }
+          </ToolHint>
+        </div>
+    );
+  });
+
+  const handleSettingsIconClick = () => {
+    setOpenSettingsModal(true);
+  };
+
+  const handleModalClose = () => {
+    setOpenSettingsModal(false);
+  };
+
+  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+
+  const onSelect = (environment) => {
+    dispatch(selectGlobalEnvironment({ environmentUid: environment ? environment.uid : null }))
+      .then(() => {
+        if (environment) {
+          toast.success(`Environment changed to ${environment.name}`);
+        } else {
+          toast.success(`No Environments are active now`);
+        }
+      })
+      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
+  };
+
+  return (
+    <StyledWrapper>
+      <div className="flex items-center cursor-pointer environment-selector mr-3">
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end" transparent={true}>
+          <div className="label-item font-medium">Global Environments</div>
+          {globalEnvironments && globalEnvironments.length
+            ? globalEnvironments.map((e) => (
+                <div
+                  className={`dropdown-item ${e?.uid === activeGlobalEnvironmentUid ? 'active' : ''}`}
+                  key={e.uid}
+                  onClick={() => {
+                    onSelect(e);
+                    dropdownTippyRef.current.hide();
+                  }}
+                >
+                  <IconDatabase size={18} strokeWidth={1.5} /> <span className="ml-2 break-all">{e.name}</span>
+                </div>
+              ))
+            : null}
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onSelect(null);
+            }}
+          >
+            <IconDatabaseOff size={18} strokeWidth={1.5} />
+            <span className="ml-2">No Environment</span>
+          </div>
+          <div className="dropdown-item border-top" onClick={() => {
+            handleSettingsIconClick();
+            dropdownTippyRef.current.hide();
+          }}>
+            <div className="pr-2 text-gray-600">
+              <IconSettings size={18} strokeWidth={1.5} />
+            </div>
+            <span>Configure</span>
+          </div>
+        </Dropdown>
+      </div>
+      {openSettingsModal && <EnvironmentSettings globalEnvironments={globalEnvironments} activeGlobalEnvironmentUid={activeGlobalEnvironmentUid} onClose={handleModalClose} />}
+    </StyledWrapper>
+  );
+};
+
+export default EnvironmentSelector;

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

@@ -8,7 +8,7 @@ import Modal from 'components/Modal';
 import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import { validateName, validateNameError } from 'utils/common/regex';
 
-const CreateEnvironment = ({ onClose, onEnvironmentCreated }) => {
+const CreateEnvironment = ({ onClose }) => {
   const globalEnvs = useSelector((state) => state?.globalEnvironments?.globalEnvironments);
 
   const validateEnvironmentName = (name) => {
@@ -39,10 +39,6 @@ const CreateEnvironment = ({ onClose, onEnvironmentCreated }) => {
         .then(() => {
           toast.success('Global environment created!');
           onClose();
-          // Call the callback if provided
-          if (onEnvironmentCreated) {
-            onEnvironmentCreated();
-          }
         })
         .catch(() => toast.error('An error occurred while creating the environment'));
     }

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

@@ -2,8 +2,8 @@ import React, { useRef, useEffect } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash, IconAlertCircle } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
-import { useDispatch, useSelector } from 'react-redux';
-import MultiLineEditor from 'components/MultiLineEditor/index';
+import { useDispatch } from 'react-redux';
+import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 import { uuid } from 'utils/common';
 import { useFormik } from 'formik';
@@ -12,18 +12,11 @@ import { variableNameRegex } from 'utils/common/regex';
 import toast from 'react-hot-toast';
 import { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import { Tooltip } from 'react-tooltip';
-import { getGlobalEnvironmentVariables } from 'utils/collections';
 
-const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentVariables, collection }) => {
+const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentVariables }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
   const addButtonRef = useRef(null);
-  const { globalEnvironments, activeGlobalEnvironmentUid } = useSelector(state => state.globalEnvironments);
-
-  let _collection = cloneDeep(collection);
-
-  const globalEnvironmentVariables = getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid });
-  _collection.globalEnvironmentVariables = globalEnvironmentVariables;
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -100,7 +93,7 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
 
   useEffect(() => {
     if (formik.dirty) {
-      // Smooth scrolling to the changed parameter is temporarily disabled
+      // Smooth scrolling to the changed parameter is temporarily disabled 
       // due to UX issues when editing the first row in a long list of environment variables.
       // addButtonRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
@@ -152,11 +145,10 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
                     <ErrorMessage name={`${index}.name`} />
                   </div>
                 </td>
-                <td className="flex flex-row flex-nowrap items-center">
+                <td className="flex flex-row flex-nowrap">
                   <div className="overflow-hidden grow w-full relative">
-                    <MultiLineEditor
+                    <SingleLineEditor
                       theme={storedTheme}
-                      collection={_collection}
                       name={`${index}.value`}
                       value={variable.value}
                       isSecret={variable.secret}
@@ -187,7 +179,6 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
             ref={addButtonRef}
             className="btn-add-param text-link pr-2 py-3 mt-2 select-none"
             onClick={addVariable}
-            data-testid="add-variable"
           >
             + Add Variable
           </button>
@@ -195,10 +186,10 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
       </div>
 
       <div>
-        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit} data-testid="save-env">
+        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit}>
           Save
         </button>
-        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset} data-testid="reset-env">
+        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset}>
           Reset
         </button>
       </div>

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

@@ -5,7 +5,7 @@ import DeleteEnvironment from '../../DeleteEnvironment';
 import RenameEnvironment from '../../RenameEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';
 
-const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
+const EnvironmentDetails = ({ environment, setIsModified }) => {
   const [openEditModal, setOpenEditModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
   const [openCopyModal, setOpenCopyModal] = useState(false);
@@ -37,7 +37,7 @@ const EnvironmentDetails = ({ environment, setIsModified, collection }) => {
       </div>
 
       <div>
-        <EnvironmentVariables environment={environment} setIsModified={setIsModified} collection={collection} />
+        <EnvironmentVariables environment={environment} setIsModified={setIsModified} />
       </div>
     </div>
   );

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

@@ -10,7 +10,7 @@ import ImportEnvironment from '../ImportEnvironment';
 import { isEqual } from 'lodash';
 import ToolHint from 'components/ToolHint/index';
 
-const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified, collection }) => {
+const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironment, setSelectedEnvironment, isModified, setIsModified }) => {
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const [openImportModal, setOpenImportModal] = useState(false);
   const [openManageSecretsModal, setOpenManageSecretsModal] = useState(false);
@@ -143,7 +143,6 @@ const EnvironmentList = ({ environments, activeEnvironmentUid, selectedEnvironme
           environment={selectedEnvironment}
           setIsModified={setIsModified}
           originalEnvironmentVariables={originalEnvironmentVariables}
-          collection={collection}
         />
       </div>
     </StyledWrapper>

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

@@ -9,7 +9,7 @@ import { IconDatabaseImport } from '@tabler/icons';
 import { addGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import { uuid } from 'utils/common/index';
 
-const ImportEnvironment = ({ onClose, onEnvironmentCreated }) => {
+const ImportEnvironment = ({ onClose }) => {
   const dispatch = useDispatch();
 
   const handleImportPostmanEnvironment = () => {
@@ -25,7 +25,12 @@ const ImportEnvironment = ({ onClose, onEnvironmentCreated }) => {
                 }
           )
           .map((environment) => {
-            dispatch(addGlobalEnvironment({ name: environment.name, variables: environment.variables }))
+            let variables = environment?.variables?.map(v => ({
+              ...v,
+              uid: uuid(),
+              type: 'text'
+            }));
+            dispatch(addGlobalEnvironment({ name: environment.name, variables }))
               .then(() => {
                 toast.success('Global Environment imported successfully');
               })
@@ -37,22 +42,17 @@ const ImportEnvironment = ({ onClose, onEnvironmentCreated }) => {
       })
       .then(() => {
         onClose();
-        // Call the callback if provided
-        if (onEnvironmentCreated) {
-          onEnvironmentCreated();
-        }
       })
       .catch((err) => toastError(err, 'Postman Import environment failed'));
   };
 
   return (
     <Portal>
-      <Modal size="sm" title="Import Global Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose} dataTestId="import-global-environment-modal">
+      <Modal size="sm" title="Import Global Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
         <button
           type="button"
           onClick={handleImportPostmanEnvironment}
           className="flex justify-center flex-col items-center w-full dark:bg-zinc-700 rounded-lg border-2 border-dashed border-zinc-300 dark:border-zinc-400 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
-          data-testid="import-postman-global-environment"
         >
           <IconDatabaseImport size={64} />
           <span className="mt-2 block text-sm font-semibold">Import your Postman environments</span>

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

@@ -39,7 +39,7 @@ const DefaultTab = ({ setTab }) => {
   );
 };
 
-const EnvironmentSettings = ({ globalEnvironments, collection, onClose }) => {
+const EnvironmentSettings = ({ globalEnvironments, activeGlobalEnvironmentUid, onClose }) => {
   const [isModified, setIsModified] = useState(false);
   const environments = globalEnvironments;
   const [selectedEnvironment, setSelectedEnvironment] = useState(null);
@@ -53,8 +53,9 @@ const EnvironmentSettings = ({ globalEnvironments, collection, onClose }) => {
           ) : tab === 'import' ? (
             <ImportEnvironment onClose={() => setTab('default')} />
           ) : (
-            <DefaultTab setTab={setTab} />
+            <></>
           )}
+          <DefaultTab setTab={setTab} />
         </Modal>
       </StyledWrapper>
     );
@@ -64,11 +65,11 @@ const EnvironmentSettings = ({ globalEnvironments, collection, onClose }) => {
     <Modal size="lg" title="Global Environments" handleCancel={onClose} hideFooter={true}>
       <EnvironmentList
         environments={globalEnvironments}
+        activeEnvironmentUid={activeGlobalEnvironmentUid}
         selectedEnvironment={selectedEnvironment}
         setSelectedEnvironment={setSelectedEnvironment}
         isModified={isModified}
         setIsModified={setIsModified}
-        collection={collection}
       />
     </Modal>
   );

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

@@ -1,361 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  /* Screen reader only content */
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .command-k-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    overflow-y: auto;
-    z-index: 20;
-    background-color: transparent;
-    &:before {
-      content: '';
-      height: 100%;
-      width: 100%;
-      left: 0;
-      opacity: ${(props) => props.theme.modal.backdrop.opacity};
-      top: 0;
-      background: black;
-      position: fixed;
-    }
-    animation: fade-in 0.1s forwards cubic-bezier(0.19, 1, 0.22, 1);
-  }
-  .command-k-modal {
-    background: ${(props) => props.theme.modal.body.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    width: 90%;
-    max-width: 600px;
-    max-height: 70vh;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    margin: 80px auto;
-    animation: fade-and-slide-in-from-top 0.3s forwards cubic-bezier(0.19, 1, 0.22, 1);
-    will-change: opacity, transform;
-  }
-  .command-k-header {
-    padding: 12px;
-    border-bottom: 1px solid ${(props) => props.theme.modal.input.border};
-    background: ${(props) => props.theme.modal.title.bg};
-  }
-  .search-input-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 8px 12px;
-    border: 1px solid ${(props) => props.theme.modal.input.border};
-    border-radius: 6px;
-    background: ${(props) => props.theme.modal.input.bg};
-    transition: all 0.2s ease;
-    &:focus-within {
-      border-color: ${(props) => props.theme.colors.text.muted};
-      box-shadow: 0 0 0 1px ${(props) => props.theme.colors.text.muted}40;
-    }
-    .search-icon {
-      color: ${(props) => props.theme.colors.text.muted};
-      opacity: 0.8;
-      margin-right: 8px;
-      flex-shrink: 0;
-    }
-    .clear-button {
-      background: transparent;
-      border: none;
-      padding: 4px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: ${(props) => props.theme.colors.text.muted};
-      opacity: 0.8;
-      margin-left: 8px;
-      border-radius: 4px;
-      flex-shrink: 0;
-      &:hover {
-        background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'};
-      }
-    }
-  }
-  .search-input {
-    flex: 1;
-    background: transparent;
-    border: none;
-    outline: none;
-    color: ${(props) => props.theme.text};
-    font-size: 13px;
-    width: 100%;
-    padding: 0;
-    &::placeholder {
-      color: ${(props) => props.theme.colors.text.muted};
-      opacity: 0.7;
-    }
-  }
-  .command-k-results {
-    flex: 1;
-    overflow-y: auto;
-    max-height: 400px;
-    background: ${(props) => props.theme.modal.body.bg};
-    scrollbar-width: thin;
-    padding: 4px;
-    scroll-behavior: smooth;
-    /* Webkit scrollbar styling */
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)'};
-      border-radius: 4px;
-      &:hover {
-        background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)'};
-      }
-    }
-  }
-  .result-item {
-    display: flex;
-    align-items: center;
-    padding: 8px 12px;
-    gap: 8px;
-    cursor: pointer;
-    border-left: 2px solid transparent;
-    &:hover {
-      background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'};
-    }
-    &.selected {
-      background: ${(props) => `${props.theme.colors.text.yellow}15`};
-      border-left: 2px solid ${(props) => props.theme.colors.text.yellow};
-    }
-  }
-  .result-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    flex-shrink: 0;
-    color: ${(props) => props.theme.colors.text.muted};
-    opacity: 0.8;
-  }
-  .result-content {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-  }
-  .result-info {
-    flex: 1;
-    min-width: 0;
-    margin-right: 8px;
-  }
-  .result-badges {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-  }
-  .result-name {
-    font-size: 13px;
-    margin-bottom: 3px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: ${(props) => props.theme.text};
-    letter-spacing: 0.2px;
-  }
-  .result-path {
-    font-size: 12px;
-    color: ${(props) => props.theme.colors.text.muted};
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    letter-spacing: 0.1px;
-  }
-  .method-badge {
-    font-size: 11px;
-    font-weight: 500;
-    padding: 3px 8px;
-    border-radius: 4px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    flex-shrink: 0;
-    min-width: 55px;
-    text-align: center;
-    &.get {
-      color: #2ecc71;
-      background: rgba(46, 204, 113, 0.1);
-    }
-    &.post {
-      color: #3498db;
-      background: rgba(52, 152, 219, 0.1);
-    }
-    &.put {
-      color: #e67e22;
-      background: rgba(230, 126, 34, 0.1);
-    }
-    &.delete {
-      color: #e74c3c;
-      background: rgba(231, 76, 60, 0.1);
-    }
-    &.patch {
-      color: #9b59b6;
-      background: rgba(155, 89, 182, 0.1);
-    }
-    &.head {
-      color: #2980b9;
-      background: rgba(41, 128, 185, 0.1);
-    }
-    &.options {
-      color: #f1c40f;
-      background: rgba(241, 196, 15, 0.1);
-    }
-    &.unary {
-      color: #27ae60;
-      background: rgba(39, 174, 96, 0.12);
-      font-weight: 600;
-    }
-    &.client-streaming {
-      color: #2980b9;
-      background: rgba(41, 128, 185, 0.12);
-      font-weight: 600;
-    }
-    &.server-streaming {
-      color: #f39c12;
-      background: rgba(243, 156, 18, 0.12);
-      font-weight: 600;
-    }
-    &.bidirectional-streaming,
-    &.bidi-streaming {
-      color: #8e44ad;
-      background: rgba(142, 68, 173, 0.12);
-      font-weight: 600;
-    }
-  }
-  .result-type {
-    font-size: 11px;
-    color: ${(props) => props.theme.colors.text.muted};
-    padding: 2px 6px;
-    border-radius: 3px;
-    text-transform: uppercase;
-    letter-spacing: 0.3px;
-    background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.03)'};
-    opacity: 0.8;
-    flex-shrink: 0;
-  }
-  .result-item[data-type="documentation"] {
-    .result-icon {
-      color: ${(props) => props.theme.colors.text.muted};
-      opacity: 0.8;
-    }
-    .result-path {
-      font-size: 12px;
-      color: ${(props) => props.theme.colors.text.muted};
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      letter-spacing: 0.1px;
-      opacity: 0.8;
-    }
-    &:hover:not(.selected) {
-      background: ${(props) => props.theme.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'};
-    }
-  }
-  .no-results,
-  .empty-state {
-    padding: 24px 16px;
-    text-align: center;
-    color: ${(props) => props.theme.colors.text.muted};
-    font-size: 13px;
-  }
-  .command-k-footer {
-    padding: 8px 12px;
-    border-top: 1px solid ${(props) => props.theme.modal.input.border};
-    background: ${(props) => props.theme.colors.surface};
-  }
-  .keyboard-hints {
-    display: flex;
-    justify-content: center;
-    gap: 24px;
-    color: ${(props) => props.theme.colors.text.muted};
-    font-size: 12px;
-    letter-spacing: 0.2px;
-    span {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      .hint-icon {
-        color: ${(props) => props.theme.colors.text.muted};
-        opacity: 0.8;
-      }
-      .hint-icon + .hint-icon {
-        margin-left: -8px;
-      }
-      .keycap {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        padding: 2px 6px;
-        border: 1px solid ${(props) => props.theme.modal.input.border};
-        border-radius: 4px;
-        background: ${(props) =>
-          props.theme.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'};
-        font-size: 11px;
-        font-weight: 500;
-        font-family: inherit;
-        line-height: 1;
-        color: ${(props) => props.theme.text};
-      }
-    }
-  }
-  .highlight {
-    background: ${(props) => `${props.theme.colors.text.yellow}30`};
-    border-radius: 2px;
-    padding: 0 2px;
-    margin: 0 -1px;
-    font-weight: 500;
-  }
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  @keyframes fade-and-slide-in-from-top {
-    from {
-      opacity: 0;
-      transform: translateY(-20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-`;
-
-export default StyledWrapper; 

packages/bruno-app/src/components/GlobalSearchModal/constants/index.js

@@ -1,32 +0,0 @@
-export const SEARCH_TYPES = {
-  DOCUMENTATION: 'documentation',
-  COLLECTION: 'collection',
-  FOLDER: 'folder',
-  REQUEST: 'request'
-};
-
-export const MATCH_TYPES = {
-  COLLECTION: 'collection',
-  FOLDER: 'folder',
-  REQUEST: 'request',
-  URL: 'url',
-  PATH: 'path',
-  DOCUMENTATION: 'documentation'
-};
-
-export const SEARCH_CONFIG = {
-  MAX_DEPTH: 20,
-  FOCUS_DELAY: 100,
-  SCROLL_BEHAVIOR: 'smooth',
-  SCROLL_BLOCK: 'nearest',
-  DEBOUNCE_DELAY: 300
-};
-
-export const DOCUMENTATION_RESULT = {
-  type: SEARCH_TYPES.DOCUMENTATION,
-  item: { id: 'docs', name: 'Bruno Documentation' },
-  name: 'Bruno Documentation',
-  path: '/',
-  description: 'Browse the official Bruno documentation',
-  matchType: MATCH_TYPES.DOCUMENTATION
-};

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

@@ -1,516 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import {
-  IconSearch,
-  IconX,
-  IconFolder,
-  IconBox,
-  IconFileText,
-  IconBook
-} from '@tabler/icons';
-import { flattenItems, isItemARequest, isItemAFolder, findParentItemInCollection } from 'utils/collections';
-import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
-import { hideHomePage } from 'providers/ReduxStore/slices/app';
-import { toggleCollectionItem, toggleCollection } from 'providers/ReduxStore/slices/collections';
-import { mountCollection } from 'providers/ReduxStore/slices/collections/actions';
-import { getDefaultRequestPaneTab } from 'utils/collections';
-import { normalizeQuery, isValidQuery, highlightText, sortResults, getTypeLabel, getItemPath } from './utils/searchUtils';
-import { SEARCH_TYPES, MATCH_TYPES, SEARCH_CONFIG, DOCUMENTATION_RESULT } from './constants';
-import StyledWrapper from './StyledWrapper';
-
-const GlobalSearchModal = ({ isOpen, onClose }) => {
-  const [query, setQuery] = useState('');
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [results, setResults] = useState([]);
-  const inputRef = useRef(null);
-  const resultsRef = useRef(null);
-  const debounceTimeoutRef = useRef(null);
-  const dispatch = useDispatch();
-
-  const collections = useSelector((state) => state.collections.collections);
-  const tabs = useSelector((state) => state.tabs.tabs);
-
-  const createCollectionResults = () => {
-    const collectionResults = collections.map(collection => ({
-      type: SEARCH_TYPES.COLLECTION,
-      item: collection,
-      name: collection.name,
-      path: collection.name,
-      matchType: MATCH_TYPES.COLLECTION,
-      collectionUid: collection.uid
-    }));
-
-    collectionResults.sort((a, b) => a.name.localeCompare(b.name));
-    return [DOCUMENTATION_RESULT, ...collectionResults];
-  };
-
-  const searchInCollections = (searchTerms, enablePathMatch) => {
-    const results = [];
-
-    // Check for documentation match
-    const queryLower = searchTerms.join(' ');
-    if (['documentation', 'docs', 'bruno docs'].some(term => term.includes(queryLower))) {
-      results.push(DOCUMENTATION_RESULT);
-    }
-
-    collections.forEach(collection => {
-      // Search collection name
-      if (searchTerms.every(term => collection.name.toLowerCase().includes(term))) {
-        results.push({
-          type: SEARCH_TYPES.COLLECTION,
-          item: collection,
-          name: collection.name,
-          path: collection.name,
-          matchType: MATCH_TYPES.COLLECTION,
-          collectionUid: collection.uid
-        });
-      }
-
-      // Search collection items
-      const flattenedItems = flattenItems(collection.items);
-      flattenedItems.forEach(item => {
-        const itemPath = getItemPath(item, collection, findParentItemInCollection);
-        const itemPathLower = itemPath.toLowerCase();
-
-        if (isItemARequest(item)) {
-          // add an optional check for the item name to prevent a crash if it doesn’t exist.
-          const nameMatch = searchTerms.every(term => (item.name || '').toLowerCase().includes(term));
-          const urlMatch = searchTerms.every(term => (item.request?.url || '').toLowerCase().includes(term));
-          const pathMatch = enablePathMatch && searchTerms.every(term => itemPathLower.includes(term));
-
-          if (nameMatch || urlMatch || pathMatch) {
-            // Check if this is a gRPC request and get the method type
-            const isGrpcRequest = item.request?.type === 'grpc';
-            
-            let method = item.request?.method || '';
-            
-            if (isGrpcRequest) {
-              // For gRPC requests, use the methodType
-              const methodType = item.request?.methodType || 'UNARY';
-              method = methodType.toLowerCase().replace(/[_]/g, '-');
-            }
-            
-            results.push({
-              type: SEARCH_TYPES.REQUEST,
-              item,
-              name: item.name,
-              path: itemPath,
-              matchType: nameMatch ? MATCH_TYPES.REQUEST : urlMatch ? MATCH_TYPES.URL : MATCH_TYPES.PATH,
-              method,
-              collectionUid: collection.uid
-            });
-          }
-        } else if (isItemAFolder(item)) {
-          const nameMatch = searchTerms.every(term => item.name.toLowerCase().includes(term));
-          const pathMatch = enablePathMatch && searchTerms.every(term => itemPathLower.includes(term));
-
-          if (nameMatch || pathMatch) {
-            results.push({
-              type: SEARCH_TYPES.FOLDER,
-              item,
-              name: item.name,
-              path: itemPath,
-              matchType: nameMatch ? MATCH_TYPES.FOLDER : MATCH_TYPES.PATH,
-              collectionUid: collection.uid
-            });
-          }
-        }
-      });
-    });
-
-    return results;
-  };
-
-  const performSearch = (searchQuery) => {
-    const normalizedQuery = normalizeQuery(searchQuery);
-
-    if (!normalizedQuery) {
-      setResults(createCollectionResults());
-      return;
-    }
-
-    if (!isValidQuery(normalizedQuery)) {
-      setResults([]);
-      return;
-    }
-
-    const searchTerms = normalizedQuery.toLowerCase().split(/[\s\/]+/).filter(Boolean);
-    if (!searchTerms.length) {
-      setResults([]);
-      return;
-    }
-
-    const enablePathMatch = normalizedQuery.includes('/');
-    const searchResults = searchInCollections(searchTerms, enablePathMatch);
-    const sortedResults = sortResults(searchResults);
-
-    setResults(sortedResults);
-    setSelectedIndex(0);
-  };
-
-  const debouncedSearch = useCallback((searchQuery) => {
-    // Clear existing timeout
-    if (debounceTimeoutRef.current) {
-      clearTimeout(debounceTimeoutRef.current);
-    }
-
-    // Set new timeout
-    debounceTimeoutRef.current = setTimeout(() => {
-      performSearch(searchQuery);
-    }, SEARCH_CONFIG.DEBOUNCE_DELAY);
-  }, [collections]); // Depend on collections to recreate when they change
-
-  const expandItemPath = (result) => {
-    const collection = collections.find(c => c.uid === result.collectionUid);
-    if (!collection) return;
-
-    ensureCollectionIsMounted(collection);
-
-    if (collection.collapsed) {
-      dispatch(toggleCollection(collection.uid));
-    }
-
-    let currentItem = result.type === SEARCH_TYPES.FOLDER 
-      ? result.item 
-      : findParentItemInCollection(collection, result.item.uid);
-
-    while (currentItem?.type === 'folder') {
-      if (currentItem.collapsed) {
-        dispatch(toggleCollectionItem({ collectionUid: collection.uid, itemUid: currentItem.uid }));
-      }
-      currentItem = findParentItemInCollection(collection, currentItem.uid);
-    }
-  };
-
-  const ensureCollectionIsMounted = (collection) => {
-    if (!collection || collection.mountStatus === 'mounted') return;
-    dispatch(mountCollection({
-      collectionUid: collection.uid,
-      collectionPathname: collection.pathname,
-      brunoConfig: collection.brunoConfig
-    }));
-  };
-
-  const handleKeyNavigation = (e) => {
-    const handlers = {
-      ArrowDown: () => {
-        e.preventDefault();
-        setSelectedIndex(prev => prev < results.length - 1 ? prev + 1 : 0);
-      },
-      ArrowUp: () => {
-        e.preventDefault();
-        setSelectedIndex(prev => prev > 0 ? prev - 1 : results.length - 1);
-      },
-      Enter: () => {
-        e.preventDefault();
-        if (results[selectedIndex]) {
-          handleResultSelection(results[selectedIndex]);
-        }
-      },
-      Escape: () => {
-        e.preventDefault();
-        onClose();
-      },
-      PageDown: () => {
-        e.preventDefault();
-        setSelectedIndex(prev => Math.min(prev + 5, results.length - 1));
-      },
-      PageUp: () => {
-        e.preventDefault();
-        setSelectedIndex(prev => Math.max(prev - 5, 0));
-      },
-      Home: () => {
-        e.preventDefault();
-        setSelectedIndex(0);
-      },
-      End: () => {
-        e.preventDefault();
-        setSelectedIndex(results.length - 1);
-      }
-    };
-
-    const handler = handlers[e.key];
-    if (handler) handler();
-  };
-
-  const handleResultSelection = (result) => {
-    const targetCollection = collections.find(c => c.uid === result.collectionUid);
-    ensureCollectionIsMounted(targetCollection);
-
-    if (result.type === SEARCH_TYPES.DOCUMENTATION) {
-      window.open('https://docs.usebruno.com/', '_blank');
-      onClose();
-      return;
-    }
-
-    expandItemPath(result);
-
-    if (result.type === SEARCH_TYPES.REQUEST) {
-      dispatch(hideHomePage());
-
-      const existingTab = tabs.find(tab => tab.uid === result.item.uid);
-
-      if (existingTab) {
-        dispatch(focusTab({ uid: result.item.uid }));
-      } else {
-        dispatch(addTab({
-          uid: result.item.uid,
-          collectionUid: result.collectionUid,
-          requestPaneTab: getDefaultRequestPaneTab(result.item),
-          type: 'request',
-        }));
-      }
-    } else if (result.type === SEARCH_TYPES.FOLDER) {
-      dispatch(addTab({
-        uid: result.item.uid,
-        collectionUid: result.collectionUid,
-        type: 'folder-settings',
-      }));
-    } else if (result.type === SEARCH_TYPES.COLLECTION) {
-      dispatch(addTab({
-        uid: result.item.uid,
-        collectionUid: result.collectionUid,
-        type: 'collection-settings',
-      }));
-    }
-
-    onClose();
-  };
-
-  const handleQueryChange = (e) => {
-    const newQuery = e.target.value;
-    setQuery(newQuery);
-    
-    if (newQuery.trim()) {
-      debouncedSearch(newQuery);
-    } else {
-      // For empty queries, search immediately to show collections
-      performSearch(newQuery);
-    }
-  };
-
-  const clearSearch = () => {
-    // Clear any pending debounced search
-    if (debounceTimeoutRef.current) {
-      clearTimeout(debounceTimeoutRef.current);
-    }
-    
-    setQuery('');
-    setResults([]);
-  };
-
-  // Initialize modal when opened
-  useEffect(() => {
-    if (isOpen) {
-      const timeoutId = setTimeout(() => inputRef.current?.focus(), SEARCH_CONFIG.FOCUS_DELAY);
-      setQuery('');
-      performSearch('');
-      setSelectedIndex(0);
-      
-      return () => clearTimeout(timeoutId);
-    } else {
-      // Clear any pending debounced search when modal closes
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
-      }
-    }
-  }, [isOpen]);
-
-  // Auto-scroll selected item into view
-  useEffect(() => {
-    if (resultsRef.current && results.length > 0) {
-      const selectedElement = resultsRef.current.children[selectedIndex];
-      selectedElement?.scrollIntoView({
-        behavior: SEARCH_CONFIG.SCROLL_BEHAVIOR,
-        block: SEARCH_CONFIG.SCROLL_BLOCK
-      });
-    }
-  }, [selectedIndex, results]);
-
-  // Cleanup debounce timeout on unmount or modal close
-  useEffect(() => {
-    return () => {
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const getResultIcon = (type) => {
-    const iconMap = {
-      [SEARCH_TYPES.DOCUMENTATION]: IconBook,
-      [SEARCH_TYPES.COLLECTION]: IconBox,
-      [SEARCH_TYPES.FOLDER]: IconFolder,
-      [SEARCH_TYPES.REQUEST]: IconFileText
-    };
-    const IconComponent = iconMap[type] || IconFileText;
-    return <IconComponent size={18} stroke={1.5} />;
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <StyledWrapper>
-      <div 
-        className="command-k-overlay" 
-        onClick={onClose}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="search-modal-title"
-        aria-describedby="search-modal-description"
-      >
-        <div className="command-k-modal" onClick={(e) => e.stopPropagation()}>
-          <h1 id="search-modal-title" className="sr-only">Global Search</h1>
-          <p id="search-modal-description" className="sr-only">
-            Search through collections, requests, folders, and documentation. Use arrow keys to navigate results and Enter to select.
-          </p>
-          <div aria-live="polite" aria-atomic="true" className="sr-only">
-            {results.length > 0 && query 
-              ? `${results.length} result${results.length === 1 ? '' : 's'} found`
-              : query && results.length === 0 
-                ? 'No results found'
-                : ''
-            }
-          </div>
-          <div className="command-k-header">
-            <div className="search-input-container">
-              <IconSearch size={20} className="search-icon" aria-hidden="true" />
-              <input
-                ref={inputRef}
-                type="text"
-                placeholder="Search collections, requests, or documentation..."
-                value={query}
-                onChange={handleQueryChange}
-                onKeyDown={handleKeyNavigation}
-                className="search-input"
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck="false"
-                aria-label="Search collections, requests, or documentation"
-                aria-expanded={results.length > 0}
-                aria-controls="search-results"
-                aria-activedescendant={results.length > 0 ? `search-result-${selectedIndex}` : undefined}
-                role="combobox"
-                aria-autocomplete="list"
-              />
-              {query && (
-                <button 
-                  onClick={clearSearch} 
-                  className="clear-button"
-                  aria-label="Clear search query"
-                  type="button"
-                >
-                  <IconX size={16} aria-hidden="true" />
-                </button>
-              )}
-            </div>
-          </div>
-
-          <div 
-            className="command-k-results" 
-            ref={resultsRef}
-            id="search-results"
-            role="listbox"
-            aria-label="Search results"
-          >
-            {results.length === 0 && query ? (
-              <div className="no-results">
-                <p>
-                  No results found for "{query}".
-                  <br />
-                  <span className="block mt-2">
-                    The item might not exist yet, or its collection isn’t mounted. Press <strong>Enter</strong> here (or open it from the sidebar) to mount the collection automatically.
-                  </span>
-                </p>
-              </div>
-            ) : results.length === 0 ? (
-              <div className="empty-state">
-                <p>
-                  No collections are currently mounted or visible.
-                  <br />
-                  <span className="block mt-2">
-                    Mount a collection via the sidebar or this search modal, then try again.
-                  </span>
-                </p>
-              </div>
-            ) : (
-              results.map((result, index) => {
-                const isSelected = index === selectedIndex;
-                const typeLabel = getTypeLabel(result.type);
-
-                return (
-                  <div
-                    key={`${result.type}-${result.item.id || result.item.uid}-${index}`}
-                    id={`search-result-${index}`}
-                    className={`result-item ${isSelected ? 'selected' : ''}`}
-                    onClick={() => handleResultSelection(result)}
-                    data-selected={isSelected}
-                    data-type={result.type}
-                    role="option"
-                    aria-selected={isSelected}
-                    aria-label={`${result.name}, ${typeLabel || result.type}${result.method ? `, ${result.method}` : ''}`}
-                    tabIndex={-1}
-                  >
-                    <div className="result-icon">
-                      {getResultIcon(result.type)}
-                    </div>
-                    <div className="result-content">
-                      <div className="result-info">
-                        <div className="result-name">
-                          {highlightText(result.name, query)}
-                        </div>
-                        <div className="result-path">
-                          {result.type === SEARCH_TYPES.DOCUMENTATION
-                            ? result.description
-                            : result.type === SEARCH_TYPES.REQUEST
-                              ? highlightText(result.item.request?.url || '', query)
-                              : highlightText(result.path, query)}
-                        </div>
-                      </div>
-                      <div className="result-badges">
-                        {result.type === SEARCH_TYPES.REQUEST && result.method && (
-                          <span 
-                            className={`method-badge ${result.method.toLowerCase()}`}
-                            aria-label={`HTTP method ${result.method.toUpperCase().replace(/-/g, ' ')}`}
-                          >
-                            {result.method.toUpperCase().replace(/-/g, ' ')}
-                          </span>
-                        )}
-                        {typeLabel && (
-                          <div className="result-type" aria-label={`Item type ${typeLabel}`}>
-                            {typeLabel}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                );
-              })
-            )}
-          </div>
-
-          <div className="command-k-footer">
-            <div className="keyboard-hints" role="region" aria-label="Keyboard shortcuts">
-              <span aria-label="Use up and down arrows to navigate">
-                <span className="keycap" aria-hidden="true">↑</span>
-                <span className="keycap" aria-hidden="true">↓</span>
-                <span className="hint-label">to navigate</span>
-              </span>
-              <span aria-label="Press Enter to select">
-                <span className="keycap" aria-hidden="true">↵</span>
-                <span className="hint-label">to select</span>
-              </span>
-              <span aria-label="Press Escape to close">
-                <span className="keycap" aria-hidden="true">esc</span>
-                <span className="hint-label">to close</span>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default GlobalSearchModal;

packages/bruno-app/src/components/GlobalSearchModal/utils/searchUtils.js

@@ -1,94 +0,0 @@
-import React from 'react';
-import { SEARCH_TYPES, MATCH_TYPES, SEARCH_CONFIG } from '../constants';
-
-export const normalizeQuery = (searchQuery) => {
-  return searchQuery.trim().replace(/\/+/g, '/');
-};
-
-export const isValidQuery = (normalizedQuery) => {
-  return normalizedQuery && 
-         normalizedQuery !== '/' && 
-         !(normalizedQuery.length === 1 && !normalizedQuery.match(/[a-zA-Z0-9]/));
-};
-
-export const highlightText = (text, searchQuery) => {
-  if (!searchQuery) return text;
-
-  try {
-    const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const regex = new RegExp(`(${escapedQuery})`, 'gi');
-    return text.split(regex).map((part, i) =>
-      regex.test(part) ? (
-        <span key={i} className="highlight">{part}</span>
-      ) : part
-    );
-  } catch {
-    return text;
-  }
-};
-
-export const sortResults = (results) => {
-  return results.sort((a, b) => {
-    // Documentation always first
-    if (a.type === SEARCH_TYPES.DOCUMENTATION) return -1;
-    if (b.type === SEARCH_TYPES.DOCUMENTATION) return 1;
-
-    // Sort by match type priority
-    const matchTypeOrder = { 
-      [MATCH_TYPES.COLLECTION]: 0, 
-      [MATCH_TYPES.FOLDER]: 1, 
-      [MATCH_TYPES.REQUEST]: 2, 
-      [MATCH_TYPES.URL]: 3, 
-      [MATCH_TYPES.PATH]: 4 
-    };
-    const aMatchType = matchTypeOrder[a.matchType] ?? 5;
-    const bMatchType = matchTypeOrder[b.matchType] ?? 5;
-
-    if (aMatchType !== bMatchType) return aMatchType - bMatchType;
-
-    // Sort by type priority
-    const typeOrder = { 
-      [SEARCH_TYPES.COLLECTION]: 0, 
-      [SEARCH_TYPES.FOLDER]: 1, 
-      [SEARCH_TYPES.REQUEST]: 2 
-    };
-    const aType = typeOrder[a.type] ?? 3;
-    const bType = typeOrder[b.type] ?? 3;
-
-    if (aType !== bType) return aType - bType;
-
-    // Finally sort alphabetically
-    return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
-  });
-};
-
-export const getTypeLabel = (type) => {
-  const baseLabels = {
-    [SEARCH_TYPES.DOCUMENTATION]: 'Documentation',
-    [SEARCH_TYPES.COLLECTION]: 'Collection',
-    [SEARCH_TYPES.FOLDER]: 'Folder'
-  };
-
-  return baseLabels[type] || '';
-};
-
-export const getItemPath = (item, collection, findParentItemInCollection) => {
-  const pathParts = [];
-  let currentItem = item;
-  let depth = 0;
-  const maxDepth = SEARCH_CONFIG.MAX_DEPTH;
-
-  while (currentItem && depth < maxDepth) {
-    pathParts.unshift(currentItem.name);
-    const parent = findParentItemInCollection(collection, currentItem.uid);
-    if (parent) {
-      currentItem = parent;
-      depth++;
-    } else {
-      break;
-    }
-  }
-
-  pathParts.unshift(collection.name);
-  return pathParts.join('/');
-};

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

@@ -1,93 +0,0 @@
-import React from 'react';
-
-// UNARY - Single request, single response (Blue)
-export const IconGrpcUnary = ({ size = 18, strokeWidth = 1.5, className = '' }) => (
-  <svg 
-    xmlns="http://www.w3.org/2000/svg" 
-    width={size} 
-    height={size} 
-    viewBox="0 0 24 24" 
-    fill="none" 
-    strokeLinecap="round" 
-    strokeLinejoin="round"
-    className={className}
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    {/* Request arrow (top) - right */}
-    <path d="M3 8h18" stroke="#3B82F6" strokeWidth={strokeWidth} />
-    <path d="M18 5l3 3l-3 3" stroke="#3B82F6" strokeWidth={strokeWidth} />
-    {/* Response arrow (bottom) - left */}
-    <path d="M21 16h-18" stroke="#3B82F6" strokeWidth={strokeWidth} />
-    <path d="M6 13l-3 3l3 3" stroke="#3B82F6" strokeWidth={strokeWidth} />
-  </svg>
-);
-
-// CLIENT_STREAMING - Streaming request, single response (Purple)
-export const IconGrpcClientStreaming = ({ size = 18, strokeWidth = 1.5, className = '' }) => (
-  <svg 
-    xmlns="http://www.w3.org/2000/svg" 
-    width={size} 
-    height={size} 
-    viewBox="0 0 24 24" 
-    fill="none" 
-    strokeLinecap="round" 
-    strokeLinejoin="round"
-    className={className}
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    {/* Request arrow (top) - right with double heads */}
-    <path d="M3 8h18" stroke="#8B5CF6" strokeWidth={strokeWidth} />
-    <path d="M18 5l3 3l-3 3" stroke="#8B5CF6" strokeWidth={strokeWidth} />
-    <path d="M14 5l3 3l-3 3" stroke="#8B5CF6" strokeWidth={strokeWidth} />
-    {/* Response arrow (bottom) - left */}
-    <path d="M21 16h-18" stroke="#8B5CF6" strokeWidth={strokeWidth} />
-    <path d="M6 13l-3 3l3 3" stroke="#8B5CF6" strokeWidth={strokeWidth} />
-  </svg>
-);
-
-// SERVER_STREAMING - Single request, streaming response (Green)
-export const IconGrpcServerStreaming = ({ size = 18, strokeWidth = 1.5, className = '' }) => (
-  <svg 
-    xmlns="http://www.w3.org/2000/svg" 
-    width={size} 
-    height={size} 
-    viewBox="0 0 24 24" 
-    fill="none" 
-    strokeLinecap="round" 
-    strokeLinejoin="round"
-    className={className}
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    {/* Request arrow (top) - right */}
-    <path d="M3 8h18" stroke="#10B981" strokeWidth={strokeWidth} />
-    <path d="M18 5l3 3l-3 3" stroke="#10B981" strokeWidth={strokeWidth} />
-    {/* Response arrow (bottom) - left with double heads */}
-    <path d="M21 16h-18" stroke="#10B981" strokeWidth={strokeWidth} />
-    <path d="M6 13l-3 3l3 3" stroke="#10B981" strokeWidth={strokeWidth} />
-    <path d="M10 13l-3 3l3 3" stroke="#10B981" strokeWidth={strokeWidth} />
-  </svg>
-);
-
-// BIDI_STREAMING - Streaming request, streaming response (Orange)
-export const IconGrpcBidiStreaming = ({ size = 18, strokeWidth = 1.5, className = '' }) => (
-  <svg 
-    xmlns="http://www.w3.org/2000/svg" 
-    width={size} 
-    height={size} 
-    viewBox="0 0 24 24" 
-    fill="none" 
-    strokeLinecap="round" 
-    strokeLinejoin="round"
-    className={className}
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    {/* Request arrow (top) - right with double heads */}
-    <path d="M3 8h18" stroke="#F97316" strokeWidth={strokeWidth} />
-    <path d="M18 5l3 3l-3 3" stroke="#F97316" strokeWidth={strokeWidth} />
-    <path d="M14 5l3 3l-3 3" stroke="#F97316" strokeWidth={strokeWidth} />
-    {/* Response arrow (bottom) - left with double heads */}
-    <path d="M21 16h-18" stroke="#F97316" strokeWidth={strokeWidth} />
-    <path d="M6 13l-3 3l3 3" stroke="#F97316" strokeWidth={strokeWidth} />
-    <path d="M10 13l-3 3l3 3" stroke="#F97316" strokeWidth={strokeWidth} />
-  </svg>
-); 

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

@@ -1,28 +0,0 @@
-import React from 'react';
-
-const IconSidebarToggle = ({ collapsed = false, size = 16, strokeWidth = 1.5, className = '', ...rest }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      strokeWidth={strokeWidth}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={`icon icon-tabler icons-tabler-outline icon-tabler-layout-sidebar ${className}`}
-      {...rest}
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
-      <path d="M9 4l0 16" />
-      {!collapsed && (
-        <rect x="4.6" y="4.6" width="4.8" height="14.8" rx="0.8" fill="currentColor" />
-      )}
-    </svg>
-  );
-};
-
-export default IconSidebarToggle;

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

@@ -9,7 +9,7 @@ const ModalHeader = ({ title, handleCancel, customHeader, hideClose }) => (
   <div className="bruno-modal-header">
     {customHeader ? customHeader : <>{title ? <div className="bruno-modal-header-title">{title}</div> : null}</>}
     {handleCancel && !hideClose ? (
-      <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null} data-test-id="modal-close-button">
+      <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null}>
         ×
       </div>
     ) : null}
@@ -71,8 +71,7 @@ const Modal = ({
   disableCloseOnOutsideClick,
   disableEscapeKey,
   onClick,
-  closeModalFadeTimeout = 500,
-  dataTestId
+  closeModalFadeTimeout = 500
 }) => {
   const modalRef = useRef(null);
   const [isClosing, setIsClosing] = useState(false);
@@ -121,7 +120,6 @@ const Modal = ({
         role="dialog"
         aria-labelledby="modal-title"
         aria-describedby="modal-description"
-        data-testid={dataTestId}
       >
         <ModalHeader
           title={title}

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

@@ -11,9 +11,7 @@ const StyledWrapper = styled.div`
     height: fit-content;
     font-size: 14px;
     line-height: 30px;
-    display: flex;
-    flex-direction: column;
-    max-height: 200px;
+    overflow: hidden;
 
     pre.CodeMirror-placeholder {
       color: ${(props) => props.theme.text};
@@ -21,10 +19,18 @@ const StyledWrapper = styled.div`
       opacity: 0.5;
     }
 
+  .CodeMirror-scroll {
+      overflow: visible !important;
+      position: relative;
+      display: block;
+      margin: 0px;
+      padding: 0px;
+    }
+
     .CodeMirror-vscrollbar,
     .CodeMirror-hscrollbar,
     .CodeMirror-scrollbar-filler {
-      display: none !important;
+      display: none;
     }
 
     .CodeMirror-lines {

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

@@ -3,9 +3,7 @@ import isEqual from 'lodash/isEqual';
 import { getAllVariables } from 'utils/collections';
 import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 import { setupAutoComplete } from 'utils/codemirror/autocomplete';
-import { MaskedEditor } from 'utils/common/masked-editor';
 import StyledWrapper from './StyledWrapper';
-import { IconEye, IconEyeOff } from '@tabler/icons';
 
 const CodeMirror = require('codemirror');
 
@@ -18,10 +16,6 @@ class MultiLineEditor extends Component {
     this.cachedValue = props.value || '';
     this.editorRef = React.createRef();
     this.variables = {};
-
-    this.state = {
-      maskInput: props.isSecret || false // Always mask the input by default (if it's a secret)
-    };
   }
   componentDidMount() {
     // Initialize CodeMirror as a single line editor
@@ -29,14 +23,22 @@ class MultiLineEditor extends Component {
     const variables = getAllVariables(this.props.collection, this.props.item);
 
     this.editor = CodeMirror(this.editorRef.current, {
+      lineWrapping: false,
+      lineNumbers: false,
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       placeholder: this.props.placeholder,
       mode: 'brunovariables',
       brunoVarInfo: {
         variables
       },
+      scrollbarStyle: null,
       tabindex: 0,
       extraKeys: {
+        Enter: () => {
+          if (this.props.onRun) {
+            this.props.onRun();
+          }
+        },
         'Ctrl-Enter': () => {
           if (this.props.onRun) {
             this.props.onRun();
@@ -47,6 +49,14 @@ class MultiLineEditor extends Component {
             this.props.onRun();
           }
         },
+        'Alt-Enter': () => {
+          this.editor.setValue(this.editor.getValue() + '\n');
+          this.editor.setCursor({ line: this.editor.lineCount(), ch: 0 });
+        },
+        'Shift-Enter': () => {
+          this.editor.setValue(this.editor.getValue() + '\n');
+          this.editor.setCursor({ line: this.editor.lineCount(), ch: 0 });
+        },
         'Cmd-S': () => {
           if (this.props.onSave) {
             this.props.onSave();
@@ -84,10 +94,6 @@ class MultiLineEditor extends Component {
     this.editor.setValue(String(this.props.value) || '');
     this.editor.on('change', this._onEdit);
     this.addOverlay(variables);
-
-    // Initialize masking if this is a secret field
-    this.setState({ maskInput: this.props.isSecret });
-    this._enableMaskedEditor(this.props.isSecret);
   }
 
   _onEdit = () => {
@@ -99,19 +105,6 @@ class MultiLineEditor extends Component {
     }
   };
 
-  /** Enable or disable masking the rendered content of the editor */
-  _enableMaskedEditor = (enabled) => {
-    if (typeof enabled !== 'boolean') return;
-
-    if (enabled == true) {
-      if (!this.maskedEditor) this.maskedEditor = new MaskedEditor(this.editor, '*');
-      this.maskedEditor.enable();
-    } else {
-      this.maskedEditor?.disable();
-      this.maskedEditor = null;
-    }
-  };
-
   componentDidUpdate(prevProps) {
     // Ensure the changes caused by this update are not interpreted as
     // user-input changes which could otherwise result in an infinite
@@ -130,11 +123,8 @@ class MultiLineEditor extends Component {
       this.cachedValue = String(this.props.value);
       this.editor.setValue(String(this.props.value) || '');
     }
-    if (!isEqual(this.props.isSecret, prevProps.isSecret)) {
-      // If the secret flag has changed, update the editor to reflect the change
-      this._enableMaskedEditor(this.props.isSecret);
-      // also set the maskInput flag to the new value
-      this.setState({ maskInput: this.props.isSecret });
+    if (this.editorRef?.current) {
+      this.editorRef.current.scrollTo(0, 10000);
     }
     this.ignoreChangeEvent = false;
   }
@@ -143,10 +133,6 @@ class MultiLineEditor extends Component {
     if (this.brunoAutoCompleteCleanup) {
       this.brunoAutoCompleteCleanup();
     }
-    if (this.maskedEditor) {
-      this.maskedEditor.destroy();
-      this.maskedEditor = null;
-    }
     this.editor.getWrapperElement().remove();
   }
 
@@ -156,38 +142,8 @@ class MultiLineEditor extends Component {
     this.editor.setOption('mode', 'brunovariables');
   };
 
-  /**
-   * @brief Toggle the visibility of the secret value
-   */
-  toggleVisibleSecret = () => {
-    const isVisible = !this.state.maskInput;
-    this.setState({ maskInput: isVisible });
-    this._enableMaskedEditor(isVisible);
-  };
-
-  /**
-   * @brief Eye icon to show/hide the secret value
-   * @returns ReactComponent The eye icon
-   */
-  secretEye = (isSecret) => {
-    return isSecret === true ? (
-      <button className="mx-2" onClick={() => this.toggleVisibleSecret()}>
-        {this.state.maskInput === true ? (
-          <IconEyeOff size={18} strokeWidth={2} />
-        ) : (
-          <IconEye size={18} strokeWidth={2} />
-        )}
-      </button>
-    ) : null;
-  };
-
   render() {
-    return (
-      <div className={`flex flex-row justify-between w-full overflow-x-auto ${this.props.className}`}>
-        <StyledWrapper ref={this.editorRef} className="multi-line-editor grow" />
-        {this.secretEye(this.props.isSecret)}
-      </div>
-    );
+    return <StyledWrapper ref={this.editorRef} className="single-line-editor"></StyledWrapper>;
   }
 }
 export default MultiLineEditor;

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

@@ -79,7 +79,7 @@ const Notifications = () => {
 
   const modalCustomHeader = (
     <div className="flex flex-row gap-8">
-      <div className="bruno-modal-header-title">NOTIFICATIONS</div>
+      <div>NOTIFICATIONS</div>
       {unreadNotifications.length > 0 && (
         <>
           <div className="normal-case font-normal">

packages/bruno-app/src/components/Preferences/Beta/StyledWrapper.js

@@ -1,35 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .bruno-form {
-    padding: 1rem;
-  }
-
-  .submit {
-    margin-top: 1rem;
-  }
-
-  .beta-feature-item {
-    border-radius: 0.5rem;
-    border: 1px solid var(--color-gray-200);
-    background-color: var(--color-gray-50);
-    margin-bottom: 1rem;
-  }
-
-  .beta-feature-item:hover {
-    background-color: var(--color-gray-100);
-  }
-
-  .beta-feature-description {
-    margin-top: 0.25rem;
-  }
-
-  .no-features-message {
-    text-align: center;
-    padding: 2rem;
-    color: var(--color-gray-500);
-    font-style: italic;
-  }
-`;
-
-export default StyledWrapper;

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

@@ -1,140 +0,0 @@
-import React from 'react';
-import { useFormik } from 'formik';
-import { useSelector, useDispatch } from 'react-redux';
-import { savePreferences } from 'providers/ReduxStore/slices/app';
-import StyledWrapper from './StyledWrapper';
-import * as Yup from 'yup';
-import toast from 'react-hot-toast';
-import { IconFlask } from '@tabler/icons';
-import get from 'lodash/get';
-
-// Beta features configuration
-const BETA_FEATURES = [
-  {
-    id: 'grpc',
-    label: 'gRPC Support',
-    description: 'Enable gRPC request support for making gRPC calls to services'
-  },
-  {
-    id: 'nodevm',
-    label: 'Node VM Runtime',
-    description: 'Enable Node VM runtime for JavaScript execution in Developer Mode'
-  }
-];
-
-const Beta = ({ close }) => {
-  const preferences = useSelector((state) => state.app.preferences);
-  const dispatch = useDispatch();
-
-  // Generate validation schema dynamically from beta features
-  const generateValidationSchema = () => {
-    const schemaShape = {};
-    BETA_FEATURES.forEach((feature) => {
-      schemaShape[feature.id] = Yup.boolean();
-    });
-    return Yup.object().shape(schemaShape);
-  };
-
-  // Generate initial values dynamically from beta features
-  const generateInitialValues = () => {
-    const initialValues = {};
-    BETA_FEATURES.forEach((feature) => {
-      initialValues[feature.id] = get(preferences, `beta.${feature.id}`, false);
-    });
-    return initialValues;
-  };
-
-  const betaSchema = generateValidationSchema();
-
-  const formik = useFormik({
-    initialValues: generateInitialValues(),
-    validationSchema: betaSchema,
-    onSubmit: async (values) => {
-      try {
-        const newPreferences = await betaSchema.validate(values, { abortEarly: true });
-        handleSave(newPreferences);
-      } catch (error) {
-        console.error('Beta preferences validation error:', error.message);
-      }
-    }
-  });
-
-  const handleSave = (newBetaPreferences) => {
-    dispatch(
-      savePreferences({
-        ...preferences,
-        beta: newBetaPreferences
-      })
-    )
-      .then(() => {
-        toast.success('Beta preferences saved successfully');
-        close();
-      })
-      .catch((err) => console.log(err) && toast.error('Failed to update beta preferences'));
-  };
-
-  const hasAnyBetaFeatures = BETA_FEATURES.length > 0;
-
-  return (
-    <StyledWrapper>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div className="mb-6">
-          <div className="flex items-center mb-2">
-            <IconFlask size={20} className="mr-2 text-orange-500" />
-            <h2 className="text-lg font-semibold">Beta Features</h2>
-          </div>
-          <p className="text-sm text-gray-500 dark:text-gray-400 mb-4 text-wrap">
-            Beta features are experimental previews that may change before full release. Try them and share feedback.
-          </p>
-        </div>
-
-        <div className="space-y-4">
-          {BETA_FEATURES.map((feature) => (
-            <div key={feature.id} className="beta-feature-item">
-              <div className="flex items-center">
-                <input
-                  id={feature.id}
-                  type="checkbox"
-                  name={feature.id}
-                  checked={formik.values[feature.id]}
-                  onChange={formik.handleChange}
-                  className="mousetrap mr-0"
-                />
-                <label className="block ml-2 select-none font-medium" htmlFor={feature.id}>
-                  {feature.label}
-                </label>
-                {feature.id === 'grpc' && (
-                  <a 
-                    href="https://github.com/usebruno/bruno/discussions/5447" 
-                    target="_blank" 
-                    rel="noopener noreferrer" 
-                    className="ml-2 text-xs text-blue-500 hover:text-blue-600 underline"
-                  >
-                    Share feedback
-                  </a>
-                )}
-              </div>
-              <div className="beta-feature-description ml-6 text-xs text-gray-500 dark:text-gray-400">
-                {feature.description}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {!hasAnyBetaFeatures && (
-          <div className="no-features-message">
-            <p>No beta features are currently available</p>
-          </div>
-        )}
-
-        <div className="mt-10">
-          <button type="submit" className="submit btn btn-sm btn-secondary">
-            Save
-          </button>
-        </div>
-      </form>
-    </StyledWrapper>
-  );
-};
-
-export default Beta;

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

@@ -176,11 +176,11 @@ const General = ({ close }) => {
             name="keepDefaultCaCertificates.enabled"
             checked={formik.values.keepDefaultCaCertificates.enabled}
             onChange={formik.handleChange}
-            className={`mousetrap mr-0 ${formik.values.customCaCertificate.enabled && formik.values.customCaCertificate.filePath ? '' : 'opacity-25'}`}
-            disabled={formik.values.customCaCertificate.enabled && formik.values.customCaCertificate.filePath ? false : true}
+            className={`mousetrap mr-0 ${formik.values.customCaCertificate.enabled ? '' : 'opacity-25'}`}
+            disabled={formik.values.customCaCertificate.enabled ? false : true}
           />
           <label
-            className={`block ml-2 select-none ${formik.values.customCaCertificate.enabled && formik.values.customCaCertificate.filePath ? '' : 'opacity-25'}`}
+            className={`block ml-2 select-none ${formik.values.customCaCertificate.enabled ? '' : 'opacity-25'}`}
             htmlFor="keepDefaultCaCertificatesEnabled"
           >
             Keep Default CA Certificates

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

@@ -7,7 +7,6 @@ import General from './General';
 import Proxy from './ProxySettings';
 import Display from './Display';
 import Keybindings from './Keybindings';
-import Beta from './Beta';
 
 import StyledWrapper from './StyledWrapper';
 
@@ -38,10 +37,6 @@ const Preferences = ({ onClose }) => {
         return <Keybindings close={onClose} />;
       }
 
-      case 'beta': {
-        return <Beta close={onClose} />;
-      }
-
       case 'support': {
         return <Support />;
       }
@@ -51,7 +46,7 @@ const Preferences = ({ onClose }) => {
   return (
     <StyledWrapper>
       <Modal size="lg" title="Preferences" handleCancel={onClose} hideFooter={true}>
-        <div className="flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem] py-2">
+        <div className='flex flex-row gap-2 mx-[-1rem] !my-[-1.5rem] py-2'>
           <div className="flex flex-col items-center tabs" role="tablist">
             <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
               General
@@ -68,9 +63,6 @@ const Preferences = ({ onClose }) => {
             <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
               Support
             </div>
-            <div className={getTabClassname('beta')} role="tab" onClick={() => setTab('beta')}>
-              Beta
-            </div>
           </div>
           <section className="flex flex-grow px-2 pt-2 pb-6 tab-panel">{getTabPanel(tab)}</section>
         </div>

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

@@ -1,66 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .tabs {
-    .tab {
-      cursor: pointer;
-      padding: 4px 8px !important;
-      font-size: 12px;
-      border-radius: 4px;
-      
-      &:hover {
-        background-color: ${(props) => props.theme.mode === 'dark' ? 'rgba(99, 102, 241, 0.1)' : 'rgba(99, 102, 241, 0.1)'};
-      }
-      
-      &.active {
-        background-color: ${(props) => props.theme.mode === 'dark' ? 'rgba(99, 102, 241, 0.2)' : 'rgba(99, 102, 241, 0.1)'};
-        color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
-        font-weight: 500;
-      }
-    }
-  }
-
-  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;
-    }
-  }
-  
-  .additional-parameter-sends-in-selector {
-    select {
-      height: 32px;
-      width: 100%;
-      border: 1px solid ${(props) => props.theme.input.border};
-      border-radius: 4px;
-      padding: 0 8px;
-      
-      &:focus {
-        outline: none;
-        border-color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
-      }
-    }
-  }
-  
-  .add-additional-param-actions {
-    &:hover {
-      color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
-    }
-  }
-`
-
-export default StyledWrapper;

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

@@ -1,306 +0,0 @@
-import { useDispatch } from "react-redux";
-import React, { useState } from 'react';
-import get from 'lodash/get';
-import { useTheme } from 'providers/Theme';
-import { IconPlus, IconTrash, IconAdjustmentsHorizontal } from '@tabler/icons';
-import { cloneDeep } from "lodash";
-import SingleLineEditor from "components/SingleLineEditor/index";
-import StyledWrapper from "./StyledWrapper";
-import Table from "components/Table/index";
-
-const AdditionalParams  = ({ item = {}, request, updateAuth, collection, handleSave }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-
-  const oAuth = get(request, 'auth.oauth2', {});
-  const {
-    grantType,
-    additionalParameters = {}
-  } = oAuth;
-
-  const [activeTab, setActiveTab] = useState(
-    (grantType == 'authorization_code' || grantType == 'implicit') ? 'authorization' : 'token'
-  );
-
-  const isEmptyParam = (param) => {
-    return !param.name.trim() && !param.value.trim();
-  };
-
-  const hasEmptyRow = () => {
-    const tabParams = additionalParameters[activeTab] || [];
-    return tabParams.some(isEmptyParam);
-  };
-
-  const updateAdditionalParameters = ({ updatedAdditionalParameters }) => {
-    const filteredParams = cloneDeep(updatedAdditionalParameters);
-    
-    Object.keys(filteredParams).forEach(paramType => {
-      if (filteredParams[paramType]?.length) {
-        filteredParams[paramType] = filteredParams[paramType].filter(param => 
-          param.name.trim() || param.value.trim()
-        );
-        
-        if (filteredParams[paramType].length === 0) {
-          delete filteredParams[paramType];
-        }
-      } else if (Array.isArray(filteredParams[paramType]) && filteredParams[paramType].length === 0) {
-        // Remove empty arrays
-        delete filteredParams[paramType];
-      }
-    });
-
-    dispatch(
-      updateAuth({
-        mode: 'oauth2',
-        collectionUid: collection.uid,
-        itemUid: item.uid,
-        content: {
-          ...oAuth,
-          additionalParameters: Object.keys(filteredParams).length > 0 ? filteredParams : undefined
-        }
-      })
-    );
-  }
-
-  const handleUpdateAdditionalParam = ({ paramType, key, paramIndex, value }) => {
-    const updatedAdditionalParameters = cloneDeep(additionalParameters);
-    
-    if (!updatedAdditionalParameters[paramType]) {
-      updatedAdditionalParameters[paramType] = [];
-    }
-    
-    if (!updatedAdditionalParameters[paramType][paramIndex]) {
-      updatedAdditionalParameters[paramType][paramIndex] = {
-        name: '',
-        value: '',
-        sendIn: 'headers',
-        enabled: true
-      };
-    }
-    
-    updatedAdditionalParameters[paramType][paramIndex][key] = value;
-    
-    // Only filter when updating a parameter
-    updateAdditionalParameters({ updatedAdditionalParameters });
-  }
-
-  const handleDeleteAdditionalParam = ({ paramType, paramIndex }) => {
-    const updatedAdditionalParameters = cloneDeep(additionalParameters);
-    
-    if (updatedAdditionalParameters[paramType]?.length) {
-      updatedAdditionalParameters[paramType] = updatedAdditionalParameters[paramType].filter((_, index) => index !== paramIndex);
-      
-      // If the array is now empty, ensure we're not sending empty arrays
-      if (updatedAdditionalParameters[paramType].length === 0) {
-        delete updatedAdditionalParameters[paramType];
-      }
-    }
-    
-    updateAdditionalParameters({ updatedAdditionalParameters });
-  }
-
-  const handleAddNewAdditionalParam = () => {
-    // Prevent adding multiple empty rows
-    if (hasEmptyRow()) {
-      return;
-    }
-
-    const paramType = activeTab;
-    const localAdditionalParameters = cloneDeep(additionalParameters);
-    
-    if (!localAdditionalParameters[paramType]) {
-      localAdditionalParameters[paramType] = [];
-    }
-    
-    localAdditionalParameters[paramType] = [
-      ...localAdditionalParameters[paramType],
-      {
-        name: '',
-        value: '',
-        sendIn: 'headers',
-        enabled: true
-      }
-    ];
-    
-    // Don't filter here to allow the empty row to display in UI
-    // But don't permanently store it in state until it has values
-    dispatch(
-      updateAuth({
-        mode: 'oauth2',
-        collectionUid: collection.uid,
-        itemUid: item.uid,
-        content: {
-          ...oAuth,
-          additionalParameters: localAdditionalParameters,
-        }
-      })
-    );
-  }
-
-  // Add a class to the Add Parameter button if it's disabled
-  const addButtonDisabled = hasEmptyRow();
-
-  // Define available tabs for each grant type
-  const getAvailableTabs = (grantType) => {
-    const tabConfig = {
-      'authorization_code': ['authorization', 'token', 'refresh'],
-      'implicit': ['authorization'],
-      'password': ['token', 'refresh'],
-      'client_credentials': ['token', 'refresh']
-    };
-    return tabConfig[grantType] || ['token', 'refresh'];
-  };
-
-  const availableTabs = getAvailableTabs(grantType);
-
-  const renderTab = (tabKey, tabLabel) => (
-    <div 
-      key={tabKey}
-      className={`tab ${activeTab === tabKey ? 'active' : ''}`} 
-      onClick={() => setActiveTab(tabKey)}
-    >
-      {tabLabel}
-    </div>
-  );
-
-  return (
-    <StyledWrapper className="mt-4">
-      <div className="flex items-center gap-2.5 mb-3">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
-        </div>
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
-          Additional Parameters
-        </span>
-      </div>
-      
-      <div className="tabs flex w-full gap-2 my-2">
-        {availableTabs.includes('authorization') && renderTab('authorization', 'Authorization')}
-        {availableTabs.includes('token') && renderTab('token', 'Token')}
-        {availableTabs.includes('refresh') && renderTab('refresh', 'Refresh')}
-      </div>
-      <Table
-        headers={[
-          { name: 'Key', accessor: 'name', width: '30%' },
-          { name: 'Value', accessor: 'value', width: '30%' },
-          { name: 'Send In', accessor: 'sendIn', width: '150px' },
-          { name: '', accessor: '', width: '15%' }
-        ]}
-      >
-        <tbody>
-          {(additionalParameters?.[activeTab] || []).map((param, index) => 
-            <tr key={index}>
-              <td className='flex relative'>
-                <SingleLineEditor
-                  value={param?.name || ''}
-                  theme={storedTheme}
-                  onChange={(value) => handleUpdateAdditionalParam({ 
-                    paramType: activeTab,
-                    key: 'name',
-                    paramIndex: index,
-                    value
-                  })}
-                  collection={collection}
-                  onSave={handleSave}
-                />
-              </td>
-              <td>
-                <SingleLineEditor
-                  value={param?.value || ''}
-                  theme={storedTheme}
-                  onChange={(value) => handleUpdateAdditionalParam({ 
-                    paramType: activeTab,
-                    key: 'value',
-                    paramIndex: index,
-                    value
-                  })}
-                  collection={collection}
-                  onSave={handleSave}
-                />
-              </td>
-              <td>
-                <div className="w-full additional-parameter-sends-in-selector">
-                  <select 
-                    value={param?.sendIn || 'headers'} 
-                    onChange={e => {
-                      handleUpdateAdditionalParam({ 
-                        paramType: activeTab,
-                        key: 'sendIn',
-                        paramIndex: index,
-                        value: e.target.value
-                      })
-                    }} 
-                    className="mousetrap bg-transparent"
-                  >
-                    {sendInOptionsMap[grantType || 'authorization_code'][activeTab].map((optionValue) => (
-                      <option key={optionValue} value={optionValue}>
-                        {optionValue}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              </td>
-              <td>
-                <div className="flex items-center">
-                  <input
-                    type="checkbox"
-                    checked={param?.enabled ?? true}
-                    tabIndex="-1"
-                    className="mr-3 mousetrap"
-                    onChange={(e) => {
-                      handleUpdateAdditionalParam({ 
-                        paramType: activeTab,
-                        key: 'enabled',
-                        paramIndex: index,
-                        value: e.target.checked
-                      })
-                    }}
-                  />
-                  <button 
-                    tabIndex="-1" 
-                    onClick={() => {
-                      handleDeleteAdditionalParam({
-                        paramType: activeTab,
-                        paramIndex: index
-                      })
-                    }}
-                  >
-                    <IconTrash strokeWidth={1.5} size={20} />
-                  </button>
-                </div>
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </Table>
-      <div 
-        className={`add-additional-param-actions w-fit flex items-center mt-2 ${addButtonDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`} 
-        onClick={addButtonDisabled ? null : handleAddNewAdditionalParam}
-      >
-        <IconPlus size={16} strokeWidth={1.5} style={{ marginLeft: '2px' }} />
-        <span className="ml-1 text-sm text-gray-500">Add Parameter</span>
-      </div>
-    </StyledWrapper>
-  )
-}
-
-export default AdditionalParams;
-
-const sendInOptionsMap = {
-  'authorization_code': {
-    'authorization': ['headers', 'queryparams'],
-    'token': ['headers', 'queryparams', 'body'],
-    'refresh': ['headers', 'queryparams', 'body']
-  },
-  'password': {
-    'token': ['headers', 'queryparams', 'body'],
-    'refresh': ['headers', 'queryparams', 'body']
-  },
-  'client_credentials': {
-    'token': ['headers', 'queryparams', 'body'],
-    'refresh': ['headers', 'queryparams', 'body']
-  },
-  'implicit': {
-    'authorization': ['headers', 'queryparams']
-  }
-}

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

@@ -10,7 +10,6 @@ import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
 import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
-import AdditionalParams from '../AdditionalParams/index';
 import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
 
 const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAuth, collection, folder }) => {
@@ -36,8 +35,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
     tokenQueryKey,
     refreshTokenUrl,
     autoRefreshToken,
-    autoFetchToken,
-    additionalParameters
+    autoFetchToken
   } = oAuth;
 
   const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
@@ -87,7 +85,6 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           refreshTokenUrl,
           autoRefreshToken,
           autoFetchToken,
-          additionalParameters,
           [key]: value,
         }
       })
@@ -115,7 +112,6 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           tokenHeaderPrefix,
           tokenQueryKey,
           autoFetchToken,
-          additionalParameters,
           pkce: !Boolean(oAuth?.['pkce'])
         }
       })
@@ -336,13 +332,6 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           </div>
         </div>
       </div>
-      <AdditionalParams
-        item={item}
-        request={request}
-        collection={collection}
-        updateAuth={updateAuth}
-        handleSave={handleSave}
-      />
       <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
     </StyledWrapper>
   );

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

@@ -10,7 +10,6 @@ import { inputsConfig } from './inputsConfig';
 import Dropdown from 'components/Dropdown';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
 import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
-import AdditionalParams from '../AdditionalParams/index';
 import SensitiveFieldWarning from 'components/SensitiveFieldWarning';
 
 const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAuth, collection }) => {
@@ -33,8 +32,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
     tokenQueryKey, 
     refreshTokenUrl,
     autoRefreshToken,
-    autoFetchToken,
-    additionalParameters
+    autoFetchToken
   } = oAuth;
 
   const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
@@ -81,7 +79,6 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
           refreshTokenUrl,
           autoRefreshToken,
           autoFetchToken,
-          additionalParameters,
           [key]: value
         }
       })
@@ -293,13 +290,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
           </div>
         </div>
       </div>
-      <AdditionalParams
-        item={item}
-        request={request}
-        collection={collection}
-        updateAuth={updateAuth}
-        handleSave={handleSave}
-      />
+
       <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
 
     </StyledWrapper>

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

@@ -1,15 +1,16 @@
-import React, { useRef, forwardRef, useMemo } from 'react';
+import React, { useRef, forwardRef, useState, useMemo } from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
-import { IconCaretDown, IconSettings, IconKey, IconHelp, IconAdjustmentsHorizontal } from '@tabler/icons';
+import { IconCaretDown, IconLoader2, IconSettings, IconKey, IconHelp, IconAdjustmentsHorizontal } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
 import SingleLineEditor from 'components/SingleLineEditor';
+import { clearOauth2Cache, fetchOauth2Credentials } from 'providers/ReduxStore/slices/collections/actions';
 import Wrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
+import toast from 'react-hot-toast';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
-import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
-import AdditionalParams from '../AdditionalParams/index';
+import { cloneDeep } from 'lodash';
 import { getAllVariables } from 'utils/collections/index';
 import { interpolate } from '@usebruno/common';
 
@@ -18,6 +19,7 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
   const { storedTheme } = useTheme();
   const dropdownTippyRef = useRef();
   const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+  const [fetchingToken, toggleFetchingToken] = useState(false);
 
   const oAuth = get(request, 'auth.oauth2', {});
   const {
@@ -47,6 +49,38 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
     );
   });
 
+  const handleFetchOauth2Credentials = async () => {
+    let requestCopy = cloneDeep(request);
+    requestCopy.oauth2 = requestCopy?.auth.oauth2;
+    requestCopy.headers = {};
+    toggleFetchingToken(true);
+    try {
+      const result = await dispatch(fetchOauth2Credentials({
+        itemUid: item.uid,
+        request: requestCopy,
+        collection,
+        folderUid: folder?.uid || null,
+        forceGetToken: true
+      }));
+
+      toggleFetchingToken(false);
+
+      // Check if the result contains error or if access_token is missing
+      if (result?.error || !result?.access_token) {
+        const errorMessage = result?.error || 'No access token received from authorization server';
+        toast.error(errorMessage);
+        return;
+      }
+
+      toast.success('Token fetched successfully!');
+    }
+    catch (error) {
+      console.error(error);
+      toggleFetchingToken(false);
+      toast.error(error?.message || 'An error occurred while fetching token!');
+    }
+  }
+
   const handleSave = () => { save(); };
 
   const handleChange = (key, value) => {
@@ -77,6 +111,16 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
     handleChange('autoFetchToken', e.target.checked);
   };
 
+  const handleClearCache = (e) => {
+    dispatch(clearOauth2Cache({ collectionUid: collection?.uid, url: interpolatedAuthUrl, credentialsId }))
+      .then(() => {
+        toast.success('Cleared cache successfully');
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      });
+  };
+
   return (
     <Wrapper className="mt-2 flex w-full gap-4 flex-col">
       <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={authorizationUrl} credentialsId={credentialsId} />
@@ -218,14 +262,18 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
         </div>
       </div>
 
-      <AdditionalParams
-        item={item}
-        request={request}
-        collection={collection}
-        updateAuth={updateAuth}
-        handleSave={handleSave}
-      />
-      <Oauth2ActionButtons item={item} request={request} collection={collection} url={interpolatedAuthUrl} credentialsId={credentialsId} />
+      <div className="flex flex-row gap-4 mt-4">
+        <button
+          onClick={handleFetchOauth2Credentials}
+          className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}
+          disabled={fetchingToken}
+        >
+          Get Access Token{fetchingToken ? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
+        </button>
+        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
+          Clear Cache
+        </button>
+      </div>
     </Wrapper>
   );
 };

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

@@ -99,22 +99,12 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
 
   return (
     <div className="flex flex-row gap-4 mt-4">
-      <button 
-        onClick={handleFetchOauth2Credentials} 
-        className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}
-        disabled={fetchingToken || refreshingToken}
-      >
+      <button onClick={handleFetchOauth2Credentials} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
         Get Access Token{fetchingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
       </button>
-      {creds?.refresh_token ? 
-        <button 
-          onClick={handleRefreshAccessToken}
-          className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}
-          disabled={fetchingToken || refreshingToken}
-        >
-          Refresh Token{refreshingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
-        </button> 
-      : null}
+      {creds?.refresh_token ? <button onClick={handleRefreshAccessToken} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
+        Refresh Token{refreshingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
+      </button> : null}
       <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
         Clear Cache
       </button>

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

@@ -10,7 +10,6 @@ import { inputsConfig } from './inputsConfig';
 import Dropdown from 'components/Dropdown';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
 import Oauth2ActionButtons from '../Oauth2ActionButtons/index';
-import AdditionalParams from '../AdditionalParams/index';
 import SensitiveFieldWarning from 'components/SensitiveFieldWarning/index';
 
 const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, updateAuth, collection }) => {
@@ -35,8 +34,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
     tokenQueryKey, 
     refreshTokenUrl,
     autoRefreshToken,
-    autoFetchToken,
-    additionalParameters
+    autoFetchToken
   } = oAuth;
 
   const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
@@ -84,7 +82,6 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
           refreshTokenUrl,
           autoRefreshToken,
           autoFetchToken,
-          additionalParameters,
           [key]: value
         }
       })
@@ -296,13 +293,6 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
           </div>
         </div>
       </div>
-      <AdditionalParams
-        item={item}
-        request={request}
-        collection={collection}
-        updateAuth={updateAuth}
-        handleSave={handleSave}
-      />
       <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
     </StyledWrapper>
   );

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

@@ -1,59 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  flex: 1;
-  /* height: 100%; */
-  position: relative;
-
-  .grpc-message-header {
-    .font-medium {
-      color: ${(props) => props.theme.text};
-    }
-    
-    button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.2s ease;
-      
-      &:hover {
-        transform: scale(1.1);
-      }
-      
-      &:active {
-        transform: scale(0.95);
-      }
-    }
-  }
-
-  #grpc-messages-container {
-    /* height: 100%; */
-    position: relative;
-  }
-  
-  .add-message-btn-container {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding-top: 8px;
-    background: ${(props) => props.theme.bg || '#fff'};
-    z-index: 15;
-    border-top: 1px solid ${(props) => props.theme.border || 'rgba(0, 0, 0, 0.1)'};
-    
-    .add-message-btn {
-      width: 100%;
-    }
-  }
-
-  .CodeMirror {
-    border-top: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-`;
-
-export default Wrapper;

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

@@ -1,354 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { get } from 'lodash';
-import { useDispatch, useSelector } from 'react-redux';
-import { useTheme } from 'providers/Theme';
-import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
-import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { sendGrpcMessage, generateGrpcSampleMessage } from 'utils/network/index';
-import useLocalStorage from 'hooks/useLocalStorage';
-
-import CodeEditor from 'components/CodeEditor/index';
-import StyledWrapper from './StyledWrapper';
-import { IconSend, IconRefresh, IconWand, IconPlus, IconTrash, IconChevronDown, IconChevronUp } from '@tabler/icons';
-import ToolHint from 'components/ToolHint/index';
-import { toastError } from 'utils/common/error';
-import { format, applyEdits } from 'jsonc-parser';
-import toast from 'react-hot-toast'
-import { getAbsoluteFilePath } from 'utils/common/path';
-
-const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCollapsed, onToggleCollapse, handleRun, canClientSendMultipleMessages }) => {
-    const dispatch = useDispatch();
-    const { displayedTheme, theme } = useTheme();
-    const preferences = useSelector((state) => state.app.preferences);
-    const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
-    const isConnectionActive = useSelector((state) => state.collections.activeConnections.includes(item.uid));
-    
-    // Access gRPC method metadata from local storage
-    const [reflectionCache] = useLocalStorage('bruno.grpc.reflectionCache', {});
-    const [protofileCache] = useLocalStorage('bruno.grpc.protofileCache', {});
-
-    const canClientStream = methodType === 'client-streaming' || methodType === 'bidi-streaming';
-
-    const { name, content } = message;
-
-    const onEdit = (value) => {
-      const currentMessages = [...(body.grpc || [])];
-      
-      currentMessages[index] = {
-          name: name ? name : `message ${index + 1}`,
-          content: value
-      };
-          
-      dispatch(
-          updateRequestBody({
-              content: currentMessages,
-              itemUid: item.uid,
-              collectionUid: collection.uid
-          })
-      );
-    };
-    
-    const onSend = async () => {
-      try {
-        await sendGrpcMessage(item, collection.uid, content);
-      } catch (error) {
-        console.error('Error sending message:', error);
-      }
-    }
-    const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-    
-    const onRegenerateMessage = async () => {
-      try {
-          const methodPath = item.draft?.request?.method || item.request?.method;
-          
-          if (!methodPath) {
-              toastError(new Error('Method path not found in request'));
-              return;
-          }
-          
-          // Get the URL and protoPath to determine which cache to use
-          const url = item.draft?.request?.url || item.request?.url;
-          const protoPath = item.draft?.request?.protoPath || item.request?.protoPath;
-          
-          // Find the method metadata from the appropriate cache
-          let methodMetadata = null;
-          if (protoPath) {
-              // Use protofile cache if protoPath is available
-              const absolutePath = getAbsoluteFilePath(protoPath, collection.pathname);
-              const cachedMethods = protofileCache[absolutePath];
-              if (cachedMethods) {
-                  methodMetadata = cachedMethods.find(method => method.path === methodPath);
-              }
-          } else if (url) {
-              // Use reflection cache if no protoPath (reflection mode)
-              const cachedMethods = reflectionCache[url];
-              if (cachedMethods) {
-                  methodMetadata = cachedMethods.find(method => method.path === methodPath);
-              }
-          }
-          
-          const result = await generateGrpcSampleMessage(
-              methodPath,
-              content, 
-              { 
-                  arraySize: 2,
-                  methodMetadata // Pass the method metadata to the function
-              } 
-          );
-          
-          if (result.success) {
-              const currentMessages = [...(body.grpc || [])];
-              
-              currentMessages[index] = {
-                  name: name ? name : `message ${index + 1}`,
-                  content: result.message
-              };
-              
-              dispatch(
-                  updateRequestBody({
-                      content: currentMessages,
-                      itemUid: item.uid,
-                      collectionUid: collection.uid
-                  })
-              );
-              
-              toast.success('Sample message generated successfully!');
-          } else {
-              toastError(new Error(result.error || 'Failed to generate sample message'));
-          }
-      } catch (error) {
-          console.error('Error generating sample message:', error);
-          toastError(error);
-      }
-    };
-
-    const onDeleteMessage = () => { 
-      const currentMessages = [...(body.grpc || [])];
-      
-      currentMessages.splice(index, 1);
-      
-      dispatch(
-          updateRequestBody({
-              content: currentMessages,
-              itemUid: item.uid,
-              collectionUid: collection.uid
-          })
-      );
-    };
-
-    const onPrettify = () => {
-      try {
-        const edits = format(content, undefined, { tabSize: 2, insertSpaces: true });
-        const prettyBodyJson = applyEdits(content, edits);
-
-        const currentMessages = [...(body.grpc || [])];
-        currentMessages[index] = {
-            name: name ? name : `message ${index + 1}`,
-            content: prettyBodyJson
-        };
-        dispatch(
-          updateRequestBody({
-            content: currentMessages,
-            itemUid: item.uid,
-            collectionUid: collection.uid
-          })
-        );
-      } catch (e) {
-        toastError(new Error('Unable to prettify. Invalid JSON format.'));
-      }
-    };
-
-    const getContainerHeight = (canClientSendMultipleMessages && body.grpc.length > 1) ? `${isCollapsed ? "" : "h-80"}` : "h-full"
-
-    return (
-      <div className={`flex flex-col mb-3 border border-neutral-200 dark:border-neutral-800 rounded-md overflow-hidden ${getContainerHeight} relative`}>
-        <div 
-          className="grpc-message-header flex items-center justify-between px-3 py-2 bg-neutral-100 dark:bg-neutral-700 cursor-pointer"
-          onClick={onToggleCollapse}
-        >
-          <div className="flex items-center gap-2">
-            {isCollapsed ? 
-              <IconChevronDown size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" /> : 
-              <IconChevronUp size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
-            }
-            <span className="font-medium text-sm">{`Message ${canClientStream ? index + 1 : ''}`}</span>
-          </div>
-          <div className="flex items-center gap-2" onClick={e => e.stopPropagation()}>
-            <ToolHint text="Format JSON with proper indentation and spacing" toolhintId={`prettify-msg-${index}`}>
-              <button 
-                onClick={onPrettify}
-                className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors"
-              >
-                <IconWand size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
-              </button>
-            </ToolHint>
-            
-            <ToolHint text="Generate a new sample message based on schema" toolhintId={`regenerate-msg-${index}`}>
-              <button 
-                onClick={onRegenerateMessage}
-                className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors"
-              >
-                <IconRefresh size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
-              </button>
-            </ToolHint>
-            
-            {canClientStream && (
-              <ToolHint text={isConnectionActive ? "Send gRPC message" : "Connection not active"} toolhintId={`send-msg-${index}`}>
-                <button 
-                  onClick={onSend}
-                  disabled={!isConnectionActive}
-                  className={`p-1 rounded ${isConnectionActive ? 'hover:bg-zinc-200 dark:hover:bg-zinc-600' : 'opacity-50 cursor-not-allowed'} transition-colors`}
-                >
-                  <IconSend 
-                    size={16} 
-                    strokeWidth={1.5} 
-                    className={`${isConnectionActive ? 'text-zinc-700 dark:text-zinc-300' : 'text-zinc-400 dark:text-zinc-500'}`} 
-                  />
-                </button>
-              </ToolHint>
-            )}
-            
-            {index > 0 && (
-              <ToolHint text="Delete this message" toolhintId={`delete-msg-${index}`}>
-                <button 
-                  onClick={onDeleteMessage}
-                  className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors"
-                >
-                  <IconTrash size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
-                </button>
-              </ToolHint>
-            )}
-          </div>
-        </div>
-        
-        {!isCollapsed && (
-          <div className={`flex ${body.grpc.length === 1 || !canClientSendMultipleMessages ? "h-full" : "h-80"} relative`}>
-            <CodeEditor
-              collection={collection} 
-              theme={displayedTheme}
-              font={get(preferences, 'font.codeFont', 'default')}
-              fontSize={get(preferences, 'font.codeFontSize')}
-              value={content}
-              onEdit={onEdit}
-              onRun={handleRun}
-              onSave={onSave}
-              mode='application/ld+json'
-              enableVariableHighlighting={true}
-            />
-          </div>
-        )}
-      </div>
-    )
-}
-
-const GrpcBody = ({ item, collection, handleRun }) => {
-  const preferences = useSelector((state) => state.app.preferences);
-  const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
-  const dispatch = useDispatch();
-  const [collapsedMessages, setCollapsedMessages] = useState([]);
-  const messagesContainerRef = useRef(null);
-  const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
-  
-  const methodType = item.draft ? get(item, 'draft.request.methodType') : get(item, 'request.methodType');
-  const canClientSendMultipleMessages = methodType === 'client-streaming' || methodType === 'bidi-streaming';
-  
-  // Auto-scroll to the latest message when messages are added
-  useEffect(() => {
-    if (messagesContainerRef.current && body?.grpc?.length > 0) {
-      const container = messagesContainerRef.current;
-      container.scrollTop = container.scrollHeight;
-    }
-  }, [body?.grpc?.length]);
-  
-  const toggleMessageCollapse = (index) => {
-    setCollapsedMessages(prev => {
-      if (prev.includes(index)) {
-        return prev.filter(i => i !== index);
-      } else {
-        return [...prev, index];
-      }
-    });
-  };
-  
-  const addNewMessage = () => {
-    const currentMessages = Array.isArray(body.grpc) 
-        ? [...body.grpc] 
-        : [];
-    
-    currentMessages.push({
-      name: `message ${currentMessages.length + 1}`,
-      content: '{}'
-    });
-    
-    dispatch(
-        updateRequestBody({
-            content: currentMessages,
-            itemUid: item.uid,
-            collectionUid: collection.uid
-        })
-    );
-  };
-
-
-  if (!body?.grpc || !Array.isArray(body.grpc)) {
-    return (
-      <StyledWrapper isVerticalLayout={isVerticalLayout}>
-        <div className="flex flex-col items-center justify-center py-8">
-          <p className="text-zinc-500 dark:text-zinc-400 mb-4">No gRPC messages available</p>
-          <ToolHint text="Add the first message to your gRPC request" toolhintId="add-first-msg">
-            <button 
-              onClick={addNewMessage}
-              className="flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors"
-            >
-              <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
-              <span className="font-medium text-sm text-neutral-700 dark:text-neutral-300">Add First Message</span>
-            </button>
-          </ToolHint>
-        </div>
-      </StyledWrapper>
-    );
-  }
-  
-  return (
-    <StyledWrapper isVerticalLayout={isVerticalLayout}>
-      <div 
-        ref={messagesContainerRef}
-        id="grpc-messages-container" 
-        className={`flex-1 ${body.grpc.length === 1 || !canClientSendMultipleMessages ? "h-full" : "overflow-y-auto"} ${canClientSendMultipleMessages && "pb-16"}`}
-      >
-        {body.grpc
-          .filter((_, index) => canClientSendMultipleMessages || index === 0)
-          .map((message, index) => (
-            <SingleGrpcMessage 
-              key={index}
-              message={message} 
-              item={item} 
-              collection={collection}
-              index={index}
-              methodType={methodType}
-              isCollapsed={collapsedMessages.includes(index)}
-              onToggleCollapse={() => toggleMessageCollapse(index)}
-              handleRun={handleRun}
-              canClientSendMultipleMessages={canClientSendMultipleMessages}
-            />
-        ))}
-      </div>
-      
-      {canClientSendMultipleMessages && (
-        <div className="add-message-btn-container">
-          <ToolHint text="Add a new gRPC message to the request" toolhintId="add-msg-fixed">
-            <button 
-              onClick={addNewMessage}
-              className="add-message-btn flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors shadow-md"
-            >
-              <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
-              <span className="font-medium text-sm text-neutral-700 dark:text-neutral-300">Add Message</span>
-            </button>
-          </ToolHint>
-        </div>
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default GrpcBody;

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

@@ -1,119 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  height: 2.3rem;
-
-  .method-selector-container {
-    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-
-  .input-container {
-    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-
-    input {
-      background-color: ${(props) => props.theme.requestTabPanel.url.bg};
-      outline: none;
-      box-shadow: none;
-
-      &:focus {
-        outline: none !important;
-        box-shadow: none !important;
-      }
-    }
-  }
-
-  .caret {
-    color: rgb(140, 140, 140);
-    fill: rgb(140 140 140);
-    position: relative;
-    top: 1px;
-  }
-
-  .infotip {
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-  }
-
-  .infotip:hover .infotip-text {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  .infotip-text {
-    visibility: hidden;
-    width: auto;
-    background-color: ${(props) => props.theme.requestTabs.active.bg};
-    color: ${(props) => props.theme.text};
-    text-align: center;
-    border-radius: 4px;
-    padding: 4px 8px;
-    position: absolute;
-    z-index: 1;
-    bottom: 34px;
-    left: 50%;
-    transform: translateX(-50%);
-    opacity: 0;
-    transition: opacity 0.3s;
-    white-space: nowrap;
-  }
-
-  .infotip-text::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -4px;
-    border-width: 4px;
-    border-style: solid;
-    border-color: ${(props) => props.theme.requestTabs.active.bg} transparent transparent transparent;
-  }
-
-  .shortcut {
-    font-size: 0.625rem;
-  }
-
-  @keyframes pulse {
-    0% {
-      opacity: 0.4;
-    }
-    50% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0.4;
-    }
-  }
-
-  .connection-status-strip {
-    animation: pulse 1.5s ease-in-out infinite;
-    background-color: ${(props) => props.theme.colors.text.green};
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-  }
-
-  /* Method dropdown styling */
-  .method-dropdown {
-    margin-right: 8px;
-    position: relative;
-    z-index: 10;
-  }
-
-  .dropdown-item {
-    padding: 8px 12px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${(props) => props.theme.dropdown.hoverBg};
-    }
-  }
-`;
-
-export default Wrapper;