From f411eb7f2152a744473892a381c7599f3e92dbe1 Mon Sep 17 00:00:00 2001 From: James Gatz Date: Fri, 26 Jul 2024 14:35:26 +0200 Subject: [PATCH] feat(Response Pane): improve tabs styles (#7765) * update tabs styling for response panes * Rename Timeline to Console in e2e tests * timeline -> console in mock panes * update e2e --- .../tests/critical/bundling.test.ts | 2 +- .../after-response-script-features.test.ts | 2 +- .../tests/smoke/app.test.ts | 6 +- .../smoke/cookie-editor-interactions.test.ts | 4 +- .../environment-editor-interactions.test.ts | 6 +- .../tests/smoke/mock.test.ts | 2 +- .../smoke/pre-request-script-features.test.ts | 6 +- .../smoke/pre-request-script-window.test.ts | 4 +- .../smoke/preferences-interactions.test.ts | 4 +- .../tests/smoke/websocket.test.ts | 8 +- .../components/mocks/mock-response-pane.tsx | 2 +- .../src/ui/components/panes/response-pane.tsx | 117 ++++++++++-------- .../websockets/realtime-response-pane.tsx | 97 ++++++++------- 13 files changed, 142 insertions(+), 118 deletions(-) diff --git a/packages/insomnia-smoke-test/tests/critical/bundling.test.ts b/packages/insomnia-smoke-test/tests/critical/bundling.test.ts index 77aab3dee..23e55bcf2 100644 --- a/packages/insomnia-smoke-test/tests/critical/bundling.test.ts +++ b/packages/insomnia-smoke-test/tests/critical/bundling.test.ts @@ -34,7 +34,7 @@ test('can use node-libcurl, httpsnippet, hidden browser window', async ({ app, p await page.getByLabel('Request Collection').getByTestId('sends request with pre-request script').press('Enter'); await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click(); await expect(statusTag).toContainText('200 OK'); - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); }); test('can use external modules in scripts ', async ({ app, page }) => { diff --git a/packages/insomnia-smoke-test/tests/smoke/after-response-script-features.test.ts b/packages/insomnia-smoke-test/tests/smoke/after-response-script-features.test.ts index e6288d94b..706447c86 100644 --- a/packages/insomnia-smoke-test/tests/smoke/after-response-script-features.test.ts +++ b/packages/insomnia-smoke-test/tests/smoke/after-response-script-features.test.ts @@ -28,7 +28,7 @@ test.describe('after-response script features tests', async () => { await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click(); // verify - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await expect(responsePane).toContainText('✓ happy tests'); await expect(responsePane).toContainText('✕ unhappy tests: AssertionError: expected 199 to deeply equal 200'); diff --git a/packages/insomnia-smoke-test/tests/smoke/app.test.ts b/packages/insomnia-smoke-test/tests/smoke/app.test.ts index 505d8ff47..dfb130f3b 100644 --- a/packages/insomnia-smoke-test/tests/smoke/app.test.ts +++ b/packages/insomnia-smoke-test/tests/smoke/app.test.ts @@ -45,7 +45,7 @@ test('can send requests', async ({ app, page }) => { await page.getByLabel('Request Collection').getByTestId('connects to event stream and shows ping response').press('Enter'); await page.getByTestId('request-pane').getByRole('button', { name: 'Connect' }).click(); await expect(statusTag).toContainText('200 OK'); - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await expect(responseBody).toContainText('Connected to 127.0.0.1'); await page.getByTestId('request-pane').getByRole('button', { name: 'Disconnect' }).click(); @@ -66,7 +66,7 @@ test('can send requests', async ({ app, page }) => { await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click(); await expect(statusTag).toContainText('200 OK'); // TODO(filipe): re-add a check for the preview that is less flaky - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await page.locator('pre').filter({ hasText: '< Content-Type: application/pdf' }).click(); await page.getByLabel('Request Collection').getByTestId('sends request with basic authentication').press('Enter'); @@ -77,7 +77,7 @@ test('can send requests', async ({ app, page }) => { await page.getByLabel('Request Collection').getByTestId('sends request with cookie and get cookie in response').press('Enter'); await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click(); await expect(statusTag).toContainText('200 OK'); - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await expect(responseBody).toContainText('Set-Cookie: insomnia-test-cookie=value123'); }); diff --git a/packages/insomnia-smoke-test/tests/smoke/cookie-editor-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/cookie-editor-interactions.test.ts index 7e69c938e..41bd1308f 100644 --- a/packages/insomnia-smoke-test/tests/smoke/cookie-editor-interactions.test.ts +++ b/packages/insomnia-smoke-test/tests/smoke/cookie-editor-interactions.test.ts @@ -44,7 +44,7 @@ test.describe('Cookie editor', async () => { await page.click('[data-testid="request-pane"] button:has-text("Send")'); // Check in the timeline that the cookie was sent - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await page.click('text=foo2=bar2; foo=b123ar'); // Send ws request @@ -53,7 +53,7 @@ test.describe('Cookie editor', async () => { await page.click('[data-testid="request-pane"] >> text=Connect'); // Check in the timeline that the cookie was sent - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await page.click('text=foo2=bar2; foo=b123ar;'); }); diff --git a/packages/insomnia-smoke-test/tests/smoke/environment-editor-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/environment-editor-interactions.test.ts index ba78a8200..d8a1558a5 100644 --- a/packages/insomnia-smoke-test/tests/smoke/environment-editor-interactions.test.ts +++ b/packages/insomnia-smoke-test/tests/smoke/environment-editor-interactions.test.ts @@ -30,7 +30,7 @@ test.describe('Environment Editor', async () => { // Send a request check variables defaulted to base env since new env is empty await page.getByLabel('Request Collection').getByTestId('New Request').press('Enter'); await page.getByRole('button', { name: 'Send' }).click(); - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await page.getByText('baseenv0').click(); await page.getByText('baseenv1').click(); }); @@ -53,7 +53,7 @@ test.describe('Environment Editor', async () => { await page.getByLabel('Request Collection').getByTestId('New Request').press('Enter'); // await page.waitForTimeout(60000); await page.getByRole('button', { name: 'Send' }).click(); - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await page.getByText('subenvB0').click(); await page.getByText('subenvB1').click(); }); @@ -94,7 +94,7 @@ test.describe('Environment Editor', async () => { // Check new variables are in the timeline await page.getByRole('button', { name: 'Send' }).click(); - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); // FIXME(filipe) - adding variables to request body can be so fast they don't get picked up when sending request diff --git a/packages/insomnia-smoke-test/tests/smoke/mock.test.ts b/packages/insomnia-smoke-test/tests/smoke/mock.test.ts index e91eb66e2..4ee6881db 100644 --- a/packages/insomnia-smoke-test/tests/smoke/mock.test.ts +++ b/packages/insomnia-smoke-test/tests/smoke/mock.test.ts @@ -15,6 +15,6 @@ test('can make a mock route: WARNING: THIS TEST DEPENDS ON mock.insomnia.moe to await page.getByRole('button', { name: 'Test' }).click(); await page.getByText('No body returned for response').click(); - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await page.getByText('HTTP/2 200').click(); }); diff --git a/packages/insomnia-smoke-test/tests/smoke/pre-request-script-features.test.ts b/packages/insomnia-smoke-test/tests/smoke/pre-request-script-features.test.ts index 4f896bc70..7fc81b26a 100644 --- a/packages/insomnia-smoke-test/tests/smoke/pre-request-script-features.test.ts +++ b/packages/insomnia-smoke-test/tests/smoke/pre-request-script-features.test.ts @@ -368,7 +368,7 @@ test.describe('pre-request features tests', async () => { await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click(); // verify - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await expect(responsePane).toContainText('localhost:2222'); // original proxy await expect(responsePane).toContainText('Trying 127.0.0.1:8888'); // updated proxy }); @@ -395,7 +395,7 @@ test.describe('pre-request features tests', async () => { // send await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click(); // verify - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await expect(responsePane).toContainText('fixtures/certificates/fake.pfx'); // original proxy }); @@ -408,7 +408,7 @@ test.describe('pre-request features tests', async () => { await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click(); // verify - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await expect(responsePane).toContainText('✓ happy tests'); await expect(responsePane).toContainText('✕ unhappy tests: AssertionError: expected 199 to deeply equal 200'); diff --git a/packages/insomnia-smoke-test/tests/smoke/pre-request-script-window.test.ts b/packages/insomnia-smoke-test/tests/smoke/pre-request-script-window.test.ts index 59c10c635..b644c146a 100644 --- a/packages/insomnia-smoke-test/tests/smoke/pre-request-script-window.test.ts +++ b/packages/insomnia-smoke-test/tests/smoke/pre-request-script-window.test.ts @@ -54,8 +54,8 @@ test.describe('test hidden window handling', async () => { await page.waitForSelector('[data-testid="response-status-tag"]:visible'); expect(await page.locator('.pane-two pre').innerText()).toEqual('Timeout: Running script took too long'); - await page.getByRole('tab', { name: 'Timeline' }).click(); - await page.getByRole('tab', { name: 'Preview ' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); + await page.getByRole('tab', { name: 'Preview' }).click(); const windows = await app.windows(); const hiddenWindow = windows[1]; hiddenWindow.close(); diff --git a/packages/insomnia-smoke-test/tests/smoke/preferences-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/preferences-interactions.test.ts index 59d92a8fa..f8ff13308 100644 --- a/packages/insomnia-smoke-test/tests/smoke/preferences-interactions.test.ts +++ b/packages/insomnia-smoke-test/tests/smoke/preferences-interactions.test.ts @@ -29,7 +29,7 @@ test('Check filter responses by environment preference', async ({ app, page }) = // Send a request await page.getByLabel('Request Collection').getByTestId('example http').press('Enter'); await page.click('[data-testid="request-pane"] button:has-text("Send")'); - await page.click('text=Timeline'); + await page.click('text=Console'); await page.locator('text=HTTP/1.1 200 OK').click(); // Set filter responses by environment @@ -40,6 +40,6 @@ test('Check filter responses by environment preference', async ({ app, page }) = // Re-send the request and check timeline await page.locator('[data-testid="request-pane"] button:has-text("Send")').click(); - await page.click('text=Timeline'); + await page.click('text=Console'); await page.locator('text=HTTP/1.1 200 OK').click(); }); diff --git a/packages/insomnia-smoke-test/tests/smoke/websocket.test.ts b/packages/insomnia-smoke-test/tests/smoke/websocket.test.ts index 417051f7c..2bff78b5f 100644 --- a/packages/insomnia-smoke-test/tests/smoke/websocket.test.ts +++ b/packages/insomnia-smoke-test/tests/smoke/websocket.test.ts @@ -25,7 +25,7 @@ test('can make websocket connection', async ({ app, page }) => { await expect(page.locator('.app')).toContainText('ws://localhost:4010'); await page.click('text=Connect'); await expect(statusTag).toContainText('101 Switching Protocols'); - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await expect(responseBody).toContainText('WebSocket connection established'); await page.click('text=Disconnect'); await expect(responseBody).toContainText('Closing connection with code 1005'); @@ -35,7 +35,7 @@ test('can make websocket connection', async ({ app, page }) => { await expect(page.locator('.app')).toContainText('ws://localhost:4010/basic-auth'); await page.click('text=Connect'); await expect(statusTag).toContainText('101 Switching Protocols'); - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await expect(responseBody).toContainText('> authorization: Basic dXNlcjpwYXNzd29yZA=='); // Can connect with Bearer Auth @@ -43,7 +43,7 @@ test('can make websocket connection', async ({ app, page }) => { await expect(page.locator('.app')).toContainText('ws://localhost:4010/bearer'); await page.click('text=Connect'); await expect(statusTag).toContainText('101 Switching Protocols'); - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await expect(responseBody).toContainText('> authorization: Bearer insomnia-cool-token-!!!1112113243111'); // Can handle redirects @@ -51,7 +51,7 @@ test('can make websocket connection', async ({ app, page }) => { await expect(page.locator('.app')).toContainText('ws://localhost:4010/redirect'); await page.click('text=Connect'); await expect(statusTag).toContainText('101 Switching Protocols'); - await page.getByRole('tab', { name: 'Timeline' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); await expect(responseBody).toContainText('WebSocket connection established'); const webSocketActiveConnections = page.locator('[data-testid="WebSocketSpinner__Connected"]'); diff --git a/packages/insomnia/src/ui/components/mocks/mock-response-pane.tsx b/packages/insomnia/src/ui/components/mocks/mock-response-pane.tsx index d339df478..6c8fca93b 100644 --- a/packages/insomnia/src/ui/components/mocks/mock-response-pane.tsx +++ b/packages/insomnia/src/ui/components/mocks/mock-response-pane.tsx @@ -120,7 +120,7 @@ export const MockResponsePane = () => { - + = ({ /> )} - - + + + Preview + + + Headers + {activeResponse.headers.length > 0 && ( + {activeResponse.headers.length} + )} + + + Cookies + {cookieHeaders.length > 0 && ( + {cookieHeaders.length} + )} + + + → Mock + + + Console + + + + - } - > + = ({ updateFilter={activeResponse.error ? undefined : handleSetFilter} url={activeResponse.url} /> - - - Headers - {activeResponse.headers.length > 0 && ( - {activeResponse.headers.length} - )} - - } + + + + + + + + + + + + + - - - - - - - - Cookies - {cookieHeaders.length > 0 && ( - {cookieHeaders.length} - )} - - } - > - - - - - - - + + + + - - - - + {isExecuting && activeResponse={response} /> - - + + + + Events + + + Headers + {response.headers.length > 0 && ( + {response.headers.length} + )} + + + Cookies + {cookieHeaders.length > 0 && ( + {cookieHeaders.length} + )} + + + Console + + + {response.error ? : <> @@ -210,52 +241,28 @@ const RealtimeActiveResponsePane: FC<{ response: WebSocketResponse | Response }> )} } - - - Headers - {response.headers.length > 0 && ( - {response.headers.length} - )} - - } - > - - - - - - - - Cookies - {cookieHeaders.length > 0 && ( - {cookieHeaders.length} - )} - - } - > - - - - - - - + + + + + + + + + + + + - + );