feat(websocket): show full message name in a tooltip on hover (#8299)

tests/utils/page/actions.ts

@@ -1,7 +1,7 @@
 import { test, expect, Page, ElectronApplication, waitForReadyPage as waitForReadyPageImpl } from '../../../playwright';
 import process from 'node:process';
 import * as path from 'path';
-import { buildCommonLocators, buildScriptErrorLocators, buildGrpcCommonLocators } from './locators';
+import { buildCommonLocators, buildScriptErrorLocators, buildGrpcCommonLocators, buildWebsocketCommonLocators } from './locators';
 import { waitForCollectionMount } from './mounting';
 
 type SandboxMode = 'safe' | 'developer';
@@ -1937,6 +1937,24 @@ const generateCollectionDocs = async (
   });
 };
 
+/**
+ * Rename a websocket message by double-clicking its label and typing a new name.
+ * @param page - The page object
+ * @param index - The zero-based index of the message in the list
+ * @param name - The new message name
+ */
+const renameWsMessage = async (page: Page, index: number, name: string) => {
+  await test.step(`Rename websocket message ${index} to "${name}"`, async () => {
+    const ws = buildWebsocketCommonLocators(page);
+    await ws.message.label(index).dblclick();
+    const nameInput = ws.message.nameInput(index);
+    await expect(nameInput).toBeVisible();
+    await nameInput.selectText();
+    await page.keyboard.type(name);
+    await nameInput.press('Enter');
+  });
+};
+
 export {
   waitForReadyPage,
   dismissImportIssuesToasts,
@@ -2013,7 +2031,8 @@ export {
   closeGenerateCodeDialog,
   openRequestInFolder,
   setUrlEncoding,
-  generateCollectionDocs
+  generateCollectionDocs,
+  renameWsMessage
 };
 
 export type { SandboxMode, EnvironmentType, EnvironmentVariable, ImportCollectionOptions, CreateRequestOptions, CreateUntitledRequestOptions, CreateTransientRequestOptions, AssertionInput };

tests/utils/page/locators.ts

@@ -238,6 +238,11 @@ export const buildWebsocketCommonLocators = (page: Page) => ({
         .filter({ hasText: /^Close Connection$/ })
   },
   messages: () => page.locator('.ws-message'),
+  message: {
+    label: (index: number) => page.getByTestId(`ws-message-label-${index}`),
+    nameInput: (index: number) => page.getByTestId(`ws-message-name-input-${index}`),
+    nameTooltip: () => page.getByTestId('ws-message-name-tooltip')
+  },
   toolbar: {
     latestFirst: () => page.getByRole('button', { name: 'Latest First' }),
     latestLast: () => page.getByRole('button', { name: 'Latest Last' }),