Fix environment key-value editor state not update issue[INS-4751] (#8199

) * Fix kv table status not updated issue * Add smoke test
Kong · Nov 26, 2024 · 76934ec · 76934ec
1 parent bb1dd84
commit 76934ec
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 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
@@ -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
@@ -19,6 +19,7 @@ interface Props<T> {
   tabIndex?: number;
   title?: string;
   fullWidth?: boolean;
+  ariaLabel?: string;
   onClick?: (event: MouseEvent<HTMLButtonElement>, value?: T) => void;
   referToOnClickReturnValue?: boolean;
 }
@@ -33,6 +34,7 @@ export const PromptButton = <T, >({
   title,
   className,
   fullWidth = false,
+  ariaLabel,
   children,
   referToOnClickReturnValue = false,
 }: PropsWithChildren<Props<T>>) => {
@@ -105,6 +107,7 @@ export const PromptButton = <T, >({
       tabIndex={tabIndex}
       title={title}
       className={className}
+      aria-label={ariaLabel}
       style={{
         width: fullWidth ? '100%' : 'auto',
       }}

diff --git a/...ages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx b/...ages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx
@@ -222,13 +222,13 @@ export const EnvironmentKVEditor = ({ data, onChange }: EditorProps) => {
                 }
               }}
             >
-              <i className="fa fa-pencil-square-o space-right" />Click to Edit
+              <i className="fa fa-pencil-square-o space-right" aria-label='Edit JSON' />Click to Edit
             </ItemButton>
           }
         </div>
         <div className={`${cellCommonStyle} w-32`} >
           <MenuTrigger>
-            <ItemButton className="py-1 px-[--padding-sm] w-full font-bold flex flex-1 items-center justify-between aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] text-sm" tabIndex={-1}>
+            <ItemButton className="py-1 px-[--padding-sm] w-full font-bold flex flex-1 items-center justify-between aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] text-sm" tabIndex={-1} aria-label='Type Selection'>
               <span className="flex truncate items-center justify-center gap-2" >{kvPairItemTypes.find(t => t.id === type)?.name}</span>
               <Icon icon="caret-down" />
             </ItemButton>
@@ -271,6 +271,7 @@ export const EnvironmentKVEditor = ({ data, onChange }: EditorProps) => {
           <ItemButton
             className="flex items-center justify-center h-7 aspect-square rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
             tabIndex={-1}
+            aria-label={enabled ? 'Disable Row' : 'Enable Row'}
             onPress={() => handleItemChange(id, 'enabled', !enabled)}
           >
             <Icon icon={enabled ? 'check-square' : 'square'} />
@@ -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) => {
       <Toolbar className="content-box z-10 bg-[var(--color-bg)] flex flex-shrink-0 h-[var(--line-height-sm)] text-[var(--font-size-sm)]">
         <Button
           className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+          aria-label='Add Row'
           onPress={() => {
             handleAddItem();
           }}
@@ -306,6 +309,7 @@ export const EnvironmentKVEditor = ({ data, onChange }: EditorProps) => {
           onClick={() => {
             onChange([]);
           }}
+          ariaLabel='Delete All'
           className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
         >
           <Icon icon="trash-can" />
@@ -316,7 +320,7 @@ export const EnvironmentKVEditor = ({ data, onChange }: EditorProps) => {
         aria-label='Environment Key Value Pair'
         selectionMode='none'
         dragAndDropHooks={dragAndDropHooks}
-        dependencies={[kvPairError]}
+        dependencies={[kvPairError, data]}
         className="p-[--padding-sm] w-full overflow-y-auto h-full"
         items={kvPairs}
       >

diff --git a/packages/insomnia/src/ui/components/modals/code-prompt-modal.tsx b/packages/insomnia/src/ui/components/modals/code-prompt-modal.tsx
@@ -169,7 +169,7 @@ export const CodePromptModal = forwardRef<CodePromptModalHandle, ModalProps>((_,
         ) : null}
         <div className="margin-left faint italic txt-sm">{hint ? `* ${hint}` : ''}</div>
         {error !== '' && <p className="notice error w-full" style={{ marginTop: 0, marginBottom: 0 }}>{error}</p>}
-        <button className="btn" onClick={() => modalRef.current?.hide()} disabled={error !== ''}>
+        <button className="btn" onClick={() => modalRef.current?.hide()} disabled={error !== ''} aria-label='Modal Submit'>
           {submitName || 'Submit'}
         </button>
       </ModalFooter>

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
@@ -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 }) => (
                           <Fragment>

diff --git 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 }) => (
                   <Fragment>