fix: environment edit modal save (#7371)

* fix: environment edit modal save

* add onBlur

---------

Co-authored-by: jackkav <jackkav@gmail.com>

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
   });
 });

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<EnvironmentEditModalHandle, Modal
     },
   }), []);
 
+  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 (
-    <Modal ref={modalRef} tall {...props}>
+    <Modal ref={modalRef} tall {...props} onHide={saveChanges}>
       <ModalHeader>Environment Overrides (JSON Format)</ModalHeader>
       <ModalBody noScroll className="pad-top-sm">
         <EnvironmentEditor
           ref={environmentEditorRef}
           key={requestGroup ? requestGroup._id : 'n/a'}
           environmentInfo={environmentInfo}
-          onBlur={() => {
-            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}
         />
       </ModalBody>
       <ModalFooter>