fix: improve environment variable comparison by stripping UIDs (#7100)

Author: sid-bruno

packages/bruno-app/src/components/EnvironmentVariablesTable/index.js

@@ -13,6 +13,7 @@ import { variableNameRegex } from 'utils/common/regex';
 import toast from 'react-hot-toast';
 import { Tooltip } from 'react-tooltip';
 import { getGlobalEnvironmentVariables } from 'utils/collections';
+import { stripEnvVarUid } from 'utils/environments';
 
 const MIN_H = 35 * 2;
 const MIN_COLUMN_WIDTH = 80;
@@ -187,13 +188,13 @@ const EnvironmentVariablesTable = ({
   }, [environment.uid, hasDraftForThisEnv, draft?.variables]);
 
   const savedValuesJson = useMemo(() => {
-    return JSON.stringify(environment.variables || []);
+    return JSON.stringify((environment.variables || []).map(stripEnvVarUid));
   }, [environment.variables]);
 
   // Sync modified state
   useEffect(() => {
     const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
-    const currentValuesJson = JSON.stringify(currentValues);
+    const currentValuesJson = JSON.stringify(currentValues.map(stripEnvVarUid));
     const hasActualChanges = currentValuesJson !== savedValuesJson;
     setIsModified(hasActualChanges);
   }, [formik.values, savedValuesJson, setIsModified]);
@@ -202,11 +203,11 @@ const EnvironmentVariablesTable = ({
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       const currentValues = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
-      const currentValuesJson = JSON.stringify(currentValues);
+      const currentValuesJson = JSON.stringify(currentValues.map(stripEnvVarUid));
       const hasActualChanges = currentValuesJson !== savedValuesJson;
 
       const existingDraftVariables = hasDraftForThisEnv ? draft?.variables : null;
-      const existingDraftJson = existingDraftVariables ? JSON.stringify(existingDraftVariables) : null;
+      const existingDraftJson = existingDraftVariables ? JSON.stringify(existingDraftVariables.map(stripEnvVarUid)) : null;
 
       if (hasActualChanges) {
         if (currentValuesJson !== existingDraftJson) {
@@ -318,7 +319,8 @@ const EnvironmentVariablesTable = ({
     const variablesToSave = formik.values.filter((variable) => variable.name && variable.name.trim() !== '');
     const savedValues = environment.variables || [];
 
-    const hasChanges = JSON.stringify(variablesToSave) !== JSON.stringify(savedValues);
+    // Compare without UIDs since they can be different but the actual data is the same
+    const hasChanges = JSON.stringify(variablesToSave.map(stripEnvVarUid)) !== JSON.stringify(savedValues.map(stripEnvVarUid));
     if (!hasChanges) {
       toast.error('No changes to save');
       return;
@@ -441,8 +443,8 @@ const EnvironmentVariablesTable = ({
           </tr>
         )}
         fixedItemHeight={35}
-        computeItemKey={(index, item) => item.variable.uid}
-        itemContent={(index, { variable, index: actualIndex }) => {
+        computeItemKey={(virtualIndex, item) => `${environment.uid}-${item.index}`}
+        itemContent={(virtualIndex, { variable, index: actualIndex }) => {
           const isLastRow = actualIndex === formik.values.length - 1;
           const isEmptyRow = !variable.name || variable.name.trim() === '';
           const isLastEmptyRow = isLastRow && isEmptyRow;

packages/bruno-app/src/components/Preferences/General/index.js

@@ -47,8 +47,8 @@ const General = () => {
         .test('isNumber', 'Save Delay must be a number', (value) => {
           return value === undefined || !isNaN(value);
         })
-        .test('isValidInterval', 'Save Delay must be at least 100ms', (value) => {
-          return value === undefined || Number(value) >= 100;
+        .test('isValidInterval', 'Save Delay must be at least 500ms', (value) => {
+          return value === undefined || Number(value) >= 500;
         })
     }).test('intervalRequired', 'Save Delay is required when Auto Save is enabled', (value) => {
       // If autosave is enabled, interval must be provided

packages/bruno-app/src/utils/environments.js

@@ -50,3 +50,12 @@ export const buildEnvVariable = ({ envVariable: obj, withUuid = false }) => {
     ...envVariable
   };
 };
+
+/**
+ * Strips the UID from an environment variable for comparison purposes.
+ * This is useful when comparing variables where UIDs may differ but the actual data is the same.
+ */
+export const stripEnvVarUid = (variable) => {
+  const { name, value, type, enabled, secret } = variable;
+  return { name, value, type, enabled, secret };
+};

tests/environments/focus-retention/environment-focus.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '../../../playwright';
+import { createCollection, createEnvironment, closeAllCollections } from '../../utils/page';
+
+test.describe('Environment Variables Focus Retention', () => {
+  test.afterEach(async ({ page }) => {
+    if (!page.isClosed()) {
+      await closeAllCollections(page);
+    }
+  });
+
+  test('should keep focus on name input after save hotkey', async ({ page, createTmpDir }) => {
+    await createCollection(page, 'env-focus', await createTmpDir('env-focus'));
+    await createEnvironment(page, 'Focus Env', 'collection');
+
+    const nameInput = page.locator('input[name="0.name"]');
+    await nameInput.waitFor({ state: 'visible' });
+    await nameInput.click();
+    await page.keyboard.type('apiKey');
+    await expect(nameInput).toBeFocused();
+
+    await page.keyboard.press('Control+s');
+    await expect(page.getByText('Changes saved successfully').last()).toBeVisible({ timeout: 5000 });
+
+    // intentionally wait a few seconds because the focus is lost after a while
+    await page.waitForTimeout(1000);
+    await expect(nameInput).toBeFocused();
+  });
+});