+
setTab('general')}>
General
@@ -63,6 +68,9 @@ const Preferences = ({ onClose }) => {
setTab('support')}>
Support
+
setTab('beta')}>
+ Beta
+
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcBody/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcBody/StyledWrapper.js
new file mode 100644
index 000000000..4b1ebcdb1
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/GrpcBody/StyledWrapper.js
@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ flex: 1;
+ /* height: 100%; */
+ position: relative;
+
+ .grpc-message-header {
+ .font-medium {
+ color: ${(props) => props.theme.text};
+ }
+
+ button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+
+ &:hover {
+ transform: scale(1.1);
+ }
+
+ &:active {
+ transform: scale(0.95);
+ }
+ }
+ }
+
+ #grpc-messages-container {
+ /* height: 100%; */
+ position: relative;
+ }
+
+ .add-message-btn-container {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding-top: 8px;
+ background: ${(props) => props.theme.bg || '#fff'};
+ z-index: 15;
+ border-top: 1px solid ${(props) => props.theme.border || 'rgba(0, 0, 0, 0.1)'};
+
+ .add-message-btn {
+ width: 100%;
+ }
+ }
+
+ .CodeMirror {
+ border-top: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+`;
+
+export default Wrapper;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js b/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js
new file mode 100644
index 000000000..ce7cdebd9
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js
@@ -0,0 +1,354 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { get } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { sendGrpcMessage, generateGrpcSampleMessage } from 'utils/network/index';
+import useLocalStorage from 'hooks/useLocalStorage';
+
+import CodeEditor from 'components/CodeEditor/index';
+import StyledWrapper from './StyledWrapper';
+import { IconSend, IconRefresh, IconWand, IconPlus, IconTrash, IconChevronDown, IconChevronUp } from '@tabler/icons';
+import ToolHint from 'components/ToolHint/index';
+import { toastError } from 'utils/common/error';
+import { format, applyEdits } from 'jsonc-parser';
+import toast from 'react-hot-toast'
+import { getAbsoluteFilePath } from 'utils/common/path';
+
+const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCollapsed, onToggleCollapse, handleRun, canClientSendMultipleMessages }) => {
+ const dispatch = useDispatch();
+ const { displayedTheme, theme } = useTheme();
+ const preferences = useSelector((state) => state.app.preferences);
+ const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
+ const isConnectionActive = useSelector((state) => state.collections.activeConnections.includes(item.uid));
+
+ // Access gRPC method metadata from local storage
+ const [reflectionCache] = useLocalStorage('bruno.grpc.reflectionCache', {});
+ const [protofileCache] = useLocalStorage('bruno.grpc.protofileCache', {});
+
+ const canClientStream = methodType === 'client-streaming' || methodType === 'bidi-streaming';
+
+ const { name, content } = message;
+
+ const onEdit = (value) => {
+ const currentMessages = [...(body.grpc || [])];
+
+ currentMessages[index] = {
+ name: name ? name : `message ${index + 1}`,
+ content: value
+ };
+
+ dispatch(
+ updateRequestBody({
+ content: currentMessages,
+ itemUid: item.uid,
+ collectionUid: collection.uid
+ })
+ );
+ };
+
+ const onSend = async () => {
+ try {
+ await sendGrpcMessage(item, collection.uid, content);
+ } catch (error) {
+ console.error('Error sending message:', error);
+ }
+ }
+ const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
+
+ const onRegenerateMessage = async () => {
+ try {
+ const methodPath = item.draft?.request?.method || item.request?.method;
+
+ if (!methodPath) {
+ toastError(new Error('Method path not found in request'));
+ return;
+ }
+
+ // Get the URL and protoPath to determine which cache to use
+ const url = item.draft?.request?.url || item.request?.url;
+ const protoPath = item.draft?.request?.protoPath || item.request?.protoPath;
+
+ // Find the method metadata from the appropriate cache
+ let methodMetadata = null;
+ if (protoPath) {
+ // Use protofile cache if protoPath is available
+ const absolutePath = getAbsoluteFilePath(protoPath, collection.pathname);
+ const cachedMethods = protofileCache[absolutePath];
+ if (cachedMethods) {
+ methodMetadata = cachedMethods.find(method => method.path === methodPath);
+ }
+ } else if (url) {
+ // Use reflection cache if no protoPath (reflection mode)
+ const cachedMethods = reflectionCache[url];
+ if (cachedMethods) {
+ methodMetadata = cachedMethods.find(method => method.path === methodPath);
+ }
+ }
+
+ const result = await generateGrpcSampleMessage(
+ methodPath,
+ content,
+ {
+ arraySize: 2,
+ methodMetadata // Pass the method metadata to the function
+ }
+ );
+
+ if (result.success) {
+ const currentMessages = [...(body.grpc || [])];
+
+ currentMessages[index] = {
+ name: name ? name : `message ${index + 1}`,
+ content: result.message
+ };
+
+ dispatch(
+ updateRequestBody({
+ content: currentMessages,
+ itemUid: item.uid,
+ collectionUid: collection.uid
+ })
+ );
+
+ toast.success('Sample message generated successfully!');
+ } else {
+ toastError(new Error(result.error || 'Failed to generate sample message'));
+ }
+ } catch (error) {
+ console.error('Error generating sample message:', error);
+ toastError(error);
+ }
+ };
+
+ const onDeleteMessage = () => {
+ const currentMessages = [...(body.grpc || [])];
+
+ currentMessages.splice(index, 1);
+
+ dispatch(
+ updateRequestBody({
+ content: currentMessages,
+ itemUid: item.uid,
+ collectionUid: collection.uid
+ })
+ );
+ };
+
+ const onPrettify = () => {
+ try {
+ const edits = format(content, undefined, { tabSize: 2, insertSpaces: true });
+ const prettyBodyJson = applyEdits(content, edits);
+
+ const currentMessages = [...(body.grpc || [])];
+ currentMessages[index] = {
+ name: name ? name : `message ${index + 1}`,
+ content: prettyBodyJson
+ };
+ dispatch(
+ updateRequestBody({
+ content: currentMessages,
+ itemUid: item.uid,
+ collectionUid: collection.uid
+ })
+ );
+ } catch (e) {
+ toastError(new Error('Unable to prettify. Invalid JSON format.'));
+ }
+ };
+
+ const getContainerHeight = (canClientSendMultipleMessages && body.grpc.length > 1) ? `${isCollapsed ? "" : "h-80"}` : "h-full"
+
+ return (
+
+
+
+ {isCollapsed ?
+ :
+
+ }
+ {`Message ${canClientStream ? index + 1 : ''}`}
+
+
e.stopPropagation()}>
+
+
+
+
+
+
+
+
+ {canClientStream && (
+
+
+
+ )}
+
+ {index > 0 && (
+
+
+
+ )}
+
+
+
+ {!isCollapsed && (
+
+
+
+ )}
+
+ )
+}
+
+const GrpcBody = ({ item, collection, handleRun }) => {
+ const preferences = useSelector((state) => state.app.preferences);
+ const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
+ const dispatch = useDispatch();
+ const [collapsedMessages, setCollapsedMessages] = useState([]);
+ const messagesContainerRef = useRef(null);
+ const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
+
+ const methodType = item.draft ? get(item, 'draft.request.methodType') : get(item, 'request.methodType');
+ const canClientSendMultipleMessages = methodType === 'client-streaming' || methodType === 'bidi-streaming';
+
+ // Auto-scroll to the latest message when messages are added
+ useEffect(() => {
+ if (messagesContainerRef.current && body?.grpc?.length > 0) {
+ const container = messagesContainerRef.current;
+ container.scrollTop = container.scrollHeight;
+ }
+ }, [body?.grpc?.length]);
+
+ const toggleMessageCollapse = (index) => {
+ setCollapsedMessages(prev => {
+ if (prev.includes(index)) {
+ return prev.filter(i => i !== index);
+ } else {
+ return [...prev, index];
+ }
+ });
+ };
+
+ const addNewMessage = () => {
+ const currentMessages = Array.isArray(body.grpc)
+ ? [...body.grpc]
+ : [];
+
+ currentMessages.push({
+ name: `message ${currentMessages.length + 1}`,
+ content: '{}'
+ });
+
+ dispatch(
+ updateRequestBody({
+ content: currentMessages,
+ itemUid: item.uid,
+ collectionUid: collection.uid
+ })
+ );
+ };
+
+
+ if (!body?.grpc || !Array.isArray(body.grpc)) {
+ return (
+
+
+
No gRPC messages available
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ {body.grpc
+ .filter((_, index) => canClientSendMultipleMessages || index === 0)
+ .map((message, index) => (
+ toggleMessageCollapse(index)}
+ handleRun={handleRun}
+ canClientSendMultipleMessages={canClientSendMultipleMessages}
+ />
+ ))}
+
+
+ {canClientSendMultipleMessages && (
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default GrpcBody;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js
new file mode 100644
index 000000000..64c29be51
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js
@@ -0,0 +1,119 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ height: 2.3rem;
+
+ .method-selector-container {
+ background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ }
+
+ .input-container {
+ background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+
+ input {
+ background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+ outline: none;
+ box-shadow: none;
+
+ &:focus {
+ outline: none !important;
+ box-shadow: none !important;
+ }
+ }
+ }
+
+ .caret {
+ color: rgb(140, 140, 140);
+ fill: rgb(140 140 140);
+ position: relative;
+ top: 1px;
+ }
+
+ .infotip {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+
+ .infotip:hover .infotip-text {
+ visibility: visible;
+ opacity: 1;
+ }
+
+ .infotip-text {
+ visibility: hidden;
+ width: auto;
+ background-color: ${(props) => props.theme.requestTabs.active.bg};
+ color: ${(props) => props.theme.text};
+ text-align: center;
+ border-radius: 4px;
+ padding: 4px 8px;
+ position: absolute;
+ z-index: 1;
+ bottom: 34px;
+ left: 50%;
+ transform: translateX(-50%);
+ opacity: 0;
+ transition: opacity 0.3s;
+ white-space: nowrap;
+ }
+
+ .infotip-text::after {
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ margin-left: -4px;
+ border-width: 4px;
+ border-style: solid;
+ border-color: ${(props) => props.theme.requestTabs.active.bg} transparent transparent transparent;
+ }
+
+ .shortcut {
+ font-size: 0.625rem;
+ }
+
+ @keyframes pulse {
+ 0% {
+ opacity: 0.4;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0.4;
+ }
+ }
+
+ .connection-status-strip {
+ animation: pulse 1.5s ease-in-out infinite;
+ background-color: ${(props) => props.theme.colors.text.green};
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ }
+
+ /* Method dropdown styling */
+ .method-dropdown {
+ margin-right: 8px;
+ position: relative;
+ z-index: 10;
+ }
+
+ .dropdown-item {
+ padding: 8px 12px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: ${(props) => props.theme.dropdown.hoverBg};
+ }
+ }
+`;
+
+export default Wrapper;
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js
new file mode 100644
index 000000000..150736ae3
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js
@@ -0,0 +1,1028 @@
+import React, { useState, useEffect, useRef, forwardRef, useCallback, useMemo } from 'react';
+import get from 'lodash/get';
+import { useDispatch, useSelector } from 'react-redux';
+import { requestUrlChanged, updateRequestMethod, updateRequestProtoPath } from 'providers/ReduxStore/slices/collections';
+import { saveRequest, browseFiles, loadGrpcMethodsFromReflection, openCollectionSettings, generateGrpcurlCommand } from 'providers/ReduxStore/slices/collections/actions';
+import { useTheme } from 'providers/Theme';
+import SingleLineEditor from 'components/SingleLineEditor/index';
+import { isMacOS } from 'utils/common/platform';
+import { getRelativePath, getBasename, getAbsoluteFilePath } from 'utils/common/path';
+import useLocalStorage from 'hooks/useLocalStorage/index';
+import StyledWrapper from './StyledWrapper';
+import ToggleSwitch from 'components/ToggleSwitch/index';
+import {
+ IconX,
+ IconCheck,
+ IconRefresh,
+ IconDeviceFloppy,
+ IconArrowRight,
+ IconCode,
+ IconFile,
+ IconChevronDown,
+ IconSettings,
+ IconAlertCircle,
+ IconCopy
+} from '@tabler/icons';
+import toast from 'react-hot-toast';
+import {
+ loadGrpcMethodsFromProtoFile,
+ cancelGrpcConnection,
+ endGrpcConnection
+} from 'utils/network/index';
+import Dropdown from 'components/Dropdown/index';
+import {
+ IconGrpcUnary,
+ IconGrpcClientStreaming,
+ IconGrpcServerStreaming,
+ IconGrpcBidiStreaming
+} from 'components/Icons/Grpc';
+import Modal from 'components/Modal/index';
+import CodeEditor from 'components/CodeEditor';
+import { debounce } from 'lodash';
+import { getPropertyFromDraftOrRequest } from 'utils/collections';
+import { existsSync } from 'utils/filesystem';
+
+// Constants for gRPC method types
+const STREAMING_METHOD_TYPES = ['client-streaming', 'server-streaming', 'bidi-streaming'];
+const CLIENT_STREAMING_METHOD_TYPES = ['client-streaming', 'bidi-streaming'];
+
+const GrpcurlModal = ({ isOpen, onClose, command }) => {
+ const { displayedTheme } = useTheme();
+ const [copied, setCopied] = useState(false);
+ const preferences = useSelector((state) => state.app.preferences);
+
+ const handleCopy = async () => {
+ try {
+ await navigator.clipboard.writeText(command);
+ setCopied(true);
+ toast.success('Command copied to clipboard');
+ setTimeout(() => setCopied(false), 2000);
+ } catch (error) {
+ toast.error('Failed to copy command');
+ }
+ };
+
+ return (
+
+ Generate gRPCurl Command
+ BETA
+
+ }
+ size="lg"
+ hideFooter={true}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const GrpcQueryUrl = ({ item, collection, handleRun }) => {
+ const { theme, storedTheme } = useTheme();
+ const dispatch = useDispatch();
+ const method = getPropertyFromDraftOrRequest(item, 'request.method');
+ const type = getPropertyFromDraftOrRequest(item, 'request.type');
+ const url = getPropertyFromDraftOrRequest(item, 'request.url', '');
+ const protoPath = getPropertyFromDraftOrRequest(item, 'request.protoPath');
+ const isMac = isMacOS();
+ const saveShortcut = isMac ? 'Cmd + S' : 'Ctrl + S';
+ const editorRef = useRef(null);
+ const isConnectionActive = useSelector((state) => state.collections.activeConnections.includes(item.uid));
+ const [protoFilePath, setProtoFilePath] = useState(protoPath);
+ const [grpcMethods, setGrpcMethods] = useState([]);
+ const [isLoadingMethods, setIsLoadingMethods] = useState(false);
+ const [selectedGrpcMethod, setSelectedGrpcMethod] = useState({
+ path: method,
+ type: type
+ });
+ const methodDropdownRef = useRef();
+ const protoDropdownRef = useRef();
+ const haveFetchedMethodsRef = useRef(false);
+ const [showGrpcurlModal, setShowGrpcurlModal] = useState(false);
+ const [grpcurlCommand, setGrpcurlCommand] = useState('');
+ const [isReflectionMode, setIsReflectionMode] = useState(false);
+ const collectionProtoFiles = get(collection, 'brunoConfig.grpc.protoFiles', []);
+ const [reflectionCache, setReflectionCache] = useLocalStorage('bruno.grpc.reflectionCache', {});
+ const [protofileCache, setProtofileCache] = useLocalStorage('bruno.grpc.protofileCache', {});
+ const fileExistsCache = useRef(new Map());
+ const [showProtoDropdown, setShowProtoDropdown] = useState(false);
+
+ const fileExists = useCallback(async (filePath) => {
+ if (!filePath) return false;
+
+ if (fileExistsCache.current.has(filePath)) {
+ return fileExistsCache.current.get(filePath);
+ }
+
+ try {
+ const absolutePath = getAbsoluteFilePath(filePath, collection.pathname);
+ const exists = await existsSync(absolutePath);
+ fileExistsCache.current.set(filePath, exists);
+ return exists;
+ } catch (error) {
+ console.error('Error checking if file exists:', error);
+ return false;
+ }
+ }, [collection.pathname]);
+
+ const [collectionProtoFilesExistence, setCollectionProtoFilesExistence] = useState([]);
+
+ useEffect(() => {
+ const fetchCollectionProtoFilesExistence = async () => {
+ if (!collectionProtoFiles) return;
+ const existence = await Promise.all(collectionProtoFiles.map(async (protoFile) => {
+ const absolutePath = getAbsoluteFilePath(protoFile.path, collection.pathname);
+ const exists = await fileExists(absolutePath)
+ return {
+ path: protoFile.path,
+ absolutePath,
+ exists
+ }
+ }));
+ setCollectionProtoFilesExistence(existence);
+ };
+ fetchCollectionProtoFilesExistence();
+ }, [fileExists]);
+
+ const invalidProtoFiles = useMemo(() => {
+ return collectionProtoFilesExistence.filter(file => !file.exists);
+ }, [collectionProtoFilesExistence]);
+
+ const currentProtoFileExists = useMemo(() => {
+ return fileExists(protoFilePath);
+ }, [protoFilePath, fileExists]);
+
+ const onMethodDropdownCreate = (ref) => (methodDropdownRef.current = ref);
+ const onProtoDropdownCreate = (ref) => (protoDropdownRef.current = ref);
+
+
+ const isStreamingMethod = selectedGrpcMethod && selectedGrpcMethod.type && STREAMING_METHOD_TYPES.includes(selectedGrpcMethod.type);
+ const isClientStreamingMethod = selectedGrpcMethod && selectedGrpcMethod.type && CLIENT_STREAMING_METHOD_TYPES.includes(selectedGrpcMethod.type);
+
+ const onSave = (finalValue) => {
+ dispatch(saveRequest(item.uid, collection.uid));
+ };
+
+ const onUrlChange = (value) => {
+ if (!editorRef.current?.editor) return;
+ const editor = editorRef.current.editor;
+ const cursor = editor.getCursor();
+
+ const finalUrl = value?.trim() || value;
+
+ dispatch(
+ requestUrlChanged({
+ itemUid: item.uid,
+ collectionUid: collection.uid,
+ url: finalUrl
+ })
+ );
+
+ // Restore cursor position only if URL was trimmed
+ if (finalUrl !== value) {
+ setTimeout(() => {
+ if (editor) {
+ editor.setCursor(cursor);
+ }
+ }, 0);
+ }
+
+ if(!protoFilePath && value) {
+ setIsReflectionMode(true);
+ handleReflection(finalUrl);
+ }
+ };
+
+ const onMethodSelect = ({ path, type }) => {
+ if (isConnectionActive) {
+ cancelGrpcConnection(item.uid)
+ .then(() => {
+ toast.success('gRPC connection cancelled');
+ })
+ .catch((err) => {
+ console.error('Failed to cancel gRPC connection:', err);
+ });
+ }
+
+ dispatch(
+ updateRequestMethod({
+ method: path,
+ methodType: type,
+ itemUid: item.uid,
+ collectionUid: collection.uid
+ })
+ );
+ };
+
+ const handleReflection = async (url, isManualRefresh = false) => {
+ if (!url) return;
+
+ const cachedMethods = reflectionCache[url];
+ if (!isManualRefresh && cachedMethods && !isLoadingMethods) {
+ setGrpcMethods(cachedMethods);
+ setProtoFilePath('');
+ setIsReflectionMode(true);
+ const isDuplicateSave = !item.request.protoPath;
+ if (!isDuplicateSave) {
+ dispatch(updateRequestProtoPath({
+ protoPath: '',
+ itemUid: item.uid,
+ collectionUid: collection.uid
+ }));
+ }
+
+ if (cachedMethods && cachedMethods.length > 0) {
+ const haveSelectedMethod =
+ selectedGrpcMethod && cachedMethods.some((method) => method.path === selectedGrpcMethod.path);
+ if (!haveSelectedMethod) {
+ setSelectedGrpcMethod(null);
+ onMethodSelect({ path: '', type: '' });
+ } else if (selectedGrpcMethod) {
+ // Update the method type for the currently selected method to ensure it matches
+ const currentMethod = cachedMethods.find((method) => method.path === selectedGrpcMethod.path);
+ if (currentMethod) {
+ const methodType = currentMethod.type;
+ setSelectedGrpcMethod({
+ path: selectedGrpcMethod.path,
+ type: methodType
+ });
+ }
+ }
+ return;
+ }
+ }
+
+ setIsLoadingMethods(true);
+ try {
+ const { methods, error } = await dispatch(loadGrpcMethodsFromReflection(item, collection.uid, url));
+
+ if (error) {
+ console.error('Error loading gRPC methods:', error);
+ toast.error(`Failed to load gRPC methods: ${error.message || 'Unknown error'}`);
+ return;
+ }
+
+ // Cache the methods for this URL
+ setReflectionCache(prevCache => ({
+ ...prevCache,
+ [url]: methods
+ }));
+
+ setGrpcMethods(methods);
+ setProtoFilePath('');
+ setIsReflectionMode(true);
+ const isDuplicateSave = !item.request.protoPath;
+ if (!isDuplicateSave) {
+ dispatch(updateRequestProtoPath({
+ protoPath: '',
+ itemUid: item.uid,
+ collectionUid: collection.uid
+ }));
+ }
+
+ if (methods && methods.length > 0) {
+ const haveSelectedMethod =
+ selectedGrpcMethod && methods.some((method) => method.path === selectedGrpcMethod.path);
+ if (!haveSelectedMethod) {
+ setSelectedGrpcMethod(null);
+ onMethodSelect({ path: '', type: '' });
+ } else if (selectedGrpcMethod) {
+ // Update the method type for the currently selected method to ensure it matches
+ const currentMethod = methods.find((method) => method.path === selectedGrpcMethod.path);
+ if (currentMethod) {
+ const methodType = currentMethod.type;
+ setSelectedGrpcMethod({
+ path: selectedGrpcMethod.path,
+ type: methodType
+ });
+ }
+ }
+ toast.success(`Loaded ${methods.length} gRPC methods from reflection`);
+ }
+ } catch (error) {
+ console.error('Error loading gRPC methods:', error);
+ toast.error('Failed to load gRPC methods from reflection');
+ } finally {
+ setIsLoadingMethods(false);
+ }
+ };
+
+ const handleGrpcurl = async (url) => {
+ if (!url) {
+ toast.error('Please enter a valid gRPC server URL');
+ return;
+ }
+
+ if (!selectedGrpcMethod?.path) {
+ toast.error('Please select a gRPC method');
+ return;
+ }
+
+ try {
+ const result = await dispatch(generateGrpcurlCommand(item, collection.uid));
+
+ if (result.success) {
+ setGrpcurlCommand(result.command);
+ setShowGrpcurlModal(true);
+ } else {
+ toast.error(result.error || 'Failed to generate grpcurl command');
+ }
+ } catch (error) {
+ console.error('Error generating grpcurl command:', error);
+ toast.error('Failed to generate grpcurl command');
+ }
+ };
+
+ // Add a new function to group methods by service
+ const groupMethodsByService = (methods) => {
+ if (!methods || !methods.length) return {};
+
+ const groupedMethods = {};
+
+ methods.forEach(method => {
+ // The format is "/service.ServiceName/MethodName"
+ const pathWithoutLeadingSlash = method.path.startsWith('/') ? method.path.slice(1) : method.path;
+ const parts = pathWithoutLeadingSlash.split('/');
+
+ // The service is the part before the last slash
+ const serviceName = parts[0] || 'Default';
+ // The method name is the part after the last slash
+ const methodName = parts[1] || method.path;
+
+ // Store the extracted method name for easier display
+ const enhancedMethod = {
+ ...method,
+ serviceName,
+ methodName
+ };
+
+ if (!groupedMethods[serviceName]) {
+ groupedMethods[serviceName] = [];
+ }
+
+ groupedMethods[serviceName].push(enhancedMethod);
+ });
+
+ return groupedMethods;
+ };
+
+ const MethodsDropdownIcon = forwardRef((props, ref) => {
+ return (
+
+ {selectedGrpcMethod &&
{getIconForMethodType(selectedGrpcMethod.type)}
}
+
+ {selectedGrpcMethod ? (
+
+ {selectedGrpcMethod.path.split('.').at(-1) || selectedGrpcMethod.path}
+
+ ) : (
+ Select Method
+ )}
+
+
+
+ );
+ });
+
+ const ProtoFileDropdownIcon = forwardRef((props, ref) => {
+ return (
+
setShowProtoDropdown(prev => !prev)}>
+ {isReflectionMode ? (<>
+ ) : (
+
+ )}
+
+ {isReflectionMode ? 'Using Reflection' : (protoFilePath ? getBasename(protoFilePath) : 'Select Proto File')}
+
+
+
+ );
+ });
+
+ const handleGrpcMethodSelect = (method) => {
+ const methodType = method.type
+ setSelectedGrpcMethod({
+ path: method.path,
+ type: methodType
+ });
+ onMethodSelect({ path: method.path, type: methodType });
+ };
+
+ const getIconForMethodType = (type) => {
+ switch (type) {
+ case 'unary':
+ return
;
+ case 'client-streaming':
+ return
;
+ case 'server-streaming':
+ return
;
+ case 'bidi-streaming':
+ return
;
+ default:
+ return
;
+ }
+ };
+
+ const handleCancelConnection = (e) => {
+ e.stopPropagation();
+
+ cancelGrpcConnection(item.uid)
+ .then(() => {
+ toast.success('gRPC connection cancelled');
+ })
+ .catch((err) => {
+ console.error('Failed to cancel gRPC connection:', err);
+ toast.error('Failed to cancel gRPC connection');
+ });
+ };
+
+ const handleEndConnection = (e) => {
+ e.stopPropagation();
+
+ endGrpcConnection(item.uid)
+ .then(() => {
+ toast.success('gRPC stream ended');
+ })
+ .catch((err) => {
+ console.error('Failed to end gRPC stream:', err);
+ toast.error('Failed to end gRPC stream');
+ });
+ };
+
+ const handleSelectCollectionProtoFile = (protoFile) => {
+ try {
+ if (!protoFile) {
+ toast.error('No proto file selected');
+ return;
+ }
+
+ // Get the absolute path from the relative path
+ const absolutePath = protoFile.absolutePath;
+
+ if (!protoFile.exists) {
+ toast.error(`Proto file not found: ${protoFile.path}`);
+ return;
+ }
+
+ setProtoFilePath(protoFile.path);
+ setIsReflectionMode(false);
+
+ dispatch(updateRequestProtoPath({
+ protoPath: protoFile.path,
+ itemUid: item.uid,
+ collectionUid: collection.uid
+ }));
+
+ loadMethodsFromProtoFile(absolutePath);
+ } catch (error) {
+ console.error('Error selecting collection proto file:', error);
+ toast.error('Failed to select collection proto file');
+ }
+ };
+
+ const handleResetProtoFile = () => {
+ setProtoFilePath('');
+ setIsReflectionMode(true);
+ const isDuplicateSave = !item.request.protoPath;
+ if (!isDuplicateSave) {
+ dispatch(updateRequestProtoPath({
+ protoPath: '',
+ itemUid: item.uid,
+ collectionUid: collection.uid
+ }));
+ }
+ setGrpcMethods([]);
+ setSelectedGrpcMethod(null);
+ onMethodSelect({ path: '', type: '' });
+ toast.success('Proto file reset');
+ };
+
+ const loadMethodsFromProtoFile = async (filePath, isManualRefresh = false) => {
+ if (!filePath) {
+ toast.error('No proto file selected');
+ return;
+ };
+ const absolutePath = getAbsoluteFilePath(filePath, collection.pathname);
+
+ // Check if we have cached methods for this proto file
+ const cachedMethods = protofileCache[absolutePath];
+ if (cachedMethods && !isLoadingMethods && !isManualRefresh) {
+ setGrpcMethods(cachedMethods);
+
+ if (cachedMethods && cachedMethods.length > 0) {
+ // Check if currently selected method is still valid
+ const haveSelectedMethod =
+ selectedGrpcMethod && cachedMethods.some((method) => method.path === selectedGrpcMethod.path);
+ if (!haveSelectedMethod) {
+ setSelectedGrpcMethod(null);
+ onMethodSelect({ path: '', type: '' });
+ } else {
+ // Update the method type for the currently selected method to ensure it matches
+ const currentMethod = cachedMethods.find((method) => method.path === selectedGrpcMethod.path);
+ if (currentMethod) {
+ const methodType = currentMethod.type;
+ setSelectedGrpcMethod({
+ path: selectedGrpcMethod.path,
+ type: methodType
+ });
+ }
+ }
+ }
+ return;
+ }
+
+ setIsLoadingMethods(true);
+ try {
+ const { methods, error } = await loadGrpcMethodsFromProtoFile(absolutePath);
+
+ if (error) {
+ console.error('Error loading gRPC methods:', error);
+ toast.error(`Failed to load gRPC methods: ${error.message || 'Unknown error'}`);
+ return;
+ }
+
+ // Cache the methods for this proto file
+ setProtofileCache(prevCache => ({
+ ...prevCache,
+ [absolutePath]: methods
+ }));
+
+ setGrpcMethods(methods);
+
+ if (methods && methods.length > 0) {
+ toast.success(`Loaded ${methods.length} gRPC methods from proto file`);
+
+ // Check if currently selected method is still valid
+ const haveSelectedMethod =
+ selectedGrpcMethod && methods.some((method) => method.path === selectedGrpcMethod.path);
+ if (!haveSelectedMethod) {
+ setSelectedGrpcMethod(null);
+ onMethodSelect({ path: '', type: '' });
+ } else {
+ // Update the method type for the currently selected method to ensure it matches
+ const currentMethod = methods.find((method) => method.path === selectedGrpcMethod.path);
+ if (currentMethod) {
+ const methodType = currentMethod.type;
+ setSelectedGrpcMethod({
+ path: selectedGrpcMethod.path,
+ type: methodType
+ });
+ }
+ }
+ } else {
+ toast.warning('No gRPC methods found in proto file');
+ }
+ } catch (err) {
+ console.error('Error loading gRPC methods:', err);
+ toast.error('Failed to load gRPC methods from proto file');
+ } finally {
+ setIsLoadingMethods(false);
+ }
+ };
+
+ const handleSelectProtoFile = (e) => {
+ e.stopPropagation();
+ const filters = [{ name: 'Proto Files', extensions: ['proto'] }];
+
+ dispatch(browseFiles(filters, ['']))
+ .then((filePaths) => {
+ if (filePaths && filePaths.length > 0) {
+ const filePath = filePaths[0];
+ const relativePath = getRelativePath(filePath, collection.pathname);
+ setProtoFilePath(relativePath);
+ setIsReflectionMode(false);
+
+ dispatch(updateRequestProtoPath({
+ protoPath: relativePath,
+ itemUid: item.uid,
+ collectionUid: collection.uid
+ }));
+
+ // Load methods from the newly selected proto file
+ const absolutePath = getAbsoluteFilePath(relativePath, collection.pathname);
+ loadMethodsFromProtoFile(absolutePath);
+ }
+ })
+ .catch((err) => {
+ console.error('Error selecting proto file:', err);
+ toast.error('Failed to select proto file');
+ });
+ };
+
+ const handleOpenCollectionGrpc = () => {
+ dispatch(openCollectionSettings(collection.uid, 'grpc'));
+ };
+
+ const debouncedOnUrlChange = debounce(onUrlChange, 1000);
+
+ useEffect(() => {
+ fileExistsCache.current.clear();
+ }, [collection.pathname]);
+
+ useEffect(() => {
+ if(haveFetchedMethodsRef.current) {
+ return;
+ }
+ haveFetchedMethodsRef.current = true;
+
+ if(protoFilePath) {
+ setIsReflectionMode(false);
+ loadMethodsFromProtoFile(protoFilePath);
+ return;
+ }
+ if (!url) return;
+ setIsReflectionMode(true);
+ handleReflection(url);
+
+ }, []);
+
+ return (
+
+
+
+
onSave(finalValue)}
+ theme={storedTheme}
+ onChange={(newValue) => debouncedOnUrlChange(newValue)}
+ onRun={handleRun}
+ collection={collection}
+ highlightPathParams={true}
+ item={item}
+ />
+
+ {grpcMethods && grpcMethods.length > 0 && (
+
+
} placement="bottom-end" style={{ maxWidth: "unset" }}>
+
+ {Object.entries(groupMethodsByService(grpcMethods)).map(([serviceName, methods], serviceIndex) => (
+
+
+ {serviceName || 'Default Service'}
+
+
+ {methods.map((method, methodIndex) => (
+
handleGrpcMethodSelect(method)}
+ >
+
+
{getIconForMethodType(method.type)}
+
+
{method.methodName}
+
{method.type}
+
+
+
+ ))}
+
+
+ ))}
+
+
+
+
+
}
+ placement="bottom-end"
+ visible={showProtoDropdown}
+ onClickOutside={() => setShowProtoDropdown(false)}
+ >
+
+
+
{isReflectionMode ? "Using Reflection" : "Select Proto File"}
+
+
+ {/* Mode Toggle */}
+
+
+
Mode
+
+
+ Proto File
+
+ {
+ e.stopPropagation();
+ e.preventDefault();
+ setIsReflectionMode(!isReflectionMode);
+ if (!isReflectionMode) {
+ // Switching to reflection mode
+ setProtoFilePath('');
+ dispatch(updateRequestProtoPath({
+ protoPath: '',
+ itemUid: item.uid,
+ collectionUid: collection.uid
+ }));
+ if (url) {
+ handleReflection(url);
+ }
+ } else {
+ // Switching to proto file mode
+ setGrpcMethods([]);
+ setSelectedGrpcMethod(null);
+ onMethodSelect({ path: '', type: '' });
+ }
+ }}
+ size="2xs"
+ />
+
+ Reflection
+
+
+
+
+
+ {!isReflectionMode && (
+ <>
+ {collectionProtoFiles && collectionProtoFiles.length > 0 && (
+
+
+
From Collection Settings
+
+
+
+ {invalidProtoFiles.length > 0 && (
+
+
+
+ Some proto files could not be found.
+
+
+ )}
+
+
+ {collectionProtoFilesExistence.map((protoFile, index) => {
+ const isSelected = protoFilePath === protoFile.absolutePath;
+ const isInvalid = !protoFile.exists;
+
+ return (
+
{
+ if (!isInvalid) {
+ setShowProtoDropdown(false);
+ handleSelectCollectionProtoFile(protoFile);
+ }
+ }}
+ >
+
+
+
+
+
+ {getBasename(protoFile.absolutePath)}
+ {isInvalid && (
+
+
+
+ )}
+
+
{protoFile.path}
+
+
+
+
+ );
+ })}
+
+
+ )}
+
+ {collectionProtoFiles && collectionProtoFiles.length > 0 && (
+
+ )}
+
+ {protoFilePath && !collectionProtoFilesExistence.some(pf =>
+ pf.absolutePath === protoFilePath
+ ) && (
+
+
Current Proto File
+ {!currentProtoFileExists && (
+
+
+
+ Selected proto file not found. Please select a valid proto file from collection settings or browse for a new one.
+
+
+ )}
+
+
+
+
+
+
+ {getBasename(protoFilePath)}
+ {!currentProtoFileExists && (
+
+
+
+ )}
+
+
{protoFilePath}
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ )}
+
+ {isReflectionMode && (
+
+
+ Using server reflection to discover gRPC methods.
+
+
+ )}
+
+
+
+
+
{
+ e.stopPropagation();
+ if (isReflectionMode) {
+ handleReflection(url, true);
+ } else if (protoFilePath) {
+ loadMethodsFromProtoFile(protoFilePath, true);
+ } else {
+ toast.error('No proto file selected');
+ }
+ }}
+ >
+
+
+ {isReflectionMode ? 'Refresh server reflection' : 'Refresh proto file methods'}
+
+
+
+
{
+ e.stopPropagation();
+ handleGrpcurl(url);
+ }}
+ >
+
+ Generate grpcurl command
+
+
+
{
+ e.stopPropagation();
+ if (!item.draft) return;
+ onSave();
+ }}
+ >
+
+
+ Save ({saveShortcut})
+
+
+
+ {isConnectionActive && isStreamingMethod && (
+
+
+
+ Cancel
+
+
+ {isClientStreamingMethod &&
+
+
}
+
+ )}
+
+ {(!isConnectionActive || !isStreamingMethod) && (
+
{
+ e.stopPropagation();
+ handleRun(e);
+ }}
+ >
+
+
+ )}
+
+ );
+};
+
+export default GrpcQueryUrl;
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/GrpcAuthMode/index.js b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/GrpcAuthMode/index.js
new file mode 100644
index 000000000..3b95b708f
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/GrpcAuthMode/index.js
@@ -0,0 +1,85 @@
+import React, { useRef, forwardRef } from 'react';
+import get from 'lodash/get';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import { useDispatch } from 'react-redux';
+import { updateRequestAuthMode } from 'providers/ReduxStore/slices/collections';
+import { humanizeRequestAuthMode } from 'utils/collections';
+import StyledWrapper from '../../../Auth/AuthMode/StyledWrapper';
+
+const GrpcAuthMode = ({ item, collection }) => {
+ const dispatch = useDispatch();
+ const dropdownTippyRef = useRef();
+ const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
+ const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
+
+ const authModes = [
+ {
+ name: 'Basic Auth',
+ mode: 'basic'
+ },
+ {
+ name: 'Bearer Token',
+ mode: 'bearer'
+ },
+ {
+ name: 'API Key',
+ mode: 'apikey'
+ },
+ {
+ name: 'OAuth2',
+ mode: 'oauth2'
+ },
+ {
+ name: 'Inherit',
+ mode: 'inherit'
+ },
+ {
+ name: 'No Auth',
+ mode: 'none'
+ }
+ ];
+
+ const Icon = forwardRef((props, ref) => {
+ return (
+
+ {humanizeRequestAuthMode(authMode)}
+
+ );
+ });
+
+ const onModeChange = (value) => {
+ dispatch(
+ updateRequestAuthMode({
+ itemUid: item.uid,
+ collectionUid: collection.uid,
+ mode: value
+ })
+ );
+ };
+
+ const onClickHandler = (mode) => {
+ dropdownTippyRef?.current?.hide();
+ onModeChange(mode);
+ };
+
+ return (
+
+
+
} placement="bottom-end">
+ {authModes.map((authMode) => (
+
onClickHandler(authMode.mode)}
+ >
+ {authMode.name}
+
+ ))}
+
+
+ );
+};
+
+export default GrpcAuthMode;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.js
new file mode 100644
index 000000000..f76b0d9a4
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.js
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ .inherit-mode-text {
+ color: ${(props) => props.theme.colors.text.yellow};
+ }
+`;
+
+export default Wrapper;
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/index.js b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/index.js
new file mode 100644
index 000000000..b30be89e5
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/index.js
@@ -0,0 +1,125 @@
+import React, { useEffect } from 'react';
+import get from 'lodash/get';
+import { useDispatch } from 'react-redux';
+import GrpcAuthMode from './GrpcAuthMode';
+import BearerAuth from '../../Auth/BearerAuth';
+import BasicAuth from '../../Auth/BasicAuth';
+import ApiKeyAuth from '../../Auth/ApiKeyAuth';
+import OAuth2 from '../../Auth/OAuth2/index';
+import StyledWrapper from './StyledWrapper';
+import { humanizeRequestAuthMode } from 'utils/collections';
+import { getTreePathFromCollectionToItem } from 'utils/collections/index';
+import { updateRequestAuthMode, updateAuth } from 'providers/ReduxStore/slices/collections';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+
+// List of auth modes supported by gRPC
+const supportedGrpcAuthModes = ['basic', 'bearer', 'apikey', 'oauth2', 'none', 'inherit'];
+
+const GrpcAuth = ({ item, collection }) => {
+ const dispatch = useDispatch();
+ const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
+ const requestTreePath = getTreePathFromCollectionToItem(collection, item);
+
+ const request = item.draft
+ ? get(item, 'draft.request', {})
+ : get(item, 'request', {});
+
+ const save = () => {
+ return saveRequest(item.uid, collection.uid);
+ };
+
+ // Reset to 'none' if current auth mode is not supported by gRPC
+ useEffect(() => {
+ if (authMode && !supportedGrpcAuthModes.includes(authMode)) {
+ dispatch(
+ updateRequestAuthMode({
+ itemUid: item.uid,
+ collectionUid: collection.uid,
+ mode: 'none'
+ })
+ );
+ }
+ }, [authMode, collection.uid, dispatch, item.uid]);
+
+ const getEffectiveAuthSource = () => {
+ if (authMode !== 'inherit') return null;
+
+ const collectionAuth = get(collection, 'root.request.auth');
+ let effectiveSource = {
+ type: 'collection',
+ name: 'Collection',
+ auth: collectionAuth
+ };
+
+ // Check folders in reverse to find the closest auth configuration
+ for (let i of [...requestTreePath].reverse()) {
+ if (i.type === 'folder') {
+ const folderAuth = get(i, 'root.request.auth');
+ if (folderAuth && folderAuth.mode && folderAuth.mode !== 'none' && folderAuth.mode !== 'inherit') {
+ effectiveSource = {
+ type: 'folder',
+ name: i.name,
+ auth: folderAuth
+ };
+ break;
+ }
+ }
+ }
+
+ return effectiveSource;
+ };
+
+ const getAuthView = () => {
+ switch (authMode) {
+ case 'basic': {
+ return
;
+ }
+ case 'bearer': {
+ return
;
+ }
+ case 'apikey': {
+ return
;
+ }
+ case 'oauth2': {
+ return
;
+ }
+ case 'inherit': {
+ const source = getEffectiveAuthSource();
+
+ // Only show inherited auth if it's one of the supported types
+ if (source && supportedGrpcAuthModes.includes(source.auth?.mode)) {
+ return (
+ <>
+
+
Auth inherited from {source.name}:
+
{humanizeRequestAuthMode(source.auth?.mode)}
+
+
+ );
+ } else {
+ return (
+ <>
+
+
Inherited auth not supported by gRPC. Using no auth instead.
+
+
+ );
+ }
+ }
+ default: {
+ return null;
+ }
+ }
+ };
+
+ return (
+
+
+
+
+ {getAuthView()}
+
+ );
+};
+
+export default GrpcAuth;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js
new file mode 100644
index 000000000..e6a766672
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js
@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+ div.tabs {
+ div.tab {
+ padding: 6px 0px;
+ border: none;
+ border-bottom: solid 2px transparent;
+ margin-right: 1.25rem;
+ color: var(--color-tab-inactive);
+ cursor: pointer;
+
+ &:focus,
+ &:active,
+ &:focus-within,
+ &:focus-visible,
+ &:target {
+ outline: none !important;
+ box-shadow: none !important;
+ }
+
+ &.active {
+ color: ${(props) => props.theme.tabs.active.color} !important;
+ border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
+ }
+
+ .content-indicator {
+ color: ${(props) => props.theme.text}
+ }
+ }
+ }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/index.js
new file mode 100644
index 000000000..ef961b79d
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/index.js
@@ -0,0 +1,124 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useSelector, useDispatch } from 'react-redux';
+import { updateRequestPaneTab } from 'providers/ReduxStore/slices/tabs';
+import RequestHeaders from 'components/RequestPane/RequestHeaders';
+import GrpcBody from 'components/RequestPane/GrpcBody';
+import GrpcAuth from './GrpcAuth/index';
+import StatusDot from 'components/StatusDot/index';
+import HeightBoundContainer from 'ui/HeightBoundContainer';
+import StyledWrapper from './StyledWrapper';
+import { find, get } from 'lodash';
+import Documentation from 'components/Documentation/index';
+import { useEffect } from 'react';
+import { getPropertyFromDraftOrRequest } from 'utils/collections/index';
+
+const GrpcRequestPane = ({ item, collection, handleRun }) => {
+ const dispatch = useDispatch();
+ const tabs = useSelector((state) => state.tabs.tabs);
+ const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
+
+ const selectTab = (tab) => {
+ dispatch(
+ updateRequestPaneTab({
+ uid: item.uid,
+ requestPaneTab: tab
+ })
+ );
+ };
+
+ const getTabPanel = (tab) => {
+ switch (tab) {
+ case 'body': {
+ return
;
+ }
+ case 'headers': {
+ return ;
+ }
+ case 'auth': {
+ return ;
+ }
+ case 'docs': {
+ return ;
+ }
+ default: {
+ return 404 | Not found
;
+ }
+ }
+ };
+
+ if (!activeTabUid) {
+ return Something went wrong
;
+ }
+
+ const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
+ if (!focusedTab || !focusedTab.uid || !focusedTab.requestPaneTab) {
+ return An error occurred!
;
+ }
+
+ const getTabClassname = (tabName) => {
+ return classnames(`tab select-none ${tabName}`, {
+ active: tabName === focusedTab.requestPaneTab
+ });
+ };
+
+ const isMultipleContentTab = ['script', 'vars', 'auth', 'docs'].includes(focusedTab.requestPaneTab);
+ const body = getPropertyFromDraftOrRequest(item, 'request.body');
+ const headers = getPropertyFromDraftOrRequest(item, 'request.headers');
+ const docs = getPropertyFromDraftOrRequest(item, 'request.docs');
+ const auth = getPropertyFromDraftOrRequest(item, 'request.auth');
+
+ const activeHeadersLength = headers.filter((header) => header.enabled).length;
+ const grpcMessagesCount = body?.grpc?.length || 0;
+
+ // Determine if this is a client streaming request
+ const request = item.draft ? item.draft.request : item.request;
+ const isClientStreaming = request.methodType === 'client-streaming' || request.methodType === 'bidi-streaming';
+
+ useEffect(() => {
+ // Only set the tab to 'body' if no tab is currently set
+ if (!focusedTab?.requestPaneTab) {
+ selectTab('body');
+ }
+ }, []);
+
+ return (
+
+
+
selectTab('body')}>
+ Message
+ {grpcMessagesCount > 0 && (
+ isClientStreaming ? (
+ {grpcMessagesCount}
+ ) : (
+
+ )
+ )}
+
+
selectTab('headers')}>
+ Metadata
+ {activeHeadersLength > 0 && {activeHeadersLength}}
+
+
selectTab('auth')}>
+ Auth
+ {auth.mode !== 'none' && }
+
+
selectTab('docs')}>
+ Docs
+ {docs && docs.length > 0 && }
+
+
-
+ {isGrpc ? (
+
+ gRPC
+
+
+ ) : (
+
+ )}
{
} placement="bottom-end">
-
Form
-
{
- dropdownTippyRef.current.hide();
- onModeChange('multipartForm');
- }}
- >
- Multipart Form
-
-
{
- dropdownTippyRef.current.hide();
- onModeChange('formUrlEncoded');
- }}
- >
- Form URL Encoded
-
-
Raw
-
{
- dropdownTippyRef.current.hide();
- onModeChange('json');
- }}
- >
- JSON
-
-
{
- dropdownTippyRef.current.hide();
- onModeChange('xml');
- }}
- >
- XML
-
-
{
- dropdownTippyRef.current.hide();
- onModeChange('text');
- }}
- >
- TEXT
-
-
{
- dropdownTippyRef.current.hide();
- onModeChange('sparql');
- }}
- >
- SPARQL
-
-
Other
-
{
- dropdownTippyRef.current.hide();
- onModeChange('file');
- }}
- >
- File / Binary
-
-
{
- dropdownTippyRef.current.hide();
- onModeChange('none');
- }}
- >
- No Body
-
+
Form
+
{
+ dropdownTippyRef.current.hide();
+ onModeChange('multipartForm');
+ }}
+ >
+ Multipart Form
+
+
{
+ dropdownTippyRef.current.hide();
+ onModeChange('formUrlEncoded');
+ }}
+ >
+ Form URL Encoded
+
+
Raw
+
{
+ dropdownTippyRef.current.hide();
+ onModeChange('json');
+ }}
+ >
+ JSON
+
+
{
+ dropdownTippyRef.current.hide();
+ onModeChange('xml');
+ }}
+ >
+ XML
+
+
{
+ dropdownTippyRef.current.hide();
+ onModeChange('text');
+ }}
+ >
+ TEXT
+
+
{
+ dropdownTippyRef.current.hide();
+ onModeChange('sparql');
+ }}
+ >
+ SPARQL
+
+
Other
+
{
+ dropdownTippyRef.current.hide();
+ onModeChange('file');
+ }}
+ >
+ File / Binary
+
+
{
+ dropdownTippyRef.current.hide();
+ onModeChange('none');
+ }}
+ >
+ No Body
+
{(bodyMode === 'json' || bodyMode === 'xml') && (
diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
index d562684e5..fdc674ae6 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
@@ -79,4 +79,4 @@ const RequestBody = ({ item, collection }) => {
return No Body;
};
-export default RequestBody;
+export default RequestBody;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
index ddcc62af2..930a056f9 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js
@@ -16,7 +16,7 @@ import BulkEditor from '../../BulkEditor';
const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
-const RequestHeaders = ({ item, collection }) => {
+const RequestHeaders = ({ item, collection, addHeaderText }) => {
const dispatch = useDispatch();
const { storedTheme } = useTheme();
const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
@@ -181,7 +181,7 @@ const RequestHeaders = ({ item, collection }) => {
-
+ {item.type === 'grpc-request' ? (
+
+ ) : (
+
+ )}
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
index 816b00e25..fe574fdaa 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -22,6 +22,7 @@ import { flattenItems } from 'utils/collections/index';
const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUid }) => {
const dispatch = useDispatch();
const { storedTheme } = useTheme();
+ const theme = storedTheme === 'dark' ? darkTheme : lightTheme;
const [showConfirmClose, setShowConfirmClose] = useState(false);
const dropdownTippyRef = useRef();
@@ -65,10 +66,10 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
};
const getMethodColor = (method = '') => {
- const theme = storedTheme === 'dark' ? darkTheme : lightTheme;
return theme.request.methods[method.toLocaleLowerCase()];
};
+
const folder = folderUid ? findItemInCollection(collection, folderUid) : null;
if (['collection-settings', 'collection-overview', 'folder-settings', 'variables', 'collection-runner', 'security-settings'].includes(tab.type)) {
return (
@@ -107,6 +108,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
);
}
+ const isGrpc = item.type === 'grpc-request';
const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
return (
@@ -159,8 +161,8 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
}
}}
>
-
- {method}
+
+ {isGrpc ? 'gRPC' : method}
{item.name}
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js
new file mode 100644
index 000000000..f302b86dd
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+ border-left: 4px solid ${(props) => props.theme.colors.text.danger};
+ border-top: 1px solid transparent;
+ border-right: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ border-radius: 0.375rem;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ max-height: 200px;
+ min-height: 70px;
+ overflow-y: auto;
+ background-color: ${(props) => (props.theme.bg === '#1e1e1e' ? 'rgba(40, 40, 40, 0.5)' : 'rgba(250, 250, 250, 0.9)')};
+
+ .close-button {
+ opacity: 0.7;
+ transition: opacity 0.2s;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ svg {
+ color: ${(props) => props.theme.text};
+ }
+ }
+
+ .error-title {
+ font-weight: 600;
+ margin-bottom: 0.375rem;
+ color: ${(props) => props.theme.colors.text.danger};
+ }
+
+ .error-message {
+ font-family: monospace;
+ font-size: 0.6875rem;
+ line-height: 1.25rem;
+ white-space: pre-wrap;
+ word-break: break-all;
+ color: ${(props) => props.theme.text};
+ }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/index.js
new file mode 100644
index 000000000..d2376401d
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { IconX } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const GrpcError = ({ error, onClose }) => {
+ if (!error) return null;
+
+ return (
+
+
+
+
gRPC Server Error
+
{typeof error === 'string' ? error : JSON.stringify(error, null, 2)}
+
+
+
+
+
No messages received
+
+ );
+ }
+
+ return (
+
+ {hasError && showErrorMessage && setShowErrorMessage(false)} />}
+ {hasResponses && (
+
+ {responsesList.length === 1 ? (
+ // Single message - render directly without accordion
+
+
+
+ ) : (
+ // Multiple messages - use accordion
+
+ {reversedResponsesList.map((response, index) => {
+ // Calculate the original response number (for display purposes)
+ const originalIndex = responsesList.length - index - 1;
+
+ return (
+
+
+
+
+ Response {originalIndex + 1} {index === 0 ? '(Latest)' : ''}
+
+
+
+
+
+
+ );
+ })}
+
+ )}
+
+ No messages received. A server error occurred but has been dismissed.
+
+ )}
+
+ );
+};
+
+export default GrpcQueryResult;
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js
new file mode 100644
index 000000000..d42e77f7f
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+ table {
+ width: 100%;
+ border-collapse: collapse;
+
+ thead {
+ color: #777777;
+ font-size: 0.75rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ }
+
+ td {
+ padding: 6px 10px;
+
+ &.value {
+ word-break: break-all;
+ }
+ }
+
+ tbody {
+ tr:nth-child(odd) {
+ background-color: ${(props) => props.theme.table.striped};
+ }
+ }
+ }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/index.js
new file mode 100644
index 000000000..a7390558d
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+
+const GrpcResponseHeaders = ({ metadata }) => {
+ // Ensure headers is an array
+ const metadataArray = Array.isArray(metadata) ? metadata : [];
+
+ return (
+
+
+
+
+ | Name |
+ Value |
+
+
+
+ {metadataArray && metadataArray.length ? (
+ metadataArray.map((metadata, index) => (
+
+ | {metadata.name} |
+ {metadata.value} |
+
+ ))
+ ) : (
+
+ |
+ No metadata received
+ |
+
+ )}
+
+
+
+ );
+};
+
+export default GrpcResponseHeaders;
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/StyledWrapper.js
new file mode 100644
index 000000000..bed367559
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/StyledWrapper.js
@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+ font-size: 0.75rem;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+
+ &.text-ok {
+ color: ${(props) => props.theme.requestTabPanel.responseOk};
+ }
+
+ &.text-pending {
+ color: ${(props) => props.theme.requestTabPanel.responsePending};
+ }
+
+ &.text-error {
+ color: ${(props) => props.theme.requestTabPanel.responseError};
+ }
+`;
+
+export default Wrapper;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/get-grpc-status-code-phrase.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/get-grpc-status-code-phrase.js
new file mode 100644
index 000000000..a8c96e645
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/get-grpc-status-code-phrase.js
@@ -0,0 +1,22 @@
+// https://grpc.github.io/grpc/core/md_doc_statuscodes.html
+const grpcStatusCodePhraseMap = {
+ 0: 'OK',
+ 1: 'Cancelled',
+ 2: 'Unknown',
+ 3: 'Invalid Argument',
+ 4: 'Deadline Exceeded',
+ 5: 'Not Found',
+ 6: 'Already Exists',
+ 7: 'Permission Denied',
+ 8: 'Resource Exhausted',
+ 9: 'Failed Precondition',
+ 10: 'Aborted',
+ 11: 'Out of Range',
+ 12: 'Unimplemented',
+ 13: 'Internal',
+ 14: 'Unavailable',
+ 15: 'Data Loss',
+ 16: 'Unauthenticated'
+};
+
+export default grpcStatusCodePhraseMap;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/index.js
new file mode 100644
index 000000000..af4f10db6
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcStatusCode/index.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import classnames from 'classnames';
+import grpcStatusCodePhraseMap from './get-grpc-status-code-phrase';
+import StyledWrapper from './StyledWrapper';
+
+const GrpcStatusCode = ({ status, text }) => {
+ // gRPC status codes: 0 is success, anything else is an error
+ const getTabClassname = (status) => {
+ const isPending = text === 'PENDING' || text === 'STREAMING';
+ return classnames('ml-2', {
+ 'text-ok': parseInt(status) === 0,
+ 'text-pending': isPending,
+ 'text-error': parseInt(status) > 0 && !isPending
+ });
+ };
+
+ const statusText = text || grpcStatusCodePhraseMap[status]
+
+ return (
+
+ {Number.isInteger(status) ? {status}
: null}
+ {statusText && {statusText}
}
+
+ );
+};
+
+export default GrpcStatusCode;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js
new file mode 100644
index 000000000..d42e77f7f
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+ table {
+ width: 100%;
+ border-collapse: collapse;
+
+ thead {
+ color: #777777;
+ font-size: 0.75rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ }
+
+ td {
+ padding: 6px 10px;
+
+ &.value {
+ word-break: break-all;
+ }
+ }
+
+ tbody {
+ tr:nth-child(odd) {
+ background-color: ${(props) => props.theme.table.striped};
+ }
+ }
+ }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/index.js
new file mode 100644
index 000000000..7df1f5b45
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/index.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseTrailers = ({ trailers }) => {
+ const trailersArray = Array.isArray(trailers) ? trailers : [];
+
+ return (
+
+
+
+
+ | Name |
+ Value |
+
+
+
+ {trailersArray && trailersArray.length ? (
+ trailersArray.map((trailer, index) => (
+
+ | {trailer.name} |
+ {trailer.value} |
+
+ ))
+ ) : (
+
+ |
+ No trailers received
+ |
+
+ )}
+
+
+
+ );
+};
+
+export default ResponseTrailers;
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
new file mode 100644
index 000000000..e4e358af4
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+ height: 100%;
+ overflow: hidden;
+ background: ${(props) => props.theme.bg};
+ border-radius: 4px;
+
+ div.tabs {
+ div.tab {
+ padding: 6px 0px;
+ border: none;
+ border-bottom: solid 2px transparent;
+ margin-right: 1.25rem;
+ color: var(--color-tab-inactive);
+ cursor: pointer;
+
+ &:focus,
+ &:active,
+ &:focus-within,
+ &:focus-visible,
+ &:target {
+ outline: none !important;
+ box-shadow: none !important;
+ }
+
+ &.active {
+ color: ${(props) => props.theme.tabs.active.color} !important;
+ border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
+ }
+ }
+ }
+
+ .stream-status {
+ display: inline-flex;
+ align-items: center;
+
+ &.complete {
+ color: ${(props) => props.theme.colors.text.green};
+ }
+
+ &.cancelled {
+ color: ${(props) => props.theme.colors.text.danger};
+ }
+
+ &.streaming {
+ color: ${(props) => props.theme.colors.text.blue};
+ }
+ }
+
+ .message-counter {
+ display: inline-flex;
+ align-items: center;
+ margin-left: 10px;
+ }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/index.js
new file mode 100644
index 000000000..81ab5bc1e
--- /dev/null
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/index.js
@@ -0,0 +1,160 @@
+import React, { useState, useEffect } from 'react';
+import find from 'lodash/find';
+import classnames from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs';
+import Overlay from '../Overlay';
+import Placeholder from '../Placeholder';
+import GrpcResponseHeaders from './GrpcResponseHeaders';
+import GrpcStatusCode from './GrpcStatusCode';
+import ResponseTime from '../ResponseTime/index';
+import Timeline from '../Timeline';
+import ClearTimeline from '../ClearTimeline';
+import ResponseSave from '../ResponseSave';
+import ResponseClear from '../ResponseClear';
+import StyledWrapper from './StyledWrapper';
+import ResponseTrailers from './ResponseTrailers';
+import GrpcQueryResult from './GrpcQueryResult';
+import ResponseLayoutToggle from '../ResponseLayoutToggle';
+import Tab from 'components/Tab';
+
+const GrpcResponsePane = ({ item, collection }) => {
+ const dispatch = useDispatch();
+ const tabs = useSelector((state) => state.tabs.tabs);
+ const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
+ const isLoading = ['queued', 'sending'].includes(item.requestState);
+
+ const requestTimeline = [...(collection?.timeline || [])].filter((obj) => {
+ if (obj.itemUid === item.uid) return true;
+ });
+
+ const selectTab = (tab) => {
+ dispatch(
+ updateResponsePaneTab({
+ uid: item.uid,
+ responsePaneTab: tab
+ })
+ );
+ };
+
+ const response = item.response || {};
+
+ const getTabPanel = (tab) => {
+ switch (tab) {
+ case 'response': {
+ return ;
+ }
+ case 'headers': {
+ return ;
+ }
+ case 'trailers': {
+ return ;
+ }
+ case 'timeline': {
+ return ;
+ }
+ default: {
+ return 404 | Not found
;
+ }
+ }
+ };
+
+ if (isLoading && !item.response) {
+ return (
+
+
+
+ );
+ }
+
+ if (!item.response && !requestTimeline?.length) {
+ return (
+
+
+
+ );
+ }
+
+ if (!activeTabUid) {
+ return Something went wrong
;
+ }
+
+ const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
+ if (!focusedTab || !focusedTab.uid || !focusedTab.responsePaneTab) {
+ return An error occurred!
;
+ }
+
+ const tabConfig = [
+ {
+ name: 'response',
+ label: 'Response',
+ count: Array.isArray(response.responses) ? response.responses.length : 0
+ },
+ {
+ name: 'headers',
+ label: 'Metadata',
+ count: Array.isArray(response.metadata) ? response.metadata.length : 0
+ },
+ {
+ name: 'trailers',
+ label: 'Trailers',
+ count: Array.isArray(response.trailers) ? response.trailers.length : 0
+ },
+ {
+ name: 'timeline',
+ label: 'Timeline'
+ }
+ ];
+
+ return (
+
+
+ {tabConfig.map((tab) => (
+
+ ))}
+ {!isLoading ? (
+
+ {focusedTab?.responsePaneTab === 'timeline' ? (
+ <>
+
+
+
+ ) : item?.response ? (
+ <>
+
+
+
+
+
+ ) : null}
+
+ ) : null}
+
+
+ {effectiveRequest.headers && Object.keys(effectiveRequest.headers).length > 0 && (
+
+
Metadata
+
+ {Object.entries(effectiveRequest.headers).map(([key, value], idx) => (
+
+ ))}
+
+
+ )}
+
+ {/* gRPC Messages section */}
+ {!isClientStreaming && effectiveRequest.body?.mode === 'grpc' && effectiveRequest.body?.grpc?.length > 0 && (
+
+
+ Message
+
+
+ {effectiveRequest.body.grpc.filter((_, index) => index === 0).map((message, idx) => (
+
+
+ {typeof message.content === 'string'
+ ? message.content
+ : JSON.stringify(message.content, null, 2)}
+
+
+ ))}
+
+
+ )}
+
+
Message
+
+ {typeof eventData === 'string'
+ ? eventData
+ : JSON.stringify(eventData, null, 2)}
+
+
+
Metadata Headers
+ {response.metadata && response.metadata.length > 0 ? (
+
+ {response.metadata.map((header, idx) => (
+
+
{header.name}:
+
{header.value}
+
+ ))}
+
+ ) : (
+
No metadata headers
+ )}
+
+
+ Response Message #{(response.responses.length || 0)}
+
+ {response.responses && response.responses.length > 0 ? (
+
+ {JSON.stringify(response.responses[response.responses.length - 1], null, 2)}
+
+ ) : (
+
Empty message
+ )}
+
+
+
+
+
+ {response.statusDescription && (
+
{response.statusDescription}
+ )}
+
+ {response.trailers && response.trailers.length > 0 && (
+ <>
+
Trailers
+
+ {response.trailers.map((trailer, idx) => (
+
+
{trailer.name}:
+
{trailer.value || ''}
+
+ ))}
+
+
+ )}
+
+
Error
+
{response.error || "Unknown error"}
+
+
+
+
+
+ {response.trailers && response.trailers.length > 0 && (
+ <>
+
Error Metadata
+
+ {response.trailers.map((trailer, idx) => (
+
+
{trailer.name}:
+
{trailer.value}
+
+ ))}
+
+
+ )}
+
+
Stream Ended
+
+ Total messages: {response.responses.length || 0}
+
+
+
Stream Cancelled
+
{response.statusDescription || "The gRPC stream was cancelled"}
+
+
+ {isCollapsed ?
:
}
+ {eventIcon}
+
{eventName}
+ {eventType === 'request' && effectiveRequest.methodType && (
+
+ {effectiveRequest.methodType}
+
+ )}
+ {eventType === 'status' && (
+
+
+
+ )}
+
[{new Date(timestamp).toISOString()}]
+
+
+
+
+
+ {/* Always show the URL */}
+
{url}
+
+ {/* Expanded content - only show for non-status items */}
+ {!isCollapsed && renderEventContent()}
+
-
+
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/index.js
index 98fe1479a..79bf5725b 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/index.js
@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React from 'react';
import StyledWrapper from './StyledWrapper';
import { findItemInCollection, findParentItemInCollection } from 'utils/collections/index';
import { get } from 'lodash';
import TimelineItem from './TimelineItem/index';
+import GrpcTimelineItem from './GrpcTimelineItem/index';
const getEffectiveAuthSource = (collection, item) => {
const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
@@ -44,9 +45,10 @@ const getEffectiveAuthSource = (collection, item) => {
const Timeline = ({ collection, item }) => {
// Get the effective auth source if auth mode is inherit
const authSource = getEffectiveAuthSource(collection, item);
-
+ const isGrpcRequest = item.type === 'grpc-request';
+
// Filter timeline entries based on new rules
- const combinedTimeline = ([...(collection.timeline || [])]).filter(obj => {
+ const combinedTimeline = ([...(collection?.timeline || [])]).filter(obj => {
// Always show entries for this item
if (obj.itemUid === item.uid) return true;
@@ -57,43 +59,68 @@ const Timeline = ({ collection, item }) => {
}
return false;
- }).sort((a, b) => b.timestamp - a.timestamp);
+ }).sort((a, b) => b.timestamp - a.timestamp)
return (
- {combinedTimeline.map((event, index) => {
- if (event.type === 'request') {
- const { data, timestamp } = event;
- const { request, response } = data;
- return (
-
-
-
- );
- } else if (event.type === 'oauth2') {
- const { data, timestamp } = event;
- const { debugInfo } = data;
- return (
-
-
-
-
OAuth2.0 Calls
+ {/* Timeline container with scrollbar */}
+
+ {combinedTimeline.map((event, index) => {
+ // Handle regular requests
+ if (event.type === 'request') {
+
+ const { data, timestamp, eventType } = event;
+ const { request, response, eventData = {}, timestamp: eventTimestamp = timestamp } = data;
+
+ if (isGrpcRequest) {
+ return (
+
+
+ );
+ }
+
+ // Regular HTTP request
+ return (
+
+
+ );
+ }
+ // Handle OAuth2 events
+ else if (event.type === 'oauth2') {
+ const { data, timestamp } = event;
+ const { debugInfo } = data;
+ return (
+
+
{debugInfo && debugInfo.length > 0 ? (
debugInfo.map((data, idx) => (
-
+
{
No debug information available.
)}
-
- );
- }
-
- return null;
- })}
+
+ );
+ }
+
+ return null;
+ })}
+
);
};
diff --git a/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js b/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
index 1a448d221..609515c8c 100644
--- a/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
@@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react';
import get from 'lodash/get';
import classnames from 'classnames';
-import { safeStringifyJSON } from 'utils/common';
import QueryResult from 'components/ResponsePane/QueryResult';
import ResponseHeaders from 'components/ResponsePane/ResponseHeaders';
import StatusCode from 'components/ResponsePane/StatusCode';
diff --git a/packages/bruno-app/src/components/ShareCollection/index.js b/packages/bruno-app/src/components/ShareCollection/index.js
index 6b18ae837..7fb5fd523 100644
--- a/packages/bruno-app/src/components/ShareCollection/index.js
+++ b/packages/bruno-app/src/components/ShareCollection/index.js
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
import Modal from 'components/Modal';
-import { IconDownload, IconLoader2 } from '@tabler/icons';
+import { IconDownload, IconLoader2, IconAlertTriangle } from '@tabler/icons';
import StyledWrapper from './StyledWrapper';
import Bruno from 'components/Bruno';
import exportBrunoCollection from 'utils/collections/export';
@@ -11,9 +11,22 @@ import { useSelector } from 'react-redux';
import { findCollectionByUid, areItemsLoading } from 'utils/collections/index';
const ShareCollection = ({ onClose, collectionUid }) => {
- const collection = useSelector(state => findCollectionByUid(state.collections.collections, collectionUid));
+ const collection = useSelector((state) => findCollectionByUid(state.collections.collections, collectionUid));
const isCollectionLoading = areItemsLoading(collection);
-
+
+ const hasGrpcRequests = useMemo(() => {
+ const checkItem = (item) => {
+ if (item.type === 'grpc-request') {
+ return true;
+ }
+ if (item.items) {
+ return item.items.some(checkItem);
+ }
+ return false;
+ };
+ return collection?.items?.some(checkItem) || false;
+ }, [collection]);
+
const handleExportBrunoCollection = () => {
const collectionCopy = cloneDeep(collection);
exportBrunoCollection(transformCollectionToSaveToExportAsFile(collectionCopy));
@@ -36,38 +49,39 @@ const ShareCollection = ({ onClose, collectionUid }) => {
hideCancel
>
-
-
-
- {isCollectionLoading ? (
-
- ) : (
-
- )}
-
-
-
Bruno Collection
-
- {isCollectionLoading ? 'Loading collection...' : 'Export in Bruno format'}
-
-
+
+
+
+ {isCollectionLoading ? : }
-
-
+
+
Bruno Collection
+
{isCollectionLoading ? 'Loading collection...' : 'Export in Bruno format'}
+
+
+
+
+ {hasGrpcRequests && (
+
+
+ Note: gRPC requests in this collection will not be exported
+
+ )}
+
{isCollectionLoading ? (
@@ -83,6 +97,7 @@ const ShareCollection = ({ onClose, collectionUid }) => {
+
);
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
index bdb62e843..04d338d5e 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
@@ -34,6 +34,9 @@ const Wrapper = styled.div`
.method-head {
color: ${(props) => props.theme.request.methods.head};
}
+ .method-grpc {
+ color: ${(props) => props.theme.request.grpc};
+ }
`;
export default Wrapper;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/index.js
index e41309871..73cfc50ed 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/index.js
@@ -3,10 +3,12 @@ import classnames from 'classnames';
import StyledWrapper from './StyledWrapper';
const RequestMethod = ({ item }) => {
- if (!['http-request', 'graphql-request'].includes(item.type)) {
+ if (!['http-request', 'graphql-request', 'grpc-request'].includes(item.type)) {
return null;
}
+ const isGrpc = item.type === 'grpc-request';
+
const getClassname = (method = '') => {
method = method.toLocaleLowerCase();
return classnames('mr-1', {
@@ -16,7 +18,8 @@ const RequestMethod = ({ item }) => {
'method-delete': method === 'delete',
'method-patch': method === 'patch',
'method-head': method === 'head',
- 'method-options': method == 'options'
+ 'method-options': method === 'options',
+ 'method-grpc': isGrpc,
});
};
@@ -24,7 +27,7 @@ const RequestMethod = ({ item }) => {
- {item.request.method.length > 5 ? item.request.method.substring(0, 3) : item.request.method}
+ {isGrpc ? 'grpc' : item.request.method.length > 5 ? item.request.method.substring(0, 3) : item.request.method}
diff --git a/packages/bruno-app/src/components/Sidebar/NewRequest/index.js b/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
index f27cfc52e..8a668409c 100644
--- a/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
+++ b/packages/bruno-app/src/components/Sidebar/NewRequest/index.js
@@ -7,7 +7,7 @@ import { uuid } from 'utils/common';
import Modal from 'components/Modal';
import { useDispatch, useSelector } from 'react-redux';
import { newEphemeralHttpRequest } from 'providers/ReduxStore/slices/collections';
-import { newHttpRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { newHttpRequest, newGrpcRequest } from 'providers/ReduxStore/slices/collections/actions';
import { addTab } from 'providers/ReduxStore/slices/tabs';
import HttpMethodSelector from 'components/RequestPane/QueryUrl/HttpMethodSelector';
import { getDefaultRequestPaneTab } from 'utils/collections';
@@ -21,14 +21,16 @@ import Help from 'components/Help';
import StyledWrapper from './StyledWrapper';
import SingleLineEditor from 'components/SingleLineEditor/index';
import { useTheme } from 'styled-components';
+import { useBetaFeature, BETA_FEATURES } from 'utils/beta-features';
const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
const dispatch = useDispatch();
const inputRef = useRef();
const storedTheme = useTheme();
+ const isGrpcEnabled = useBetaFeature(BETA_FEATURES.GRPC);
- const collection = useSelector(state => state.collections.collections?.find(c => c.uid === collectionUid));
+ const collection = useSelector((state) => state.collections.collections?.find((c) => c.uid === collectionUid));
const {
brunoConfig: { presets: collectionPresets = {} }
} = collection;
@@ -44,7 +46,7 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
const Icon = forwardRef((props, ref) => {
return (
- {curlRequestTypeDetected === 'http-request' ? "HTTP" : "GraphQL"}
+ {curlRequestTypeDetected === 'http-request' ? 'HTTP' : 'GraphQL'}
);
@@ -89,6 +91,14 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
return 'graphql-request';
}
+ if (collectionPresets.requestType === 'grpc') {
+ // If gRPC is disabled in beta features, fall back to http-request
+ if (!isGrpcEnabled) {
+ return 'http-request';
+ }
+ return 'grpc-request';
+ }
+
return 'http-request';
};
@@ -113,11 +123,15 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
.min(1, 'must be at least 1 character')
.max(255, 'must be 255 characters or less')
.required('filename is required')
- .test('is-valid-filename', function(value) {
+ .test('is-valid-filename', function (value) {
const isValid = validateName(value);
return isValid ? true : this.createError({ message: validateNameError(value) });
})
- .test('not-reserved', `The file names "collection" and "folder" are reserved in bruno`, value => !['collection', 'folder'].includes(value)),
+ .test(
+ 'not-reserved',
+ `The file names "collection" and "folder" are reserved in bruno`,
+ (value) => !['collection', 'folder'].includes(value)
+ ),
curlCommand: Yup.string().when('requestType', {
is: (requestType) => requestType === 'from-curl',
then: Yup.string()
@@ -131,7 +145,27 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
})
}),
onSubmit: (values) => {
- if (isEphemeral) {
+ const isGrpcRequest = values.requestType === 'grpc-request';
+
+ if (isGrpcRequest) {
+ dispatch(
+ newGrpcRequest({
+ requestName: values.requestName,
+ filename: values.filename,
+ requestType: values.requestType,
+ requestUrl: values.requestUrl,
+ collectionUid: collection.uid,
+ itemUid: item ? item.uid : null
+ })
+ )
+ .then(() => {
+ toast.success('New request created!');
+ onClose();
+ })
+ .catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
+
+ // will need to handle import from grpcurl command when we support it, now it is just for creating new requests
+ } else if (isEphemeral) {
const uid = uuid();
dispatch(
newEphemeralHttpRequest({
@@ -176,7 +210,7 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
)
.then(() => {
toast.success('New request created!');
- onClose()
+ onClose();
})
.catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
} else {
@@ -193,7 +227,7 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
)
.then(() => {
toast.success('New request created!');
- onClose()
+ onClose();
})
.catch((err) => toast.error(err ? err.message : 'An error occurred while adding the request'));
}
@@ -248,13 +282,10 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
const AdvancedOptions = forwardRef((props, ref) => {
return (
-
);
});
@@ -308,6 +339,26 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
GraphQL
+ {isGrpcEnabled && (
+ <>
+
{
+ formik.setFieldValue('requestMethod', 'POST');
+ formik.handleChange(event);
+ }}
+ value="grpc-request"
+ checked={formik.values.requestType === 'grpc-request'}
+ />
+
+
+ )}
+
{
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
- onChange={e => {
+ onChange={(e) => {
formik.setFieldValue('requestName', e.target.value);
!isEditing && formik.setFieldValue('filename', sanitizeName(e.target.value));
}}
@@ -352,34 +403,33 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
{isEditing ? (
-
toggleEditing(false)}
+ toggleEditing(false)}
/>
) : (
toggleEditing(true)}
+ className="cursor-pointer opacity-50 hover:opacity-80"
+ size={16}
+ strokeWidth={1.5}
+ onClick={() => toggleEditing(true)}
/>
)}
{isEditing ? (
-
+
{
onChange={formik.handleChange}
value={formik.values.filename || ''}
/>
- .bru
+ .bru
) : (
-
-
+
)}
{formik.touched.filename && formik.errors.filename ? (
@@ -414,12 +462,14 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
URL
-
- formik.setFieldValue('requestMethod', val)}
- />
-
+ {formik.values.requestType !== 'grpc-request' ? (
+
+ formik.setFieldValue('requestMethod', val)}
+ />
+
+ ) : null}
{
onChange={(value) => {
formik.handleChange({
target: {
- name: "requestUrl",
+ name: 'requestUrl',
value: value
}
});
@@ -484,9 +534,9 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
)}
-
+
} placement="bottom-start">
-
{
@@ -498,17 +548,14 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
-
-
+
+
-
diff --git a/packages/bruno-app/src/components/Tab/index.js b/packages/bruno-app/src/components/Tab/index.js
new file mode 100644
index 000000000..dd74c9261
--- /dev/null
+++ b/packages/bruno-app/src/components/Tab/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import classnames from 'classnames';
+
+const Tab = ({ name, label, isActive, onClick, count = 0, className = '', ...props }) => {
+ const tabClassName = classnames("tab select-none", {
+ active: isActive
+ }, className);
+
+ return (
+
onClick(name)}
+ {...props}
+ >
+ {label}
+ {count > 0 && {count}}
+
+ );
+};
+
+export default Tab;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/ToggleSwitch/index.js b/packages/bruno-app/src/components/ToggleSwitch/index.js
index cf386a347..bb3679038 100644
--- a/packages/bruno-app/src/components/ToggleSwitch/index.js
+++ b/packages/bruno-app/src/components/ToggleSwitch/index.js
@@ -2,8 +2,8 @@ import { Checkbox, Inner, Label, Switch, SwitchButton } from './StyledWrapper';
const ToggleSwitch = ({ isOn, handleToggle, size = 'm', ...props }) => {
return (
-
-
+
+ {}} />