feat: change tab behavior as manually (Kong#9641)

Author: ZxBing0066

packages/insomnia-smoke-test/tests/smoke/debug-sidebar-interactions.test.ts

@@ -66,7 +66,12 @@ test.describe('Debug-Sidebar', () => {
     await page.getByLabel('Request filter').click();
     await page.getByLabel('Request filter').fill('test folder');
     await page.getByLabel('Request filter').press('Enter');
-    await page.getByLabel('Request Collection').getByRole('row', { name: 'test folder' }).click();
+    await page
+      .getByLabel('Request Collection')
+      .getByRole('row', { name: 'test folder' })
+      .click({
+        modifiers: ['ControlOrMeta'],
+      });
     // Wait for tab appear
     await page.getByLabel('Insomnia Tabs').getByLabel('tab-test folder', { exact: true }).click();
     await page.getByLabel('Clear search').click();
@@ -121,9 +126,15 @@ test.describe('Debug-Sidebar', () => {
       .soft(page.getByTestId('new name').getByLabel('GET new name', { exact: true }))
       .toContainText('new name');
 
-    // Create a new HTTP request
+    // Create a new HTTP request to have two "New Request"
     await page.getByLabel('Create in collection').click();
     await page.getByRole('menuitemradio', { name: 'Http Request' }).click();
-    await page.getByLabel('Request Collection').getByRole('row', { name: 'New Request' }).click();
+
+    // Verify there are two "New Request" rows
+    const newRequests = page.getByLabel('Request Collection').getByRole('row', { name: 'New Request' });
+    await expect.soft(newRequests).toHaveCount(2);
+
+    // Verify the first "New Request" is selected (data-selected is on child element)
+    await expect.soft(newRequests.first().locator('[data-selected="true"]').first()).toBeVisible();
   });
 });

packages/insomnia-smoke-test/tests/smoke/global-environments.test.ts

@@ -8,7 +8,7 @@ test.describe('Global Environments', () => {
     await loadFixtureFile('collection-for-global-environments.yaml', app, page);
     await loadFixtureFile('global-environment.yaml', app, page);
 
-    await page.getByRole('link', { name: 'collection-for-global-' }).click();
+    await page.getByRole('gridcell', { name: 'collection-for-global-' }).click();
     await page.getByTestId('New Request').getByLabel('GET New Request', { exact: true }).click();
     // check if it has error message
     await page.getByText('Body', { exact: true }).click();

packages/insomnia-smoke-test/tests/smoke/insomnia-tab.test.ts

@@ -10,6 +10,18 @@ test.describe('multiple-tab feature test', () => {
     await page.getByRole('button', { name: 'Create request collection', exact: true }).click();
     await page.getByLabel('Create in collection').click();
     await page.getByLabel('HTTP Request').click();
+    await page
+      .getByLabel('Request Collection')
+      .getByRole('row', { name: 'My first request' })
+      .click({
+        modifiers: ['ControlOrMeta'],
+      });
+    await page
+      .getByLabel('Request Collection')
+      .getByRole('row', { name: 'New Request' })
+      .click({
+        modifiers: ['ControlOrMeta'],
+      });
     const tab = page.getByLabel('Insomnia Tabs').getByLabel(`tab-New Request`, { exact: true });
     await expect.soft(tab).toBeVisible();
     await expect.soft(tab).toHaveAttribute('data-selected', 'true');
@@ -54,8 +66,16 @@ test.describe('multiple-tab feature test', () => {
     await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
     await page.getByLabel('Create in collection').click();
     await page.getByLabel('HTTP Request').click();
+    await page
+      .getByLabel('Request Collection')
+      .getByRole('row', { name: 'New Request' })
+      .click({
+        modifiers: ['ControlOrMeta'],
+      });
     await expect.soft(page.getByLabel('tab-New Request').getByLabel('Tab Tag')).toHaveText('GET');
     await page.getByTestId('tab-close-button').first().click();
+    // Move the mouse away to avoid accidentally show the tooltip of the tab which may cover the request method dropdown and cause the click fail
+    await page.mouse.move(0, 0);
     await page.getByLabel('Request Method').click();
     await page.getByRole('button', { name: 'POST' }).click();
     await expect.soft(page.getByLabel('tab-New Request').getByLabel('Tab Tag')).toHaveText('POST');

packages/insomnia-smoke-test/tests/smoke/insomnia-vault.test.ts

@@ -173,7 +173,12 @@ test.describe('Check vault used in environment', () => {
     await page.getByText('legacy vault value array').click();
     await page.locator('body').click();
     // activate request
-    await page.getByTestId('legacy-array-vault').getByLabel('GET legacy-array-vault', { exact: true }).click();
+    await page
+      .getByTestId('legacy-array-vault')
+      .getByLabel('GET legacy-array-vault', { exact: true })
+      .click({
+        modifiers: ['ControlOrMeta'],
+      });
     // Wait for tab appear
     await expect.soft(page.getByLabel('Insomnia Tabs').getByText('legacy-array-vault', { exact: true })).toBeVisible();
     await page.getByRole('button', { name: 'Send' }).click();
@@ -189,7 +194,12 @@ test.describe('Check vault used in environment', () => {
     await page.getByText('legacy vault value object').click();
     await page.locator('body').click();
     // activate request
-    await page.getByTestId('legacy-object-vault').getByLabel('GET legacy-object-vault', { exact: true }).click();
+    await page
+      .getByTestId('legacy-object-vault')
+      .getByLabel('GET legacy-object-vault', { exact: true })
+      .click({
+        modifiers: ['ControlOrMeta'],
+      });
     await expect.soft(page.getByLabel('Insomnia Tabs').getByText('legacy-object-vault', { exact: true })).toBeVisible();
     await page.getByRole('button', { name: 'Send' }).click();
 
@@ -204,7 +214,12 @@ test.describe('Check vault used in environment', () => {
     await page.getByText('base with vault').click();
     await page.locator('body').click();
     // activate request
-    await page.getByTestId('legacy-invalid-vault').getByLabel('GET legacy-invalid-vault', { exact: true }).click();
+    await page
+      .getByTestId('legacy-invalid-vault')
+      .getByLabel('GET legacy-invalid-vault', { exact: true })
+      .click({
+        modifiers: ['ControlOrMeta'],
+      });
     await expect
       .soft(page.getByLabel('Insomnia Tabs').getByText('legacy-invalid-vault', { exact: true }))
       .toBeVisible();

packages/insomnia-smoke-test/tests/smoke/mtls.test.ts

@@ -72,7 +72,16 @@ test('can use client certificate for mTLS', async ({ app, page }) => {
   await page.locator('[data-test-id="client-certificate-toggle"]').click();
   await page.getByRole('button', { name: 'Done' }).click();
   await page.getByLabel('Request Collection').getByTestId('pet 2').press('Enter');
-  await expect.soft(page.getByLabel('Insomnia Tabs').getByText('pet 2', { exact: true })).toBeVisible();
+  await expect
+    .soft(
+      page
+        .getByLabel('Request Collection')
+        .getByRole('row', { name: 'pet 2' })
+        .first()
+        .locator('[data-selected="true"]')
+        .first(),
+    )
+    .toBeVisible();
 
   await page.getByRole('button', { name: 'Send', exact: true }).click();
   await expect.soft(statusTag).toContainText('401 Unauthorized');

packages/insomnia-smoke-test/tests/smoke/pre-request-script-features.test.ts

@@ -525,7 +525,12 @@ test.describe('pre-request features tests', () => {
 
     await page.getByLabel('Pre-request Scripts', { exact: true }).click();
     // go to request collection
-    await page.getByLabel('Request Collection').getByTestId('persist global environment').press('Enter');
+    await page
+      .getByLabel('Request Collection')
+      .getByTestId('persist global environment')
+      .click({
+        modifiers: ['ControlOrMeta'],
+      });
     // activate global environment
     await page.getByLabel('Manage Environments').click();
     await page.getByPlaceholder('Choose a global environment').click();

packages/insomnia-smoke-test/tests/smoke/request-pane-tab.test.ts

@@ -1,3 +1,5 @@
+import { expect } from '@playwright/test';
+
 import { test } from '../../playwright/test';
 
 test('Request tabs', async ({ page }) => {
@@ -24,7 +26,8 @@ test('WS tabs', async ({ page }) => {
   await page.getByLabel('Create in collection').click();
   await page.getByRole('menuitemradio', { name: 'WebSocket Request' }).click();
   // ensure that the websocket request is created
-  await page.getByLabel('Insomnia Tabs').getByText('New WebSocket Request').click();
+  const newWebSocketRequest = page.getByLabel('Request Collection').getByRole('row', { name: 'New WebSocket Request' });
+  await expect.soft(newWebSocketRequest.first().locator('[data-selected="true"]').first()).toBeVisible();
   await page.getByRole('tab', { name: 'Body' }).click();
   await page.getByRole('button', { name: 'JSON' }).click();
   await page.getByRole('option', { name: 'JSON' }).click();

packages/insomnia-smoke-test/tests/smoke/template-tags-interactions.test.ts

@@ -123,13 +123,19 @@ test('Critical Path For Template Tags Interactions', async ({ page, app }) => {
 
   // test response template tags
   // send request first to populate response
-  await page.getByLabel('Request Collection').getByTestId('Base Response').press('Enter');
+  await page
+    .getByLabel('Request Collection')
+    .getByTestId('Base Response')
+    .click({ modifiers: ['ControlOrMeta'] });
   // Wait for tab appear
   await expect.soft(page.getByLabel('Insomnia Tabs').getByText('Base Response', { exact: true })).toBeVisible();
   await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
   const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
   await expect.soft(statusTag).toContainText('200 OK');
-  await page.getByLabel('Request Collection').getByTestId('Response Tag').press('Enter');
+  await page
+    .getByLabel('Request Collection')
+    .getByTestId('Response Tag')
+    .click({ modifiers: ['ControlOrMeta'] });
   await expect.soft(page.getByLabel('Insomnia Tabs').getByText('Response Tag', { exact: true })).toBeVisible();
   await page.getByText('Body', { exact: true }).click();
   for (const { tagPrefix, expectedResult } of templateTagTestCases.response) {

packages/insomnia/src/common/hotkeys.ts

@@ -39,6 +39,7 @@ export const keyboardShortcutDescriptions: Record<KeyboardShortcut, string> = {
   tab_nextTab: 'Next Tab',
   tab_previousTab: 'Previous Tab',
   tab_reopenClosedTab: 'Reopen Closed Tab',
+  request_openInNewTab: 'Open Request in New Tab',
 };
 
 /**
@@ -183,6 +184,10 @@ const defaultRegistry: HotKeyRegistry = {
     macKeys: [{ shift: true, meta: true, keyCode: keyboardKeys.t.keyCode }],
     winLinuxKeys: [{ ctrl: true, shift: true, keyCode: keyboardKeys.t.keyCode }],
   },
+  request_openInNewTab: {
+    macKeys: [{ meta: true, shift: true, keyCode: keyboardKeys.o.keyCode }],
+    winLinuxKeys: [{ ctrl: true, shift: true, keyCode: keyboardKeys.o.keyCode }],
+  },
 };
 
 /**

packages/insomnia/src/common/settings.ts

@@ -59,7 +59,8 @@ export type KeyboardShortcut =
   | 'close_tab'
   | 'tab_nextTab'
   | 'tab_previousTab'
-  | 'tab_reopenClosedTab';
+  | 'tab_reopenClosedTab'
+  | 'request_openInNewTab';
 
 /**
  * The collection of defined hotkeys.