fix: stringify rawValue in brunoVarInfo (#6281)

* refactor: update DeprecationWarning component to accept children and enhance deprecation messages for Presets and Post Response Vars

* refactor: update DeprecationWarning component to use props for feature names and links, enhancing deprecation messages across various components

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

@@ -9,7 +9,6 @@ import DeprecationWarning from 'components/DeprecationWarning';
 const PresetsSettings = ({ collection }) => {
   const dispatch = useDispatch();
   const initialPresets = { requestType: 'http', requestUrl: '' };
-  const deprecationWarningMessage = 'Presets is deprecated and will be removed in v3.0.0';
 
   // Get presets from draft.brunoConfig if it exists, otherwise from brunoConfig
   const currentPresets = collection.draft?.brunoConfig
@@ -37,7 +36,7 @@ const PresetsSettings = ({ collection }) => {
 
   return (
     <StyledWrapper className="h-full w-full">
-      <DeprecationWarning message={deprecationWarningMessage} />
+      <DeprecationWarning featureName="Presets" learnMoreUrl="https://github.com/usebruno/bruno/discussions/6234" />
       <div className="text-xs mb-4 mt-4 text-muted">
         These presets will be used as the default values for new requests in this collection.
       </div>

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

@@ -4,14 +4,12 @@ import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
-import DeprecationWarning from 'components/DeprecationWarning';
 
 const Vars = ({ collection }) => {
   const dispatch = useDispatch();
   const requestVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
   const responseVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.res', []) : get(collection, 'root.request.vars.res', []);
   const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
-  const deprecationWarningMessage = 'Post response vars is deprecated and will be removed in v3.0.0';
 
   return (
     <StyledWrapper className="w-full flex flex-col">
@@ -21,7 +19,6 @@ const Vars = ({ collection }) => {
       </div>
       <div className="flex-1">
         <div className="mt-1 mb-1 title text-xs">Post Response</div>
-        <DeprecationWarning message={deprecationWarningMessage} />
         <VarsTable collection={collection} vars={responseVars} varType="response" />
       </div>
       <div className="mt-6">

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

@@ -26,6 +26,15 @@ const StyledWrapper = styled.div`
       font-size: 14px;
       line-height: 17px;
       color: ${(props) => props.theme.deprecationWarning.text};
+
+      a {
+        color: ${(props) => props.theme.textLink};
+        text-decoration: underline;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
     }
   }
 `;

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

@@ -2,12 +2,16 @@ import React from 'react';
 import IconAlertTriangleFilled from '../Icons/IconAlertTriangleFilled';
 import StyledWrapper from './StyledWrapper';
 
-const DeprecationWarning = ({ message }) => {
+const DeprecationWarning = ({ featureName, learnMoreUrl }) => {
   return (
     <StyledWrapper>
       <div className="deprecation-warning">
         <IconAlertTriangleFilled className="warning-icon" size={16} />
-        <span className="warning-text">{message}</span>
+        <span className="warning-text">
+          {featureName} will be removed in <strong>v3.0.0</strong>. They are deprecated and will no longer be supported. Learn more in{' '}
+          <a href={learnMoreUrl} target="_blank" rel="noreferrer">this post</a> or contact us at{' '}
+          <a href="mailto:support@usebruno.com">support@usebruno.com</a> with questions.
+        </span>
       </div>
     </StyledWrapper>
   );

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

@@ -4,14 +4,12 @@ import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
-import DeprecationWarning from 'components/DeprecationWarning';
 
 const Vars = ({ collection, folder }) => {
   const dispatch = useDispatch();
   const requestVars = folder.draft ? get(folder, 'draft.request.vars.req', []) : get(folder, 'root.request.vars.req', []);
   const responseVars = folder.draft ? get(folder, 'draft.request.vars.res', []) : get(folder, 'root.request.vars.res', []);
   const handleSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
-  const deprecationWarningMessage = 'Post response vars is deprecated and will be removed in v3.0.0';
 
   return (
     <StyledWrapper className="w-full flex flex-col">
@@ -21,7 +19,6 @@ const Vars = ({ collection, folder }) => {
       </div>
       <div className="flex-1">
         <div className="mt-1 mb-1 title text-xs">Post Response</div>
-        <DeprecationWarning message={deprecationWarningMessage} />
         <VarsTable folder={folder} collection={collection} vars={responseVars} varType="response" />
       </div>
       <div className="mt-6">

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

@@ -2,12 +2,10 @@ import React from 'react';
 import get from 'lodash/get';
 import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
-import DeprecationWarning from 'components/DeprecationWarning';
 
 const Vars = ({ item, collection }) => {
   const requestVars = item.draft ? get(item, 'draft.request.vars.req') : get(item, 'request.vars.req');
   const responseVars = item.draft ? get(item, 'draft.request.vars.res') : get(item, 'request.vars.res');
-  const deprecationWarningMessage = 'Post response vars is deprecated and will be removed in v3.0.0';
 
   return (
     <StyledWrapper className="w-full flex flex-col">
@@ -17,7 +15,6 @@ const Vars = ({ item, collection }) => {
       </div>
       <div>
         <div className="mt-1 mb-1 title text-xs">Post Response</div>
-        <DeprecationWarning message={deprecationWarningMessage} />
         <VarsTable item={item} collection={collection} vars={responseVars} varType="response" />
       </div>
     </StyledWrapper>

packages/bruno-app/src/hooks/useTabPaneBoundaries/index.js

@@ -2,7 +2,7 @@ import find from 'lodash/find';
 import { updateRequestPaneTabHeight, updateRequestPaneTabWidth } from 'providers/ReduxStore/slices/tabs';
 import { useDispatch, useSelector } from 'react-redux';
 
-const MIN_TOP_PANE_HEIGHT = 150;
+const MIN_TOP_PANE_HEIGHT = 380;
 
 export function useTabPaneBoundaries(activeTabUid) {
   const DEFAULT_PANE_WIDTH_DIVISOR = 2.2;
@@ -12,7 +12,7 @@ export function useTabPaneBoundaries(activeTabUid) {
   const screenWidth = useSelector((state) => state.app.screenWidth);
   let asideWidth = useSelector((state) => state.app.leftSidebarWidth);
   const left = focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / DEFAULT_PANE_WIDTH_DIVISOR;
-  const top = focusedTab?.requestPaneHeight;
+  const top = focusedTab?.requestPaneHeight || MIN_TOP_PANE_HEIGHT;
   const dispatch = useDispatch();
 
   return {

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

@@ -308,7 +308,7 @@ export const renderVarInfo = (token, options) => {
 
     // Create CodeMirror instance
     const cmEditor = CodeMirror(editorContainer, {
-      value: rawValue, // Use raw value (e.g., {{echo-host}} not resolved value)
+      value: typeof rawValue === 'string' ? rawValue : String(rawValue), // Use raw value (e.g., {{echo-host}} not resolved value) (ensure it's always a string for CodeMirror) #usebruno/bruno/#6265
       mode: 'brunovariables',
       theme: cmTheme,
       lineWrapping: true,

packages/bruno-electron/src/ipc/network/cert-utils.js

@@ -42,10 +42,17 @@ const getCertsAndProxyConfig = async ({
   httpsAgentRequestFields['ca'] = caCertificates || [];
 
   const { promptVariables } = collection;
+  const collectionVariables = request.collectionVariables || {};
+  const folderVariables = request.folderVariables || {};
+  const requestVariables = request.requestVariables || {};
+
   const brunoConfig = getBrunoConfig(collectionUid, collection);
   const interpolationOptions = {
     globalEnvironmentVariables,
+    collectionVariables,
     envVars,
+    folderVariables,
+    requestVariables,
     runtimeVariables,
     promptVariables,
     processEnvVars

packages/bruno-electron/src/ipc/network/grpc-event-handlers.js

@@ -35,15 +35,18 @@ const registerGrpcEventHandlers = (window) => {
     
     try {
       const requestCopy = cloneDeep(request);
-    
-
       const preparedRequest = await prepareGrpcRequest(requestCopy, collection, environment, runtimeVariables, {});
 
+      const protocolRegex = /^([-+\w]{1,25})(:?\/\/|:)/;
+      if (!protocolRegex.test(preparedRequest.url)) {
+        preparedRequest.url = `http://${preparedRequest.url}`;
+      }
+
       // Get certificates and proxy configuration
       const certsAndProxyConfig = await getCertsAndProxyConfig({
         collectionUid: collection.uid,
         collection,
-        request: requestCopy.request,
+        request: preparedRequest,
         envVars: preparedRequest.envVars,
         runtimeVariables,
         processEnvVars: preparedRequest.processEnvVars,
@@ -171,12 +174,17 @@ const registerGrpcEventHandlers = (window) => {
     try {
       const requestCopy = cloneDeep(request);
       const preparedRequest = await prepareGrpcRequest(requestCopy, collection, environment, runtimeVariables);
-      
+
+      const protocolRegex = /^([-+\w]{1,25})(:?\/\/|:)/;
+      if (!protocolRegex.test(preparedRequest.url)) {
+        preparedRequest.url = `http://${preparedRequest.url}`;
+      }
+
       // Get certificates and proxy configuration
       const certsAndProxyConfig = await getCertsAndProxyConfig({
         collectionUid: collection.uid,
         collection,
-        request: requestCopy.request,
+        request: preparedRequest,
         envVars: preparedRequest.envVars,
         runtimeVariables,
         processEnvVars: preparedRequest.processEnvVars,
@@ -279,6 +287,12 @@ const registerGrpcEventHandlers = (window) => {
     try {
       const requestCopy = cloneDeep(request);
       const preparedRequest = await prepareGrpcRequest(requestCopy, collection, environment, runtimeVariables, {});
+
+      const protocolRegex = /^([-+\w]{1,25})(:?\/\/|:)/;
+      if (!protocolRegex.test(preparedRequest.url)) {
+        preparedRequest.url = `http://${preparedRequest.url}`;
+      }
+
       const interpolationOptions = {
         envVars: preparedRequest.envVars,
         runtimeVariables,

packages/bruno-electron/src/ipc/network/index.js

@@ -112,7 +112,8 @@ const configureRequest = async (
   globalEnvironmentVariables
 ) => {
   const protocolRegex = /^([-+\w]{1,25})(:?\/\/|:)/;
-  if (!protocolRegex.test(request.url)) {
+  const hasVariables = request.url.startsWith('{{');
+  if (!hasVariables && !protocolRegex.test(request.url)) {
     request.url = `http://${request.url}`;
   }
 

packages/bruno-electron/src/ipc/network/interpolate-string.js

@@ -1,7 +1,16 @@
 const { forOwn, cloneDeep } = require('lodash');
 const { interpolate } = require('@usebruno/common');
 
-const interpolateString = (str, { globalEnvironmentVariables, envVars, runtimeVariables, processEnvVars, promptVariables }) => {
+const interpolateString = (str, {
+  globalEnvironmentVariables,
+  collectionVariables,
+  envVars,
+  folderVariables,
+  requestVariables,
+  runtimeVariables,
+  processEnvVars,
+  promptVariables
+}) => {
   if (!str || !str.length || typeof str !== 'string') {
     return str;
   }
@@ -9,6 +18,9 @@ const interpolateString = (str, { globalEnvironmentVariables, envVars, runtimeVa
   processEnvVars = processEnvVars || {};
   runtimeVariables = runtimeVariables || {};
   globalEnvironmentVariables = globalEnvironmentVariables || {};
+  collectionVariables = collectionVariables || {};
+  folderVariables = folderVariables || {};
+  requestVariables = requestVariables || {};
   promptVariables = promptVariables || {};
 
   // we clone envVars because we don't want to modify the original object
@@ -29,7 +41,10 @@ const interpolateString = (str, { globalEnvironmentVariables, envVars, runtimeVa
   // runtimeVariables take precedence over envVars
   const combinedVars = {
     ...globalEnvironmentVariables,
+    ...collectionVariables,
     ...envVars,
+    ...folderVariables,
+    ...requestVariables,
     ...runtimeVariables,
     ...promptVariables,
     process: {