From 76934ecb310972968aa6ddbcc8d4c5ebdb1a1f1f Mon Sep 17 00:00:00 2001 From: Kent Wang Date: Tue, 26 Nov 2024 15:41:38 +0800 Subject: [PATCH] Fix environment key-value editor state not update issue[INS-4751] (#8199) * Fix kv table status not updated issue * Add smoke test --- .../environment-editor-interactions.test.ts | 56 +++++++++++++++++++ .../src/ui/components/base/prompt-button.tsx | 3 + .../key-value-editor.tsx | 10 +++- .../components/modals/code-prompt-modal.tsx | 2 +- .../workspace-environments-edit-modal.tsx | 1 + .../insomnia/src/ui/routes/environments.tsx | 1 + 6 files changed, 69 insertions(+), 4 deletions(-) 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 b1dff01aa71..13ec766d9ea 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 @@ -1,3 +1,5 @@ +import { expect } from '@playwright/test'; + import { loadFixture } from '../../playwright/paths'; import { test } from '../../playwright/test'; @@ -111,4 +113,58 @@ test.describe('Environment Editor', async () => { // await page.locator('pre').filter({ hasText: '| Gandalf' }).click(); }); + + test('Switch to table view and edit environment', async ({ page }) => { + await page.getByRole('button', { name: 'Manage Environments' }).click(); + await page.getByRole('button', { name: 'Manage collection environments' }).click(); + // switch table view + await page.getByRole('button', { name: 'Table Edit' }).click(); + const kvTable = await page.getByRole('listbox', { name: 'Environment Key Value Pair' }); + // disable row + await page.getByRole('button', { name: 'Disable Row' }).first().click(); + let firstRow = await kvTable.getByRole('option').first(); + // check row has been disabled + await expect(firstRow).toHaveCSS('opacity', '0.4'); + // delete all items + await page.getByRole('button', { name: 'Delete All' }).dblclick(); + + firstRow = await kvTable.getByRole('option').first(); + await firstRow.getByTestId('OneLineEditor').first().click(); + await page.keyboard.type('exampleString'); + await firstRow.getByTestId('OneLineEditor').nth(1).click(); + await page.keyboard.type('kvstring'); + // wait for editor update + await page.waitForTimeout(1000); + // add one more row + await page.getByRole('button', { name: 'Add Row' }).click(); + const secondRow = await kvTable.getByRole('option').nth(1); + await secondRow.getByTestId('OneLineEditor').first().click(); + await page.keyboard.type('exampleObject'); + // change type to json + await secondRow.getByRole('button', { name: 'Type Selection' }).click(); + await page.getByRole('menuitemradio', { name: 'JSON' }).click(); + await secondRow.getByRole('button', { name: 'Edit JSON' }).click(); + // wait for modal to show + await page.waitForTimeout(500); + const bodyEditor = await page.getByTestId('CodeEditor').getByRole('textbox'); + // move cursor right and input json string + await bodyEditor.focus(); + await bodyEditor.press('ArrowRight'); + await bodyEditor.fill('"anotherString":"kvAnotherStr","anotherNumber": 12345'); + await page.getByRole('button', { name: 'Modal Submit' }).click(); + // Let debounce finish + await page.waitForTimeout(1500); + + // Open request + await page.getByRole('button', { name: 'Close' }).click(); + await page.getByLabel('Manage collection environments').press('Escape'); + await page.getByLabel('Request Collection').getByTestId('New Request').press('Enter'); + await page.getByRole('button', { name: 'Send' }).click(); + await page.getByRole('tab', { name: 'Console' }).click(); + // check new environment value + await page.getByText('kvstring').click(); + await page.getByText('kvAnotherStr').click(); + await page.getByText('12345').click(); + }); + }); diff --git a/packages/insomnia/src/ui/components/base/prompt-button.tsx b/packages/insomnia/src/ui/components/base/prompt-button.tsx index e46d77d93f4..e88553f6a8b 100644 --- a/packages/insomnia/src/ui/components/base/prompt-button.tsx +++ b/packages/insomnia/src/ui/components/base/prompt-button.tsx @@ -19,6 +19,7 @@ interface Props { tabIndex?: number; title?: string; fullWidth?: boolean; + ariaLabel?: string; onClick?: (event: MouseEvent, value?: T) => void; referToOnClickReturnValue?: boolean; } @@ -33,6 +34,7 @@ export const PromptButton = ({ title, className, fullWidth = false, + ariaLabel, children, referToOnClickReturnValue = false, }: PropsWithChildren>) => { @@ -105,6 +107,7 @@ export const PromptButton = ({ tabIndex={tabIndex} title={title} className={className} + aria-label={ariaLabel} style={{ width: fullWidth ? '100%' : 'auto', }} diff --git a/packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx b/packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx index 3761adaf129..641a30c6486 100644 --- a/packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx +++ b/packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx @@ -222,13 +222,13 @@ export const EnvironmentKVEditor = ({ data, onChange }: EditorProps) => { } }} > - Click to Edit + Click to Edit }
- + {kvPairItemTypes.find(t => t.id === type)?.name} @@ -271,6 +271,7 @@ export const EnvironmentKVEditor = ({ data, onChange }: EditorProps) => { handleItemChange(id, 'enabled', !enabled)} > @@ -280,6 +281,7 @@ export const EnvironmentKVEditor = ({ data, onChange }: EditorProps) => { fullWidth confirmMessage='' doneMessage='' + ariaLabel='Delete Row' tabIndex={-1} onClick={() => handleDeleteItem(id)} > @@ -295,6 +297,7 @@ export const EnvironmentKVEditor = ({ data, onChange }: EditorProps) => { diff --git a/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx b/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx index 34960a562f9..9415c9ce384 100644 --- a/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx +++ b/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx @@ -459,6 +459,7 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: { }} isSelected={selectedEnvironment?.environmentType !== EnvironmentType.KVPAIR} className="w-[14ch] flex flex-shrink-0 gap-2 items-center justify-start px-2 py-1 rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-colors text-sm" + aria-label={selectedEnvironment?.environmentType !== EnvironmentType.KVPAIR ? 'Table Edit' : 'Raw Edit'} > {({ isSelected }) => ( diff --git a/packages/insomnia/src/ui/routes/environments.tsx b/packages/insomnia/src/ui/routes/environments.tsx index f49b3d4989a..5fd3ff51f31 100644 --- a/packages/insomnia/src/ui/routes/environments.tsx +++ b/packages/insomnia/src/ui/routes/environments.tsx @@ -476,6 +476,7 @@ const Environments = () => { }} isSelected={selectedEnvironment?.environmentType !== EnvironmentType.KVPAIR} className="w-[14ch] flex flex-shrink-0 gap-2 items-center justify-start px-2 py-1 rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-colors text-sm" + aria-label={selectedEnvironment?.environmentType !== EnvironmentType.KVPAIR ? 'Table Edit' : 'Raw Edit'} > {({ isSelected }) => (