diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
index 6d62f38c0..b6f40be58 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
@@ -49,11 +49,11 @@ export const useInitialResponseFormat = (dataBuffer, headers) => {
// Wait until both content types are available
if (detectedContentType === null || contentType === undefined) {
- return { initialFormat: null, initialTab: null };
+ return { initialFormat: null, initialTab: null, contentType: contentType };
}
const initial = getDefaultResponseFormat(contentType);
- return { initialFormat: initial.format, initialTab: initial.tab };
+ return { initialFormat: initial.format, initialTab: initial.tab, contentType: contentType };
}, [dataBuffer, headers]);
};
@@ -66,6 +66,7 @@ export const useResponsePreviewFormatOptions = (dataBuffer, headers) => {
const byteFormatTypes = ['image', 'video', 'audio', 'pdf', 'zip'];
const isByteFormatType = (contentType) => {
+ if (contentType.toLowerCase().includes('svg')) return false; // SVG is text-based
return byteFormatTypes.some((type) => contentType.includes(type));
};
@@ -203,7 +204,7 @@ const QueryResult = ({
dataBuffer={dataBuffer}
formattedData={formattedData}
item={item}
- contentType={contentType}
+ contentType={detectedContentType ?? contentType}
previewMode={previewMode}
codeMirrorMode={codeMirrorMode}
collection={collection}
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
index 19098970a..142b45b7d 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
@@ -53,6 +53,17 @@ const StyledWrapper = styled.div`
align-items: center;
margin-left: 10px;
}
+
+ div.tabs .action-icon {
+ color: ${(props) => props.theme.dropdown.iconColor};
+ opacity: 0.8;
+
+ &:hover {
+ color: ${(props) => props.theme.text};
+ opacity: 1;
+ background-color: ${(props) => props.theme.workspace.button.bg};
+ }
+ }
`;
export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js
index a0e8c744e..00175777c 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js
@@ -1,7 +1,9 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
- overflow-y: auto;
+ flex: 1;
+ min-height: 0;
+ height: 100%;
.empty-state {
padding: 1rem;
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
index 233be1988..e30e102b1 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
@@ -1,13 +1,11 @@
-import React from 'react';
+import React, { useState, useRef, useEffect, useCallback, memo } from 'react';
import classnames from 'classnames';
import StyledWrapper from './StyledWrapper';
import { IconExclamationCircle, IconChevronRight, IconInfoCircle, IconChevronDown, IconArrowUpRight, IconArrowDownLeft } from '@tabler/icons';
import CodeEditor from 'components/CodeEditor/index';
import { useTheme } from 'providers/Theme';
-import { useState } from 'react';
import { useSelector } from 'react-redux';
-import { useRef } from 'react';
-import { useEffect } from 'react';
+import { Virtuoso } from 'react-virtuoso';
const getContentMeta = (content) => {
if (typeof content === 'object') {
@@ -61,8 +59,7 @@ const TypeIcon = ({ type }) => {
}[type];
};
-const WSMessageItem = ({ message, inFocus }) => {
- const [isOpen, setIsOpen] = useState(false);
+const WSMessageItem = memo(({ message, isOpen, onToggle }) => {
const [showHex, setShowHex] = useState(false);
const preferences = useSelector((state) => state.app.preferences);
const { displayedTheme } = useTheme();
@@ -82,21 +79,23 @@ const WSMessageItem = ({ message, inFocus }) => {
const dateDiff = Date.now() - new Date(message.timestamp).getTime();
if (dateDiff < 1000 * 10) {
setIsNew(true);
- setTimeout(() => {
+ const timer = setTimeout(() => {
notified.current = true;
setIsNew(false);
}, 2500);
+ return () => clearTimeout(timer);
}
- }, [message]);
+ }, [message.timestamp]);
const canOpenMessage = !isInfo && !isError;
+ const handleToggle = () => {
+ if (!canOpenMessage) return;
+ onToggle?.(message.timestamp);
+ };
+
return (
{
- if (!node) return;
- if (inFocus) node.scrollIntoView();
- }}
className={classnames('ws-message flex flex-col p-2', {
'ws-incoming': isIncoming,
'ws-outgoing': isOutgoing,
@@ -111,10 +110,7 @@ const WSMessageItem = ({ message, inFocus }) => {
'cursor-pointer': canOpenMessage,
'cursor-not-allowed': !canOpenMessage
})}
- onClick={(e) => {
- if (!canOpenMessage) return;
- setIsOpen(!isOpen);
- }}
+ onClick={handleToggle}
>
@@ -176,23 +172,87 @@ const WSMessageItem = ({ message, inFocus }) => {
)}
);
-};
+});
+
+const WSMessagesList = ({ messages = [] }) => {
+ const virtuosoRef = useRef(null);
+ const [scrollerElement, setScrollerElement] = useState(null);
+ const [openMessages, setOpenMessages] = useState(new Set());
+ const userScrolledAwayRef = useRef(false);
+
+ // Toggle message open/closed state by timestamp
+ const handleMessageToggle = useCallback((timestamp) => {
+ setOpenMessages((prev) => {
+ const next = new Set(prev);
+ if (next.has(timestamp)) {
+ next.delete(timestamp);
+ } else {
+ next.add(timestamp);
+ }
+ return next;
+ });
+ }, []);
+
+ useEffect(() => {
+ if (!scrollerElement) return;
+
+ const handleWheel = (e) => {
+ // deltaY < 0 means scrolling up
+ if (e.deltaY < 0) {
+ userScrolledAwayRef.current = true;
+ }
+ };
+
+ scrollerElement.addEventListener('wheel', handleWheel, { passive: true });
+
+ return () => {
+ scrollerElement.removeEventListener('wheel', handleWheel);
+ };
+ }, [scrollerElement]);
+
+ const handleAtBottomStateChange = useCallback((atBottom) => {
+ if (atBottom) {
+ // User scrolled back to bottom, re-enable auto-scroll
+ userScrolledAwayRef.current = false;
+ }
+ }, []);
+
+ const followOutput = useCallback((isAtBottom) => {
+ // Don't auto-scroll if user has scrolled away or has messages open
+ if (userScrolledAwayRef.current || openMessages.size > 0) {
+ return false;
+ }
+ if (isAtBottom) {
+ return 'smooth';
+ }
+ return false;
+ }, [openMessages.size]);
+
+ const renderItem = useCallback((_, msg) => {
+ const isOpen = openMessages.has(msg.timestamp);
+ return
;
+ }, [openMessages, handleMessageToggle]);
+
+ const computeItemKey = useCallback((_, msg) => {
+ return msg.seq ?? msg.timestamp;
+ }, []);
-const WSMessagesList = ({ order = -1, messages = [] }) => {
if (!messages.length) {
return
No messages yet.
;
}
- // sort based on order, seq was newly added and might be missing in some cases and when missing,
- // the timestamp will be used instead
- const ordered = messages.toSorted((x, y) => ((x.seq ?? x.timestamp) - (y.seq ?? y.timestamp)) * (-order));
-
return (
- {ordered.map((msg, idx, src) => {
- const inFocus = order === -1 ? src.length - 1 === idx : idx === 0;
- return ;
- })}
+
);
};
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js
index 28cc50efc..5722a4166 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/index.js
@@ -13,11 +13,10 @@ import StyledWrapper from './StyledWrapper';
import ResponseLayoutToggle from '../ResponseLayoutToggle';
import ResponsiveTabs from 'ui/ResponsiveTabs';
import WSMessagesList from './WSMessagesList';
-import WSResponseSortOrder from './WSResponseSortOrder';
import WSResponseHeaders from './WSResponseHeaders';
const WSResult = ({ response }) => {
- return
;
+ return
;
};
const WSResponsePane = ({ item, collection }) => {
@@ -116,7 +115,6 @@ const WSResponsePane = ({ item, collection }) => {
<>
-
{
const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
// Initialize format and tab only once when data loads.
- const { initialFormat, initialTab } = useInitialResponseFormat(response?.dataBuffer, response?.headers);
+ const { initialFormat, initialTab, contentType } = useInitialResponseFormat(response?.dataBuffer, response?.headers);
const previewFormatOptions = useResponsePreviewFormatOptions(response?.dataBuffer, response?.headers);
+ // Track previous response headers to detect when content-type changes
+ const previousContentRef = useRef(contentType);
+
const persistedFormat = focusedTab?.responseFormat;
const persistedViewTab = focusedTab?.responseViewTab;
@@ -56,13 +59,19 @@ const ResponsePane = ({ item, collection }) => {
if (!focusedTab || initialFormat === null || initialTab === null) {
return;
}
- if (persistedFormat === null) {
+
+ // Check if response headers (content-type) changed using deep comparison
+ const contentTypeChanged = contentType !== previousContentRef.current;
+ if (contentTypeChanged) {
+ previousContentRef.current = contentType;
+ }
+ if (contentTypeChanged || persistedFormat === null) {
dispatch(updateResponseFormat({ uid: item.uid, responseFormat: initialFormat }));
}
- if (persistedViewTab === null) {
+ if (contentTypeChanged || persistedViewTab === null) {
dispatch(updateResponseViewTab({ uid: item.uid, responseViewTab: initialTab }));
}
- }, [initialFormat, initialTab, persistedFormat, persistedViewTab, focusedTab, item.uid, dispatch]);
+ }, [contentType, initialFormat, initialTab, persistedFormat, persistedViewTab, focusedTab, item.uid, dispatch]);
const handleFormatChange = useCallback((newFormat) => {
dispatch(updateResponseFormat({ uid: item.uid, responseFormat: newFormat }));
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js
index 66c0fcd62..6dbb69064 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js
@@ -20,7 +20,14 @@ const CloneCollection = ({ onClose, collectionUid }) => {
const [isEditing, toggleEditing] = useState(false);
const collection = useSelector((state) => findCollectionByUid(state.collections.collections, collectionUid));
const preferences = useSelector((state) => state.app.preferences);
- const defaultLocation = get(preferences, 'general.defaultCollectionLocation', '');
+ const workspaces = useSelector((state) => state.workspaces?.workspaces || []);
+ const workspaceUid = useSelector((state) => state.workspaces?.activeWorkspaceUid);
+ const activeWorkspace = workspaces.find((w) => w.uid === workspaceUid);
+ const isDefaultWorkspace = activeWorkspace?.type === 'default';
+
+ const defaultLocation = isDefaultWorkspace
+ ? get(preferences, 'general.defaultCollectionLocation', '')
+ : (activeWorkspace?.pathname ? `${activeWorkspace.pathname}/collections` : '');
const { name } = collection;
const formik = useFormik({
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
index d7372784a..660d7ea91 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/index.js
@@ -110,12 +110,14 @@ const GenerateCodeItem = ({ collectionUid, item, onClose, isExample = false, exa
// Resolve auth inheritance
const resolvedRequest = resolveInheritedAuth(item, collection);
- // Create the final item for code generation
+ // requestData.request contains either the normal request or example request data.
+ // We explicitly set auth from resolvedRequest to ensure inherited auth
+ // (from folders/collection) is resolved correctly in generated code.
const finalItem = {
...item,
request: {
- ...resolvedRequest,
...requestData.request,
+ auth: resolvedRequest.auth,
url: finalUrl
}
};
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/snippet-generator.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/snippet-generator.js
index 03c4cd973..f52faf118 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/snippet-generator.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/snippet-generator.js
@@ -20,7 +20,7 @@ const generateSnippet = ({ language, item, collection, shouldInterpolate = false
// Add auth headers if needed
if (request.auth && request.auth.mode !== 'none') {
const collectionAuth = collection?.draft?.root ? get(collection, 'draft.root.request.auth', null) : get(collection, 'root.request.auth', null);
- const authHeaders = getAuthHeaders(collectionAuth, request.auth);
+ const authHeaders = getAuthHeaders(collectionAuth, request.auth, collection, item);
headers = [...headers, ...authHeaders];
}
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/snippet-generator.spec.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/snippet-generator.spec.js
index e20f35a22..0946ce2bc 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/snippet-generator.spec.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/utils/snippet-generator.spec.js
@@ -554,3 +554,223 @@ describe('generateSnippet with edge-case bodies', () => {
expect(result).toMatch(/^curl -X POST/);
});
});
+
+describe('generateSnippet with OAuth2 authentication', () => {
+ const language = { target: 'shell', client: 'curl' };
+ const baseCollection = { root: { request: { auth: { mode: 'none' }, headers: [] } } };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ // Mock getAuthHeaders to return OAuth2 headers based on the auth config
+ const authUtils = require('utils/codegenerator/auth');
+ authUtils.getAuthHeaders.mockImplementation((collectionRootAuth, requestAuth, collection = null, item = null) => {
+ if (requestAuth?.mode === 'oauth2') {
+ const oauth2Config = requestAuth.oauth2 || {};
+ const tokenPlacement = oauth2Config.tokenPlacement || 'header';
+ // Use the actual value from config, defaulting to 'Bearer' only if undefined
+ // Empty string should be preserved to test no-prefix scenarios
+ const tokenHeaderPrefix = oauth2Config.tokenHeaderPrefix !== undefined
+ ? oauth2Config.tokenHeaderPrefix
+ : 'Bearer';
+ let accessToken = oauth2Config.accessToken || '';
+
+ // If collection and item are provided, try to look up stored credentials
+ if (collection && item && collection.oauth2Credentials) {
+ const grantType = oauth2Config.grantType || '';
+ const urlToLookup = grantType === 'implicit'
+ ? oauth2Config.authorizationUrl || ''
+ : oauth2Config.accessTokenUrl || '';
+ const credentialsId = oauth2Config.credentialsId || 'credentials';
+ const collectionUid = collection.uid;
+
+ if (urlToLookup && collectionUid) {
+ // Look up stored credentials (simplified - assumes URL is already interpolated in test data)
+ const credentialsData = collection.oauth2Credentials.find(
+ (creds) =>
+ creds?.url === urlToLookup
+ && creds?.collectionUid === collectionUid
+ && creds?.credentialsId === credentialsId
+ );
+
+ if (credentialsData?.credentials?.access_token) {
+ accessToken = credentialsData.credentials.access_token;
+ }
+ }
+ }
+
+ if (tokenPlacement === 'header') {
+ // Always trim the final result for consistent formatting
+ const headerValue = tokenHeaderPrefix
+ ? `${tokenHeaderPrefix} ${accessToken}`.trim()
+ : accessToken.trim();
+ return [
+ {
+ enabled: true,
+ name: 'Authorization',
+ value: headerValue
+ }
+ ];
+ }
+ }
+ return [];
+ });
+ });
+
+ it('should include OAuth2 Bearer token in Authorization header when tokenPlacement is header', () => {
+ const item = {
+ uid: 'oauth-req',
+ request: {
+ method: 'GET',
+ url: 'https://api.example.com/users',
+ headers: [],
+ auth: {
+ mode: 'oauth2',
+ oauth2: {
+ grantType: 'client_credentials',
+ tokenPlacement: 'header',
+ tokenHeaderPrefix: 'Bearer',
+ accessToken: 'test-access-token-123'
+ }
+ }
+ }
+ };
+
+ generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+
+ const harUtils = require('utils/codegenerator/har');
+ const harCall = harUtils.buildHarRequest.mock.calls[0][0];
+ expect(harCall.headers).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ name: 'Authorization',
+ value: 'Bearer test-access-token-123'
+ })
+ ])
+ );
+ });
+
+ it('should use custom tokenHeaderPrefix when provided', () => {
+ const item = {
+ uid: 'oauth-req-custom',
+ request: {
+ method: 'GET',
+ url: 'https://api.example.com/users',
+ headers: [],
+ auth: {
+ mode: 'oauth2',
+ oauth2: {
+ grantType: 'client_credentials',
+ tokenPlacement: 'header',
+ tokenHeaderPrefix: 'OAuth',
+ accessToken: 'custom-token-456'
+ }
+ }
+ }
+ };
+
+ generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+
+ const harUtils = require('utils/codegenerator/har');
+ const harCall = harUtils.buildHarRequest.mock.calls[0][0];
+ expect(harCall.headers).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ name: 'Authorization',
+ value: 'OAuth custom-token-456'
+ })
+ ])
+ );
+ });
+
+ it('should not include Authorization header when tokenPlacement is url', () => {
+ const item = {
+ uid: 'oauth-req-url',
+ request: {
+ method: 'GET',
+ url: 'https://api.example.com/users',
+ headers: [],
+ auth: {
+ mode: 'oauth2',
+ oauth2: {
+ grantType: 'client_credentials',
+ tokenPlacement: 'url',
+ tokenQueryKey: 'access_token',
+ accessToken: 'token-in-url'
+ }
+ }
+ }
+ };
+
+ generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+
+ const harUtils = require('utils/codegenerator/har');
+ const harCall = harUtils.buildHarRequest.mock.calls[0][0];
+ const authHeader = harCall.headers.find((h) => h.name === 'Authorization');
+ expect(authHeader).toBeUndefined();
+ });
+
+ it('should use placeholder when accessToken is not available', () => {
+ const item = {
+ uid: 'oauth-req-placeholder',
+ request: {
+ method: 'GET',
+ url: 'https://api.example.com/users',
+ headers: [],
+ auth: {
+ mode: 'oauth2',
+ oauth2: {
+ grantType: 'client_credentials',
+ tokenPlacement: 'header',
+ tokenHeaderPrefix: 'Bearer'
+ }
+ }
+ }
+ };
+
+ generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+
+ const harUtils = require('utils/codegenerator/har');
+ const harCall = harUtils.buildHarRequest.mock.calls[0][0];
+ expect(harCall.headers).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ name: 'Authorization',
+ value: 'Bearer '
+ })
+ ])
+ );
+ });
+
+ it('should handle empty tokenHeaderPrefix', () => {
+ const item = {
+ uid: 'oauth-req-no-prefix',
+ request: {
+ method: 'GET',
+ url: 'https://api.example.com/users',
+ headers: [],
+ auth: {
+ mode: 'oauth2',
+ oauth2: {
+ grantType: 'client_credentials',
+ tokenPlacement: 'header',
+ tokenHeaderPrefix: '',
+ accessToken: 'token-without-prefix'
+ }
+ }
+ }
+ };
+
+ generateSnippet({ language, item, collection: baseCollection, shouldInterpolate: false });
+
+ const harUtils = require('utils/codegenerator/har');
+ const harCall = harUtils.buildHarRequest.mock.calls[0][0];
+ expect(harCall.headers).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ name: 'Authorization',
+ value: 'token-without-prefix'
+ })
+ ])
+ );
+ });
+});
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
index 95ea0bae4..73a741948 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -1,4 +1,5 @@
import React, { useCallback, useRef } from 'react';
+import { TableVirtuoso } from 'react-virtuoso';
import cloneDeep from 'lodash/cloneDeep';
import { IconTrash, IconAlertCircle, IconInfoCircle } from '@tabler/icons';
import { useTheme } from 'providers/Theme';
@@ -19,6 +20,14 @@ import { Tooltip } from 'react-tooltip';
import { getGlobalEnvironmentVariables } from 'utils/collections';
import Button from 'ui/Button';
+const MIN_H = 35 * 2;
+
+const TableRow = React.memo(({ children, item }) => {children}
, (prevProps, nextProps) => {
+ const prevUid = prevProps?.item?.uid;
+ const nextUid = nextProps?.item?.uid;
+ return prevUid === nextUid && prevProps.children === nextProps.children;
+});
+
const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentVariables, collection }) => {
const dispatch = useDispatch();
const { storedTheme } = useTheme();
@@ -28,6 +37,12 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
const hasDraftForThisEnv = globalEnvironmentDraft?.environmentUid === environment.uid;
+ const [tableHeight, setTableHeight] = React.useState(MIN_H);
+
+ const handleTotalHeightChanged = React.useCallback((h) => {
+ setTableHeight(h);
+ }, []);
+
// Track environment changes for draft restoration
const prevEnvUidRef = React.useRef(null);
const mountedRef = React.useRef(false);
@@ -322,109 +337,108 @@ const EnvironmentVariables = ({ environment, setIsModified, originalEnvironmentV
return (
-
+ return (
+ <>
+
+ {!isLastEmptyRow && (
+
+ )}
+ |
+
+
+ handleNameChange(index, e)}
+ onBlur={() => handleNameBlur(index)}
+ onKeyDown={(e) => handleNameKeyDown(index, e)}
+ />
+
+
+ |
+
+
+ formik.setFieldValue(`${index}.value`, newValue, true)}
+ onSave={handleSave}
+ />
+
+ {typeof variable.value !== 'string' && (
+
+
+
+
+ )}
+ |
+
+ {!isLastEmptyRow && (
+
+ )}
+ |
+
+ {!isLastEmptyRow && (
+
+ )}
+ |
+
+ );
+ }}
+ />
diff --git a/packages/bruno-app/src/components/WorkspaceHome/index.js b/packages/bruno-app/src/components/WorkspaceHome/index.js
index db27824b0..4ec91aefe 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/index.js
@@ -11,6 +11,8 @@ import WorkspaceTabs from 'components/WorkspaceTabs';
import StyledWrapper from './StyledWrapper';
import Dropdown from 'components/Dropdown';
import { getRevealInFolderLabel } from 'utils/common/platform';
+import { getWorkspaceDisplayName } from 'components/AppTitleBar';
+import classNames from 'classnames';
const WorkspaceHome = () => {
const dispatch = useDispatch();
@@ -208,7 +210,7 @@ const WorkspaceHome = () => {
) : (
- {activeWorkspace.name}
+ {getWorkspaceDisplayName(activeWorkspace.name)}
)}
diff --git a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js b/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js
index fdb32d86d..d28517238 100644
--- a/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js
+++ b/packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js
@@ -4,10 +4,11 @@ import filter from 'lodash/filter';
import groupBy from 'lodash/groupBy';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
-import { findCollectionByUid, flattenItems, isItemARequest, hasRequestChanges } from 'utils/collections';
+import { findCollectionByUid, flattenItems, isItemARequest, hasRequestChanges, findEnvironmentInCollection } from 'utils/collections';
import { pluralizeWord } from 'utils/common';
import { completeQuitFlow } from 'providers/ReduxStore/slices/app';
-import { saveMultipleRequests, saveMultipleCollections, saveMultipleFolders } from 'providers/ReduxStore/slices/collections/actions';
+import { saveMultipleRequests, saveMultipleCollections, saveMultipleFolders, saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
import { IconAlertTriangle } from '@tabler/icons';
import Modal from 'components/Modal';
import Button from 'ui/Button';
@@ -16,12 +17,15 @@ const SaveRequestsModal = ({ onClose }) => {
const MAX_UNSAVED_ITEMS_TO_SHOW = 5;
const collections = useSelector((state) => state.collections.collections);
const tabs = useSelector((state) => state.tabs.tabs);
+ const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);
+ const globalEnvironmentDraft = useSelector((state) => state.globalEnvironments.globalEnvironmentDraft);
const dispatch = useDispatch();
const allDrafts = useMemo(() => {
const requestDrafts = [];
const collectionDrafts = [];
const folderDrafts = [];
+ const environmentDrafts = [];
const tabsByCollection = groupBy(tabs, (t) => t.collectionUid);
Object.keys(tabsByCollection).forEach((collectionUid) => {
@@ -36,6 +40,21 @@ const SaveRequestsModal = ({ onClose }) => {
});
}
+ // Check for collection environment draft
+ if (collection.environmentsDraft) {
+ const { environmentUid, variables } = collection.environmentsDraft;
+ const environment = findEnvironmentInCollection(collection, environmentUid);
+ if (environment && variables) {
+ environmentDrafts.push({
+ type: 'collection-environment',
+ name: environment.name,
+ environmentUid,
+ variables,
+ collectionUid: collectionUid
+ });
+ }
+ }
+
// Check for request and folder drafts
const items = flattenItems(collection.items);
@@ -62,8 +81,22 @@ const SaveRequestsModal = ({ onClose }) => {
}
});
- return [...collectionDrafts, ...folderDrafts, ...requestDrafts];
- }, [collections, tabs]);
+ // Check for global environment draft
+ if (globalEnvironmentDraft) {
+ const { environmentUid, variables } = globalEnvironmentDraft;
+ const environment = globalEnvironments?.find((env) => env.uid === environmentUid);
+ if (environment && variables) {
+ environmentDrafts.push({
+ type: 'global-environment',
+ name: environment.name,
+ environmentUid,
+ variables
+ });
+ }
+ }
+
+ return [...collectionDrafts, ...folderDrafts, ...environmentDrafts, ...requestDrafts];
+ }, [collections, tabs, globalEnvironments, globalEnvironmentDraft]);
const totalDraftsCount = allDrafts.length;
@@ -84,6 +117,8 @@ const SaveRequestsModal = ({ onClose }) => {
const collectionDrafts = allDrafts.filter((d) => d.type === 'collection');
const folderDrafts = allDrafts.filter((d) => d.type === 'folder');
const requestDrafts = allDrafts.filter((d) => d.type === 'request');
+ const collectionEnvironmentDrafts = allDrafts.filter((d) => d.type === 'collection-environment');
+ const globalEnvironmentDrafts = allDrafts.filter((d) => d.type === 'global-environment');
// Save all collection drafts
if (collectionDrafts.length > 0) {
@@ -100,6 +135,16 @@ const SaveRequestsModal = ({ onClose }) => {
await dispatch(saveMultipleRequests(requestDrafts));
}
+ // Save all collection environment drafts
+ for (const draft of collectionEnvironmentDrafts) {
+ await dispatch(saveEnvironment(draft.variables, draft.environmentUid, draft.collectionUid));
+ }
+
+ // Save all global environment drafts
+ for (const draft of globalEnvironmentDrafts) {
+ await dispatch(saveGlobalEnvironment({ variables: draft.variables, environmentUid: draft.environmentUid }));
+ }
+
dispatch(completeQuitFlow());
onClose();
} catch (error) {
@@ -134,12 +179,23 @@ const SaveRequestsModal = ({ onClose }) => {
{allDrafts.slice(0, MAX_UNSAVED_ITEMS_TO_SHOW).map((item, index) => {
- const prefix
- = item.type === 'collection'
- ? 'Collection: '
- : item.type === 'folder'
- ? 'Folder: '
- : 'Request: ';
+ let prefix;
+ switch (item.type) {
+ case 'collection':
+ prefix = 'Collection: ';
+ break;
+ case 'folder':
+ prefix = 'Folder: ';
+ break;
+ case 'collection-environment':
+ prefix = 'Collection Environment: ';
+ break;
+ case 'global-environment':
+ prefix = 'Global Environment: ';
+ break;
+ default:
+ prefix = 'Request: ';
+ }
return (
-
{prefix}
diff --git a/packages/bruno-app/src/providers/App/useIpcEvents.js b/packages/bruno-app/src/providers/App/useIpcEvents.js
index da9c55bf6..096e13244 100644
--- a/packages/bruno-app/src/providers/App/useIpcEvents.js
+++ b/packages/bruno-app/src/providers/App/useIpcEvents.js
@@ -15,6 +15,7 @@ import {
collectionUnlinkEnvFileEvent,
collectionUnlinkFileEvent,
processEnvUpdateEvent,
+ workspaceEnvUpdateEvent,
requestCancelled,
runFolderEvent,
runRequestEvent,
@@ -23,6 +24,7 @@ import {
} from 'providers/ReduxStore/slices/collections';
import { collectionAddEnvFileEvent, openCollectionEvent, hydrateCollectionWithUiStateSnapshot, mergeAndPersistEnvironment } from 'providers/ReduxStore/slices/collections/actions';
import { workspaceOpenedEvent, workspaceConfigUpdatedEvent } from 'providers/ReduxStore/slices/workspaces/actions';
+import { workspaceDotEnvUpdateEvent } from 'providers/ReduxStore/slices/workspaces';
import toast from 'react-hot-toast';
import { useDispatch } from 'react-redux';
import { isElectron } from 'utils/common/platform';
@@ -214,6 +216,11 @@ const useIpcEvents = () => {
dispatch(processEnvUpdateEvent(val));
});
+ const removeWorkspaceDotEnvUpdatesListener = ipcRenderer.on('main:workspace-dotenv-update', (val) => {
+ dispatch(workspaceDotEnvUpdateEvent(val));
+ dispatch(workspaceEnvUpdateEvent({ processEnvVariables: val.processEnvVariables }));
+ });
+
const removeConsoleLogListener = ipcRenderer.on('main:console-log', (val) => {
console[val.type](...val.args);
dispatch(addLog({
@@ -293,6 +300,7 @@ const useIpcEvents = () => {
removeRunFolderEventListener();
removeRunRequestEventListener();
removeProcessEnvUpdatesListener();
+ removeWorkspaceDotEnvUpdatesListener();
removeConsoleLogListener();
removeConfigUpdatesListener();
removeShowPreferencesListener();
diff --git a/packages/bruno-app/src/providers/Hotkeys/keyMappings.js b/packages/bruno-app/src/providers/Hotkeys/keyMappings.js
index 74aa2970a..291476a82 100644
--- a/packages/bruno-app/src/providers/Hotkeys/keyMappings.js
+++ b/packages/bruno-app/src/providers/Hotkeys/keyMappings.js
@@ -32,7 +32,10 @@ const KeyMapping = {
name: 'Move Tab Right'
},
closeAllTabs: { mac: 'command+shift+w', windows: 'ctrl+shift+w', name: 'Close All Tabs' },
- collapseSidebar: { mac: 'command+\\', windows: 'ctrl+\\', name: 'Collapse Sidebar' }
+ collapseSidebar: { mac: 'command+\\', windows: 'ctrl+\\', name: 'Collapse Sidebar' },
+ zoomIn: { mac: 'command+=', windows: 'ctrl+=', name: 'Zoom In' },
+ zoomOut: { mac: 'command+-', windows: 'ctrl+-', name: 'Zoom Out' },
+ resetZoom: { mac: 'command+0', windows: 'ctrl+0', name: 'Reset Zoom' }
};
/**
diff --git a/packages/bruno-app/src/providers/ReduxStore/middlewares/autosave/middleware.js b/packages/bruno-app/src/providers/ReduxStore/middlewares/autosave/middleware.js
index ad3312b54..1357c95b2 100644
--- a/packages/bruno-app/src/providers/ReduxStore/middlewares/autosave/middleware.js
+++ b/packages/bruno-app/src/providers/ReduxStore/middlewares/autosave/middleware.js
@@ -1,4 +1,5 @@
-import { saveRequest, saveCollectionSettings, saveFolderRoot } from '../../slices/collections/actions';
+import { saveRequest, saveCollectionSettings, saveFolderRoot, saveEnvironment } from '../../slices/collections/actions';
+import { saveGlobalEnvironment } from '../../slices/global-environments';
import { flattenItems, isItemARequest, isItemAFolder } from 'utils/collections';
const actionsToIntercept = [
@@ -46,6 +47,11 @@ const actionsToIntercept = [
'collections/updateRequestDocs',
'collections/runRequestEvent',
'collections/updateCollectionPresets',
+ 'collections/setRequestVars',
+ 'collections/setRequestAssertions',
+ 'collections/updateItemSettings',
+ 'collections/addRequestTag',
+ 'collections/deleteRequestTag',
// Folder-level actions
'collections/addFolderHeader',
@@ -80,7 +86,11 @@ const actionsToIntercept = [
'collections/updateCollectionDocs',
'collections/updateCollectionClientCertificates',
'collections/updateCollectionProtobuf',
- 'collections/updateCollectionProxy'
+ 'collections/updateCollectionProxy',
+
+ // Environment draft actions
+ 'collections/setEnvironmentsDraft',
+ 'globalEnvironments/setGlobalEnvironmentDraft'
];
// Simple object to track pending save timers
@@ -100,7 +110,8 @@ const scheduleAutoSave = (key, save, interval) => {
// Helper to find and schedule saves for all existing drafts
const saveExistingDrafts = (dispatch, getState, interval) => {
- const collections = getState().collections.collections;
+ const state = getState();
+ const collections = state.collections.collections;
collections.forEach((collection) => {
// Check collection-level draft
@@ -109,6 +120,15 @@ const saveExistingDrafts = (dispatch, getState, interval) => {
scheduleAutoSave(key, () => dispatch(saveCollectionSettings(collection.uid, null, true)), interval);
}
+ // Check collection environment drafts
+ if (collection.environmentsDraft) {
+ const { environmentUid, variables } = collection.environmentsDraft;
+ if (environmentUid && variables) {
+ const key = `environment-${collection.uid}-${environmentUid}`;
+ scheduleAutoSave(key, () => dispatch(saveEnvironment(variables, environmentUid, collection.uid)), interval);
+ }
+ }
+
// Check all items (requests and folders) for drafts
const allItems = flattenItems(collection.items);
allItems.forEach((item) => {
@@ -123,6 +143,77 @@ const saveExistingDrafts = (dispatch, getState, interval) => {
}
});
});
+
+ // Check global environment drafts
+ const globalEnvironmentDraft = state.globalEnvironments?.globalEnvironmentDraft;
+ if (globalEnvironmentDraft) {
+ const { environmentUid, variables } = globalEnvironmentDraft;
+ if (environmentUid && variables) {
+ const key = `global-environment-${environmentUid}`;
+ scheduleAutoSave(key, () => dispatch(saveGlobalEnvironment({ variables, environmentUid })), interval);
+ }
+ }
+};
+
+// Helper to determine entity type and create save handler
+const determineSaveHandler = (actionType, payload, dispatch, getState) => {
+ const { itemUid, folderUid, collectionUid, environmentUid } = payload;
+
+ // Handle environment drafts
+ if (actionType === 'collections/setEnvironmentsDraft') {
+ if (!environmentUid || !collectionUid) return null;
+ return {
+ key: `environment-${collectionUid}-${environmentUid}`,
+ save: () => {
+ const state = getState();
+ const collection = state.collections.collections.find((c) => c.uid === collectionUid);
+ const draft = collection?.environmentsDraft;
+ if (draft?.environmentUid === environmentUid && draft?.variables) {
+ dispatch(saveEnvironment(draft.variables, environmentUid, collectionUid));
+ }
+ }
+ };
+ }
+
+ if (actionType === 'globalEnvironments/setGlobalEnvironmentDraft') {
+ if (!environmentUid) return null;
+ return {
+ key: `global-environment-${environmentUid}`,
+ save: () => {
+ const state = getState();
+ const draft = state.globalEnvironments?.globalEnvironmentDraft;
+ if (draft?.environmentUid === environmentUid && draft?.variables) {
+ dispatch(saveGlobalEnvironment({ variables: draft.variables, environmentUid }));
+ }
+ }
+ };
+ }
+
+ // Handle folder actions
+ if (folderUid) {
+ return {
+ key: `folder-${folderUid}`,
+ save: () => dispatch(saveFolderRoot(collectionUid, folderUid, true))
+ };
+ }
+
+ // Handle request actions
+ if (itemUid) {
+ return {
+ key: `request-${itemUid}`,
+ save: () => dispatch(saveRequest(itemUid, collectionUid, true))
+ };
+ }
+
+ // Handle collection-level changes
+ if (collectionUid) {
+ return {
+ key: `collection-${collectionUid}`,
+ save: () => dispatch(saveCollectionSettings(collectionUid, null, true))
+ };
+ }
+
+ return null;
};
export const autosaveMiddleware = ({ dispatch, getState }) => (next) => (action) => {
@@ -150,28 +241,9 @@ export const autosaveMiddleware = ({ dispatch, getState }) => (next) => (action)
// Only handle actions that create dirty state
if (!actionsToIntercept.includes(action.type)) return result;
- const { itemUid, folderUid, collectionUid } = action.payload;
- const interval = autoSave.interval;
-
- // Determine what to save based on what IDs are present
- let key, save;
-
- if (itemUid) {
- // Request change
- key = `request-${itemUid}`;
- save = () => dispatch(saveRequest(itemUid, collectionUid, true));
- } else if (folderUid) {
- // Folder change
- key = `folder-${folderUid}`;
- save = () => dispatch(saveFolderRoot(collectionUid, folderUid, true));
- } else if (collectionUid) {
- // Collection change
- key = `collection-${collectionUid}`;
- save = () => dispatch(saveCollectionSettings(collectionUid, null, true));
- }
-
- if (key && save) {
- scheduleAutoSave(key, save, interval);
+ const handler = determineSaveHandler(action.type, action.payload, dispatch, getState);
+ if (handler) {
+ scheduleAutoSave(handler.key, handler.save, autoSave.interval);
}
return result;
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
index e5748b3ac..ec1f071eb 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
@@ -35,6 +35,7 @@ import {
sortCollections as _sortCollections,
updateCollectionMountStatus,
moveCollection,
+ workspaceEnvUpdateEvent,
requestCancelled,
resetRunResults,
responseReceived,
@@ -816,7 +817,6 @@ export const renameItem
return ipcRenderer
.invoke('renderer:rename-item-filename', { oldPath: item.pathname, newPath, newName, newFilename, collectionPathname: collection.pathname })
.catch((err) => {
- toast.error('Failed to rename the file');
console.error(err);
throw new Error('Failed to rename the file');
});
@@ -2255,6 +2255,7 @@ export const openCollectionEvent = (uid, pathname, brunoConfig) => (dispatch, ge
return new Promise((resolve, reject) => {
const state = getState();
const activeWorkspace = state.workspaces.workspaces.find((w) => w.uid === state.workspaces.activeWorkspaceUid);
+ const workspaceProcessEnvVariables = activeWorkspace?.processEnvVariables || {};
// Check if collection already exists in Redux state
const existingCollection = state.collections.collections.find(
@@ -2296,6 +2297,8 @@ export const openCollectionEvent = (uid, pathname, brunoConfig) => (dispatch, ge
});
}
+ dispatch(workspaceEnvUpdateEvent({ processEnvVariables: workspaceProcessEnvVariables }));
+
resolve();
return;
}
@@ -2308,6 +2311,7 @@ export const openCollectionEvent = (uid, pathname, brunoConfig) => (dispatch, ge
pathname: pathname,
items: [],
runtimeVariables: {},
+ workspaceProcessEnvVariables,
brunoConfig: brunoConfig
};
@@ -2326,6 +2330,9 @@ export const openCollectionEvent = (uid, pathname, brunoConfig) => (dispatch, ge
);
if (currentWorkspace) {
+ // Set collection-workspace mapping for workspace env vars
+ ipcRenderer.invoke('renderer:set-collection-workspace', uid, currentWorkspace.pathname);
+
const alreadyInWorkspace = currentWorkspace.collections?.some(
(c) => normalizePath(c.path) === normalizePath(pathname)
);
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
index 68c0e12ad..7fe15aa08 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
@@ -405,6 +405,12 @@ export const collectionsSlice = createSlice({
collection.processEnvVariables = processEnvVariables;
}
},
+ workspaceEnvUpdateEvent: (state, action) => {
+ const { processEnvVariables } = action.payload;
+ state.collections.forEach((collection) => {
+ collection.workspaceProcessEnvVariables = processEnvVariables;
+ });
+ },
requestCancelled: (state, action) => {
const { itemUid, collectionUid, seq, timestamp } = action.payload;
const collection = findCollectionByUid(state.collections, collectionUid);
@@ -2332,7 +2338,7 @@ export const collectionsSlice = createSlice({
const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
if (!collection) return;
- const folder = collection ? findItemInCollection(collection, action.payload.itemUid) : null;
+ const folder = collection ? findItemInCollection(collection, action.payload.folderUid) : null;
if (!folder) return;
if (folder) {
@@ -3148,13 +3154,13 @@ export const collectionsSlice = createSlice({
const item = findItemInCollection(collection, itemUid);
if (data.data) {
item.response.data ||= [];
- item.response.data = [{
+ item.response.data.push({
type: 'incoming',
seq,
message: data.data,
messageHexdump: hexdump(data.data),
timestamp: timestamp || Date.now()
- }].concat(item.response.data);
+ });
}
if (item.response.dataBuffer && item.response.dataBuffer.length && data.dataBuffer) {
item.response.dataBuffer = Buffer.concat([Buffer.from(item.response.dataBuffer), Buffer.from(data.dataBuffer)]);
@@ -3424,6 +3430,7 @@ export const {
cloneItem,
scriptEnvironmentUpdateEvent,
processEnvUpdateEvent,
+ workspaceEnvUpdateEvent,
requestCancelled,
responseReceived,
runGrpcRequestEvent,
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/workspaces/actions.js b/packages/bruno-app/src/providers/ReduxStore/slices/workspaces/actions.js
index f1f35298a..1f439acbd 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/workspaces/actions.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/workspaces/actions.js
@@ -169,8 +169,8 @@ export const removeCollectionFromWorkspaceAction = (workspaceUid, collectionPath
};
const loadWorkspaceCollectionsForSwitch = async (dispatch, workspace) => {
- const openCollectionsFunction = (collectionPaths, workspaceId) => {
- return dispatch(openMultipleCollections(collectionPaths, { workspaceId }));
+ const openCollectionsFunction = (collectionPaths, workspacePath) => {
+ return dispatch(openMultipleCollections(collectionPaths, { workspacePath }));
};
try {
@@ -418,7 +418,7 @@ export const workspaceConfigUpdatedEvent = (workspacePath, workspaceUid, workspa
if (uniqueNewCollectionPaths.length > 0) {
try {
- await dispatch(openMultipleCollections(uniqueNewCollectionPaths, { workspaceId: workspace.pathname }));
+ await dispatch(openMultipleCollections(uniqueNewCollectionPaths, { workspacePath: workspace.pathname }));
} catch (error) {
}
}
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/workspaces/index.js b/packages/bruno-app/src/providers/ReduxStore/slices/workspaces/index.js
index e25e3920a..d8bb63f1f 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/workspaces/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/workspaces/index.js
@@ -76,6 +76,14 @@ export const workspacesSlice = createSlice({
if (workspace) {
workspace.loadingState = loadingState;
}
+ },
+
+ workspaceDotEnvUpdateEvent: (state, action) => {
+ const { workspaceUid, processEnvVariables } = action.payload;
+ const workspace = state.workspaces.find((w) => w.uid === workspaceUid);
+ if (workspace) {
+ workspace.processEnvVariables = processEnvVariables;
+ }
}
}
});
@@ -87,7 +95,8 @@ export const {
updateWorkspace,
addCollectionToWorkspace,
removeCollectionFromWorkspace,
- updateWorkspaceLoadingState
+ updateWorkspaceLoadingState,
+ workspaceDotEnvUpdateEvent
} = workspacesSlice.actions;
export default workspacesSlice.reducer;
diff --git a/packages/bruno-app/src/utils/codegenerator/auth.js b/packages/bruno-app/src/utils/codegenerator/auth.js
index ad28970eb..eefb82cfe 100644
--- a/packages/bruno-app/src/utils/codegenerator/auth.js
+++ b/packages/bruno-app/src/utils/codegenerator/auth.js
@@ -1,6 +1,9 @@
import get from 'lodash/get';
+import { find } from 'lodash';
+import { interpolate } from '@usebruno/common';
+import { getAllVariables } from 'utils/collections/index';
-export const getAuthHeaders = (collectionRootAuth, requestAuth) => {
+export const getAuthHeaders = (collectionRootAuth, requestAuth, collection = null, item = null) => {
// Discovered edge case where code generation fails when you create a collection which has not been saved yet:
// Collection auth therefore null, and request inherits from collection, therefore it is also null
// TypeError: Cannot read properties of undefined (reading 'mode')
@@ -48,6 +51,72 @@ export const getAuthHeaders = (collectionRootAuth, requestAuth) => {
];
}
return [];
+ case 'oauth2': {
+ const oauth2Config = get(auth, 'oauth2', {});
+ const tokenPlacement = get(oauth2Config, 'tokenPlacement', 'header');
+ const tokenHeaderPrefix = get(oauth2Config, 'tokenHeaderPrefix', 'Bearer');
+
+ // Only add header if token placement is 'header'
+ if (tokenPlacement === 'header') {
+ // Try to get access token from persisted credentials
+ let accessToken = '';
+
+ if (collection && item) {
+ try {
+ const grantType = get(oauth2Config, 'grantType', '');
+ // For implicit grant type, use authorizationUrl; for others, use accessTokenUrl
+ const urlToLookup = grantType === 'implicit'
+ ? get(oauth2Config, 'authorizationUrl', '')
+ : get(oauth2Config, 'accessTokenUrl', '');
+ const credentialsId = get(oauth2Config, 'credentialsId', 'credentials');
+ const collectionUid = get(collection, 'uid');
+
+ if (urlToLookup && collectionUid) {
+ // Interpolate the URL with variables
+ const variables = getAllVariables(collection, item);
+ const interpolatedUrl = interpolate(urlToLookup, variables);
+
+ // Look up stored credentials
+ const credentialsData = find(
+ collection?.oauth2Credentials || [],
+ (creds) =>
+ creds?.url === interpolatedUrl
+ && creds?.collectionUid === collectionUid
+ && creds?.credentialsId === credentialsId
+ );
+
+ if (credentialsData?.credentials?.access_token) {
+ accessToken = credentialsData.credentials.access_token;
+ }
+ }
+ } catch (error) {
+ console.error('Error retrieving OAuth2 access token:', error);
+ // Fall back to placeholder if lookup fails
+ }
+ }
+
+ // Build the authorization header value
+ // If tokenHeaderPrefix is empty, just use the token
+ // Otherwise, use the format: "prefix token"
+ // Always trim the final result for consistent formatting
+ const headerValue = (
+ tokenHeaderPrefix
+ ? `${tokenHeaderPrefix} ${accessToken}`
+ : accessToken
+ ).trim();
+
+ return [
+ {
+ enabled: true,
+ name: 'Authorization',
+ value: headerValue
+ }
+ ];
+ }
+ // If tokenPlacement is 'url', this function does not add any auth headers;
+ // token placement in the URL/query params must be handled elsewhere.
+ return [];
+ }
default:
return [];
}
diff --git a/packages/bruno-app/src/utils/codemirror/autocomplete.js b/packages/bruno-app/src/utils/codemirror/autocomplete.js
index 8776d7cc3..6db1fd370 100644
--- a/packages/bruno-app/src/utils/codemirror/autocomplete.js
+++ b/packages/bruno-app/src/utils/codemirror/autocomplete.js
@@ -80,6 +80,7 @@ const STATIC_API_HINTS = {
'bru.getTestResults()',
'bru.sleep(ms)',
'bru.getCollectionName()',
+ 'bru.isSafeMode()',
'bru.getGlobalEnvVar(key)',
'bru.setGlobalEnvVar(key, value)',
'bru.runner',
@@ -298,9 +299,14 @@ const calculateWordReplacementPositions = (cursor, start, end, word) => {
* @returns {string} The determined context
*/
const determineWordContext = (word) => {
- if (word.startsWith('req') || word.startsWith('res') || word.startsWith('bru')) {
+ const isApiHint = Object.keys(STATIC_API_HINTS).some(
+ (apiRoot) => apiRoot.toLowerCase().startsWith(word.toLowerCase()) || word.toLowerCase().startsWith(apiRoot.toLowerCase())
+ );
+
+ if (isApiHint) {
return 'api';
}
+
return 'anyword';
};
@@ -517,6 +523,34 @@ const createStandardHintList = (filteredHints, from, to) => {
};
};
+/**
+ * Show root-level API hints when the editor is empty
+ * @param {Object} cm - CodeMirror instance
+ * @param {string[]} showHintsFor - Array of hint types to show (e.g., ['req', 'res', 'bru'])
+ * @returns {boolean} True if hints were shown, false otherwise
+ */
+export const showRootHints = (cm, showHintsFor = []) => {
+ const wordInfo = getCurrentWordWithContext(cm);
+ // If user is currently typing a word, let handleKeyupForAutocomplete
+ // handle it instead of showing root hints.
+ if (wordInfo) {
+ return false;
+ }
+
+ const hints = Object.keys(STATIC_API_HINTS).filter((rootHint) => showHintsFor.includes(rootHint));
+
+ if (hints.length === 0) return false;
+
+ const cursor = cm.getCursor();
+ const hintList = createStandardHintList(hints, cursor, cursor);
+
+ cm.showHint({
+ hint: () => hintList,
+ completeSingle: false
+ });
+ return true;
+};
+
/**
* Bruno AutoComplete Helper - Main function with context awareness
* @param {Object} cm - CodeMirror instance
@@ -628,7 +662,8 @@ const handleKeyupForAutocomplete = (cm, event, options) => {
const hints = getAutoCompleteHints(cm, allVariables, anywordAutocompleteHints, options);
if (!hints) {
- if (cm.state.completionActive) {
+ const wordInfo = getCurrentWordWithContext(cm);
+ if (cm.state.completionActive && wordInfo) {
cm.state.completionActive.close();
}
return;
diff --git a/packages/bruno-app/src/utils/codemirror/autocomplete.spec.js b/packages/bruno-app/src/utils/codemirror/autocomplete.spec.js
index 124fc0cb0..16e5a2882 100644
--- a/packages/bruno-app/src/utils/codemirror/autocomplete.spec.js
+++ b/packages/bruno-app/src/utils/codemirror/autocomplete.spec.js
@@ -482,7 +482,7 @@ describe('Bruno Autocomplete', () => {
mockedCodemirror.state.completionActive = mockCompletion;
mockedCodemirror.getCursor.mockReturnValue({ line: 0, ch: 0 });
- mockedCodemirror.getLine.mockReturnValue(' ');
+ mockedCodemirror.getLine.mockReturnValue('req.bodyy');
mockedCodemirror.getRange.mockReturnValue('');
const mockEvent = { key: 'a' };
diff --git a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
index d26a1eb5e..2a4b32659 100644
--- a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
+++ b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
@@ -6,7 +6,7 @@
* LICENSE file at https://github.com/graphql/codemirror-graphql/tree/v0.8.3
*/
-import { interpolate, mockDataFunctions } from '@usebruno/common';
+import { interpolate, mockDataFunctions, timeBasedDynamicVars } from '@usebruno/common';
import { getVariableScope, isVariableSecret, getAllVariables } from 'utils/collections';
import { updateVariableInScope } from 'providers/ReduxStore/slices/collections/actions';
import store from 'providers/ReduxStore';
@@ -194,11 +194,13 @@ export const renderVarInfo = (token, options) => {
} else if (variableName.startsWith('$')) {
const fakerKeyword = variableName.substring(1); // Remove the $ prefix
const fakerFunction = mockDataFunctions[fakerKeyword];
+ const isTimeBased = timeBasedDynamicVars.has(fakerKeyword);
scopeInfo = {
type: 'dynamic',
value: '',
data: null,
- isValidFakerVariable: !!fakerFunction
+ isValidDynamicVariable: !!fakerFunction,
+ isTimeBased
};
} else if (variableName.startsWith('process.env.')) {
// Check if this is a process.env variable (starts with "process.env.")
@@ -300,8 +302,8 @@ export const renderVarInfo = (token, options) => {
return into;
}
- // Show warning for invalid faker variable (starts with $ but not a valid faker function)
- if (scopeInfo.type === 'dynamic' && !scopeInfo.isValidFakerVariable) {
+ // Show warning for invalid dynamic variable (starts with $ but not a valid dynamic function)
+ if (scopeInfo.type === 'dynamic' && !scopeInfo.isValidDynamicVariable) {
const warningNote = document.createElement('div');
warningNote.className = 'var-warning-note';
warningNote.textContent = `Unknown dynamic variable "${variableName}". Check the variable name.`;
@@ -309,11 +311,13 @@ export const renderVarInfo = (token, options) => {
return into;
}
- // For valid dynamic variables, just show the read-only note (no value display since it's generated at runtime)
- if (scopeInfo.type === 'dynamic' && scopeInfo.isValidFakerVariable) {
+ // For valid dynamic variables, show appropriate read-only note based on type
+ if (scopeInfo.type === 'dynamic' && scopeInfo.isValidDynamicVariable) {
const readOnlyNote = document.createElement('div');
readOnlyNote.className = 'var-readonly-note';
- readOnlyNote.textContent = 'Generates random value on each request';
+ readOnlyNote.textContent = scopeInfo.isTimeBased
+ ? 'Generates current timestamp on each request'
+ : 'Generates random value on each request';
into.appendChild(readOnlyNote);
return into;
}
@@ -678,54 +682,89 @@ if (!SERVER_RENDERED) {
const state = cm.state.brunoVarInfo;
const options = state.options;
- let token = cm.getTokenAt(pos, true);
- if (token) {
- const line = cm.getLine(pos.line);
+ // Get the full line text where the hover happened
+ const line = cm.getLine(pos.line);
+ if (!line) return;
- // Find the opening {{ before the cursor
- let start = token.start;
- while (start > 0 && !line.substring(start - 2, start).includes('{{')) {
- // Stop if we encounter }} - we've gone past the start of our variable
- if (line.substring(start - 2, start) === '}}') {
- break;
- }
- start--;
- }
- if (line.substring(start - 2, start) === '{{') {
- start = start - 2;
+ // If the line doesn't even contain both braces, no need to run loops
+ if (!line.includes('{{') || !line.includes('}}')) {
+ return;
+ }
+
+ // lastIndexOf searches backward from the cursor indexOf searches forward
+ if (line.lastIndexOf('{{', pos.ch) === -1 || line.indexOf('}}', pos.ch) === -1) {
+ return;
+ }
+ let start = pos.ch;
+ let end = pos.ch;
+
+ // ---------- Find opening '{{' to the LEFT ----------
+ while (start > 0) {
+ const leftTwo = line.substring(start - 2, start);
+
+ // If we find opening braces, stop
+ if (leftTwo === '{{') {
+ start -= 2;
+ break;
}
- // Find the closing }} after the cursor
- let end = token.end;
- while (end < line.length && !line.substring(end, end + 2).includes('}}')) {
- // Stop if we encounter {{ - we've gone past the end of our variable
- if (line.substring(end, end + 2) === '{{') {
- break;
- }
- end++;
- }
- if (line.substring(end, end + 2) === '}}') {
- end = end + 2;
+ // If we cross a closing braces before finding '{{', we're not inside a variable
+ if (leftTwo === '}}') {
+ return;
}
- // Extract the full variable string including {{ and }}
- const fullVariableString = line.substring(start, end);
+ start--;
+ }
- // Only use the expanded string if it looks like a complete variable
- if (fullVariableString.startsWith('{{') && fullVariableString.endsWith('}}')) {
- token = {
- ...token,
- string: fullVariableString,
- start: start,
- end: end
- };
+ // If we reached the start of the line and didn't match '{{', return
+ if (start < 0 || line.substring(start, start + 2) !== '{{') {
+ return;
+ }
+
+ // ---------- Find closing '}}' to the RIGHT ----------
+ while (end < line.length) {
+ const rightTwo = line.substring(end, end + 2);
+
+ // If we find closing braces, stop
+ if (rightTwo === '}}') {
+ end += 2;
+ break;
}
- const brunoVarInfo = renderVarInfo(token, options);
- if (brunoVarInfo) {
- showPopup(cm, box, brunoVarInfo);
+ // If we hit another '{{' before a '}}', then this isn't a valid enclosing pair
+ if (rightTwo === '{{') {
+ return;
}
+
+ end++;
+ }
+ // If we reached end-of-line without finding '}}', return
+ if (end > line.length || line.substring(end - 2, end) !== '}}') {
+ return;
+ }
+
+ const fullVariableString = line.substring(start, end);
+
+ // Basic validation to ensure it's a non-empty variable
+ if (!fullVariableString.startsWith('{{') || !fullVariableString.endsWith('}}')) {
+ return;
+ }
+
+ // Prevent tooltips for empty variables like {{ }}
+ const inner = fullVariableString.slice(2, -2).trim();
+ if (!inner) return;
+
+ // Build a token object compatible with renderVarInfo
+ const token = {
+ string: fullVariableString,
+ start: start,
+ end: end
+ };
+
+ const brunoVarInfo = renderVarInfo(token, options);
+ if (brunoVarInfo) {
+ showPopup(cm, box, brunoVarInfo);
}
}
diff --git a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.spec.js b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.spec.js
index 5595b826d..412bd715d 100644
--- a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.spec.js
+++ b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.spec.js
@@ -8,8 +8,11 @@ jest.mock('@usebruno/common', () => ({
randomFirstName: jest.fn(() => 'John'),
randomLastName: jest.fn(() => 'Doe'),
randomEmail: jest.fn(() => 'john.doe@example.com'),
- randomUUID: jest.fn(() => '123e4567-e89b-12d3-a456-426614174000')
- }
+ randomUUID: jest.fn(() => '123e4567-e89b-12d3-a456-426614174000'),
+ timestamp: jest.fn(() => '1704067200'),
+ isoTimestamp: jest.fn(() => '2024-01-01T00:00:00.000Z')
+ },
+ timeBasedDynamicVars: new Set(['timestamp', 'isoTimestamp'])
}));
jest.mock('providers/ReduxStore', () => ({
@@ -467,6 +470,29 @@ describe('renderVarInfo', () => {
expect(warningNote).not.toBeNull();
expect(warningNote.textContent).toContain('Unknown dynamic variable');
});
+
+ it('should show time-based note for $timestamp variable', () => {
+ const { readOnlyNote, scopeBadge } = setupDynamicRender('$timestamp');
+
+ expect(scopeBadge.textContent).toBe('Dynamic');
+ expect(readOnlyNote).not.toBeNull();
+ expect(readOnlyNote.textContent).toBe('Generates current timestamp on each request');
+ });
+
+ it('should show time-based note for $isoTimestamp variable', () => {
+ const { readOnlyNote, scopeBadge } = setupDynamicRender('$isoTimestamp');
+
+ expect(scopeBadge.textContent).toBe('Dynamic');
+ expect(readOnlyNote).not.toBeNull();
+ expect(readOnlyNote.textContent).toBe('Generates current timestamp on each request');
+ });
+
+ it('should show random note for non-time-based dynamic variables', () => {
+ const { readOnlyNote } = setupDynamicRender('$randomEmail');
+
+ expect(readOnlyNote).not.toBeNull();
+ expect(readOnlyNote.textContent).toBe('Generates random value on each request');
+ });
});
describe('OAuth2 variable rendering', () => {
diff --git a/packages/bruno-app/src/utils/codemirror/linkAware.js b/packages/bruno-app/src/utils/codemirror/linkAware.js
index 3849abeeb..501cfd7b1 100644
--- a/packages/bruno-app/src/utils/codemirror/linkAware.js
+++ b/packages/bruno-app/src/utils/codemirror/linkAware.js
@@ -59,7 +59,18 @@ function markUrls(editor, linkify, linkClass, linkHint) {
const matches = linkify.match(lineContent);
if (!matches) continue;
+ const variablePatterns = [];
+ const variablePattern = /\{\{[^}]*\}\}/g;
+ let varMatch;
+ while ((varMatch = variablePattern.exec(lineContent)) !== null) {
+ variablePatterns.push({ start: varMatch.index, end: varMatch.index + varMatch[0].length });
+ }
matches.forEach(({ index, lastIndex, url }) => {
+ const isInVariable = variablePatterns.some(
+ ({ start, end }) => index < end && lastIndex > start
+ );
+ if (isInVariable) return;
+
try {
editor.markText(
{ line: lineNum, ch: index },
diff --git a/packages/bruno-app/src/utils/collections/export.js b/packages/bruno-app/src/utils/collections/export.js
index 669446a29..43b25efb2 100644
--- a/packages/bruno-app/src/utils/collections/export.js
+++ b/packages/bruno-app/src/utils/collections/export.js
@@ -99,6 +99,7 @@ export const exportCollection = (collection, version) => {
// delete process variables
delete collection.processEnvVariables;
+ delete collection.workspaceProcessEnvVariables;
deleteUidsInItems(collection.items);
deleteUidsInEnvs(collection.environments);
diff --git a/packages/bruno-app/src/utils/collections/index.js b/packages/bruno-app/src/utils/collections/index.js
index 6eb2bd78d..dcad3b168 100644
--- a/packages/bruno-app/src/utils/collections/index.js
+++ b/packages/bruno-app/src/utils/collections/index.js
@@ -1174,7 +1174,14 @@ export const getAllVariables = (collection, item) => {
const pathParams = getPathParams(item);
const { globalEnvironmentVariables = {} } = collection;
- const { processEnvVariables = {}, runtimeVariables = {}, promptVariables = {} } = collection;
+ const { processEnvVariables = {}, runtimeVariables = {}, promptVariables = {}, workspaceProcessEnvVariables = {} } = collection;
+
+ // Merge workspace and collection processEnvVariables (collection takes priority)
+ const mergedProcessEnvVariables = {
+ ...workspaceProcessEnvVariables,
+ ...processEnvVariables
+ };
+
const mergedVariables = {
...folderVariables,
...requestVariables,
@@ -1216,7 +1223,7 @@ export const getAllVariables = (collection, item) => {
maskedEnvVariables: uniqueMaskedVariables,
process: {
env: {
- ...processEnvVariables
+ ...mergedProcessEnvVariables
}
}
};
diff --git a/packages/bruno-app/src/utils/response/index.js b/packages/bruno-app/src/utils/response/index.js
index 5e19bb2f2..18ab27fe3 100644
--- a/packages/bruno-app/src/utils/response/index.js
+++ b/packages/bruno-app/src/utils/response/index.js
@@ -92,6 +92,36 @@ const isLikelyText = (buffer) => {
return (textChars / sampleSize) > 0.85;
};
+/**
+ * Helper to detect SVG content from text buffer
+ * SVG files may start with XML declaration, comments, or whitespace before the