From 8648f49d4dec37a056014bc58a6a0aada77e6f82 Mon Sep 17 00:00:00 2001 From: Jack Kavanagh Date: Wed, 12 Jun 2024 10:05:42 +0200 Subject: [PATCH] move env editor to folder tab (#7534) * move env editor to folder tab * remove old unused test --- .../smoke/debug-sidebar-interactions.test.ts | 75 ---------------- .../ui/components/codemirror/code-editor.tsx | 2 +- .../request-group-actions-dropdown.tsx | 7 -- .../modals/environment-edit-modal.tsx | 86 ------------------- .../components/panes/request-group-pane.tsx | 42 ++++++++- packages/insomnia/src/ui/routes/modals.tsx | 5 -- 6 files changed, 42 insertions(+), 175 deletions(-) delete mode 100644 packages/insomnia/src/ui/components/modals/environment-edit-modal.tsx 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 fdf006b1d..e0720b4d4 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 @@ -144,80 +144,5 @@ test.describe('Debug-Sidebar', async () => { await page.getByRole('menuitemradio', { name: 'Http Request' }).click(); 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/codemirror/code-editor.tsx b/packages/insomnia/src/ui/components/codemirror/code-editor.tsx index 6743cd81c..dac0bda90 100644 --- a/packages/insomnia/src/ui/components/codemirror/code-editor.tsx +++ b/packages/insomnia/src/ui/components/codemirror/code-editor.tsx @@ -91,7 +91,7 @@ export interface CodeEditorProps { noLint?: boolean; noMatchBrackets?: boolean; noStyleActiveLine?: boolean; - // used only for saving env editor state + // used only for saving env editor state, focusEvent doesn't work well onBlur?: (e: FocusEvent) => void; onChange?: (value: string) => void; onPaste?: (value: string) => string; diff --git a/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx index 20f608d42..6318feb20 100644 --- a/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx +++ b/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx @@ -19,7 +19,6 @@ import { type DropdownHandle, type DropdownProps } from '../base/dropdown'; import { Icon } from '../icon'; import { showError, showModal, showPrompt } from '../modals'; import { AskModal } from '../modals/ask-modal'; -import { EnvironmentEditModal } from '../modals/environment-edit-modal'; import { PasteCurlModal } from '../modals/paste-curl-modal'; import { RequestGroupSettingsModal } from '../modals/request-group-settings-modal'; interface Props extends Partial { @@ -226,12 +225,6 @@ export const RequestGroupActionsDropdown = ({ hint: hotKeyRegistry.request_createHTTP, action: () => handleRequestGroupDuplicate(), }, - { - id: 'Environment', - name: 'Environment', - icon: 'code', - action: () => showModal(EnvironmentEditModal, { requestGroup }), - }, { id: 'Rename', name: 'Rename', diff --git a/packages/insomnia/src/ui/components/modals/environment-edit-modal.tsx b/packages/insomnia/src/ui/components/modals/environment-edit-modal.tsx deleted file mode 100644 index 935001372..000000000 --- a/packages/insomnia/src/ui/components/modals/environment-edit-modal.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'; - -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'; -import { ModalHeader } from '../base/modal-header'; -import { EnvironmentEditor, EnvironmentEditorHandle } from '../editors/environment-editor'; - -interface State { - requestGroup: RequestGroup | null; -} - -export interface EnvironmentEditModalOptions { - requestGroup: RequestGroup; -} -export interface EnvironmentEditModalHandle { - show: (options: EnvironmentEditModalOptions) => void; - hide: () => void; -} -export const EnvironmentEditModal = forwardRef((props, ref) => { - const modalRef = useRef(null); - const environmentEditorRef = useRef(null); - const [state, setState] = useState({ - requestGroup: null, - }); - - useImperativeHandle(ref, () => ({ - hide: () => { - modalRef.current?.hide(); - }, - show: ({ requestGroup }) => { - setState(state => ({ ...state, requestGroup })); - modalRef.current?.show(); - }, - }), []); - - const patchGroup = useRequestGroupPatcher(); - const { requestGroup } = state; - const environmentInfo = { - object: requestGroup ? requestGroup.environment : {}, - propertyOrder: requestGroup && requestGroup.environmentPropertyOrder, - }; - - const saveChanges = () => { - 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) - - - - -
- * Used to override data in the global environment -
- - - - ); -}); -EnvironmentEditModal.displayName = 'EnvironmentEditModal'; diff --git a/packages/insomnia/src/ui/components/panes/request-group-pane.tsx b/packages/insomnia/src/ui/components/panes/request-group-pane.tsx index 40e0440db..773c62238 100644 --- a/packages/insomnia/src/ui/components/panes/request-group-pane.tsx +++ b/packages/insomnia/src/ui/components/panes/request-group-pane.tsx @@ -1,4 +1,4 @@ -import React, { FC, useState } from 'react'; +import React, { FC, useRef, useState } from 'react'; import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components'; import { useRouteLoaderData } from 'react-router-dom'; @@ -8,6 +8,7 @@ import { useActiveRequestSyncVCSVersion, useGitVCSVersion } from '../../hooks/us import { RequestGroupLoaderData } from '../../routes/request-group'; import { WorkspaceLoaderData } from '../../routes/workspace'; import { AuthWrapper } from '../editors/auth/auth-wrapper'; +import { EnvironmentEditor, EnvironmentEditorHandle } from '../editors/environment-editor'; import { RequestHeadersEditor } from '../editors/request-headers-editor'; import { RequestScriptEditor } from '../editors/request-script-editor'; import { ErrorBoundary } from '../error-boundary'; @@ -25,7 +26,24 @@ export const RequestGroupPane: FC<{ settings: Settings }> = ({ settings }) => { const uniqueKey = `${activeEnvironment?.modified}::${activeRequestGroup._id}::${gitVersion}::${activeRequestSyncVersion}`; const folderHeaders = activeRequestGroup?.headers || []; const headersCount = folderHeaders.filter(h => !h.disabled)?.length || 0; + const environmentEditorRef = useRef(null); + const patchGroup = useRequestGroupPatcher(); + const saveChanges = () => { + if (environmentEditorRef.current?.isValid()) { + try { + const data = environmentEditorRef.current?.getValue(); + if (activeRequestGroup && data) { + patchGroup(activeRequestGroup._id, { + environment: data.object, + environmentPropertyOrder: data.propertyOrder, + }); + } + } catch (err) { + console.warn('Failed to update environment', err); + } + } + }; return ( <> @@ -58,6 +76,12 @@ export const RequestGroupPane: FC<{ settings: Settings }> = ({ settings }) => { )} + + Environment + = ({ settings }) => { + + + + + {activeRequestGroup.description ? (
diff --git a/packages/insomnia/src/ui/routes/modals.tsx b/packages/insomnia/src/ui/routes/modals.tsx index 303aca4f7..96a8ce78c 100644 --- a/packages/insomnia/src/ui/routes/modals.tsx +++ b/packages/insomnia/src/ui/routes/modals.tsx @@ -7,7 +7,6 @@ import { AddKeyCombinationModal } from '../components/modals/add-key-combination import { AlertModal } from '../components/modals/alert-modal'; import { AskModal } from '../components/modals/ask-modal'; import { CodePromptModal } from '../components/modals/code-prompt-modal'; -import { EnvironmentEditModal } from '../components/modals/environment-edit-modal'; import { ErrorModal } from '../components/modals/error-modal'; import { FilterHelpModal } from '../components/modals/filter-help-modal'; import { GenerateCodeModal } from '../components/modals/generate-code-modal'; @@ -72,10 +71,6 @@ const Modals: FC = () => { ref={instance => registerModal(instance, 'ResponseDebugModal')} /> - registerModal(instance, 'EnvironmentEditModal')} - /> - registerModal(instance, 'AddKeyCombinationModal')} />