\n
\n );\n};\n\nexport default InheritableSettingsInput;\n"
},
{
"path": "packages/bruno-app/src/components/ManageWorkspace/DeleteWorkspace/index.js",
"content": "import React, { useState } from 'react';\nimport Portal from 'components/Portal/index';\nimport Modal from 'components/Modal/index';\nimport toast from 'react-hot-toast';\nimport { useDispatch } from 'react-redux';\nimport { IconFolder } from '@tabler/icons';\nimport { closeWorkspaceAction } from 'providers/ReduxStore/slices/workspaces/actions';\n\nconst DeleteWorkspace = ({ onClose, workspace }) => {\n const dispatch = useDispatch();\n const [isDeleting, setIsDeleting] = useState(false);\n\n const onConfirm = async () => {\n if (isDeleting) return;\n\n try {\n setIsDeleting(true);\n await dispatch(closeWorkspaceAction(workspace.uid));\n onClose();\n } catch (error) {\n toast.error(error?.message || 'An error occurred while removing the workspace');\n setIsDeleting(false);\n }\n };\n\n return (\n \n \n {description && (\n
\n \n {description}\n
\n )}\n\n {isInherited ? (\n \n Inherit\n
\n onDropdownSelect('inherit')}>\n Inherit\n
\n onDropdownSelect('custom')}>\n Custom\n
\n \n ) : (\n \n \n
\n )}\n \n
\n {workspace?.pathname && (\n {workspace.pathname}
\n )}\n \n Are you sure you want to remove workspace {workspace?.name}?\n
\n \n The workspace will still be available in the file system and can be re-opened later.\n
\n \n \n
\n\n \n
\n }>\n Create Workspace\n \n \n
\n Manage Workspace\n \n {sortedWorkspaces.length === 0 ? (\n
\n \n No workspaces found\n
\n ) : (\n sortedWorkspaces.map((workspace) => {\n const isDefault = workspace.type === 'default';\n const isActive = workspace.uid === activeWorkspaceUid;\n\n return (\n \n
\n );\n })\n )}\n \n
\n\n \n \n {isDefault ? (\n
\n {workspace.pathname && (\n {workspace.pathname}
\n )}\n \n handleOpenWorkspace(workspace)}\n >\n handleShowInFolder(workspace)}\n >\n handleRenameClick(workspace) },\n { id: 'remove', label: 'Remove', onClick: () => handleCloseClick(workspace) }\n ]}\n >\n \n \n )}\n
\n \n {customHeader ? customHeader : <>{title ?
\n);\n\nconst ModalContent = ({ children }) => {title}
: null}}\n {handleCancel && !hideClose ? (\n // TODO: Remove data-test-id and use data-testid instead across the codebase.\n handleCancel() : null} data-testid=\"modal-close-button\">\n ×\n
\n ) : null}\n {children}
;\n\nconst ModalFooter = ({\n confirmText,\n cancelText,\n handleSubmit,\n handleCancel,\n confirmDisabled,\n hideCancel,\n hideFooter,\n confirmButtonColor = 'primary'\n}) => {\n confirmText = confirmText || 'Save';\n cancelText = cancelText || 'Cancel';\n\n if (hideFooter) {\n return null;\n }\n\n return (\n \n \n \n \n \n \n {confirmText}\n \n \n
\n );\n};\n\nconst Modal = ({\n size,\n title,\n customHeader,\n confirmText,\n cancelText,\n handleCancel,\n handleConfirm = () => {},\n children,\n confirmDisabled,\n hideCancel,\n hideFooter,\n hideClose,\n disableCloseOnOutsideClick,\n disableEscapeKey,\n onClick,\n closeModalFadeTimeout = 500,\n dataTestId,\n confirmButtonColor = 'primary'\n}) => {\n const modalRef = useRef(null);\n const [isClosing, setIsClosing] = useState(false);\n\n const handleKeydown = (event) => {\n const { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;\n\n // Only handle events from elements inside this modal\n if (keyCode !== ESC_KEY_CODE && (!modalRef.current || !modalRef.current.contains(event.target))) {\n return;\n }\n\n switch (keyCode) {\n case ESC_KEY_CODE: {\n if (disableEscapeKey) return;\n return closeModal({ type: 'esc' });\n }\n case ENTER_KEY_CODE: {\n const isSubmitButton = event.target?.type === 'submit';\n if (!shiftKey && !ctrlKey && !altKey && !metaKey && handleConfirm && !isSubmitButton && !confirmDisabled) {\n return handleConfirm();\n }\n }\n }\n };\n\n useFocusTrap(modalRef);\n\n const closeModal = (args) => {\n setIsClosing(true);\n setTimeout(() => handleCancel(args), closeModalFadeTimeout);\n };\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeydown, false);\n return () => {\n document.removeEventListener('keydown', handleKeydown);\n };\n }, [disableEscapeKey, document, handleConfirm, confirmDisabled]);\n\n let classes = 'bruno-modal';\n if (isClosing) {\n classes += ' modal--animate-out';\n }\n if (hideFooter) {\n classes += ' modal-footer-none';\n }\n return (\n \n
\n );\n }\n}\nexport default MultiLineEditor;\n"
},
{
"path": "packages/bruno-app/src/components/Notifications/StyleWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n .notifications-modal {\n margin-inline: -1rem;\n margin-block: -1.5rem;\n background-color: ${(props) => props.theme.notifications.bg};\n }\n\n .notification-count {\n display: flex;\n color: white;\n position: absolute;\n top: -0.625rem;\n right: -0.5rem;\n margin-right: 0.5rem;\n justify-content: center;\n font-size: 0.625rem;\n border-radius: 50%;\n background-color: ${(props) => props.theme.colors.text.yellow};\n border: solid 2px ${(props) => props.theme.sidebar.bg};\n min-width: 1.25rem;\n }\n\n button.mark-as-read {\n font-weight: 400 !important;\n }\n\n ul.notifications {\n background-color: ${(props) => props.theme.notifications.list.bg};\n border-right: solid 1px ${(props) => props.theme.notifications.list.borderRight};\n min-height: 400px;\n height: 100%;\n max-height: 85vh;\n overflow-y: auto;\n\n li {\n min-width: 150px;\n cursor: pointer;\n padding: 0.5rem 0.625rem;\n border-left: solid 2px transparent;\n color: ${(props) => props.theme.textLink};\n border-bottom: solid 1px ${(props) => props.theme.notifications.list.borderBottom};\n &:hover {\n background-color: ${(props) => props.theme.notifications.list.hoverBg};\n }\n\n &.active {\n color: ${(props) => props.theme.text} !important;\n background-color: ${(props) => props.theme.notifications.list.active.bg} !important;\n border-left: solid 2px ${(props) => props.theme.notifications.list.active.border};\n &:hover {\n background-color: ${(props) => props.theme.notifications.list.active.hoverBg} !important;\n }\n }\n\n &.read {\n color: ${(props) => props.theme.text} !important;\n }\n\n .notification-date {\n font-size: ${(props) => props.theme.font.size.xs};\n }\n }\n }\n\n .notification-title {\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n\n .notification-date {\n color: ${(props) => props.theme.colors.text.muted};\n }\n\n .pagination {\n background-color: ${(props) => props.theme.notifications.list.bg};\n border-right: solid 1px ${(props) => props.theme.notifications.list.borderRight};\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/Notifications/index.js",
"content": "import { IconBell } from '@tabler/icons';\nimport { useState } from 'react';\nimport StyledWrapper from './StyleWrapper';\nimport Modal from 'components/Modal/index';\nimport Portal from 'components/Portal';\nimport { useEffect } from 'react';\nimport { useApp } from 'providers/App';\nimport {\n fetchNotifications,\n markAllNotificationsAsRead,\n markNotificationAsRead\n} from 'providers/ReduxStore/slices/notifications';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { humanizeDate, relativeDate } from 'utils/common';\nimport ToolHint from 'components/ToolHint';\nimport DOMPurify from 'dompurify';\n\nconst PAGE_SIZE = 5;\n\nconst Notifications = () => {\n const dispatch = useDispatch();\n const { version } = useApp();\n const notifications = useSelector((state) => state.notifications.notifications);\n\n const [showNotificationsModal, setShowNotificationsModal] = useState(false);\n const [selectedNotification, setSelectedNotification] = useState(null);\n const [pageNumber, setPageNumber] = useState(1);\n\n const notificationsStartIndex = (pageNumber - 1) * PAGE_SIZE;\n const notificationsEndIndex = pageNumber * PAGE_SIZE;\n const totalPages = Math.ceil(notifications.length / PAGE_SIZE);\n const unreadNotifications = notifications.filter((notification) => !notification.read);\n\n useEffect(() => {\n dispatch(fetchNotifications({\n currentVersion: version\n }));\n }, []);\n\n useEffect(() => {\n reset();\n }, [showNotificationsModal]);\n\n useEffect(() => {\n if (!selectedNotification && notifications?.length > 0 && showNotificationsModal) {\n let firstNotification = notifications[0];\n setSelectedNotification(firstNotification);\n dispatch(markNotificationAsRead({ notificationId: firstNotification?.id }));\n }\n }, [notifications, selectedNotification, showNotificationsModal]);\n\n const reset = () => {\n setSelectedNotification(null);\n setPageNumber(1);\n };\n\n const handlePrev = (e) => {\n if (pageNumber - 1 < 1) return;\n setPageNumber(pageNumber - 1);\n };\n\n const handleNext = (e) => {\n if (pageNumber + 1 > totalPages) return;\n setPageNumber(pageNumber + 1);\n };\n\n const handleNotificationItemClick = (notification) => (e) => {\n e.preventDefault();\n setSelectedNotification(notification);\n dispatch(markNotificationAsRead({ notificationId: notification?.id }));\n };\n\n const getSanitizedDescription = (description) => {\n return DOMPurify.sanitize(encodeURIComponent(description), {\n ALLOWED_TAGS: ['a', 'ul', 'img', 'li', 'div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n ALLOWED_ATTR: ['href', 'style', 'target', 'src', 'alt']\n });\n };\n\n const modalCustomHeader = (\n \n dispatch(markAllNotificationsAsRead())}\n >\n Mark all as read\n \n \n )}\n
\n );\n\n return (\n NOTIFICATIONS
\n {unreadNotifications.length > 0 && (\n <>\n \n {unreadNotifications.length} unread notifications\n
\n \n {notifications?.length > 0 ? (\n
\n \n \n
\n ) : (\n \n \n {notifications?.slice(notificationsStartIndex, notificationsEndIndex)?.map((notification) => (\n \n
\n {notification?.title}
\n {relativeDate(notification?.date)}
\n \n ))}\n \n \n \n Prev\n \n \n Next\n \n
\n \n Page\n
\n \n {pageNumber}\n
\n of\n \n {totalPages}\n
\n \n \n \n
\n {selectedNotification?.title}
\n \n {humanizeDate(selectedNotification?.date)}\n
\n You are all caught up!
\n )}\n \n
\n );\n }\n\n if (error || !specContent) {\n return (\n \n {error || 'No spec file found. Sync your collection first.'}\n
\n );\n }\n\n return (\n \n
\n )}\n \n {bannerState && (\n setPendingAction(null)}>\n \n )}\n
\n );\n};\n\nexport default CollectionStatusSection;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/ConfirmSyncModal/index.js",
"content": "import React, { useState } from 'react';\nimport { IconChevronRight } from '@tabler/icons';\nimport Modal from 'components/Modal';\nimport Button from 'ui/Button';\nimport MethodBadge from 'ui/MethodBadge';\n\nconst handleKeyDown = (toggle) => (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n toggle();\n }\n};\n\nconst ConfirmGroup = ({ group }) => {\n const [expanded, setExpanded] = useState(false);\n const toggle = () => setExpanded((prev) => !prev);\n return (\n \n
\n )}\n\n {hasDrift && (\n \n {bannerState.variant === 'success'\n ? {bannerState.badges.modifiedCount} modified }\n {bannerState.badges.missingCount > 0 && {bannerState.badges.missingCount} deleted }\n {bannerState.badges.localOnlyCount > 0 && {bannerState.badges.localOnlyCount} added }\n \n )}\n
\n {bannerState.actions.includes('revert-all') && (\n \n \n
\n )}\n \n
\n )}\n\n {hasDrift ? (\n \n {/* Modified in Collection */}\n \n renderDriftRow(endpoint, idx, (\n <>\n \n \n \n ))}\n actions={(\n \n renderDriftRow(endpoint, idx, (\n \n ))}\n actions={(\n \n renderDriftRow(endpoint, idx, (\n <>\n \n \n \n ))}\n actions={(\n
\n ) : isLoading ? (\n \n
\n ) : !hasStoredSpec ? (\n Checking for updates
\nComparing your collection with the last synced spec...
\n\n
\n ) : (\n {lastSyncDate ? 'Cannot track collection changes' : 'Waiting for initial sync'}
\n{lastSyncDate\n ? 'The last synced spec is missing. Go to the \\'Spec Updates\\' tab to restore it, or sync the collection if updates are available to track future changes.'\n : 'Once you sync your collection with the spec, local changes will appear here.'}\n
\n \n\n
\n )}\n {/* Action confirmation modal */}\n {pendingAction && (\n No changes in collection
\nThe collection endpoints match the last synced spec. Nothing to review.
\n\n
\n {pendingAction.message}
\n\n \n \n Confirm\n \n
\n \n \n
\n {expanded && (\n \n {group.endpoints.map((ep, i) => (\n
\n )}\n \n );\n};\n\nconst ConfirmSyncModal = ({ groups, onCancel, onSync, isSyncing }) => {\n const hasNoChanges = groups.length === 0;\n\n return (\n \n
\n ))}\n \n {hasNoChanges ? (\n
\n \n );\n};\n\nexport default ConfirmSyncModal;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/ConnectSpecForm/index.js",
"content": "import { useState, useRef } from 'react';\nimport { IconCheck } from '@tabler/icons';\nimport Button from 'ui/Button';\nimport { isHttpUrl } from 'utils/url/index';\nimport { isOpenApiSpec } from 'utils/importers/openapi-collection';\nimport { parseFileAsJsonOrYaml } from 'utils/importers/file-reader';\n\nconst FEATURES = [\n 'Detect new, modified, and removed endpoints',\n 'Track local changes against the spec',\n 'Sync collection with a single click',\n 'Your tests, assertions, and scripts are preserved during sync'\n];\n\nconst ConnectSpecForm = ({ sourceUrl, setSourceUrl, isLoading, error, setError, onConnect }) => {\n const [mode, setMode] = useState('url');\n const fileInputRef = useRef(null);\n\n return (\n \n Your collection is already in sync with the remote spec. Syncing will update the local spec file to match the latest remote version.\n
\n ) : (\n <>\n\n The following changes will be applied to your collection. This action cannot be undone. Are you sure you want to proceed?\n
\n\n\n {groups.map((group, idx) => (\n
\n \n )}\n\n \n \n \n
\n \n {\n e.preventDefault(); onConnect();\n }}\n >\n \n
\n );\n};\n\nexport default ConnectSpecForm;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/ConnectionSettingsModal/index.js",
"content": "import { useState, useRef } from 'react';\nimport toast from 'react-hot-toast';\nimport Button from 'ui/Button';\nimport Modal from 'components/Modal';\nimport { isHttpUrl } from 'utils/url/index';\nimport { isOpenApiSpec } from 'utils/importers/openapi-collection';\nimport { parseFileAsJsonOrYaml } from 'utils/importers/file-reader';\n\nconst ConnectionSettingsModal = ({ collection, sourceUrl, onSave, onDisconnect, onClose }) => {\n const openApiSyncConfig = collection?.brunoConfig?.openapi?.[0];\n const normalizedSourceUrl = (sourceUrl || '').trim();\n const isUrl = isHttpUrl(normalizedSourceUrl);\n const initialMode = isUrl ? 'url' : 'file';\n const [mode, setMode] = useState(initialMode);\n const [url, setUrl] = useState(isUrl ? normalizedSourceUrl : '');\n const [filePath, setFilePath] = useState(isUrl ? '' : normalizedSourceUrl);\n const [autoCheck, setAutoCheck] = useState(openApiSyncConfig?.autoCheck !== false);\n const [checkInterval, setCheckInterval] = useState(openApiSyncConfig?.autoCheckInterval || 5);\n const [isSaving, setIsSaving] = useState(false);\n const fileInputRef = useRef(null);\n\n const intervals = [5, 15, 30, 60];\n\n const effectiveSource = mode === 'file' ? filePath : url.trim();\n const canSave = mode === 'file' ? !!effectiveSource : isHttpUrl(effectiveSource.trim());\n\n const handleSave = async () => {\n setIsSaving(true);\n try {\n await onSave({ sourceUrl: effectiveSource, autoCheck, autoCheckInterval: checkInterval });\n onClose();\n } catch (_) {\n // caller (handleSaveSettings) already shows a toast on failure\n } finally {\n setIsSaving(false);\n }\n };\n\n return (\n \n
\n\n Connect to OpenAPI Spec
\n\n Keep your collection synchronized with an OpenAPI specification. Changes in the spec will be detected automatically.\n
\n\n setSourceUrl(e.target.value)}\n placeholder=\"https://api.example.com/openapi.json\"\n />\n ) : (\n <>\n {\n const file = e.target.files?.[0];\n if (!file) return;\n setError(null);\n setSourceUrl('');\n try {\n const data = await parseFileAsJsonOrYaml(file);\n if (!isOpenApiSpec(data)) {\n setError('The selected file is not a valid OpenAPI 3.x specification');\n return;\n }\n const filePath = window.ipcRenderer.getFilePath(file);\n if (filePath) setSourceUrl(filePath);\n } catch (err) {\n setError(err.message || 'Failed to read the selected file');\n }\n }}\n />\n fileInputRef.current?.click()}\n >\n {sourceUrl ? sourceUrl.split(/[\\\\/]/).pop() : 'Choose file...'}\n \n \n )}\n\n \n Connect\n \n
\n \n {\n setMode('url'); setSourceUrl('');\n }}\n >\n URL\n \n {\n setMode('file'); setSourceUrl('');\n }}\n >\n File\n \n
\n\n {mode === 'url' ? (\n \n {mode === 'url'\n ? 'Supports OpenAPI 3.x specifications in JSON or YAML format'\n : 'Select a local OpenAPI/Swagger JSON or YAML file'}\n
\n {error && (\n{error}
\n )}\n \n\n\n {FEATURES.map((text) => (\n
\n\n \n
\n ))}\n \n OpenAPI Sync is in Beta — we'd love to hear your feedback and suggestions.{' '}\n
\n
\n \n );\n};\n\nexport default ConnectionSettingsModal;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/DisconnectSyncModal/index.js",
"content": "import Button from 'ui/Button';\nimport Modal from 'components/Modal';\n\nconst DisconnectSyncModal = ({ onConfirm, onClose }) => {\n return (\n \n
\n\n \n \n setUrl(e.target.value)}\n placeholder=\"https://api.example.com/openapi.json\"\n />\n ) : (\n <>\n {\n const file = e.target.files?.[0];\n if (file) {\n try {\n const data = await parseFileAsJsonOrYaml(file);\n if (!isOpenApiSpec(data)) {\n toast.error('The selected file is not a valid OpenAPI 3.x specification');\n return;\n }\n const path = window.ipcRenderer.getFilePath(file);\n if (path) setFilePath(path);\n } catch (err) {\n toast.error(err.message || 'Failed to read the selected file');\n }\n }\n }}\n />\n fileInputRef.current?.click()}\n >\n {filePath ? filePath.split(/[\\\\/]/).pop() : 'Choose file...'}\n \n \n )}\n
\n\n \n setMode('url')}\n >\n URL\n \n setMode('file')}\n >\n File\n \n
\n\n {mode === 'url' ? (\n \n \n
\n\n {autoCheck && (\n \n setAutoCheck(!autoCheck)}\n type=\"button\"\n >\n \n \n
\n \n
\n \n Automatically check for spec changes at a regular interval\n
\n \n \n
\n )}\n \n {intervals.map((mins) => (\n setCheckInterval(mins)}\n >\n {mins} min\n \n ))}\n
\n \n \n
\n \n \n \n
\n \n
\n \n );\n};\n\nexport default DisconnectSyncModal;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/EndpointChangeSection/EndpointItem.js",
"content": "import React from 'react';\nimport MethodBadge from 'ui/MethodBadge';\n\n// Simple endpoint item for non-review mode\nconst EndpointItem = ({ endpoint, type, actions }) => {\n return (\n \n <>Are you sure you want to disconnect OpenAPI sync?
\n <>This will only disconnect the sync configuration. Your collection will remain intact.\n
\n \n \n
\n \n
\n );\n};\n\nexport default EndpointItem;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/EndpointChangeSection/EndpointVisualDiff.js",
"content": "import React from 'react';\nimport isEqual from 'lodash/isEqual';\nimport get from 'lodash/get';\nimport VisualDiffUrlBar from 'components/Git/VisualDiffViewer/VisualDiffUrlBar';\nimport VisualDiffParams from 'components/Git/VisualDiffViewer/VisualDiffParams';\nimport VisualDiffHeaders from 'components/Git/VisualDiffViewer/VisualDiffHeaders';\nimport VisualDiffAuth from 'components/Git/VisualDiffViewer/VisualDiffAuth';\nimport VisualDiffBody from 'components/Git/VisualDiffViewer/VisualDiffBody';\nimport VisualDiffContent from 'components/Git/VisualDiffViewer/VisualDiffContent/index';\n\n// OpenAPI sync diff section configs (HTTP request sections only)\n// Data format matches Git diff format: data.request.url, data.request.params, etc.\nconst openAPIDiffSectionDataPaths = {\n url: ['request.url', 'request.method'],\n params: 'request.params',\n headers: 'request.headers',\n auth: 'request.auth',\n body: 'request.body'\n};\n\nconst openAPISectionHasChanges = (sectionKey, oldData, newData) => {\n // For body, only compare the mode and the content for the active mode(s)\n // The full request.body object can have extra empty properties that cause false positives\n if (sectionKey === 'body') {\n const oldBody = get(oldData, 'request.body', {});\n const newBody = get(newData, 'request.body', {});\n if (oldBody.mode !== newBody.mode) return true;\n const mode = oldBody.mode || newBody.mode;\n if (!mode || mode === 'none') return false;\n return !isEqual(oldBody[mode], newBody[mode]);\n }\n\n // For auth, only compare the mode and spec-derived fields for the active auth mode\n // Bruno adds extra fields (pkce, credentialsId, tokenQueryKey, etc.) that don't\n // come from the OpenAPI spec. Also, the converter generates ALL oauth2 fields\n // regardless of grant type, but the collection only stores relevant ones per flow.\n if (sectionKey === 'auth') {\n const oldAuth = get(oldData, 'request.auth', {});\n const newAuth = get(newData, 'request.auth', {});\n if (oldAuth.mode !== newAuth.mode) return true;\n const mode = oldAuth.mode || newAuth.mode;\n if (!mode || mode === 'none') return false;\n const oldConfig = oldAuth[mode] || {};\n const newConfig = newAuth[mode] || {};\n\n if (mode === 'oauth2') {\n // Compare only fields relevant to the specific grant type\n const grantType = oldConfig.grantType || newConfig.grantType;\n const commonFields = ['grantType', 'scope', 'state'];\n const grantTypeFields = {\n authorization_code: [...commonFields, 'authorizationUrl', 'accessTokenUrl', 'refreshTokenUrl', 'callbackUrl', 'clientId', 'clientSecret'],\n implicit: [...commonFields, 'authorizationUrl', 'callbackUrl'],\n password: [...commonFields, 'accessTokenUrl', 'refreshTokenUrl', 'clientId', 'clientSecret'],\n client_credentials: [...commonFields, 'accessTokenUrl', 'clientId', 'clientSecret']\n };\n const fields = grantTypeFields[grantType] || commonFields;\n return fields.some((field) => !isEqual(oldConfig[field], newConfig[field]));\n }\n\n // Other auth modes: compare only spec-relevant fields\n const specFields = {\n basic: ['username', 'password'],\n bearer: ['token'],\n apikey: ['key', 'value', 'placement'],\n digest: ['username', 'password']\n };\n const fields = specFields[mode];\n if (fields) {\n return fields.some((field) => !isEqual(oldConfig[field], newConfig[field]));\n }\n return !isEqual(oldConfig, newConfig);\n }\n\n const paths = openAPIDiffSectionDataPaths[sectionKey];\n\n if (Array.isArray(paths)) {\n return paths.some((path) => !isEqual(get(oldData, path), get(newData, path)));\n }\n\n return !isEqual(get(oldData, paths), get(newData, paths));\n};\n\nconst openAPIDiffHasContent = {\n url: (data) => data?.request?.url || data?.request?.method,\n params: (data) => data?.request?.params && data.request.params.length > 0,\n headers: (data) => data?.request?.headers && data.request.headers.length > 0,\n auth: (data) => data?.request?.auth && data.request.auth.mode && data.request.auth.mode !== 'none',\n body: (data) => {\n if (!data?.request?.body) return false;\n const mode = data.request.body.mode;\n if (!mode || mode === 'none') return false;\n return data.request.body.json || data.request.body.text || data.request.body.xml\n || data.request.body.graphql || data.request.body.formUrlEncoded?.length > 0\n || data.request.body.multipartForm?.length > 0;\n }\n};\n\nconst openAPIDiffSections = [\n { key: 'url', title: 'URL', Component: VisualDiffUrlBar, hasContent: openAPIDiffHasContent.url },\n { key: 'params', title: 'Parameters', Component: VisualDiffParams, hasContent: openAPIDiffHasContent.params },\n { key: 'headers', title: 'Headers', Component: VisualDiffHeaders, hasContent: openAPIDiffHasContent.headers },\n { key: 'auth', title: 'Authentication', Component: VisualDiffAuth, hasContent: openAPIDiffHasContent.auth },\n { key: 'body', title: 'Body', Component: VisualDiffBody, hasContent: openAPIDiffHasContent.body }\n];\n\n/**\n * EndpointVisualDiff - Wrapper around VisualDiffContent for OpenAPI sync\n *\n * Props:\n * - oldData: data from collection (actual current state)\n * - newData: data from spec (expected state)\n * - leftLabel/rightLabel: custom labels for diff panes\n * - swapSides: if true, show spec on left and collection on right\n */\nconst EndpointVisualDiff = ({\n oldData,\n newData,\n leftLabel = 'Current (in collection)',\n rightLabel = 'Expected (from spec)',\n swapSides = false\n}) => {\n const sections = openAPIDiffSections;\n\n // Determine which data goes on which side based on swapSides\n const displayOldData = swapSides ? newData : oldData;\n const displayNewData = swapSides ? oldData : newData;\n\n return (\n \n
\n {actions}
}\n \n {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault(); handleToggle();\n }\n }}\n >\n \n {isExpanded ? \n This endpoint was modified in both the spec and your collection. Choose which version to keep.\n \n )}\n >\n Conflict\n \n )}\n\n {actions &&
\n\n {isExpanded && (\n e.stopPropagation()}>{actions}
}\n\n {showDecisions && onDecisionChange && (\n e.stopPropagation()}>\n onDecisionChange('keep-mine')}\n title=\"Keep your local version\"\n >\n onDecisionChange('accept-incoming')}\n title=\"Accept the spec version\"\n >\n
\n )}\n \n {isLoading && (\n
\n )}\n \n );\n};\n\nexport default ExpandableEndpointRow;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/EndpointChangeSection/index.js",
"content": "import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { IconChevronRight } from '@tabler/icons';\nimport { toggleSectionExpanded } from 'providers/ReduxStore/slices/openapi-sync';\n\n/**\n * Collapsible section container for endpoint lists.\n * Renders a clickable header (with chevron, dot, title, count) and a body of items.\n * Expand/collapse state is persisted in Redux via collectionUid + sectionKey.\n *\n * @param {string} title - Section heading\n * @param {string} type - CSS modifier for color theming (e.g. 'modified', 'missing', 'in-sync')\n * @param {Array} endpoints - Items to render; section is hidden when empty\n * @param {Function} renderItem - (endpoint, idx) => ReactNode\n * @param {boolean} [defaultExpanded=false] - Fallback when no Redux state exists\n * @param {boolean} [expandableLayout=false] - Removes max-height scroll constraint on body\n * @param {ReactNode} [actions] - Header-right buttons (wrapped in a stopPropagation container)\n * @param {string} [subtitle] - Secondary text after the count\n * @param {ReactNode} [headerExtra] - Extra content shown in header only when collapsed\n * @param {string} collectionUid - Redux key for persisting expand/collapse state\n * @param {string} sectionKey - Redux key for persisting expand/collapse state\n */\nconst EndpointChangeSection = ({\n title,\n type,\n endpoints,\n defaultExpanded = false,\n actions,\n subtitle,\n renderItem,\n expandableLayout = false,\n headerExtra,\n collectionUid,\n sectionKey\n}) => {\n const dispatch = useDispatch();\n const reduxExpanded = useSelector((state) => {\n if (!collectionUid || !sectionKey) return undefined;\n return state.openapiSync?.tabUiState?.[collectionUid]?.expandedSections?.[sectionKey];\n });\n const isExpanded = reduxExpanded !== undefined ? reduxExpanded : defaultExpanded;\n\n if (endpoints.length === 0) return null;\n\n return (\n \n
\n )}\n {error && (\n \n Error: {error}\n
\n )}\n {diffData && !isLoading && !error && (\n \n {\n if (collectionUid && sectionKey) {\n dispatch(toggleSectionExpanded({ collectionUid, sectionKey }));\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n if (collectionUid && sectionKey) {\n dispatch(toggleSectionExpanded({ collectionUid, sectionKey }));\n }\n }\n }}\n >\n
\n {isExpanded && (\n e.stopPropagation()}>{actions}
}\n \n {endpoints.map((endpoint, idx) => renderItem(endpoint, idx))}\n
\n )}\n \n );\n};\n\nexport default EndpointChangeSection;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/OpenAPISyncHeader/index.js",
"content": "import { useState, useEffect } from 'react';\nimport { useSelector } from 'react-redux';\nimport { selectStoredSpecMeta } from 'providers/ReduxStore/slices/openapi-sync';\nimport {\n IconCopy,\n IconDotsVertical,\n IconUnlink,\n IconSettings,\n IconRefresh,\n IconCircleCheck,\n IconAlertTriangle\n} from '@tabler/icons';\nimport toast from 'react-hot-toast';\nimport Button from 'ui/Button';\nimport ActionIcon from 'ui/ActionIcon/index';\nimport MenuDropdown from 'ui/MenuDropdown';\nimport Help from 'components/Help';\nimport { isHttpUrl } from 'utils/url/index';\n\nconst OpenAPISyncHeader = ({\n collection, spec, sourceUrl, syncStatus, onViewSpec,\n onOpenSettings, onOpenDisconnect,\n onCheck, isLoading\n}) => {\n const sourceIsLocal = !isHttpUrl(sourceUrl);\n const canCheck = !!sourceUrl?.trim();\n\n // Resolve relative file paths to absolute for display\n const [displayPath, setDisplayPath] = useState(sourceUrl);\n useEffect(() => {\n if (sourceIsLocal && sourceUrl) {\n window.ipcRenderer.invoke('renderer:resolve-path', sourceUrl, collection.pathname)\n .then((resolved) => setDisplayPath(resolved))\n .catch(() => setDisplayPath(sourceUrl));\n } else {\n setDisplayPath(sourceUrl);\n }\n }, [sourceUrl, sourceIsLocal, collection.pathname]);\n\n const specMeta = useSelector(selectStoredSpecMeta(collection.uid));\n const title = specMeta?.title || spec?.info?.title || 'Unknown API';\n\n const copyUrl = async () => {\n if (!sourceUrl) return;\n try {\n if (sourceIsLocal) {\n const absolutePath = await window.ipcRenderer.invoke('renderer:resolve-path', sourceUrl, collection.pathname);\n await navigator.clipboard.writeText(absolutePath);\n } else {\n await navigator.clipboard.writeText(sourceUrl);\n }\n toast.success(sourceIsLocal ? 'Path copied to clipboard' : 'URL copied to clipboard');\n } catch (err) {\n console.error('Error copying to clipboard:', err);\n toast.error('Failed to copy to clipboard');\n }\n };\n\n const revealInFolder = async () => {\n if (!sourceUrl) return;\n try {\n const absolutePath = await window.ipcRenderer.invoke('renderer:resolve-path', sourceUrl, collection.pathname);\n await window.ipcRenderer.invoke('renderer:show-in-folder', absolutePath);\n } catch (err) {\n console.error('Error revealing in folder:', err);\n toast.error('Failed to open in file manager');\n }\n };\n\n const menuItems = [\n {\n id: 'settings',\n label: 'Edit connection settings',\n leftSection: IconSettings,\n onClick: onOpenSettings\n },\n {\n id: 'disconnect',\n label: 'Disconnect Sync',\n leftSection: IconUnlink,\n className: 'delete-item',\n onClick: onOpenDisconnect\n }\n ];\n\n return (\n \n
\n );\n};\n\nexport default OpenAPISyncHeader;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/OverviewSection/index.js",
"content": "import { useMemo } from 'react';\nimport { useSelector } from 'react-redux';\nimport { selectStoredSpecMeta } from 'providers/ReduxStore/slices/openapi-sync';\nimport { getTotalRequestCountInCollection } from 'utils/collections/';\nimport { countEndpoints } from '../utils';\nimport moment from 'moment';\nimport { IconCheck } from '@tabler/icons';\nimport Button from 'ui/Button';\nimport Help from 'components/Help';\n\nconst capitalize = (str) => str ? str.charAt(0).toUpperCase() + str.slice(1) : str;\n\nconst SUMMARY_CARDS = [\n {\n key: 'total',\n label: 'Total in Collection',\n color: 'blue',\n tooltip: 'Total endpoints in your collection'\n },\n {\n key: 'inSync',\n label: 'In Sync with Spec',\n color: 'green',\n tooltip: 'Endpoints that currently match the latest spec from the source'\n },\n {\n key: 'changed',\n label: 'Changed in Collection',\n color: 'muted',\n tooltip: 'Endpoints modified, deleted, or added locally since last sync',\n tab: 'collection-changes'\n },\n {\n key: 'pending',\n label: 'Spec Updates Pending',\n color: 'amber',\n tooltip: 'Spec changes available to sync to your collection',\n tab: 'spec-updates'\n }\n];\n\nconst OverviewSection = ({ collection, storedSpec, collectionDrift, specDrift, remoteDrift, onTabSelect, error, onOpenSettings }) => {\n const openApiSyncConfig = collection?.brunoConfig?.openapi?.[0];\n\n const reduxError = useSelector((state) => state.openapiSync?.collectionUpdates?.[collection.uid]?.error);\n const specMeta = useSelector(selectStoredSpecMeta(collection.uid));\n const activeError = error || reduxError;\n\n const version = specMeta?.version;\n const endpointCount = specMeta?.endpointCount ?? null;\n const lastSyncDate = openApiSyncConfig?.lastSyncDate;\n const groupBy = openApiSyncConfig?.groupBy || 'tags';\n const autoCheckEnabled = openApiSyncConfig?.autoCheck !== false;\n const autoCheckInterval = openApiSyncConfig?.autoCheckInterval || 5;\n\n // Endpoint Summary counts\n // Total: from collection items in Redux; In Sync: from remote spec comparison\n // Changed/Conflicts: compare against stored spec in AppData (0 on initial sync)\n const hasDriftData = collectionDrift && !collectionDrift.noStoredSpec;\n\n const totalInCollection = getTotalRequestCountInCollection(collection);\n\n const inSyncCount = remoteDrift\n ? (remoteDrift.inSync?.length || 0)\n : null;\n\n const changedInCollection = hasDriftData\n ? (collectionDrift.modified?.length || 0) + (collectionDrift.missing?.length || 0) + (collectionDrift.localOnly?.length || 0)\n : 0;\n\n const specUpdatesPending = hasDriftData\n ? (specDrift?.added?.length || 0) + (specDrift?.modified?.length || 0) + (specDrift?.removed?.length || 0)\n : (remoteDrift?.modified?.length || 0) + (remoteDrift?.missing?.length || 0);\n\n // Conflict count: endpoints modified in both spec and collection\n const conflictCount = hasDriftData && specDrift?.modified\n ? (() => {\n const localModifiedIds = new Set((collectionDrift.modified || []).map((ep) => ep.id));\n return specDrift.modified.filter((ep) => localModifiedIds.has(ep.id)).length;\n })()\n : 0;\n\n const summaryValues = {\n total: totalInCollection,\n inSync: inSyncCount,\n changed: changedInCollection,\n pending: activeError ? null : specDrift ? specUpdatesPending : null\n };\n\n const details = [\n { label: 'Spec Version', value: version ? `v${version}` : '–' },\n { label: 'Endpoints in Spec', value: endpointCount != null ? endpointCount : '–' },\n { label: 'Last Synced At', value: lastSyncDate ? moment(lastSyncDate).fromNow() : '–', tooltip: lastSyncDate ? moment(lastSyncDate).format('MMMM D, YYYY [at] h:mm A') : undefined },\n { label: 'Folder Grouping', value: capitalize(groupBy) },\n { label: 'Auto Check for Updates', value: autoCheckEnabled ? `Every ${autoCheckInterval} min` : 'Disabled' }\n ];\n\n const hasCollectionChanges = changedInCollection > 0;\n const hasSpecUpdates = specUpdatesPending > 0;\n\n const bannerState = useMemo(() => {\n const versionInfo = (specDrift?.storedVersion && specDrift?.newVersion && specDrift.storedVersion !== specDrift.newVersion)\n ? ` (v${specDrift.storedVersion} → v${specDrift.newVersion})`\n : '';\n\n if (activeError) {\n return {\n variant: 'danger',\n title: 'Failed to check for spec updates',\n subtitle: activeError,\n buttons: ['open-settings']\n };\n }\n if (specDrift?.storedSpecMissing && !lastSyncDate) {\n return {\n variant: 'warning',\n title: 'Initial sync required — your collection differs from the spec',\n subtitle: 'Review the changes and sync to bring your collection up to date.',\n buttons: ['review']\n };\n }\n if (hasSpecUpdates && hasCollectionChanges) {\n return {\n variant: 'warning',\n title: `OpenAPI spec has new updates${versionInfo} and the collection has changes`,\n subtitle: 'New or changed requests are available. Some collection changes may be overwritten.',\n buttons: ['sync', 'changes']\n };\n }\n if (hasSpecUpdates) {\n return {\n variant: 'warning',\n title: `OpenAPI spec has new updates${versionInfo}`,\n subtitle: 'New or changed requests are available.',\n buttons: ['sync']\n };\n }\n if (specDrift?.storedSpecMissing && lastSyncDate) {\n return {\n variant: 'warning',\n title: 'Last synced spec not found',\n subtitle: 'The last synced spec is missing in the storage. Restore the latest spec from the source to track collection changes.',\n buttons: ['spec-details']\n };\n }\n if (!hasDriftData) return null;\n if (hasCollectionChanges) {\n return {\n variant: 'muted',\n title: 'Collection has changes not in the spec',\n subtitle: 'Some requests have been modified or removed and no longer match the spec.',\n buttons: ['changes']\n };\n }\n return null;\n }, [activeError, hasDriftData, hasSpecUpdates, hasCollectionChanges, specDrift?.storedSpecMissing, specDrift?.storedVersion, specDrift?.newVersion, lastSyncDate]);\n\n return (\n \n
\n \n
\n \n {title}\n
\n \n \n View spec\n \n \n \n \n \n
\n \n {sourceIsLocal ? 'Source File:' : 'Source URL:'}\n {sourceIsLocal ? (\n \n {displayPath}\n \n ) : (\n \n {sourceUrl}\n \n )}\n \n
\n \n Linked Collection:\n {collection.name}\n {syncStatus === 'in-sync' && (\n
\n \n {bannerState && (\n
\n\n \n
\n )}\n\n \n
\n {bannerState.buttons.length > 0 && (\n \n {bannerState.variant === 'success'\n ?
\n {bannerState.subtitle && (\n {bannerState.subtitle}
\n )}\n\n {bannerState.buttons.includes('changes') && (\n onTabSelect('collection-changes')}\n >\n View Collection Changes\n \n )}\n {(bannerState.buttons.includes('sync') || bannerState.buttons.includes('review')) && (\n \n )}\n {bannerState.buttons.includes('spec-details') && (\n \n )}\n {bannerState.buttons.includes('open-settings') && (\n \n )}\n
\n )}\n Endpoint Summary
\n\n {SUMMARY_CARDS.map(({ key, label, tooltip, tab, color }) => {\n const count = summaryValues[key];\n const resolvedColor = count > 0 ? color : 'muted';\n const isClickable = tab && count > 0;\n return (\n onTabSelect(tab) : undefined}\n >\n \n {tooltip} \n \n
\n );\n })}\n \n {count != null ? count : '–'}\n {key === 'pending' && conflictCount > 0 && (\n ({conflictCount} {conflictCount === 1 ? 'conflict' : 'conflicts'})\n )}\n
\n \n {label}\n
\n Last Synced Spec Details
\n\n {details.map(({ label, value, tooltip }) => (\n
\n \n );\n};\n\nexport default OverviewSection;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/SpecDiffModal/index.js",
"content": "import { useRef, useEffect, useState } from 'react';\nimport { useTheme } from 'providers/Theme/index';\nimport { IconLoader2 } from '@tabler/icons';\nimport Modal from 'components/Modal';\nimport StatusBadge from 'ui/StatusBadge';\n\nconst SpecDiffModal = ({ specDrift, onClose }) => {\n const diffRef = useRef(null);\n const { displayedTheme } = useTheme();\n const [isRendering, setIsRendering] = useState(true);\n\n const addedCount = specDrift?.added?.length || 0;\n const modifiedCount = specDrift?.modified?.length || 0;\n const removedCount = specDrift?.removed?.length || 0;\n\n const versionLabel = specDrift?.versionChanged\n ? `v${specDrift.storedVersion || '?'} → v${specDrift.newVersion}`\n : null;\n\n useEffect(() => {\n const { Diff2Html } = window;\n if (!diffRef?.current || !Diff2Html || !specDrift?.unifiedDiff) {\n setIsRendering(false);\n return;\n }\n setIsRendering(true);\n const diffHtml = Diff2Html.html(specDrift.unifiedDiff, {\n drawFileList: false,\n matching: 'lines',\n outputFormat: 'side-by-side',\n synchronisedScroll: true,\n highlight: true,\n renderNothingWhenEmpty: false,\n colorScheme: displayedTheme\n });\n // Safe: Diff2Html is loaded from a local static bundle (public/static/diff2Html.js)\n diffRef.current.innerHTML = diffHtml;\n setIsRendering(false);\n }, [displayedTheme, specDrift?.unifiedDiff]);\n\n return (\n \n
\n ))}\n {label}
\n \n {value}\n {tooltip && (\n {tooltip} \n )}\n
\n \n
\n \n );\n};\n\nexport default SpecDiffModal;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/SpecStatusSection/index.js",
"content": "import { useMemo } from 'react';\nimport { useSelector } from 'react-redux';\nimport {\n IconCheck,\n IconRefresh,\n IconAlertTriangle,\n IconClock\n} from '@tabler/icons';\nimport Button from 'ui/Button';\nimport StatusBadge from 'ui/StatusBadge';\nimport ConfirmSyncModal from '../ConfirmSyncModal';\nimport SyncReviewPage from '../SyncReviewPage';\nimport useSyncFlow from '../hooks/useSyncFlow';\n\nconst SpecStatusSection = ({\n collection, sourceUrl,\n isLoading, error, setError, fileNotFound,\n specDrift, storedSpec,\n collectionDrift, remoteDrift,\n onCheck, onOpenSettings\n}) => {\n const openApiSyncConfig = collection?.brunoConfig?.openapi?.[0];\n const lastCheckedAt = useSelector((state) => state.openapiSync?.collectionUpdates?.[collection.uid]?.lastChecked);\n\n const {\n isSyncing, showConfirmModal, confirmGroups,\n handleRestoreSpec, handleApplySync, cancelConfirmModal, handleConfirmModalSync\n } = useSyncFlow({\n collection, specDrift, remoteDrift, collectionDrift,\n setError, checkForUpdates: onCheck\n });\n\n const lastSyncedAt = openApiSyncConfig?.lastSyncDate;\n\n const hasRemoteUpdates = remoteDrift && (\n (remoteDrift.missing?.length || 0)\n + (remoteDrift.modified?.length || 0)\n + (remoteDrift.localOnly?.length || 0)\n ) > 0;\n\n const bannerState = useMemo(() => {\n if (fileNotFound) {\n return { variant: 'danger', message: `Source file not found at ${sourceUrl}`, actions: ['open-settings'] };\n }\n if (error || specDrift?.isValid === false) {\n return { variant: 'danger', message: error || specDrift?.error || 'Invalid OpenAPI specification', actions: ['open-settings'] };\n }\n if (!specDrift) {\n return null;\n }\n if (specDrift.storedSpecMissing && !hasRemoteUpdates) {\n return null;\n }\n const hasEndpointUpdates = specDrift.storedSpecMissing\n ? hasRemoteUpdates\n : (specDrift.added?.length || 0) + (specDrift.modified?.length || 0) + (specDrift.removed?.length || 0) > 0;\n if (hasEndpointUpdates) {\n const versionInfo = (specDrift.storedVersion && specDrift.newVersion && specDrift.storedVersion !== specDrift.newVersion)\n ? ` (v${specDrift.storedVersion} → v${specDrift.newVersion})`\n : '';\n return {\n variant: 'warning', message: `OpenAPI spec has been updated${versionInfo}`, actions: [],\n changes: { added: specDrift.added?.length || 0, modified: specDrift.modified?.length || 0, removed: specDrift.removed?.length || 0 }\n };\n }\n return null;\n }, [fileNotFound, error, sourceUrl, specDrift, lastSyncedAt, storedSpec, lastCheckedAt, hasRemoteUpdates]);\n return (\n <>\n {bannerState && (\n \n {modifiedCount > 0 && Updated: {modifiedCount} }\n {addedCount > 0 && Added: {addedCount} }\n {removedCount > 0 && Removed: {removedCount} }\n {versionLabel && {versionLabel} }\n
\n\n \n {specDrift?.storedSpecMissing\n ? 'The current spec file is missing. The full remote spec is shown below.'\n : 'Side-by-side diff of your current spec vs the updated spec from the spec URL.'}\n
\n\n\n
\n \n {specDrift?.unifiedDiff ? (\n <>\n
\n \n {specDrift?.storedSpecMissing ? 'Current Spec (missing)' : 'Current Spec'}\n Updated Spec\n
\n {isRendering && (\n \n
\n )}\n \n \n ) : (\n No text diff available.
\n )}\n \n\n
\n )}\n\n {(error || fileNotFound || specDrift?.isValid === false) ? (\n \n
\n \n {bannerState.variant === 'success'\n ? {bannerState.changes.modified} {bannerState.changes.modified > 1 ? 'endpoints' : 'endpoint'} updated }\n {bannerState.changes.added > 0 && {bannerState.changes.added} {bannerState.changes.added > 1 ? 'endpoints' : 'endpoint'} added }\n {bannerState.changes.removed > 0 && {bannerState.changes.removed} {bannerState.changes.removed > 1 ? 'endpoints' : 'endpoint'} removed }\n \n )}\n
\n v{bannerState.version}\n )}\n {bannerState.lastChecked && (\n · Checked {bannerState.lastChecked}\n )}\n \n {bannerState.changes && (\n \n {bannerState.changes.modified > 0 && \n {bannerState.actions.includes('open-settings') && (\n \n )}\n
\n \n
\n ) : specDrift?.storedSpecMissing && openApiSyncConfig?.lastSyncDate && !hasRemoteUpdates ? (\n Unable to check for updates
\nFix the connection issue above and check again.
\n\n
\n ) : (\n No updates from the spec
\nThe spec endpoints have not been updated since the last sync. You can restore the spec file to track local collection changes.
\n \n\n
\n )}\n\n {showConfirmModal && (\n \n {hasRemoteUpdates && (\n setShowConfirmation(false)}\n onSync={handleConfirmApply}\n isSyncing={isSyncing}\n />\n )}\n\n {showSpecDiffModal && (\n setShowSpecDiffModal(false)}\n />\n )}\n
\n );\n};\n\nexport default SyncReviewPage;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/hooks/useEndpointActions.js",
"content": "import { useState } from 'react';\nimport toast from 'react-hot-toast';\n\nconst useEndpointActions = (collection, collectionDrift, reloadDrift) => {\n const [pendingAction, setPendingAction] = useState(null);\n\n // Action execution helper — runs IPC call(s), shows toast, reloads drift\n const executeEndpointAction = async (ipcCalls, successMsg, errorMsg) => {\n try {\n const { ipcRenderer } = window;\n if (Array.isArray(ipcCalls[0])) {\n await Promise.all(ipcCalls.map(([channel, params]) => ipcRenderer.invoke(channel, params)));\n } else {\n const [channel, params] = ipcCalls;\n await ipcRenderer.invoke(channel, params);\n }\n toast.success(successMsg);\n await reloadDrift();\n } catch (err) {\n console.error(`Error: ${errorMsg}`, err);\n toast.error(errorMsg);\n }\n };\n\n // Confirmation handlers — show modal before executing\n const handleResetEndpoint = (endpoint) => {\n setPendingAction({\n type: 'reset-endpoint',\n title: 'Reset Endpoint',\n message: `Are you sure you want to reset \"${endpoint.method} ${endpoint.path}\" to match the spec? Your local changes will be lost.`,\n endpoint\n });\n };\n\n const handleResetAllModified = () => {\n if (!collectionDrift?.modified?.length) return;\n setPendingAction({\n type: 'reset-all-modified',\n title: 'Reset All Modified',\n message: `Are you sure you want to reset ${collectionDrift.modified.length} modified endpoint(s) to match the spec? Your local changes will be lost.`\n });\n };\n\n const handleDeleteEndpoint = (endpoint) => {\n setPendingAction({\n type: 'delete-endpoint',\n title: 'Delete Endpoint',\n message: `Are you sure you want to delete \"${endpoint.method} ${endpoint.path}\"? This action cannot be undone.`,\n endpoint\n });\n };\n\n const handleDeleteAllLocalOnly = () => {\n if (!collectionDrift?.localOnly?.length) return;\n setPendingAction({\n type: 'delete-all-local',\n title: 'Delete All Local Endpoints',\n message: `Are you sure you want to delete ${collectionDrift.localOnly.length} local-only endpoint(s)? This action cannot be undone.`\n });\n };\n\n const handleRevertAllChanges = () => {\n const modifiedCount = collectionDrift?.modified?.length || 0;\n const missingCount = collectionDrift?.missing?.length || 0;\n const localOnlyCount = collectionDrift?.localOnly?.length || 0;\n\n setPendingAction({\n type: 'revert-all',\n title: 'Revert All Changes',\n message: `Are you sure you want to revert all changes? This will reset ${modifiedCount} modified, restore ${missingCount} missing, and delete ${localOnlyCount} local-only endpoint(s).`\n });\n };\n\n const handleAddMissingEndpoint = (endpoint) => {\n setPendingAction({\n type: 'restore-endpoint',\n title: 'Restore Endpoint',\n message: `Are you sure you want to restore \"${endpoint.method} ${endpoint.path}\" to your collection?`,\n endpoint\n });\n };\n\n const handleAddAllMissing = () => {\n if (!collectionDrift?.missing?.length) return;\n setPendingAction({\n type: 'restore-all-missing',\n title: 'Restore All Missing',\n message: `Are you sure you want to restore ${collectionDrift.missing.length} missing endpoint(s) to your collection?`\n });\n };\n\n // Execute confirmed action\n const confirmPendingAction = async () => {\n if (!pendingAction) return;\n\n const { type, endpoint } = pendingAction;\n setPendingAction(null);\n\n switch (type) {\n case 'reset-endpoint':\n return executeEndpointAction(\n ['renderer:reset-endpoints-to-spec', { collectionPath: collection.pathname, endpoints: [endpoint] }],\n `Reset ${endpoint.method} ${endpoint.path} to spec`,\n 'Failed to reset endpoint'\n );\n case 'reset-all-modified':\n return executeEndpointAction(\n ['renderer:reset-endpoints-to-spec', { collectionPath: collection.pathname, endpoints: collectionDrift.modified }],\n `Reset ${collectionDrift.modified.length} endpoints to spec`,\n 'Failed to reset endpoints'\n );\n case 'delete-endpoint':\n return executeEndpointAction(\n ['renderer:delete-endpoints', { collectionPath: collection.pathname, collectionUid: collection.uid, endpoints: [endpoint] }],\n `Deleted ${endpoint.method} ${endpoint.path}`,\n 'Failed to delete endpoint'\n );\n case 'delete-all-local':\n return executeEndpointAction(\n ['renderer:delete-endpoints', { collectionPath: collection.pathname, collectionUid: collection.uid, endpoints: collectionDrift.localOnly }],\n `Deleted ${collectionDrift.localOnly.length} local-only endpoints`,\n 'Failed to delete endpoints'\n );\n case 'revert-all': {\n const calls = [];\n if (collectionDrift?.modified?.length > 0) {\n calls.push(['renderer:reset-endpoints-to-spec', { collectionPath: collection.pathname, endpoints: collectionDrift.modified }]);\n }\n if (collectionDrift?.missing?.length > 0) {\n calls.push(['renderer:add-missing-endpoints', { collectionPath: collection.pathname, endpoints: collectionDrift.missing }]);\n }\n if (collectionDrift?.localOnly?.length > 0) {\n calls.push(['renderer:delete-endpoints', { collectionPath: collection.pathname, collectionUid: collection.uid, endpoints: collectionDrift.localOnly }]);\n }\n return executeEndpointAction(calls, 'All changes discarded successfully', 'Failed to discard changes');\n }\n case 'restore-endpoint':\n return executeEndpointAction(\n ['renderer:add-missing-endpoints', { collectionPath: collection.pathname, endpoints: [endpoint] }],\n `Added ${endpoint.method} ${endpoint.path} to collection`,\n 'Failed to add endpoint'\n );\n case 'restore-all-missing':\n return executeEndpointAction(\n ['renderer:add-missing-endpoints', { collectionPath: collection.pathname, endpoints: collectionDrift.missing }],\n `Added ${collectionDrift.missing.length} endpoints to collection`,\n 'Failed to add endpoints'\n );\n }\n };\n\n return {\n pendingAction, setPendingAction,\n confirmPendingAction,\n handleResetEndpoint,\n handleResetAllModified,\n handleDeleteEndpoint,\n handleDeleteAllLocalOnly,\n handleRevertAllChanges,\n handleAddMissingEndpoint,\n handleAddAllMissing\n };\n};\n\nexport default useEndpointActions;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/hooks/useOpenAPISync.js",
"content": "import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport toast from 'react-hot-toast';\nimport { addTab, focusTab, closeTabs } from 'providers/ReduxStore/slices/tabs';\nimport { getDefaultRequestPaneTab } from 'utils/collections';\nimport { clearCollectionState, setCollectionUpdate, setStoredSpecMeta } from 'providers/ReduxStore/slices/openapi-sync';\nimport { fetchAndValidateApiSpecFromUrl } from 'utils/importers/common';\nimport { isHttpUrl } from 'utils/url/index';\nimport { flattenItems } from 'utils/collections/index';\nimport { formatIpcError } from 'utils/common/error';\nimport { countEndpoints } from '../utils';\n\nconst useOpenAPISync = (collection) => {\n const dispatch = useDispatch();\n const openApiSyncConfig = collection?.brunoConfig?.openapi?.[0];\n\n // Core state\n const [sourceUrl, setSourceUrl] = useState(openApiSyncConfig?.sourceUrl || '');\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [fileNotFound, setFileNotFound] = useState(false);\n const [specDrift, setSpecDrift] = useState(null);\n // Collection drift state\n const [collectionDrift, setCollectionDrift] = useState(null);\n const [remoteDrift, setRemoteDrift] = useState(null);\n const [isDriftLoading, setIsDriftLoading] = useState(false);\n const [storedSpec, setStoredSpec] = useState(null);\n\n const tabs = useSelector((state) => state.tabs.tabs);\n\n const isConfigured = !!openApiSyncConfig?.sourceUrl;\n\n const updateStoredSpec = (spec) => {\n setStoredSpec(spec);\n dispatch(setStoredSpecMeta({\n collectionUid: collection.uid,\n title: spec?.info?.title || null,\n version: spec?.info?.version || null,\n endpointCount: spec ? countEndpoints(spec) : null\n }));\n };\n\n // Flatten collection items including nested items in folders\n const allHttpItems = useMemo(() => {\n return flattenItems(collection?.items || []).filter((item) => item.type === 'http-request');\n }, [collection?.items]);\n\n const httpItemCount = useMemo(() => {\n return String(allHttpItems.filter((item) => !item.partial && !item.loading).length);\n }, [allHttpItems]);\n\n // Map endpoint drift id (METHOD:path) → collection item uid\n const endpointUidMap = useMemo(() => {\n const normalize = (url) => (url || '')\n .replace(/\\{\\{[^}]+\\}\\}/g, '')\n .replace(/^https?:\\/\\/[^/]+/, '')\n .replace(/\\?.*$/, '')\n .replace(/{([^}]+)}/g, ':$1')\n .replace(/\\/+/g, '/')\n .replace(/\\/$/, '');\n const map = {};\n allHttpItems.forEach((item) => {\n if (item.request?.method && item.request?.url) {\n const key = `${item.request.method.toUpperCase()}:${normalize(item.request.url)}`;\n map[key] = item.uid;\n }\n });\n return map;\n }, [allHttpItems]);\n\n // Open an endpoint in a tab (focus existing or add new), same as sidebar click\n const openEndpointInTab = (endpointId) => {\n const itemUid = endpointUidMap[endpointId];\n if (!itemUid) return;\n const existingTab = tabs.find((t) => t.uid === itemUid);\n if (existingTab) {\n dispatch(focusTab({ uid: itemUid }));\n } else {\n const item = allHttpItems.find((i) => i.uid === itemUid);\n dispatch(addTab({\n uid: itemUid,\n collectionUid: collection.uid,\n requestPaneTab: item ? getDefaultRequestPaneTab(item) : undefined,\n type: 'request'\n }));\n }\n };\n\n const prevItemCountRef = useRef(httpItemCount);\n const isDriftLoadingRef = useRef(false);\n const specDriftRef = useRef(specDrift);\n\n const loadCollectionDrift = async ({ clear = false } = {}) => {\n if (isDriftLoadingRef.current && !clear) return;\n isDriftLoadingRef.current = true;\n if (clear) setCollectionDrift(null);\n setIsDriftLoading(true);\n try {\n const { ipcRenderer } = window;\n const result = await ipcRenderer.invoke('renderer:get-collection-drift', {\n collectionPath: collection.pathname\n });\n\n if (!result.error) {\n setCollectionDrift(result);\n }\n } catch (err) {\n console.error('Error loading collection drift:', err);\n } finally {\n isDriftLoadingRef.current = false;\n setIsDriftLoading(false);\n }\n };\n\n const checkForUpdates = async ({ sourceUrlOverride } = {}) => {\n const effectiveUrl = (sourceUrlOverride ?? sourceUrl).trim();\n if (!effectiveUrl) {\n setError('Please enter a URL or select a file');\n return;\n }\n\n setIsLoading(true);\n setError(null);\n setFileNotFound(false);\n setSpecDrift(null);\n setRemoteDrift(null);\n setCollectionDrift(null);\n\n try {\n const { ipcRenderer } = window;\n const result = await ipcRenderer.invoke('renderer:compare-openapi-specs', {\n collectionUid: collection.uid,\n collectionPath: collection.pathname,\n sourceUrl: effectiveUrl,\n environmentContext: {\n activeEnvironmentUid: collection.activeEnvironmentUid,\n environments: collection.environments,\n runtimeVariables: collection.runtimeVariables,\n globalEnvironmentVariables: collection.globalEnvironmentVariables\n }\n });\n\n if (result.errorCode === 'SOURCE_FILE_NOT_FOUND') {\n setFileNotFound(true);\n setError(result.error);\n return;\n }\n\n setSpecDrift(result);\n updateStoredSpec(result.storedSpec || null);\n\n // Update Redux store so toolbar status stays in sync\n dispatch(setCollectionUpdate({\n collectionUid: collection.uid,\n hasUpdates: result.isValid !== false && result.hasChanges,\n diff: result,\n error: result.isValid === false ? result.error : null\n }));\n\n // Fetch remote drift (remote spec vs collection) for collection-centric categorization\n if (result.newSpec) {\n const remoteComparison = await ipcRenderer.invoke('renderer:get-collection-drift', {\n collectionPath: collection.pathname,\n compareSpec: result.newSpec\n });\n if (remoteComparison.error) {\n console.error('Error computing remote drift:', remoteComparison.error);\n setError(remoteComparison.error);\n } else {\n setRemoteDrift(remoteComparison);\n }\n }\n\n // Refresh collection drift (stored spec vs collection) — skip if no stored spec\n if (!result.storedSpecMissing) {\n await loadCollectionDrift({ clear: true });\n }\n } catch (err) {\n console.error('Error checking for updates:', err);\n setError(formatIpcError(err) || 'Failed to check for updates');\n dispatch(setCollectionUpdate({\n collectionUid: collection.uid,\n hasUpdates: false,\n diff: null,\n error: formatIpcError(err) || 'Failed to check for updates'\n }));\n } finally {\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n if (isConfigured) {\n checkForUpdates();\n }\n }, [isConfigured]);\n\n // Reload drift when collection items change (e.g., endpoint deleted from sidebar)\n useEffect(() => {\n if (prevItemCountRef.current !== httpItemCount && isConfigured) {\n prevItemCountRef.current = httpItemCount;\n loadCollectionDrift();\n }\n }, [httpItemCount, isConfigured]);\n\n const handleConnect = async () => {\n const trimmedUrl = sourceUrl.trim();\n if (!trimmedUrl) {\n setError('Please enter a URL or select a file');\n return;\n }\n\n setIsLoading(true);\n setError(null);\n setFileNotFound(false);\n\n try {\n // Validate it's a valid OpenAPI spec before proceeding (URL only; files are validated at picker)\n if (isHttpUrl(trimmedUrl)) {\n try {\n const { specType } = await fetchAndValidateApiSpecFromUrl({ url: trimmedUrl });\n if (specType !== 'openapi') {\n setError('The URL does not point to a valid OpenAPI 3.x specification');\n return;\n }\n } catch {\n setError('The URL does not point to a valid OpenAPI 3.x specification');\n return;\n }\n }\n\n const { ipcRenderer } = window;\n\n // Validate the spec first\n const result = await ipcRenderer.invoke('renderer:compare-openapi-specs', {\n collectionUid: collection.uid,\n collectionPath: collection.pathname,\n sourceUrl: trimmedUrl,\n environmentContext: {\n activeEnvironmentUid: collection.activeEnvironmentUid,\n environments: collection.environments,\n runtimeVariables: collection.runtimeVariables,\n globalEnvironmentVariables: collection.globalEnvironmentVariables\n }\n });\n\n if (result.isValid === false) {\n setSpecDrift(result);\n setError(result.error);\n return;\n }\n\n // Save sync config (no spec file yet — deferred to first sync unless collection already matches)\n await ipcRenderer.invoke('renderer:update-openapi-sync-config', {\n collectionPath: collection.pathname,\n config: {\n sourceUrl: trimmedUrl,\n groupBy: 'tags',\n autoCheck: true,\n autoCheckInterval: 5\n }\n });\n\n // Check if collection already matches the spec\n if (result.newSpec) {\n const drift = await ipcRenderer.invoke('renderer:get-collection-drift', {\n collectionPath: collection.pathname,\n compareSpec: result.newSpec\n });\n\n const isInSync = !drift.error\n && (!drift.missing || drift.missing.length === 0)\n && (!drift.modified || drift.modified.length === 0)\n && (!drift.localOnly || drift.localOnly.length === 0);\n\n if (isInSync) {\n // Collection matches — save spec file silently to complete setup\n await ipcRenderer.invoke('renderer:save-openapi-spec', {\n collectionPath: collection.pathname,\n specContent: result.newSpecContent || JSON.stringify(result.newSpec, null, 2)\n });\n }\n }\n\n toast.success('OpenAPI sync connected');\n } catch (err) {\n console.error('Error connecting OpenAPI sync:', err);\n setError(formatIpcError(err) || 'Failed to connect');\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleDisconnect = async () => {\n try {\n const { ipcRenderer } = window;\n await ipcRenderer.invoke('renderer:remove-openapi-sync-config', {\n collectionPath: collection.pathname,\n deleteSpecFile: true\n });\n setSourceUrl('');\n setSpecDrift(null);\n setCollectionDrift(null);\n setRemoteDrift(null);\n setStoredSpec(null);\n\n // Clear Redux state for this collection\n dispatch(clearCollectionState({ collectionUid: collection.uid }));\n\n // Close the openapi-spec tab if open (spec file no longer exists)\n const specTab = tabs.find((t) => t.collectionUid === collection.uid && t.type === 'openapi-spec');\n if (specTab) {\n dispatch(closeTabs({ tabUids: [specTab.uid] }));\n }\n\n toast.success('OpenAPI sync disconnected');\n } catch (err) {\n console.error('Error disconnecting sync:', err);\n toast.error('Failed to disconnect sync');\n }\n };\n\n // Keep ref in sync so reloadDrift always reads the latest specDrift\n specDriftRef.current = specDrift;\n\n // Reload both drifts — passed to useEndpointActions so it can refresh after actions.\n // Uses specDriftRef to avoid stale closure over specDrift state.\n const reloadDrift = async () => {\n await loadCollectionDrift({ clear: true });\n // Refresh remoteDrift if we have a remote spec cached from the last check\n const currentSpecDrift = specDriftRef.current;\n if (currentSpecDrift?.newSpec) {\n try {\n const { ipcRenderer } = window;\n const remoteComparison = await ipcRenderer.invoke('renderer:get-collection-drift', {\n collectionPath: collection.pathname,\n compareSpec: currentSpecDrift.newSpec\n });\n if (!remoteComparison.error) {\n setRemoteDrift(remoteComparison);\n }\n } catch (err) {\n console.error('Error reloading remote drift:', err);\n }\n }\n };\n\n // Save connection settings from the modal\n const handleSaveSettings = async ({ sourceUrl: newUrl, autoCheck, autoCheckInterval }) => {\n const sourceUrlChanged = newUrl !== openApiSyncConfig?.sourceUrl;\n\n // Validate the spec before saving if source URL changed (URL only; files are validated at picker)\n // Kept outside try-catch so validation errors propagate to the caller and the modal stays open\n if (sourceUrlChanged && isHttpUrl(newUrl)) {\n let specType;\n try {\n ({ specType } = await fetchAndValidateApiSpecFromUrl({ url: newUrl }));\n } catch {\n toast.error('The URL does not point to a valid OpenAPI 3.x specification');\n throw new Error('Invalid OpenAPI specification');\n }\n if (specType !== 'openapi') {\n toast.error('The URL does not point to a valid OpenAPI 3.x specification');\n throw new Error('Invalid OpenAPI specification');\n }\n }\n\n try {\n const { ipcRenderer } = window;\n\n await ipcRenderer.invoke('renderer:update-openapi-sync-config', {\n collectionPath: collection.pathname,\n config: {\n sourceUrl: newUrl,\n autoCheck,\n autoCheckInterval\n }\n });\n setSourceUrl(newUrl);\n setFileNotFound(false);\n toast.success('Settings saved');\n // Re-check with new settings — pass newUrl directly to avoid stale closure\n await checkForUpdates({ sourceUrlOverride: newUrl });\n } catch (err) {\n console.error('Error saving settings:', err);\n toast.error('Failed to save settings');\n }\n };\n\n return {\n // State\n sourceUrl, setSourceUrl,\n isLoading,\n error, setError,\n fileNotFound,\n specDrift,\n collectionDrift,\n remoteDrift,\n isDriftLoading,\n storedSpec,\n\n // Handlers\n checkForUpdates,\n handleConnect,\n handleDisconnect,\n handleSaveSettings,\n openEndpointInTab,\n reloadDrift\n };\n};\n\nexport default useOpenAPISync;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/hooks/useSyncFlow.js",
"content": "import { useState, useMemo } from 'react';\nimport { useDispatch } from 'react-redux';\nimport toast from 'react-hot-toast';\nimport { clearCollectionUpdate } from 'providers/ReduxStore/slices/openapi-sync';\nimport { formatIpcError } from 'utils/common/error';\n\nconst useSyncFlow = ({\n collection, specDrift, remoteDrift, collectionDrift,\n setError, checkForUpdates\n}) => {\n const dispatch = useDispatch();\n\n const [pendingSyncMode, setPendingSyncMode] = useState(null);\n const [showConfirmModal, setShowConfirmModal] = useState(false);\n const [isSyncing, setIsSyncing] = useState(false);\n\n const performSync = async (selections = { localOnlyIds: [], endpointDecisions: {} }, mode = 'sync') => {\n setShowConfirmModal(false);\n setIsSyncing(true);\n setError(null);\n\n const {\n localOnlyIds = [], endpointDecisions: decisions = {},\n newToCollection, specUpdates, resolvedConflicts, localChangesToReset\n } = selections;\n\n try {\n const { ipcRenderer } = window;\n\n let filteredDiff;\n let localOnlyToRemove;\n let driftedToReset;\n\n if (newToCollection) {\n // Called from SyncReviewPage with categorized remoteDrift data\n filteredDiff = {\n ...specDrift,\n added: newToCollection,\n modified: [...(specUpdates || []), ...(resolvedConflicts || [])],\n removed: [] // Removals handled via localOnlyToRemove\n };\n\n localOnlyToRemove = localOnlyIds.length > 0\n ? (remoteDrift?.localOnly || []).filter((ep) => localOnlyIds.includes(ep.id))\n : [];\n\n driftedToReset = localChangesToReset || [];\n } else {\n // Called from \"Sync Now\" (skip review) or ConfirmSyncModal — use specDrift directly\n filteredDiff = {\n ...specDrift,\n removed: [] // Removals handled via localOnlyToRemove\n };\n\n localOnlyToRemove = localOnlyIds.length > 0\n ? (remoteDrift?.localOnly || collectionDrift?.localOnly || []).filter((ep) => localOnlyIds.includes(ep.id))\n : [];\n\n driftedToReset = collectionDrift?.modified?.filter((ep) => {\n const decision = decisions[ep.id];\n return decision === 'accept-incoming';\n }) || [];\n }\n\n await ipcRenderer.invoke('renderer:apply-openapi-sync', {\n collectionUid: collection.uid,\n collectionPath: collection.pathname,\n addNewRequests: mode !== 'spec-only',\n removeDeletedRequests: localOnlyIds.length > 0,\n diff: filteredDiff,\n localOnlyToRemove,\n driftedToReset,\n mode,\n endpointDecisions: decisions\n });\n\n setPendingSyncMode(null);\n\n dispatch(clearCollectionUpdate({ collectionUid: collection.uid }));\n toast.success(\n mode === 'spec-only' ? 'Spec updated successfully'\n : mode === 'reset' ? 'Collection reset to spec successfully'\n : 'Collection synced successfully'\n );\n\n // Re-check to show \"up to date\" state\n await checkForUpdates();\n } catch (err) {\n console.error('Error syncing collection:', err);\n setError(formatIpcError(err) || 'Failed to sync collection');\n } finally {\n setIsSyncing(false);\n }\n };\n\n const handleSyncNow = () => {\n if (!remoteDrift) return;\n setPendingSyncMode('sync');\n setShowConfirmModal(true);\n };\n\n const handleApplySync = (selections) => {\n const mode = pendingSyncMode || 'sync';\n setPendingSyncMode(null);\n performSync(selections, mode);\n };\n\n const cancelConfirmModal = () => {\n setShowConfirmModal(false);\n setPendingSyncMode(null);\n };\n\n // Only treat endpoints as spec changes if they actually changed in the spec\n // (not locally-added/deleted endpoints that were never in or removed from the spec)\n const specAddedIds = useMemo(() => {\n return new Set((specDrift?.added || []).map((ep) => ep.id));\n }, [specDrift]);\n\n const specRemovedIds = useMemo(() => {\n return new Set((specDrift?.removed || []).map((ep) => ep.id));\n }, [specDrift]);\n\n const handleRestoreSpec = () => {\n const localOnlyIds = (remoteDrift?.localOnly || [])\n .filter((ep) => specRemovedIds.has(ep.id))\n .map((ep) => ep.id);\n performSync({ localOnlyIds, endpointDecisions: {} }, 'sync');\n };\n\n const handleConfirmModalSync = () => {\n const localOnlyIds = (remoteDrift?.localOnly || [])\n .filter((ep) => specRemovedIds.has(ep.id))\n .map((ep) => ep.id);\n performSync({\n localOnlyIds,\n endpointDecisions: {}\n }, pendingSyncMode || 'sync');\n };\n\n const confirmGroups = useMemo(() => {\n if (!remoteDrift) return [];\n const groups = [];\n const actuallyAdded = (remoteDrift.missing || []).filter((ep) => specAddedIds.has(ep.id));\n if (actuallyAdded.length > 0) {\n groups.push({ label: 'New endpoints to add', type: 'add', endpoints: actuallyAdded });\n }\n if (remoteDrift.modified?.length > 0) {\n groups.push({ label: 'Endpoints to update', type: 'update', endpoints: remoteDrift.modified });\n }\n const actuallyRemoved = (remoteDrift.localOnly || []).filter((ep) => specRemovedIds.has(ep.id));\n if (actuallyRemoved.length > 0) {\n groups.push({ label: 'Endpoints to delete', type: 'remove', endpoints: actuallyRemoved });\n }\n return groups;\n }, [remoteDrift, specAddedIds, specRemovedIds]);\n\n return {\n isSyncing, showConfirmModal, confirmGroups,\n handleSyncNow, handleRestoreSpec,\n handleApplySync, cancelConfirmModal, handleConfirmModalSync\n };\n};\n\nexport default useSyncFlow;\n"
},
{
"path": "packages/bruno-app/src/components/OpenAPISyncTab/index.js",
"content": "import { useState, useMemo, useCallback } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { v4 as uuid } from 'uuid';\nimport { addTab } from 'providers/ReduxStore/slices/tabs';\nimport { setTabUiState } from 'providers/ReduxStore/slices/openapi-sync';\nimport ResponsiveTabs from 'ui/ResponsiveTabs';\nimport StyledWrapper from './StyledWrapper';\nimport OpenAPISyncHeader from './OpenAPISyncHeader';\nimport ConnectSpecForm from './ConnectSpecForm';\nimport SpecStatusSection from './SpecStatusSection';\nimport CollectionStatusSection from './CollectionStatusSection';\nimport ConnectionSettingsModal from './ConnectionSettingsModal';\nimport DisconnectSyncModal from './DisconnectSyncModal';\nimport OverviewSection from './OverviewSection';\nimport useOpenAPISync from './hooks/useOpenAPISync';\n\nconst OpenAPISyncTab = ({ collection }) => {\n const {\n sourceUrl, setSourceUrl,\n isLoading,\n error, setError,\n fileNotFound,\n specDrift,\n collectionDrift,\n remoteDrift,\n isDriftLoading,\n storedSpec,\n checkForUpdates,\n handleConnect,\n handleDisconnect,\n handleSaveSettings,\n openEndpointInTab,\n reloadDrift\n } = useOpenAPISync(collection);\n\n const dispatch = useDispatch();\n const openApiSyncConfig = collection?.brunoConfig?.openapi?.[0];\n const isConfigured = !!openApiSyncConfig?.sourceUrl;\n\n const handleViewSpec = () => {\n dispatch(addTab({\n uid: uuid(),\n collectionUid: collection.uid,\n type: 'openapi-spec'\n }));\n };\n\n const [showSettingsModal, setShowSettingsModal] = useState(false);\n const [showDisconnectModal, setShowDisconnectModal] = useState(false);\n const activeTab = useSelector((state) => state.openapiSync?.tabUiState?.[collection.uid]?.activeTab) || 'overview';\n const setActiveTab = useCallback((tab) => {\n dispatch(setTabUiState({ collectionUid: collection.uid, activeTab: tab }));\n }, [dispatch, collection.uid]);\n\n const hasDriftData = collectionDrift && !collectionDrift.noStoredSpec;\n const collectionChangesCount = hasDriftData\n ? (collectionDrift.modified?.length || 0) + (collectionDrift.missing?.length || 0) + (collectionDrift.localOnly?.length || 0)\n : 0;\n const specUpdatesCount = hasDriftData\n ? (specDrift?.added?.length || 0) + (specDrift?.modified?.length || 0) + (specDrift?.removed?.length || 0)\n : (remoteDrift?.modified?.length || 0) + (remoteDrift?.missing?.length || 0);\n\n const syncStatus = (() => {\n if (isLoading) return 'loading';\n if (error) return 'not-in-sync';\n if (!hasDriftData) return null;\n if (collectionChangesCount > 0 || specUpdatesCount > 0) return 'not-in-sync';\n return 'in-sync';\n })();\n\n const syncTabs = useMemo(() => [\n { key: 'overview', label: 'Overview' },\n {\n key: 'collection-changes',\n label: 'Collection Changes',\n indicator: collectionChangesCount > 0 ? {collectionChangesCount} : null\n },\n {\n key: 'spec-updates',\n label: 'Spec Updates',\n indicator: specUpdatesCount > 0 ? {specUpdatesCount} : null\n }\n ], [collectionChangesCount, specUpdatesCount]);\n\n return (\n \n
\n )}\n\n \n
\n \n
\n {(specDrift?.unifiedDiff || decidableEndpoints.length > 0) && (\n Review Changes
\n {totalChanges > 0 && (\n\n Choose to keep the current version or accept the updated one.\n
\n )}\n\n {specDrift?.unifiedDiff && (\n \n )}\n {decidableEndpoints.length > 0 && (\n <>\n setBulkDecision('keep-mine')}\n >\n setBulkDecision('accept-incoming')}\n >\n
\n )}\n \n {!hasRemoteUpdates ? (\n
\n\n {hasRemoteUpdates && (\n \n {isLoading ? (\n <>\n
\n ) : (\n Checking for updates
\nComparing your last synced spec with the latest spec...
\n \n ) : (\n <>\nNo updates from the spec
\nThe spec endpoints have not been updated since the last sync.
\n \n )}\n\n {/* === Updates from Spec === */}\n {decidableEndpoints.length > 0 && (\n
\n )}\n \n\n 0 ? (\n \n {`This section has ${conflictCount} endpoint${conflictCount === 1 ? '' : 's'} modified in both the spec and your collection. Expand to review and resolve.`}\n \n )}\n >\n {conflictCount} {conflictCount === 1 ? 'Conflict' : 'Conflicts'}\n \n ) : null}\n collectionUid={collectionUid}\n sectionKey=\"review-spec-modified\"\n renderItem={(endpoint, idx) => (\n handleDecisionChange(endpoint.id, decision)}\n collectionPath={collectionPath}\n newSpec={newSpec}\n showDecisions={true}\n decisionLabels={{ keep: 'Keep Current', accept: 'Update' }}\n collectionUid={collectionUid}\n />\n )}\n />\n\n (\n handleDecisionChange(endpoint.id, decision)}\n collectionPath={collectionPath}\n newSpec={newSpec}\n showDecisions={true}\n decisionLabels={{ keep: 'Skip', accept: 'Add' }}\n collectionUid={collectionUid}\n />\n )}\n />\n\n (\n handleDecisionChange(endpoint.id, decision)}\n collectionPath={collectionPath}\n newSpec={newSpec}\n showDecisions={true}\n decisionLabels={{ keep: 'Keep', accept: 'Delete' }}\n collectionUid={collectionUid}\n />\n )}\n />\n
\n )}\n\n \n
\n )}\n\n {hasRemoteUpdates && (\n \n
\n )}\n\n {showConfirmation && (\n \n {totalChanges === 0 && (\n \n {specDrift?.storedSpecMissing ? 'Sync will update the spec file' : 'No endpoint changes to apply'}\n \n )}\n
\n \n setShowConfirmation(true)}\n disabled={unresolvedConflicts > 0 || isSyncing}\n loading={isSyncing}\n >\n {buttonLabel}\n {unresolvedConflicts === 0 &&
\n \n\n {/* Setup form when not configured */}\n {!isConfigured && (\n setShowSettingsModal(true)}\n onOpenDisconnect={() => setShowDisconnectModal(true)}\n onCheck={checkForUpdates}\n isLoading={isLoading}\n />\n\n
\n\n {showSettingsModal && (\n \n setShowSettingsModal(true)}\n />\n
\n )}\n\n {activeTab === 'collection-changes' && (\n \n OpenAPI Sync is in Beta — we'd love to hear your feedback and suggestions.{' '}\n
\n\n
\n )}\n\n {activeTab === 'spec-updates' && (\n \n setShowSettingsModal(true)}\n />\n
\n )}\n \n )}\n\n \n
\n \n
\n \n {iconType === 'file' ?
\n \n {baseName}\n \n Beta Features
\n \n \n
\n \n \n
\n \n \n
\n \n
\n \n {\n formik.handleChange(e);\n formik.handleSubmit();\n }}\n value=\"light\"\n checked={formik.values.theme === 'light'}\n />\n \n\n {\n formik.handleChange(e);\n formik.handleSubmit();\n }}\n value=\"dark\"\n checked={formik.values.theme === 'dark'}\n />\n \n\n {\n formik.handleChange(e);\n formik.handleSubmit();\n }}\n value=\"system\"\n checked={formik.values.theme === 'system'}\n />\n \n
\n \n \n
\n \n
\n {!isDefault && (\n \n
\n )}\n setIsOpen(!isOpen)}>\n {selectedOption?.label}\n
\n {isOpen && (\n \n {ZOOM_OPTIONS.map((option) => (\n handleSelect(option.value)}\n >\n {option.label}\n {option.value === savedZoom &&
\n ))}\n \n
\n );\n};\n\nexport default Display;\n"
},
{
"path": "packages/bruno-app/src/components/Preferences/General/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: 100%;\n \n color: ${(props) => props.theme.text};\n\n .text-link {\n color: ${(props) => props.theme.colors.text.link};\n text-decoration: none;\n font-size: 0.8125rem;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n form.bruno-form {\n label {\n font-size: 0.8125rem;\n }\n }\n\n .default-location-input {\n max-width: 28rem;\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/Preferences/General/index.js",
"content": "import React, { useRef, useEffect, useCallback } from 'react';\nimport get from 'lodash/get';\nimport debounce from 'lodash/debounce';\nimport { useFormik } from 'formik';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { savePreferences } from 'providers/ReduxStore/slices/app';\nimport { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';\nimport StyledWrapper from './StyledWrapper';\nimport * as Yup from 'yup';\nimport toast from 'react-hot-toast';\nimport path from 'utils/common/path';\nimport { IconTrash } from '@tabler/icons';\n\nconst General = () => {\n const preferences = useSelector((state) => state.app.preferences);\n const dispatch = useDispatch();\n const inputFileCaCertificateRef = useRef();\n\n const preferencesSchema = Yup.object().shape({\n sslVerification: Yup.boolean(),\n customCaCertificate: Yup.object({\n enabled: Yup.boolean(),\n filePath: Yup.string().nullable()\n }),\n keepDefaultCaCertificates: Yup.object({\n enabled: Yup.boolean()\n }),\n storeCookies: Yup.boolean(),\n sendCookies: Yup.boolean(),\n timeout: Yup.mixed()\n .transform((value, originalValue) => {\n return originalValue === '' ? undefined : value;\n })\n .nullable()\n .test('isNumber', 'Request Timeout must be a number', (value) => {\n return value === undefined || !isNaN(value);\n })\n .test('isValidTimeout', 'Request Timeout must be equal or greater than 0', (value) => {\n return value === undefined || Number(value) >= 0;\n }),\n autoSave: Yup.object({\n enabled: Yup.boolean(),\n interval: Yup.mixed()\n .transform((value, originalValue) => {\n return originalValue === '' ? undefined : value;\n })\n .test('isNumber', 'Save Delay must be a number', (value) => {\n return value === undefined || !isNaN(value);\n })\n .test('isValidInterval', 'Save Delay must be at least 500ms', (value) => {\n return value === undefined || Number(value) >= 500;\n })\n }).test('intervalRequired', 'Save Delay is required when Auto Save is enabled', (value) => {\n // If autosave is enabled, interval must be provided\n if (value.enabled && (value.interval === undefined || value.interval === '')) {\n return false;\n }\n return true;\n }),\n oauth2: Yup.object({\n useSystemBrowser: Yup.boolean()\n }),\n defaultLocation: Yup.string().max(1024)\n });\n\n const formik = useFormik({\n initialValues: {\n sslVerification: preferences.request.sslVerification,\n customCaCertificate: {\n enabled: get(preferences, 'request.customCaCertificate.enabled', false),\n filePath: get(preferences, 'request.customCaCertificate.filePath', null)\n },\n keepDefaultCaCertificates: {\n enabled: get(preferences, 'request.keepDefaultCaCertificates.enabled', true)\n },\n timeout: preferences.request.timeout,\n storeCookies: get(preferences, 'request.storeCookies', true),\n sendCookies: get(preferences, 'request.sendCookies', true),\n autoSave: {\n enabled: get(preferences, 'autoSave.enabled', false),\n interval: get(preferences, 'autoSave.interval', 1000)\n },\n oauth2: {\n useSystemBrowser: get(preferences, 'request.oauth2.useSystemBrowser', false)\n },\n defaultLocation: get(preferences, 'general.defaultLocation', '')\n },\n validationSchema: preferencesSchema,\n onSubmit: async (values) => {\n try {\n const newPreferences = await preferencesSchema.validate(values, { abortEarly: true });\n handleSave(newPreferences);\n } catch (error) {\n console.error('Preferences validation error:', error.message);\n }\n }\n });\n\n const handleSave = useCallback((newPreferences) => {\n dispatch(\n savePreferences({\n ...preferences,\n request: {\n sslVerification: newPreferences.sslVerification,\n customCaCertificate: {\n enabled: newPreferences.customCaCertificate.enabled,\n filePath: newPreferences.customCaCertificate.filePath\n },\n keepDefaultCaCertificates: {\n enabled: newPreferences.keepDefaultCaCertificates.enabled\n },\n timeout: newPreferences.timeout,\n storeCookies: newPreferences.storeCookies,\n sendCookies: newPreferences.sendCookies,\n oauth2: {\n useSystemBrowser: newPreferences.oauth2.useSystemBrowser\n }\n },\n autoSave: {\n enabled: newPreferences.autoSave.enabled,\n interval: newPreferences.autoSave.interval\n },\n general: {\n defaultLocation: newPreferences.defaultLocation\n }\n }))\n .catch((err) => console.log(err) && toast.error('Failed to update preferences'));\n }, [dispatch, preferences]);\n\n const handleSaveRef = useRef(handleSave);\n handleSaveRef.current = handleSave;\n\n const debouncedSave = useCallback(\n debounce((values) => {\n preferencesSchema.validate(values, { abortEarly: true })\n .then((validatedValues) => {\n handleSaveRef.current(validatedValues);\n })\n .catch((error) => {\n });\n }, 500),\n []\n );\n\n useEffect(() => {\n if (formik.dirty && formik.isValid) {\n debouncedSave(formik.values);\n }\n return () => {\n debouncedSave.flush();\n };\n }, [formik.values, formik.dirty, formik.isValid, debouncedSave]);\n\n const addCaCertificate = (e) => {\n const filePath = window?.ipcRenderer?.getFilePath(e?.target?.files?.[0]);\n if (filePath) {\n formik.setFieldValue('customCaCertificate.filePath', filePath);\n }\n };\n\n const deleteCaCertificate = () => {\n formik.setFieldValue('customCaCertificate.filePath', null);\n };\n\n const browseDefaultLocation = () => {\n dispatch(browseDirectory())\n .then((dirPath) => {\n if (typeof dirPath === 'string') {\n formik.setFieldValue('defaultLocation', dirPath);\n }\n })\n .catch((error) => {\n formik.setFieldValue('defaultLocation', '');\n console.error(error);\n });\n };\n\n return (\n Display
\n \n
\n \n \n
\n \n
\n General Settings
\n \n Keybindings
\n \n \n \n
\n
\n | Command | \nKeybinding | \n
|---|---|
| {name} | \n\n {keys.split('+').map((key, i) => (\n \n {key}\n \n ))}\n | \n
| No key bindings available | \n
\n \n
\n \n
\n {error && (\n \n
\n \n \n System Proxy {isFetching ?
\n \n Below values are sourced from your system proxy settings.\n \n
\n \n System Proxy {isFetching ?
\n \n Below values are sourced from your system proxy settings.\n \n \n \n Error loading system proxy settings: {error}\n \n
\n )}\n {source && (\n \n \n
\n )}\n \n These values cannot be directly updated in Bruno. Please refer to your OS documentation to update these.\n \n \n Proxy source:\n
\n \n {source}\n
\n \n \n
\n \n \n
\n {http_proxy || '-'}
\n \n \n
\n {https_proxy || '-'}
\n \n \n
\n {no_proxy || '-'}
\n Proxy Settings
\n \n Support
\n \n \n \n \n \n \n
\n \n \n
\n );\n};\n\nconst ThemeVariantCard = ({ theme, isSelected, onClick }) => {\n const isDark = theme.mode === 'dark';\n\n return (\n \n \n \n \n
\n \n
\n );\n};\n\nconst Themes = () => {\n const {\n storedTheme,\n setStoredTheme,\n themeVariantLight,\n setThemeVariantLight,\n themeVariantDark,\n setThemeVariantDark\n } = useTheme();\n\n const lightThemes = getLightThemes();\n const darkThemes = getDarkThemes();\n\n const themeModes = [\n { key: 'light', label: 'Light', icon: IconBrightnessUp },\n { key: 'dark', label: 'Dark', icon: IconMoon },\n { key: 'system', label: 'System', icon: IconDeviceDesktop }\n ];\n\n const handleModeChange = (mode) => {\n setStoredTheme(mode);\n };\n\n const renderThemeVariants = (themes, selectedVariant, onSelect, label) => (\n \n
\n );\n\n return (\n {label}
\n \n {themes.map((theme) => (\n onSelect(theme.id)}\n />\n ))}\n
\n \n
\n \n
\n\n Appearance
\n \n {themeModes.map((mode) => {\n const Icon = mode.icon;\n const isSelected = storedTheme === mode.key;\n\n return (\n handleModeChange(mode.key)}\n className={`theme-mode-option relative ${isSelected ? 'selected' : ''}`}\n >\n
\n\n \n\n {storedTheme === 'light' && (\n <>\n {renderThemeVariants(lightThemes, themeVariantLight, setThemeVariantLight, 'Light Theme')}\n \n )}\n\n {storedTheme === 'dark' && (\n <>\n {renderThemeVariants(darkThemes, themeVariantDark, setThemeVariantDark, 'Dark Theme')}\n \n )}\n\n {storedTheme === 'system' && (\n <>\n {renderThemeVariants(lightThemes, themeVariantLight, setThemeVariantLight, 'Light Theme')}\n \n {renderThemeVariants(darkThemes, themeVariantDark, setThemeVariantDark, 'Dark Theme')}\n \n )}\n \n
\n \n );\n })}\n \n \n {getTabPanel(tab)}\n \n
\n \n
\n setTab('general')}>\n
\n setTab('themes')}>\n
\n setTab('display')}>\n
\n setTab('proxy')}>\n
\n setTab('keybindings')}>\n
\n setTab('cache')}>\n
\n setTab('support')}>\n
\n setTab('beta')}>\n
\n \n
\n \n handleAssertionChange(e, assertion, 'enabled')}\n />\n \n
\n \n {humanizeRequestAPIKeyPlacement(apikeyAuth?.placement)}\n
\n );\n });\n\n const handleAuthChange = (property, value) => {\n dispatch(\n updateAuth({\n mode: 'apikey',\n collectionUid: collection.uid,\n itemUid: item.uid,\n content: {\n ...apikeyAuth,\n [property]: value\n }\n })\n );\n };\n\n useEffect(() => {\n !apikeyAuth?.placement\n && dispatch(\n updateAuth({\n mode: 'apikey',\n collectionUid: collection.uid,\n itemUid: item.uid,\n content: {\n placement: 'header'\n }\n })\n );\n }, [apikeyAuth]);\n\n return (\n \n handleAuthChange('key', val)}\n onRun={handleRun}\n collection={collection}\n isCompact\n />\n
\n\n \n \n handleAuthChange('value', val)}\n onRun={handleRun}\n collection={collection}\n isCompact\n />\n
\n\n \n \n {\n dropdownTippyRef?.current?.hide();\n handleAuthChange('placement', 'header');\n }}\n >\n Header\n
\n \n \n
\n \n {humanizeRequestAuthMode(authMode)}
\n \n \n handleAccessKeyIdChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n\n \n \n handleSecretAccessKeyChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isSecret={true}\n isCompact\n />\n\n {showWarning &&
\n\n \n \n handleSessionTokenChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n\n \n \n handleServiceChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n\n \n \n handleRegionChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n\n \n \n handleProfileNameChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n \n handleUsernameChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n\n \n \n handlePasswordChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isSecret={true}\n isCompact\n />\n {showWarning &&
\n \n handleTokenChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isSecret={true}\n isCompact\n />\n {showWarning &&
\n \n handleUsernameChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n\n \n \n handlePasswordChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isSecret={true}\n isCompact\n />\n {showWarning &&
\n \n handleUsernameChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n\n \n \n handlePasswordChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isSecret={true}\n isCompact\n />\n {showWarning &&
\n\n \n \n handleDomainChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n \n
\n\n \n
\n \n Additional Parameters\n \n \n {availableTabs.includes('authorization') && renderTab('authorization', 'Authorization')}\n {availableTabs.includes('token') && renderTab('token', 'Token')}\n {availableTabs.includes('refresh') && renderTab('refresh', 'Refresh')}\n
\n \n {\n handleUpdateAdditionalParam({\n paramType: activeTab,\n key: 'sendIn',\n paramIndex: index,\n value: e.target.value\n });\n }}\n className=\"mousetrap bg-transparent\"\n >\n {sendInOptionsMap[grantType || 'authorization_code'][activeTab].map((optionValue) => (\n \n ))}\n \n
\n \n {\n handleUpdateAdditionalParam({\n paramType: activeTab,\n key: 'enabled',\n paramIndex: index,\n value: e.target.checked\n });\n }}\n />\n {\n handleDeleteAdditionalParam({\n paramType: activeTab,\n paramIndex: index\n });\n }}\n >\n
\n \n
\n \n
\n \n Configuration\n \n \n \n
\n \n
\n \n handleChange('callbackUrl', val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n placeholder={useSystemBrowser ? 'https://oauth.usebruno.com/callback' : undefined}\n isCompact\n />\n
\n \n \n
\n {inputsConfig.map((input) => {\n const { key, label, isSecret } = input;\n const value = oAuth[key] || '';\n const { showWarning, warningMessage } = isSensitive(value);\n\n return (\n \n {\n e.preventDefault();\n handleUseSystemBrowserToggle({ target: { checked: !useSystemBrowser } });\n }}\n >\n Use system browser for OAuth\n \n
\n \n \n
\n );\n })}\n \n handleChange(key, val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isSecret={isSecret}\n isCompact\n />\n {isSecret && showWarning &&
\n \n \n
\n \n handleChange('credentialsPlacement', 'body') },\n { id: 'basic_auth_header', label: 'Basic Auth Header', onClick: () => handleChange('credentialsPlacement', 'basic_auth_header') }\n ]}\n selectedItemId={credentialsPlacement}\n placement=\"bottom-end\"\n >\n
\n \n {credentialsPlacement == 'body' ? 'Request Body' : 'Basic Auth Header'}\n
\n \n \n \n
\n \n
\n \n
\n \n Token\n \n \n \n
\n \n handleChange('tokenSource', 'access_token') },\n { id: 'id_token', label: 'ID Token', onClick: () => handleChange('tokenSource', 'id_token') }\n ]}\n selectedItemId={tokenSource}\n placement=\"bottom-end\"\n >\n
\n \n {tokenSource === 'id_token' ? 'ID Token' : 'Access Token'}\n
\n \n \n \n
\n \n handleChange('credentialsId', val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n \n \n
\n {\n tokenPlacement === 'header'\n ? (\n \n handleChange('tokenPlacement', 'header') },\n { id: 'url', label: 'URL', onClick: () => handleChange('tokenPlacement', 'url') }\n ]}\n selectedItemId={tokenPlacement}\n placement=\"bottom-end\"\n >\n
\n \n {tokenPlacement == 'url' ? 'URL' : 'Headers'}\n
\n \n \n \n
\n )\n : (\n \n handleChange('tokenHeaderPrefix', val)}\n onRun={handleRun}\n collection={collection}\n isCompact\n />\n
\n \n \n
\n )\n }\n \n handleChange('tokenQueryKey', val)}\n onRun={handleRun}\n collection={collection}\n isCompact\n />\n
\n \n
\n\n \n
\n \n Advanced Settings\n \n \n \n
\n\n \n handleChange('refreshTokenUrl', val)}\n collection={collection}\n item={item}\n isCompact\n />\n
\n \n
\n\n {/* Automatically Fetch Token */}\n \n
\n Settings\n \n handleChange('autoFetchToken', e.target.checked)}\n className=\"cursor-pointer ml-1\"\n />\n \n
\n\n {/* Auto Refresh Token (With Refresh URL) */}\n \n
\n \n
\n \n handleChange('autoRefreshToken', e.target.checked)}\n className={`cursor-pointer ml-1 ${isAutoRefreshDisabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n disabled={isAutoRefreshDisabled}\n />\n \n
\n \n
\n \n
\n \n
\n {inputsConfig.map((input) => {\n const { key, label, isSecret } = input;\n const value = oAuth[key] || '';\n const { showWarning, warningMessage } = isSensitive(value);\n\n return (\n \n
\n \n Configuration\n \n \n \n
\n );\n })}\n \n handleChange(key, val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isSecret={isSecret}\n isCompact\n />\n {isSecret && showWarning &&
\n \n \n
\n \n handleChange('credentialsPlacement', 'body') },\n { id: 'basic_auth_header', label: 'Basic Auth Header', onClick: () => handleChange('credentialsPlacement', 'basic_auth_header') }\n ]}\n selectedItemId={credentialsPlacement}\n placement=\"bottom-end\"\n >\n
\n \n {credentialsPlacement == 'body' ? 'Request Body' : 'Basic Auth Header'}\n
\n \n \n
\n \n
\n \n Token\n \n \n \n
\n \n handleChange('tokenSource', 'access_token') },\n { id: 'id_token', label: 'ID Token', onClick: () => handleChange('tokenSource', 'id_token') }\n ]}\n selectedItemId={tokenSource}\n placement=\"bottom-end\"\n >\n
\n \n {tokenSource === 'id_token' ? 'ID Token' : 'Access Token'}\n
\n \n \n \n
\n \n handleChange('credentialsId', val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n \n \n
\n {\n tokenPlacement === 'header'\n ? (\n \n handleChange('tokenPlacement', 'header') },\n { id: 'url', label: 'URL', onClick: () => handleChange('tokenPlacement', 'url') }\n ]}\n selectedItemId={tokenPlacement}\n placement=\"bottom-end\"\n >\n
\n \n {tokenPlacement == 'url' ? 'URL' : 'Headers'}\n
\n \n \n \n
\n )\n : (\n \n handleChange('tokenHeaderPrefix', val)}\n onRun={handleRun}\n collection={collection}\n isCompact\n />\n
\n \n \n
\n )\n }\n \n handleChange('tokenQueryKey', val)}\n onRun={handleRun}\n collection={collection}\n isCompact\n />\n
\n \n
\n\n \n
\n \n Advanced Settings\n \n \n \n
\n\n \n handleChange('refreshTokenUrl', val)}\n collection={collection}\n item={item}\n isCompact\n />\n
\n \n
\n\n {/* Automatically Fetch Token */}\n \n
\n Settings\n \n handleChange('autoFetchToken', e.target.checked)}\n className=\"cursor-pointer ml-1\"\n />\n \n
\n\n {/* Auto Refresh Token (With Refresh URL) */}\n \n
\n \n
\n \n handleChange('autoRefreshToken', e.target.checked)}\n className={`cursor-pointer ml-1 ${isAutoRefreshDisabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n disabled={isAutoRefreshDisabled}\n />\n \n
\n \n
\n \n
\n \n
\n \n
\n \n Grant Type\n \n \n onGrantTypeChange('password') },\n { id: 'authorization_code', label: 'Authorization Code', onClick: () => onGrantTypeChange('authorization_code') },\n { id: 'implicit', label: 'Implicit', onClick: () => onGrantTypeChange('implicit') },\n { id: 'client_credentials', label: 'Client Credentials', onClick: () => onGrantTypeChange('client_credentials') }\n ]}\n selectedItemId={oAuth?.grantType}\n placement=\"bottom-end\"\n >\n
\n \n {humanizeGrantType(oAuth?.grantType)}
\n \n \n
\n \n
\n \n Configuration\n \n \n \n
\n \n
\n \n handleChange('callbackUrl', val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n placeholder={useSystemBrowser ? 'https://oauth.usebruno.com/callback' : undefined}\n isCompact\n />\n
\n \n \n
\n {inputsConfig.map((input) => {\n const { key, label, isSecret } = input;\n return (\n \n {\n e.preventDefault();\n handleUseSystemBrowserToggle({ target: { checked: !useSystemBrowser } });\n }}\n >\n Use system browser for OAuth\n \n
\n \n \n
\n );\n })}\n\n \n handleChange(key, val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isSecret={isSecret}\n isCompact\n />\n
\n \n
\n\n \n
\n \n Token\n \n \n \n
\n\n \n handleChange('tokenSource', 'access_token') },\n { id: 'id_token', label: 'ID Token', onClick: () => handleChange('tokenSource', 'id_token') }\n ]}\n selectedItemId={tokenSource}\n placement=\"bottom-end\"\n >\n
\n \n {tokenSource === 'id_token' ? 'ID Token' : 'Access Token'}\n
\n \n \n \n
\n\n \n handleChange('credentialsId', val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n \n \n
\n\n {tokenPlacement == 'header' ? (\n \n handleChange('tokenPlacement', 'header') },\n { id: 'url', label: 'URL', onClick: () => handleChange('tokenPlacement', 'url') }\n ]}\n selectedItemId={tokenPlacement}\n placement=\"bottom-end\"\n >\n
\n \n {tokenPlacement == 'url' ? 'URL' : 'Headers'}\n
\n \n \n \n
\n ) : (\n \n handleChange('tokenHeaderPrefix', val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n \n \n
\n )}\n\n \n handleChange('tokenQueryKey', val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n \n
\n\n \n
\n \n Advanced Options\n \n \n
\n\n \n
\n \n
\n \n \n Get Access Token\n \n {creds?.refresh_token\n ? (\n \n Refresh Token\n \n )\n : null}\n {useSystemBrowser && fetchingAuthorizationCode\n ? (\n \n Clear Cache\n \n
\n );\n};\n\nexport default Oauth2ActionButtons;\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.js",
"content": "import styled from 'styled-components';\nimport { rgba } from 'polished';\n\nconst Wrapper = styled.div`\n .oauth2-copy-button {\n background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};\n \n &:hover {\n background-color: ${(props) => rgba(props.theme.primary.solid, 0.2)};\n }\n }\n\n ol[role=\"tree\"] {\n overflow: hidden;\n }\n ol[role=\"group\"] span {\n line-break: anywhere;\n }\n`;\n\nexport default Wrapper;\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js",
"content": "import { useState, useEffect, useMemo } from 'react';\nimport { find } from 'lodash';\nimport StyledWrapper from './StyledWrapper';\nimport { IconChevronDown, IconChevronRight, IconCopy, IconCheck } from '@tabler/icons';\nimport { getAllVariables } from 'utils/collections/index';\nimport { interpolate } from '@usebruno/common';\n\nconst TokenSection = ({ title, token }) => {\n if (!token) return null;\n\n const [isExpanded, setIsExpanded] = useState(false);\n const [decodedToken, setDecodedToken] = useState(null);\n const [copied, setCopied] = useState(false);\n\n useEffect(() => {\n if (token) {\n try {\n const parts = token.split('.');\n if (parts.length === 3) {\n const payload = JSON.parse(atob(parts[1]));\n setDecodedToken(payload);\n }\n } catch (err) {\n console.error('Error decoding token:', err);\n }\n }\n }, [token]);\n\n const handleCopy = async (text) => {\n await navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n setIsExpanded(!isExpanded)}\n >\n
\n {isExpanded && (\n \n {isExpanded\n ?
\n \n
\n {title}
\n {decodedToken?.exp &&\n
\n )}\n \n );\n};\n\nconst formatExpiryTime = (seconds) => {\n if (seconds < 60) return `${seconds}s`;\n if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;\n return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;\n};\n\nconst ExpiryTimer = ({ expiresIn }) => {\n if (!expiresIn) return null;\n\n const calculateTimeLeft = () => Math.max(0, Math.floor(expiresIn - Date.now() / 1000));\n\n const [timeLeft, setTimeLeft] = useState(calculateTimeLeft);\n\n useEffect(() => {\n setTimeLeft(calculateTimeLeft());\n\n const timer = setInterval(() => {\n setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));\n }, 1000);\n\n return () => clearInterval(timer);\n }, [expiresIn]);\n\n return (\n \n
\n {decodedToken && (\n \n handleCopy(token)}\n className=\"p-1 oauth2-copy-button rounded\"\n title=\"Copy token\"\n >\n {copied\n ?
\n \n {token}\n
\n \n
\n )}\n Decoded Payload
\n \n {Object.entries(decodedToken).map(([key, value]) => (\n
\n \n {key}: \n \n {typeof value === 'object' ? JSON.stringify(value) : value.toString()}\n \n
\n ))}\n Error fetching token. Check network logs for more details.\n ) : (\n
\n
\n )\n ) : (\n \n
\n ) : null}\n \n {creds.token_type ? (\n
\n \n Token Type:\n {creds.token_type}\n
\n ) : null}\n {creds?.scope ? (\n \n Scope:\n \n {creds.scope}\n \n
\n ) : null}\n No token found
\n )}\n \n
\n {inputsConfig.map((input) => {\n const { key, label, isSecret } = input;\n const value = oAuth[key] || '';\n const { showWarning, warningMessage } = isSensitive(value);\n\n return (\n \n
\n \n Configuration\n \n \n \n
\n );\n })}\n \n handleChange(key, val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isSecret={isSecret}\n isCompact\n />\n {isSecret && showWarning &&
\n \n \n
\n \n handleChange('credentialsPlacement', 'body') },\n { id: 'basic_auth_header', label: 'Basic Auth Header', onClick: () => handleChange('credentialsPlacement', 'basic_auth_header') }\n ]}\n selectedItemId={credentialsPlacement}\n placement=\"bottom-end\"\n >\n
\n \n {credentialsPlacement == 'body' ? 'Request Body' : 'Basic Auth Header'}\n
\n \n \n
\n \n
\n \n Token\n \n \n \n
\n \n handleChange('tokenSource', 'access_token') },\n { id: 'id_token', label: 'ID Token', onClick: () => handleChange('tokenSource', 'id_token') }\n ]}\n selectedItemId={tokenSource}\n placement=\"bottom-end\"\n >\n
\n \n {tokenSource === 'id_token' ? 'ID Token' : 'Access Token'}\n
\n \n \n \n
\n \n handleChange('credentialsId', val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n \n \n
\n {\n tokenPlacement === 'header'\n ? (\n \n handleChange('tokenPlacement', 'header') },\n { id: 'url', label: 'URL', onClick: () => handleChange('tokenPlacement', 'url') }\n ]}\n selectedItemId={tokenPlacement}\n placement=\"bottom-end\"\n >\n
\n \n {tokenPlacement == 'url' ? 'URL' : 'Headers'}\n
\n \n \n \n
\n )\n : (\n \n handleChange('tokenHeaderPrefix', val)}\n onRun={handleRun}\n collection={collection}\n isCompact\n />\n
\n \n \n
\n )\n }\n \n handleChange('tokenQueryKey', val)}\n onRun={handleRun}\n collection={collection}\n isCompact\n />\n
\n \n
\n\n \n
\n \n Advanced Settings\n \n \n \n
\n\n \n handleChange('refreshTokenUrl', val)}\n collection={collection}\n item={item}\n isCompact\n />\n
\n \n
\n\n {/* Automatically Fetch Token */}\n \n
\n Settings\n \n handleChange('autoFetchToken', e.target.checked)}\n className=\"cursor-pointer ml-1\"\n />\n \n
\n\n {/* Auto Refresh Token (With Refresh URL) */}\n \n
\n \n
\n \n handleChange('autoRefreshToken', e.target.checked)}\n className={`cursor-pointer ml-1 ${isAutoRefreshDisabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n disabled={isAutoRefreshDisabled}\n />\n \n
\n \n
\n \n
\n TBD
;\n break;\n }\n};\n\nconst OAuth2 = ({ item, collection }) => {\n let request = item.draft ? get(item, 'draft.request', {}) : get(item, 'request', {});\n\n return (\n \n handleUserChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isCompact\n />\n
\n\n \n \n handlePasswordChange(val)}\n onRun={handleRun}\n collection={collection}\n item={item}\n isSecret={true}\n isCompact\n />\n {showWarning &&
\n No Auth
;\n }\n case 'awsv4': {\n return \n
\n \n );\n }\n }\n };\n\n return (\n Auth inherited from {source.name}:
\n {humanizeRequestAuthMode(source.auth?.mode)}
\n | \n File \n | \n \n Content-Type \n | \n \n Selected \n | \n \n |
| \n | \n \n | \n \n \n \n | \n \n \n \n \n | \n
\n \n
\n 404 | Not found
;\n }\n }, [requestPaneTab, item, collection, displayedTheme, schema, onSave, query, onRun, onQueryChange, handleGqlClickReference, preferences, variables]);\n\n if (!activeTabUid || !focusedTab?.uid || !requestPaneTab) {\n return An error occurred!
;\n }\n\n const rightContent = requestPaneTab === 'auth' ? (\n \n
\n ) : requestPaneTab === 'query' ? (\n \n
\n ) : null;\n\n return (\n \n \n {tabPanel} \n \n
\n );\n};\n\nexport default GraphQLRequestPane;\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/GraphQLSchemaActions/index.js",
"content": "import React, { useEffect, useRef, forwardRef } from 'react';\nimport useGraphqlSchema from './useGraphqlSchema';\nimport { IconBook, IconDownload, IconLoader2, IconRefresh } from '@tabler/icons';\nimport get from 'lodash/get';\nimport { findEnvironmentInCollection } from 'utils/collections';\nimport Dropdown from '../../Dropdown';\n\nconst GraphQLSchemaActions = ({ item, collection, onSchemaLoad, toggleDocs }) => {\n const url = item.draft ? get(item, 'draft.request.url', '') : get(item, 'request.url', '');\n const pathname = item.draft ? get(item, 'draft.pathname', '') : get(item, 'pathname', '');\n const uid = item.draft ? get(item, 'draft.uid', '') : get(item, 'uid', '');\n const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);\n const request = item.draft ? { ...item.draft.request, pathname, uid } : { ...item.request, pathname, uid };\n\n let {\n schema,\n schemaSource,\n loadSchema,\n isLoading: isSchemaLoading\n } = useGraphqlSchema(url, environment, request, collection);\n\n useEffect(() => {\n if (onSchemaLoad) {\n onSchemaLoad(schema);\n }\n }, [schema]);\n\n const schemaDropdownTippyRef = useRef();\n const onSchemaDropdownCreate = (ref) => (schemaDropdownTippyRef.current = ref);\n\n const MenuIcon = forwardRef((props, ref) => {\n return (\n \n {isSchemaLoading &&
\n );\n });\n\n return (\n \n {\n schemaDropdownTippyRef.current.hide();\n loadSchema('introspection');\n }}\n >\n {schema && schemaSource === 'introspection' ? 'Refresh from Introspection' : 'Load from Introspection'}\n
\n \n
\n \n Message {index + 1}\n
\n );\n};\n\nconst SingleGrpcMessage = ({ message, item, collection, index, methodType, handleRun, canClientSendMultipleMessages, isLast }) => {\n const dispatch = useDispatch();\n const { displayedTheme } = useTheme();\n const preferences = useSelector((state) => state.app.preferences);\n const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');\n const isConnectionActive = useSelector((state) => state.collections.activeConnections.includes(item.uid));\n\n const [reflectionCache] = useLocalStorage('bruno.grpc.reflectionCache', {});\n const [protofileCache] = useLocalStorage('bruno.grpc.protofileCache', {});\n\n const canClientStream = methodType === 'client-streaming' || methodType === 'bidi-streaming';\n const { name, content } = message;\n\n const onEdit = (value) => {\n const currentMessages = [...(body.grpc || [])];\n currentMessages[index] = {\n name: name ? name : `message ${index + 1}`,\n content: value\n };\n dispatch(updateRequestBody({\n content: currentMessages,\n itemUid: item.uid,\n collectionUid: collection.uid\n }));\n };\n\n const onSend = async () => {\n try {\n await sendGrpcMessage(item, collection.uid, content);\n } catch (error) {\n console.error('Error sending message:', error);\n }\n };\n\n const onSave = () => dispatch(saveRequest(item.uid, collection.uid));\n\n const onRegenerateMessage = async () => {\n try {\n const methodPath = item.draft?.request?.method || item.request?.method;\n if (!methodPath) {\n toastError(new Error('Method path not found in request'));\n return;\n }\n\n const url = item.draft?.request?.url || item.request?.url;\n const protoPath = item.draft?.request?.protoPath || item.request?.protoPath;\n\n let methodMetadata = null;\n if (protoPath) {\n const absolutePath = getAbsoluteFilePath(collection.pathname, protoPath);\n const cachedMethods = protofileCache[absolutePath];\n if (cachedMethods) {\n methodMetadata = cachedMethods.find((method) => method.path === methodPath);\n }\n } else if (url) {\n const cachedMethods = reflectionCache[url];\n if (cachedMethods) {\n methodMetadata = cachedMethods.find((method) => method.path === methodPath);\n }\n }\n\n const result = await generateGrpcSampleMessage(methodPath, content, {\n arraySize: 2,\n methodMetadata\n });\n\n if (result.success) {\n const currentMessages = [...(body.grpc || [])];\n currentMessages[index] = {\n name: name ? name : `message ${index + 1}`,\n content: result.message\n };\n dispatch(updateRequestBody({\n content: currentMessages,\n itemUid: item.uid,\n collectionUid: collection.uid\n }));\n toast.success('Sample message generated');\n } else {\n toastError(new Error(result.error || 'Failed to generate sample message'));\n }\n } catch (error) {\n console.error('Error generating sample message:', error);\n toastError(error);\n }\n };\n\n const onDeleteMessage = () => {\n const currentMessages = [...(body.grpc || [])];\n currentMessages.splice(index, 1);\n dispatch(updateRequestBody({\n content: currentMessages,\n itemUid: item.uid,\n collectionUid: collection.uid\n }));\n };\n\n const onPrettify = () => {\n try {\n const prettyBodyJson = prettifyJsonString(content);\n const currentMessages = [...(body.grpc || [])];\n currentMessages[index] = {\n name: name ? name : `message ${index + 1}`,\n content: prettyBodyJson\n };\n dispatch(updateRequestBody({\n content: currentMessages,\n itemUid: item.uid,\n collectionUid: collection.uid\n }));\n } catch (e) {\n toastError(new Error('Unable to prettify. Invalid JSON format.'));\n }\n };\n\n const isSingleMessage = !canClientSendMultipleMessages || body.grpc.length === 1;\n\n return (\n \n \n \n \n\n \n \n \n\n {canClientStream && (\n \n \n \n )}\n\n {showDelete && (\n \n \n \n )}\n
\n \n 0}\n />\n
\n );\n};\n\nconst GrpcBody = ({ item, collection, handleRun }) => {\n const dispatch = useDispatch();\n const messagesContainerRef = useRef(null);\n const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');\n const methodType = item.draft ? get(item, 'draft.request.methodType') : get(item, 'request.methodType');\n const canClientSendMultipleMessages = methodType === 'client-streaming' || methodType === 'bidi-streaming';\n\n useEffect(() => {\n if (messagesContainerRef.current && body?.grpc?.length > 0) {\n const container = messagesContainerRef.current;\n container.scrollTop = container.scrollHeight;\n }\n }, [body?.grpc?.length]);\n\n const addNewMessage = () => {\n const currentMessages = Array.isArray(body.grpc) ? [...body.grpc] : [];\n currentMessages.push({\n name: `message ${currentMessages.length + 1}`,\n content: '{}'\n });\n dispatch(updateRequestBody({\n content: currentMessages,\n itemUid: item.uid,\n collectionUid: collection.uid\n }));\n };\n\n if (!body?.grpc || !Array.isArray(body.grpc)) {\n return (\n \n
\n \n
\n No gRPC messages available
\n\n
\n )}\n \n
\n \n );\n};\n\nexport default GrpcurlModal;\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/StyledWrapper.js",
"content": "import styled from 'styled-components';\nimport { rgba } from 'polished';\n\nconst StyledWrapper = styled.div`\n .method-dropdown-container {\n display: flex;\n align-items: center;\n height: 100%;\n }\n\n .method-dropdown-trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 0.5rem;\n cursor: pointer;\n user-select: none;\n }\n\n .method-dropdown-trigger-icon {\n margin-right: 0.5rem;\n }\n\n .method-dropdown-trigger-text {\n font-size: ${(props) => props.theme.font.size.xs};\n white-space: nowrap;\n color: ${(props) => props.theme.dropdown.color};\n }\n\n .method-dropdown-caret {\n margin-left: 0.25rem;\n color: ${(props) => props.theme.colors.text.muted};\n fill: ${(props) => props.theme.colors.text.muted};\n }\n\n .method-dropdown-list {\n max-height: 24rem;\n overflow-y: auto;\n width: 24rem;\n min-width: 15rem;\n }\n\n input#search-input {\n border: 1px solid ${(props) => props.theme.input.border};\n color: ${(props) => props.theme.text};\n\n &:focus {\n outline: none;\n border-color: ${(props) => props.theme.input.focusBorder};\n }\n }\n\n .method-dropdown-service-group {\n margin-bottom: 0.5rem;\n }\n\n .method-dropdown-service-header {\n padding: 0.25rem 0.75rem;\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: ${(props) => props.theme.dropdown.separator};\n color: ${(props) => props.theme.dropdown.color};\n }\n\n .method-dropdown-method-item {\n padding: 0.5rem 0.75rem;\n width: 100%;\n border-left-width: 2px;\n border-left-style: solid;\n border-left-color: transparent;\n transition: all 200ms;\n position: relative;\n cursor: pointer;\n\n &:hover {\n background-color: ${(props) => props.theme.dropdown.hoverBg};\n }\n\n &--selected {\n border-left-color: ${(props) => props.theme.dropdown.selectedColor};\n background-color: ${(props) => rgba(props.theme.dropdown.selectedColor, 0.2)};\n }\n\n &--focused {\n background-color: ${(props) => props.theme.dropdown.hoverBg};\n }\n }\n\n .method-dropdown-method-content {\n display: flex;\n align-items: center;\n }\n\n .method-dropdown-method-icon {\n font-size: ${(props) => props.theme.font.size.xs};\n margin-right: 0.75rem;\n color: ${(props) => props.theme.dropdown.iconColor};\n }\n\n .method-dropdown-method-details {\n display: flex;\n flex-direction: column;\n flex: 1;\n }\n\n .method-dropdown-method-name {\n font-weight: 500;\n color: ${(props) => props.theme.dropdown.color};\n }\n\n .method-dropdown-method-type {\n font-size: ${(props) => props.theme.font.size.xs};\n color: ${(props) => props.theme.dropdown.mutedText};\n }\n\n .method-dropdown-empty-state {\n padding: 0.5rem 0.75rem;\n width: 100%;\n transition: all 200ms;\n position: relative;\n }\n\n .method-dropdown-empty-state-text {\n display: flex;\n align-items: center;\n font-size: ${(props) => props.theme.font.size.xs};\n margin-right: 0.75rem;\n color: ${(props) => props.theme.dropdown.mutedText};\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js",
"content": "import { IconChevronDown } from '@tabler/icons';\nimport Dropdown from 'components/Dropdown/index';\nimport {\n IconGrpcBidiStreaming,\n IconGrpcClientStreaming,\n IconGrpcServerStreaming,\n IconGrpcUnary\n} from 'components/Icons/Grpc';\nimport SearchInput from 'components/SearchInput/index';\nimport { search } from 'fast-fuzzy';\nimport React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { useTheme } from 'providers/Theme';\nimport StyledWrapper from './StyledWrapper';\n\nconst MethodDropdown = ({\n grpcMethods,\n selectedGrpcMethod,\n onMethodSelect,\n onMethodDropdownCreate\n}) => {\n const { theme } = useTheme();\n const [searchText, setSearchText] = useState('');\n const [focusedIndex, setFocusedIndex] = useState(-1);\n const searchInputRef = useRef();\n const listRef = useRef();\n\n useEffect(() => {\n const activeItem = listRef.current?.querySelector(`[data-index=\"${focusedIndex}\"]`);\n if (activeItem) {\n activeItem.scrollIntoView({ block: 'nearest' });\n }\n }, [focusedIndex]);\n\n const groupMethodsByService = (methods) => {\n if (!methods || !methods.length) return {};\n\n const groupedMethods = {};\n\n methods.forEach((method) => {\n const pathWithoutLeadingSlash = method.path.startsWith('/') ? method.path.slice(1) : method.path;\n const parts = pathWithoutLeadingSlash.split('/');\n const serviceName = parts[0] || 'Default';\n const methodName = parts[1] || method.path;\n\n const enhancedMethod = {\n ...method,\n serviceName,\n methodName\n };\n\n if (!groupedMethods[serviceName]) {\n groupedMethods[serviceName] = [];\n }\n\n groupedMethods[serviceName].push(enhancedMethod);\n });\n\n return groupedMethods;\n };\n\n const getIconForMethodType = (type) => {\n switch (type) {\n case 'unary':\n return \n
\n \n
\n \n
\n \n {selectedGrpcMethod &&
\n );\n });\n\n const handleGrpcMethodSelect = (method) => {\n const methodType = method.type;\n onMethodSelect({ path: method.path, type: methodType });\n };\n\n const filteredMethods = searchText ? search(String(searchText), grpcMethods, { keySelector: (obj) => obj.path }) : grpcMethods;\n\n const groupedMethods = groupMethodsByService(filteredMethods);\n\n // Flatten grouped methods for keyboard navigation\n const flatMethodList = Object.values(groupedMethods).flat();\n\n const handleKeyDown = (e) => {\n if (!flatMethodList.length) return;\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n setFocusedIndex((prev) =>\n prev < flatMethodList.length - 1 ? prev + 1 : flatMethodList.length - 1);\n } else if (e.key === 'ArrowUp') {\n e.preventDefault();\n setFocusedIndex((prev) =>\n prev >= 0 ? prev - 1 : -1);\n } else if (e.key === 'Enter' && focusedIndex >= 0) {\n e.preventDefault();\n handleGrpcMethodSelect(flatMethodList[focusedIndex]);\n }\n };\n\n const focusSearchInput = () => {\n setTimeout(() => {\n if (searchInputRef.current) {\n searchInputRef.current.focus();\n }\n }, 0); // 0ms to ensure the dropdown is fully rendered and focused\n };\n\n const handleDropdownShow = () => {\n focusSearchInput();\n setSearchText('');\n setFocusedIndex(-1);\n };\n\n const handleSearchChange = (e) => {\n // auto focus the first method when the search input is not empty\n if (e.target.value.trim().length > 0) {\n setFocusedIndex(0);\n } else {\n setFocusedIndex(-1);\n }\n };\n\n if (!grpcMethods || grpcMethods.length === 0) {\n return null;\n }\n\n return (\n {getIconForMethodType(selectedGrpcMethod.type)}
}\n \n {selectedGrpcMethod ? (selectedGrpcMethod.path.split('.').at(-1) || selectedGrpcMethod.path) : 'Select Method'}\n \n \n
\n \n \n \n {Object.entries(groupedMethods).map(([serviceName, methods], serviceIndex) => (\n
\n ))}\n\n {filteredMethods.length === 0 && (\n \n
\n \n {serviceName || 'Default Service'}\n
\n \n {methods.map((method, methodIndex) => {\n const globalMethodIndex\n = Object.values(groupedMethods)\n .slice(0, serviceIndex)\n .reduce((acc, group) => acc + group.length, 0) + methodIndex;\n const isSelected = selectedGrpcMethod && selectedGrpcMethod.path === method.path;\n const isFocused = focusedIndex === globalMethodIndex;\n return (\n handleGrpcMethodSelect(method)}\n data-index={globalMethodIndex}\n data-testid=\"grpc-method-item\"\n >\n
\n );\n })}\n \n
\n \n {getIconForMethodType(method.type)}\n
\n \n
\n \n {method.methodName}\n
\n \n {method.type}\n
\n \n
\n )}\n \n No methods found for the search term\n
\n setShowProtoDropdown((prev) => !prev)} data-testid=\"grpc-proto-file-dropdown-icon\">\n {!isReflectionMode && (\n
\n );\n });\n\n return (\n \n
\n \n
\n \n \n
\n\n {!isReflectionMode && (\n \n Mode\n
\n \n \n Proto File\n \n
\n \n Using server reflection to discover gRPC methods.\n
\n )}\n \n
\n \n )}\n\n {(!collectionImportPaths || collectionImportPaths.length === 0) && (\n \n \n
\n\n {invalidImportPaths.length > 0 && (\n From Collection Settings
\n \n
\n )}\n\n \n
\n {collectionImportPaths.map((importPath, index) => {\n const isInvalid = !importPath.exists;\n\n return (\n \n
\n );\n })}\n \n
\n \n
\n \n onToggleImportPath(index)}\n className=\"checkbox\"\n title={importPath.enabled ? 'Import path enabled' : 'Import path disabled'}\n />\n
\n \n {importPath.path}\n {isInvalid && (\n \n
\n \n
\n )}\n\n \n No import paths configured in collection settings\n
\n \n \n
\n \n
\n \n )}\n\n {(!collectionProtoFiles || collectionProtoFiles.length === 0) && (\n \n \n
\n\n {invalidProtoFiles.length > 0 && (\n From Collection Settings
\n \n
\n )}\n\n \n
\n {collectionProtoFiles.map((protoFile, index) => {\n const isSelected = protoFilePath === protoFile.path;\n const isInvalid = !protoFile.exists;\n\n return (\n {\n if (!isInvalid) {\n onSelectCollectionProtoFile(protoFile);\n }\n }}\n >\n
\n );\n })}\n \n
\n \n
\n \n
\n \n {getBasename(collection.pathname, protoFile.path)}\n {isInvalid && (\n \n
\n \n {protoFile.path}\n
\n \n
\n )}\n\n \n No proto files configured in collection settings\n
\n \n \n
\n \n {\n e.stopPropagation();\n onTabChange('protofiles');\n }}\n >\n Proto Files (\n {collectionProtoFiles?.length || 0}\n )\n \n {\n e.stopPropagation();\n onTabChange('importpaths');\n }}\n >\n Import Paths (\n {collectionImportPaths?.length || 0}\n )\n \n
\n \n
\n \n gRPC\n
\n \n onSave(finalValue)}\n theme={storedTheme}\n onChange={(newValue) => debouncedOnUrlChange(newValue)}\n onRun={handleRun}\n collection={collection}\n highlightPathParams={true}\n item={item}\n />\n\n
\n\n \n {\n e.stopPropagation();\n if (isReflectionMode) {\n handleReflection(url, true);\n } else if (protoFilePath) {\n handleProtoFileLoad(protoFilePath, true);\n } else {\n toast.error('No proto file selected');\n }\n }}\n >\n
\n\n \n
\n )}\n\n {(!isConnectionActive || !isStreamingMethod) && (\n \n
\n\n {isClientStreamingMethod && (\n \n
\n )}\n \n \n
\n \n {humanizeRequestAuthMode(authMode)}
\n \n No Auth
;\n }\n case 'basic': {\n return \n
\n \n );\n } else {\n return (\n <>\n Auth inherited from {source.name}:
\n {humanizeRequestAuthMode(source.auth?.mode)}
\n \n
\n \n );\n }\n }\n default: {\n return null;\n }\n }\n };\n\n return (\n Inherited auth not supported by gRPC. Using no auth instead.
\n 404 | Not found
;\n }\n }\n }, [requestPaneTab, item, collection, handleRun]);\n\n const body = getPropertyFromDraftOrRequest(item, 'request.body');\n const headers = getPropertyFromDraftOrRequest(item, 'request.headers');\n const docs = getPropertyFromDraftOrRequest(item, 'request.docs');\n const auth = getPropertyFromDraftOrRequest(item, 'request.auth');\n\n const activeHeadersLength = headers.filter((header) => header.enabled).length;\n const grpcMessagesCount = body?.grpc?.length || 0;\n\n // Determine if this is a client streaming request\n const request = item.draft ? item.draft.request : item.request;\n const isClientStreaming = request.methodType === 'client-streaming' || request.methodType === 'bidi-streaming';\n\n const allTabs = useMemo(() => {\n const getMessageIndicator = () => {\n if (grpcMessagesCount > 0) {\n return isClientStreaming ? (\n {grpcMessagesCount}\n ) : (\n An error occurred!
;\n }\n\n // Return null during initialization while requestPaneTab is being set by useEffect\n if (!requestPaneTab) {\n return null;\n }\n\n const rightContent = requestPaneTab === 'auth' ? (\n \n
\n ) : null;\n\n return (\n 404 | Not found
;\n }, [requestPaneTab, item, collection]);\n\n if (!activeTabUid || !focusedTab?.uid || !requestPaneTab) {\n return An error occurred!
;\n }\n\n const rightContent = requestPaneTab === 'body' ? (\n \n
\n ) : requestPaneTab === 'auth' ? (\n \n
\n ) : null;\n\n return (\n \n \n {tabPanel} \n \n
\n );\n};\n\nexport default HttpRequestPane;\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst Wrapper = styled.div`\n .upload-btn,\n .clear-file-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n color: ${(props) => props.theme.colors.text.muted};\n background: transparent;\n border: none;\n cursor: pointer;\n border-radius: 4px;\n transition: color 0.15s ease;\n\n &:hover {\n color: ${(props) => props.theme.colors.text.link};\n }\n }\n\n .clear-file-btn:hover {\n color: ${(props) => props.theme.colors.text.danger};\n }\n\n .file-value-cell {\n padding: 4px 0;\n\n .file-name {\n font-size: 12px;\n color: ${(props) => props.theme.text};\n }\n }\n\n .value-cell {\n .flex-1 {\n min-width: 0;\n }\n }\n`;\n\nexport default Wrapper;\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js",
"content": "import React, { useCallback } from 'react';\nimport get from 'lodash/get';\nimport { useDispatch } from 'react-redux';\nimport { useTheme } from 'providers/Theme';\nimport { IconUpload, IconX, IconFile } from '@tabler/icons';\nimport {\n moveMultipartFormParam,\n setMultipartFormParams\n} from 'providers/ReduxStore/slices/collections';\nimport { browseFiles } from 'providers/ReduxStore/slices/collections/actions';\nimport MultiLineEditor from 'components/MultiLineEditor';\nimport SingleLineEditor from 'components/SingleLineEditor';\nimport { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';\nimport EditableTable from 'components/EditableTable';\nimport StyledWrapper from './StyledWrapper';\nimport path from 'utils/common/path';\nimport { isWindowsOS } from 'utils/common/platform';\n\nconst MultipartFormParams = ({ item, collection }) => {\n const dispatch = useDispatch();\n const { storedTheme } = useTheme();\n const params = item.draft ? get(item, 'draft.request.body.multipartForm') : get(item, 'request.body.multipartForm');\n\n const onSave = () => dispatch(saveRequest(item.uid, collection.uid));\n const handleRun = () => dispatch(sendRequest(item, collection.uid));\n\n const handleParamsChange = useCallback((updatedParams) => {\n dispatch(setMultipartFormParams({\n collectionUid: collection.uid,\n itemUid: item.uid,\n params: updatedParams\n }));\n }, [dispatch, collection.uid, item.uid]);\n\n const handleParamDrag = useCallback(({ updateReorderedItem }) => {\n dispatch(moveMultipartFormParam({\n collectionUid: collection.uid,\n itemUid: item.uid,\n updateReorderedItem\n }));\n }, [dispatch, collection.uid, item.uid]);\n\n const handleBrowseFiles = useCallback((row, onChange) => {\n dispatch(browseFiles())\n .then((filePaths) => {\n const processedPaths = filePaths.map((filePath) => {\n const collectionDir = collection.pathname;\n if (filePath.startsWith(collectionDir)) {\n return path.relative(collectionDir, filePath);\n }\n return filePath;\n });\n\n const currentParams = item.draft\n ? get(item, 'draft.request.body.multipartForm')\n : get(item, 'request.body.multipartForm');\n const updatedParams = (currentParams || []).map((p) => {\n if (p.uid === row.uid) {\n return { ...p, type: 'file', value: processedPaths };\n }\n return p;\n });\n handleParamsChange(updatedParams);\n })\n .catch((error) => {\n console.error(error);\n });\n }, [dispatch, collection.pathname, item, handleParamsChange]);\n\n const handleClearFile = useCallback((row) => {\n const currentParams = params || [];\n const updatedParams = currentParams.map((p) => {\n if (p.uid === row.uid) {\n return { ...p, type: 'text', value: '' };\n }\n return p;\n });\n handleParamsChange(updatedParams);\n }, [params, handleParamsChange]);\n\n const handleValueChange = useCallback((row, newValue, onChange) => {\n const currentParams = params || [];\n const existingParam = currentParams.find((p) => p.uid === row.uid);\n if (existingParam) {\n const updatedParams = currentParams.map((p) => {\n if (p.uid === row.uid) {\n return { ...p, type: 'text', value: newValue };\n }\n return p;\n });\n handleParamsChange(updatedParams);\n } else {\n onChange(newValue);\n }\n }, [params, handleParamsChange]);\n\n const getFileName = (filePaths) => {\n if (!filePaths || (Array.isArray(filePaths) && filePaths.length === 0)) {\n return null;\n }\n const paths = Array.isArray(filePaths) ? filePaths : [filePaths];\n const validPaths = paths.filter((v) => v != null && v !== '');\n if (validPaths.length === 0) return null;\n\n const separator = isWindowsOS() ? '\\\\' : '/';\n if (validPaths.length === 1) {\n return validPaths[0].split(separator).pop();\n }\n return `${validPaths.length} file(s)`;\n };\n\n const columns = [\n {\n key: 'name',\n name: 'Key',\n isKeyField: true,\n placeholder: 'Key',\n width: '30%'\n },\n {\n key: 'value',\n name: 'Value',\n placeholder: 'Value',\n width: '35%',\n render: ({ row, value, onChange, isLastEmptyRow }) => {\n const isFile = row.type === 'file';\n const fileName = isFile ? getFileName(value) : null;\n const hasTextValue = !isFile && value && value.length > 0;\n\n if (fileName) {\n return (\n \n handleClearFile(row)}\n title=\"Remove file\"\n >\n
\n );\n }\n\n return (\n \n handleBrowseFiles(row, onChange)}\n title=\"Select file\"\n >\n
\n );\n }\n },\n {\n key: 'contentType',\n name: 'Content-Type',\n placeholder: 'Auto',\n width: '20%',\n render: ({ value, onChange }) => (\n \n handleValueChange(row, newValue, onChange)}\n onRun={handleRun}\n allowNewlines={true}\n collection={collection}\n item={item}\n placeholder={!value ? 'Value' : ''}\n />\n
\n {!hasTextValue && !isLastEmptyRow && (\n \n {prompts.map((prompt, index) => (\n
\n \n \n handleChange(prompt, e.target.value)}\n autoFocus={index === 0}\n autoComplete=\"off\"\n autoCorrect=\"off\"\n autoCapitalize=\"off\"\n spellCheck=\"false\"\n />\n
\n ))}\n '\n + (description.slice(0, 3) === '
';\n\n if (ctx && deprecation && ctx.deprecationReason) {\n const reason = ctx.deprecationReason ? md.render(ctx.deprecationReason) : '';\n deprecation.innerHTML = 'Deprecated' + reason;\n deprecation.style.display = 'block';\n } else if (deprecation) {\n deprecation.style.display = 'none';\n }\n\n // Additional rendering?\n if (onHintInformationRender) {\n onHintInformationRender(information);\n }\n });\n}\n\nfunction renderType(type) {\n if (type instanceof GraphQLNonNull) {\n return `${renderType(type.ofType)}!`;\n }\n if (type instanceof GraphQLList) {\n return `[${renderType(type.ofType)}]`;\n }\n return `${escapeHTML(type.name)}`;\n}\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst Wrapper = styled.div`\n div.title {\n color: ${(props) => props.theme.colors.text.subtext0};\n }\n table {\n width: 100%;\n border-collapse: collapse;\n font-weight: 500;\n table-layout: fixed;\n\n thead,\n td {\n border: 1px solid ${(props) => props.theme.table.border};\n }\n\n thead {\n color: ${(props) => props.theme.table.thead.color};\n font-size: ${(props) => props.theme.font.size.base};\n user-select: none;\n }\n td {\n padding: 6px 10px;\n }\n }\n\n td {\n &:nth-child(1) {\n padding: 0 0 0 8px;\n }\n }\n\n .btn-action {\n font-size: ${(props) => props.theme.font.size.base};\n &:hover span {\n text-decoration: underline;\n }\n }\n\n input[type='text'] {\n width: 100%;\n border: solid 1px transparent;\n outline: none !important;\n background-color: inherit;\n\n &:focus {\n outline: none !important;\n border: solid 1px transparent;\n }\n }\n\n input[type='checkbox'] {\n cursor: pointer;\n position: relative;\n top: 1px;\n }\n`;\n\nexport default Wrapper;\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/QueryParams/index.js",
"content": "import React, { useState, useCallback } from 'react';\nimport get from 'lodash/get';\nimport InfoTip from 'components/InfoTip';\nimport { useDispatch } from 'react-redux';\nimport { useTheme } from 'providers/Theme';\nimport {\n moveQueryParam,\n updatePathParam,\n setQueryParams\n} from 'providers/ReduxStore/slices/collections';\nimport MultiLineEditor from 'components/MultiLineEditor';\nimport { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';\nimport EditableTable from 'components/EditableTable';\nimport StyledWrapper from './StyledWrapper';\nimport BulkEditor from '../../BulkEditor';\n\nconst QueryParams = ({ item, collection }) => {\n const dispatch = useDispatch();\n const { storedTheme } = useTheme();\n const params = item.draft ? get(item, 'draft.request.params') : get(item, 'request.params');\n const queryParams = params.filter((param) => param.type === 'query');\n const pathParams = params.filter((param) => param.type === 'path');\n\n const [isBulkEditMode, setIsBulkEditMode] = useState(false);\n\n const onSave = () => dispatch(saveRequest(item.uid, collection.uid));\n const handleRun = () => dispatch(sendRequest(item, collection.uid));\n\n const handleQueryParamsChange = useCallback((updatedParams) => {\n const paramsWithType = updatedParams.map((p) => ({ ...p, type: 'query' }));\n dispatch(setQueryParams({\n collectionUid: collection.uid,\n itemUid: item.uid,\n params: paramsWithType\n }));\n }, [dispatch, collection.uid, item.uid]);\n\n const handlePathParamChange = useCallback((rowUid, key, value) => {\n const pathParam = pathParams.find((p) => p.uid === rowUid);\n if (pathParam) {\n dispatch(updatePathParam({\n pathParam: { ...pathParam, [key]: value },\n itemUid: item.uid,\n collectionUid: collection.uid\n }));\n }\n }, [dispatch, pathParams, item.uid, collection.uid]);\n\n const handleQueryParamDrag = useCallback(({ updateReorderedItem }) => {\n dispatch(moveQueryParam({\n collectionUid: collection.uid,\n itemUid: item.uid,\n updateReorderedItem\n }));\n }, [dispatch, collection.uid, item.uid]);\n\n const toggleBulkEditMode = () => {\n setIsBulkEditMode(!isBulkEditMode);\n };\n\n const queryColumns = [\n {\n key: 'name',\n name: 'Name',\n isKeyField: true,\n placeholder: 'Name',\n width: '30%'\n },\n {\n key: 'value',\n name: 'Value',\n placeholder: 'Value',\n render: ({ value, onChange }) => (\n ' ? '
' + type + description.slice(3) : type + description)\n + '
\n {}}\n defaultRow={{}}\n showCheckbox={false}\n showDelete={false}\n showAddRow={false}\n />\n ) : (\n \n )}\n
\n Query
\n \n \n
\n\n \n Path\n \n \n
\n {pathParams && pathParams.length > 0 ? (\n \n Path variables are automatically added whenever the\n
For example:\n
\n :name\n template is used in the URL. For example:\n
\n https://example.com/v1/users/:id\n \n \n
\n \n
\n \n \n
\n \n
\n \n {\n handleGenerateCode(e);\n }}\n >\n
\n \n \n
\n {(bodyMode === 'json' || bodyMode === 'xml') && (\n \n )}\n \n {humanizeRequestBodyMode(bodyMode)}
\n \n \n \n
\n \n \n \n \n Pre Request\n {hasPreRequestScript && (\n \n \n Post Response\n {hasPostResponseScript && (\n \n \n\n \n \n\n \n \n \n
\n );\n};\n\nexport default Script;\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/Settings/Tags/index.js",
"content": "import React, { useCallback, useEffect } from 'react';\nimport get from 'lodash/get';\nimport { useDispatch } from 'react-redux';\nimport { addRequestTag, deleteRequestTag, updateCollectionTagsList } from 'providers/ReduxStore/slices/collections';\nimport { makeTabPermanent } from 'providers/ReduxStore/slices/tabs';\nimport TagList from 'components/TagList/index';\nimport { saveRequest } from 'providers/ReduxStore/slices/collections/actions';\n\nconst Tags = ({ item, collection }) => {\n const dispatch = useDispatch();\n // all tags in the collection\n const collectionTags = collection.allTags || [];\n\n // tags for the current request\n const tags = item.draft ? get(item, 'draft.tags', []) : get(item, 'tags', []);\n\n // Filter out tags that are already associated with the current request\n const collectionTagsWithoutCurrentRequestTags = collectionTags?.filter((tag) => !tags.includes(tag)) || [];\n\n const handleAdd = useCallback((tag) => {\n const trimmedTag = tag.trim();\n if (trimmedTag && !tags.includes(trimmedTag)) {\n dispatch(\n addRequestTag({\n tag: trimmedTag,\n itemUid: item.uid,\n collectionUid: collection.uid\n })\n );\n dispatch(makeTabPermanent({ uid: item.uid }));\n }\n }, [dispatch, tags, item.uid, collection.uid]);\n\n const handleRemove = useCallback((tag) => {\n dispatch(\n deleteRequestTag({\n tag,\n itemUid: item.uid,\n collectionUid: collection.uid\n })\n );\n dispatch(makeTabPermanent({ uid: item.uid }));\n }, [dispatch, item.uid, collection.uid]);\n\n const handleRequestSave = () => {\n dispatch(saveRequest(item.uid, collection.uid));\n };\n\n useEffect(() => {\n dispatch(updateCollectionTagsList({ collectionUid: collection.uid }));\n }, [collection.uid, dispatch]);\n\n return (\n \n
\n );\n};\n\nexport default Tags;\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/Settings/ToggleSelector/index.js",
"content": "import React from 'react';\nimport { useTheme } from 'providers/Theme';\n\nconst ToggleSelector = ({\n checked,\n onChange,\n label,\n description,\n disabled = false,\n size = 'small', // 'small', 'medium', 'large'\n 'data-testid': dataTestId\n}) => {\n const { theme } = useTheme();\n\n const sizeClasses = {\n small: {\n container: 'h-4 w-8',\n thumb: 'h-3 w-3',\n translate: checked ? 'translate-x-4' : 'translate-x-1'\n },\n medium: {\n container: 'h-5 w-9',\n thumb: 'h-3 w-3',\n translate: checked ? 'translate-x-5' : 'translate-x-1'\n },\n large: {\n container: 'h-6 w-11',\n thumb: 'h-4 w-4',\n translate: checked ? 'translate-x-6' : 'translate-x-1'\n }\n };\n\n const currentSize = sizeClasses[size];\n\n return (\n \n \n
\n );\n};\n\nexport default ToggleSelector;\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/Settings/index.js",
"content": "import React, { useCallback } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport get from 'lodash/get';\nimport { IconTag } from '@tabler/icons';\nimport ToggleSelector from 'components/RequestPane/Settings/ToggleSelector';\nimport SettingsInput from 'components/SettingsInput';\nimport InheritableSettingsInput from 'components/InheritableSettingsInput';\nimport { updateItemSettings } from 'providers/ReduxStore/slices/collections';\nimport { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';\nimport Tags from './Tags/index';\n\n// Default settings configuration\nconst DEFAULT_SETTINGS = {\n encodeUrl: false,\n followRedirects: true,\n maxRedirects: 5,\n timeout: 'inherit'\n};\n\nconst Settings = ({ item, collection }) => {\n const dispatch = useDispatch();\n\n // Get current settings with defaults applied\n const getPropertyFromDraftOrRequest = (propertyKey) =>\n item.draft ? get(item, `draft.${propertyKey}`, {}) : get(item, propertyKey, {});\n\n const rawSettings = getPropertyFromDraftOrRequest('settings');\n const settings = { ...DEFAULT_SETTINGS, ...rawSettings };\n const { encodeUrl, followRedirects, maxRedirects, timeout } = settings;\n\n // Reusable function to update settings\n const updateSetting = useCallback((settingUpdate) => {\n const updatedSettings = { ...settings, ...settingUpdate };\n dispatch(updateItemSettings({\n collectionUid: collection.uid,\n itemUid: item.uid,\n settings: updatedSettings\n }));\n }, [dispatch, collection.uid, item.uid, settings]);\n\n // Setting change handlers\n const onToggleUrlEncoding = useCallback(() =>\n updateSetting({ encodeUrl: !encodeUrl }), [encodeUrl, updateSetting]);\n\n const onToggleFollowRedirects = useCallback(() =>\n updateSetting({ followRedirects: !followRedirects }), [followRedirects, updateSetting]);\n\n const onMaxRedirectsChange = useCallback((e) => {\n const value = e.target.value;\n // Only allow empty string or digits\n if (value === '' || /^\\d+$/.test(value)) {\n const numericValue = value === '' ? 0 : parseInt(value, 10);\n updateSetting({ maxRedirects: numericValue });\n }\n }, [updateSetting]);\n\n const onTimeoutChange = useCallback((e) => {\n const value = e.target.value;\n // Only allow empty string or digits\n if (value === '' || /^\\d+$/.test(value)) {\n const numericValue = value === '' ? 0 : parseInt(value, 10);\n updateSetting({ timeout: numericValue });\n }\n }, [updateSetting]);\n\n // Check if timeout is inherited\n const isTimeoutInherited = timeout === 'inherit' || timeout === undefined || timeout === null;\n\n const handleTimeoutDropdownSelect = useCallback((option) => {\n if (option === 'inherit') {\n updateSetting({ timeout: 'inherit' });\n } else if (option === 'custom') {\n // Switch to custom value - start with 0\n updateSetting({ timeout: 0 });\n }\n }, [updateSetting]);\n\n // Keyboard shortcut handlers\n const onSave = useCallback(() => {\n dispatch(saveRequest(item.uid, collection.uid));\n }, [dispatch, item.uid, collection.uid]);\n\n const onRun = useCallback(() => {\n dispatch(sendRequest(item, collection.uid));\n }, [dispatch, item, collection.uid]);\n\n // Keyboard shortcut handler for input fields\n const handleKeyDown = useCallback((e) => {\n if ((e.ctrlKey || e.metaKey) && e.key === 's') {\n e.preventDefault();\n onSave();\n } else if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {\n e.preventDefault();\n onRun();\n }\n }, [onSave, onRun]);\n\n return (\n \n \n {description && (\n
\n \n {description}\n
\n )}\n\n
\n );\n};\n\nexport default Settings;\n"
},
{
"path": "packages/bruno-app/src/components/RequestPane/Tests/index.js",
"content": "import React from 'react';\nimport get from 'lodash/get';\nimport { useDispatch, useSelector } from 'react-redux';\nimport CodeEditor from 'components/CodeEditor';\nimport { updateRequestTests } from 'providers/ReduxStore/slices/collections';\nimport { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';\nimport { useTheme } from 'providers/Theme';\n\nconst Tests = ({ item, collection }) => {\n const dispatch = useDispatch();\n const tests = item.draft ? get(item, 'draft.request.tests') : get(item, 'request.tests');\n\n const { displayedTheme } = useTheme();\n const preferences = useSelector((state) => state.app.preferences);\n\n const onEdit = (value) => {\n dispatch(\n updateRequestTests({\n tests: value,\n itemUid: item.uid,\n collectionUid: collection.uid\n })\n );\n };\n\n const onRun = () => dispatch(sendRequest(item, collection.uid));\n const onSave = () => dispatch(saveRequest(item.uid, collection.uid));\n\n return (\n Configure request settings for this item.
\n \n
\n \n \n
\n
\n\n \n
\n \n\n !isTimeoutInherited && onTimeoutChange(e)}\n onCustomValueReset={() => updateSetting({ timeout: 'inherit' })}\n />\n
\n \n
\n\n \n
\n\n \n Expr\n
\n ),\n placeholder: varType === 'request' ? 'Value' : 'Expr',\n render: ({ value, onChange }) => (\n \n
\n Pre Request
\n \n
\n Post Response
\n \n \n
\n \n {humanizeRequestAuthMode(authMode)}
\n \n No Auth
;\n }\n case 'basic': {\n return \n
\n \n );\n }\n case 'inherit': {\n const source = getEffectiveAuthSource();\n\n // Check if inherited auth is OAuth2 - not supported for WebSockets\n if (source?.auth?.mode === 'oauth2') {\n return (\n <>\n \n OAuth 2 not yet supported by WebSockets. Using no auth instead.\n
\n \n OAuth 2 not yet supported by WebSockets. Using no auth instead.\n
\n \n );\n }\n\n // Only show inherited auth if it's one of the supported types\n if (source && supportedAuthModes.includes(source.auth?.mode)) {\n return (\n <>\n \n
\n \n );\n } else {\n return (\n <>\n Auth inherited from {source.name}:
\n {humanizeRequestAuthMode(source.auth?.mode)}
\n \n
\n \n );\n }\n }\n default: {\n return null;\n }\n }\n };\n\n return (\n Inherited auth not supported by WebSockets. Using no auth instead.
\n 404 | Not found
;\n }\n }\n }, [requestPaneTab, item, collection, handleRun]);\n\n if (!activeTabUid || !focusedTab?.uid || !requestPaneTab) {\n return An error occurred!
;\n }\n\n const rightContent = requestPaneTab === 'auth' ? (\n \n
\n ) : null;\n\n return (\n \n \n \n
\n )}\n />\n \n \n Timeout in milliseconds\n
\n\n
\n\n \n \n updateSetting('timeout', newValue)}\n collection={collection}\n />\n \n
\n \n \n \n
\n )}\n />\n \n \n \n Keep the websocket alive by sending ping requests to the server at every interval (in millseconds)\n \n
\n0 (zero) = off
\n\n
\n \n \n updateSetting('keepAliveInterval', newValue)}\n collection={collection}\n />\n \n
\n \n {humanizeRequestBodyMode(mode)}\n {' '}\n
\n );\n });\n\n return (\n \n {\n dropdownTippyRef.current.hide();\n onModeChange(d.key);\n }}\n >\n {d.label}\n
\n ))}\n \n \n Raw
\n {RAW_MODES.map((d) => (\n \n Message {index + 1}\n
\n \n \n \n \n\n {index > 0 && (\n \n \n \n )}\n
\n \n
\n \n
\n No WebSocket messages available
\n\n
\n )}\n \n
\n \n\n {connectionStatus === CONNECTION_STATUS.CONNECTED && }\n \n onSave(finalValue)}\n onChange={handleUrlChange}\n placeholder=\"ws://localhost:8080 or wss://example.com\"\n className=\"w-full\"\n theme={displayedTheme}\n onRun={handleRun}\n collection={collection}\n item={item}\n />\n
\n \n WS\n
\n \n {\n e.stopPropagation();\n if (!hasChanges) return;\n onSave();\n }}\n >\n
\n\n {connectionStatus === 'connected' && (\n \n
\n )}\n\n {connectionStatus !== 'connected' && (\n handleDisconnect(e, true)}>\n
\n \n
\n )}\n\n \n
\n \n
\n \n
\n );\n};\n\nexport default ExampleNotFound;\n"
},
{
"path": "packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js",
"content": "import React, { useEffect, useState, useCallback } from 'react';\nimport { closeTabs } from 'providers/ReduxStore/slices/collections/actions';\nimport { useDispatch } from 'react-redux';\nimport ErrorBanner from 'ui/ErrorBanner';\nimport Button from 'ui/Button';\n\nconst FolderNotFound = ({ folderUid }) => {\n const dispatch = useDispatch();\n const [showErrorMessage, setShowErrorMessage] = useState(false);\n\n const closeTab = useCallback(() => {\n dispatch(\n closeTabs({\n tabUids: [folderUid]\n })\n );\n }, [dispatch, folderUid]);\n\n useEffect(() => {\n setTimeout(() => {\n setShowErrorMessage(true);\n }, 300);\n }, []);\n\n if (!showErrorMessage) {\n return null;\n }\n\n const errors = [\n {\n title: 'Folder no longer exists',\n message: 'This can happen when the folder was renamed or deleted on your filesystem.'\n }\n ];\n\n return (\n \n
\n );\n};\n\nexport default FolderNotFound;\n"
},
{
"path": "packages/bruno-app/src/components/RequestTabPanel/RequestIsLoading/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n div.card {\n background: ${(props) => props.theme.requestTabPanel.card.bg};\n border: 1px solid ${(props) => props.theme.requestTabPanel.card.border};\n\n div.hr {\n border-bottom: 1px solid ${(props) => props.theme.requestTabPanel.card.hr};\n height: 1px;\n }\n\n div.border-top {\n border-top: 1px solid ${(props) => props.theme.requestTabPanel.card.border};\n }\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/RequestTabPanel/RequestIsLoading/index.js",
"content": "import { IconLoader2, IconFile } from '@tabler/icons';\nimport StyledWrapper from './StyledWrapper';\n\nconst RequestIsLoading = ({ item }) => {\n return (\n \n
\n \n
\n \n
\n \n
\n \n\n \n Name:\n
\n\n \n {item?.name}\n
\n \n Path:\n
\n\n \n {item?.pathname}\n
\n \n Size:\n
\n\n \n \n {item?.size?.toFixed?.(2)} MB\n
\n \n
\n \n
\n );\n};\n\nexport default RequestNotFound;\n"
},
{
"path": "packages/bruno-app/src/components/RequestTabPanel/RequestNotLoaded/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n div.card {\n background: ${(props) => props.theme.requestTabPanel.card.bg};\n border: 1px solid ${(props) => props.theme.requestTabPanel.card.border};\n\n div.hr {\n border-bottom: 1px solid ${(props) => props.theme.requestTabPanel.card.hr};\n height: 1px;\n }\n\n div.border-top {\n border-top: 1px solid ${(props) => props.theme.requestTabPanel.card.border};\n }\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/RequestTabPanel/RequestNotLoaded/index.js",
"content": "import { IconLoader2, IconFile, IconAlertTriangle } from '@tabler/icons';\nimport { loadLargeRequest } from 'providers/ReduxStore/slices/collections/actions';\nimport { useDispatch } from 'react-redux';\nimport StyledWrapper from './StyledWrapper';\n\nconst RequestNotLoaded = ({ collection, item }) => {\n const dispatch = useDispatch();\n\n const handleLoadLargeRequest = () => {\n !item?.loading && dispatch(loadLargeRequest({ collectionUid: collection?.uid, pathname: item?.pathname }));\n };\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n\n \n Name:\n
\n\n {item?.name}
\n \n Path:\n
\n\n {item?.pathname}
\n \n Size:\n
\n\n {!item?.error && (\n {item?.size?.toFixed?.(2)} MB
\n \n
\n )}\n\n {item?.loading && (\n <>\n \n \n
\n \n \n Load Request\n \n
\n (Uses a regex based parsing approach)
\n\n
\n \n )}\n Loading...
;\n }\n\n if (focusedTab.type === 'global-environment-settings') {\n return An error occurred!
;\n }\n\n if (!collection || !collection.uid) {\n return Collection not found!
;\n }\n\n if (focusedTab.type === 'response-example') {\n const item = findItemInCollection(collection, focusedTab.itemUid);\n const example = item?.examples?.find((ex) => ex.uid === focusedTab.uid);\n\n if (!example) {\n return \n {renderQueryUrl()}\n
\n \n (docExplorerRef.current = r)}>\n \n \n
\n ) : null}\n \n );\n};\n\nexport default RequestTabPanel;\n"
},
{
"path": "packages/bruno-app/src/components/RequestTabs/CollectionHeader/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n .collection-switcher {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .switcher-trigger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: ${(props) => props.theme.text};\n cursor: pointer;\n font-weight: 500;\n transition: background-color 0.15s ease;\n\n &:hover {\n background: ${(props) => props.theme.sidebar.collection.item.hoverBg};\n }\n\n .switcher-name {\n max-width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &.scratch-collection {\n font-weight: 600;\n font-size: 15px;\n }\n }\n\n .tab-count {\n font-size: 11px;\n font-weight: 500;\n padding: 1px 6px;\n border-radius: 10px;\n background: ${(props) => props.theme.sidebar.collection.item.hoverBg};\n min-width: 18px;\n text-align: center;\n }\n\n .chevron {\n opacity: 0.6;\n flex-shrink: 0;\n }\n }\n\n .workspace-actions-trigger {\n cursor: pointer;\n opacity: 0.6;\n padding: 4px;\n border-radius: 4px;\n transition: opacity 0.15s ease, background-color 0.15s ease;\n\n &:hover {\n opacity: 1;\n background: ${(props) => props.theme.sidebar.collection.item.hoverBg};\n }\n }\n\n .workspace-rename-container {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n }\n\n .workspace-input-wrapper {\n display: flex;\n align-items: center;\n border: 1px solid ${(props) => props.theme.input.border};\n border-radius: 3px;\n background: ${(props) => props.theme.input.bg};\n min-width: 150px;\n\n &:focus-within {\n border-color: ${(props) => props.theme.input.focusBorder};\n }\n }\n\n .workspace-name-input {\n font-size: 14px;\n font-weight: 500;\n padding: 2px 6px;\n border: none;\n background: transparent;\n color: ${(props) => props.theme.text};\n outline: none;\n flex: 1;\n min-width: 0;\n }\n\n .cog-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 22px;\n height: 100%;\n border: none;\n cursor: pointer;\n background: transparent;\n color: ${(props) => props.theme.text};\n opacity: 0.5;\n\n &:hover {\n opacity: 1;\n }\n }\n\n .inline-actions {\n display: flex;\n align-items: center;\n gap: 2px;\n }\n\n .inline-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border: none;\n border-radius: 3px;\n cursor: pointer;\n background: transparent;\n color: ${(props) => props.theme.text};\n\n &:hover {\n background: ${(props) => props.theme.sidebar.collection.item.hoverBg};\n }\n\n &.save {\n color: ${(props) => props.theme.colors.text.green};\n }\n\n &.cancel {\n color: ${(props) => props.theme.colors.text.danger};\n }\n }\n\n .workspace-error {\n font-size: 12px;\n color: ${(props) => props.theme.colors.text.danger};\n margin-left: 8px;\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/RequestTabs/CollectionHeader/index.js",
"content": "import { useState, useRef, useEffect, useCallback } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n IconCategory,\n IconBox,\n IconChevronDown,\n IconRun,\n IconEye,\n IconSettings,\n IconDots,\n IconEdit,\n IconX,\n IconCheck,\n IconFolder,\n IconUpload\n} from '@tabler/icons';\nimport OpenAPISyncIcon from 'components/Icons/OpenAPISync';\nimport { switchWorkspace, renameWorkspaceAction, exportWorkspaceAction, confirmWorkspaceCreation, cancelWorkspaceCreation } from 'providers/ReduxStore/slices/workspaces/actions';\nimport { updateWorkspace } from 'providers/ReduxStore/slices/workspaces';\nimport { showInFolder } from 'providers/ReduxStore/slices/collections/actions';\nimport { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';\nimport { uuid } from 'utils/common';\nimport toast from 'react-hot-toast';\nimport Dropdown from 'components/Dropdown';\nimport MenuDropdown from 'ui/MenuDropdown';\nimport CloseWorkspace from 'components/Sidebar/CloseWorkspace';\nimport CreateWorkspace from 'components/WorkspaceSidebar/CreateWorkspace';\nimport EnvironmentSelector from 'components/Environments/EnvironmentSelector';\nimport ToolHint from 'components/ToolHint';\nimport JsSandboxMode from 'components/SecuritySettings/JsSandboxMode';\nimport ActionIcon from 'ui/ActionIcon';\nimport { getRevealInFolderLabel } from 'utils/common/platform';\nimport { normalizePath } from 'utils/common/path';\nimport classNames from 'classnames';\nimport StyledWrapper from './StyledWrapper';\nimport { useTheme } from 'providers/Theme';\nimport { useBetaFeature, BETA_FEATURES } from 'utils/beta-features';\nimport StatusBadge from 'ui/StatusBadge/index';\n\nconst CollectionHeader = ({ collection, isScratchCollection }) => {\n const dispatch = useDispatch();\n const workspaces = useSelector((state) => state.workspaces.workspaces);\n const activeWorkspaceUid = useSelector((state) => state.workspaces.activeWorkspaceUid);\n const collections = useSelector((state) => state.collections.collections);\n const tabs = useSelector((state) => state.tabs.tabs);\n\n // Get the current active workspace\n const currentWorkspace = workspaces.find((w) => w.uid === activeWorkspaceUid);\n const gitRootPath = collection?.git?.gitRootPath;\n const isOpenAPISyncEnabled = useBetaFeature(BETA_FEATURES.OPENAPI_SYNC);\n\n // Workspace rename state\n const [isRenamingWorkspace, setIsRenamingWorkspace] = useState(false);\n const [workspaceNameInput, setWorkspaceNameInput] = useState('');\n const [workspaceNameError, setWorkspaceNameError] = useState('');\n const [closeWorkspaceModalOpen, setCloseWorkspaceModalOpen] = useState(false);\n const [createWorkspaceModalOpen, setCreateWorkspaceModalOpen] = useState(false);\n\n const switcherRef = useRef();\n const workspaceActionsRef = useRef();\n const workspaceNameInputRef = useRef(null);\n const workspaceRenameContainerRef = useRef(null);\n const openingAdvancedRef = useRef(false);\n const clickedOutsideRef = useRef(false);\n const handleSaveRef = useRef(null);\n const tempWorkspaceUidRef = useRef(null);\n const isSavingRef = useRef(false);\n\n const onSwitcherCreate = (ref) => (switcherRef.current = ref);\n const onWorkspaceActionsCreate = (ref) => (workspaceActionsRef.current = ref);\n\n // Auto-enter rename mode when workspace is newly created\n useEffect(() => {\n if (isScratchCollection && currentWorkspace?.isNewlyCreated) {\n dispatch(updateWorkspace({ uid: currentWorkspace.uid, isNewlyCreated: false }));\n setIsRenamingWorkspace(true);\n setWorkspaceNameInput(currentWorkspace.name || '');\n setWorkspaceNameError('');\n }\n }, [isScratchCollection, currentWorkspace?.isNewlyCreated, currentWorkspace?.uid, currentWorkspace?.name, dispatch]);\n\n const handleCancelWorkspaceRename = useCallback(() => {\n if (openingAdvancedRef.current) return;\n if (currentWorkspace?.isCreating) {\n dispatch(cancelWorkspaceCreation(currentWorkspace.uid));\n return;\n }\n setIsRenamingWorkspace(false);\n setWorkspaceNameInput('');\n setWorkspaceNameError('');\n }, [currentWorkspace?.isCreating, currentWorkspace?.uid, dispatch]);\n\n useEffect(() => {\n if (!isRenamingWorkspace) return;\n\n const handleClickOutside = (event) => {\n if (workspaceRenameContainerRef.current && !workspaceRenameContainerRef.current.contains(event.target)) {\n if (currentWorkspace?.isCreating) {\n clickedOutsideRef.current = true;\n handleSaveRef.current?.();\n } else {\n handleCancelWorkspaceRename();\n }\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n const timer = setTimeout(() => {\n workspaceNameInputRef.current?.focus();\n workspaceNameInputRef.current?.select();\n }, 50);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n clearTimeout(timer);\n };\n }, [isRenamingWorkspace, handleCancelWorkspaceRename, currentWorkspace?.isCreating]);\n\n const collectionUpdates = useSelector((state) => state.openapiSync?.collectionUpdates || {});\n const { theme } = useTheme();\n\n if (!collection) {\n return null;\n }\n\n const hasOpenApiSyncConfigured = collection?.brunoConfig?.openapi?.[0]?.sourceUrl;\n const hasOpenApiUpdates = hasOpenApiSyncConfigured && collectionUpdates[collection.uid]?.hasUpdates;\n const hasOpenApiError = hasOpenApiSyncConfigured && collectionUpdates[collection.uid]?.error;\n\n // Get mounted collections for the current workspace (excluding scratch collections)\n const mountedCollections = collections.filter((c) => {\n if (c.mountStatus !== 'mounted') return false;\n\n const isScratch = workspaces.some((w) => w.scratchCollectionUid === c.uid);\n if (isScratch) return false;\n\n const workspaceCollectionPaths = currentWorkspace?.collections?.map((wc) => wc.path) || [];\n return workspaceCollectionPaths.some((wcPath) => normalizePath(c.pathname) === normalizePath(wcPath));\n });\n\n // Count tabs for the current collection\n const tabCount = tabs.filter((t) => t.collectionUid === collection.uid).length;\n\n // Get tab count for a given collection uid\n const getTabCount = (collectionUid) => tabs.filter((t) => t.collectionUid === collectionUid).length;\n\n // Get tab count for workspace (scratch collection)\n const workspaceTabCount = currentWorkspace?.scratchCollectionUid\n ? getTabCount(currentWorkspace.scratchCollectionUid)\n : 0;\n\n // Display name and icon based on context\n const displayName = isScratchCollection\n ? (currentWorkspace?.name || 'Untitled Workspace')\n : (collection.name || 'Untitled Collection');\n\n const DisplayIcon = isScratchCollection ? IconCategory : IconBox;\n\n // Switcher handlers\n const handleSwitchToWorkspace = (workspaceUid) => {\n switcherRef.current?.hide();\n if (workspaceUid) {\n dispatch(switchWorkspace(workspaceUid));\n }\n };\n\n const handleSwitchToCollection = (targetCollection) => {\n switcherRef.current?.hide();\n if (!targetCollection?.uid) return;\n\n const existingTab = tabs.find((t) => t.collectionUid === targetCollection.uid);\n if (existingTab) {\n dispatch(focusTab({ uid: existingTab.uid }));\n } else {\n dispatch(\n addTab({\n uid: targetCollection.uid,\n collectionUid: targetCollection.uid,\n type: 'collection-settings'\n })\n );\n }\n };\n\n // Collection action handlers\n const handleRun = () => {\n dispatch(\n addTab({\n uid: uuid(),\n collectionUid: collection.uid,\n type: 'collection-runner'\n })\n );\n };\n\n const viewVariables = () => {\n dispatch(\n addTab({\n uid: uuid(),\n collectionUid: collection.uid,\n type: 'variables'\n })\n );\n };\n\n const viewCollectionSettings = () => {\n dispatch(\n addTab({\n uid: collection.uid,\n collectionUid: collection.uid,\n type: 'collection-settings'\n })\n );\n };\n\n const viewOpenApiSync = () => {\n dispatch(addTab({\n uid: uuid(),\n collectionUid: collection.uid,\n type: 'openapi-sync'\n }));\n };\n\n // Build overflow menu items for the \"...\" dropdown\n const overflowMenuItems = [\n { id: 'variables', label: 'Variables', leftSection: IconEye, onClick: viewVariables },\n ...(isOpenAPISyncEnabled && !hasOpenApiSyncConfigured\n ? [{ id: 'openapi-sync', label: 'OpenAPI', leftSection: OpenAPISyncIcon, rightSection: \n {/* Left side: Switcher dropdown or rename input */}\n handleSwitchToCollection(col)}\n >\n
\n );\n })}\n \n )}\n \n )}\n\n {/* Workspace actions dropdown */}\n {showWorkspaceActions && (\n \n {isRenamingWorkspace ? (\n document.body}\n icon={(\n \n )}\n >\n {/* Workspace section */}\n {currentWorkspace && (\n <>\n handleSwitchToWorkspace(currentWorkspace.uid)}\n >\n
\n \n )}\n\n {/* Collections section */}\n {mountedCollections.length > 0 && (\n <>\n \n \n
\n ) : (\n \n e.preventDefault()}\n onClick={handleOpenAdvancedCreate}\n title=\"Advanced options\"\n >\n
\n \n e.preventDefault()}\n title={currentWorkspace?.isCreating ? 'Create' : 'Save'}\n >\n e.preventDefault()}\n title=\"Cancel\"\n >\n
\n {workspaceNameError && (\n {workspaceNameError}\n )}\n Workspace
\n \n
\n \n {currentWorkspace.name || 'Untitled Workspace'}\n \n {workspaceTabCount > 0 && (\n {workspaceTabCount}\n )}\n Collections
\n {mountedCollections.map((col) => {\n const colTabCount = getTabCount(col.uid);\n return (\n \n
\n {col.name || 'Untitled Collection'}\n {colTabCount > 0 && (\n {colTabCount}\n )}\n \n
\n \n
\n Rename\n \n
\n \n
\n {getRevealInFolderLabel()}\n \n
\n \n
\n Export\n \n
\n \n )}\n \n\n {/* Right side: Actions (only for regular collections) */}\n {!isScratchCollection && (\n \n
\n Close\n \n {/* OpenAPI Sync - standalone only when configured and beta enabled */}\n {isOpenAPISyncEnabled && hasOpenApiSyncConfigured && (\n \n \n \n \n )}\n {/* Runner - always visible */}\n \n \n \n \n {/* JS Sandbox Mode - always visible */}\n \n \n \n \n {/* Environment Selector - always visible */}\n \n
\n )}\n \n \n
\n Hold on..
\n\n You have unsaved changes in {collection.name} collection settings.\n
\n\n \n
\n \n );\n};\n\nexport default ConfirmCollectionClose;\n"
},
{
"path": "packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.js",
"content": "import React from 'react';\nimport { IconAlertTriangle } from '@tabler/icons';\nimport Modal from 'components/Modal';\nimport Button from 'ui/Button';\n\nconst ConfirmFolderClose = ({ folder, onCancel, onCloseWithoutSave, onSaveAndClose }) => {\n return (\n \n \n
\n \n \n \n
\n \n
\n Hold on..
\n\n You have unsaved changes in {folder.name} folder settings.\n
\n\n \n
\n \n );\n};\n\nexport default ConfirmFolderClose;\n"
},
{
"path": "packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js",
"content": "import React from 'react';\nimport { IconAlertTriangle } from '@tabler/icons';\nimport Modal from 'components/Modal';\nimport Button from 'ui/Button';\n\nconst ConfirmRequestClose = ({ item, example, onCancel, onCloseWithoutSave, onSaveAndClose }) => {\n const isExample = !!example;\n const itemName = isExample ? example.name : item.name;\n const itemType = isExample ? 'example' : 'request';\n\n return (\n \n \n
\n \n \n \n
\n \n
\n Hold on..
\n\n You have unsaved changes in {itemType} {itemName}.\n
\n\n \n
\n \n );\n};\n\nexport default ConfirmRequestClose;\n"
},
{
"path": "packages/bruno-app/src/components/RequestTabs/RequestTab/DraftTabIcon.js",
"content": "import { useTheme } from 'providers/Theme';\n\nconst DraftTabIcon = () => {\n const { theme } = useTheme();\n\n return (\n \n \n
\n \n \n \n
\n \n \n
\n \n {showErrorMessage ? (\n <>\n
\n \n \n */}\n \n */}\n
\n \n ) : null}\n \n \n \n
\n {/* Moved to post mvp */}\n {/* \n \n
\n \n
\n\n {activeCollection && (\n - \n {collectionRequestTabs && collectionRequestTabs.length\n ? collectionRequestTabs.map((tab, index) => {\n return (\n
\n \n \n
\n {/* Moved to post mvp */}\n {/* \n \n
\n \n
\n \n \n \n
\n\n \n {nameError}\n
\n )}\n \n \n setDescription(e.target.value)}\n rows={3}\n data-testid=\"create-example-description-input\"\n />\n
\n \n
\n\n \n
\n Body
\n \n {['json', 'xml'].includes(bodyMode) && (\n \n Prettify\n \n )}\n
\n );\n};\n\nexport default ResponseExampleBodyMode;\n"
},
{
"path": "packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBodyRenderer/index.js",
"content": "import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { useTheme } from 'providers/Theme';\nimport get from 'lodash/get';\nimport CodeEditor from 'components/CodeEditor';\nimport ResponseExampleFormUrlEncodedParams from '../ResponseExampleFormUrlEncodedParams';\nimport ResponseExampleMultipartFormParams from '../ResponseExampleMultipartFormParams';\nimport ResponseExampleFileBody from '../ResponseExampleFileBody';\n\nconst ResponseExampleBodyRenderer = ({\n bodyMode,\n body,\n editMode,\n item,\n collection,\n exampleUid,\n onBodyEdit,\n onSave\n}) => {\n const { displayedTheme } = useTheme();\n const preferences = useSelector((state) => state.app.preferences);\n\n const getBodyContent = () => {\n if (!body) return '';\n\n switch (bodyMode) {\n case 'json':\n return body.json || '';\n case 'text':\n return body.text || '';\n case 'xml':\n return body.xml || '';\n case 'sparql':\n return body.sparql || '';\n default:\n return '';\n }\n };\n\n const getCodeMirrorMode = () => {\n const modeMap = {\n json: 'application/ld+json',\n text: 'application/text',\n xml: 'application/xml',\n sparql: 'application/sparql-query'\n };\n return modeMap[bodyMode] || 'application/text';\n };\n\n const renderBodyContent = () => {\n switch (bodyMode) {\n case 'none':\n return (\n \n No Body\n
\n );\n\n case 'json':\n case 'xml':\n case 'text':\n case 'sparql':\n return (\n \n {}}\n onSave={onSave}\n mode={getCodeMirrorMode()}\n enableVariableHighlighting={true}\n showHintsFor={['variables']}\n readOnly={!editMode}\n />\n
\n );\n\n case 'formUrlEncoded':\n return \n No Body\n
\n );\n }\n };\n\n return renderBodyContent();\n};\n\nexport default ResponseExampleBodyRenderer;\n"
},
{
"path": "packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n textarea {\n background-color: transparent;\n color: ${(props) => props.theme.text};\n font-family: inherit;\n font-size: ${(props) => props.theme.font.size.base};\n line-height: 1.5;\n border: 1px solid transparent;\n padding: 0;\n \n &:not([readonly]) {\n border: 1px solid ${(props) => props.theme.input.border};\n padding: 8px;\n }\n \n &:focus {\n outline: none;\n box-shadow: none;\n border: 1px solid ${(props) => props.theme.examples.urlBar.border};\n }\n \n &:disabled {\n background: transparent;\n color: ${(props) => props.theme.colors.text.muted};\n cursor: not-allowed;\n box-shadow: none;\n }\n \n &::placeholder {\n color: ${(props) => props.theme.input.placeholder.color};\n opacity: ${(props) => props.theme.input.placeholder.opacity};\n }\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleDescription/index.js",
"content": "import React, { useState, useMemo } from 'react';\nimport { useDispatch } from 'react-redux';\nimport get from 'lodash/get';\nimport { updateResponseExampleDetails } from 'providers/ReduxStore/slices/collections';\nimport StyledWrapper from './StyledWrapper';\n\nconst ResponseExampleDescription = ({ editMode, item, collection, exampleUid }) => {\n const dispatch = useDispatch();\n\n const description = useMemo(() => {\n return item.draft\n ? get(item, 'draft.examples', []).find((e) => e.uid === exampleUid)?.description || ''\n : get(item, 'examples', []).find((e) => e.uid === exampleUid)?.description || '';\n }, [item, exampleUid]);\n\n const handleChange = (e) => {\n const newValue = e.target.value;\n\n if (editMode && item && collection && exampleUid) {\n dispatch(updateResponseExampleDetails({\n itemUid: item.uid,\n collectionUid: collection.uid,\n exampleUid: exampleUid,\n details: {\n description: newValue\n }\n }));\n }\n };\n\n return (\n \n
\n \n handleSelectedChange(row, e.target.checked)}\n disabled={!editMode}\n className=\"mr-1 mousetrap\"\n dataTestId={`file-radio-button-${rowIndex}`}\n />\n
\n )\n }\n ];\n\n const defaultRow = {\n filePath: '',\n contentType: '',\n selected: false\n };\n\n if (params.length === 0 && !editMode) {\n return null;\n }\n\n return (\n Headers
\n \n \n Bulk Edit\n \n
\n )}\n \n handleClearFile(row)}\n title=\"Remove file\"\n >\n
\n );\n }\n\n return (\n \n handleBrowseFiles(row, onChange)}\n title=\"Select file\"\n >\n
\n );\n }\n },\n {\n key: 'contentType',\n name: 'Content-Type',\n placeholder: 'Auto',\n width: '30%',\n readOnly: !editMode,\n render: ({ value, onChange }) => (\n \n {}}\n theme={storedTheme}\n value={value || ''}\n onChange={(newValue) => handleValueChange(row, newValue, onChange)}\n onRun={() => {}}\n allowNewlines={true}\n collection={collection}\n item={item}\n readOnly={!editMode}\n placeholder={!value ? 'Value' : ''}\n />\n
\n {!hasTextValue && !isLastEmptyRow && (\n Query parameters
\n \n \n Bulk Edit\n \n
\n )}\n {pathParams && pathParams.length > 0 && (\n <>\n \n Path parameters\n \n \n
\n \n Path variables are automatically added whenever the\n
For example:\n
\n :name\n template is used in the URL. For example:\n
\n https://example.com/v1/users/:id\n \n \n \n
\n \n \n {method || 'GET'}\n
\n\n \n {}}\n onSave={onSave}\n mode={getCodeMirrorMode()}\n enableVariableHighlighting={false}\n readOnly={!editMode}\n />\n
\n \n \n Bulk Edit\n \n
\n )}\n 404 | Not found
;\n }\n }\n };\n\n const tabConfig = [\n {\n name: 'response',\n label: 'Response'\n },\n {\n name: 'headers',\n label: 'Headers',\n count: (exampleData?.response?.headers || []).length\n }\n ];\n\n return (\n \n {tabConfig.map((tab) => (\n
\n\n \n
\n \n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n \n Cancel\n \n
\n \n
\n \n
\n \n
\n\n \n {item.name}\n {' / '}\n {example.name}\n
\n {example.description && example.description.trim().length > 0 && (\n\n
\n \n \n
\n\n \n
\n \n
\n gRPC Server Error
\n {typeof error === 'string' ? error : JSON.stringify(error, null, 2)}
\n \n
\n No messages received
\n \n {responsesList.length === 1 ? (\n
\n );\n })}\n \n )}\n \n )}\n {hasError && !hasResponses && !showErrorMessage && (\n \n
\n ) : (\n \n {reversedResponsesList.map((resp, index) => {\n const originalIndex = responsesList.length - index - 1;\n const isExpanded = expandedIndex === index;\n\n return (\n \n setExpandedIndex(isExpanded ? -1 : index)}\n >\n \n Response {originalIndex + 1}\n {index === 0 && Latest}\n \n \n
\n {isExpanded && (\n \n
\n )}\n \n No messages received. A server error occurred but has been dismissed.\n
\n )}\n | Name | \nValue | \n
| {metadata.name} | \n{metadata.value} | \n
| \n No metadata received\n | \n
{status}
: null}\n {statusText && {statusText}
}\n | Name | \nValue | \n
| {trailer.name} | \n{trailer.value} | \n
| \n No trailers received\n | \n
404 | Not found
;\n }\n }\n };\n\n if (isLoading && !item.response) {\n return (\n Something went wrong
;\n }\n\n const focusedTab = find(tabs, (t) => t.uid === activeTabUid);\n if (!focusedTab || !focusedTab.uid || !focusedTab.responsePaneTab) {\n return An error occurred!
;\n }\n\n const rightContent = !isLoading ? (\n \n {focusedTab?.responsePaneTab === 'timeline' ? (\n <>\n
\n ) : null;\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n Large Response Warning\n
\n \n Handling responses over {formatSize(10 * 1024 * 1024)} could degrade performance.\n
\n Size of current response: {formatSize(responseSize)}\n
\n \n Size of current response: {formatSize(responseSize)}\n
\n
\n \n
\n );\n};\n\nexport default NetworkError;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n position: absolute;\n height: 100%;\n width: calc(100% - 0.75rem);\n z-index: 1;\n background-color: ${(props) => props.theme.requestTabPanel.responseOverlayBg};\n\n div.overlay {\n height: 100%;\n z-index: 9;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 20%;\n overflow: hidden;\n text-align: center;\n\n .loading-icon {\n transform: scaleY(-1);\n animation: rotateCounterClockwise 1s linear infinite;\n }\n }\n\n // spinner and request time content looks better centered vertically in vertical layout\n // while in horizontal layout, it looks better when the content is aligned to the top\n &.vertical-layout {\n div.overlay {\n justify-content: center;\n padding: 1rem;\n }\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/Overlay/index.js",
"content": "import React from 'react';\nimport { IconRefresh } from '@tabler/icons';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { cancelRequest } from 'providers/ReduxStore/slices/collections/actions';\nimport StopWatch from '../../StopWatch';\nimport StyledWrapper from './StyledWrapper';\nimport Button from 'ui/Button/index';\n\nconst ResponseLoadingOverlay = ({ item, collection }) => {\n const dispatch = useDispatch();\n const preferences = useSelector((state) => state.app.preferences);\n const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';\n\n const handleCancelRequest = () => {\n dispatch(cancelRequest(item.cancelTokenUid, item, collection));\n };\n\n return (\n \n
\n \n
\n \n
\n Network Error
\n\n \n Close\n \n
\n \n \n Cancel Request\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n Send Request
\n New Request
\n Edit Environments
\n \n
\n {sendRequestShortcut}
\n {newRequestShortcut}
\n {editEnvironmentShortcut}
\n \n\n {\n setSelectedFormat(newFormat);\n }}\n onPreviewTabSelect={() => {\n setSelectedTab((prev) => prev === 'editor' ? 'preview' : 'editor');\n }}\n selectedTab={selectedTab}\n isActiveTab={true}\n />\n
\n )}\n \n
\n \n {isExpanded ?
\n \n );\n};\n\nexport default QueryResultFilter;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/HtmlPreview.js",
"content": "import React, { useRef, useState, useEffect } from 'react';\nimport { escapeHtml } from 'utils/response/index';\n\nconst HtmlPreview = React.memo(({ data, baseUrl }) => {\n const webviewContainerRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n\n useEffect(() => {\n if (!webviewContainerRef.current) return;\n\n const checkDragging = () => {\n const hasDraggingParent = webviewContainerRef.current?.closest('.dragging');\n setIsDragging(!!hasDraggingParent);\n };\n\n // Watch from a common ancestor where .dragging gets added\n const watchTarget = webviewContainerRef.current.closest('.main-section')\n || document.body;\n\n const mutationObserver = new MutationObserver(checkDragging);\n mutationObserver.observe(watchTarget, {\n attributes: true,\n attributeFilter: ['class'],\n subtree: true\n });\n\n // Check initial state\n checkDragging();\n\n return () => mutationObserver.disconnect();\n }, []);\n\n const renderHtmlPreview = (data, baseUrl, isDragging, webviewContainerRef) => {\n const htmlContent = data.includes('')\n ? data.replace('', `\n {displayData}\n
\n );\n});\n\nexport default TextPreview;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/VideoPreview.js",
"content": "import React from 'react';\nimport { useEffect, useState } from 'react';\nimport ReactPlayer from 'react-player';\n\nconst VideoPreview = React.memo(({ contentType, dataBuffer }) => {\n const [videoUrl, setVideoUrl] = useState(null);\n\n useEffect(() => {\n const videoType = contentType.split(';')[0];\n const byteArray = Buffer.from(dataBuffer, 'base64');\n const blob = new Blob([byteArray], { type: videoType });\n const url = URL.createObjectURL(blob);\n setVideoUrl(url);\n return () => URL.revokeObjectURL(url);\n }, [contentType, dataBuffer]);\n\n if (!videoUrl) return Loading video...
;\n\n return (\n \n
\n );\n }\n\n // Validate that data can be rendered as a tree\n const isValidTreeData = (data) => {\n if (data === null || data === undefined) return false;\n if (typeof data === 'object' && !Array.isArray(data)) return true;\n if (Array.isArray(data)) return true;\n return false;\n };\n\n if (!isValidTreeData(parsedData)) {\n return (\n \n
\n );\n }\n\n // If root is an object with a single key, unwrap it to show the actual root element\n let rootNode = parsedData;\n let rootNodeName = '';\n\n if (typeof parsedData === 'object' && !Array.isArray(parsedData) && parsedData !== null) {\n const keys = Object.keys(parsedData).filter((k) => k !== '$' && k !== '@_' && k !== '#text');\n if (keys.length === 1) {\n rootNodeName = keys[0];\n rootNode = parsedData[keys[0]];\n } else if (keys.length === 0) {\n // Empty object with no children\n return (\n \n
\n );\n }\n }\n\n return (\n \n
\n \n
\n );\n};\n\nconst XmlNode = ({\n node,\n nodeName = '',\n isRoot = false,\n isLast = true,\n defaultExpanded = true,\n depth = 0\n}) => {\n const [expanded, setExpanded] = useState(defaultExpanded);\n\n let displayNodeName = nodeName;\n\n if (Array.isArray(node)) {\n // For repeated XML elements with same name (e.g. \n \n {expanded ? '▼' : '▶'}\n \n {arrayKey}\n [{items.length}]\n
\n {expanded && (\n \n {items.map((item, itemIdx) => (\n
\n )}\n \n {displayNodeName && (\n <>\n {displayNodeName}\n :\n \n )}\n {value}\n
\n );\n }\n\n // For empty leaf nodes (attributes without values, etc)\n if (isLeaf && !isTextNode(node)) {\n // Check if this is an attribute-only node with _text\n if (typeof node === 'object' && node !== null && '_text' in node) {\n // This node has both attributes and text, handle in expandable section\n // Fall through to expandable node rendering\n } else {\n return (\n \n {displayNodeName && (\n <>\n {displayNodeName}\n :\n {'{}'}\n \n )}\n
\n );\n }\n }\n\n // For expandable nodes - show as tree structure\n // If no node name at root level, render children directly\n if (!displayNodeName && depth === 0) {\n if (childEntries.length > 0) {\n return (\n \n {childEntries.map(([key, value], idx) => (\n
\n );\n }\n return null;\n }\n\n // If no display name at non-root level, use a fallback\n if (!displayNodeName) {\n displayNodeName = '(unnamed)';\n }\n\n // Determine if this node's value is an array\n const hasArrayValue = Array.isArray(node);\n const arrayLength = hasArrayValue ? node.length : 0;\n\n return (\n \n
\n );\n};\n\n// Helper function to parse XML string to object\nfunction parseXMLString(xmlString) {\n if (typeof xmlString !== 'string') return null;\n\n try {\n const parser = new DOMParser();\n // Parse as XML only\n const xmlDoc = parser.parseFromString(xmlString, 'text/xml');\n\n // Check for parsing errors\n const parserError = xmlDoc.querySelector('parsererror');\n if (parserError) {\n return null;\n }\n\n // Convert XML DOM to object\n function xmlToObject(node) {\n if (node.nodeType !== 1) return null; // Not an element node\n\n const result = {};\n\n // Get attributes - store them directly with underscore prefix\n if (node.attributes && node.attributes.length > 0) {\n for (let i = 0; i < node.attributes.length; i++) {\n const attr = node.attributes[i];\n result[`_${attr.name}`] = attr.value || '';\n }\n }\n\n // Get child nodes\n const childNodes = Array.from(node.childNodes);\n const elementChildren = childNodes.filter((child) => child.nodeType === 1);\n const textChildren = childNodes.filter((child) => child.nodeType === 3 && child.textContent.trim());\n\n // If only text children and no element children, return text content\n if (elementChildren.length === 0 && textChildren.length > 0) {\n const textContent = textChildren.map((t) => t.textContent.trim()).join(' ').trim();\n // If has attributes, store text as a special property\n if (Object.keys(result).length > 0) {\n result['_text'] = textContent;\n return result;\n }\n return textContent || null;\n }\n\n // Process element children\n if (elementChildren.length > 0) {\n const childMap = {};\n elementChildren.forEach((child) => {\n const childName = child.nodeName; // Preserve original casing\n const childValue = xmlToObject(child);\n\n if (childValue !== null || elementChildren.filter((c) => c.nodeName.toLowerCase() === childName).length > 1) {\n if (childMap[childName]) {\n // Multiple children with same name - convert to array\n if (!Array.isArray(childMap[childName])) {\n childMap[childName] = [childMap[childName]];\n }\n childMap[childName].push(childValue);\n } else {\n childMap[childName] = childValue;\n }\n }\n });\n\n // Merge children into result\n Object.assign(result, childMap);\n }\n\n return Object.keys(result).length > 0 ? result : null;\n }\n\n const rootElement = xmlDoc.documentElement;\n if (!rootElement) return null;\n\n const parsed = xmlToObject(rootElement);\n return parsed ? { [rootElement.nodeName]: parsed } : null;\n } catch (error) {\n return null;\n }\n}\n\nfunction isTextNode(node) {\n return typeof node === 'string' || typeof node === 'number' || node === null;\n}\n\nfunction getChildrenEntries(node) {\n // Given an XML-like JS object, return an array of [key, value] for all properties\n // This includes attributes (with _ prefix) and child elements\n if (typeof node !== 'object' || node === null) return [];\n return Object.entries(node);\n}\n\nfunction getChildCount(node) {\n if (Array.isArray(node)) {\n return node.length;\n }\n const children = getChildrenEntries(node);\n return children.length;\n}\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js",
"content": "import React, { useState, useMemo } from 'react';\nimport CodeEditor from 'components/CodeEditor/index';\nimport { get } from 'lodash';\nimport find from 'lodash/find';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { updateResponsePaneScrollPosition } from 'providers/ReduxStore/slices/tabs';\nimport { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';\nimport { Document, Page } from 'react-pdf';\nimport 'pdfjs-dist/build/pdf.worker';\nimport 'react-pdf/dist/esm/Page/AnnotationLayer.css';\nimport 'react-pdf/dist/esm/Page/TextLayer.css';\nimport { GlobalWorkerOptions } from 'pdfjs-dist/build/pdf';\nGlobalWorkerOptions.workerSrc = 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';\nimport XmlPreview from './XmlPreview/index';\nimport TextPreview from './TextPreview';\nimport HtmlPreview from './HtmlPreview';\nimport VideoPreview from './VideoPreview';\nimport JsonPreview from './JsonPreview';\n\nconst QueryResultPreview = ({\n selectedTab,\n data,\n dataBuffer,\n formattedData,\n item,\n contentType,\n collection,\n codeMirrorMode,\n previewMode,\n disableRunEventListener,\n displayedTheme\n}) => {\n const preferences = useSelector((state) => state.app.preferences);\n const tabs = useSelector((state) => state.tabs.tabs);\n const activeTabUid = useSelector((state) => state.tabs.activeTabUid);\n const focusedTab = find(tabs, (t) => t.uid === activeTabUid);\n\n const dispatch = useDispatch();\n\n const [numPages, setNumPages] = useState(null);\n function onDocumentLoadSuccess({ numPages }) {\n setNumPages(numPages);\n }\n\n const onRun = () => {\n if (disableRunEventListener) {\n return;\n }\n\n dispatch(sendRequest(item, collection.uid));\n };\n\n const onSave = () => dispatch(saveRequest(item.uid, collection.uid));\n\n const onScroll = (event) => {\n dispatch(\n updateResponsePaneScrollPosition({\n uid: focusedTab.uid,\n scrollY: event.doc.scrollTop\n })\n );\n };\n\n if (selectedTab === 'editor') {\n return (\n \n \n {expanded ? '▼' : '▶'}\n \n\n \n {displayNodeName}\n \n\n {childCount > 0 && (\n \n {`{${childCount}}`}\n \n )}\n
\n\n {expanded && childEntries.length > 0 && (\n \n {childEntries.map(([key, value], idx) => {\n // Check if this is an attribute (starts with _)\n const isAttribute = key.startsWith('_');\n\n // Handle attributes\n if (isAttribute) {\n const displayValue = value === '' ? 'value' : value;\n\n return (\n
\n )}\n \n {key}\n :\n {displayValue}\n
\n );\n }\n\n // Check if this child is an array\n const isArrayChild = Array.isArray(value);\n\n if (isArrayChild) {\n return (\n \n \n {Array.from(new Array(numPages), (el, index) => (\n \n
\n );\n }\n case 'preview-audio': {\n return (\n \n );\n }\n case 'preview-video': {\n return \n
\n );\n }\n};\n\nexport default QueryResultPreview;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n .caret {\n color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.caret};\n fill: ${(props) => props.theme.app.collection.toolbar.environmentSelector.caret};\n }\n\n .button-dropdown-button {\n color: ${(props) => props.theme.text};\n border-color: ${(props) => props.theme.workspace.border};\n\n }\n\n .dropdown-divider {\n background-color: ${(props) => props.theme.dropdown.separator};\n height: 1px;\n margin: 4px 0;\n }\n\n .active {\n color: ${(props) => props.theme.primary.text};\n }\n\n .icon-muted {\n color: ${(props) => props.theme.colors.text.muted};\n }\n\n .preview-response-tab-label {\n color: ${(props) => props.theme.colors.text.muted};\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/index.jsx",
"content": "import React, { forwardRef, useState } from 'react';\nimport { IconEye, IconCaretDown, IconBraces, IconCode, IconFileCode, IconBrandJavascript, IconFileText, IconHexagons, IconBinaryTree } from '@tabler/icons';\nimport classnames from 'classnames';\nimport MenuDropdown from 'ui/MenuDropdown';\nimport ToggleSwitch from 'components/ToggleSwitch';\nimport StyledWrapper from './StyledWrapper';\n\n// Icon mapping for format options\nconst FORMAT_ICONS = {\n json: IconBraces,\n html: IconCode,\n xml: IconFileCode,\n javascript: IconBrandJavascript,\n raw: IconFileText,\n hex: IconHexagons,\n base64: IconBinaryTree\n};\n\nconst ButtonIcon = forwardRef(({ disabled, className, style, prefix, selectedLabel, suffix, isActive, ...props }, ref) => {\n return (\n \n No Preview Available\n
\n \n Sorry, no preview is available for this content type.\n
\n \n Preview\n {\n e.preventDefault();\n // e.stopPropagation();\n onPreviewTabSelect(selectedTab === 'preview' ? 'editor' : 'preview');\n }}\n size=\"2xs\"\n data-testid=\"preview-response-tab\"\n title={selectedTab === 'preview' ? 'Turn off Preview Mode' : 'Turn on Preview Mode'}\n />\n
\n );\n\n return (\n \n {hasScriptError ? null : (\n
\n ) : isLargeResponse && !showLargeResponse ? (\n {formatErrorMessage(error)}
\n )}\n\n {error && typeof error === 'string' && error.toLowerCase().includes('self signed certificate') ? (\n \n You can disable SSL verification in the Preferences.
\n To open the Preferences, click on the gear icon in the bottom left corner.\n
\n ) : null}\n \n To open the Preferences, click on the gear icon in the bottom left corner.\n
\n
\n )}\n \n );\n};\n\nexport default QueryResult;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/ResponseActions/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n button {\n color: ${(props) => props.theme.colors.text.subtext0};\n cursor: pointer;\n\n &:hover {\n color: var(--color-tab-active);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n }\n\n .cursor-pointer {\n display: flex;\n align-items: center;\n color: ${(props) => props.theme.colors.text.subtext0};\n\n &:hover {\n color: var(--color-tab-active);\n }\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/ResponseActions/index.js",
"content": "import React, { useRef, forwardRef } from 'react';\nimport { IconDots } from '@tabler/icons';\nimport Dropdown from 'components/Dropdown';\nimport StyledWrapper from './StyledWrapper';\nimport ResponseClear from 'src/components/ResponsePane/ResponseClear';\nimport ResponseDownload from 'src/components/ResponsePane/ResponseDownload';\n\nconst ResponseActions = ({ collection, item }) => {\n const menuDropdownTippyRef = useRef();\n\n const onMenuDropdownCreate = (ref) => (menuDropdownTippyRef.current = ref);\n\n const MenuIcon = forwardRef((_props, ref) => {\n return (\n \n
\n \n
\n {queryFilterEnabled && (\n \n
\n );\n });\n\n const handleClose = () => {\n menuDropdownTippyRef.current.hide();\n };\n\n return (\n \n {children ? children : (\n \n \n \n \n )}\n
\n );\n});\n\nResponseClear.displayName = 'ResponseClear';\n\nexport default ResponseClear;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/ResponseCopy/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n font-size: 0.8125rem;\n color: ${(props) => props.theme.dropdown.iconColor};\n border-radius: 4px;\n\n &:hover {\n background-color: ${(props) => props.theme.workspace.button.bg};\n color: ${(props) => props.theme.text};\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js",
"content": "import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef, useCallback } from 'react';\nimport StyledWrapper from './StyledWrapper';\nimport toast from 'react-hot-toast';\nimport { IconCopy, IconCheck } from '@tabler/icons';\nimport classnames from 'classnames';\nimport ActionIcon from 'ui/ActionIcon/index';\nimport { formatResponse } from 'utils/common';\n\n// Helper function to get text to copy\nconst getTextToCopy = (selectedTab, selectedFormat, data, dataBuffer) => {\n // If preview is on, copy raw data (what's shown in TextPreview)\n if (selectedTab === 'preview') {\n return typeof data === 'string' ? data : JSON.stringify(data, null, 2);\n }\n // If editor is on, copy formatted data based on selected format\n if (selectedFormat && data && dataBuffer) {\n return formatResponse(data, dataBuffer, selectedFormat, null);\n }\n return typeof data === 'string' ? data : JSON.stringify(data, null, 2);\n};\n\n// Hook to get copy response function\nexport const useResponseCopy = (item, selectedFormat, selectedTab, data, dataBuffer) => {\n const [copied, setCopied] = useState(false);\n\n useEffect(() => {\n if (copied) {\n const timer = setTimeout(() => {\n setCopied(false);\n }, 2000);\n return () => clearTimeout(timer);\n }\n }, [copied]);\n\n const copyResponse = useCallback(async () => {\n try {\n const textToCopy = getTextToCopy(selectedTab, selectedFormat, data, dataBuffer);\n await navigator.clipboard.writeText(textToCopy);\n toast.success('Response copied to clipboard');\n setCopied(true);\n } catch (error) {\n toast.error('Failed to copy response');\n }\n }, [selectedTab, selectedFormat, data, dataBuffer]);\n\n return { copyResponse, copied, hasData: !!data };\n};\n\nconst ResponseCopy = forwardRef(({ item, children, selectedFormat, selectedTab, data, dataBuffer }, ref) => {\n const { copyResponse, copied, hasData } = useResponseCopy(item, selectedFormat, selectedTab, data, dataBuffer);\n const elementRef = useRef(null);\n\n const isDisabled = !hasData ? true : false;\n\n useImperativeHandle(ref, () => ({\n click: () => elementRef.current?.click(),\n isDisabled\n }), [isDisabled]);\n\n const handleKeyDown = (e) => {\n if ((e.key === 'Enter' || e.key === ' ') && hasData) {\n e.preventDefault();\n copyResponse();\n }\n };\n\n const handleClick = () => {\n if (hasData) {\n copyResponse();\n }\n };\n\n return (\n \n \n \n
\n
\n | Name | \nValue | \n
| {header[0]} | \n{header[1]} | \n
\n \n
\n \n
\n \n
\n );\n })}\n \n
\n \n OAuth2.0 Calls\n
\n \n {debugInfo && debugInfo.length > 0 ? (\n debugInfo.map((data, idx) => (\n
\n \n
\n ))\n ) : (\n No debug information available.
\n )}\n \n
\n \n \n
\n \n Request skipped\n
\n \n \n {error}\n \n \n);\n\nconst ResultItem = ({ result, type }) => (\n
\n
\n);\n\nconst TestSection = ({\n title,\n results,\n isExpanded,\n onToggle,\n type = 'test'\n}) => {\n const passedResults = results.filter((result) => result.status === 'pass');\n const failedResults = results.filter((result) => result.status === 'fail');\n\n if (results.length === 0) return null;\n\n return (\n \n \n \n {isExpanded\n ?
\n {isExpanded && (\n - \n {results.map((result) => (\n
- \n
\n \n ))}\n
No tests found
;\n }\n\n return (\n \n
\n );\n};\n\nexport default TestResultsLabel;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/Timeline/GrpcTimelineItem/StyledWrapper.js",
"content": "import styled from 'styled-components';\nimport { rgba } from 'polished';\n\nconst StyledWrapper = styled.div`\n font-size: ${(props) => props.theme.font.size.base};\n\n /* Event type styles */\n &.event-metadata {\n border-left: 4px solid ${(props) => rgba(props.theme.request.methods.post, 0.2)};\n }\n\n &.event-response {\n border-left: 4px solid ${(props) => rgba(props.theme.request.methods.get, 0.2)};\n }\n\n &.event-request,\n &.event-message {\n border-left: 4px solid ${(props) => rgba(props.theme.request.methods.put, 0.2)};\n }\n\n &.event-status {\n border-left: 4px solid ${(props) => rgba(props.theme.colors.text.purple, 0.2)};\n }\n\n &.event-error {\n border-left: 4px solid ${(props) => rgba(props.theme.colors.text.danger, 0.2)};\n }\n\n &.event-end {\n border-left: 4px solid ${(props) => rgba(props.theme.colors.text.muted, 0.2)};\n }\n\n &.event-cancel {\n border-left: 4px solid ${(props) => rgba(props.theme.colors.text.warning, 0.2)};\n }\n\n /* Event type icon colors */\n .icon-metadata {\n color: ${(props) => props.theme.request.methods.post};\n }\n\n .icon-response {\n color: ${(props) => props.theme.request.methods.get};\n }\n\n .icon-request,\n .icon-message {\n color: ${(props) => props.theme.request.methods.put};\n }\n\n .icon-status {\n color: ${(props) => props.theme.colors.text.purple};\n }\n\n .icon-error {\n color: ${(props) => props.theme.colors.text.danger};\n }\n\n .icon-end {\n color: ${(props) => props.theme.colors.text.muted};\n }\n\n .icon-cancel {\n color: ${(props) => props.theme.colors.text.warning};\n }\n\n /* Event Header */\n .event-header {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n cursor: pointer;\n\n .event-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.25rem;\n flex-shrink: 0;\n }\n\n span:nth-of-type(1) {\n font-weight: 500;\n }\n\n pre {\n font-family: var(--font-family-mono);\n font-size: ${(props) => props.theme.font.size.xs};\n margin: 0;\n }\n\n .event-timestamp {\n opacity: 0.7;\n }\n }\n\n /* Common content container styles */\n .content-request,\n .content-message,\n .content-metadata,\n .content-response,\n .content-status,\n .content-error,\n .content-end,\n .content-cancel {\n margin-top: 0.375rem;\n padding: 0.375rem;\n border-radius: ${(props) => props.theme.border.radius.base};\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n /* Request/Message content */\n .content-request,\n .content-message {\n background-color: ${(props) => rgba(props.theme.request.methods.put, 0.1)};\n }\n\n .content-request-label,\n .content-message-label {\n color: ${(props) => props.theme.request.methods.put};\n font-weight: 500;\n font-size: ${(props) => props.theme.font.size.sm};\n }\n\n /* Metadata content */\n .content-metadata {\n background-color: ${(props) => rgba(props.theme.request.methods.post, 0.1)};\n }\n\n .content-metadata-label {\n color: ${(props) => props.theme.request.methods.post};\n font-weight: 500;\n font-size: ${(props) => props.theme.font.size.sm};\n }\n\n /* Response content */\n .content-response {\n background-color: ${(props) => rgba(props.theme.request.methods.get, 0.1)};\n }\n\n .content-response-label {\n color: ${(props) => props.theme.request.methods.get};\n font-weight: 500;\n font-size: ${(props) => props.theme.font.size.sm};\n }\n\n /* Status content */\n .content-status {\n background-color: ${(props) => rgba(props.theme.colors.text.purple, 0.1)};\n }\n\n .content-status-label {\n color: ${(props) => props.theme.colors.text.purple};\n font-weight: 500;\n font-size: ${(props) => props.theme.font.size.sm};\n }\n\n /* Error content */\n .content-error {\n background-color: ${(props) => rgba(props.theme.colors.text.danger, 0.1)};\n }\n\n .content-error-label {\n color: ${(props) => props.theme.colors.text.danger};\n font-weight: 500;\n font-size: ${(props) => props.theme.font.size.sm};\n }\n\n /* End content */\n .content-end {\n background-color: ${(props) => rgba(props.theme.colors.text.muted, 0.1)};\n font-weight: 500;\n font-size: ${(props) => props.theme.font.size.sm};\n }\n\n /* Cancel content */\n .content-cancel {\n background-color: ${(props) => rgba(props.theme.colors.text.warning, 0.1)};\n }\n\n .content-cancel-label {\n color: ${(props) => props.theme.colors.text.warning};\n font-weight: 500;\n font-size: ${(props) => props.theme.font.size.sm};\n }\n\n /* Common content styles */\n .content-box {\n background-color: ${(props) => props.theme.bg};\n border-radius: ${(props) => props.theme.border.radius.base};\n padding: 0.375rem;\n margin: 0;\n\n &,\n pre {\n font-family: var(--font-family-mono);\n }\n\n pre {\n margin: 0;\n }\n }\n\n .empty-text {\n color: ${(props) => props.theme.colors.text.muted};\n font-style: italic;\n font-size: ${(props) => props.theme.font.size.xs};\n }\n\n /* Method type badge */\n .method-type-badge {\n background-color: ${(props) => rgba(props.theme.request.methods.put, 0.15)};\n color: ${(props) => props.theme.request.methods.put};\n border-radius: ${(props) => props.theme.border.radius.base};\n font-size: ${(props) => props.theme.font.size.xs};\n font-weight: 500;\n }\n\n /* Timestamp and URL */\n .timestamp-text {\n color: ${(props) => props.theme.colors.text.muted};\n font-size: ${(props) => props.theme.font.size.xs};\n }\n\n .url-text {\n color: ${(props) => props.theme.colors.text.muted};\n font-size: ${(props) => props.theme.font.size.xs};\n margin-left: 1.5rem;\n margin-top: 0.25rem;\n }\n\n .contents {\n display: contents;\n font-size: ${(props) => props.theme.font.size.xs};\n \n div:first-child {\n font-weight: 500;\n }\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/Timeline/GrpcTimelineItem/index.js",
"content": "import { useState } from 'react';\nimport { RelativeTime } from '../TimelineItem/Common/Time/index';\nimport Status from '../TimelineItem/Common/Status/index';\nimport {\n IconChevronDown,\n IconChevronRight,\n IconServer,\n IconDatabase,\n IconAlertCircle,\n IconCircleCheck,\n IconCircleX,\n IconX,\n IconSend\n} from '@tabler/icons';\nimport StyledWrapper from './StyledWrapper';\n\n// Event type display names\nconst EventTypeNames = {\n metadata: 'Metadata',\n response: 'Response Message',\n request: 'Request',\n message: 'Message',\n status: 'Status',\n error: 'Error',\n end: 'Stream Ended',\n cancel: 'Cancelled'\n};\n\nconst GrpcTimelineItem = ({ timestamp, request, response, eventType, eventData, item }) => {\n const [isCollapsed, setIsCollapsed] = useState(true);\n const toggleCollapse = () => setIsCollapsed((prev) => !prev);\n\n // Use requestSent if available, otherwise fall back to request\n const effectiveRequest = item.requestSent || request || item.request || {};\n\n // Extract relevant data from request and response\n const { method, url = '' } = effectiveRequest;\n const { statusCode, statusText, duration } = response || {};\n\n // Get event-specific icon and class names\n const getEventIcon = () => {\n const iconClass = `icon-${eventType}`;\n switch (eventType) {\n case 'metadata':\n return Tests
\n {totalNumberOfFailedTests ? (\n {totalNumberOfFailedTests}\n ) : (\n {totalNumberOfTests}\n )}\n \n {effectiveRequest.headers && Object.keys(effectiveRequest.headers).length > 0 && (\n
\n );\n\n case 'message':\n return (\n \n
\n )}\n\n {/* gRPC Messages section */}\n {!isClientStreaming && effectiveRequest.body?.mode === 'grpc' && effectiveRequest.body?.grpc?.length > 0 && (\n Metadata
\n \n {Object.entries(effectiveRequest.headers).map(([key, value], idx) => (\n
\n \n
\n ))}\n {key}:
\n {typeof value === 'string' ? value : '[Buffer Buffer]'}
\n \n
\n )}\n Message
\n \n {effectiveRequest.body.grpc.filter((_, index) => index === 0).map((message, idx) => (\n
\n \n
\n ))}\n \n {typeof message.content === 'string'\n ? message.content\n : JSON.stringify(message.content, null, 2)}\n \n \n
\n );\n\n case 'metadata':\n return (\n \n
\n Message
\n \n {typeof eventData === 'string'\n ? eventData\n : JSON.stringify(eventData, null, 2)}\n \n \n
\n );\n\n case 'response':\n // For message responses, show the response data\n return (\n \n
\n Metadata Headers
\n {response.metadata && response.metadata.length > 0 ? (\n \n {response.metadata.map((header, idx) => (\n
\n ) : (\n \n
\n ))}\n {header.name}:
\n {header.value}
\n No metadata headers
\n )}\n \n
\n );\n\n case 'status':\n // For status events, show status and trailers\n return (\n \n
\n \n Response Message #{(response?.responses?.length) || 0}\n
\n {response?.responses && response.responses.length > 0 ? (\n \n {JSON.stringify(response.responses[response.responses.length - 1], null, 2)}\n \n ) : (\n Empty message
\n )}\n \n
\n );\n\n case 'error':\n // For error events, show error details\n return (\n \n
\n\n {response.statusDescription && (\n {response.statusDescription}
\n )}\n\n {response.trailers && response.trailers.length > 0 && (\n \n
\n )}\n Trailers
\n \n {response.trailers.map((trailer, idx) => (\n
\n \n
\n ))}\n {trailer.name}:
\n {trailer.value || ''}
\n \n
\n );\n\n case 'end':\n // For end events, show summary\n return (\n \n
\n\n Error
\n {response.error || 'Unknown error'}
\n \n
\n\n {response.trailers && response.trailers.length > 0 && (\n \n
\n )}\n Error Metadata
\n \n {response.trailers.map((trailer, idx) => (\n
\n \n
\n ))}\n {trailer.name}:
\n {trailer.value}
\n \n
\n );\n\n case 'cancel':\n // For cancel events, show cancellation info\n return (\n Stream Ended
\n \n Total messages: {(response?.responses?.length) || 0}\n
\n \n
\n );\n\n default:\n return null;\n }\n };\n\n return (\n Stream Cancelled
\n {response.statusDescription || 'The gRPC stream was cancelled'}
\n \n {isCollapsed ?
\n\n {/* Always show the URL */}\n \n {eventIcon}\n
\n {eventName}\n {eventType === 'request' && effectiveRequest.methodType && (\n \n {effectiveRequest.methodType}\n \n )}\n {eventType === 'status' && (\n \n
\n )}\n [{new Date(timestamp).toISOString()}]\n \n {url}
\n\n {/* Expanded content - only show for non-status items */}\n {!isCollapsed && renderEventContent()}\n \n
\n );\n};\n\nexport default BodyBlock;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js",
"content": "import { useState } from 'react';\n\nconst HeadersBlock = ({ headers, type }) => {\n const [areHeadersCollapsed, toggleHeaders] = useState(true);\n\n return (\n toggleBody(!isBodyCollapsed)}>\n
\n {isBodyCollapsed && (\n \n\n{isBodyCollapsed ? '▼' : '▶'}Body\n
\n {data || dataBuffer ? (\n
\n )}\n \n
\n ) : (\n No Body found
\n )}\n \n
\n );\n};\n\nconst Headers = ({ headers, type }) => {\n if (Array.isArray(headers)) {\n return (\n toggleHeaders(!areHeadersCollapsed)}>\n
\n {areHeadersCollapsed && (\n \n\n{areHeadersCollapsed ? '▼' : '▶'}Headers\n {headers && Object.keys(headers).length > 0\n &&({Object.keys(headers).length})}\n
\n {headers && Object.keys(headers).length > 0\n ?
\n )}\n No Headers found
}\n \n {headers.map((header, index) => (\n
\n );\n } else {\n return (\n \n {type === 'request' ? '>' : '<'} {header?.name}:\n {String(header?.value)}\n \n ))}\n \n {Object.entries(headers).map(([key, value], index) => (\n
\n );\n }\n};\n\nexport default HeadersBlock;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.js",
"content": "import { useMemo } from 'react';\nimport { useTheme } from 'providers/Theme';\n\nconst Method = ({ method }) => {\n const { theme } = useTheme();\n\n const methodColor = useMemo(() => {\n const methodLower = method?.toLowerCase();\n return theme.request.methods[methodLower] || theme.text;\n }, [method, theme]);\n\n return (\n \n {method}\n \n );\n};\n\nexport default Method;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Status/index.js",
"content": "import { useTheme } from 'providers/Theme';\n\nconst Status = ({ statusCode, statusText }) => {\n const { theme } = useTheme();\n\n let statusColor = theme.colors.text.muted;\n if (statusCode >= 200 && statusCode < 300) {\n statusColor = theme.requestTabPanel.responseOk;\n } else if (statusCode >= 300 && statusCode < 400) {\n statusColor = theme.colors.text.warning;\n } else if (statusCode >= 400 && statusCode < 600) {\n statusColor = theme.requestTabPanel.responseError;\n }\n\n return (\n \n {statusCode}{' '}\n {statusText || ''}\n \n );\n};\n\nexport default Status;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Time/index.js",
"content": "import { useState, useEffect } from 'react';\nimport { useTheme } from 'providers/Theme';\n\nconst getRelativeTime = (date) => {\n const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });\n const diff = (date - new Date()) / 1000;\n\n const timeUnits = [\n { unit: 'year', seconds: 31536000 },\n { unit: 'month', seconds: 2592000 },\n { unit: 'week', seconds: 604800 },\n { unit: 'day', seconds: 86400 },\n { unit: 'hour', seconds: 3600 },\n { unit: 'minute', seconds: 60 },\n { unit: 'second', seconds: 1 }\n ];\n\n for (const { unit, seconds } of timeUnits) {\n if (Math.abs(diff) >= seconds || unit === 'second') {\n return rtf.format(Math.round(diff / seconds), unit);\n }\n }\n};\n\nexport const RelativeTime = ({ timestamp }) => {\n const [relativeTime, setRelativeTime] = useState(getRelativeTime(new Date(timestamp)));\n const { theme } = useTheme();\n\n useEffect(() => {\n const interval = setInterval(() => {\n setRelativeTime(getRelativeTime(new Date(timestamp)));\n }, 1000);\n\n return () => clearInterval(interval);\n }, [timestamp]);\n\n return (\n \n {type === 'request' ? '>' : '<'} {key}:\n {String(value)}\n \n ))}\n \n
\n \n {logs.map((currentLog, index) => {\n if (index > 0 && currentLog?.type === 'separator') {\n return ;\n }\n const nextLog = logs[index + 1];\n const isSameLogType = nextLog?.type === currentLog?.type;\n return (\n \n \n \n
\n );\n};\n\nexport default Network;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Request/index.js",
"content": "import Headers from '../Common/Headers/index';\nimport BodyBlock from '../Common/Body/index';\n\nconst safeStringifyJSONIfNotString = (obj) => {\n if (obj === null || obj === undefined) return '';\n\n if (typeof obj === 'string') {\n return obj;\n }\n\n try {\n return JSON.stringify(obj);\n } catch (e) {\n return '[Unserializable Object]';\n }\n};\n\nconst Request = ({ collection, request, item }) => {\n let { url, headers, data, dataBuffer, error } = request || {};\n if (!dataBuffer) {\n dataBuffer = Buffer.from(safeStringifyJSONIfNotString(data))?.toString('base64');\n }\n\n return (\n {message}
\n \n {/* Method and URL */}\n
\n );\n};\n\nexport default Request;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js",
"content": "import BodyBlock from '../Common/Body/index';\nimport Headers from '../Common/Headers/index';\nimport Status from '../Common/Status/index';\n\nconst safeStringifyJSONIfNotString = (obj) => {\n if (obj === null || obj === undefined) return '';\n\n if (typeof obj === 'string') {\n return obj;\n }\n\n try {\n return JSON.stringify(obj);\n } catch (e) {\n return '[Unserializable Object]';\n }\n};\n\nconst Response = ({ collection, response, item }) => {\n let { status, statusCode, statusText, dataBuffer, headers, data, error } = response || {};\n if (!dataBuffer) {\n dataBuffer = Buffer.from(safeStringifyJSONIfNotString(data))?.toString('base64');\n }\n\n return (\n \n
\n\n {/* Headers */}\n {url}\n \n {/* Status */}\n
\n );\n};\n\nexport default Response;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js",
"content": "import styled from 'styled-components';\nimport { rgba } from 'polished';\n\nconst StyledWrapper = styled.div`\n .timeline-item {\n border-bottom: 1px solid ${(props) => props.theme.border.border1};\n padding: 0.5rem 0;\n\n &--oauth2 {\n border-bottom: 1px solid ${(props) => props.theme.border.border1};\n }\n }\n\n .timeline-item-header {\n position: relative;\n cursor: pointer;\n }\n\n .timeline-item-header-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-width: 0;\n }\n\n .timeline-item-header-items {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n min-width: 0;\n }\n\n .timeline-item-url {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin-top: 0.25rem;\n color: ${(props) => props.theme.colors.text.muted};\n }\n\n .timeline-item-timestamp {\n color: ${(props) => props.theme.colors.text.muted};\n flex-shrink: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .timeline-item-timestamp-iso {\n opacity: 0.7;\n color: ${(props) => props.theme.colors.text.muted};\n }\n\n .timeline-item-oauth-label {\n opacity: 0.5;\n color: ${(props) => props.theme.text};\n }\n\n .timeline-item-content {\n overflow: hidden;\n }\n\n .timeline-item-tabs {\n display: flex;\n margin-bottom: 1rem;\n }\n\n .timeline-item-tab {\n margin-right: 1rem;\n position: relative;\n padding: 0.5rem 1rem;\n color: ${(props) => props.theme.colors.text.muted};\n background: none;\n border: none;\n cursor: pointer;\n font-size: ${(props) => props.theme.font.size.base};\n\n &--active {\n color: ${(props) => props.theme.tabs.active.color};\n\n &:after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n height: 2px;\n background: ${(props) => props.theme.tabs.active.border};\n }\n }\n }\n\n .timeline-item-tab-content {\n word-break: break-all;\n }\n\n .timeline-item-metadata {\n color: ${(props) => props.theme.colors.text.muted};\n margin-left: 0.5rem;\n font-size: ${(props) => props.theme.font.size.base};\n }\n\n .collapsible-section {\n .section-header {\n cursor: pointer;\n pre {\n color: ${(props) => rgba(props.theme.primary.text, 0.8)};\n }\n }\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js",
"content": "import { useState } from 'react';\nimport { useTheme } from 'providers/Theme';\nimport Network from './Network/index';\nimport Request from './Request/index';\nimport Response from './Response/index';\nimport Method from './Common/Method/index';\nimport Status from './Common/Status/index';\nimport { RelativeTime } from './Common/Time/index';\nimport StyledWrapper from './StyledWrapper';\n\nconst TimelineItem = ({ timestamp, request, response, item, collection, isOauth2, hideTimestamp = false }) => {\n const { theme } = useTheme();\n const [isCollapsed, _toggleCollapse] = useState(false);\n const [activeTab, setActiveTab] = useState('request');\n const toggleCollapse = () => _toggleCollapse((prev) => !prev);\n const { method, status, statusCode, statusText, url = '' } = request || {};\n const { status: responseStatus, statusCode: responseStatusCode, statusText: responseStatusText } = response || {};\n const showNetworkLogs = response.timeline && response.timeline.length > 0;\n\n return (\n \n
\n\n {/* Headers */}\n \n
\n \n
\n {isCollapsed && (\n \n
\n {!hideTimestamp && (\n \n {url}
\n {isOauth2 && [oauth2.0]}\n \n {/* Tabs */}\n
\n )}\n \n setActiveTab('request')}\n >\n Request\n \n setActiveTab('response')}\n >\n Response\n \n {showNetworkLogs && (\n setActiveTab('networkLogs')}\n >\n Network Logs\n \n )}\n
\n\n {/* Tab Content */}\n \n {/* Request Tab */}\n {activeTab === 'request' && (\n
\n \n
\n );\n }\n\n // Regular HTTP request\n return (\n \n
\n );\n } else if (event.type === 'oauth2') { // Handle OAuth2 events\n const { data, timestamp } = event;\n const { debugInfo } = data;\n return (\n \n
\n );\n }\n\n return null;\n })}\n \n \n );\n};\n\nexport default Timeline;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n height: 100%;\n overflow: hidden;\n border-radius: 4px;\n\n div.tabs {\n div.tab {\n padding: 6px 0px;\n border: none;\n border-bottom: solid 2px transparent;\n margin-right: ${(props) => props.theme.tabs.marginRight};\n color: ${(props) => props.theme.colors.text.subtext0};\n cursor: pointer;\n\n &:focus,\n &:active,\n &:focus-within,\n &:focus-visible,\n &:target {\n outline: none !important;\n box-shadow: none !important;\n }\n\n &.active {\n font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;\n color: ${(props) => props.theme.tabs.active.color} !important;\n border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;\n }\n }\n }\n\n .stream-status {\n display: inline-flex;\n align-items: center;\n\n &.complete {\n color: ${(props) => props.theme.colors.text.green};\n }\n\n &.cancelled {\n color: ${(props) => props.theme.colors.text.danger};\n }\n\n &.streaming {\n color: ${(props) => props.theme.colors.text.blue};\n }\n }\n\n .message-counter {\n display: inline-flex;\n align-items: center;\n margin-left: 10px;\n }\n\n div.tabs .action-icon {\n color: ${(props) => props.theme.dropdown.iconColor};\n opacity: 0.8;\n\n &:hover {\n color: ${(props) => props.theme.text};\n opacity: 1;\n background-color: ${(props) => props.theme.workspace.button.bg};\n }\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n flex: 1;\n min-height: 0; \n height: 100%;\n\n .empty-state {\n padding: 1rem;\n color: ${(props) => props.theme.colors.text.muted};\n }\n\n .ws-message {\n background: ${(props) => props.theme.bg};\n\n &.new {\n background-color: ${({ theme }) => theme.table.striped};\n }\n\n &:not(:last-child) {\n border-bottom: 1px solid ${({ theme }) => theme.border.border1};\n }\n\n &:not(:last-child).open {\n border-bottom-width: 0px;\n }\n\n .message-content {\n color: ${(props) => props.theme.text};\n }\n\n .message-timestamp {\n font-size: ${(props) => props.theme.font.size.xs};\n color: ${(props) => props.theme.colors.text.muted};\n }\n\n .chevron-icon {\n color: ${(props) => props.theme.colors.text.muted};\n }\n }\n\n .ws-incoming .message-type-icon {\n color: ${(props) => props.theme.colors.text.green};\n }\n\n .ws-outgoing .message-type-icon {\n color: ${(props) => props.theme.colors.text.yellow};\n }\n\n .ws-info .message-type-icon {\n color: ${(props) => props.theme.colors.text.blue};\n }\n\n .ws-error .message-type-icon {\n color: ${(props) => props.theme.colors.text.danger};\n }\n\n .CodeMirror {\n border-radius: 0.25rem;\n }\n\n .CodeMirror-foldgutter, .CodeMirror-linenumbers, .CodeMirror-lint-markers {\n background: ${({ theme }) => theme.bg};\n }\n\n div[role='tablist'] {\n color: ${(props) => props.theme.colors.text.muted};\n\n .active {\n color: ${(props) => props.theme.colors.text.yellow};\n }\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js",
"content": "import React, { useState, useRef, useEffect, useCallback, memo } from 'react';\nimport classnames from 'classnames';\nimport StyledWrapper from './StyledWrapper';\nimport { IconExclamationCircle, IconChevronRight, IconInfoCircle, IconChevronDown, IconArrowUpRight, IconArrowDownLeft } from '@tabler/icons';\nimport CodeEditor from 'components/CodeEditor/index';\nimport { useTheme } from 'providers/Theme';\nimport { useSelector } from 'react-redux';\nimport { Virtuoso } from 'react-virtuoso';\n\nconst getContentMeta = (content) => {\n if (typeof content === 'object') {\n return {\n isJSON: true,\n content: JSON.stringify(content, null, 0)\n };\n }\n try {\n return {\n isJSON: true,\n content: JSON.stringify(JSON.parse(content), null, 0)\n };\n } catch {\n return {\n isJSON: false,\n content: content\n };\n }\n};\n\nconst parseContent = (content) => {\n let contentMeta = getContentMeta(content);\n return {\n type: contentMeta.isJSON ? 'application/json' : 'text/plain',\n content: contentMeta.isJSON ? JSON.stringify(JSON.parse(contentMeta.content), null, 2) : contentMeta.content\n };\n};\n\nconst getDataTypeText = (type) => {\n const textMap = {\n 'text/plain': 'RAW',\n 'application/json': 'JSON'\n };\n return textMap[type] ?? 'RAW';\n};\n\n/**\n *\n * @param {\"incoming\"|\"outgoing\"|\"info\"} type\n */\nconst TypeIcon = ({ type }) => {\n const commonProps = {\n size: 18\n };\n return {\n incoming: \n
\n \n OAuth2.0 Calls\n
\n \n {debugInfo && debugInfo.length > 0 ? (\n debugInfo.map((data, idx) => (\n
\n \n
\n ))\n ) : (\n No debug information available.
\n )}\n \n \n
\n \n {message.timestamp && (\n {new Date(message.timestamp).toISOString()}\n )}\n {canOpenMessage\n ? (\n \n {isOpen ? (\n
\n \n {isOpen && (\n <>\n \n setShowHex(true)}\n >\n hexdump\n
\n \n
\n \n )}\n \n );\n});\n\nconst WSMessagesList = ({ messages = [] }) => {\n const virtuosoRef = useRef(null);\n const [scrollerElement, setScrollerElement] = useState(null);\n const [openMessages, setOpenMessages] = useState(new Set());\n const userScrolledAwayRef = useRef(false);\n\n // Toggle message open/closed state by timestamp\n const handleMessageToggle = useCallback((timestamp) => {\n setOpenMessages((prev) => {\n const next = new Set(prev);\n if (next.has(timestamp)) {\n next.delete(timestamp);\n } else {\n next.add(timestamp);\n }\n return next;\n });\n }, []);\n\n useEffect(() => {\n if (!scrollerElement) return;\n\n const handleWheel = (e) => {\n // deltaY < 0 means scrolling up\n if (e.deltaY < 0) {\n userScrolledAwayRef.current = true;\n }\n };\n\n scrollerElement.addEventListener('wheel', handleWheel, { passive: true });\n\n return () => {\n scrollerElement.removeEventListener('wheel', handleWheel);\n };\n }, [scrollerElement]);\n\n const handleAtBottomStateChange = useCallback((atBottom) => {\n if (atBottom) {\n // User scrolled back to bottom, re-enable auto-scroll\n userScrolledAwayRef.current = false;\n }\n }, []);\n\n const followOutput = useCallback((isAtBottom) => {\n // Don't auto-scroll if user has scrolled away or has messages open\n if (userScrolledAwayRef.current || openMessages.size > 0) {\n return false;\n }\n if (isAtBottom) {\n return 'smooth';\n }\n return false;\n }, [openMessages.size]);\n\n const renderItem = useCallback((_, msg) => {\n const isOpen = openMessages.has(msg.timestamp);\n return No messages yet.
| Name | \nValue | \n
| {header.name} | \n{header.value} | \n
| \n No headers received\n | \n
{status}
: null}\n {statusText && {statusText}
}\n 404 | Not found
;\n }\n }\n };\n\n if (isLoading && !item.response) {\n return (\n Something went wrong
;\n }\n\n const focusedTab = find(tabs, (t) => t.uid === activeTabUid);\n if (!focusedTab || !focusedTab.uid || !focusedTab.responsePaneTab) {\n return An error occurred!
;\n }\n\n const rightContent = !isLoading ? (\n \n {focusedTab?.responsePaneTab === 'timeline' ? (\n <>\n
\n ) : null;\n\n return (\n \n
\n 404 | Not found
;\n }\n }\n };\n\n if (item.response && item.status === 'skipped') {\n return (\n Something went wrong
;\n }\n\n if (!focusedTab || !focusedTab.uid || !focusedTab.responsePaneTab) {\n return An error occurred!
;\n }\n\n const rightContent = !isLoading ? (\n \n {hasScriptError && !showScriptErrorCard && (\n setShowScriptErrorCard(true)}\n />\n )}\n {focusedTab?.responsePaneTab === 'response' && item?.response && !(item.response?.stream ?? false) ? (\n <>\n {/* Result View Tabs (Visualizations + Response Format) */}\n
\n ) : null;\n\n return (\n \n\n {/* Response Format */}\n {\n handleViewTabChange('editor');\n }}\n />\n
\n \n ) : null}\n \n
\n\n \n {focusedTab?.responsePaneTab === 'timeline' ? (\n
\n \n
\n \n {!item?.response ? (\n focusedTab?.responsePaneTab === 'timeline' && requestTimeline?.length ? (\n
\n \n 404 | Not found
;\n }\n }\n };\n\n const getTabClassname = (tabName) => {\n return classnames(`tab select-none ${tabName}`, {\n active: tabName === selectedTab\n });\n };\n\n if (item.status === 'skipped') {\n return (\n \n
\n selectTab('response')}>\n Response\n
\n selectTab('headers')}>\n Headers\n {headers?.length > 0 && {headers.length}}\n
\n selectTab('timeline')}>\n Timeline\n
\n selectTab('tests')}>\n
\n \n {hasScriptError && !showScriptErrorCard && (\n setShowScriptErrorCard(true)}\n />\n )}\n
\n \n {getTabPanel(selectedTab)}\n
\n \n
\n );\n};\n\nconst RunConfigurationPanel = ({ collection, selectedItems, setSelectedItems }) => {\n const dispatch = useDispatch();\n const [flattenedRequests, setFlattenedRequests] = useState([]);\n const [originalRequests, setOriginalRequests] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n\n const flattenRequests = useCallback((collection) => {\n const result = [];\n\n const processItems = (items) => {\n if (!items?.length) return;\n\n items.forEach((item) => {\n if (isItemARequest(item) && !item.partial && !item.isTransient) {\n const relativePath = path.relative(collection.pathname, path.dirname(item.pathname));\n const folderPath = relativePath !== '.' ? relativePath : '';\n\n result.push({\n ...item,\n folderPath: folderPath.replace(/\\\\/g, '/')\n });\n }\n\n if (item.items?.length) {\n processItems(item.items);\n }\n });\n };\n\n processItems(collection.items);\n return result;\n }, []);\n\n useEffect(() => {\n setIsLoading(true);\n\n try {\n const structureCopy = cloneDeep(collection);\n const requests = flattenRequests(structureCopy);\n\n const savedConfiguration = get(collection, 'runnerConfiguration', null);\n if (savedConfiguration?.requestItemsOrder?.length > 0) {\n const orderedRequests = [];\n const requestMap = new Map(requests.map((req) => [req.uid, req]));\n\n savedConfiguration.requestItemsOrder.forEach((uid) => {\n const request = requestMap.get(uid);\n if (request) {\n orderedRequests.push(request);\n requestMap.delete(uid);\n }\n });\n\n requestMap.forEach((request) => {\n orderedRequests.push(request);\n });\n\n setFlattenedRequests(orderedRequests);\n } else {\n setFlattenedRequests(requests);\n }\n\n setOriginalRequests(cloneDeep(requests));\n } catch (error) {\n console.error('Error loading collection structure:', error);\n } finally {\n setIsLoading(false);\n }\n }, [collection, flattenRequests]);\n\n const moveItem = useCallback((draggedItemUid, hoverIndex) => {\n setFlattenedRequests((prevRequests) => {\n const dragIndex = prevRequests.findIndex((item) => item.uid === draggedItemUid);\n\n if (dragIndex === -1 || dragIndex === hoverIndex) {\n return prevRequests;\n }\n\n const updatedRequests = [...prevRequests];\n const [draggedItem] = updatedRequests.splice(dragIndex, 1);\n updatedRequests.splice(hoverIndex, 0, draggedItem);\n\n return updatedRequests;\n });\n }, []);\n\n const handleDrop = useCallback(() => {\n const selectedUids = new Set(selectedItems);\n\n setFlattenedRequests((currentRequests) => {\n const newOrderedSelectedUids = currentRequests\n .filter((item) => selectedUids.has(item.uid))\n .map((item) => item.uid);\n\n const allRequestUidsOrder = currentRequests.map((item) => item.uid);\n\n setSelectedItems(newOrderedSelectedUids);\n dispatch(updateRunnerConfiguration(collection.uid, newOrderedSelectedUids, allRequestUidsOrder));\n\n return currentRequests;\n });\n }, [selectedItems, collection.uid, dispatch, setSelectedItems]);\n\n const handleRequestSelect = useCallback((item) => {\n try {\n if (selectedItems.includes(item.uid)) {\n const newSelectedUids = selectedItems.filter((uid) => uid !== item.uid);\n setSelectedItems(newSelectedUids);\n\n const allRequestUidsOrder = flattenedRequests.map((item) => item.uid);\n dispatch(updateRunnerConfiguration(collection.uid, newSelectedUids, allRequestUidsOrder));\n } else {\n const newSelectedUids = [...selectedItems, item.uid];\n\n const orderedSelectedUids = flattenedRequests\n .filter((req) => newSelectedUids.includes(req.uid))\n .map((req) => req.uid);\n\n setSelectedItems(orderedSelectedUids);\n\n const allRequestUidsOrder = flattenedRequests.map((item) => item.uid);\n dispatch(updateRunnerConfiguration(collection.uid, orderedSelectedUids, allRequestUidsOrder));\n }\n } catch (error) {\n console.error('Error selecting item:', error);\n }\n }, [selectedItems, setSelectedItems, flattenedRequests, dispatch, collection.uid]);\n\n const handleSelectAll = useCallback(() => {\n try {\n const allRequestUidsOrder = flattenedRequests.map((item) => item.uid);\n\n if (selectedItems.length === flattenedRequests.length) {\n setSelectedItems([]);\n dispatch(updateRunnerConfiguration(collection.uid, [], allRequestUidsOrder));\n } else {\n setSelectedItems(allRequestUidsOrder);\n dispatch(updateRunnerConfiguration(collection.uid, allRequestUidsOrder, allRequestUidsOrder));\n }\n } catch (error) {\n console.error('Error selecting/deselecting all items:', error);\n }\n }, [flattenedRequests, selectedItems, setSelectedItems, dispatch, collection.uid]);\n\n const handleReset = useCallback(() => {\n try {\n setFlattenedRequests(cloneDeep(originalRequests));\n setSelectedItems([]);\n dispatch(updateRunnerConfiguration(collection.uid, [], []));\n } catch (error) {\n console.error('Error resetting configuration:', error);\n }\n }, [originalRequests, setSelectedItems, collection.uid, dispatch]);\n\n return (\n \n
\n\n onSelect(item)}>\n
\n\n \n {isSelected &&
\n \n {getMethodInfo(item).methodText}\n
\n\n \n {item.name}\n {item.folderPath && (\n {item.folderPath}\n )}\n
\n \n
\n\n \n {selectedItems.length} of {flattenedRequests.length} selected\n
\n \n \n {selectedItems.length === flattenedRequests.length ? 'Deselect All' : 'Select All'}\n \n \n Reset\n \n
\n \n {isLoading ? (\n
\n Loading requests...
\n ) : flattenedRequests.length === 0 ? (\n No requests found in this collection
\n ) : (\n \n {flattenedRequests.map((item, idx) => {\n const isSelected = selectedItems.includes(item.uid);\n\n return (\n handleRequestSelect(item)}\n moveItem={moveItem}\n onDrop={handleDrop}\n />\n );\n })}\n
\n )}\n \n
\n );\n};\n\nexport default RunnerTags;\n"
},
{
"path": "packages/bruno-app/src/components/RunnerResults/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst Wrapper = styled.div`\n .textbox {\n padding: 0.2rem 0.5rem;\n box-shadow: none;\n border-radius: 0px;\n outline: none;\n box-shadow: none;\n transition: border-color ease-in-out 0.1s;\n border-radius: 3px;\n background-color: ${(props) => props.theme.input.bg};\n border: 1px solid ${(props) => props.theme.input.border};\n\n &:focus {\n border: solid 1px ${(props) => props.theme.input.focusBorder} !important;\n outline: none !important;\n }\n }\n\n .item-path {\n .link {\n color: ${(props) => props.theme.textLink};\n }\n }\n .danger {\n color: ${(props) => props.theme.colors.text.danger};\n }\n\n .test-summary {\n color: ${(props) => props.theme.tabs.active.border};\n }\n\n /* test results */\n .test-success {\n color: ${(props) => props.theme.colors.text.green};\n }\n\n .test-failure {\n color: ${(props) => props.theme.colors.text.danger};\n\n .error-message {\n color: ${(props) => props.theme.colors.text.muted};\n }\n }\n \n .skipped-request {\n color: ${(props) => props.theme.colors.text.muted};\n }\n\n .text-muted {\n color: ${(props) => props.theme.colors.text.muted};\n }\n\n .text-green {\n color: ${(props) => props.theme.colors.text.green};\n }\n\n .text-subtext0 {\n color: ${(props) => props.theme.colors.text.subtext0};\n }\n\n .text-subtext1 {\n color: ${(props) => props.theme.colors.text.subtext1};\n }\n\n .hover-bg-surface {\n &:hover {\n background-color: ${(props) => props.theme.background.surface1};\n }\n }\n\n .button-sm {\n font-size: ${(props) => props.theme.font.size.sm};\n }\n\n .run-config-panel, .run-config-option {\n border-color: ${(props) => props.theme.background.surface1};\n }\n\n .filter-bar {\n display: flex;\n align-items: stretch;\n border-radius: ${(props) => props.theme.border.radius.base};\n border: 1px solid ${(props) => props.theme.border.border0};\n max-height: 35px;\n flex-shrink: 0;\n overflow: hidden;\n\n .filter-label {\n display: flex;\n align-items: center;\n padding: 0.5rem 0.75rem;\n border-top-left-radius: ${(props) => props.theme.border.radius.base};\n border-bottom-left-radius: ${(props) => props.theme.border.radius.base};\n background-color: ${(props) => props.theme.background.mantle};\n\n span {\n font-family: Inter, sans-serif;\n font-weight: 400;\n font-size: ${(props) => props.theme.font.size.sm};\n color: ${(props) => props.theme.colors.text.text};\n }\n }\n\n .filter-buttons {\n display: flex;\n align-items: center;\n gap: 1.25rem;\n padding: 0.5rem 0.75rem 0 0.75rem;\n border-top-right-radius: ${(props) => props.theme.border.radius.base};\n border-bottom-right-radius: ${(props) => props.theme.border.radius.base};\n background: transparent;\n }\n }\n\n .filter-button {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0;\n padding-bottom: 0.4rem;\n border: none;\n border-bottom: 2px solid transparent;\n background: transparent;\n font-family: Inter, sans-serif;\n line-height: 100%;\n letter-spacing: 0%;\n cursor: pointer;\n transition: color 0.15s ease, border-bottom-color 0.15s ease;\n outline: none;\n\n &:focus-visible {\n outline: 2px solid ${(props) => props.theme.tabs.active.border};\n outline-offset: 2px;\n }\n\n .filter-count {\n padding: 2px 4.5px;\n border-radius: 2px;\n border: 1px solid ${(props) => props.theme.border.border0};\n background-color: ${(props) => props.theme.background.surface0};\n font-family: Inter, sans-serif;\n font-size: ${(props) => props.theme.font.size.xs};\n font-weight: 500;\n line-height: 100%;\n letter-spacing: 0%;\n }\n\n &.active {\n font-weight: ${(props) => props.theme.tabs.active.fontWeight};\n color: ${(props) => props.theme.tabs.active.color};\n border-bottom-color: ${(props) => props.theme.tabs.active.border};\n\n .filter-count {\n color: ${(props) => props.theme.tabs.active.color};\n }\n }\n\n &:not(.active) {\n font-weight: 500;\n color: ${(props) => props.theme.colors.text.subtext0};\n\n .filter-count {\n color: ${(props) => props.theme.colors.text.subtext0};\n }\n }\n }\n`;\n\nexport default Wrapper;\n"
},
{
"path": "packages/bruno-app/src/components/RunnerResults/index.jsx",
"content": "import React, { useState, useRef, useEffect } from 'react';\nimport path from 'utils/common/path';\nimport { useDispatch } from 'react-redux';\nimport { get, cloneDeep } from 'lodash';\nimport { runCollectionFolder, cancelRunnerExecution, mountCollection, updateRunnerConfiguration } from 'providers/ReduxStore/slices/collections/actions';\nimport { resetCollectionRunner, updateRunnerTagsDetails } from 'providers/ReduxStore/slices/collections';\nimport { findItemInCollection, getTotalRequestCountInCollection, areItemsLoading, getRequestItemsForCollectionRun } from 'utils/collections';\nimport { IconRefresh, IconCircleCheck, IconCircleX, IconCircleOff, IconCheck, IconX, IconRun, IconExternalLink } from '@tabler/icons';\nimport ResponsePane from './ResponsePane';\nimport StyledWrapper from './StyledWrapper';\nimport RunnerTags from './RunnerTags/index';\nimport RunConfigurationPanel from './RunConfigurationPanel';\nimport Button from 'ui/Button/index';\n\nconst getDisplayName = (fullPath, pathname, name = '') => {\n let relativePath = path.relative(fullPath, pathname);\n const { dir = '' } = path.parse(relativePath);\n return path.join(dir, name);\n};\n\nconst getTestStatus = (results) => {\n if (!results || !results.length) return 'pass';\n const failed = results.filter((result) => result.status === 'fail');\n return failed.length ? 'fail' : 'pass';\n};\n\nconst allTestsPassed = (item) => {\n return item.status !== 'error'\n && item.testStatus === 'pass'\n && item.assertionStatus === 'pass'\n && item.preRequestTestStatus === 'pass'\n && item.postResponseTestStatus === 'pass';\n};\n\nconst anyTestFailed = (item) => {\n return item.status === 'error'\n || item.testStatus === 'fail'\n || item.assertionStatus === 'fail'\n || item.preRequestTestStatus === 'fail'\n || item.postResponseTestStatus === 'fail';\n};\n\n// === Centralized filters definition ===\nconst FILTERS = {\n all: {\n label: 'All',\n predicate: () => true,\n resultFilter: (results) => results\n },\n passed: {\n label: 'Passed',\n predicate: (item) => allTestsPassed(item),\n resultFilter: (results) => results?.filter((r) => r.status === 'pass')\n },\n failed: {\n label: 'Failed',\n predicate: (item) => anyTestFailed(item),\n resultFilter: (results) => results?.filter((r) => ['fail', 'error'].includes(r.status))\n },\n skipped: {\n label: 'Skipped',\n predicate: (item) => item.status === 'skipped',\n resultFilter: (results) => results\n }\n};\n\n// === Reusable filter button ===\nconst FilterButton = ({ label, count, active, onClick }) => (\n \n setTagsEnabled(!tagsEnabled)}\n />\n \n
\n {tagsEnabled && (\n \n
\n )}\n \n Included tags:\n handleAddTag({ tag, to: 'include' })}\n handleRemoveTag={(tag) => handleRemoveTag({ tag, from: 'include' })}\n tagsHintList={tagsHintList}\n handleValidation={handleValidation}\n />\n
\n \n Excluded tags:\n handleAddTag({ tag, to: 'exclude' })}\n handleRemoveTag={(tag) => handleRemoveTag({ tag, from: 'exclude' })}\n tagsHintList={tagsHintList}\n handleValidation={handleValidation}\n />\n
\n \n
\n \n
\n\n {configureMode && (\n \n Runner\n
\n \n You have {totalRequestsInCollection} requests in this collection.\n {isCollectionLoading && (\n \n (Loading...)\n \n )}\n
\n {isCollectionLoading ? Requests in this collection are still loading.
: null}\n \n \n setDelay(e.target.value)}\n />\n
\n\n {/* Tags for the collection run */}\n \n
\n\n \n
\n \n \n {configureMode && selectedRequestItems.length > 0\n ? `Run ${selectedRequestItems.length} Selected Request${selectedRequestItems.length > 1 ? 's' : ''}`\n : 'Run Collection'}\n \n\n \n
\n \n
\n )}\n \n
\n\n \n
\n\n {runnerInfo.status !== 'ended' && runnerInfo.cancelTokenUid ? (\n \n Filter by:\n
\n \n {Object.entries(FILTERS).map(([key, { label }]) => (\n setActiveFilter(key)}\n />\n ))}\n
\n \n \n Cancel Execution\n \n
\n ) : runnerInfo.status === 'ended' ? (\n \n \n Run Again\n \n \n Reset\n \n
\n ) : null}\n \n \n {tagsEnabled && areTagsAdded && (\n
\n\n {selectedItem ? (\n \n Tags:\n
\n )}\n {runnerInfo?.statusText\n ? (\n \n
\n \n {tags.include.join(', ')}\n
\n \n {tags.exclude.join(', ')}\n
\n \n {runnerInfo?.statusText}\n
\n )\n : null}\n\n {/* Items list */}\n \n {filteredItems.map((item) => {\n return (\n
\n \n
\n );\n })}\n \n
\n \n \n {allTestsPassed(item)\n ? \n {item.displayName}\n \n {item.status !== 'error' && item.status !== 'skipped' && item.status !== 'completed' ? (\n
\n {tagsEnabled && areTagsAdded && item?.tags?.length > 0 && (\n \n Tags: {item.tags.filter((t) => tags.include.includes(t)).join(', ')}\n
\n )}\n {item.status == 'error' ? {item.error}
: null}\n\n - \n {item.preRequestTestResults\n ? filterTestResults(item.preRequestTestResults).map((result) => (\n
- \n {result.status === 'pass' ? (\n \n
\n {result.description}\n \n ) : (\n <>\n \n \n {result.description}\n \n {result.error}\n \n )}\n \n ))\n : null}\n {item.postResponseTestResults\n ? filterTestResults(item.postResponseTestResults).map((result) => (\n - \n {result.status === 'pass' ? (\n \n
\n {result.description}\n \n ) : (\n <>\n \n \n {result.description}\n \n {result.error}\n \n )}\n \n ))\n : null}\n {item.testResults\n ? filterTestResults(item.testResults).map((result) => (\n - \n {result.status === 'pass' ? (\n \n
\n {result.description}\n \n ) : (\n <>\n \n \n {result.description}\n \n {result.error}\n \n )}\n \n ))\n : null}\n {filterTestResults(item.assertionResults).map((result) => (\n - \n {result.status === 'pass' ? (\n \n
\n {result.lhsExpr}: {result.rhsExpr}\n \n ) : (\n <>\n \n \n {result.lhsExpr}: {result.rhsExpr}\n \n {result.error}\n \n )}\n \n ))}\n
\n
\n ) : (\n \n
\n \n setSelectedItem(null)}\n className=\"p-1 rounded hover-bg-surface transition-colors cursor-pointer flex items-center justify-center\"\n title=\"Close\"\n aria-label=\"Close response view\"\n >\n
\n \n {selectedItem.displayName}\n \n {allTestsPassed(selectedItem)\n ?
\n \n
\n )}\n \n \n
\n \n
\n \n Click on the status code to view the response\n
\n\n
\n {isLoading && (\n \n
\n You have unsaved transient requests
\n\n You have {modals.length}{' '}\n {pluralizeWord('request', modals.length)} that need to be saved.\n
\n\n\n
\n \n\n \n Transient {pluralizeWord('Request', modals.length)} ({modals.length})\n
\n\n These requests need to be saved before you can proceed.\n
\n\n {modals.map((modal) => {\n const { item, collection } = modal;\n return (\n \n handleOpenSpecificModal(item.uid)}\n icon={
\n );\n })}\n \n {item.name}\n \n {collection.name}\n \n
\n \n \n
\n \n );\n};\n\nexport default SaveTransientRequestContainer;\n"
},
{
"path": "packages/bruno-app/src/components/SaveTransientRequest/FolderBreadcrumbs/index.js",
"content": "import React from 'react';\nimport { IconChevronRight } from '@tabler/icons';\n\nconst FolderBreadcrumbs = ({\n collectionName,\n breadcrumbs,\n isAtRoot,\n onNavigateToRoot,\n onNavigateToBreadcrumb\n}) => {\n return (\n <>\n \n
\n\n \n \n setRequestName(e.target.value)}\n autoFocus={!isSelectingCollection}\n onFocus={(e) => e.target.select()}\n />\n
\n\n \n
\n \n {isSelectingCollection ? 'Select a collection to save to' : 'Save to Collections'}\n
\n\n {isScratchCollection && (\n \n {\n setIsSelectingCollection(true);\n setSelectedTargetCollectionPath(null);\n reset();\n } : undefined}\n >\n Collections\n \n {!isSelectingCollection && (\n <>\n
\n )}\n\n {isSelectingCollection ? (\n \n {availableCollections.length > 0 || newCollection.show ? (\n
\n ) : (\n <>\n {!isScratchCollection && (selectedTargetCollection || collection) && (\n - \n {availableCollections.map((coll) => {\n const collPath = coll.path || coll.pathname;\n return (\n
- \n \n \n\n\n\n \n\n\n\n\n\n \n\n\n\n\n \n )}\n
\n
\n )}\n No collections Yet
\nCollections help you organize your requests. Create your first one to save this request.
\n\n
\n )}\n\n \n
\n\n \n {filteredFolders.length > 0 || showNewFolderInput ? (\n
\n \n )}\n - \n {filteredFolders.map((folder) => (\n
- \n \n\n
\n \n \n\n\n {showFilesystemName && (\n\n\n\n \n \n \n \n\n )}\n\n\n \n {isEditingFolderFilename ? (\n\n {isEditingFolderFilename ? (\n\n\n ) : (\n\n\n )}\n\n Hide filesystem name\n \n ) : (\n <>\n \n Show filesystem name\n \n )}\n \n \n )}\n
\n
\n \n {searchText.trim() ? 'No folders found' : 'No folders available'}\n
\n )}\n \n
\n \n \n {!showNewFolderInput && !isSelectingCollection && (\n
\n \n \n {!isSelectingCollection && (\n \n )}\n
\n \n \n
\n \n {\n setSearchText('');\n }}\n >\n
\n )}\n \n
\n \n );\n };\n\n const triggerIcon = (\n \n
\n {option.warning && (\n
\n {option.warning}
)}\n {option.description}
\n \n \n \n
\n );\n\n return (\n \n {selectedMode === 'developer' ?
\n \n
\n JavaScript Sandbox
\n {SANDBOX_OPTIONS.map(renderOption)}\n \n {warningMessage}\n
\n \n )}\n />\n\n
\n );\n};\n\nexport default SettingsInput;\n"
},
{
"path": "packages/bruno-app/src/components/ShareCollection/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n .tabs {\n .tab {\n padding: 6px 0px;\n border: none;\n border-bottom: solid 2px transparent;\n margin-right: ${(props) => props.theme.tabs.marginRight};\n color: ${(props) => props.theme.colors.text.subtext0};\n cursor: pointer;\n\n &:focus,\n &:active,\n &:focus-within,\n &:focus-visible,\n &:target {\n outline: none !important;\n box-shadow: none !important;\n }\n\n &.active {\n font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;\n color: ${(props) => props.theme.tabs.active.color} !important;\n border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;\n }\n }\n }\n\n .section-title {\n font-weight: 600;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: ${(props) => props.theme.colors.text.subtext0};\n margin-bottom: 0.75rem;\n }\n\n .opencollection-link {\n color: ${(props) => props.theme.textLink};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n\n .bruno-format-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n }\n\n .format-card {\n display: flex;\n flex-direction: column;\n border-radius: ${(props) => props.theme.border.radius.base};\n padding: 1rem;\n border: 2px solid ${(props) => props.theme.border.border0};\n background-color: ${(props) => props.theme.background.base};\n cursor: pointer;\n transition: border-color 0.15s ease;\n min-height: 180px;\n\n &:hover:not(.selected) {\n border-color: ${(props) => props.theme.border.border2};\n }\n\n &.selected {\n border-color: ${(props) => props.theme.primary.solid};\n }\n\n .card-header {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-bottom: 0.5rem;\n\n .card-title {\n font-weight: 600;\n font-size: 0.9375rem;\n }\n\n .recommended-badge {\n padding: 0.125rem 0.5rem;\n font-size: 0.6875rem;\n font-weight: 600;\n border-radius: 0.25rem;\n background-color: ${(props) => props.theme.colors.text.warning};\n color: white;\n }\n }\n\n .card-description {\n font-size: 0.8125rem;\n color: ${(props) => props.theme.colors.text.subtext0};\n margin-bottom: 0.75rem;\n }\n\n .feature-list {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n\n .feature-item {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.8125rem;\n color: ${(props) => props.theme.colors.text.subtext0};\n\n .checkmark {\n color: ${(props) => props.theme.colors.text.subtext0};\n flex-shrink: 0;\n margin-top: 0.125rem;\n }\n }\n }\n\n .best-for {\n margin-top: 0.75rem;\n font-size: 0.75rem;\n font-style: italic;\n color: ${(props) => props.theme.colors.text.muted};\n }\n }\n\n .other-format-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n }\n\n .other-format-card {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n border-radius: ${(props) => props.theme.border.radius.base};\n padding: 0.75rem 1rem;\n border: 2px solid ${(props) => props.theme.border.border0};\n background-color: ${(props) => props.theme.background.base};\n cursor: pointer;\n transition: border-color 0.15s ease;\n\n &:hover:not(.selected) {\n border-color: ${(props) => props.theme.border.border2};\n }\n\n &.selected {\n border-color: ${(props) => props.theme.primary.solid};\n }\n\n .format-icon {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .format-info {\n .format-name {\n font-weight: 600;\n font-size: 0.875rem;\n }\n\n .format-description {\n font-size: 0.75rem;\n color: ${(props) => props.theme.colors.text.subtext0};\n }\n }\n }\n\n .modal-footer {\n display: flex;\n justify-content: flex-end;\n margin-top: 1.5rem;\n padding-top: 1rem;\n border-top: 1px solid ${(props) => props.theme.border.border0};\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/ShareCollection/index.js",
"content": "import React, { useState, useMemo } from 'react';\nimport Modal from 'components/Modal';\nimport Button from 'ui/Button';\nimport { IconCheck, IconAlertTriangle, IconFileExport } from '@tabler/icons';\nimport StyledWrapper from './StyledWrapper';\nimport exportPostmanCollection from 'utils/exporters/postman-collection';\nimport exportOpenCollection from 'utils/exporters/opencollection';\nimport { cloneDeep } from 'lodash';\nimport { transformCollectionToSaveToExportAsFile } from 'utils/collections/index';\nimport { useSelector } from 'react-redux';\nimport { findCollectionByUid, areItemsLoading } from 'utils/collections/index';\nimport toast from 'react-hot-toast';\n\nconst EXPORT_FORMATS = {\n ZIP: 'zip',\n YAML: 'yaml',\n POSTMAN: 'postman'\n};\n\nconst ShareCollection = ({ onClose, collectionUid }) => {\n const collection = useSelector((state) => findCollectionByUid(state.collections.collections, collectionUid));\n const isCollectionLoading = areItemsLoading(collection);\n const [selectedFormat, setSelectedFormat] = useState(EXPORT_FORMATS.ZIP);\n const [isExporting, setIsExporting] = useState(false);\n\n const hasNonExportableRequestTypes = useMemo(() => {\n let types = new Set();\n const checkItem = (item) => {\n if (item.type === 'grpc-request') {\n types.add('gRPC');\n return true;\n }\n if (item.type === 'ws-request') {\n types.add('WebSocket');\n return true;\n }\n if (item.items) {\n return item.items.some(checkItem);\n }\n return false;\n };\n return {\n has: collection?.items?.filter(checkItem).length || false,\n types: [...types]\n };\n }, [collection]);\n\n const handleExportZip = async () => {\n try {\n const { ipcRenderer } = window;\n const result = await ipcRenderer.invoke('renderer:export-collection-zip', collection.pathname, collection.name);\n if (result.success) {\n toast.success('Collection exported successfully');\n }\n } catch (error) {\n toast.error('Failed to export collection: ' + error.message);\n }\n };\n\n const handleExportYaml = () => {\n const collectionCopy = cloneDeep(collection);\n exportOpenCollection(transformCollectionToSaveToExportAsFile(collectionCopy));\n };\n\n const handleExportPostman = () => {\n const collectionCopy = cloneDeep(collection);\n exportPostmanCollection(collectionCopy);\n };\n\n const handleProceed = async () => {\n if (isCollectionLoading || isExporting) return;\n\n setIsExporting(true);\n try {\n switch (selectedFormat) {\n case EXPORT_FORMATS.ZIP:\n await handleExportZip();\n break;\n case EXPORT_FORMATS.YAML:\n handleExportYaml();\n break;\n case EXPORT_FORMATS.POSTMAN:\n handleExportPostman();\n break;\n }\n onClose();\n } catch (error) {\n console.error('Export error:', error);\n } finally {\n setIsExporting(false);\n }\n };\n\n const isDisabled = isCollectionLoading || isExporting;\n\n return (\n \n \n {description && (\n
\n \n {description}\n
\n )}\n\n Bruno uses{' '}\n
Bruno Format
\n \n {/* ZIP Option */}\n !isDisabled && setSelectedFormat(EXPORT_FORMATS.ZIP)}\n >\n
\n\n {/* Single File YAML Option */}\n \n Bruno Collection (ZIP)\n Recommended\n
\n OpenCollection format organized as folders and files
\n\n
\n \n
\n \n
\n \n
\n Best for: Team collaboration, version control, publishing
\n\n Single File (YAML)\n
\n OpenCollection format bundled into one .yml file
\n\n
\n \n
\n \n
\n Best for: Quick sharing as a single file
\n \n \n\nOther Format
\n \n !isDisabled && setSelectedFormat(EXPORT_FORMATS.POSTMAN)}\n >\n
\n \n\n {selectedFormat === EXPORT_FORMATS.POSTMAN && hasNonExportableRequestTypes.has && (\n \n
\n \n
\n Postman
\n Export for Postman
\n \n
\n )}\n\n \n \n {isExporting ? 'Exporting...' : 'Proceed'}\n \n
\n \n
\n );\n });\n\n return (\n \n {\n dropdownTippyRef.current.hide();\n setCloseApiSpecModal(true);\n }}\n >\n \n
\n \n \n \n );\n};\n\nexport default ApiSpecItem;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/ApiSpecs/CloseApiSpec/index.js",
"content": "import React from 'react';\nimport toast from 'react-hot-toast';\nimport Modal from 'components/Modal';\nimport { useDispatch } from 'react-redux';\nimport { IconFileCode } from '@tabler/icons';\nimport { closeApiSpecFile } from 'providers/ReduxStore/slices/apiSpec';\n\nconst CloseApiSpec = ({ onClose, apiSpec }) => {\n const dispatch = useDispatch();\n\n const onConfirm = () => {\n dispatch(closeApiSpecFile({ uid: apiSpec.uid }))\n .then(() => {\n toast.success('API Spec closed');\n onClose();\n })\n .catch(() => toast.error('An error occurred while closing the API Spec'));\n };\n\n return (\n \n
\n {apiSpec.pathname}
\n \n Are you sure you want to close API Spec {apiSpec.name} in Bruno?\n
\n \n It will still be available in the file system at the above location and can be re-opened later.\n
\n \n
\n No API Specs found.
\n \n
\n \n {apiSpecs && apiSpecs.length\n ? apiSpecs.map((apiSpec) => {\n return
\n \n
\n );\n });\n\n const formik = useFormik({\n enableReinitialize: true,\n initialValues: {\n collectionLocation: defaultLocation\n },\n validationSchema: Yup.object({\n collectionLocation: Yup.string()\n .min(1, 'must be at least 1 character')\n .max(500, 'must be 500 characters or less')\n .required('Location is required')\n }),\n onSubmit: async (values) => {\n let filteredCollections = [];\n const selectedItems = importedCollection.filter((col) => selectedCollections.includes(col.uid));\n\n if (isMultipleImport) {\n // Convert selected files to collections at submit time\n for (const item of selectedItems) {\n try {\n const collection = await convertCollection(item._fileData.type, item._fileData.data, groupingType);\n if (collection) {\n // Preserve the synthetic UID so status tracking, rename tracking,\n // and UI rendering all use the same key\n collection.uid = item.uid;\n filteredCollections.push(collection);\n }\n } catch (err) {\n console.warn(`Failed to convert file ${item._fileData.file.name}:`, err);\n }\n }\n } else if (isBulkImport) {\n // For bulk import, use selected collections directly\n filteredCollections = selectedItems;\n }\n\n const initialStatus = {};\n filteredCollections.forEach((col) => {\n initialStatus[col.uid] = STATUS.LOADING;\n });\n\n setStatus(initialStatus);\n setErrorMessages({});\n\n const filteredEnvironments = importedEnvironment.filter((env) =>\n selectedEnvironments.includes(env.uid)\n );\n\n // Handle duplicate collection names by renaming new ones to a unique \"{originalName} N\" suffix\n const existingCollectionNames = new Set(existingCollections.map((col) => normalizeName(col.name)));\n const usedNames = new Set();\n const renamedNames = {};\n\n filteredCollections.forEach((collection) => {\n const originalName = collection.name;\n let finalName = originalName;\n let index = 0;\n\n while (existingCollectionNames.has(normalizeName(finalName)) || usedNames.has(normalizeName(finalName))) {\n finalName = `${originalName} ${index + 1}`;\n index++;\n }\n\n collection.name = finalName;\n usedNames.add(normalizeName(finalName));\n // Store renamed name for summary display\n if (finalName !== originalName) {\n renamedNames[collection.uid] = finalName;\n }\n });\n\n setRenamedCollectionNames(renamedNames);\n\n // Process all selected environments and rename duplicates\n // Don't use getUniqueEnvironments as it filters out duplicates - we want to rename them instead\n const collectionRenamedEnvNames = {};\n const globalRenamedEnvNames = {};\n\n if (applyToCollection) {\n // add selected environments to each selected collection\n // Rename duplicates with \"copy\" suffix instead of filtering them out\n filteredCollections.forEach((collection) => {\n const existingNamesSet = new Set((collection.environments || []).map((e) => normalizeName(e?.name)));\n const usedNamesInBatch = new Set();\n\n const envsForCollection = filteredEnvironments.map((env) => {\n const originalName = env.name;\n const normalizedOriginalName = normalizeName(originalName);\n\n // Check if name exists in collection or was already used in this batch\n const checkExists = (name) => existingNamesSet.has(name) || usedNamesInBatch.has(name);\n const finalName = generateUniqueName(originalName, checkExists);\n\n // Track renamed name for summary display\n if (finalName !== originalName) {\n collectionRenamedEnvNames[env.uid] = finalName;\n }\n\n usedNamesInBatch.add(normalizeName(finalName));\n existingNamesSet.add(normalizeName(finalName));\n return { ...env, name: finalName };\n });\n\n collection.environments = envsForCollection;\n });\n\n // Mark all collection environments as success (they're processed with the collection import)\n const envStatusUpdate = {};\n filteredEnvironments.forEach((env) => {\n envStatusUpdate[env.uid] = STATUS.SUCCESS;\n });\n setEnvironmentStatus((prev) => ({ ...prev, ...envStatusUpdate }));\n\n if (Object.keys(collectionRenamedEnvNames).length > 0) {\n setRenamedEnvironmentNames((prev) => ({ ...prev, ...collectionRenamedEnvNames }));\n }\n }\n\n if (applyToGlobal && filteredEnvironments.length > 0) {\n // Pre-compute unique names for all environments to avoid race conditions\n const existingGlobalNames = new Set((globalEnvironments || []).map((env) => normalizeName(env?.name)));\n const usedNamesInBatch = new Set();\n const envsToImport = [];\n\n filteredEnvironments.forEach((environment) => {\n const checkExists = (name) => existingGlobalNames.has(name) || usedNamesInBatch.has(name);\n const uniqueName = generateUniqueName(environment.name, checkExists);\n\n if (uniqueName !== environment.name) {\n globalRenamedEnvNames[environment.uid] = uniqueName;\n }\n usedNamesInBatch.add(normalizeName(uniqueName));\n envsToImport.push({ ...environment, name: uniqueName });\n });\n\n if (Object.keys(globalRenamedEnvNames).length > 0) {\n setRenamedEnvironmentNames((prev) => ({ ...prev, ...globalRenamedEnvNames }));\n }\n\n envsToImport.forEach((envToImport) => {\n const originalUid = envToImport.uid;\n setEnvironmentStatus((prev) => ({ ...prev, [originalUid]: STATUS.LOADING }));\n\n dispatch(addGlobalEnvironment(envToImport))\n .then(() => setEnvironmentStatus((prev) => ({ ...prev, [originalUid]: STATUS.SUCCESS })))\n .catch((error) => {\n setEnvironmentStatus((prev) => ({ ...prev, [originalUid]: STATUS.ERROR }));\n setErrorMessages((prev) => ({ ...prev, [originalUid]: error.message || 'Failed to add environment' }));\n });\n });\n }\n\n setImportStarted(true);\n\n if (filteredCollections.length > 1 || isBulkImport || isMultipleImport) {\n dispatch(importCollection(filteredCollections, values.collectionLocation, { format: collectionFormat }))\n .catch((err) => {\n console.error('Failed to import collections', err);\n filteredCollections.forEach((collection) => {\n setStatus((prev) => ({ ...prev, [collection.uid]: STATUS.ERROR }));\n setErrorMessages((prev) => ({ ...prev, [collection.uid]: err.message || 'Failed to import collection' }));\n });\n });\n } else {\n handleSubmit(filteredCollections[0], values.collectionLocation, { format: collectionFormat });\n }\n }\n });\n\n const browse = () => {\n dispatch(browseDirectory())\n .then((dirPath) => {\n if (typeof dirPath === 'string' && dirPath.length > 0) {\n formik.setFieldValue('collectionLocation', dirPath);\n }\n })\n .catch((error) => {\n formik.setFieldValue('collectionLocation', '');\n console.error(error);\n });\n };\n\n useEffect(() => {\n if (!isElectron()) {\n return () => {};\n }\n\n const { ipcRenderer } = window;\n\n const handleImportStatus = (collectionId, status, errorMessage = '') => {\n setStatus((prev) => ({ ...prev, [collectionId]: status }));\n if (status === STATUS.ERROR) {\n setErrorMessages((prev) => ({\n ...prev,\n [collectionId]: errorMessage\n }));\n }\n };\n\n const importingCollectionStarted = ipcRenderer.on(\n 'main:collection-import-started',\n (collectionId) => {\n handleImportStatus(collectionId, STATUS.LOADING);\n }\n );\n const importingCollectionCompleted = ipcRenderer.on(\n 'main:collection-import-ended',\n (collectionId) => {\n handleImportStatus(collectionId, STATUS.SUCCESS);\n }\n );\n const importingCollectionFailed = ipcRenderer.on(\n 'main:collection-import-failed',\n (collectionId, { message }) => {\n handleImportStatus(collectionId, STATUS.ERROR, message);\n }\n );\n const allCollectionsImportCompleted = ipcRenderer.on(\n 'main:all-collections-import-ended',\n (report) => {\n toast.success(report?.message);\n }\n );\n return () => {\n importingCollectionStarted();\n importingCollectionCompleted();\n importingCollectionFailed();\n allCollectionsImportCompleted();\n };\n }, []);\n\n const onSubmit = () => {\n if (importStarted) {\n onClose();\n } else {\n formik.handleSubmit();\n }\n };\n\n const handleErrorClick = (error, uid) => {\n setSelectedError({ message: error, uid });\n setShowErrorModal(true);\n };\n\n const ErrorModal = ({ error, onClose }) => (\n \n
\n {selectedOption.label}
\n \n
\n \n );\n\n return (\n {error}\n \n
\n )}\n {isScanCompleted() && (\n - \n {steps.map((step, index) => (\n
- \n \n {step.error ? (\n\n {step.info && (\n
\n ) : (\n <>\n {step.completed ? (\n \n ) : (\n \n )}\n \n )}\n {step.title}\n \n\n )}\n{step.info}\n \n ))}\n
\n {collectionPaths.length === 0 && (\n
\n )}\n \n )}\n \n
\n )}\n {collectionPaths.length > 0 && (\n <>\n No bruno collections found in this repository.
\n\n {collectionPaths.length} bruno collections found. Please select the collections to open:\n
\n- \n {collectionPaths.map((collection) => (\n
- \n \n \n ))}\n
\n
\n {workspace?.pathname && (\n {workspace.pathname}
\n )}\n \n Are you sure you want to close workspace {workspace?.name}?\n
\n \n It will still be available in the file system at the above location and can be re-opened later.\n
\n \n );\n};\n\nexport default CloseWorkspace;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/Collections/Collection/CloneCollection/index.js",
"content": "import React, { useRef, useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useFormik } from 'formik';\nimport * as Yup from 'yup';\nimport path from 'utils/common/path';\nimport { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';\nimport { cloneCollection } from 'providers/ReduxStore/slices/collections/actions';\nimport toast from 'react-hot-toast';\nimport Modal from 'components/Modal';\nimport { sanitizeName, validateName, validateNameError } from 'utils/common/regex';\nimport Help from 'components/Help';\nimport PathDisplay from 'components/PathDisplay';\nimport { useState } from 'react';\nimport { IconArrowBackUp, IconEdit } from '@tabler/icons';\nimport { findCollectionByUid } from 'utils/collections/index';\nimport get from 'lodash/get';\n\nconst CloneCollection = ({ onClose, collectionUid }) => {\n const inputRef = useRef();\n const dispatch = useDispatch();\n const [isEditing, toggleEditing] = useState(false);\n const collection = useSelector((state) => findCollectionByUid(state.collections.collections, collectionUid));\n const preferences = useSelector((state) => state.app.preferences);\n const workspaces = useSelector((state) => state.workspaces?.workspaces || []);\n const workspaceUid = useSelector((state) => state.workspaces?.activeWorkspaceUid);\n const activeWorkspace = workspaces.find((w) => w.uid === workspaceUid);\n const isDefaultWorkspace = activeWorkspace?.type === 'default';\n\n const defaultLocation = isDefaultWorkspace\n ? get(preferences, 'general.defaultLocation', '')\n : (activeWorkspace?.pathname ? path.join(activeWorkspace.pathname, 'collections') : '');\n const { name } = collection;\n\n const formik = useFormik({\n enableReinitialize: true,\n initialValues: {\n collectionName: `${name} copy`,\n collectionFolderName: `${sanitizeName(name)} copy`,\n collectionLocation: defaultLocation\n },\n validationSchema: Yup.object({\n collectionName: Yup.string()\n .min(1, 'must be at least 1 character')\n .max(255, 'must be 255 characters or less')\n .required('collection name is required'),\n collectionFolderName: Yup.string()\n .min(1, 'must be at least 1 character')\n .max(255, 'must be 255 characters or less')\n .test('is-valid-collection-name', function (value) {\n const isValid = validateName(value);\n return isValid ? true : this.createError({ message: validateNameError(value) });\n })\n .required('folder name is required'),\n collectionLocation: Yup.string().min(1, 'location is required').required('location is required')\n }),\n onSubmit: (values) => {\n dispatch(\n cloneCollection(\n values.collectionName,\n values.collectionFolderName,\n values.collectionLocation,\n collection?.pathname\n )\n )\n .then(() => {\n toast.success('Collection created!');\n onClose();\n })\n .catch((e) => toast.error('An error occurred while creating the collection - ' + e));\n }\n });\n\n const browse = () => {\n dispatch(browseDirectory())\n .then((dirPath) => {\n // When the user closes the dialog without selecting anything dirPath will be false\n if (typeof dirPath === 'string') {\n formik.setFieldValue('collectionLocation', dirPath);\n }\n })\n .catch((error) => {\n formik.setFieldValue('collectionLocation', '');\n console.error(error);\n });\n };\n\n useEffect(() => {\n if (inputRef && inputRef.current) {\n inputRef.current.focus();\n }\n }, [inputRef]);\n\n const onSubmit = () => formik.handleSubmit();\n\n return (\n \n \n Options\n \n
\n );\n });\n\n return (\n \n
\n \n {shouldShowFolderIcon ? (\n
\n \n \n \n
\n
\n \n );\n};\n\nexport default CollectionItemInfo;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst Wrapper = styled.div`\n button.submit {\n color: white;\n background-color: var(--color-background-danger) !important;\n border: inherit !important;\n\n &:hover {\n border: inherit !important;\n }\n }\n`;\n\nexport default Wrapper;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/DeleteCollectionItem/index.js",
"content": "import React from 'react';\nimport Modal from 'components/Modal';\nimport { isItemAFolder } from 'utils/tabs';\nimport { useDispatch } from 'react-redux';\nimport { deleteItem, closeTabs } from 'providers/ReduxStore/slices/collections/actions';\nimport { recursivelyGetAllItemUids } from 'utils/collections';\nimport StyledWrapper from './StyledWrapper';\nimport toast from 'react-hot-toast';\n\nconst DeleteCollectionItem = ({ onClose, item, collectionUid }) => {\n const dispatch = useDispatch();\n const isFolder = isItemAFolder(item);\n const onConfirm = () => {\n dispatch(deleteItem(item.uid, collectionUid)).then(() => {\n if (isFolder) {\n // close all tabs that belong to the folder\n // including the folder itself and its children\n const tabUids = [...recursivelyGetAllItemUids(item.items), item.uid];\n\n dispatch(\n closeTabs({\n tabUids: tabUids\n })\n );\n } else {\n dispatch(\n closeTabs({\n tabUids: [item.uid]\n })\n );\n }\n }).catch((error) => {\n console.error('Error deleting item', error);\n toast.error(error?.message || 'Error deleting item');\n });\n onClose();\n };\n\n return (\n | \n {type == 'folder' ? 'Folder Name' : 'Request Name'}\n | \n\n :{name}\n | \n
| \n {type == 'folder' ? 'Folder Name' : 'File Name'}\n (on filesystem)\n {type == 'folder' ? (\n \n The name of the folder on your filesystem.\n \n\n Bruno saves each request as a file in your collection's folder.\n \n | \n \n :\n {filename}\n | \n
\n \n
\n\n {showRenameModal && (\n \n \n setEditName(e.target.value)}\n placeholder=\"Enter example name...\"\n autoFocus\n required\n />\n
\n \n )}\n\n {showDeleteModal && (\n \n
\n \n
\n \n
\n\n \n \n {mainLanguages.map((lang) => (\n \n ))}\n \n
\n\n {availableLibraries.length > 1 && (\n \n {availableLibraries.map((lib) => (\n handleLibraryChange(lib.libraryName)}\n >\n {lib.libraryName}\n \n ))}\n
\n )}\n \n \n
\n \n
\n \n {validateURLWithVars(finalUrl) ? (\n
\n \n
\n )}\n Invalid URL: {finalUrl}
\nPlease check the URL and try again
\n\n \n Options\n \n
\n );\n });\n\n return (\n \n \n {methodText}\n \n
\n \n
\n \n Run\n ({totalRequestItemsCountForFolderRun} requests)\n
\n This will only run the requests in this folder.
\n \n Recursive Run\n ({totalRequestItemsCountForRecursiveFolderRun} requests)\n
\n This will run all the requests in this folder and all its subfolders.
\n {isFolderLoading ? Requests in this folder are still loading.
: null}\n {isCollectionRunInProgress ? A Collection Run is already in progress.
: null}\n\n {/* Tags for the collection run */}\n \n \n {\n isCollectionRunInProgress\n ? (\n \n )\n : (\n <>\n \n \n \n )\n }\n
\n \n {indents && indents.length\n ? indents.map((i) => (\n \n {/* Indent */}\n
\n ))\n : null}\n \n
\n \n \n \n \n \n \n
\n \n \n {!itemIsCollapsed ? (\n \n {folderItems && folderItems.length\n ? folderItems.map((i) => {\n return
\n ) : null}\n\n {/* Show examples when expanded (only for HTTP requests) */}\n {isItemARequest(item) && item.type === 'http-request' && examplesExpanded && hasExamples && (\n \n {range(item.depth + 1).map((i) => (\n
\n ) : null}\n \n \n
\n ))}\n \n \n \n \n
\n \n {(item.examples || []).map((example, index) => {\n return (\n
\n )}\n \n
\n );\n\n return (\n \n Are you sure you want to permanently delete \"{collection.name}\"?\n
\n\n
\n {collection.name}
\n {collection.pathname}
\n \n This action cannot be undone. The collection files will be permanently deleted from disk.\n
\n\n \n setConfirmText(e.target.value)}\n placeholder=\"delete\"\n autoComplete=\"off\"\n autoFocus\n />\n
\n \n \n
\n \n
\n ) : (\n \n \n
\n
\n )}\n \n
\n \n Generate a standalone HTML file that can be hosted anywhere or shared with your team.\n
\n\n\n Sample Output\n 
\n
\n\n - \n {FEATURES.map((feature) => (\n
- \n
\n {feature}\n \n ))}\n
\n The generated file loads OpenCollection's JavaScript and CSS files from a CDN, which requires an internet connection.\n
\n\n
\n Hold on..
\n\n You have unsaved changes in {allDrafts.length}{' '}\n {pluralizeWord('request', allDrafts.length)}.\n
\n\n {/* Regular (saved) requests with changes */}\n {currentDrafts.length > 0 && (\n\n
\n )}\n\n {/* Transient (unsaved) requests */}\n {currentTransientDrafts.length > 0 && (\n \n Saved {pluralizeWord('Request', currentDrafts.length)} ({currentDrafts.length})\n
\n- \n {currentDrafts.slice(0, MAX_UNSAVED_REQUESTS_TO_SHOW).map((item) => {\n return (\n
- \n • {item.filename || item.name}\n \n );\n })}\n
\n ...{currentDrafts.length - MAX_UNSAVED_REQUESTS_TO_SHOW} additional{' '}\n {pluralizeWord('request', currentDrafts.length - MAX_UNSAVED_REQUESTS_TO_SHOW)} not shown\n
\n )}\n\n
\n \n )}\n\n \n Transient {pluralizeWord('Request', currentTransientDrafts.length)} ({currentTransientDrafts.length})\n
\n\n These requests need to be saved individually before closing the collection.\n
\n\n {currentTransientDrafts.map((item) => {\n return (\n \n {item.name}\n handleSaveTransient(item)}\n icon={
\n );\n })}\n \n
\n \n );\n};\n\nexport default ConfirmCollectionCloseDrafts;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n .collection-info-card {\n background-color: ${(props) => props.theme.modal.title.bg};\n border-radius: 4px;\n padding: 12px;\n }\n .collection-name {\n font-weight: 500;\n padding-left: 0 !important;\n color: ${(props) => props.theme.text};\n margin-bottom: 4px;\n cursor: default !important;\n &:hover {\n background: none !important;\n }\n }\n .collection-path {\n font-size: ${(props) => props.theme.font.size.sm};\n color: ${(props) => props.theme.colors.text.muted};\n word-break: break-all;\n }\n .warning-icon {\n color: ${(props) => props.theme.status.warning.text};\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js",
"content": "import React, { useMemo } from 'react';\nimport toast from 'react-hot-toast';\nimport Modal from 'components/Modal';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { IconAlertCircle } from '@tabler/icons';\nimport { removeCollection } from 'providers/ReduxStore/slices/collections/actions';\nimport { findCollectionByUid, flattenItems, isItemARequest, hasRequestChanges } from 'utils/collections/index';\nimport filter from 'lodash/filter';\nimport ConfirmCollectionCloseDrafts from './ConfirmCollectionCloseDrafts';\nimport StyledWrapper from './StyledWrapper';\n\nconst RemoveCollection = ({ onClose, collectionUid }) => {\n const dispatch = useDispatch();\n const collection = useSelector((state) => findCollectionByUid(state.collections.collections, collectionUid));\n\n // Detect drafts in the collection\n const drafts = useMemo(() => {\n if (!collection) return [];\n const items = flattenItems(collection.items);\n return filter(items, (item) => isItemARequest(item) && hasRequestChanges(item));\n }, [collection]);\n\n const onConfirm = () => {\n if (!collection) {\n toast.error('Collection not found');\n onClose();\n return;\n }\n dispatch(removeCollection(collection.uid))\n .then(() => {\n toast.success('Collection removed from workspace');\n onClose();\n })\n .catch(() => toast.error('An error occurred while removing the collection'));\n };\n\n if (!collection) {\n return \n \n
\n \n \n 0}\n title={currentTransientDrafts.length > 0 ? 'Please save or discard transient requests first' : ''}\n >\n {currentDrafts.length > 1 ? 'Save All and Remove' : 'Save and Remove'}\n \n
\n Collection not found
;\n }\n\n // If there are drafts, show the draft confirmation modal\n if (drafts.length > 0) {\n return \n
\n );\n\n // Otherwise, show the standard remove confirmation modal\n return (\n Are you sure you want to close following collection in Bruno?
\n\n
\n {collection.name}
\n {collection.pathname}
\n \n It will still be available in the filesystem at the above location and can be re-opened later.\n
\n \n\n
\n \n \n \n \n \n \n
\n \n {!collectionIsCollapsed ? (\n
\n \n {folderItems?.map?.((i) => {\n return
\n ) : null}\n \n
\n ) : null}\n \n \n
\n \n \n \n \n
\n setSearchText('')}>\n
\n )}\n \n
\n No collections found.
\n \n
\n \n
\n \n e.preventDefault()}\n onClick={() => {\n openingAdvancedRef.current = true;\n onOpenAdvanced(inputRef.current?.value?.trim());\n }}\n title=\"Advanced options\"\n disabled={isCreating}\n >\n
\n \n e.preventDefault()}\n title=\"Create\"\n disabled={isCreating}\n >\n e.preventDefault()}\n title=\"Cancel\"\n disabled={isCreating}\n >\n
\n \n
\n Hold on..
\n\n Do you want to save changes you made to the following{' '}\n {collectionsWithUnsavedChanges.length === 1 ? 'collection' : 'collections'}?\n
\n \n Collections will be removed from the current workspace but will still be available in the file system and can be re-opened later.\n
\n\n \n
\n\n \n
\n \n {displayedCollections.map(({ uid, name }) => (\n \n {name}\n \n ))}\n {toggleButton}\n
\n \n
\n \n ) : (\n <>\n \n \n
\n \n \n \n
\n \n {hasMultipleCollections ? (\n `Are you sure you want to close all ${collectionUids.length} collections in this workspace?`\n ) : (\n <>\n Are you sure you want to close the collection {singleCollectionName} from this workspace?\n \n )}\n
\n \n Collections will be removed from the current workspace but will still be available in the file system and can be re-opened later.\n
\n \n \n \n
\n \n )}\n - \n {collections && collections.length ? (\n collections.map((c) => (\n
onSelect(c.uid)}>\n
\n ))\n ) : (\n No collections found
\n )}\n \n {isCreatingCollection && (\n
\n \n \n Options\n \n
\n );\n });\n\n return (\n \n \n handlePricingOptionChange('individuals')}\n >\n
\n \n {\n goldenEditionBuyClick();\n window.open('https://www.usebruno.com/pricing', '_blank');\n }}\n target=\"_blank\"\n className=\"flex text-white bg-yellow-600 hover:bg-yellow-700 font-medium rounded-lg px-4 py-2 text-center cursor-pointer\"\n >\n
\n {pricingOption === 'individuals' ? (\n Golden Edition
\n\n
\n ) : (\n \n $19\n
\n One Time Payment
\nperpetual license for 2 devices, with 2 years of updates
\n\n
\n )}\n \n $49\n / user\n
\n One Time Payment
\nperpetual license with 2 years of updates
\n- \n
- \n
\n Support Bruno's Development\n \n {pricingOption === 'individuals' ? (\n <>\n {goldenEditionIndividuals.map((item, index) => (\n - \n
\n {item}\n \n ))}\n \n ) : (\n <>\n - \n
\n Everything in the Individual Plan\n \n {goldenEditionOrganizations.map((item, index) => (\n - \n
\n {item}\n \n ))}\n \n )}\n
\n \n
\n \n );\n};\n\nexport default FileTab;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/ImportCollection/FullscreenLoader/index.js",
"content": "import { useState, useEffect } from 'react';\nimport { IconLoader2 } from '@tabler/icons';\n\n// Messages to cycle through while loading\nconst loadingMessages = [\n 'Processing collection...',\n 'Analyzing requests...',\n 'Translating scripts...',\n 'Preparing collection...',\n 'Almost done...'\n];\n\nconst FullscreenLoader = ({ isLoading }) => {\n const [loadingMessage, setLoadingMessage] = useState('');\n\n useEffect(() => {\n if (!isLoading) return;\n\n let messageIndex = 0;\n const interval = setInterval(() => {\n messageIndex = (messageIndex + 1) % loadingMessages.length;\n setLoadingMessage(loadingMessages[messageIndex]);\n }, 2000);\n\n setLoadingMessage(loadingMessages[0]);\n\n return () => clearInterval(interval);\n }, [isLoading]);\n\n return (\n \n
\n \n Drop file(s) to import or{' '}\n
\n Supports Bruno, OpenCollection, Postman, Insomnia, OpenAPI v3, WSDL, and ZIP formats\n
\n\n
\n );\n};\n\nexport default FullscreenLoader;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/ImportCollection/GitHubTab.js",
"content": "import React, { useState } from 'react';\nimport { isGitRepositoryUrl } from 'utils/git';\nimport toast from 'react-hot-toast';\nimport Button from 'ui/Button';\nconst GitHubTab = ({\n handleSubmit,\n setErrorMessage\n}) => {\n const [urlInput, setUrlInput] = useState('');\n\n const handleGitRepositoryImport = (url) => {\n if (!isGitRepositoryUrl(url)) {\n setErrorMessage('Please enter a valid git repository URL');\n return;\n }\n handleSubmit({ repositoryUrl: url, type: 'git-repository' });\n };\n\n const handleFormSubmit = (e) => {\n e.preventDefault();\n if (urlInput.trim()) {\n handleGitRepositoryImport(urlInput.trim());\n }\n };\n\n return (\n \n );\n};\n\nexport default GitHubTab;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/ImportCollection/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n .tabs {\n .tab {\n padding: 6px 0px;\n border: none;\n border-bottom: solid 2px transparent;\n margin-right: 1.25rem;\n color: var(--color-tab-inactive);\n cursor: pointer;\n\n &:focus,\n &:active,\n &:focus-within,\n &:focus-visible,\n &:target {\n outline: none !important;\n box-shadow: none !important;\n }\n\n &.active {\n color: ${(props) => props.theme.tabs.active.color} !important;\n border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;\n }\n }\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/ImportCollection/UrlTab.js",
"content": "import React, { useState } from 'react';\nimport { fetchAndValidateApiSpecFromUrl } from 'utils/importers/common';\nimport { isValidUrl } from 'utils/url/index';\nimport Button from 'ui/Button';\nconst UrlTab = ({\n setIsLoading,\n handleSubmit,\n setErrorMessage\n}) => {\n const [urlInput, setUrlInput] = useState('');\n\n const handleUrlImport = async (event) => {\n event.preventDefault();\n if (!urlInput.trim() || !isValidUrl(urlInput.trim())) {\n setErrorMessage('Please enter a valid URL');\n return;\n }\n setIsLoading(true);\n try {\n const { data, specType, rawContent } = await fetchAndValidateApiSpecFromUrl({ url: urlInput.trim() });\n // Pass raw data for all types, include sourceUrl and rawContent for OpenAPI sync\n handleSubmit({ rawData: data, type: specType, sourceUrl: urlInput.trim(), rawContent });\n } catch (err) {\n console.error(err);\n setErrorMessage('URL import failed. Please check the URL and try again.');\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n \n );\n};\n\nexport default UrlTab;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/ImportCollection/index.js",
"content": "import React, { useState } from 'react';\nimport { IconFileImport, IconBrandGit, IconUnlink, IconX } from '@tabler/icons';\nimport Modal from 'components/Modal';\nimport classnames from 'classnames';\nimport StyledWrapper from './StyledWrapper';\nimport FileTab from './FileTab';\nimport GitHubTab from './GitHubTab';\nimport UrlTab from './UrlTab';\nimport FullscreenLoader from './FullscreenLoader/index';\nimport { useTheme } from 'providers/Theme';\n\nconst IMPORT_TABS = {\n FILE: 'file',\n GITHUB: 'github',\n URL: 'url'\n};\n\nconst ImportCollection = ({ onClose, handleSubmit }) => {\n const { theme } = useTheme();\n const [isLoading, setIsLoading] = useState(false);\n const [errorMessage, setErrorMessage] = useState('');\n const [tab, setTab] = useState(IMPORT_TABS.FILE);\n\n const handleTabSelect = (value) => () => {\n setTab(value);\n setErrorMessage('');\n };\n\n const getTabClassname = (tabName) => {\n return classnames(`flex tab items-center py-2 px-4 ${tabName}`, {\n active: tabName === tab\n });\n };\n\n if (isLoading) {\n return \n
\n {loadingMessage}
\n\n This may take a moment depending on the collection size\n
\n\n \n
\n \n \n
\n \n \n {errorMessage}\n
\n \n
\n );\n });\n const browse = () => {\n dispatch(browseDirectory())\n .then((dirPath) => {\n if (typeof dirPath === 'string' && dirPath.length > 0) {\n formik.setFieldValue('collectionLocation', dirPath);\n }\n })\n .catch((error) => {\n formik.setFieldValue('collectionLocation', '');\n console.error(error);\n });\n };\n\n useEffect(() => {\n if (inputRef && inputRef.current) {\n inputRef.current.focus();\n }\n }, [inputRef]);\n\n const onSubmit = async () => {\n if (isZipImport) {\n const errors = await formik.validateForm();\n if (Object.keys(errors).length > 0) {\n formik.setTouched({ collectionLocation: true });\n return;\n }\n const collectionLocation = formik.values.collectionLocation;\n handleSubmit(rawData, collectionLocation, { format: collectionFormat, isZipImport: true });\n } else {\n formik.handleSubmit();\n }\n };\n\n return (\n \n
\n {selectedOption.label}
\n \n \n Options\n \n
\n );\n });\n\n return (\n \n {curlRequestTypeDetected === 'http-request' ? 'HTTP' : 'GraphQL'}\n
\n );\n });\n\n // This function analyzes a given cURL command string and determines whether the request is a GraphQL or HTTP request.\n const identifyCurlRequestType = (url, headers, body) => {\n if (url.endsWith('/graphql')) {\n setCurlRequestTypeDetected('graphql-request');\n return;\n }\n\n const contentType = headers?.find((h) => h.name.toLowerCase() === 'content-type')?.value;\n if (contentType && contentType.includes('application/graphql')) {\n setCurlRequestTypeDetected('graphql-request');\n return;\n }\n\n setCurlRequestTypeDetected('http-request');\n };\n\n const curlRequestTypeChange = (type) => {\n setCurlRequestTypeDetected(type);\n };\n\n const [isEditing, toggleEditing] = useState(false);\n\n const getRequestType = (collectionPresets) => {\n if (!collectionPresets || !collectionPresets.requestType) {\n return 'http-request';\n }\n\n // Note: Why different labels for the same thing?\n // http-request and graphql-request are used inside the app's json representation of a request\n // http and graphql are used in Bru DSL as well as collection exports\n // We need to eventually standardize the app's DSL to use the same labels as bru DSL\n if (collectionPresets.requestType === 'http') {\n return 'http-request';\n }\n\n if (collectionPresets.requestType === 'graphql') {\n return 'graphql-request';\n }\n\n if (collectionPresets.requestType === 'grpc') {\n return 'grpc-request';\n }\n\n if (collectionPresets.requestType === 'ws') {\n return 'ws-request';\n }\n\n return 'http-request';\n };\n\n const formik = useFormik({\n enableReinitialize: true,\n initialValues: {\n requestName: '',\n filename: '',\n requestType: getRequestType(collectionPresets),\n requestUrl: collectionPresets.requestUrl || '',\n requestMethod: 'GET',\n curlCommand: ''\n },\n validationSchema: Yup.object({\n requestName: Yup.string()\n .trim()\n .min(1, 'must be at least 1 character')\n .max(255, 'must be 255 characters or less')\n .required('name is required'),\n filename: Yup.string()\n .trim()\n .min(1, 'must be at least 1 character')\n .max(255, 'must be 255 characters or less')\n .required('filename is required')\n .test('is-valid-filename', function (value) {\n const isValid = validateName(value);\n return isValid ? true : this.createError({ message: validateNameError(value) });\n })\n .test(\n 'not-reserved',\n `The file names \"collection\" and \"folder\" are reserved in bruno`,\n (value) => !['collection', 'folder'].includes(value)\n ),\n curlCommand: Yup.string().when('requestType', {\n is: (requestType) => requestType === 'from-curl',\n then: Yup.string()\n .min(1, 'must be at least 1 character')\n .required('curlCommand is required')\n .test({\n name: 'curlCommand',\n message: `Invalid cURL Command`,\n test: (value) => getRequestFromCurlCommand(value) !== null\n })\n })\n }),\n onSubmit: (values) => {\n const isGrpcRequest = values.requestType === 'grpc-request';\n const isWsRequest = values.requestType === 'ws-request';\n const filename = values.filename;\n\n if (isGrpcRequest) {\n dispatch(\n newGrpcRequest({\n requestName: values.requestName,\n filename: filename,\n requestType: values.requestType,\n requestUrl: values.requestUrl,\n collectionUid: collection.uid,\n itemUid: item ? item.uid : null\n })\n )\n .then(() => {\n toast.success('New request created!');\n onClose();\n })\n .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));\n\n // will need to handle import from grpcurl command when we support it, now it is just for creating new requests\n } else if (isWsRequest) {\n dispatch(newWsRequest({\n requestName: values.requestName,\n requestMethod: values.requestMethod,\n filename: filename,\n requestType: values.requestType,\n requestUrl: values.requestUrl,\n collectionUid: collection.uid,\n itemUid: item ? item.uid : null\n }))\n .then(() => {\n toast.success('New request created!');\n onClose();\n })\n .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));\n } else if (isEphemeral) {\n const uid = uuid();\n dispatch(\n newEphemeralHttpRequest({\n uid: uid,\n requestName: values.requestName,\n filename: filename,\n requestType: values.requestType,\n requestUrl: values.requestUrl,\n requestMethod: values.requestMethod,\n collectionUid: collectionUid\n })\n )\n .then(() => {\n dispatch(\n addTab({\n uid: uid,\n collectionUid: collectionUid,\n requestPaneTab: getDefaultRequestPaneTab({ type: values.requestType })\n })\n );\n onClose();\n })\n .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));\n } else if (values.requestType === 'from-curl') {\n const request = getRequestFromCurlCommand(values.curlCommand, curlRequestTypeDetected);\n const settings = { encodeUrl: false };\n\n dispatch(\n newHttpRequest({\n requestName: values.requestName,\n filename: filename,\n requestType: curlRequestTypeDetected,\n requestUrl: request.url,\n requestMethod: request.method,\n collectionUid: collectionUid,\n itemUid: item ? item.uid : null,\n headers: request.headers,\n body: request.body,\n auth: request.auth,\n settings: settings\n })\n )\n .then(() => {\n toast.success('New request created!');\n onClose();\n })\n .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));\n } else {\n dispatch(\n newHttpRequest({\n requestName: values.requestName,\n filename: filename,\n requestType: values.requestType,\n requestUrl: values.requestUrl,\n requestMethod: values.requestMethod,\n collectionUid: collectionUid,\n itemUid: item ? item.uid : null\n })\n )\n .then(() => {\n toast.success('New request created!');\n onClose();\n })\n .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));\n }\n }\n });\n\n useEffect(() => {\n if (inputRef && inputRef.current) {\n inputRef.current.focus();\n }\n }, [inputRef]);\n\n const onSubmit = () => formik.handleSubmit();\n\n const handlePaste = useCallback(\n (event) => {\n const clipboardData = event.clipboardData || window.clipboardData;\n const pastedData = clipboardData.getData('Text');\n\n // Check if pasted data looks like a cURL command\n const curlCommandRegex = /^\\s*curl\\s/i;\n if (curlCommandRegex.test(pastedData)) {\n // Switch to the 'from-curl' request type\n formik.setFieldValue('requestType', 'from-curl');\n formik.setFieldValue('curlCommand', pastedData);\n\n // Identify the request type\n const request = getRequestFromCurlCommand(pastedData);\n if (request) {\n identifyCurlRequestType(request.url, request.headers, request.body);\n }\n\n // Prevent the default paste behavior to avoid pasting into the textarea\n event.preventDefault();\n }\n },\n [formik]\n );\n\n const handleCurlCommandChange = (event) => {\n formik.handleChange(event);\n\n if (event.target.name === 'curlCommand') {\n const curlCommand = event.target.value;\n const request = getRequestFromCurlCommand(curlCommand);\n if (request) {\n identifyCurlRequestType(request.url, request.headers, request.body);\n }\n }\n };\n\n const AdvancedOptions = forwardRef((props, ref) => {\n return (\n \n \n
\n );\n });\n\n return (\n \n \n\n
\n \n
\n \n
\n\n \n
\n \n
\n \n
\n\n \n
\n\n \n
\n \n
\n \n
\n \n \n {\n formik.setFieldValue('requestName', e.target.value);\n !isEditing && formik.setFieldValue('filename', sanitizeName(e.target.value));\n }}\n value={formik.values.requestName || ''}\n data-testid=\"request-name\"\n />\n {formik.touched.requestName && formik.errors.requestName ? (\n
\n {showFilesystemName && (\n {formik.errors.requestName}
\n ) : null}\n \n
\n )}\n {formik.values.requestType !== 'from-curl' ? (\n <>\n \n \n {isEditing ? (\n toggleEditing(false)}\n />\n ) : (\n toggleEditing(true)}\n />\n )}\n
\n {isEditing ? (\n \n
\n ) : (\n \n
\n )}\n {formik.touched.filename && formik.errors.filename ? (\n {formik.errors.filename}
\n ) : null}\n \n \n
\n {formik.touched.requestUrl && formik.errors.requestUrl ? (\n \n {!['grpc-request', 'ws-request'].includes(formik.values.requestType) ? (\n \n {\n formik.handleChange({\n target: {\n name: 'requestUrl',\n value: value\n }\n });\n }}\n collection={collection}\n variablesAutocomplete={true}\n />\n
\n \n formik.setFieldValue('requestMethod', val)}\n showCaret\n />\n
\n ) : null}\n {formik.errors.requestUrl}
\n ) : null}\n \n \n ) : (\n \n {\n dropdownTippyRef.current.hide();\n curlRequestTypeChange('graphql-request');\n }}\n >\n GraphQL\n
\n \n \n \n \n {\n dropdownTippyRef.current.hide();\n curlRequestTypeChange('http-request');\n }}\n >\n HTTP\n
\n {formik.errors.curlCommand}
\n ) : null}\n \n )}\n \n
\n \n {\n advancedDropdownTippyRef.current.hide();\n toggleShowFilesystemName(!showFilesystemName);\n }}\n >\n {showFilesystemName ? 'Hide Filesystem Name' : 'Show Filesystem Name'}\n
\n \n \n \n \n
\n \n \n \n {children}\n
\n \n );\n};\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/SidebarContent.js",
"content": "import { useSidebarAccordion } from './SidebarAccordionContext';\n\n/**\n * Sections configuration\n *\n * All sections use the same generic accordion behavior with the class 'accordion-section-wrapper'.\n * Layout behavior is fully automatic based on section order and expansion state:\n * - Single expanded: When only one section is expanded, it fills available space\n * - Multi-expanded: When multiple sections are expanded, they split space equally\n * - Automatic pinning: Sections below an expanded section are automatically pinned to bottom\n *\n * To add a new section, simply add a new entry to this array:\n *\n * {\n * id: 'my-section', // Unique identifier\n * component: MySectionComponent, // React component to render\n * getProps: (context) => ({ ... }) // Function to get props for component\n * }\n */\n\nconst SidebarContent = ({ sections }) => {\n const { isExpanded, getExpandedCount } = useSidebarAccordion();\n\n const expandedCount = getExpandedCount();\n\n const getWrapperClassName = (section, sectionIndex) => {\n const sectionExpanded = isExpanded(section.id);\n // Use generic accordion-section-wrapper class for all sections\n const classes = ['accordion-section-wrapper'];\n\n // Multi-expanded: when multiple sections are expanded\n if (expandedCount > 1 && sectionExpanded) {\n classes.push('multi-expanded');\n }\n\n // Single expanded wrapper behavior: when only one section is expanded, it fills space\n if (sectionExpanded && expandedCount === 1) {\n classes.push('single-expanded-wrapper');\n }\n\n // Automatic pinning: if section is not expanded and any section above it (earlier in array) is expanded\n if (!sectionExpanded) {\n // Check if any section before this one (earlier in array) is expanded\n const hasExpandedAbove = sections.slice(0, sectionIndex).some((s) => isExpanded(s.id));\n if (hasExpandedAbove) {\n classes.push('pinned-to-bottom');\n }\n }\n\n return classes.join(' ');\n };\n\n return (\n <>\n {sections.map((section, index) => {\n const SectionComponent = section.component;\n const wrapperClassName = getWrapperClassName(section, index);\n\n return (\n \n
\n );\n })}\n \n );\n};\n\nexport default SidebarContent;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/SidebarSection/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n height: 100%;\n\n .sidebar-section {\n display: flex;\n flex-direction: column;\n min-height: 0;\n height: 100%;\n\n &.expanded {\n flex: 1 1 0%;\n min-height: 0;\n }\n\n &:not(.expanded) {\n flex: 0 0 auto;\n }\n\n &.multi-expanded {\n flex: 1 1 0%;\n margin-bottom: 0;\n }\n }\n\n .section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 6px 4px 6px 8px;\n min-height: 28px;\n height: 28px;\n user-select: none;\n transition: background-color 0.15s ease;\n flex-shrink: 0;\n border-bottom: 1px solid transparent;\n\n .section-header-left {\n display: flex;\n align-items: center;\n gap: 6px;\n flex: 1;\n min-width: 0;\n cursor: pointer;\n\n\n &:hover {\n .section-toggle {\n display: flex;\n }\n\n .section-toggle {\n background: ${(props) => props.theme.dropdown.hoverBg};\n color: ${(props) => props.theme.text} !important;\n }\n\n .section-icon {\n display: none;\n }\n }\n }\n }\n\n .section-icon-wrapper {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .section-toggle {\n display: none;\n }\n\n .section-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: ${(props) => props.theme.sidebar.muted};\n }\n\n .section-title {\n color: ${(props) => props.theme.sidebar.color};\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .section-actions {\n display: flex;\n align-items: center;\n gap: 1px;\n flex-shrink: 0;\n }\n }\n\n .section-content {\n display: flex;\n flex-direction: column;\n flex: 1 1 0%;\n min-height: 0;\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/Sidebar/SidebarSection/index.js",
"content": "import { useState, useEffect, useRef } from 'react';\nimport { IconChevronRight, IconChevronDown } from '@tabler/icons';\nimport StyledWrapper from './StyledWrapper';\nimport { useSidebarAccordion } from '../SidebarAccordionContext';\nimport ActionIcon from 'ui/ActionIcon/index';\n\nconst SidebarSection = ({\n id,\n title,\n icon: Icon,\n actions,\n children,\n className = ''\n}) => {\n const { isExpanded, setSectionExpanded, getExpandedCount } = useSidebarAccordion();\n const [localExpanded, setLocalExpanded] = useState(() => isExpanded(id));\n const sectionRef = useRef(null);\n\n // Sync with context\n useEffect(() => {\n const expanded = isExpanded(id);\n setLocalExpanded(expanded);\n }, [id, isExpanded]);\n\n const handleToggle = () => {\n const newExpanded = !localExpanded;\n setLocalExpanded(newExpanded);\n setSectionExpanded(id, newExpanded);\n };\n\n const expandedCount = getExpandedCount();\n // Check if this is the only expanded section\n const isOnlyExpanded = expandedCount === 1 && localExpanded;\n\n return (\n \n {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault(); handleToggle();\n }\n }}\n >\n \n {localExpanded ? (\n \n {Icon &&
\n {title}\n \n {actions && (\n \n {children}\n
\n )}\n \n \n \n
\n )}\n \n
\n );\n }\n}\nexport default SingleLineEditor;\n"
},
{
"path": "packages/bruno-app/src/components/Spinner/StyledWrapper.js",
"content": "import styled from 'styled-components';\n\nconst StyledWrapper = styled.div`\n .spinner {\n display: inline-block;\n width: 2rem;\n height: 2rem;\n vertical-align: text-bottom;\n border: 0.25em solid currentColor;\n border-right-color: transparent;\n border-radius: 50%;\n animation: spinner-border 0.75s linear infinite;\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/Spinner/index.js",
"content": "import React from 'react';\nimport StyledWrapper from './StyledWrapper';\n\n// Todo: Size, Color config support\nconst Spinner = ({ size, color, children }) => {\n return (\n \n {this.secretEye(this.props.isSecret)}\n
\n {children}
}\n \n (refs.current[index] = el)}\n className={`theme-item ${isActive ? 'active' : ''} ${getFocusedClass(section, index)}`}\n role=\"option\"\n aria-selected={isActive}\n tabIndex={-1}\n onClick={() => handleThemeSelect(theme.id, isLight)}\n onMouseEnter={() => handleMouseEnter(section, index)}\n >\n {theme.name}\n {isActive &&
\n );\n })}\n \n );\n };\n\n // Render mode buttons\n const renderModeButtons = () => (\n \n {label}\n {isActiveSystemTheme && Active}\n
\n {themes.map((theme, index) => {\n const isActive = currentVariant === theme.id;\n return (\n \n {MODE_BUTTONS.map((btn, index) => {\n const Icon = btn.icon;\n const isActive = storedTheme === btn.mode;\n return (\n (modeButtonRefs.current[index] = el)}\n className={`mode-button ${isActive ? 'active' : ''} ${getFocusedClass('mode', index)}`}\n role=\"radio\"\n aria-checked={isActive}\n tabIndex={-1}\n onClick={() => handleModeSelect(btn.mode)}\n onMouseEnter={() => handleMouseEnter('mode', index)}\n title={btn.title}\n >\n
\n );\n\n // Menu content\n const menuContent = (\n \n
\n\n Appearance
\n {renderModeButtons()}\n \n {(storedTheme === 'light' || isSystemMode)\n && renderThemeList(lightThemes, true, themeVariantLight, 'Light theme')}\n {(storedTheme === 'dark' || isSystemMode)\n && renderThemeList(darkThemes, false, themeVariantDark, 'Dark theme')}\n
\n \n (isOpen ? handleClose() : handleOpen())}>\n {children}\n
\n \n \n
\n \n
\n\n \n \n \n \n\n \n \n \n\n \n \n\n \n {\n window?.ipcRenderer?.openExternal('https://github.com/usebruno/bruno');\n }}\n tabIndex={0}\n aria-label=\"Open GitHub Repository\"\n >\n \n
\n \n
\n \n
\n \n \n setCookiesOpen(true)}\n tabIndex={0}\n aria-label=\"Open Cookies\"\n >\n 0 ? 'has-errors' : ''}`}\n data-trigger=\"dev-tools\"\n onClick={handleConsoleClick}\n tabIndex={0}\n aria-label={`Open Dev Tools${errorCount > 0 ? ` (${errorCount} errors)` : ''}`}\n >\n
\n \n
\n \n\n \n
\n \n\n \n
\n \n\n \n\n \n v{version}\n
\n \n \n \n
\n
\n | \n {name}\n | \n ))}\n
|---|
{children}
;\n};\n\nexport const TabsTrigger = ({ value: triggerValue, children, className = '' }) => {\n const { value, onValueChange } = useContext(TabsContext);\n const isActive = value === triggerValue;\n\n return (\n - \n {tags && tags.length\n ? tags.map((_tag) => (\n
- \n
\n \n {_tag}\n \n handleRemoveTag(_tag)}>\n \n \n \n \n ))\n : null}\n
\n \n {children || text}\n
\n\n {shouldTruncate && showButton && (\n \n setShowSecret(!showSecret)} />\n \n \n {data.toSorted((a, b) => a.name.localeCompare(b.name)).map((envVar) => (\n
\n
\n );\n};\n\nconst EnvVariables = ({ collection, theme }) => {\n const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);\n\n if (!environment) {\n return (\n <>\n | {envVar.name} | \n\n | \n
Environment Variables
\nNo environment selected
\n \n );\n }\n\n const envVars = get(environment, 'variables', []);\n const enabledEnvVars = filter(envVars, (variable) => variable.enabled);\n\n return (\n <>\n \n
\n {enabledEnvVars.length > 0 ? (\n Environment Variables
\n ({environment.name})\nNo environment variables found
\n )}\n \n );\n};\n\nconst RuntimeVariables = ({ collection, theme }) => {\n const runtimeVariablesFound = Object.keys(collection.runtimeVariables).length > 0;\n\n const runtimeVariableArray = Object.entries(collection.runtimeVariables).map(([name, value]) => ({\n name,\n value,\n secret: false\n }));\n\n return (\n <>\n Runtime Variables
\n {runtimeVariablesFound ? (\nNo runtime variables found
\n )}\n \n );\n};\n\nconst VariablesEditor = ({ collection }) => {\n const { displayedTheme, theme } = useTheme();\n\n const reactInspectorTheme\n = displayedTheme === 'light'\n ? { ...chromeLight, OBJECT_VALUE_STRING_COLOR: theme.text.base }\n : { ...chromeDark, OBJECT_VALUE_STRING_COLOR: theme.text.base };\n\n return (\n \n Note: As of today, runtime variables can only be set via the API - getVar(){' '}\n and setVar().
\n You can use the var variable with the\n {'{{var}}'} syntax.
\n
\n \n You can use the var variable with the\n {'{{var}}'} syntax.
\n
\n
\n);\n"
},
{
"path": "packages/bruno-app/src/components/WelcomeModal/GetStartedStep/StyledWrapper.js",
"content": "import styled from 'styled-components';\nimport { rgba } from 'polished';\n\nconst StyledWrapper = styled.div`\n .primary-actions {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.75rem;\n margin-bottom: 0.75rem;\n }\n\n .primary-action-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n padding: 1.25rem 1rem;\n border-radius: ${(props) => props.theme.border.radius.md};\n border: 1px solid ${(props) => props.theme.border.border1};\n background: transparent;\n cursor: pointer;\n text-align: center;\n color: ${(props) => props.theme.text};\n transition: all 0.15s ease;\n\n &:hover {\n border-color: ${(props) => props.theme.primary.subtle};\n background: ${(props) => rgba(props.theme.primary.solid, 0.06)};\n }\n\n &:active {\n transform: scale(0.98);\n }\n\n .card-icon {\n width: 40px;\n height: 40px;\n border-radius: ${(props) => props.theme.border.radius.md};\n display: flex;\n align-items: center;\n justify-content: center;\n background: ${(props) => rgba(props.theme.primary.solid, 0.1)};\n color: ${(props) => props.theme.primary.solid};\n }\n\n .card-title {\n font-weight: 600;\n font-size: 0.875rem;\n }\n\n .card-desc {\n font-size: 0.75rem;\n color: ${(props) => props.theme.colors.text.subtext0};\n line-height: 1.4;\n }\n }\n\n .secondary-actions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .secondary-action {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.625rem 0.75rem;\n border-radius: ${(props) => props.theme.border.radius.base};\n border: 1px solid ${(props) => props.theme.border.border0};\n background: transparent;\n cursor: pointer;\n text-align: left;\n width: 100%;\n color: ${(props) => props.theme.text};\n transition: all 0.15s ease;\n\n &:hover {\n border-color: ${(props) => props.theme.primary.subtle};\n background: ${(props) => rgba(props.theme.primary.solid, 0.06)};\n }\n\n &:active {\n transform: scale(0.98);\n }\n\n .secondary-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: ${(props) => props.theme.colors.text.subtext0};\n }\n\n .secondary-label {\n font-size: 0.8125rem;\n font-weight: 500;\n }\n\n .secondary-desc {\n font-size: 0.6875rem;\n color: ${(props) => props.theme.colors.text.subtext0};\n }\n }\n`;\n\nexport default StyledWrapper;\n"
},
{
"path": "packages/bruno-app/src/components/WelcomeModal/GetStartedStep/index.js",
"content": "import React from 'react';\nimport { IconPlus, IconDownload, IconFileImport, IconSend } from '@tabler/icons';\nimport StyledWrapper from './StyledWrapper';\n\nconst GetStartedStep = ({ onCreateCollection, onImportCollection, onOpenCollection, onStartRequest }) => (\n \n {showSecret ?
\n Your first collection
\n You're all set! What's next?
\n \n Create a new collection to start building requests, or import one you already have.\n
\n\n \n \n\n \n
\n\n \n \n \n
\n Storage
\n Where should we store your collections?
\n \n Bruno saves collections as plain files on your filesystem, perfect for version control with Git.\n
\n\n \n {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onBrowse();\n }\n }}\n role=\"button\"\n tabIndex={0}\n >\n {collectionLocation ? (\n {collectionLocation}\n ) : (\n Click to choose a folder...\n )}\n Browse\n
\n \n \n Each collection and workspace gets its own folder inside this directory. You can change this later.\n
\n \n \n
\n );\n};\n\nconst ThemeStep = ({ storedTheme, setStoredTheme, themeVariantLight, setThemeVariantLight, themeVariantDark, setThemeVariantDark }) => {\n const lightThemeList = getLightThemes();\n const darkThemeList = getDarkThemes();\n\n const showLight = storedTheme === 'light' || storedTheme === 'system';\n const showDark = storedTheme === 'dark' || storedTheme === 'system';\n\n return (\n \n \n \n \n
\n Appearance
\n Choose your theme
\n \n Pick a look that feels right. You can always change this later in Preferences.\n
\n\n \n {themeModes.map((mode) => {\n const Icon = mode.icon;\n return (\n setStoredTheme(mode.key)}\n >\n
\n\n {showLight && (\n \n {lightThemeList.map((t) => (\n setThemeVariantLight(t.id)}\n aria-pressed={themeVariantLight === t.id}\n >\n
\n )}\n\n {showDark && (\n \n {darkThemeList.map((t) => (\n setThemeVariantDark(t.id)}\n aria-pressed={themeVariantDark === t.id}\n >\n
\n )}\n \n {highlights.map((item) => {\n const Icon = item.icon;\n return (\n
\n \n
\n );\n })}\n \n
\n \n
\n {item.title}
\n {item.desc}
\n \n
\n \n
\n\n {steps[step - 1]}\n\n \n
\n \n {step === 1 ? 'Welcome to Bruno' : step === 4 ? 'Ready to go!' : 'Set up Bruno'}\n
\n {step === 1 && (\n\n A fast, Git-friendly, and open-source API client.\n
\n )}\n\n
\n \n {Array.from({ length: TOTAL_STEPS }, (_, i) => (\n goTo(i + 1)}\n aria-label={`Go to step ${i + 1}`}\n aria-current={i + 1 === step ? 'step' : undefined}\n />\n ))}\n
\n\n \n \n {step > 1 && (\n \n )}\n {!isLastStep && (\n \n )}\n {isLastStep && (\n \n )}\n
\n \n \n \n )}\n {isEditing && (\n \n \n )}\n
\n\n \n
\n {hasDocs && !isEditing && (\n \n {isEditing ? (\n
\n \n
\n ) : hasDocs ? (\n \n \n
\n \n
\n ) : (\n \n
\n )}\n \n
\n \n Add documentation to help your team work smoothly.\n
\nYou can include:
\n- \n
- Project overview \n
- Setup instructions \n
- Key workflows \n
- Resources & FAQs \n
\n
\n Hold on..
\nYou have unsaved changes in this environment.
\n\n \n
\n \n );\n\n return createPortal(modalContent, document.body);\n};\n\nexport default ConfirmSwitchEnv;\n"
},
{
"path": "packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js",
"content": "import React, { useCallback, useRef, useMemo } from 'react';\nimport { TableVirtuoso } from 'react-virtuoso';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n saveGlobalEnvironment,\n setGlobalEnvironmentDraft,\n clearGlobalEnvironmentDraft\n} from 'providers/ReduxStore/slices/global-environments';\nimport EnvironmentVariablesTable from 'components/EnvironmentVariablesTable';\n\nconst EnvironmentVariables = ({ environment, setIsModified, collection, searchQuery = '' }) => {\n const dispatch = useDispatch();\n const { globalEnvironmentDraft } = useSelector((state) => state.globalEnvironments);\n\n const hasDraftForThisEnv = globalEnvironmentDraft?.environmentUid === environment.uid;\n\n const handleSave = useCallback(\n (variables) => {\n return dispatch(saveGlobalEnvironment({ environmentUid: environment.uid, variables: cloneDeep(variables) }));\n },\n [dispatch, environment.uid]\n );\n\n const handleDraftChange = useCallback(\n (variables) => {\n dispatch(\n setGlobalEnvironmentDraft({\n environmentUid: environment.uid,\n variables\n })\n );\n },\n [dispatch, environment.uid]\n );\n\n const handleDraftClear = useCallback(() => {\n dispatch(clearGlobalEnvironmentDraft());\n }, [dispatch]);\n\n return (\n \n \n
\n \n
\n\n \n {isRenaming ? (\n <>\n
\n {nameError && isRenaming && \n e.preventDefault()}\n title=\"Save\"\n >\n e.preventDefault()}\n title=\"Cancel\"\n >\n
\n \n ) : (\n \n
\n )}\n {environment.name}
\n{nameError}
}\n \n {isSearchExpanded ? (\n
\n \n setSearchQuery(e.target.value)}\n onBlur={handleSearchBlur}\n className=\"search-input\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n autoCapitalize=\"off\"\n spellCheck=\"false\"\n />\n {searchQuery && (\n e.preventDefault()}\n title=\"Clear search\"\n >\n
\n ) : (\n \n )}\n \n \n \n \n
\n \n
\n );\n };\n\n return (\n No Environments
\n \n \n \n
\n \n {switchEnvConfirmClose && (\n
\n \n\n {renderContent()}\n \n \n handleConfirmSwitch(false)} />\n
\n )}\n\n \n\n setDotEnvExpanded(!dotEnvExpanded)}\n badge={dotEnvFiles.length}\n actions={(\n \n
\n \n \n setEnvironmentsExpanded(!environmentsExpanded)}\n actions={(\n <>\n {\n if (!environmentsExpanded) {\n setEnvironmentsExpanded(true);\n }\n handleCreateEnvClick();\n }}\n title=\"Create environment\"\n >\n {\n if (!environmentsExpanded) {\n setEnvironmentsExpanded(true);\n }\n handleImportClick();\n }}\n title=\"Import environment\"\n >\n {\n if (!environmentsExpanded) {\n setEnvironmentsExpanded(true);\n }\n handleExportClick();\n }}\n title=\"Export environment\"\n >\n
\n \n\n \n setSearchText(e.target.value)}\n className=\"env-list-search-input\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n autoCapitalize=\"off\"\n spellCheck=\"false\"\n />\n {searchText && (\n \n )}\n
\n \n {filteredEnvironments.map((env) => (\n renamingEnvUid !== env.uid && handleEnvironmentClick(env)}\n onDoubleClick={() => handleEnvironmentDoubleClick(env)}\n >\n {renamingEnvUid === env.uid ? (\n
\n ))}\n\n {isCreatingInline && (\n \n
\n ) : (\n <>\n \n e.preventDefault()}\n title=\"Save\"\n >\n e.preventDefault()}\n title=\"Cancel\"\n >\n
\n \n {activeEnvironmentUid === env.uid ? (\n handleActivateEnvironment(e, env)}\n title=\"Activate environment\"\n >\n
\n \n )}\n \n
\n ) : (\n \n
\n )}\n\n {envNameError && (isCreatingInline || renamingEnvUid) && \n e.preventDefault()}\n title=\"Save\"\n >\n e.preventDefault()}\n title=\"Cancel\"\n >\n
\n {envNameError}
}\n\n {filteredEnvironments.length === 0 && !isCreatingInline && (\n \n No environments\n
\n )}\n \n {dotEnvFiles.map((file) => (\n handleDotEnvClick(file.filename)}\n >\n {file.filename}\n
\n ))}\n\n {isCreatingDotEnvInline && (\n \n
\n )}\n\n {dotEnvNameError && isCreatingDotEnvInline && \n e.preventDefault()}\n title=\"Create\"\n >\n e.preventDefault()}\n title=\"Cancel\"\n >\n
\n {dotEnvNameError}
}\n\n {dotEnvFiles.length === 0 && !isCreatingDotEnvInline && (\n \n No .env files\n
\n )}\n \n {workspaceCollections.length === 0 ? (\n handleOpenCollectionClick(collection, e)}\n >\n {\n e.stopPropagation();\n handleShowInFolder(collection);\n }}\n >\n
\n \n
\n ) : (\n workspaceCollections.map((collection, index) => (\n No collections yet
\nCreate your first collection or open an existing one to get started.
\n\n
\n \n
\n \n
\n {collection.name}
\n {collection.pathname}
\n \n (dropdownRefs.current[collection.uid] = ref)}\n icon={ {\n e.stopPropagation();\n handleShareCollection(collection);\n }}\n >\n
\n \n {\n e.stopPropagation();\n handleRenameCollection(collection);\n }}\n >\n
\n \n
\n \n
\n\n \n
\n\n \n {workspaceCollectionsCount}\n Collections\n
\n \n {workspaceEnvironmentsCount}\n Environments\n
\n \n
\n\n Quick Actions
\n \n
\n \n
\n Collections
\n \n
\n \n \n
\n \n );\n};\n\nexport default CreateWorkspace;\n"
},
{
"path": "packages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.js",
"content": "import React, { useState, useRef, useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useFormik } from 'formik';\nimport * as Yup from 'yup';\nimport toast from 'react-hot-toast';\nimport get from 'lodash/get';\nimport { IconFileZip } from '@tabler/icons';\nimport Modal from 'components/Modal';\nimport { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';\nimport { importWorkspaceAction } from 'providers/ReduxStore/slices/workspaces/actions';\nimport { formatIpcError } from 'utils/common/error';\nimport { multiLineMsg } from 'utils/common/index';\nimport Help from 'components/Help';\n\nconst ImportWorkspace = ({ onClose }) => {\n const dispatch = useDispatch();\n const preferences = useSelector((state) => state.app.preferences);\n const [dragActive, setDragActive] = useState(false);\n const [selectedFile, setSelectedFile] = useState(null);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const fileInputRef = useRef(null);\n const locationInputRef = useRef(null);\n\n const defaultLocation = get(preferences, 'general.defaultLocation', '');\n\n const formik = useFormik({\n enableReinitialize: true,\n initialValues: {\n workspaceLocation: defaultLocation\n },\n validationSchema: Yup.object({\n workspaceLocation: Yup.string().min(1, 'location is required').required('location is required')\n }),\n onSubmit: async (values) => {\n if (isSubmitting || !selectedFile) return;\n\n try {\n setIsSubmitting(true);\n await dispatch(importWorkspaceAction(selectedFile.path, values.workspaceLocation));\n toast.success('Workspace imported successfully!');\n onClose();\n } catch (error) {\n toast.error(multiLineMsg('Failed to import workspace', formatIpcError(error)));\n } finally {\n setIsSubmitting(false);\n }\n }\n });\n\n const handleDrag = (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.dataTransfer) {\n e.dataTransfer.dropEffect = 'copy';\n }\n\n if (e.type === 'dragenter' || e.type === 'dragover') {\n setDragActive(true);\n } else if (e.type === 'dragleave') {\n setDragActive(false);\n }\n };\n\n const validateAndGetFilePath = (file) => {\n if (!file) return null;\n\n const isZip = file.name.endsWith('.zip') || file.type === 'application/zip' || file.type === 'application/x-zip-compressed';\n if (!isZip) {\n toast.error('Please select a valid zip file');\n return null;\n }\n\n const filePath = window?.ipcRenderer?.getFilePath(file);\n if (!filePath) {\n toast.error('Could not get file path');\n return null;\n }\n\n return { name: file.name, path: filePath };\n };\n\n const handleDrop = (e) => {\n e.preventDefault();\n e.stopPropagation();\n setDragActive(false);\n\n if (e.dataTransfer.files && e.dataTransfer.files[0]) {\n const fileInfo = validateAndGetFilePath(e.dataTransfer.files[0]);\n if (fileInfo) {\n setSelectedFile(fileInfo);\n }\n }\n };\n\n const handleBrowseFiles = () => {\n fileInputRef.current.click();\n };\n\n const handleFileInputChange = (e) => {\n if (e.target.files && e.target.files[0]) {\n const fileInfo = validateAndGetFilePath(e.target.files[0]);\n if (fileInfo) {\n setSelectedFile(fileInfo);\n }\n }\n };\n\n const browse = () => {\n dispatch(browseDirectory())\n .then((dirPath) => {\n if (typeof dirPath === 'string' && dirPath.length > 0) {\n formik.setFieldValue('workspaceLocation', dirPath);\n }\n })\n .catch((error) => {\n formik.setFieldValue('workspaceLocation', '');\n console.error(error);\n });\n };\n\n const handleClearFile = () => {\n setSelectedFile(null);\n if (fileInputRef.current) {\n fileInputRef.current.value = '';\n }\n };\n\n useEffect(() => {\n if (locationInputRef && locationInputRef.current) {\n locationInputRef.current.focus();\n }\n }, [locationInputRef]);\n\n const canSubmit = selectedFile && formik.values.workspaceLocation && !isSubmitting;\n\n return (\n \n
\n\n \n \n
\n )}\n Workspace File
\n {selectedFile ? (\n\n \n Remove\n \n
\n ) : (\n \n
\n \n
\n \n Drop workspace zip file here or{' '}\n
\n Supports exported Bruno workspace zip files\n
\n\n \n
\n \n \n );\n};\n\nexport default ImportWorkspace;\n"
},
{
"path": "packages/bruno-app/src/globalStyles.js",
"content": "import { createGlobalStyle } from 'styled-components';\nimport { rgba } from 'polished';\n\nconst GlobalStyle = createGlobalStyle`\n\n body {\n font-size: ${(props) => props.theme.font.size.base};\n }\n\n .CodeMirror-gutters {\n background-color: ${(props) => props.theme.codemirror.gutter.bg} !important;\n border-right: solid 1px ${(props) => props.theme.codemirror.border};\n }\n\n .text-link {\n color: ${(props) => props.theme.textLink};\n }\n .text-muted {\n color: ${(props) => props.theme.colors.text.muted};\n }\n\n .tooltip-mod {\n background-color: ${(props) => props.theme.infoTip.bg} !important;\n color: ${(props) => props.theme.text} !important;\n border: 1px solid ${(props) => props.theme.infoTip.border} !important;\n box-shadow: ${(props) => props.theme.infoTip.boxShadow} !important;\n font-size: ${(props) => props.theme.font.size.xs} !important;\n padding: 4px 8px !important;\n border-radius: 4px !important;\n opacity: 1 !important;\n z-index: 9999 !important;\n }\n\n .btn {\n text-align: center;\n white-space: nowrap;\n outline: none;\n box-shadow: none;\n border-radius: 3px;\n }\n\n .btn-sm {\n padding: .215rem .6rem .215rem .6rem;\n }\n\n .btn-xs {\n padding: .2rem .4rem .2rem .4rem;\n }\n\n .btn-md {\n padding: .4rem 1.1rem;\n line-height: 1.47;\n }\n\n .btn-default {\n &:active,\n &:hover,\n &:focus {\n outline: none;\n box-shadow: none;\n }\n }\n\n .btn-close {\n color: ${(props) => props.theme.button.close.color};\n background: ${(props) => props.theme.button.close.bg};\n border: solid 1px ${(props) => props.theme.button.close.border};\n\n &.btn-border {\n border: solid 1px #696969;\n }\n\n &:hover,\n &:focus {\n outline: none;\n box-shadow: none;\n border: solid 1px #696969;\n }\n }\n\n .btn-danger {\n color: ${(props) => props.theme.button.danger.color};\n background: ${(props) => props.theme.button.danger.bg};\n border: solid 1px ${(props) => props.theme.button.danger.border};\n\n &:hover,\n &:focus {\n outline: none;\n box-shadow: none;\n }\n }\n\n .btn-secondary {\n color: ${(props) => props.theme.button.secondary.color};\n background: ${(props) => props.theme.button.secondary.bg};\n border: solid 1px ${(props) => props.theme.button.secondary.border};\n\n .btn-icon {\n color: #3f3f3f;\n }\n\n &:hover,\n &:focus {\n border-color: ${(props) => props.theme.button.secondary.hoverBorder};\n outline: none;\n box-shadow: none;\n }\n\n &:disabled {\n color: ${(props) => props.theme.button.disabled.color};\n background: ${(props) => props.theme.button.disabled.bg};\n border: solid 1px ${(props) => props.theme.button.disabled.border};\n cursor: not-allowed;\n }\n\n &:disabled.btn-icon {\n color: #545454;\n }\n }\n\n input::placeholder {\n color: ${(props) => props.theme.input.placeholder.color};\n opacity: ${(props) => props.theme.input.placeholder.opacity};\n }\n\n @keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @keyframes fade-and-slide-in-from-top {\n from {\n opacity: 0;\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px);\n }\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n }\n\n @keyframes fade-and-slide-out-from-top {\n from {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n to {\n opacity: 2;\n -webkit-transform: translateY(-30px);\n transform: translateY(-30px);\n }\n }\n\n @keyframes rotateClockwise {\n 0% {\n transform: scaleY(-1) rotate(0deg);\n }\n 100% {\n transform: scaleY(-1) rotate(360deg);\n }\n }\n\n @keyframes rotateCounterClockwise {\n 0% {\n transform: scaleY(-1) rotate(360deg);\n }\n 100% {\n transform: scaleY(-1) rotate(0deg);\n }\n }\n\n\n // scrollbar styling\n // the below media query targets non-touch devices\n @media not all and (pointer: coarse) {\n * {\n scrollbar-color: ${(props) => props.theme.scrollbar.color} transparent;\n }\n\n *::-webkit-scrollbar {\n width: 5px;\n }\n\n *::-webkit-scrollbar-track {\n background: transparent;\n border-radius: 5px;\n }\n\n *::-webkit-scrollbar-thumb {\n background-color: ${(props) => props.theme.scrollbar.color};\n border-radius: 14px;\n border: 3px solid ${(props) => props.theme.scrollbar.color};\n }\n }\n\n // Utility class for scrollbars that are hidden by default and shown on hover\n .scrollbar-hover {\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n border-radius: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: transparent;\n border-radius: 14px;\n border: 3px solid transparent;\n background-clip: content-box;\n transition: background-color 0.2s ease;\n }\n\n &:hover {\n scrollbar-color: ${(props) => props.theme.scrollbar.color} transparent;\n\n &::-webkit-scrollbar-thumb {\n background-color: ${(props) => props.theme.scrollbar.color};\n }\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background-color: ${(props) => props.theme.scrollbar.color};\n opacity: 0.8;\n }\n }\n\n\n // codemirror\n .CodeMirror {\n .cm-variable-valid {\n color: ${(props) => props.theme.codemirror.variable.valid};\n }\n .cm-variable-invalid {\n color: ${(props) => props.theme.codemirror.variable.invalid};\n }\n .cm-variable-prompt {\n color: ${(props) => props.theme.codemirror.variable.prompt};\n }\n }\n .CodeMirror-brunoVarInfo {\n color: ${(props) => props.theme.text};\n background: ${(props) => props.theme.dropdown.bg};\n ${(props) =>\n props.theme.dropdown.shadow && props.theme.dropdown.shadow !== 'none'\n ? `box-shadow: ${props.theme.dropdown.shadow};`\n : ''}\n border-radius: ${(props) => props.theme.border.radius.base};\n ${(props) =>\n props.theme.dropdown.border && props.theme.dropdown.border !== 'none'\n ? `border: 1px solid ${props.theme.dropdown.border};`\n : ''}\n box-sizing: border-box;\n font-size: ${(props) => props.theme.font.size.base};\n line-height: 1.25rem;\n margin: 0;\n min-width: 18.1875rem;\n max-width: 18.1875rem;\n opacity: 0;\n overflow: visible;\n padding: 0.5rem;\n position: fixed;\n transition: opacity 0.15s;\n z-index: 10;\n }\n\n // Autocomplete hints dropdown container\n .CodeMirror-hints {\n z-index: 50 !important;\n background: ${(props) => props.theme.dropdown.bg};\n ${(props) =>\n props.theme.dropdown.border !== 'none'\n ? `border: 1px solid ${props.theme.dropdown.border};`\n : ''}\n ${(props) =>\n props.theme.dropdown.shadow !== 'none'\n ? `box-shadow: ${props.theme.dropdown.shadow};`\n : ''}\n border-radius: ${(props) => props.theme.border.radius.base};\n padding: 0.25rem;\n font-size: ${(props) => props.theme.font.size.sm};\n font-family: inherit;\n }\n\n // Individual hint items\n .CodeMirror-hint {\n color: ${(props) => props.theme.dropdown.color};\n border-radius: ${(props) => props.theme.border.radius.base};\n line-height: 1.5rem;\n font-size: ${(props) => props.theme.font.size.sm};\n cursor: pointer;\n }\n\n .CodeMirror-brunoVarInfo :first-child {\n margin-top: 0;\n }\n\n .CodeMirror-brunoVarInfo :last-child {\n margin-bottom: 0;\n }\n\n .CodeMirror-brunoVarInfo p {\n margin: 1em 0;\n }\n\n .CodeMirror-lint-tooltip {\n padding: 4px 8px;\n background-color: ${(props) => props.theme.infoTip.bg};\n border: 1px solid ${(props) => props.theme.infoTip.border};\n box-shadow: ${(props) => props.theme.infoTip.boxShadow};\n border-radius: ${(props) => props.theme.border.radius.sm};\n }\n\n .CodeMirror-lint-message {\n font-size: ${(props) => props.theme.font.size.xs};\n color: ${(props) => props.theme.text};\n }\n\n .CodeMirror-lint-message-warning {\n color: ${(props) => props.theme.status.warning.text};\n }\n\n .CodeMirror-lint-message-error {\n color: ${(props) => props.theme.status.danger.text};\n }\n\n /* Header */\n .CodeMirror-brunoVarInfo .var-info-header {\n display: flex;\n align-items: center;\n margin-bottom: 0.375rem;\n gap: 0.375rem;\n }\n\n .CodeMirror-brunoVarInfo .var-name {\n font-size: ${(props) => props.theme.font.size.base};\n color: ${(props) => props.theme.dropdown.color};\n font-weight: 500;\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n /* Scope Badge */\n .CodeMirror-brunoVarInfo .var-scope-badge {\n display: inline-block;\n padding: 0.125rem 0.375rem;\n background: ${(props) => rgba(props.theme.brand, 0.07)};\n border: 1px solid ${(props) => rgba(props.theme.brand, 0.08)};\n border-radius: ${(props) => props.theme.border.radius.base};\n font-size: ${(props) => props.theme.font.size.xs};\n color: ${(props) => props.theme.brand};\n letter-spacing: 0.03125rem;\n flex-shrink: 0;\n }\n\n /* Value Container */\n .CodeMirror-brunoVarInfo .var-value-container {\n position: relative;\n border: 1px solid ${(props) => props.theme.border.border2};\n border-radius: ${(props) => props.theme.border.radius.base};\n background: ${(props) => props.theme.dropdown.hoverBg};\n overflow-y: auto;\n overflow-x: hidden;\n min-width: 17.3125rem;\n max-height: 13.1875rem;\n }\n\n /* Value Display (Read-only) */\n .CodeMirror-brunoVarInfo .var-value-display {\n padding: 0.375rem 1.5rem 0.375rem 0.5rem;\n font-size: ${(props) => props.theme.font.size.base};\n font-family: Inter, sans-serif;\n font-weight: 400;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n line-height: 1.25rem;\n color: ${(props) => props.theme.dropdown.color};\n min-height: 1.75rem;\n max-width: 17.1875rem;\n }\n\n /* Value Editor (CodeMirror) */\n .CodeMirror-brunoVarInfo .var-value-editor {\n width: 100%;\n min-width: 17.1875rem;\n max-width: 17.1875rem;\n max-height: 11.125rem;\n position: relative;\n }\n\n .CodeMirror-brunoVarInfo .var-value-editor .CodeMirror {\n height: 100%;\n min-height: 1.75rem;\n max-height: 11.125rem;\n font-size: ${(props) => props.theme.font.size.base};\n font-family: Inter, sans-serif;\n font-weight: 400;\n line-height: 1.25rem;\n border: 1px solid ${(props) => props.theme.input.focusBorder};\n border-radius: ${(props) => props.theme.border.radius.base};\n background: ${(props) => props.theme.dropdown.hoverBg};\n color: ${(props) => props.theme.dropdown.color};\n transition: border-color 0.15s;\n }\n\n .CodeMirror-brunoVarInfo .var-value-editor .CodeMirror-scroll {\n min-height: 1.75rem;\n max-height: 11.125rem;\n overflow-y: auto !important;\n overflow-x: hidden !important;\n }\n\n .CodeMirror-brunoVarInfo .var-value-editor .CodeMirror-focused {\n background: ${(props) => props.theme.input.bg};\n border-color: ${(props) => props.theme.input.focusBorder};\n }\n\n .CodeMirror-brunoVarInfo .var-value-editor .CodeMirror-lines {\n padding: 0.375rem 1.5rem 0.375rem 0.5rem;\n max-width: 13.1875rem;\n font-family: Inter, sans-serif;\n font-weight: 400;\n line-height: 1.25rem;\n word-break: break-all;\n word-wrap: break-word;\n overflow-wrap: break-word;\n }\n\n .CodeMirror-brunoVarInfo .var-value-editor .CodeMirror pre {\n font-size: ${(props) => props.theme.font.size.base};\n font-family: Inter, sans-serif;\n font-weight: 400;\n line-height: 1.25rem;\n word-break: break-all;\n word-wrap: break-word;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n color: ${(props) => props.theme.dropdown.color};\n }\n\n .CodeMirror-brunoVarInfo .var-value-editor .CodeMirror-line {\n padding: 0;\n max-width: 13.1875rem;\n line-height: 1.25rem;\n font-size: ${(props) => props.theme.font.size.base};\n font-family: Inter, sans-serif;\n font-weight: 400;\n word-break: break-all;\n word-wrap: break-word;\n overflow-wrap: break-word;\n color: ${(props) => props.theme.dropdown.color};\n }\n\n .CodeMirror-brunoVarInfo .var-value-editor .CodeMirror-sizer {\n margin-left: 0 !important;\n margin-bottom: 0 !important;\n max-width: 13.1875rem !important;\n }\n\n /* Editable value display (shows interpolated value, click to edit) */\n .CodeMirror-brunoVarInfo .var-value-editable-display {\n width: 17.1875rem;\n max-width: 13.1875rem;\n padding: 0.375rem 1.5rem 0.375rem 0.5rem;\n font-size: ${(props) => props.theme.font.size.base};\n font-family: Inter, sans-serif;\n font-weight: 400;\n word-break: break-all;\n word-wrap: break-word;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n line-height: 1.25rem;\n color: ${(props) => props.theme.dropdown.color};\n min-height: 1.75rem;\n cursor: text;\n border-radius: ${(props) => props.theme.border.radius.base};\n }\n\n /* Icons Container */\n .CodeMirror-brunoVarInfo .var-icons {\n position: absolute;\n top: 0.375rem;\n right: 0.5rem;\n display: flex;\n gap: 0.25rem;\n z-index: 10;\n }\n\n .CodeMirror-brunoVarInfo .secret-toggle-button,\n .CodeMirror-brunoVarInfo .copy-button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0.125rem;\n opacity: 1;\n transition: opacity 0.2s;\n color: ${(props) => props.theme.dropdown.iconColor};\n opacity: 0.7;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .CodeMirror-brunoVarInfo .secret-toggle-button:hover,\n .CodeMirror-brunoVarInfo .copy-button:hover {\n opacity: 1;\n }\n\n .CodeMirror-brunoVarInfo .copy-success {\n color: ${(props) => props.theme.colors.text.green} !important;\n }\n\n /* Read-only Note */\n .CodeMirror-brunoVarInfo .var-readonly-note {\n font-size: ${(props) => props.theme.font.size.xs};\n color: ${(props) => props.theme.dropdown.mutedText};\n opacity: 0.6;\n margin-top: 0.25rem;\n }\n\n .CodeMirror-brunoVarInfo .var-warning-note {\n font-size: 0.75rem;\n color: ${(props) => props.theme.colors.text.danger};\n margin-top: 0.375rem;\n line-height: 1.25rem;\n }\n\n // Active/selected hint - using theme colors instead of hardcoded blue\n .CodeMirror-hint-active {\n background: ${(props) => props.theme.dropdown.hoverBg} !important;\n color: ${(props) => props.theme.dropdown.color} !important;\n }\n\n .hovered-link.CodeMirror-link {\n text-decoration: underline !important;\n }\n .cmd-ctrl-pressed .hovered-link.CodeMirror-link[data-url] {\n cursor: pointer;\n color: ${(props) => props.theme.textLink} !important;\n }\n\n // Native select styling\n select {\n background-color: ${(props) => props.theme.input.bg};\n color: ${(props) => props.theme.text};\n font-size: ${(props) => props.theme.font.size.base};\n font-weight: 400;\n }\n\n select option {\n background-color: ${(props) => props.theme.dropdown.bg};\n color: ${(props) => props.theme.dropdown.color};\n }\n\n select option:hover,\n select option:focus {\n background-color: ${(props) => props.theme.dropdown.hoverBg} !important;\n color: ${(props) => props.theme.dropdown.color} !important;\n }\n`;\n\nexport default GlobalStyle;\n"
},
{
"path": "packages/bruno-app/src/hooks/useCollectionFolderTree/index.js",
"content": "import { useState, useMemo, useCallback, useEffect } from 'react';\nimport { isItemAFolder } from 'utils/collections';\nimport { sortByNameThenSequence } from 'utils/common/index';\nimport filter from 'lodash/filter';\nimport { useSelector } from 'react-redux';\nimport { findCollectionByUid } from 'utils/collections';\n\nconst buildTree = (items) => {\n const tree = {};\n\n if (!items || items.length === 0) {\n return tree;\n }\n\n const folders = filter(items, (i) => isItemAFolder(i) && !i.isTransient);\n const sortedFolders = sortByNameThenSequence(folders);\n\n for (const folder of sortedFolders) {\n tree[folder.name] = {\n uid: folder.uid,\n name: folder.name,\n item: folder,\n children: folder.items && folder.items.length > 0 ? buildTree(folder.items) : {}\n };\n }\n\n return tree;\n};\n\nconst findFolderByUidInTree = (tree, uid) => {\n for (const folderName in tree) {\n const folder = tree[folderName];\n if (folder.uid === uid) {\n return folder;\n }\n if (folder.children && Object.keys(folder.children).length > 0) {\n const found = findFolderByUidInTree(folder.children, uid);\n if (found) return found;\n }\n }\n return null;\n};\n\nconst getFoldersAtPath = (tree, path) => {\n if (path.length === 0) {\n return Object.values(tree).map((folder) => folder.item);\n }\n\n let currentTree = tree;\n for (const folderUid of path) {\n const folder = findFolderByUidInTree(currentTree, folderUid);\n if (folder && folder.children) {\n currentTree = folder.children;\n } else {\n return [];\n }\n }\n\n return Object.values(currentTree).map((folder) => folder.item);\n};\n\nconst useCollectionFolderTree = (collectionUid) => {\n const collection = useSelector((state) => findCollectionByUid(state.collections.collections, collectionUid));\n const [currentFolderPath, setCurrentFolderPath] = useState([]);\n const [selectedFolderUid, setSelectedFolderUid] = useState(null);\n\n const tree = useMemo(() => {\n if (!collection || !collection.items) {\n return {};\n }\n return buildTree(collection.items);\n }, [collection]);\n\n const currentFolders = useMemo(() => {\n return getFoldersAtPath(tree, currentFolderPath);\n }, [tree, currentFolderPath]);\n\n const breadcrumbs = useMemo(() => {\n if (currentFolderPath.length === 0) {\n return [];\n }\n\n const breadcrumbParts = [];\n let currentTree = tree;\n\n for (const folderUid of currentFolderPath) {\n const folder = findFolderByUidInTree(currentTree, folderUid);\n if (folder) {\n breadcrumbParts.push({\n uid: folder.uid,\n name: folder.name\n });\n currentTree = folder.children;\n }\n }\n\n return breadcrumbParts;\n }, [tree, currentFolderPath]);\n\n const navigateIntoFolder = useCallback((folderUid) => {\n setCurrentFolderPath((prev) => [...prev, folderUid]);\n setSelectedFolderUid(folderUid);\n }, []);\n\n const goBack = useCallback(() => {\n setCurrentFolderPath((prev) => {\n if (prev.length > 0) {\n return prev.slice(0, -1);\n }\n return prev;\n });\n setSelectedFolderUid(null);\n }, []);\n\n const navigateToRoot = useCallback(() => {\n setCurrentFolderPath([]);\n setSelectedFolderUid(null);\n }, []);\n\n const navigateToBreadcrumb = useCallback((index) => {\n setCurrentFolderPath((prev) => prev.slice(0, index + 1));\n setSelectedFolderUid(null);\n }, []);\n\n const getCurrentParentFolder = useCallback(() => {\n if (currentFolderPath.length === 0) {\n return null;\n }\n const lastFolderUid = currentFolderPath[currentFolderPath.length - 1];\n const folder = findFolderByUidInTree(tree, lastFolderUid);\n return folder ? folder.item : null;\n }, [tree, currentFolderPath]);\n\n const getCurrentSelectedFolder = useCallback(() => {\n if (selectedFolderUid) {\n const folder = findFolderByUidInTree(tree, selectedFolderUid);\n return folder ? folder.item : null;\n }\n return null;\n }, [tree, selectedFolderUid]);\n\n const reset = useCallback(() => {\n setCurrentFolderPath([]);\n setSelectedFolderUid(null);\n }, []);\n\n useEffect(() => {\n reset();\n }, [collectionUid, reset]);\n\n return {\n currentFolders,\n breadcrumbs,\n selectedFolderUid,\n setSelectedFolderUid,\n navigateIntoFolder,\n goBack,\n navigateToRoot,\n navigateToBreadcrumb,\n getCurrentParentFolder,\n getCurrentSelectedFolder,\n reset,\n isAtRoot: currentFolderPath.length === 0\n };\n};\n\nexport default useCollectionFolderTree;\n"
},
{
"path": "packages/bruno-app/src/hooks/useDebounce/index.js",
"content": "import { useState, useEffect } from 'react';\n\nfunction useDebounce(value, delay) {\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]);\n\n return debouncedValue;\n}\n\nexport default useDebounce;\n"
},
{
"path": "packages/bruno-app/src/hooks/useDeferredLoading/index.js",
"content": "import { useState, useEffect, useRef } from 'react';\n\n/**\n * A hook that defers showing loading state until a minimum delay has passed.\n * This prevents flickering UI for fast operations.\n *\n * @param {boolean} isLoading - The actual loading state\n * @param {number} delay - Minimum time (ms) before showing loading state (default: 200ms)\n * @returns {boolean} - The deferred loading state\n */\nfunction useDeferredLoading(isLoading, delay = 200) {\n const [showLoading, setShowLoading] = useState(false);\n const timerRef = useRef(null);\n\n useEffect(() => {\n if (isLoading) {\n timerRef.current = setTimeout(() => {\n setShowLoading(true);\n }, delay);\n } else {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n setShowLoading(false);\n }\n\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n };\n }, [isLoading, delay]);\n\n return showLoading;\n}\n\nexport default useDeferredLoading;\n"
},
{
"path": "packages/bruno-app/src/hooks/useDeferredLoading/index.spec.js",
"content": "const { describe, it, expect, beforeEach, afterEach } = require('@jest/globals');\nimport { renderHook, act } from '@testing-library/react';\nimport useDeferredLoading from './index';\n\ndescribe('useDeferredLoading', () => {\n beforeEach(() => {\n jest.useFakeTimers();\n });\n\n afterEach(() => {\n jest.useRealTimers();\n });\n\n it('should return false initially when isLoading is false', () => {\n const { result } = renderHook(() => useDeferredLoading(false));\n expect(result.current).toBe(false);\n });\n\n it('should not show loading immediately when isLoading becomes true', () => {\n const { result } = renderHook(() => useDeferredLoading(true, 200));\n expect(result.current).toBe(false);\n });\n\n it('should show loading after the delay has passed', () => {\n const { result } = renderHook(() => useDeferredLoading(true, 200));\n\n expect(result.current).toBe(false);\n\n act(() => {\n jest.advanceTimersByTime(200);\n });\n\n expect(result.current).toBe(true);\n });\n\n it('should not show loading if isLoading becomes false before delay', () => {\n const { result, rerender } = renderHook(\n ({ isLoading }) => useDeferredLoading(isLoading, 200),\n { initialProps: { isLoading: true } }\n );\n\n expect(result.current).toBe(false);\n\n act(() => {\n jest.advanceTimersByTime(100);\n });\n\n expect(result.current).toBe(false);\n\n rerender({ isLoading: false });\n\n act(() => {\n jest.advanceTimersByTime(200);\n });\n\n expect(result.current).toBe(false);\n });\n\n it('should reset to false immediately when isLoading becomes false', () => {\n const { result, rerender } = renderHook(\n ({ isLoading }) => useDeferredLoading(isLoading, 200),\n { initialProps: { isLoading: true } }\n );\n\n act(() => {\n jest.advanceTimersByTime(200);\n });\n\n expect(result.current).toBe(true);\n\n rerender({ isLoading: false });\n\n expect(result.current).toBe(false);\n });\n\n it('should use default delay of 200ms', () => {\n const { result } = renderHook(() => useDeferredLoading(true));\n\n expect(result.current).toBe(false);\n\n act(() => {\n jest.advanceTimersByTime(199);\n });\n\n expect(result.current).toBe(false);\n\n act(() => {\n jest.advanceTimersByTime(1);\n });\n\n expect(result.current).toBe(true);\n });\n\n it('should respect custom delay values', () => {\n const { result } = renderHook(() => useDeferredLoading(true, 500));\n\n act(() => {\n jest.advanceTimersByTime(400);\n });\n\n expect(result.current).toBe(false);\n\n act(() => {\n jest.advanceTimersByTime(100);\n });\n\n expect(result.current).toBe(true);\n });\n});\n"
},
{
"path": "packages/bruno-app/src/hooks/useDetectSensitiveField/index.js",
"content": "import { useMemo } from 'react';\n\nconst VARIABLE_NAME_REGEX = /\\{\\{([^}]+)\\}\\}/g;\nconst ENV_VAR_REFERENCE_REGEX = /^\\s*\\{\\{.*\\}\\}\\s*$/;\n\nexport const useDetectSensitiveField = (collection) => {\n const envVars = useMemo(() => {\n if (!collection) {\n return [];\n }\n const activeEnv = collection?.environments?.find((env) => env.uid === collection.activeEnvironmentUid);\n if (!activeEnv || !Array.isArray(activeEnv.variables)) {\n return [];\n }\n return activeEnv.variables;\n }, [collection]);\n\n // Checks if the value is a single environment variable reference (e.g., {{API_KEY}})\n const isEnvVarReference = (value) => {\n return typeof value === 'string' && ENV_VAR_REFERENCE_REGEX.test(value);\n };\n\n // Extracts all variable names from a string (e.g., \"Bearer {{TOKEN}}-{{SUFFIX}}\" → [\"TOKEN\", \"SUFFIX\"])\n const extractVarNames = (value) => {\n if (!value || typeof value !== 'string') {\n return [];\n }\n const matches = [];\n let match;\n while ((match = VARIABLE_NAME_REGEX.exec(value)) !== null) {\n matches.push(match[1].trim());\n }\n return matches;\n };\n\n // Checks if a variable is present and not marked as secret in the environment\n const isVarNotSecret = (varName, envVars = []) => {\n const found = envVars.find((v) => v.name === varName);\n return found && !found.secret;\n };\n\n const isSensitive = (value) => {\n if (value && !isEnvVarReference(value)) {\n return {\n showWarning: true,\n warningMessage: 'Store sensitive info as a secret variable or in a .env file'\n };\n }\n\n if (value && typeof value === 'string') {\n const varNames = extractVarNames(value);\n if (varNames.some((varName) => isVarNotSecret(varName, envVars))) {\n return {\n showWarning: true,\n warningMessage: 'Mark the environment variable as secret for better security.'\n };\n }\n }\n\n // No warning needed\n return { showWarning: false };\n };\n\n return {\n isSensitive\n };\n};\n"
},
{
"path": "packages/bruno-app/src/hooks/useFocusTrap/index.js",
"content": "import { useEffect, useRef } from 'react';\n\nconst useFocusTrap = (modalRef) => {\n // refer to this implementation for modal focus: https://stackoverflow.com/a/38865836\n const focusableSelector = 'a[href], area[href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex]:not([tabindex=\"-1\"]), *[contenteditable]';\n\n useEffect(() => {\n const modalElement = modalRef.current;\n if (!modalElement) return;\n\n const focusableElements = Array.from(document.querySelectorAll(focusableSelector));\n const modalFocusableElements = Array.from(modalElement.querySelectorAll(focusableSelector));\n const elementsToHide = focusableElements.filter((el) => !modalFocusableElements.includes(el));\n\n // Hide elements outside the modal\n elementsToHide.forEach((el) => {\n const originalTabIndex = el.getAttribute('tabindex');\n el.setAttribute('data-tabindex', originalTabIndex || 'inline');\n el.setAttribute('tabindex', -1);\n });\n\n // Set focus to the first focusable element in the modal\n const firstElement = modalFocusableElements[0];\n const lastElement = modalFocusableElements[modalFocusableElements.length - 1];\n\n const handleKeyDown = (event) => {\n if (event.key === 'Tab') {\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n } else if (!event.shiftKey && document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n }\n };\n\n modalElement.addEventListener('keydown', handleKeyDown);\n\n return () => {\n modalElement.removeEventListener('keydown', handleKeyDown);\n\n // Restore original tabindex values\n elementsToHide.forEach((el) => {\n const originalTabIndex = el.getAttribute('data-tabindex');\n el.setAttribute('tabindex', originalTabIndex === 'inline' ? '' : originalTabIndex);\n });\n };\n }, [modalRef]);\n};\n\nexport default useFocusTrap;\n"
},
{
"path": "packages/bruno-app/src/hooks/useLocalStorage/index.js",
"content": "import { useState, useEffect } from 'react';\n\nexport default function useLocalStorage(key, defaultValue) {\n const [value, setValue] = useState(() => {\n try {\n const saved = localStorage.getItem(key);\n if (saved !== null) {\n return JSON.parse(saved);\n }\n return defaultValue;\n } catch {\n return defaultValue;\n }\n });\n\n useEffect(() => {\n const rawValue = JSON.stringify(value);\n localStorage.setItem(key, rawValue);\n }, [key, value]);\n\n return [value, setValue];\n}\n"
},
{
"path": "packages/bruno-app/src/hooks/useOnClickOutside/index.js",
"content": "// See https://usehooks.com/useOnClickOutside/\nimport { useEffect } from 'react';\n\nconst useOnClickOutside = (ref, handler, enabled = true) => {\n useEffect(\n () => {\n if (!enabled) return;\n\n const listener = (event) => {\n // Do nothing if clicking ref's element or descendant elements\n if (!ref.current || ref.current.contains(event.target)) {\n return;\n }\n\n handler(event);\n };\n\n document.addEventListener('mousedown', listener);\n document.addEventListener('touchstart', listener);\n\n return () => {\n document.removeEventListener('mousedown', listener);\n document.removeEventListener('touchstart', listener);\n };\n },\n // Add ref and handler to effect dependencies\n // It's worth noting that because passed in handler is a new ...\n // ... function on every render that will cause this effect ...\n // ... callback/cleanup to run every render. It's not a big deal ...\n // ... but to optimize you can wrap handler in useCallback before ...\n // ... passing it into this hook.\n [ref, handler, enabled]\n );\n};\n\nexport default useOnClickOutside;\n"
},
{
"path": "packages/bruno-app/src/hooks/usePrevious/index.js",
"content": "import { useRef, useEffect } from 'react';\n\nfunction usePrevious(value) {\n const ref = useRef();\n\n useEffect(() => {\n ref.current = value; // assign the value of ref to the argument\n }, [value]); // this code will run when the value of 'value' changes\n\n return ref.current; // in the end, return the current ref value.\n}\n\nexport default usePrevious;\n"
},
{
"path": "packages/bruno-app/src/hooks/useProtoFileManagement/index.js",
"content": "import { useState, useRef, useMemo } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { browseFiles, updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';\nimport { updateCollectionProtobuf } from 'providers/ReduxStore/slices/collections';\nimport { getRelativePath, getAbsoluteFilePath } from 'utils/common/path';\nimport { browseDirectory } from 'utils/filesystem';\nimport { loadGrpcMethodsFromProtoFile } from 'utils/network/index';\nimport useLocalStorage from 'hooks/useLocalStorage/index';\nimport { cloneDeep } from 'lodash';\nimport get from 'lodash/get';\n\n/**\n * Custom hook for managing protofile data and collection configuration\n * @param {Object} collection - The collection object\n * @param {string} currentProtoPath - Currently selected proto file path\n */\nexport default function useProtoFileManagement(collection) {\n const dispatch = useDispatch();\n\n const [protofileCache, setProtofileCache] = useLocalStorage('bruno.grpc.protofileCache', {});\n const [isLoadingMethods, setIsLoadingMethods] = useState(false);\n\n // Get protobuf config from draft if exists, otherwise from brunoConfig\n const protobufConfig = collection?.draft?.brunoConfig\n ? get(collection, 'draft.brunoConfig.protobuf', {})\n : get(collection, 'brunoConfig.protobuf', {});\n\n const collectionProtoFiles = useMemo(() => protobufConfig?.protoFiles || [], [protobufConfig?.protoFiles]);\n const collectionImportPaths = useMemo(() => protobufConfig?.importPaths || [], [protobufConfig?.importPaths]);\n\n const protoFilesWithExistence = useMemo(() =>\n collectionProtoFiles.map((protoFile) => ({\n path: protoFile.path,\n exists: protoFile.exists || false\n })), [collectionProtoFiles]);\n\n const importPathsWithExistence = useMemo(() =>\n collectionImportPaths.map((importPath) => ({\n path: importPath.path,\n exists: importPath.exists || false,\n enabled: importPath.enabled || false\n })), [collectionImportPaths]);\n\n const loadMethodsFromProtoFile = async (filePath, isManualRefresh = false) => {\n if (!filePath) {\n return { methods: [], error: new Error('No proto file selected') };\n }\n\n const absolutePath = getAbsoluteFilePath(collection.pathname, filePath);\n\n const cachedMethods = protofileCache[absolutePath];\n if (cachedMethods && !isLoadingMethods && !isManualRefresh) {\n return { methods: cachedMethods, error: null, fromCache: true };\n }\n\n setIsLoadingMethods(true);\n try {\n const { methods, error } = await loadGrpcMethodsFromProtoFile(absolutePath, collection);\n\n if (error) {\n console.error('Error loading gRPC methods:', error);\n return { methods: [], error };\n }\n\n setProtofileCache((prevCache) => ({\n ...prevCache,\n [absolutePath]: methods\n }));\n\n return { methods, error: null, fromCache: false };\n } catch (err) {\n console.error('Error loading gRPC methods:', err);\n return { methods: [], error: err };\n } finally {\n setIsLoadingMethods(false);\n }\n };\n\n const addProtoFileToCollection = async (filePath) => {\n const relativePath = getRelativePath(collection.pathname, filePath, true);\n\n const exists = collectionProtoFiles.some((pf) => pf.path === relativePath);\n\n if (exists) {\n return { success: true, relativePath, alreadyExists: true };\n }\n\n try {\n const protoFileObj = {\n path: relativePath,\n type: 'file',\n exists: true\n };\n\n const updatedProtobuf = {\n ...protobufConfig,\n protoFiles: [...collectionProtoFiles, protoFileObj]\n };\n\n dispatch(updateCollectionProtobuf({\n collectionUid: collection.uid,\n protobuf: updatedProtobuf\n }));\n\n return { success: true, relativePath };\n } catch (error) {\n console.error('Error adding proto file to collection:', error);\n return { success: false, error };\n }\n };\n\n const addProtoFileFromRequest = async (filePath) => {\n const relativePath = getRelativePath(collection.pathname, filePath, true);\n\n const exists = collectionProtoFiles.some((pf) => pf.path === relativePath);\n\n if (exists) {\n return { success: true, relativePath, alreadyExists: true };\n }\n\n try {\n const protoFileObj = {\n path: relativePath,\n type: 'file'\n };\n\n const brunoConfig = cloneDeep(collection.brunoConfig);\n if (!brunoConfig.protobuf) {\n brunoConfig.protobuf = {};\n }\n if (!brunoConfig.protobuf.protoFiles) {\n brunoConfig.protobuf.protoFiles = [];\n }\n\n brunoConfig.protobuf.protoFiles = [...collectionProtoFiles, protoFileObj];\n\n await dispatch(updateBrunoConfig(brunoConfig, collection.uid));\n\n return { success: true, relativePath };\n } catch (error) {\n console.error('Error adding proto file to collection:', error);\n return { success: false, error };\n }\n };\n\n const addImportPathToCollection = async (directoryPath) => {\n const relativePath = getRelativePath(collection.pathname, directoryPath, true);\n const importPathObj = {\n path: relativePath,\n enabled: true,\n exists: true\n };\n\n const exists = collectionImportPaths.some((ip) => ip.path === importPathObj.path);\n\n if (exists) {\n return { success: false, error: new Error('Import path already exists') };\n }\n\n try {\n const updatedProtobuf = {\n ...protobufConfig,\n importPaths: [...collectionImportPaths, importPathObj]\n };\n\n dispatch(updateCollectionProtobuf({\n collectionUid: collection.uid,\n protobuf: updatedProtobuf\n }));\n\n return { success: true, relativePath };\n } catch (error) {\n console.error('Error adding import path:', error);\n return { success: false, error };\n }\n };\n\n const addImportPathFromRequest = async (directoryPath) => {\n const relativePath = getRelativePath(collection.pathname, directoryPath, true);\n const importPathObj = {\n path: relativePath,\n enabled: true\n };\n\n const exists = collectionImportPaths.some((ip) => ip.path === importPathObj.path);\n\n if (exists) {\n return { success: false, error: new Error('Import path already exists') };\n }\n\n try {\n const brunoConfig = cloneDeep(collection.brunoConfig);\n if (!brunoConfig.protobuf) {\n brunoConfig.protobuf = {};\n }\n if (!brunoConfig.protobuf.importPaths) {\n brunoConfig.protobuf.importPaths = [];\n }\n\n brunoConfig.protobuf.importPaths = [...collectionImportPaths, importPathObj];\n\n await dispatch(updateBrunoConfig(brunoConfig, collection.uid));\n\n return { success: true, relativePath };\n } catch (error) {\n console.error('Error adding import path:', error);\n return { success: false, error };\n }\n };\n\n const toggleImportPath = async (index) => {\n try {\n const updatedImportPaths = [...collectionImportPaths];\n updatedImportPaths[index] = {\n ...updatedImportPaths[index],\n enabled: !updatedImportPaths[index].enabled\n };\n\n const updatedProtobuf = {\n ...protobufConfig,\n importPaths: updatedImportPaths\n };\n\n dispatch(updateCollectionProtobuf({\n collectionUid: collection.uid,\n protobuf: updatedProtobuf\n }));\n\n return {\n success: true,\n enabled: updatedImportPaths[index].enabled\n };\n } catch (error) {\n console.error('Error toggling import path:', error);\n return { success: false, error };\n }\n };\n\n const toggleImportPathFromRequest = async (index) => {\n try {\n const updatedImportPaths = [...collectionImportPaths];\n updatedImportPaths[index] = {\n ...updatedImportPaths[index],\n enabled: !updatedImportPaths[index].enabled\n };\n\n const brunoConfig = cloneDeep(collection.brunoConfig);\n if (!brunoConfig.protobuf) {\n brunoConfig.protobuf = {};\n }\n brunoConfig.protobuf.importPaths = updatedImportPaths;\n\n await dispatch(updateBrunoConfig(brunoConfig, collection.uid));\n\n return {\n success: true,\n enabled: updatedImportPaths[index].enabled\n };\n } catch (error) {\n console.error('Error toggling import path:', error);\n return { success: false, error };\n }\n };\n\n const browseForProtoFile = async () => {\n const filters = [{ name: 'Proto Files', extensions: ['proto'] }];\n\n try {\n const filePaths = await dispatch(browseFiles(filters, ['']));\n if (filePaths && filePaths.length > 0) {\n return { success: true, filePath: filePaths[0] };\n }\n return { success: false, error: new Error('No file selected') };\n } catch (error) {\n console.error('Error browsing for proto file:', error);\n return { success: false, error };\n }\n };\n\n const browseForImportDirectory = async () => {\n try {\n const selectedPath = await browseDirectory(collection.pathname);\n if (selectedPath) {\n return { success: true, directoryPath: selectedPath };\n }\n return { success: false, error: new Error('No directory selected') };\n } catch (error) {\n console.error('Error browsing for import directory:', error);\n return { success: false, error };\n }\n };\n\n const removeProtoFileFromCollection = async (index) => {\n try {\n const updatedProtoFiles = [...collectionProtoFiles];\n updatedProtoFiles.splice(index, 1);\n\n const updatedProtobuf = {\n ...protobufConfig,\n protoFiles: updatedProtoFiles\n };\n\n dispatch(updateCollectionProtobuf({\n collectionUid: collection.uid,\n protobuf: updatedProtobuf\n }));\n\n return { success: true };\n } catch (error) {\n console.error('Error removing proto file:', error);\n return { success: false, error };\n }\n };\n\n const removeImportPathFromCollection = async (index) => {\n try {\n const updatedImportPaths = [...collectionImportPaths];\n updatedImportPaths.splice(index, 1);\n\n const updatedProtobuf = {\n ...protobufConfig,\n importPaths: updatedImportPaths\n };\n\n dispatch(updateCollectionProtobuf({\n collectionUid: collection.uid,\n protobuf: updatedProtobuf\n }));\n\n return { success: true };\n } catch (error) {\n console.error('Error removing import path:', error);\n return { success: false, error };\n }\n };\n\n const replaceImportPathInCollection = async (index, newDirectoryPath) => {\n try {\n const relativePath = getRelativePath(collection.pathname, newDirectoryPath, true);\n const updatedImportPaths = [...collectionImportPaths];\n updatedImportPaths[index] = {\n ...updatedImportPaths[index],\n path: relativePath,\n exists: true\n };\n\n const updatedProtobuf = {\n ...protobufConfig,\n importPaths: updatedImportPaths\n };\n\n dispatch(updateCollectionProtobuf({\n collectionUid: collection.uid,\n protobuf: updatedProtobuf\n }));\n\n return { success: true };\n } catch (error) {\n console.error('Error replacing import path:', error);\n return { success: false, error };\n }\n };\n\n const replaceProtoFileInCollection = async (index, newFilePath) => {\n try {\n const relativePath = getRelativePath(collection.pathname, newFilePath, true);\n const updatedProtoFiles = [...collectionProtoFiles];\n updatedProtoFiles[index] = {\n ...updatedProtoFiles[index],\n path: relativePath,\n type: 'file',\n exists: true\n };\n\n const updatedProtobuf = {\n ...protobufConfig,\n protoFiles: updatedProtoFiles\n };\n\n dispatch(updateCollectionProtobuf({\n collectionUid: collection.uid,\n protobuf: updatedProtobuf\n }));\n\n return { success: true };\n } catch (error) {\n console.error('Error replacing proto file:', error);\n return { success: false, error };\n }\n };\n\n return {\n protoFiles: protoFilesWithExistence,\n importPaths: importPathsWithExistence,\n isLoadingMethods,\n loadMethodsFromProtoFile,\n addProtoFileToCollection,\n addImportPathToCollection,\n addImportPathFromRequest,\n toggleImportPath,\n toggleImportPathFromRequest,\n browseForProtoFile,\n browseForImportDirectory,\n removeProtoFileFromCollection,\n removeImportPathFromCollection,\n replaceImportPathInCollection,\n replaceProtoFileInCollection,\n addProtoFileFromRequest\n };\n}\n"
},
{
"path": "packages/bruno-app/src/hooks/useReflectionManagement/index.js",
"content": "import { useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { loadGrpcMethodsFromReflection } from 'providers/ReduxStore/slices/collections/actions';\nimport useLocalStorage from 'hooks/useLocalStorage/index';\n\n/**\n * Custom hook for managing reflection data and server discovery\n * @param {Object} item - The request item\n * @param {string} collectionUid - Collection UID\n */\nexport default function useReflectionManagement(item, collectionUid) {\n const dispatch = useDispatch();\n\n const [reflectionCache, setReflectionCache] = useLocalStorage('bruno.grpc.reflectionCache', {});\n const [isLoadingMethods, setIsLoadingMethods] = useState(false);\n\n /**\n * Load gRPC methods from server reflection\n * @param {string} url - The gRPC server URL\n * @param {boolean} isManualRefresh - Whether this is a manual refresh\n * @returns {Promise<{methods: Array, error: Error|null}>}\n */\n const loadMethodsFromReflection = async (url, isManualRefresh = false) => {\n if (!url) {\n return { methods: [], error: new Error('No URL provided') };\n }\n\n const cachedMethods = reflectionCache[url];\n if (!isManualRefresh && cachedMethods && !isLoadingMethods) {\n return { methods: cachedMethods, error: null, fromCache: true };\n }\n\n setIsLoadingMethods(true);\n try {\n const { methods, error } = await dispatch(loadGrpcMethodsFromReflection(item, collectionUid, url));\n\n if (error) {\n console.error('Error loading gRPC methods:', error);\n return { methods: [], error };\n }\n\n setReflectionCache((prevCache) => ({\n ...prevCache,\n [url]: methods\n }));\n\n return { methods, error: null, fromCache: false };\n } catch (error) {\n console.error('Error loading gRPC methods:', error);\n return { methods: [], error };\n } finally {\n setIsLoadingMethods(false);\n }\n };\n\n /**\n * Check if methods are cached for a URL\n * @param {string} url - The gRPC server URL\n * @returns {boolean}\n */\n const hasCachedMethods = (url) => {\n return !!(reflectionCache[url] && reflectionCache[url].length > 0);\n };\n\n /**\n * Get cached methods for a URL\n * @param {string} url - The gRPC server URL\n * @returns {Array}\n */\n const getCachedMethods = (url) => {\n return reflectionCache[url] || [];\n };\n\n /**\n * Clear cache for a specific URL\n * @param {string} url - The gRPC server URL\n */\n const clearCacheForUrl = (url) => {\n setReflectionCache((prevCache) => {\n const newCache = { ...prevCache };\n delete newCache[url];\n return newCache;\n });\n };\n\n /**\n * Clear all reflection cache\n */\n const clearAllCache = () => {\n setReflectionCache({});\n };\n\n return {\n isLoadingMethods,\n reflectionCache,\n loadMethodsFromReflection,\n hasCachedMethods,\n getCachedMethods,\n clearCacheForUrl,\n clearAllCache\n };\n}\n"
},
{
"path": "packages/bruno-app/src/hooks/useTabPaneBoundaries/index.js",
"content": "import find from 'lodash/find';\nimport { updateRequestPaneTabHeight, updateRequestPaneTabWidth } from 'providers/ReduxStore/slices/tabs';\nimport { useDispatch, useSelector } from 'react-redux';\n\nconst MIN_TOP_PANE_HEIGHT = 380;\n\nexport function useTabPaneBoundaries(activeTabUid) {\n const DEFAULT_PANE_WIDTH_DIVISOR = 2.2;\n\n const tabs = useSelector((state) => state.tabs.tabs);\n const focusedTab = find(tabs, (t) => t.uid === activeTabUid);\n const screenWidth = useSelector((state) => state.app.screenWidth);\n let asideWidth = useSelector((state) => state.app.leftSidebarWidth);\n const left = focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / DEFAULT_PANE_WIDTH_DIVISOR;\n const top = focusedTab?.requestPaneHeight || MIN_TOP_PANE_HEIGHT;\n const dispatch = useDispatch();\n\n return {\n left,\n top,\n setLeft(value) {\n dispatch(updateRequestPaneTabWidth({\n uid: activeTabUid,\n requestPaneWidth: value\n }));\n },\n setTop(value) {\n dispatch(updateRequestPaneTabHeight({\n uid: activeTabUid,\n requestPaneHeight: value\n }));\n },\n reset() {\n dispatch(updateRequestPaneTabHeight({\n uid: activeTabUid,\n requestPaneHeight: MIN_TOP_PANE_HEIGHT\n }));\n dispatch(updateRequestPaneTabWidth({\n uid: activeTabUid,\n requestPaneWidth: (screenWidth - asideWidth) / DEFAULT_PANE_WIDTH_DIVISOR\n }));\n }\n };\n}\n"
},
{
"path": "packages/bruno-app/src/i18n/index.js",
"content": "import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport translationEn from './translation/en.json';\n\nconst resources = {\n en: {\n translation: translationEn\n }\n};\n\ni18n\n .use(initReactI18next) // passes i18n down to react-i18next\n .init({\n resources,\n lng: 'en', // Use \"en\" as the default language. \"cimode\" can be used to debug / show translation placeholder\n\n ns: 'translation', // Use translation as the default Namespace that will be loaded by default\n\n interpolation: {\n escapeValue: false // react already safes from xss\n }\n });\n\nexport default i18n;\n"
},
{
"path": "packages/bruno-app/src/i18n/translation/en.json",
"content": "{\n \"COMMON\": {\n \"COLLECTIONS\": \"Collections\",\n \"DOCUMENTATION\": \"Documentation\",\n \"REPORT_ISSUES\": \"Report Issues\",\n \"GITHUB\": \"GitHub\",\n \"DISCORD\": \"Discord\",\n \"TWITTER\": \"Twitter\"\n },\n \"WELCOME\": {\n \"ABOUT_BRUNO\": \"Opensource IDE for exploring and testing APIs\",\n \"LINKS\": \"Links\",\n \"CREATE_COLLECTION\": \"Create Collection\",\n \"OPEN_COLLECTION\": \"Open Collection\",\n \"IMPORT_COLLECTION\": \"Import Collection\",\n \"COLLECTION_IMPORT_SUCCESS\": \"Collection imported successfully\",\n \"COLLECTION_IMPORT_ERROR\": \"An error occurred while importing the collection. Check the logs for more information.\",\n \"COLLECTION_OPEN_ERROR\": \"An error occurred while opening the collection\",\n \"GLOBAL_SEARCH_TIP_PART1\": \"Press\",\n \"GLOBAL_SEARCH_TIP_PART2\": \"(mac) or\",\n \"GLOBAL_SEARCH_TIP_PART3\": \"(windows) anytime to quickly search collections, folders, and requests\"\n }\n}\n"
},
{
"path": "packages/bruno-app/src/index.js",
"content": "import React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './pages/index';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nconst rootElement = document.getElementById('root');\n\nconst Main = () => {\n useEffect(() => {\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.type = 'text/css';\n link.href = `static/diff2html.min.css`;\n document.head.appendChild(link);\n const script = document.createElement('script');\n script.type = 'text/javascript';\n script.src = `static/diff2Html.js`;\n script.async = true;\n document.body.appendChild(script);\n\n return () => {\n document.head.removeChild(link);\n document.body.removeChild(script);\n };\n }, []);\n\n return (\n {formik.errors.workspaceLocation}
\n ) : null}\n \n \n Browse\n \n
\n \n \n \n ) : null}\n \n \n \n {showApiSpecPage && activeApiSpecUid ? (\n \n \n
\n\n \n WARNING:\n
\n \n It looks like Bruno was launched as the Intel (x64) build under Rosetta on your Apple Silicon Mac. This can cause reduced performance and unexpected behavior.\n
\n \n \n
\n );\n }\n\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;\n"
},
{
"path": "packages/bruno-app/src/pages/Main.js",
"content": "import { useState, useEffect } from 'react';\nimport { Provider } from 'react-redux';\nimport { AppProvider } from 'providers/App';\nimport { ToastProvider } from 'providers/Toaster';\nimport { HotkeysProvider } from 'providers/Hotkeys';\nimport { PromptVariablesProvider } from 'providers/PromptVariables';\n\nimport ReduxStore from 'providers/ReduxStore';\nimport ThemeProvider from 'providers/Theme/index';\nimport ErrorBoundary from './ErrorBoundary';\n\nimport '../styles/globals.css';\nimport 'codemirror/lib/codemirror.css';\nimport 'graphiql/graphiql.min.css';\nimport 'react-tooltip/dist/react-tooltip.css';\nimport '@usebruno/graphql-docs/dist/esm/index.css';\nimport '@fontsource/inter/100.css';\nimport '@fontsource/inter/200.css';\nimport '@fontsource/inter/300.css';\nimport '@fontsource/inter/400.css';\nimport '@fontsource/inter/500.css';\nimport '@fontsource/inter/600.css';\nimport '@fontsource/inter/700.css';\nimport '@fontsource/inter/800.css';\nimport '@fontsource/inter/900.css';\nimport { setupPolyfills } from 'utils/common/setupPolyfills';\nsetupPolyfills();\n\nfunction Main({ children }) {\n if (!window.ipcRenderer) {\n return (\n \n this.returnToApp()}\n >\n Return to App\n \n\n
\n \n
\n\n Oops! Something went wrong
\n\n If you are using an official production build: the above error is most likely a bug!\n
\n Please report this under:\n
\n \n Force Quit\n \n
\n \n ERROR:\n \"ipcRenderer\" not found in window object.\n
\n );\n }\n\n return (\n \n You most likely opened Bruno inside your web browser. Bruno only works within Electron, you can start Electron\n in an adjacent terminal using \"npm run dev:electron\".\n
\n \n \n \n \n \n
\n );\n}\n"
},
{
"path": "packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js",
"content": "import React, { useEffect, useMemo } from 'react';\nimport each from 'lodash/each';\nimport filter from 'lodash/filter';\nimport groupBy from 'lodash/groupBy';\nimport { useSelector } from 'react-redux';\nimport { useDispatch } from 'react-redux';\nimport { findCollectionByUid, flattenItems, isItemARequest, hasRequestChanges, findEnvironmentInCollection } from 'utils/collections';\nimport { pluralizeWord } from 'utils/common';\nimport { completeQuitFlow } from 'providers/ReduxStore/slices/app';\nimport { saveMultipleRequests, saveMultipleCollections, saveMultipleFolders, saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';\nimport { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';\nimport { IconAlertTriangle } from '@tabler/icons';\nimport Modal from 'components/Modal';\nimport Button from 'ui/Button';\n\nconst SaveRequestsModal = ({ onClose }) => {\n const MAX_UNSAVED_ITEMS_TO_SHOW = 5;\n const collections = useSelector((state) => state.collections.collections);\n const tabs = useSelector((state) => state.tabs.tabs);\n const globalEnvironments = useSelector((state) => state.globalEnvironments.globalEnvironments);\n const globalEnvironmentDraft = useSelector((state) => state.globalEnvironments.globalEnvironmentDraft);\n const dispatch = useDispatch();\n\n const allDrafts = useMemo(() => {\n const requestDrafts = [];\n const collectionDrafts = [];\n const folderDrafts = [];\n const environmentDrafts = [];\n const tabsByCollection = groupBy(tabs, (t) => t.collectionUid);\n\n Object.keys(tabsByCollection).forEach((collectionUid) => {\n const collection = findCollectionByUid(collections, collectionUid);\n if (collection) {\n // Check for collection draft\n if (collection.draft) {\n collectionDrafts.push({\n type: 'collection',\n name: collection.name,\n collectionUid: collectionUid\n });\n }\n\n // Check for collection environment draft\n if (collection.environmentsDraft) {\n const { environmentUid, variables } = collection.environmentsDraft;\n const environment = findEnvironmentInCollection(collection, environmentUid);\n if (environment && variables) {\n environmentDrafts.push({\n type: 'collection-environment',\n name: environment.name,\n environmentUid,\n variables,\n collectionUid: collectionUid\n });\n }\n }\n\n // Check for request and folder drafts\n const items = flattenItems(collection.items);\n\n // Request drafts\n const requests = filter(items, (item) => isItemARequest(item) && hasRequestChanges(item));\n each(requests, (draft) => {\n requestDrafts.push({\n ...draft,\n collectionUid: collectionUid\n });\n });\n\n // Folder drafts\n const folders = filter(items, (item) => item.type === 'folder' && item.draft);\n each(folders, (folder) => {\n folderDrafts.push({\n type: 'folder',\n name: folder.name,\n folderUid: folder.uid,\n collectionUid: collectionUid\n });\n });\n }\n });\n\n // Check for global environment draft\n if (globalEnvironmentDraft) {\n const { environmentUid, variables } = globalEnvironmentDraft;\n const environment = globalEnvironments?.find((env) => env.uid === environmentUid);\n if (environment && variables) {\n environmentDrafts.push({\n type: 'global-environment',\n name: environment.name,\n environmentUid,\n variables\n });\n }\n }\n\n return [...collectionDrafts, ...folderDrafts, ...environmentDrafts, ...requestDrafts];\n }, [collections, tabs, globalEnvironments, globalEnvironmentDraft]);\n\n const totalDraftsCount = allDrafts.length;\n\n useEffect(() => {\n if (totalDraftsCount === 0) {\n return dispatch(completeQuitFlow());\n }\n }, [totalDraftsCount, dispatch]);\n\n const closeWithoutSave = () => {\n dispatch(completeQuitFlow());\n onClose();\n };\n\n const closeWithSave = async () => {\n try {\n // Separate drafts by type\n const collectionDrafts = allDrafts.filter((d) => d.type === 'collection');\n const folderDrafts = allDrafts.filter((d) => d.type === 'folder');\n const requestDrafts = allDrafts.filter((d) => isItemARequest(d));\n const collectionEnvironmentDrafts = allDrafts.filter((d) => d.type === 'collection-environment');\n const globalEnvironmentDrafts = allDrafts.filter((d) => d.type === 'global-environment');\n\n // Save all collection drafts\n if (collectionDrafts.length > 0) {\n await dispatch(saveMultipleCollections(collectionDrafts));\n }\n\n // Save all folder drafts\n if (folderDrafts.length > 0) {\n await dispatch(saveMultipleFolders(folderDrafts));\n }\n\n // Save all request drafts\n if (requestDrafts.length > 0) {\n await dispatch(saveMultipleRequests(requestDrafts));\n }\n\n // Save all collection environment drafts\n for (const draft of collectionEnvironmentDrafts) {\n await dispatch(saveEnvironment(draft.variables, draft.environmentUid, draft.collectionUid));\n }\n\n // Save all global environment drafts\n for (const draft of globalEnvironmentDrafts) {\n await dispatch(saveGlobalEnvironment({ variables: draft.variables, environmentUid: draft.environmentUid }));\n }\n\n dispatch(completeQuitFlow());\n onClose();\n } catch (error) {\n console.error('Error saving drafts:', error);\n }\n };\n\n if (totalDraftsCount === 0) {\n return null;\n }\n\n return (\n \n
\n Hold on..
\n\n Do you want to save the changes you made to the following{' '}\n {totalDraftsCount} {pluralizeWord('item', totalDraftsCount)}?\n
\n\n- \n {allDrafts.slice(0, MAX_UNSAVED_ITEMS_TO_SHOW).map((item, index) => {\n let prefix;\n switch (item.type) {\n case 'collection':\n prefix = 'Collection: ';\n break;\n case 'folder':\n prefix = 'Folder: ';\n break;\n case 'collection-environment':\n prefix = 'Collection Environment: ';\n break;\n case 'global-environment':\n prefix = 'Global Environment: ';\n break;\n default:\n prefix = 'Request: ';\n }\n return (\n
- \n {prefix}\n {item.name || item.filename}\n \n );\n })}\n
\n ...{totalDraftsCount - MAX_UNSAVED_ITEMS_TO_SHOW} additional{' '}\n {pluralizeWord('item', totalDraftsCount - MAX_UNSAVED_ITEMS_TO_SHOW)} not shown\n
\n )}\n\n\n
\n \n );\n};\n\nexport default SaveRequestsModal;\n"
},
{
"path": "packages/bruno-app/src/providers/App/ConfirmAppClose/index.js",
"content": "import React, { useState, useEffect } from 'react';\nimport { useDispatch } from 'react-redux';\nimport SaveRequestsModal from './SaveRequestsModal';\nimport { isElectron } from 'utils/common/platform';\n\nconst ConfirmAppClose = () => {\n const { ipcRenderer } = window;\n const [showConfirmClose, setShowConfirmClose] = useState(false);\n const dispatch = useDispatch();\n\n useEffect(() => {\n if (!isElectron()) {\n return;\n }\n\n const clearListener = ipcRenderer.on('main:start-quit-flow', () => {\n setShowConfirmClose(true);\n });\n\n return () => {\n clearListener();\n };\n }, [isElectron, ipcRenderer, dispatch, setShowConfirmClose]);\n\n if (!showConfirmClose) {\n return null;\n }\n\n return \n \n
\n \n \n \n
\n {props.children}
\n