fix: gRPC request loses all messages except the first on save for yaml collection

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

@@ -39,7 +39,11 @@ const MessageToolbar = ({
         </ToolHint>
 
         <ToolHint text="Generate sample" toolhintId={`regenerate-msg-${index}`}>
-          <button onClick={onRegenerateMessage} className="toolbar-btn">
+          <button
+            onClick={onRegenerateMessage}
+            className="toolbar-btn"
+            data-testid={`grpc-regenerate-message-${index}`}
+          >
             <IconRefresh size={16} strokeWidth={1.5} />
           </button>
         </ToolHint>

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

@@ -271,6 +271,7 @@ const CreateCollection = ({ onClose, defaultLocation: propDefaultLocation, initi
                   <div
                     className="dropdown-item"
                     key="show-file-format"
+                    data-testid="show-file-format-toggle"
                     onClick={(e) => {
                       dropdownTippyRef.current.hide();
                       setShowFileFormat(!showFileFormat);

packages/bruno-filestore/src/formats/yml/items/parseGrpcRequest.ts

@@ -1,12 +1,12 @@
 import type { Item as BrunoItem } from '@usebruno/schema-types/collection/item';
 import type { GrpcRequest as BrunoGrpcRequest } from '@usebruno/schema-types/requests/grpc';
-import type { GrpcRequest, GrpcMetadata } from '@opencollection/types/requests/grpc';
+import type { GrpcRequest, GrpcMetadata, GrpcMessageVariant } from '@opencollection/types/requests/grpc';
 import type { KeyValue as BrunoKeyValue } from '@usebruno/schema-types/common/key-value';
 import { toBrunoAuth } from '../common/auth';
 import { toBrunoVariables } from '../common/variables';
 import { toBrunoScripts } from '../common/scripts';
 import { toBrunoAssertions } from '../common/assertions';
-import { isNonEmptyString, uuid, ensureString } from '../../../utils';
+import { uuid, ensureString, isNonEmptyString } from '../../../utils';
 
 const toBrunoGrpcMetadata = (metadata: GrpcMetadata[] | null | undefined): BrunoKeyValue[] | undefined => {
   if (!metadata?.length) {
@@ -57,10 +57,16 @@ const parseGrpcRequest = (ocRequest: GrpcRequest): BrunoItem => {
   };
 
   // message
-  if (isNonEmptyString(grpc?.message)) {
+  const rawMessage = grpc?.message;
+  if (Array.isArray(rawMessage)) {
+    brunoRequest.body.grpc = (rawMessage as GrpcMessageVariant[]).map(({ title, message }, index) => ({
+      name: title || `message ${index + 1}`,
+      content: ensureString(message)
+    }));
+  } else if (isNonEmptyString(rawMessage)) {
     brunoRequest.body.grpc = [{
       name: '',
-      content: grpc?.message as string
+      content: rawMessage as string
     }];
   }
 

packages/bruno-filestore/src/formats/yml/items/stringifyGrpcRequest.ts

@@ -1,7 +1,7 @@
 import type { Item as BrunoItem } from '@usebruno/schema-types/collection/item';
 import type { KeyValue as BrunoKeyValue } from '@usebruno/schema-types/common/key-value';
 import type { GrpcRequest as BrunoGrpcRequest } from '@usebruno/schema-types/requests/grpc';
-import type { GrpcRequest, GrpcMetadata, GrpcMessage, GrpcRequestInfo, GrpcRequestDetails, GrpcRequestRuntime } from '@opencollection/types/requests/grpc';
+import type { GrpcRequest, GrpcMetadata, GrpcMessageVariant, GrpcRequestInfo, GrpcRequestDetails, GrpcRequestRuntime } from '@opencollection/types/requests/grpc';
 import type { Auth } from '@opencollection/types/common/auth';
 import type { Scripts } from '@opencollection/types/common/scripts';
 import type { Variable } from '@opencollection/types/common/variables';
@@ -73,16 +73,11 @@ const stringifyGrpcRequest = (item: BrunoItem): string => {
 
     // message
     if (brunoRequest.body?.mode === 'grpc' && brunoRequest.body.grpc?.length) {
-      const messages = brunoRequest.body.grpc;
-
-      // todo: bruno app supports only one message for now
-      // update this when bruno app supports multiple messages
-      if (messages.length) {
-        const message: GrpcMessage = messages[0].content || '';
-        if (message.trim().length) {
-          grpc.message = message;
-        }
-      }
+      const messages: GrpcMessageVariant[] = brunoRequest.body.grpc.map(({ name, content }, index) => ({
+        title: name || `message ${index + 1}`,
+        message: content || ''
+      }));
+      grpc.message = messages;
     }
 
     // auth

tests/grpc/multi-message-yml/multi-message.spec.ts

@@ -0,0 +1,70 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import yaml from 'js-yaml';
+import { bruToJsonV2 } from '@usebruno/lang';
+import { expect, test } from '../../../playwright';
+import {
+  addGrpcMessage,
+  createCollection,
+  createRequest,
+  generateGrpcSampleMessage,
+  REQUEST_TYPE,
+  saveRequest,
+  selectGrpcMethod
+} from '../../utils/page/actions';
+
+const REQUEST_NAME = 'grpc-multi-msg';
+const GRPC_URL = 'grpcb.in:9000';
+const GRPC_METHOD = 'BidiHello';
+
+type GrpcRequestYml = {
+  grpc?: {
+    message?: { title: string; message: string }[];
+  };
+};
+
+const FORMATS = [
+  { format: 'yml', collectionName: 'grpc-yml-multi-msg', tmpDirPrefix: 'grpc-yml-collection' },
+  { format: 'bru', collectionName: 'grpc-bru-multi-msg', tmpDirPrefix: 'grpc-bru-collection' }
+] as const;
+
+for (const { format, collectionName, tmpDirPrefix } of FORMATS) {
+  test.describe.serial(`grpc multi-message (${format} format)`, () => {
+    let collectionPath: string;
+
+    test('creates a gRPC request with multiple messages and saves it', async ({ page, createTmpDir }) => {
+      collectionPath = await createTmpDir(tmpDirPrefix);
+
+      await createCollection(page, collectionName, collectionPath, { format });
+      await createRequest(page, REQUEST_NAME, collectionName, { url: GRPC_URL, requestType: REQUEST_TYPE.GRPC });
+
+      await selectGrpcMethod(page, GRPC_METHOD);
+
+      await addGrpcMessage(page);
+      await addGrpcMessage(page);
+
+      await generateGrpcSampleMessage(page, 0);
+      await generateGrpcSampleMessage(page, 1);
+      await generateGrpcSampleMessage(page, 2);
+
+      await saveRequest(page);
+    });
+
+    test(`verifies all messages are saved in the request .${format} file`, async () => {
+      const requestFilePath = path.join(collectionPath, collectionName, `${REQUEST_NAME}.${format}`);
+      expect(fs.existsSync(requestFilePath)).toBe(true);
+
+      const fileContent = fs.readFileSync(requestFilePath, 'utf8');
+
+      if (format === 'yml') {
+        const parsed = yaml.load(fileContent) as GrpcRequestYml;
+        const messages = parsed.grpc?.message ?? [];
+        expect(messages.length).toBe(3);
+      } else if (format === 'bru') {
+        const parsed = bruToJsonV2(fileContent) as { body?: { grpc?: { name: string; content: string }[] } };
+        const messages = parsed.body?.grpc ?? [];
+        expect(messages.length).toBe(3);
+      }
+    });
+  });
+}

tests/utils/page/actions.ts

@@ -15,8 +15,8 @@
 
     for (let i = 0; i < numberOfCollections; i++) {
       const firstCollection = page.locator('[data-testid="collections"] .collection-name').first();
       await firstCollection.hover();
       await firstCollection.locator('.collection-actions .icon').click();
       await page.locator('.dropdown-item').getByText('Remove').click();
 
       // Wait for modal to appear - could be either regular remove or drafts confirmation
@@ -28,7 +28,7 @@
 
       if (hasDiscardButton) {
         // Drafts modal - click "Discard All and Remove"
         await page.getByRole('button', { name: 'Discard All and Remove' }).click();
       } else {
         // Regular modal - click the submit button
         await page.locator('.bruno-modal-footer .submit').click();
@@ -55,17 +55,30 @@
   });
 };
 
+type CollectionFormat = 'yml' | 'bru';
+
+type CreateCollectionOptions = {
+  format?: CollectionFormat;
+};
+
 /**
  * Create a collection
  * @param page - The page object
  * @param collectionName - The name of the collection to create
  * @param collectionLocation - The location of the collection to create (eg)
- * @param options - The options for creating the collection
+ * @param options - Optional settings (format: 'yml' (default) or 'bru')
  *
  * @returns void
  */
-const createCollection = async (page, collectionName: string, collectionLocation: string) => {
-  await test.step(`Create collection "${collectionName}"`, async () => {
+const createCollection = async (
+  page,
+  collectionName: string,
+  collectionLocation: string,
+  options: CreateCollectionOptions = {}
+) => {
+  const { format = 'yml' } = options;
+
+  await test.step(`Create ${format} collection "${collectionName}"`, async () => {
     await page.getByTestId('collections-header-add-menu').click();
     await page.locator('.tippy-box .dropdown-item').filter({ hasText: 'Create collection' }).click();
 
@@ -93,9 +106,18 @@
     await nameInput.fill(collectionName);
     // Verify the name is correct before creating
     await expect(nameInput).toHaveValue(collectionName, { timeout: 2000 });
+
+    // The File Format dropdown is hidden by default. Open the Advanced Options menu
+    // and toggle "Show File Format" before selecting a non-default format.
+    if (format === 'bru') {
+      await createCollectionModal.locator('.advanced-options .btn-advanced').click();
+      await page.getByTestId('show-file-format-toggle').click();
+      await createCollectionModal.locator('select#format').selectOption(format);
+    }
+
     await createCollectionModal.getByRole('button', { name: 'Create', exact: true }).click();
 
     await createCollectionModal.waitFor({ state: 'detached', timeout: 15000 });
     // Wait for the collection name to appear in the sidebar before proceeding
     await page.locator('#sidebar-collection-name').filter({ hasText: collectionName }).waitFor({ state: 'visible', timeout: 5000 });
     await openCollection(page, collectionName);
@@ -104,14 +126,31 @@
 
 const STANDARD_HTTP_METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS', 'HEAD', 'TRACE', 'CONNECT'];
 
+export const REQUEST_TYPE = Object.freeze({
+  HTTP: 'HTTP',
+  GRAPHQL: 'GraphQL',
+  GRPC: 'gRPC',
+  WEBSOCKET: 'WebSocket'
+} as const);
+
+export type RequestType = typeof REQUEST_TYPE[keyof typeof REQUEST_TYPE];
+
 type CreateRequestOptions = {
   url?: string;
   method?: string;
   inFolder?: boolean;
+  requestType?: RequestType;
 };
 
+const REQUEST_TYPE_TESTID = Object.freeze({
+  [REQUEST_TYPE.HTTP]: 'http-request',
+  [REQUEST_TYPE.GRAPHQL]: 'graphql-request',
+  [REQUEST_TYPE.GRPC]: 'grpc-request',
+  [REQUEST_TYPE.WEBSOCKET]: 'ws-request'
+} as const);
+
 type CreateUntitledRequestOptions = {
-  requestType?: 'HTTP' | 'GraphQL' | 'WebSocket' | 'gRPC';
+  requestType?: RequestType;
   requestName?: string;
   url?: string;
   tag?: string;
@@ -174,7 +213,7 @@
 };
 
 type CreateTransientRequestOptions = {
-  requestType?: 'HTTP' | 'GraphQL' | 'gRPC' | 'WebSocket';
+  requestType?: RequestType;
 };
 
 /**
@@ -258,10 +297,10 @@
   parentName: string,
   options: CreateRequestOptions = {}
 ) => {
-  const { url, method, inFolder = false } = options;
+  const { url, method, inFolder = false, requestType = 'HTTP' } = options;
   const parentType = inFolder ? 'folder' : 'collection';
 
-  await test.step(`Create request "${requestName}" in ${parentType} "${parentName}"`, async () => {
+  await test.step(`Create ${requestType} request "${requestName}" in ${parentType} "${parentName}"`, async () => {
     const locators = buildCommonLocators(page);
 
     if (inFolder) {
@@ -275,9 +314,14 @@
     }
 
     await locators.dropdown.item('New Request').click();
+
+    if (requestType !== REQUEST_TYPE.HTTP) {
+      await page.getByTestId(REQUEST_TYPE_TESTID[requestType]).click();
+    }
+
     await page.getByPlaceholder('Request Name').fill(requestName);
 
-    if (method) {
+    if (method && requestType === 'HTTP') {
       await page.locator('.bruno-modal .method-selector').click();
       const isStandardMethod = STANDARD_HTTP_METHODS.includes(method.toUpperCase());
       if (isStandardMethod) {
@@ -822,7 +866,7 @@
 
     // Check if tab is directly visible
     if (await visibleTab.isVisible()) {
       await visibleTab.click();
       await expect(visibleTab).toContainClass('active');
       return;
     }
@@ -1029,6 +1073,7 @@
  */
 const saveRequest = async (page: Page) => {
   await test.step('Save request', async () => {
+    await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur());
     const saveShortcut = process.platform === 'darwin' ? 'Meta+s' : 'Control+s';
     await page.keyboard.press(saveShortcut);
     await expect(page.getByText('Request saved successfully').last()).toBeVisible({ timeout: 3000 });
@@ -1198,6 +1243,42 @@
   });
 };
 
+/**
+ * Click the gRPC "Add Message" button to append a new message to the request
+ * @param page - The page object
+ */
+const addGrpcMessage = async (page: Page) => {
+  await test.step('Add gRPC message', async () => {
+    await page.getByTestId('grpc-add-message-button').click();
+  });
+};
+
+/**
+ * Click the "Generate sample" button on a gRPC message to populate it with a sample payload
+ * @param page - The page object
+ * @param index - The 0-based index of the message (default: 0)
+ */
+const generateGrpcSampleMessage = async (page: Page, index: number = 0) => {
+  await test.step(`Generate sample for gRPC message #${index}`, async () => {
+    await page.getByTestId(`grpc-regenerate-message-${index}`).click();
+  });
+};
+
+/**
+ * Open the gRPC method dropdown and select a method by name
+ * @param page - The page object
+ * @param methodName - The name of the gRPC method to select (e.g. "BidiHello")
+ */
+const selectGrpcMethod = async (page: Page, methodName: string) => {
+  await test.step(`Select gRPC method "${methodName}"`, async () => {
+    await page.getByTestId('grpc-method-dropdown-trigger').click();
+    const dropdown = page.getByTestId('grpc-methods-dropdown');
+    await dropdown.waitFor({ state: 'visible', timeout: 5000 });
+    await dropdown.getByTestId('grpc-method-item').filter({ hasText: methodName }).first().click();
+    await expect(page.getByTestId('selected-grpc-method-name')).toContainText(methodName);
+  });
+};
+
 export {
   closeAllCollections,
   openCollection,
@@ -1243,7 +1324,10 @@
   addPostResponseScript,
   addTestScript,
   sendAndWaitForErrorCard,
-  sendAndWaitForResponse
+  sendAndWaitForResponse,
+  selectGrpcMethod,
+  addGrpcMessage,
+  generateGrpcSampleMessage
 };
 
 export type { SandboxMode, EnvironmentType, EnvironmentVariable, ImportCollectionOptions, CreateRequestOptions, CreateUntitledRequestOptions, CreateTransientRequestOptions, AssertionInput };