From bb7916c399e75b161e96e5ba0540843eba43f678 Mon Sep 17 00:00:00 2001 From: oahmed-OS Date: Tue, 14 May 2024 01:39:50 -0500 Subject: [PATCH] fix: environment edit modal save (#7371) * fix: environment edit modal save * add onBlur --------- Co-authored-by: jackkav --- .../smoke/debug-sidebar-interactions.test.ts | 73 +++++++++++++++++++ .../modals/environment-edit-modal.tsx | 41 ++++++----- 2 files changed, 96 insertions(+), 18 deletions(-) diff --git a/packages/insomnia-smoke-test/tests/smoke/debug-sidebar-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/debug-sidebar-interactions.test.ts index 05cb159bd..0a1b179b0 100644 --- a/packages/insomnia-smoke-test/tests/smoke/debug-sidebar-interactions.test.ts +++ b/packages/insomnia-smoke-test/tests/smoke/debug-sidebar-interactions.test.ts @@ -145,6 +145,79 @@ test.describe('Debug-Sidebar', async () => { await page.getByLabel('Request Collection').getByRole('row', { name: 'New Request' }).click(); }); + test('Add new string variable via environment overrides', async ({ page }) => { + // Create new Folder + await page.getByLabel('Create in collection').click(); + await page.getByLabel('New Folder').click(); + await page.locator('#prompt-input').fill('New Folder'); + await page.getByText('New Folder').press('Enter'); + + // Open 'New folder' folder + const folderLocator = page.getByTestId('Dropdown-New-Folder'); + const environmentLocator = page.getByRole('menuitemradio', { name: 'Environment' }); + await folderLocator.click(); + await environmentLocator.click(); + + // Add a new string environment variable + const expected = '{ "foo":"bar" }'; + const editorTextLocator = await page.getByTestId('CodeEditor').getByRole('textbox'); + const selectAllShortcut = process.platform === 'darwin' ? 'Meta+A' : 'Control+A'; + await editorTextLocator.press(selectAllShortcut); + await editorTextLocator.fill(expected); + + // Close and re-open modal + await page.getByText('Close').click(); + await folderLocator.click(); + await environmentLocator.click(); + + // Validate expected values persisted + const actualRows = await page.getByTestId('CodeEditor').locator('.CodeMirror-line').allInnerTexts(); + expect(actualRows.length).toBeGreaterThan(0); + + const actualJSON = JSON.parse(actualRows.join(' ')); + expect(actualJSON).toEqual(JSON.parse(expected)); + }); + + test('Add new string variable to an existing environment overrides folder', async ({ page }) => { + // Open 'Test Folder' folder + const folderLocator = page.getByTestId('Dropdown-test-folder'); + const environmentLocator = page.getByRole('menuitemradio', { name: 'Environment' }); + await folderLocator.click(); + await environmentLocator.click(); + + // Add a new string environment variable to existing overrides + + // 1. Retrieve current editor rows + const editorLocator = page.getByTestId('CodeEditor').locator('.CodeMirror-line'); + const rows = await editorLocator.allInnerTexts(); + + // 2. Merge rows and convert to JSON + const editorJSON = JSON.parse(rows.join(' ')); + + // 3. Modify JSON with new string environment variable + editorJSON.REQUEST = 'HTTP'; + const expected = editorJSON; + + // 4. Apply new JSON to editor + const editorTextLocator = await page.getByTestId('CodeEditor').getByRole('textbox'); + const selectAllShortcut = process.platform === 'darwin' ? 'Meta+A' : 'Control+A'; + await editorTextLocator.press(selectAllShortcut); + await editorTextLocator.fill(JSON.stringify(expected)); + + // Close and re-open Modal + await page.getByText('Close').click(); + await folderLocator.click(); + await environmentLocator.click(); + + // Validate expected values persisted + const actualRows = await editorLocator.allInnerTexts(); + expect(actualRows.length).toBeGreaterThan(0); + + const actualJSON = JSON.parse(actualRows.join(' ')); + expect(actualJSON).toEqual(expected); + + }); + // TODO: more scenarios will be added in follow-up iterations of increasing test coverage }); }); diff --git a/packages/insomnia/src/ui/components/modals/environment-edit-modal.tsx b/packages/insomnia/src/ui/components/modals/environment-edit-modal.tsx index 9f0a89e07..935001372 100644 --- a/packages/insomnia/src/ui/components/modals/environment-edit-modal.tsx +++ b/packages/insomnia/src/ui/components/modals/environment-edit-modal.tsx @@ -1,7 +1,7 @@ import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'; -import * as models from '../../../models/index'; import { RequestGroup } from '../../../models/request-group'; +import { useRequestGroupPatcher } from '../../hooks/use-request'; import { Modal, type ModalHandle, ModalProps } from '../base/modal'; import { ModalBody } from '../base/modal-body'; import { ModalFooter } from '../base/modal-footer'; @@ -36,35 +36,40 @@ export const EnvironmentEditModal = forwardRef { + setState({ requestGroup }); + if (environmentEditorRef.current?.isValid()) { + try { + const data = environmentEditorRef.current?.getValue(); + if (state.requestGroup && data) { + patchGroup(state.requestGroup._id, { + environment: data.object, + environmentPropertyOrder: data.propertyOrder, + }); + } + } catch (err) { + console.warn('Failed to update environment', err); + } + } + + }; + return ( - + Environment Overrides (JSON Format) { - setState({ requestGroup }); - if (environmentEditorRef.current?.isValid()) { - try { - const data = environmentEditorRef.current?.getValue(); - if (state.requestGroup && data) { - models.requestGroup.update(state.requestGroup, { - environment: data.object, - environmentPropertyOrder: data.propertyOrder, - }); - } - } catch (err) { - console.warn('Failed to update environment', err); - } - } - }} + onBlur={saveChanges} />