release: v1.17.0

#1667 - None means None, but inherit means inherit

.github/workflows/release-snap.yml

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

.nvmrc

@@ -1 +1 @@
-v18.13.0
+v20.9.0

docs/readme/readme_ar.md

@@ -0,0 +1,139 @@
+<br />
+<img src="assets/images/logo-transparent.png" width="80"/>
+
+### برونو - بيئة تطوير مفتوحة المصدر لاستكشاف واختبار واجهات برمجة التطبيقات (APIs).
+
+[![GitHub version](https://badge.fury.io/gh/usebruno%2Fbruno.svg)](https://badge.fury.io/gh/usebruno%bruno)
+[![CI](https://github.com/usebruno/bruno/actions/workflows/unit-tests.yml/badge.svg?branch=main)](https://github.com/usebruno/bruno/workflows/unit-tests.yml)
+[![Commit Activity](https://img.shields.io/github/commit-activity/m/usebruno/bruno)](https://github.com/usebruno/bruno/pulse)
+[![X](https://img.shields.io/twitter/follow/use_bruno?style=social&logo=x)](https://twitter.com/use_bruno)
+[![Website](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
+[![Download](https://img.shields.io/badge/Download-Latest-brightgreen)](https://www.usebruno.com/downloads)
+
+**English** | [Українська](docs/readme/readme_ua.md) | [Русский](docs/readme/readme_ru.md) | [Türkçe](docs/readme/readme_tr.md) | [Deutsch](docs/readme/readme_de.md) | [Français](docs/readme/readme_fr.md) | [Português (BR)](docs/readme/readme_pt_br.md) | [한국어](docs/readme/readme_kr.md) | [বাংলা](docs/readme/readme_bn.md) | [Español](docs/readme/readme_es.md) | [Italiano](docs/readme/readme_it.md) | [Română](docs/readme/readme_ro.md) | [Polski](docs/readme/readme_pl.md) | [简体中文](docs/readme/readme_cn.md) | [正體中文](docs/readme/readme_zhtw.md) | [العربية](docs/readme/readme_ar.md)
+
+برونو هو عميل API جديد ومبتكر، يهدف إلى ثورة الحالة الحالية التي يمثلها برنامج Postman وأدوات مماثلة هناك.
+
+يقوم برونو بتخزين مجموعاتك مباشرة في مجلد على نظام الملفات الخاص بك. نحن نستخدم لغة ترميز النص العادية، Bru، لحفظ معلومات حول طلبات واجهة برمجة التطبيقات (API).
+
+يمكنك استخدام Git أو أي نظام تحكم في الإصدار الذي تفضله للتعاون على مجموعات API الخاصة بك.
+
+برونو هو خاص بالاستخدام دون اتصال بالإنترنت. ليس هناك خطط لإضافة مزامنة السحابة إلى برونو أبدًا. نحن نقدر خصوصية بياناتك ونعتقد أنه يجب أن تظل على جهازك. اقرأ رؤيتنا على المدى الطويل [هنا](https://github.com/usebruno/bruno/discussions/269)
+
+📢 شاهد حديثنا الأخير في مؤتمر India FOSS 3.0 [هنا](https://www.youtube.com/watch?v=7bSMFpbcPiY)
+
+![bruno](https://github.com/usebruno/bruno/blob/main/assets/images/landing-2.png) <br /><br />
+
+### الطبعة الذهبية ✨
+
+غالبية ميزاتنا مجانية ومفتوحة المصدر.
+نحن نسعى لتحقيق توازن متناغم بين [مبادئ الشفافية والاستدامة](https://github.com/usebruno/bruno/discussions/269)
+
+طلبات الشراء لـ [الطبعة الذهبية](https://www.usebruno.com/pricing) ستطلق قريبًا بسعر ~~$19~~ **$9** ! <br/>
+[اشترك هنا](https://usebruno.ck.page/4c65576bd4) لتصلك إشعارات عند الإطلاق.
+
+### التثبيت
+
+برونو متاح كتنزيل ثنائي [على موقعنا على الويب](https://www.usebruno.com/downloads) لأنظمة التشغيل Mac و Windows و Linux.
+
+يمكنك أيضًا تثبيت برونو عبر مديري الحزم مثل Homebrew و Chocolatey و Scoop و Snap و Flatpak و Apt.
+
+```sh
+# على نظام Mac عبر Homebrew
+brew install bruno
+
+# على نظام Windows عبر Chocolatey
+choco install bruno
+
+# على نظام Windows عبر Scoop
+scoop bucket add extras
+scoop install bruno
+
+# على نظام Linux عبر Snap
+snap install bruno
+
+# على نظام Linux عبر Flatpak
+flatpak install com.usebruno.Bruno
+
+# على نظام Linux عبر Apt
+sudo mkdir -p /etc/apt/keyrings
+sudo gpg --no-default-keyring --keyring /etc/apt/keyrings/bruno.gpg --keyserver keyserver.ubuntu.com --recv-keys 9FA6017ECABE0266
+
+echo "deb [signed-by=/etc/apt/keyrings/bruno.gpg] http://debian.usebruno.com/ bruno stable" | sudo tee /etc/apt/sources.list.d/bruno.list
+
+sudo apt update
+sudo apt
+```
+### التشغيل عبر منصات متعددة 🖥️
+
+![bruno](https://github.com/usebruno/bruno/blob/main/assets/images/run-anywhere.png) <br /><br />
+
+### التعاون عبر Git 👩‍💻🧑‍💻
+
+أو أي نظام تحكم في الإصدار الذي تفضله
+
+![bruno](https://github.com/usebruno/bruno/blob/main/assets/images/version-control.png) <br /><br />
+
+### الروابط المهمة 📌
+
+- [رؤيتنا على المدى الطويل](https://github.com/usebruno/bruno/discussions/269)
+- [خارطة الطريق](https://github.com/usebruno/bruno/discussions/384)
+- [التوثيق](https://docs.usebruno.com)
+- [Stack Overflow](https://stackoverflow.com/questions/tagged/bruno)
+- [الموقع الإلكتروني](https://www.usebruno.com)
+- [التسعير](https://www.usebruno.com/pricing)
+- [التنزيل](https://www.usebruno.com/downloads)
+- [Github Sponsors](https://github.com/sponsors/helloanoop).
+
+### عروض 🎥
+
+- [الشهادات](https://github.com/usebruno/bruno/discussions/343)
+- [مركز المعرفة](https://github.com/usebruno/bruno/discussions/386)
+- [Scriptmania](https://github.com/usebruno/bruno/discussions/385)
+
+### الدعم ❤️
+
+إذا كنت تحب برونو وترغب في دعم عملنا مفتوح المصدر، فكر في رعايتنا عبر [Github Sponsors](https://github.com/sponsors/helloanoop).
+
+### شارك الشهادات 📣
+
+إذا كان برونو قد ساعدك في العمل وفرقك، فلا تنسى مشاركة [شهاداتك في مناقشتنا على GitHub](https://github.com/usebruno/bruno/discussions/343)
+
+### نشر إلى مديري الحزم الجديدة
+
+يرجى الرجوع [هنا](publishing.md) لمزيد من المعلومات.
+
+### تواصل معنا 🌐
+
+[𝕏 (تويتر)](https://twitter.com/use_bruno) <br />
+[الموقع الإلكتروني](https://www.usebruno.com) <br />
+[ديسكورد](https://discord.com/invite/KgcZUncpjq) <br />
+[لينكدإن](https://www.linkedin.com/company/usebruno)
+
+### علامة تجارية
+
+**الاسم**
+
+`برونو` هو علامة تجارية تمتلكها [أنوب إم دي](https://www.helloanoop.com/)
+
+**الشعار**
+
+الشعار من [OpenMoji](https://openmoji.org/library/emoji-1F436/). الترخيص: CC [BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
+
+### المساهمة 👩‍💻🧑‍💻
+
+يسعدني أنك تتطلع لتحسين برونو. يرجى الاطلاع على [دليل المساهمة](contributing.md)
+
+حتى إذا لم تكن قادرًا على التساهم بشكل مباشر من خلال الشيفرة، فلا تتردد في الإبلاغ عن الأخطاء وطلب الميزات التي يجب تنفيذها لحل حالتك.
+
+### الكتّاب
+
+<div align="center">
+    <a href="https://github.com/usebruno/bruno/graphs/contributors">
+        <img src="https://contrib.rocks/image?repo=usebruno/bruno" />
+    </a>
+</div>
+
+### الرخصة 📄
+
+[MIT](license.md)

packages/bruno-app/package.json

@@ -17,7 +17,6 @@
     "@fortawesome/react-fontawesome": "^0.1.16",
     "@reduxjs/toolkit": "^1.8.0",
     "@tabler/icons": "^1.46.0",
-    "@tailwindcss/forms": "^0.5.7",
     "@tippyjs/react": "^4.2.6",
     "@usebruno/common": "0.1.0",
     "@usebruno/graphql-docs": "0.1.0",

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

@@ -232,7 +232,7 @@ export default class CodeEditor extends React.Component {
         let curWord = start != end && currentLine.slice(start, end);
         //Qualify if autocomplete will be shown
         if (
-          /^(?!Shift|Tab|Enter|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|\s)\w*/.test(event.key) &&
+          /^(?!Shift|Tab|Enter|Escape|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|\s)\w*/.test(event.key) &&
           curWord.length > 0 &&
           !/\/\/|\/\*|.*{{|`[^$]*{|`[^{]*$/.test(currentLine.slice(0, end)) &&
           /(?<!\d)[a-zA-Z\._]$/.test(curWord)

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

@@ -9,7 +9,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.colors.text.yellow};
   }
 
-  input {
+  .non-passphrase-input {
     width: 300px;
   }
 

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

@@ -3,6 +3,8 @@ import { IconCertificate, IconTrash, IconWorld } from '@tabler/icons';
 import { useFormik } from 'formik';
 import { uuid } from 'utils/common';
 import * as Yup from 'yup';
+import { IconEye, IconEyeOff } from '@tabler/icons';
+import { useState } from 'react';
 
 import StyledWrapper from './StyledWrapper';
 
@@ -29,6 +31,8 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
     formik.values[e.name] = e.files[0].path;
   };
 
+  const [passwordVisible, setPasswordVisible] = useState(false);
+
   return (
     <StyledWrapper className="w-full h-full">
       <div className="text-xs mb-4 text-muted">Add client certificates to be used for specific domains.</div>
@@ -63,7 +67,7 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
             type="text"
             name="domain"
             placeholder="*.example.org"
-            className="block textbox"
+            className="block textbox non-passphrase-input"
             onChange={formik.handleChange}
             value={formik.values.domain || ''}
           />
@@ -79,7 +83,7 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
             id="certFilePath"
             type="file"
             name="certFilePath"
-            className="block"
+            className="block non-passphrase-input"
             onChange={(e) => getFile(e.target)}
           />
           {formik.touched.certFilePath && formik.errors.certFilePath ? (
@@ -94,7 +98,7 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
             id="keyFilePath"
             type="file"
             name="keyFilePath"
-            className="block"
+            className="block non-passphrase-input"
             onChange={(e) => getFile(e.target)}
           />
           {formik.touched.keyFilePath && formik.errors.keyFilePath ? (
@@ -105,14 +109,23 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
           <label className="settings-label" htmlFor="passphrase">
             Passphrase
           </label>
-          <input
-            id="passphrase"
-            type="password"
-            name="passphrase"
-            className="block textbox"
-            onChange={formik.handleChange}
-            value={formik.values.passphrase || ''}
-          />
+          <div className="textbox flex flex-row items-center w-[300px] h-[1.70rem] relative">
+            <input
+              id="passphrase"
+              type={passwordVisible ? 'text' : 'password'}
+              name="passphrase"
+              className="outline-none w-64 bg-transparent"
+              onChange={formik.handleChange}
+              value={formik.values.passphrase || ''}
+            />
+            <button
+              type="button"
+              className="btn btn-sm absolute right-0 l"
+              onClick={() => setPasswordVisible(!passwordVisible)}
+            >
+              {passwordVisible ? <IconEyeOff size={18} strokeWidth={1.5} /> : <IconEye size={18} strokeWidth={1.5} />}
+            </button>
+          </div>
           {formik.touched.passphrase && formik.errors.passphrase ? (
             <div className="ml-1 text-red-500">{formik.errors.passphrase}</div>
           ) : null}

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

@@ -36,7 +36,7 @@ const Info = ({ collection }) => {
           </tr>
           <tr className="">
             <td className="py-2 px-2 text-right">Ignored files&nbsp;:</td>
-            <td className="py-2 px-2 break-all">{collection.brunoConfig.ignore.map((x) => `'${x}'`).join(', ')}</td>
+            <td className="py-2 px-2 break-all">{collection.brunoConfig?.ignore?.map((x) => `'${x}'`).join(', ')}</td>
           </tr>
           <tr className="">
             <td className="py-2 px-2 text-right">Environments&nbsp;:</td>

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

@@ -4,6 +4,8 @@ import Tooltip from 'components/Tooltip';
 import StyledWrapper from './StyledWrapper';
 import * as Yup from 'yup';
 import toast from 'react-hot-toast';
+import { IconEye, IconEyeOff } from '@tabler/icons';
+import { useState } from 'react';
 
 const ProxySettings = ({ proxyConfig, onUpdate }) => {
   const proxySchema = Yup.object({
@@ -78,6 +80,7 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
         });
     }
   });
+  const [passwordVisible, setPasswordVisible] = useState(false);
 
   useEffect(() => {
     formik.setValues({
@@ -277,18 +280,27 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
             <label className="settings-label" htmlFor="auth.password">
               Password
             </label>
-            <input
-              id="auth.password"
-              type="password"
-              name="auth.password"
-              className="block textbox"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              value={formik.values.auth.password}
-              onChange={formik.handleChange}
-            />
+            <div className="textbox flex flex-row items-center w-[13.2rem] h-[1.70rem] relative">
+              <input
+                id="auth.password"
+                type={passwordVisible ? 'text' : 'password'}
+                name="auth.password"
+                className="outline-none bg-transparent w-[10.5rem]"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                value={formik.values.auth.password}
+                onChange={formik.handleChange}
+              />
+              <button
+                type="button"
+                className="btn btn-sm absolute right-0"
+                onClick={() => setPasswordVisible(!passwordVisible)}
+              >
+                {passwordVisible ? <IconEyeOff size={18} strokeWidth={1.5} /> : <IconEye size={18} strokeWidth={1.5} />}
+              </button>
+            </div>
             {formik.touched.auth?.password && formik.errors.auth?.password ? (
               <div className="ml-3 text-red-500">{formik.errors.auth.password}</div>
             ) : null}

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { IconAlertTriangle } from '@tabler/icons';
+import Modal from 'components/Modal';
+import { createPortal } from 'react-dom';
+
+const ConfirmSwitchEnv = ({ onCancel }) => {
+  return createPortal(
+    <Modal
+      size="md"
+      title="Unsaved changes"
+      confirmText="Save and Close"
+      cancelText="Close without saving"
+      disableEscapeKey={true}
+      disableCloseOnOutsideClick={true}
+      closeModalFadeTimeout={150}
+      handleCancel={onCancel}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+      hideFooter={true}
+    >
+      <div className="flex items-center font-normal">
+        <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
+        <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+      </div>
+      <div className="font-normal mt-4">You have unsaved changes in this environment.</div>
+
+      <div className="flex justify-between mt-6">
+        <div>
+          <button className="btn btn-sm btn-danger" onClick={onCancel}>
+            Close
+          </button>
+        </div>
+        <div></div>
+      </div>
+    </Modal>,
+    document.body
+  );
+};
+
+export default ConfirmSwitchEnv;

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

@@ -1,19 +1,19 @@
 import React from 'react';
-import toast from 'react-hot-toast';
-import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
-import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
+import { uuid } from 'utils/common';
+import { maskInputValue } from 'utils/collections';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { uuid } from 'utils/common';
 import { variableNameRegex } from 'utils/common/regex';
-import { maskInputValue } from 'utils/collections';
+import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import cloneDeep from 'lodash/cloneDeep';
+import toast from 'react-hot-toast';
 
-const EnvironmentVariables = ({ environment, collection }) => {
+const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
@@ -46,11 +46,17 @@ const EnvironmentVariables = ({ environment, collection }) => {
         .then(() => {
           toast.success('Changes saved successfully');
           formik.resetForm({ values });
+          setIsModified(false);
         })
         .catch(() => toast.error('An error occurred while saving the changes'));
     }
   });
 
+  // Effect to track modifications.
+  React.useEffect(() => {
+    setIsModified(formik.dirty);
+  }, [formik.dirty]);
+
   const ErrorMessage = ({ name }) => {
     const meta = formik.getFieldMeta(name);
     if (!meta.error) {
@@ -80,6 +86,10 @@ const EnvironmentVariables = ({ environment, collection }) => {
     formik.setValues(formik.values.filter((variable) => variable.uid !== id));
   };
 
+  const handleReset = () => {
+    formik.resetForm({ originalEnvironmentVariables });
+  };
+
   return (
     <StyledWrapper className="w-full mt-6 mb-6">
       <div className="h-[50vh] overflow-y-auto w-full">
@@ -162,6 +172,9 @@ const EnvironmentVariables = ({ environment, collection }) => {
         <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}>
+          Reset
+        </button>
       </div>
     </StyledWrapper>
   );

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

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

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, forwardRef, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { findEnvironmentInCollection } from 'utils/collections';
 import usePrevious from 'hooks/usePrevious';
 import EnvironmentDetails from './EnvironmentDetails';
@@ -7,19 +7,23 @@ import { IconDownload, IconShieldLock } from '@tabler/icons';
 import ImportEnvironment from '../ImportEnvironment';
 import ManageSecrets from '../ManageSecrets';
 import StyledWrapper from './StyledWrapper';
+import ConfirmSwitchEnv from './ConfirmSwitchEnv';
 
-const EnvironmentList = ({ collection }) => {
+const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified }) => {
   const { environments } = collection;
-  const [selectedEnvironment, setSelectedEnvironment] = useState(null);
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const [openImportModal, setOpenImportModal] = useState(false);
   const [openManageSecretsModal, setOpenManageSecretsModal] = useState(false);
 
+  const [switchEnvConfirmClose, setSwitchEnvConfirmClose] = useState(false);
+  const [originalEnvironmentVariables, setOriginalEnvironmentVariables] = useState([]);
+
   const envUids = environments ? environments.map((env) => env.uid) : [];
   const prevEnvUids = usePrevious(envUids);
 
   useEffect(() => {
     if (selectedEnvironment) {
+      setOriginalEnvironmentVariables(selectedEnvironment.variables);
       return;
     }
 
@@ -32,7 +36,6 @@ const EnvironmentList = ({ collection }) => {
   }, [collection, environments, selectedEnvironment]);
 
   useEffect(() => {
-    // check env add
     if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {
       const newEnv = environments.find((env) => !prevEnvUids.includes(env.uid));
       if (newEnv) {
@@ -40,23 +43,62 @@ const EnvironmentList = ({ collection }) => {
       }
     }
 
-    // check env delete
     if (prevEnvUids && prevEnvUids.length && envUids.length < prevEnvUids.length) {
       setSelectedEnvironment(environments && environments.length ? environments[0] : null);
     }
   }, [envUids, environments, prevEnvUids]);
 
+  const handleEnvironmentClick = (env) => {
+    if (!isModified) {
+      setSelectedEnvironment(env);
+    } else {
+      setSwitchEnvConfirmClose(true);
+    }
+  };
+
   if (!selectedEnvironment) {
     return null;
   }
 
+  const handleCreateEnvClick = () => {
+    if (!isModified) {
+      setOpenCreateModal(true);
+    } else {
+      setSwitchEnvConfirmClose(true);
+    }
+  };
+
+  const handleImportClick = () => {
+    if (!isModified) {
+      setOpenImportModal(true);
+    } else {
+      setSwitchEnvConfirmClose(true);
+    }
+  };
+
+  const handleSecretsClick = () => {
+    setOpenManageSecretsModal(true);
+  };
+
+  const handleConfirmSwitch = (saveChanges) => {
+    if (!saveChanges) {
+      setSwitchEnvConfirmClose(false);
+    }
+  };
+
   return (
     <StyledWrapper>
       {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
       {openImportModal && <ImportEnvironment collection={collection} onClose={() => setOpenImportModal(false)} />}
       {openManageSecretsModal && <ManageSecrets onClose={() => setOpenManageSecretsModal(false)} />}
+
       <div className="flex">
         <div>
+          {switchEnvConfirmClose && (
+            <div className="flex items-center justify-between tab-container px-1">
+              <ConfirmSwitchEnv onCancel={() => handleConfirmSwitch(false)} />
+            </div>
+          )}
           <div className="environments-sidebar flex flex-col">
             {environments &&
               environments.length &&
@@ -64,28 +106,33 @@ const EnvironmentList = ({ collection }) => {
                 <div
                   key={env.uid}
                   className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
-                  onClick={() => setSelectedEnvironment(env)}
+                  onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle clicks
                 >
                   <span className="break-all">{env.name}</span>
                 </div>
               ))}
-            <div className="btn-create-environment" onClick={() => setOpenCreateModal(true)}>
+            <div className="btn-create-environment" onClick={() => handleCreateEnvClick()}>
               + <span>Create</span>
             </div>
 
             <div className="mt-auto btn-import-environment">
-              <div className="flex items-center" onClick={() => setOpenImportModal(true)}>
+              <div className="flex items-center" onClick={() => handleImportClick()}>
                 <IconDownload size={12} strokeWidth={2} />
                 <span className="label ml-1 text-xs">Import</span>
               </div>
-              <div className="flex items-center mt-2" onClick={() => setOpenManageSecretsModal(true)}>
+              <div className="flex items-center mt-2" onClick={() => handleSecretsClick()}>
                 <IconShieldLock size={12} strokeWidth={2} />
                 <span className="label ml-1 text-xs">Managing Secrets</span>
               </div>
             </div>
           </div>
         </div>
-        <EnvironmentDetails environment={selectedEnvironment} collection={collection} />
+        <EnvironmentDetails
+          environment={selectedEnvironment}
+          collection={collection}
+          setIsModified={setIsModified}
+          originalEnvironmentVariables={originalEnvironmentVariables}
+        />
       </div>
     </StyledWrapper>
   );

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

@@ -6,9 +6,11 @@ import StyledWrapper from './StyledWrapper';
 import ImportEnvironment from './ImportEnvironment';
 
 const EnvironmentSettings = ({ collection, onClose }) => {
+  const [isModified, setIsModified] = useState(false);
   const { environments } = collection;
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const [openImportModal, setOpenImportModal] = useState(false);
+  const [selectedEnvironment, setSelectedEnvironment] = useState(null);
 
   if (!environments || !environments.length) {
     return (
@@ -48,7 +50,13 @@ const EnvironmentSettings = ({ collection, onClose }) => {
 
   return (
     <Modal size="lg" title="Environments" handleCancel={onClose} hideFooter={true}>
-      <EnvironmentList collection={collection} />
+      <EnvironmentList
+        selectedEnvironment={selectedEnvironment}
+        setSelectedEnvironment={setSelectedEnvironment}
+        collection={collection}
+        isModified={isModified}
+        setIsModified={setIsModified}
+      />
     </Modal>
   );
 };

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

@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  width: 100%;
+  height: fit-content;
+  max-height: 200px;
+  overflow: auto;
+
+  .CodeMirror {
+    background: transparent;
+    height: fit-content;
+    font-size: 14px;
+    line-height: 30px;
+    overflow: hidden;
+
+    .CodeMirror-scroll {
+      overflow: hidden !important;
+      ${'' /* padding-bottom: 50px !important; */}
+      position: relative;
+      display: contents;
+      margin: 0px;
+      padding: 0px;
+    }
+
+    .CodeMirror-vscrollbar,
+    .CodeMirror-hscrollbar,
+    .CodeMirror-scrollbar-filler {
+      display: none;
+    }
+
+    .CodeMirror-lines {
+      padding: 0;
+    }
+
+    .CodeMirror-cursor {
+      height: 20px !important;
+      margin-top: 5px !important;
+      border-left: 1px solid ${(props) => props.theme.text} !important;
+    }
+
+    pre {
+      font-family: Inter, sans-serif !important;
+      font-weight: 400;
+    }
+
+    .CodeMirror-line {
+      color: ${(props) => props.theme.text};
+      padding: 0;
+    }
+
+    .CodeMirror-selected {
+      background-color: rgba(212, 125, 59, 0.3);
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,140 @@
+import React, { Component } from 'react';
+import isEqual from 'lodash/isEqual';
+import { getAllVariables } from 'utils/collections';
+import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
+import StyledWrapper from './StyledWrapper';
+
+let CodeMirror;
+const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
+
+if (!SERVER_RENDERED) {
+  CodeMirror = require('codemirror');
+}
+
+class MultiLineEditor extends Component {
+  constructor(props) {
+    super(props);
+    // Keep a cached version of the value, this cache will be updated when the
+    // editor is updated, which can later be used to protect the editor from
+    // unnecessary updates during the update lifecycle.
+    this.cachedValue = props.value || '';
+    this.editorRef = React.createRef();
+    this.variables = {};
+  }
+  componentDidMount() {
+    // Initialize CodeMirror as a single line editor
+    /** @type {import("codemirror").Editor} */
+    this.editor = CodeMirror(this.editorRef.current, {
+      lineWrapping: false,
+      lineNumbers: false,
+      theme: this.props.theme === 'dark' ? 'monokai' : 'default',
+      mode: 'brunovariables',
+      brunoVarInfo: {
+        variables: getAllVariables(this.props.collection)
+      },
+      scrollbarStyle: null,
+      tabindex: 0,
+      extraKeys: {
+        Enter: () => {
+          if (this.props.onRun) {
+            this.props.onRun();
+          }
+        },
+        'Ctrl-Enter': () => {
+          if (this.props.onRun) {
+            this.props.onRun();
+          }
+        },
+        'Cmd-Enter': () => {
+          if (this.props.onRun) {
+            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();
+          }
+        },
+        'Ctrl-S': () => {
+          if (this.props.onSave) {
+            this.props.onSave();
+          }
+        },
+        'Cmd-F': () => {},
+        'Ctrl-F': () => {},
+        // Tabbing disabled to make tabindex work
+        Tab: false,
+        'Shift-Tab': false
+      }
+    });
+    if (this.props.autocomplete) {
+      this.editor.on('keyup', (cm, event) => {
+        if (!cm.state.completionActive /*Enables keyboard navigation in autocomplete list*/ && event.keyCode != 13) {
+          /*Enter - do not open autocomplete list just after item has been selected in it*/
+          CodeMirror.commands.autocomplete(cm, CodeMirror.hint.anyword, { autocomplete: this.props.autocomplete });
+        }
+      });
+    }
+    this.editor.setValue(String(this.props.value) || '');
+    this.editor.on('change', this._onEdit);
+    this.addOverlay();
+  }
+
+  _onEdit = () => {
+    if (!this.ignoreChangeEvent && this.editor) {
+      this.cachedValue = this.editor.getValue();
+      if (this.props.onChange) {
+        this.props.onChange(this.cachedValue);
+      }
+    }
+  };
+
+  componentDidUpdate(prevProps) {
+    // Ensure the changes caused by this update are not interpreted as
+    // user-input changes which could otherwise result in an infinite
+    // event loop.
+    this.ignoreChangeEvent = true;
+
+    let variables = getAllVariables(this.props.collection);
+    if (!isEqual(variables, this.variables)) {
+      this.editor.options.brunoVarInfo.variables = variables;
+      this.addOverlay();
+    }
+    if (this.props.theme !== prevProps.theme && this.editor) {
+      this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
+    }
+    if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
+      this.cachedValue = String(this.props.value);
+      this.editor.setValue(String(this.props.value) || '');
+    }
+    if (this.editorRef?.current) {
+      this.editorRef.current.scrollTo(0, 10000);
+    }
+    this.ignoreChangeEvent = false;
+  }
+
+  componentWillUnmount() {
+    this.editor.getWrapperElement().remove();
+  }
+
+  addOverlay = () => {
+    let variables = getAllVariables(this.props.collection);
+    this.variables = variables;
+
+    defineCodeMirrorBrunoVariablesMode(variables, 'text/plain');
+    this.editor.setOption('mode', 'brunovariables');
+  };
+
+  render() {
+    return <StyledWrapper ref={this.editorRef} className="single-line-editor"></StyledWrapper>;
+  }
+}
+export default MultiLineEditor;

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

@@ -6,6 +6,8 @@ import { savePreferences } from 'providers/ReduxStore/slices/app';
 
 import StyledWrapper from './StyledWrapper';
 import { useDispatch, useSelector } from 'react-redux';
+import { IconEye, IconEyeOff } from '@tabler/icons';
+import { useState } from 'react';
 
 const ProxySettings = ({ close }) => {
   const preferences = useSelector((state) => state.app.preferences);
@@ -88,6 +90,8 @@ const ProxySettings = ({ close }) => {
       });
   };
 
+  const [passwordVisible, setPasswordVisible] = useState(false);
+
   useEffect(() => {
     formik.setValues({
       enabled: preferences.proxy.enabled || false,
@@ -164,6 +168,7 @@ const ProxySettings = ({ close }) => {
             </label>
           </div>
         </div>
+
         <div className="mb-3 flex items-center">
           <label className="settings-label" htmlFor="hostname">
             Hostname
@@ -240,18 +245,27 @@ const ProxySettings = ({ close }) => {
             <label className="settings-label" htmlFor="auth.password">
               Password
             </label>
-            <input
-              id="auth.password"
-              type="password"
-              name="auth.password"
-              className="block textbox"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              value={formik.values.auth.password}
-              onChange={formik.handleChange}
-            />
+            <div className="textbox flex flex-row items-center w-[13.2rem] h-[2.25rem] relative">
+              <input
+                id="auth.password"
+                type={passwordVisible ? `text` : 'password'}
+                name="auth.password"
+                className="outline-none w-[10.5rem] bg-transparent"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                value={formik.values.auth.password}
+                onChange={formik.handleChange}
+              />
+              <button
+                type="button"
+                className="btn btn-sm absolute right-0"
+                onClick={() => setPasswordVisible(!passwordVisible)}
+              >
+                {passwordVisible ? <IconEyeOff size={18} strokeWidth={2} /> : <IconEye size={18} strokeWidth={2} />}
+              </button>
+            </div>
             {formik.touched.auth?.password && formik.errors.auth?.password ? (
               <div className="ml-3 text-red-500">{formik.errors.auth.password}</div>
             ) : null}

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

@@ -41,7 +41,9 @@ const Auth = ({ item, collection }) => {
                   <div>Collection level auth is: </div>
                   <div className="inherit-mode-text">{humanizeRequestAuthMode(collectionAuth?.mode)}</div>
                 </div>
-                <div className="text-sm opacity-50">Cannot inherit Oauth2 from collection.</div>
+                <div className="text-sm opacity-50">
+                  Note: You need to use scripting to set the access token in the request headers.
+                </div>
               </div>
             ) : (
               <>

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

@@ -9,7 +9,7 @@ import {
   updateFormUrlEncodedParam,
   deleteFormUrlEncodedParam
 } from 'providers/ReduxStore/slices/collections';
-import SingleLineEditor from 'components/SingleLineEditor';
+import MultiLineEditor from 'components/MultiLineEditor';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
@@ -92,7 +92,7 @@ const FormUrlEncodedParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <SingleLineEditor
+                      <MultiLineEditor
                         value={param.value}
                         theme={storedTheme}
                         onSave={onSave}

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

@@ -9,7 +9,7 @@ import {
   updateMultipartFormParam,
   deleteMultipartFormParam
 } from 'providers/ReduxStore/slices/collections';
-import SingleLineEditor from 'components/SingleLineEditor';
+import MultiLineEditor from 'components/MultiLineEditor';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import FilePickerEditor from 'components/FilePickerEditor';
@@ -121,7 +121,7 @@ const MultipartFormParams = ({ item, collection }) => {
                           collection={collection}
                         />
                       ) : (
-                        <SingleLineEditor
+                        <MultiLineEditor
                           onSave={onSave}
                           theme={storedTheme}
                           value={param.value}
@@ -137,6 +137,7 @@ const MultipartFormParams = ({ item, collection }) => {
                             )
                           }
                           onRun={handleRun}
+                          allowNewlines={true}
                           collection={collection}
                         />
                       )}

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

@@ -115,6 +115,7 @@ const RequestHeaders = ({ item, collection }) => {
                           )
                         }
                         onRun={handleRun}
+                        allowNewlines={true}
                         collection={collection}
                       />
                     </td>

packages/bruno-app/src/components/Sidebar/ImportCollection/index.js

@@ -79,7 +79,7 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
         </div>
         <div className="flex justify-start w-full mt-4 max-w-[450px]">
           {Object.entries(options || {}).map(([key, option]) => (
-            <div className="relative flex items-start">
+            <div key={key} className="relative flex items-start">
               <div className="flex h-6 items-center">
                 <input
                   id="comments"

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

@@ -129,7 +129,7 @@ const Sidebar = () => {
                   Star
                 </GitHubButton> */}
               </div>
-              <div className="flex flex-grow items-center justify-end text-xs mr-2">v1.13.1</div>
+              <div className="flex flex-grow items-center justify-end text-xs mr-2">v1.17.0</div>
             </div>
           </div>
         </div>

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

@@ -13,20 +13,15 @@ const StyledWrapper = styled.div`
     line-height: 30px;
     overflow: hidden;
 
-    .CodeMirror-vscrollbar {
-      display: none !important;
-    }
-
     .CodeMirror-scroll {
       overflow: hidden !important;
       padding-bottom: 50px !important;
     }
 
-    .CodeMirror-hscrollbar {
-      display: none !important;
-    }
+    .CodeMirror-vscrollbar,
+    .CodeMirror-hscrollbar,
     .CodeMirror-scrollbar-filler {
-      display: none !important;
+      display: none;
     }
 
     .CodeMirror-lines {
@@ -46,8 +41,7 @@ const StyledWrapper = styled.div`
 
     .CodeMirror-line {
       color: ${(props) => props.theme.text};
-      padding-left: 0;
-      padding-right: 0;
+      padding: 0;
     }
 
     .CodeMirror-selected {

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

@@ -9,40 +9,6 @@ const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODE
 
 if (!SERVER_RENDERED) {
   CodeMirror = require('codemirror');
-  CodeMirror.registerHelper('hint', 'anyword', (editor, options) => {
-    const word = /[\w$-]+/;
-    const wordlist = (options && options.autocomplete) || [];
-    let cur = editor.getCursor(),
-      curLine = editor.getLine(cur.line);
-    let end = cur.ch,
-      start = end;
-    while (start && word.test(curLine.charAt(start - 1))) --start;
-    let curWord = start != end && curLine.slice(start, end);
-
-    // Check if curWord is a valid string before proceeding
-    if (typeof curWord !== 'string' || curWord.length < 3) {
-      return null; // Abort the hint
-    }
-
-    const list = (options && options.list) || [];
-    const re = new RegExp(word.source, 'g');
-    for (let dir = -1; dir <= 1; dir += 2) {
-      let line = cur.line,
-        endLine = Math.min(Math.max(line + dir * 500, editor.firstLine()), editor.lastLine()) + dir;
-      for (; line != endLine; line += dir) {
-        let text = editor.getLine(line),
-          m;
-        while ((m = re.exec(text))) {
-          if (line == cur.line && curWord.length < 3) continue;
-          list.push(...wordlist.filter((el) => el.toLowerCase().startsWith(curWord.toLowerCase())));
-        }
-      }
-    }
-    return { list: [...new Set(list)], from: CodeMirror.Pos(cur.line, start), to: CodeMirror.Pos(cur.line, end) };
-  });
-  CodeMirror.commands.autocomplete = (cm, hint, options) => {
-    cm.showHint({ hint, ...options });
-  };
 }
 
 class SingleLineEditor extends Component {

packages/bruno-app/src/pages/Bruno/index.js

@@ -41,6 +41,7 @@ if (!SERVER_RENDERED) {
 
   require('utils/codemirror/brunoVarInfo');
   require('utils/codemirror/javascript-lint');
+  require('utils/codemirror/autocomplete');
 }
 
 export default function Main() {

packages/bruno-app/src/pages/ErrorBoundary/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Bruno from 'components/Bruno/index';
+
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -14,29 +16,61 @@ class ErrorBoundary extends React.Component {
   }
   componentDidCatch(error, errorInfo) {
     console.log({ error, errorInfo });
+    this.setState({ hasError: true, error, errorInfo });
   }
+
+  returnToApp() {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('open-file');
+
+    this.setState({ hasError: false, error: null, errorInfo: null });
+  }
+
+  forceQuit() {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('main:force-quit');
+  }
+
   render() {
     if (this.state.hasError) {
       return (
-        <div className="flex items-center justify-center p-10">
-          <div className="bg-white rounded-lg shadow-lg p-4 w-full">
+        <div className="flex text-center justify-center p-20 h-full">
+          <div className="bg-white rounded-lg p-10 w-full">
+            <div className="m-auto" style={{ width: '256px' }}>
+              <Bruno width={256} />
+            </div>
+
             <h1 className="text-2xl font-semibold text-red-600 mb-2">Oops! Something went wrong</h1>
-            <p className="text-red-600 mb-2">{this.state.error && this.state.error.toString()}</p>
-            {this.state.error && this.state.error.stack && (
-              <pre className="bg-gray-100 p-2 rounded-lg overflow-auto">{this.state.error.stack}</pre>
-            )}
+            <p className="text-red-500 mb-2">
+              If you are using an official production build: the above error is most likely a bug!
+              <br />
+              Please report this under:
+              <a
+                className="text-link hover:underline cursor-pointer ml-2"
+                href="https://github.com/usebruno/bruno/issues"
+                target="_blank"
+              >
+                https://github.com/usebruno/bruno/issues
+              </a>
+            </p>
+
             <button
               className="bg-red-500 text-white px-4 py-2 mt-4 rounded hover:bg-red-600 transition"
-              onClick={() => {
-                this.setState({ hasError: false, error: null });
-              }}
+              onClick={() => this.returnToApp()}
             >
-              Close
+              Return to App
             </button>
+
+            <div className="text-red-500 mt-3">
+              <a href="" className="hover:underline cursor-pointer" onClick={this.forceQuit}>
+                Force Quit
+              </a>
+            </div>
           </div>
         </div>
       );
     }
+
     return this.props.children;
   }
 }

packages/bruno-app/src/providers/App/useTelemetry.js

@@ -60,7 +60,7 @@ const trackStart = () => {
     event: 'start',
     properties: {
       os: platformLib.os.family,
-      version: '1.13.1'
+      version: '1.17.0'
     }
   });
 };

packages/bruno-app/src/utils/codemirror/autocomplete.js

@@ -0,0 +1,40 @@
+let CodeMirror;
+const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
+
+if (!SERVER_RENDERED) {
+  CodeMirror = require('codemirror');
+  CodeMirror.registerHelper('hint', 'anyword', (editor, options) => {
+    const word = /[\w$-]+/;
+    const wordlist = (options && options.autocomplete) || [];
+    let cur = editor.getCursor(),
+      curLine = editor.getLine(cur.line);
+    let end = cur.ch,
+      start = end;
+    while (start && word.test(curLine.charAt(start - 1))) --start;
+    let curWord = start != end && curLine.slice(start, end);
+
+    // Check if curWord is a valid string before proceeding
+    if (typeof curWord !== 'string' || curWord.length < 3) {
+      return null; // Abort the hint
+    }
+
+    const list = (options && options.list) || [];
+    const re = new RegExp(word.source, 'g');
+    for (let dir = -1; dir <= 1; dir += 2) {
+      let line = cur.line,
+        endLine = Math.min(Math.max(line + dir * 500, editor.firstLine()), editor.lastLine()) + dir;
+      for (; line != endLine; line += dir) {
+        let text = editor.getLine(line),
+          m;
+        while ((m = re.exec(text))) {
+          if (line == cur.line && curWord.length < 3) continue;
+          list.push(...wordlist.filter((el) => el.toLowerCase().startsWith(curWord.toLowerCase())));
+        }
+      }
+    }
+    return { list: [...new Set(list)], from: CodeMirror.Pos(cur.line, start), to: CodeMirror.Pos(cur.line, end) };
+  });
+  CodeMirror.commands.autocomplete = (cm, hint, options) => {
+    cm.showHint({ hint, ...options });
+  };
+}

packages/bruno-app/src/utils/collections/index.js

@@ -417,7 +417,10 @@ export const transformRequestToSaveToFilesystem = (item) => {
   });
 
   if (itemToSave.request.body.mode === 'json') {
-    itemToSave.request.body.json = replaceTabsWithSpaces(itemToSave.request.body.json);
+    itemToSave.request.body = {
+      ...itemToSave.request.body,
+      json: replaceTabsWithSpaces(itemToSave.request.body.json)
+    };
   }
 
   return itemToSave;

packages/bruno-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usebruno/cli",
-  "version": "1.11.0",
+  "version": "1.16.0",
   "license": "MIT",
   "main": "src/index.js",
   "bin": {
@@ -26,8 +26,8 @@
   "dependencies": {
     "@aws-sdk/credential-providers": "3.525.0",
     "@usebruno/common": "0.1.0",
-    "@usebruno/js": "0.11.0",
-    "@usebruno/lang": "0.11.0",
+    "@usebruno/js": "0.12.0",
+    "@usebruno/lang": "0.12.0",
     "aws4-axios": "^3.3.0",
     "axios": "^1.5.1",
     "chai": "^4.3.7",

packages/bruno-cli/src/runner/prepare-request.js

@@ -32,19 +32,8 @@ const prepareRequest = (request, collectionRoot) => {
     headers: headers
   };
 
-  /**
-   * 27 Feb 2024:
-   * ['inherit', 'none'].includes(request.auth.mode)
-   * We are mainitaining the old behavior where 'none' used to inherit the collection auth.
-   *
-   * Very soon, 'none' will be treated as no auth and 'inherit' will be the only way to inherit collection auth.
-   * We will request users to update their collection files to use 'inherit' instead of 'none'.
-   * Don't want to break ongoing CI pipelines.
-   *
-   * Hoping to remove this by 1 April 2024.
-   */
   const collectionAuth = get(collectionRoot, 'request.auth');
-  if (collectionAuth && ['inherit', 'none'].includes(request.auth.mode)) {
+  if (collectionAuth && request.auth.mode === 'inherit') {
     if (collectionAuth.mode === 'basic') {
       axiosRequest.auth = {
         username: get(collectionAuth, 'basic.username'),

packages/bruno-electron/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "v1.13.1",
+  "version": "v1.17.0",
   "name": "bruno",
   "description": "Opensource API Client for Exploring and Testing APIs",
   "homepage": "https://www.usebruno.com",
@@ -21,8 +21,8 @@
   "dependencies": {
     "@aws-sdk/credential-providers": "3.525.0",
     "@usebruno/common": "0.1.0",
-    "@usebruno/js": "0.11.0",
-    "@usebruno/lang": "0.11.0",
+    "@usebruno/js": "0.12.0",
+    "@usebruno/lang": "0.12.0",
     "@usebruno/schema": "0.7.0",
     "about-window": "^1.15.2",
     "aws4-axios": "^3.3.0",

packages/bruno-electron/src/ipc/collection.js

@@ -628,6 +628,10 @@ const registerMainEventHandlers = (mainWindow, watcher, lastOpenedCollections) =
   ipcMain.handle('main:complete-quit-flow', () => {
     mainWindow.destroy();
   });
+
+  ipcMain.handle('main:force-quit', () => {
+    process.exit();
+  });
 };
 
 const registerCollectionsIpc = (mainWindow, watcher, lastOpenedCollections) => {

packages/bruno-electron/src/ipc/network/prepare-request.js

@@ -30,20 +30,9 @@ const parseFormData = (datas, collectionPath) => {
   return form;
 };
 
-/**
- * 27 Feb 2024:
- * ['inherit', 'none'].includes(request.auth.mode)
- * We are mainitaining the old behavior where 'none' used to inherit the collection auth.
- *
- * Very soon, 'none' will be treated as no auth and 'inherit' will be the only way to inherit collection auth.
- * We will request users to update their collection files to use 'inherit' instead of 'none'.
- * Don't want to break ongoing CI pipelines.
- *
- * Hoping to remove this by 1 April 2024.
- */
 const setAuthHeaders = (axiosRequest, request, collectionRoot) => {
   const collectionAuth = get(collectionRoot, 'request.auth');
-  if (collectionAuth && ['inherit', 'none'].includes(request.auth.mode)) {
+  if (collectionAuth && request.auth.mode === 'inherit') {
     switch (collectionAuth.mode) {
       case 'awsv4':
         axiosRequest.awsv4config = {

packages/bruno-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usebruno/js",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "MIT",
   "main": "src/index.js",
   "files": [

packages/bruno-lang/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usebruno/lang",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "MIT",
   "main": "src/index.js",
   "files": [

packages/bruno-lang/v2/src/bruToJson.js

@@ -35,12 +35,16 @@ const grammar = ohm.grammar(`Bru {
   keychar = ~(tagend | st | nl | ":") any
   valuechar = ~(nl | tagend) any
 
+   // Multiline text block surrounded by '''
+  multilinetextblockdelimiter = "'''"
+  multilinetextblock = multilinetextblockdelimiter (~multilinetextblockdelimiter any)* multilinetextblockdelimiter
+
   // Dictionary Blocks
   dictionary = st* "{" pairlist? tagend
   pairlist = optionalnl* pair (~tagend stnl* pair)* (~tagend space)*
   pair = st* key st* ":" st* value st*
   key = keychar*
-  value = valuechar*
+  value = multilinetextblock | valuechar*
   
   // Dictionary for Assert Block
   assertdictionary = st* "{" assertpairlist? tagend
@@ -186,6 +190,19 @@ const sem = grammar.createSemantics().addAttribute('ast', {
     return chars.sourceString ? chars.sourceString.trim() : '';
   },
   value(chars) {
+    try {
+      let isMultiline = chars.sourceString?.startsWith(`'''`) && chars.sourceString?.endsWith(`'''`);
+      if (isMultiline) {
+        const multilineString = chars.sourceString?.replace(/^'''|'''$/g, '');
+        return multilineString
+          .split('\n')
+          .map((line) => line.slice(4))
+          .join('\n');
+      }
+      return chars.sourceString ? chars.sourceString.trim() : '';
+    } catch (err) {
+      console.error(err);
+    }
     return chars.sourceString ? chars.sourceString.trim() : '';
   },
   assertdictionary(_1, _2, pairlist, _3) {

packages/bruno-lang/v2/src/jsonToBru.js

@@ -12,6 +12,23 @@ const stripLastLine = (text) => {
   return text.replace(/(\r?\n)$/, '');
 };
 
+const getValueString = (value) => {
+  const hasNewLines = value.includes('\n');
+
+  if (!hasNewLines) {
+    return value;
+  }
+
+  // Add one level of indentation to the contents of the multistring
+  const indentedLines = value
+    .split('\n')
+    .map((line) => `  ${line}`)
+    .join('\n');
+
+  // Join the lines back together with newline characters and enclose them in triple single quotes
+  return `'''\n${indentedLines}\n'''`;
+};
+
 const jsonToBru = (json) => {
   const { meta, http, query, headers, auth, body, script, tests, vars, assertions, docs } = json;
 
@@ -202,24 +219,23 @@ ${indentString(body.sparql)}
   }
 
   if (body && body.formUrlEncoded && body.formUrlEncoded.length) {
-    bru += `body:form-urlencoded {`;
+    bru += `body:form-urlencoded {\n`;
+
     if (enabled(body.formUrlEncoded).length) {
-      bru += `\n${indentString(
-        enabled(body.formUrlEncoded)
-          .map((item) => `${item.name}: ${item.value}`)
-          .join('\n')
-      )}`;
+      const enabledValues = enabled(body.formUrlEncoded)
+        .map((item) => `${item.name}: ${getValueString(item.value)}`)
+        .join('\n');
+      bru += `${indentString(enabledValues)}\n`;
     }
 
     if (disabled(body.formUrlEncoded).length) {
-      bru += `\n${indentString(
-        disabled(body.formUrlEncoded)
-          .map((item) => `~${item.name}: ${item.value}`)
-          .join('\n')
-      )}`;
+      const disabledValues = disabled(body.formUrlEncoded)
+        .map((item) => `~${item.name}: ${getValueString(item.value)}`)
+        .join('\n');
+      bru += `${indentString(disabledValues)}\n`;
     }
 
-    bru += '\n}\n\n';
+    bru += '}\n\n';
   }
 
   if (body && body.multipartForm && body.multipartForm.length) {

packages/bruno-tests/collection/echo/supermetrics.bru

@@ -0,0 +1,139 @@
+meta {
+  name: supermetrics json visualize
+  type: http
+  seq: 5
+}
+
+post {
+  url: https://testbench-sanity.usebruno.com/api/echo/json
+  body: json
+  auth: none
+}
+
+headers {
+  foo: bar
+}
+
+auth:basic {
+  username: asd
+  password: j
+}
+
+auth:bearer {
+  token: 
+}
+
+body:json {
+  {
+    "notes": {
+      "runtime_sec": 5,
+      "result_rows": 4,
+      "query_count": 6    
+    },
+    "fields": [
+      {
+        "name": "Count",
+        "type": "number",
+        "data_type": "number"
+      },
+      {
+        "name": "Name",
+        "type": "string",
+        "data_type": "string"
+      },
+      {
+        "name": "Age",
+        "type": "number",
+        "data_type": "number"
+      },
+      {
+        "name": "Email",
+        "type": "email",
+        "data_type": "string"
+      },
+      {
+        "name": "Place",
+        "type": "string",
+        "data_type": "string"
+      }
+    ],
+    "data": [
+      {
+        "id": null,
+        "name": "Name",
+        "age": "Age",
+        "email": "Email",
+        "city": "City"
+      },
+      {
+        "id": 1,
+        "name": "John Doe",
+        "age": 30,
+        "email": "john@example.com",
+        "city": "New York"
+      },
+      {
+        "id": 2,
+        "name": "Jane Smith",
+        "age": 25,
+        "email": "jane@example.com",
+        "city": "Los Angeles"
+      },
+      {
+        "id": 3,
+        "name": "Bob Johnson",
+        "age": 35,
+        "email": "bob@example.com",
+        "city": "Chicago"
+      },
+      {
+        "id": 4,
+        "name": "Alice Williams",
+        "age": 28,
+        "email": "alice@example.com",
+        "city": "San Francisco"
+      }
+    ]
+  }
+  
+}
+
+assert {
+  res.status: eq 200
+}
+
+script:pre-request {
+  const { URL } = require('url');
+  
+  const reqUrl = new URL(req.url);
+  
+  reqUrl.searchParams.delete('returnQueryIDafterSeconds');
+  reqUrl.searchParams.delete('separateFetchQuery');
+  reqUrl.searchParams.delete('pretty');
+  reqUrl.searchParams.delete('displayLog');
+  reqUrl.searchParams.delete('triggerID');
+  reqUrl.searchParams.delete('hashForQIDFDB');
+  reqUrl.searchParams.delete('queryType');
+  reqUrl.searchParams.delete('queryCount');
+  
+  reqUrl.searchParams.append("cacheBuster", new Date().toISOString());
+  
+  req.setUrl(reqUrl.href);
+  
+}
+
+script:post-response {
+  const visualizeNotes = require("./lib/notes");
+  
+  bru.visualize(visualizeNotes(res));
+}
+
+tests {
+  test("should return json", function() {
+    const data = res.getBody();
+    expect(res.getBody()).to.eql({
+      "hello": "bruno"
+    });
+  });
+  
+}

packages/bruno-tests/collection/lib/notes.js

@@ -0,0 +1,180 @@
+const visualizeNotes = (res) => {
+  let response = res.body;
+
+  let notes = response?.notes || {};
+  let responseRuntime = notes.runtime_sec || 0;
+
+  notes.runtime = new Date(responseRuntime * 1000).toISOString().substr(11, 8);
+
+  if (typeof response?.data === 'undefined' && typeof response?.rows === 'object') {
+    response.data = response?.rows?.map(function (data) {
+      return data?.values;
+    });
+  }
+
+  const templateScript = `
+    <script id="template" type="text/x-handlebars-template">
+      {{#if response.data}}
+          <div>
+              <p>Total rows: {{notes.result_rows}}</p>
+              <p>Query count: {{notes.query_count}}</p>
+              <p>Duration: {{notes.runtime}}</p>
+          </div>
+          <table id="data_table">
+              {{#each response.data}}
+                  {{#if @first}}
+                      <tr>
+                          {{#each this}}
+                              <th>
+                                  {{#with (lookup ../../response.fields @index)~}}
+                                      <small>
+                                          {{name}} ({{type}})<br>
+                                          {{data_type}}<br>
+                                      </small>
+                                  {{/with}}
+                                  {{this}}
+                              </th>
+                          {{/each}}
+                      </tr>
+                  {{else}}
+                      <tr id="row_{{@key}}" class="data_row">
+                          {{#each this}}
+                              <td>{{this}}</td>
+                          {{/each}}
+                      </tr>
+                  {{/if}}
+              {{/each}}
+          </table>
+      {{else if response.results}}
+          <table id="data_table">
+              <tr>
+                  {{#each response.results.[0]}}
+                      <th>{{@key}}</th>
+                  {{/each}}
+              </tr>
+              {{#each response.results}}
+                  <tr id="row_{{@key}}" class="data_row">
+                      {{#each this}}
+                          <td>{{this}}</td>
+                      {{/each}}
+                  </tr>
+              {{/each}}
+          </table>
+      {{else}}
+          <div class="error">
+              <h1>Error</h1>
+              {{#if response.notes}}
+                  {{response.notes.error}}
+              {{else}}
+                  No response
+              {{/if}}
+          </div>
+      {{/if}}
+    </script>
+  `;
+
+  const mainScript = `
+    <script>
+      document.addEventListener("DOMContentLoaded", function() {
+        let data = ${JSON.stringify({
+          response,
+          notes
+        })}
+        let source = document.getElementById("template").innerHTML;
+        let template = Handlebars.compile(source);
+        document.body.innerHTML = template(data);
+        document.getElementById('data_table').addEventListener('click', function(e) {
+          var row = e.target.closest('tr.data_row');
+          if (row) {
+              row.classList.toggle('marked');
+          }
+        });
+      });
+    </script>
+  `;
+
+  const style = `
+    <style type="text/css">
+        div {
+            margin-bottom: 8px;
+        }
+        div p {
+            font-family: courier;
+            font-size: 12px;
+            line-height: 1.2;
+            color: #afafaf;
+            margin: 0;
+        }
+        div.error {
+            padding: 20px;
+            background-color: #ffcece;
+            color: #792626;
+            font-size: 18px;
+        }
+        div.error h1 {
+            color: #dd4545;
+            line-height: 50px;
+            font-size: 28px;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+        table {
+            background-color: #454545;
+            color: #dedede;
+            font-size: 12px;
+            width: 100%;
+            border: 1px solid #cdcdcd;
+            border-collapse: collapse;
+        }
+        table th, table td {
+            border: 1px solid #797979;
+        }
+        table th {
+            font-size: 14px;
+            font-weight: bold;
+            background-color: #565656;
+            text-align: left;
+            vertical-align: bottom;
+        }
+        table th, table th:first-child, table th:last-child {
+            padding: 4px;
+        }
+        table th small {
+            font-size: 10px;
+            color: #afafaf;
+        }
+        table tr:hover {
+            background-color:#505050;
+        }
+        table tr.marked:nth-child(even) {
+            background-color: #707070;
+        }
+        table tr.marked:nth-child(odd) {
+            background-color: #696969;
+        }
+        table td {
+            padding: 2px;
+        }
+        table td, table td:first-child, table td:last-child {
+            padding: 3px;
+        }
+    </style>
+  `;
+
+  const htmlString = `
+    <html>
+      <head>
+        ${style}
+      </head>
+      <body>
+        <script src="https://rawgit.com/components/handlebars.js/master/handlebars.js"></script>
+        ${templateScript}
+        ${mainScript}
+      </body>
+    </html>
+  `;
+
+  return htmlString;
+};
+
+module.exports = visualizeNotes;

packages/bruno-tests/collection/scripting/get-env-name.bru

@@ -0,0 +1,54 @@
+meta {
+  name: get-env-name
+  type: http
+  seq: 1
+}
+
+get {
+  url: {{host}}/ping
+  body: none
+  auth: none
+}
+
+auth:awsv4 {
+  accessKeyId: a
+  secretAccessKey: b
+  sessionToken: c
+  service: d
+  region: e
+  profileName: f
+}
+
+script:pre-request {
+  const envName = bru.getEnvName();
+  bru.setVar("testEnvName", envName);
+}
+
+tests {
+  test("should get env name in scripts", function() {
+    const testEnvName = bru.getVar("testEnvName");
+    expect(testEnvName).to.equal("Prod");
+  });
+}
+
+docs {
+  # API Documentation
+  
+  ## Introduction
+  
+  Welcome to the API documentation for [Your API Name]. This document provides instructions on how to make requests to the API and covers available authentication methods.
+  
+  ## Authentication
+  
+  Before making requests to the API, you need to authenticate your application. [Your API Name] supports the following authentication methods:
+  
+  ### API Key
+  
+  To use API key authentication, include your API key in the request headers as follows:
+  
+  ```http
+  GET /api/endpoint
+  Host: api.example.com
+  Authorization: Bearer YOUR_API_KEY
+  
+}

packages/bruno-tests/collection/scripting/get-env-var.bru

@@ -0,0 +1,49 @@
+meta {
+  name: get-env-var
+  type: http
+  seq: 2
+}
+
+get {
+  url: {{host}}/ping
+  body: none
+  auth: none
+}
+
+auth:awsv4 {
+  accessKeyId: a
+  secretAccessKey: b
+  sessionToken: c
+  service: d
+  region: e
+  profileName: f
+}
+
+tests {
+  test("should get env var in scripts", function() {
+    const host = bru.getEnvVar("host")
+    expect(host).to.equal("https://testbench-sanity.usebruno.com");
+  });
+}
+
+docs {
+  # API Documentation
+  
+  ## Introduction
+  
+  Welcome to the API documentation for [Your API Name]. This document provides instructions on how to make requests to the API and covers available authentication methods.
+  
+  ## Authentication
+  
+  Before making requests to the API, you need to authenticate your application. [Your API Name] supports the following authentication methods:
+  
+  ### API Key
+  
+  To use API key authentication, include your API key in the request headers as follows:
+  
+  ```http
+  GET /api/endpoint
+  Host: api.example.com
+  Authorization: Bearer YOUR_API_KEY
+  
+}

packages/bruno-tests/collection/scripting/set-env-var.bru

@@ -0,0 +1,54 @@
+meta {
+  name: set-env-var
+  type: http
+  seq: 3
+}
+
+get {
+  url: {{host}}/ping
+  body: none
+  auth: none
+}
+
+auth:awsv4 {
+  accessKeyId: a
+  secretAccessKey: b
+  sessionToken: c
+  service: d
+  region: e
+  profileName: f
+}
+
+script:post-response {
+  bru.setEnvVar("testSetEnvVar", "bruno-29653")
+}
+
+tests {
+  test("should set env var in scripts", function() {
+    const testSetEnvVar = bru.getEnvVar("testSetEnvVar")
+    console.log(testSetEnvVar);
+    expect(testSetEnvVar).to.equal("bruno-29653");
+  });
+}
+
+docs {
+  # API Documentation
+  
+  ## Introduction
+  
+  Welcome to the API documentation for [Your API Name]. This document provides instructions on how to make requests to the API and covers available authentication methods.
+  
+  ## Authentication
+  
+  Before making requests to the API, you need to authenticate your application. [Your API Name] supports the following authentication methods:
+  
+  ### API Key
+  
+  To use API key authentication, include your API key in the request headers as follows:
+  
+  ```http
+  GET /api/endpoint
+  Host: api.example.com
+  Authorization: Bearer YOUR_API_KEY
+  
+}

readme.md

@@ -10,7 +10,7 @@
 [![Website](https://img.shields.io/badge/Website-Visit-blue)](https://www.usebruno.com)
 [![Download](https://img.shields.io/badge/Download-Latest-brightgreen)](https://www.usebruno.com/downloads)
 
-**English** | [Українська](docs/readme/readme_ua.md) | [Русский](docs/readme/readme_ru.md) | [Türkçe](docs/readme/readme_tr.md) | [Deutsch](docs/readme/readme_de.md) | [Français](docs/readme/readme_fr.md) | [Português (BR)](docs/readme/readme_pt_br.md) | [한국어](docs/readme/readme_kr.md) | [বাংলা](docs/readme/readme_bn.md) | [Español](docs/readme/readme_es.md) | [Italiano](docs/readme/readme_it.md) | [Română](docs/readme/readme_ro.md) | [Polski](docs/readme/readme_pl.md) | [简体中文](docs/readme/readme_cn.md) | [正體中文](docs/readme/readme_zhtw.md)
+**English** | [Українська](docs/readme/readme_ua.md) | [Русский](docs/readme/readme_ru.md) | [Türkçe](docs/readme/readme_tr.md) | [Deutsch](docs/readme/readme_de.md) | [Français](docs/readme/readme_fr.md) | [Português (BR)](docs/readme/readme_pt_br.md) | [한국어](docs/readme/readme_kr.md) | [বাংলা](docs/readme/readme_bn.md) | [Español](docs/readme/readme_es.md) | [Italiano](docs/readme/readme_it.md) | [Română](docs/readme/readme_ro.md) | [Polski](docs/readme/readme_pl.md) | [简体中文](docs/readme/readme_cn.md) | [正體中文](docs/readme/readme_zhtw.md) |  [العربية](docs/readme/readme_ar.md)
 
 Bruno is a new and innovative API client, aimed at revolutionizing the status quo represented by Postman and similar tools out there.