Prevent losing unsaved environment variable data when attempting to change env (#2034)

* trying to begin changes * Env bug fixed with only switching env when saved * dialog box working, formik in EnvironmentSettings to pass props, selectedEnvironment in EnvrionmentSettings to pass props * Removing some uneccessary comments * no immediate following dialog pop up after warning dialog * Wrapping commit warning moidal in CreatePortal, removing unnecessary isModified state, removing comments * modifying dialog and adding formik back to EnvironmentVariables * Removing unnecessary comments --------- Co-authored-by: Anoop M D <anoop.md1421@gmail.com>
2024-12-23 15:19:01 +01:00 · 2024-04-26 04:41:05 -04:00 · 2024-04-26 04:41:05 -04:00 · c17e4effe7
commit c17e4effe7
parent 16861c9889
5 changed files with 129 additions and 19 deletions
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/ConfirmSwitchEnv.js
@ -0,0 +1,42 @@
+import React from 'react';
+import { IconAlertTriangle } from '@tabler/icons';
+import Modal from 'components/Modal';
+import { createPortal } from 'react-dom';
+
+const ConfirmSwitchEnv = ({ onCancel }) => {
+  return createPortal(
+    <Modal
+      size="md"
+      title="Unsaved changes"
+      confirmText="Save and Close"
+      cancelText="Close without saving"
+      disableEscapeKey={true}
+      disableCloseOnOutsideClick={true}
+      closeModalFadeTimeout={150}
+      handleCancel={onCancel}
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+      hideFooter={true}
+    >
+      <div className="flex items-center font-normal">
+        <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
+        <h1 className="ml-2 text-lg font-semibold">Hold on..</h1>
+      </div>
+      <div className="font-normal mt-4">You have unsaved changes in this environment.</div>
+
+      <div className="flex justify-between mt-6">
+        <div>
+          <button className="btn btn-sm btn-danger" onClick={onCancel}>
+            Close
+          </button>
+        </div>
+        <div></div>
+      </div>
+    </Modal>,
+    document.body
+  );
+};
+
+export default ConfirmSwitchEnv;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@ -1,19 +1,19 @@
 import React from 'react';
-import toast from 'react-hot-toast';
-import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
-import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
+import { uuid } from 'utils/common';
+import { maskInputValue } from 'utils/collections';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { uuid } from 'utils/common';
 import { variableNameRegex } from 'utils/common/regex';
-import { maskInputValue } from 'utils/collections';
+import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
+import cloneDeep from 'lodash/cloneDeep';
+import toast from 'react-hot-toast';

-const EnvironmentVariables = ({ environment, collection }) => {
+const EnvironmentVariables = ({ environment, collection, setIsModified, originalEnvironmentVariables }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();

@ -46,11 +46,17 @@ const EnvironmentVariables = ({ environment, collection }) => {
        .then(() => {
          toast.success('Changes saved successfully');
          formik.resetForm({ values });
+          setIsModified(false);
        })
        .catch(() => toast.error('An error occurred while saving the changes'));
    }
  });

+  // Effect to track modifications.
+  React.useEffect(() => {
+    setIsModified(formik.dirty);
+  }, [formik.dirty]);
+
  const ErrorMessage = ({ name }) => {
    const meta = formik.getFieldMeta(name);
    if (!meta.error) {
@ -80,6 +86,10 @@ const EnvironmentVariables = ({ environment, collection }) => {
    formik.setValues(formik.values.filter((variable) => variable.uid !== id));
  };

+  const handleReset = () => {
+    formik.resetForm({ originalEnvironmentVariables });
+  };
+
  return (
    <StyledWrapper className="w-full mt-6 mb-6">
      <div className="h-[50vh] overflow-y-auto w-full">
@ -162,6 +172,9 @@ const EnvironmentVariables = ({ environment, collection }) => {
        <button type="submit" className="submit btn btn-md btn-secondary mt-2" onClick={formik.handleSubmit}>
          Save
        </button>
+        <button type="submit" className="ml-2 px-1 submit btn btn-md btn-secondary mt-2" onClick={handleReset}>
+          Reset
+        </button>
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@ -5,7 +5,7 @@ import DeleteEnvironment from '../../DeleteEnvironment';
 import RenameEnvironment from '../../RenameEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';

-const EnvironmentDetails = ({ environment, collection }) => {
+const EnvironmentDetails = ({ environment, collection, setIsModified }) => {
  const [openEditModal, setOpenEditModal] = useState(false);
  const [openDeleteModal, setOpenDeleteModal] = useState(false);
  const [openCopyModal, setOpenCopyModal] = useState(false);
@ -38,7 +38,7 @@ const EnvironmentDetails = ({ environment, collection }) => {
      </div>

      <div>
-        <EnvironmentVariables key={environment.uid} environment={environment} collection={collection} />
+        <EnvironmentVariables environment={environment} collection={collection} setIsModified={setIsModified} />
      </div>
    </div>
  );
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
@ -1,4 +1,4 @@
-import React, { useEffect, useState, forwardRef, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { findEnvironmentInCollection } from 'utils/collections';
 import usePrevious from 'hooks/usePrevious';
 import EnvironmentDetails from './EnvironmentDetails';
@ -7,19 +7,23 @@ import { IconDownload, IconShieldLock } from '@tabler/icons';
 import ImportEnvironment from '../ImportEnvironment';
 import ManageSecrets from '../ManageSecrets';
 import StyledWrapper from './StyledWrapper';
+import ConfirmSwitchEnv from './ConfirmSwitchEnv';

-const EnvironmentList = ({ collection }) => {
+const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified }) => {
  const { environments } = collection;
-  const [selectedEnvironment, setSelectedEnvironment] = useState(null);
  const [openCreateModal, setOpenCreateModal] = useState(false);
  const [openImportModal, setOpenImportModal] = useState(false);
  const [openManageSecretsModal, setOpenManageSecretsModal] = useState(false);

+  const [switchEnvConfirmClose, setSwitchEnvConfirmClose] = useState(false);
+  const [originalEnvironmentVariables, setOriginalEnvironmentVariables] = useState([]);
+
  const envUids = environments ? environments.map((env) => env.uid) : [];
  const prevEnvUids = usePrevious(envUids);

  useEffect(() => {
    if (selectedEnvironment) {
+      setOriginalEnvironmentVariables(selectedEnvironment.variables);
      return;
    }

@ -32,7 +36,6 @@ const EnvironmentList = ({ collection }) => {
  }, [collection, environments, selectedEnvironment]);

  useEffect(() => {
-    // check env add
    if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {
      const newEnv = environments.find((env) => !prevEnvUids.includes(env.uid));
      if (newEnv) {
@ -40,23 +43,62 @@ const EnvironmentList = ({ collection }) => {
      }
    }

-    // check env delete
    if (prevEnvUids && prevEnvUids.length && envUids.length < prevEnvUids.length) {
      setSelectedEnvironment(environments && environments.length ? environments[0] : null);
    }
  }, [envUids, environments, prevEnvUids]);

+  const handleEnvironmentClick = (env) => {
+    if (!isModified) {
+      setSelectedEnvironment(env);
+    } else {
+      setSwitchEnvConfirmClose(true);
+    }
+  };
+
  if (!selectedEnvironment) {
    return null;
  }

+  const handleCreateEnvClick = () => {
+    if (!isModified) {
+      setOpenCreateModal(true);
+    } else {
+      setSwitchEnvConfirmClose(true);
+    }
+  };
+
+  const handleImportClick = () => {
+    if (!isModified) {
+      setOpenImportModal(true);
+    } else {
+      setSwitchEnvConfirmClose(true);
+    }
+  };
+
+  const handleSecretsClick = () => {
+    setOpenManageSecretsModal(true);
+  };
+
+  const handleConfirmSwitch = (saveChanges) => {
+    if (!saveChanges) {
+      setSwitchEnvConfirmClose(false);
+    }
+  };
+
  return (
    <StyledWrapper>
      {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
      {openImportModal && <ImportEnvironment collection={collection} onClose={() => setOpenImportModal(false)} />}
      {openManageSecretsModal && <ManageSecrets onClose={() => setOpenManageSecretsModal(false)} />}
+
      <div className="flex">
        <div>
+          {switchEnvConfirmClose && (
+            <div className="flex items-center justify-between tab-container px-1">
+              <ConfirmSwitchEnv onCancel={() => handleConfirmSwitch(false)} />
+            </div>
+          )}
          <div className="environments-sidebar flex flex-col">
            {environments &&
              environments.length &&
@ -64,28 +106,33 @@ const EnvironmentList = ({ collection }) => {
                <div
                  key={env.uid}
                  className={selectedEnvironment.uid === env.uid ? 'environment-item active' : 'environment-item'}
-                  onClick={() => setSelectedEnvironment(env)}
+                  onClick={() => handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle clicks
                >
                  <span className="break-all">{env.name}</span>
                </div>
              ))}
-            <div className="btn-create-environment" onClick={() => setOpenCreateModal(true)}>
+            <div className="btn-create-environment" onClick={() => handleCreateEnvClick()}>
              + <span>Create</span>
            </div>

            <div className="mt-auto btn-import-environment">
-              <div className="flex items-center" onClick={() => setOpenImportModal(true)}>
+              <div className="flex items-center" onClick={() => handleImportClick()}>
                <IconDownload size={12} strokeWidth={2} />
                <span className="label ml-1 text-xs">Import</span>
              </div>
-              <div className="flex items-center mt-2" onClick={() => setOpenManageSecretsModal(true)}>
+              <div className="flex items-center mt-2" onClick={() => handleSecretsClick()}>
                <IconShieldLock size={12} strokeWidth={2} />
                <span className="label ml-1 text-xs">Managing Secrets</span>
              </div>
            </div>
          </div>
        </div>
-        <EnvironmentDetails environment={selectedEnvironment} collection={collection} />
+        <EnvironmentDetails
+          environment={selectedEnvironment}
+          collection={collection}
+          setIsModified={setIsModified}
+          originalEnvironmentVariables={originalEnvironmentVariables}
+        />
      </div>
    </StyledWrapper>
  );
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@ -6,9 +6,11 @@ import StyledWrapper from './StyledWrapper';
 import ImportEnvironment from './ImportEnvironment';

 const EnvironmentSettings = ({ collection, onClose }) => {
+  const [isModified, setIsModified] = useState(false);
  const { environments } = collection;
  const [openCreateModal, setOpenCreateModal] = useState(false);
  const [openImportModal, setOpenImportModal] = useState(false);
+  const [selectedEnvironment, setSelectedEnvironment] = useState(null);

  if (!environments || !environments.length) {
    return (
@ -48,7 +50,13 @@ const EnvironmentSettings = ({ collection, onClose }) => {

  return (
    <Modal size="lg" title="Environments" handleCancel={onClose} hideFooter={true}>
-      <EnvironmentList collection={collection} />
+      <EnvironmentList
+        selectedEnvironment={selectedEnvironment}
+        setSelectedEnvironment={setSelectedEnvironment}
+        collection={collection}
+        isModified={isModified}
+        setIsModified={setIsModified}
+      />
    </Modal>
  );
 };