Fixed Env Variables from disappearing (#2835)

Co-authored-by: Soham Dessai <sohamdessai@sohams-mbp.mynetworksettings.com>

dashboard/src/main/home/cluster-dashboard/env-groups/ExpandedEnvGroup.tsx

@@ -478,7 +478,39 @@ const EnvGroupVariablesEditor = ({
   handleUpdateValues: () => void;
 }) => {
   const [isAuthorized] = useAuth();
+  const [localVariables, setLocalVariables] = useState(variables);
 
+  const handleVisibilityChange = () => {
+    if (document.hidden) {
+      localStorage.setItem("envGroupVariables", JSON.stringify(localVariables));
+    } else {
+      const savedVariables = localStorage.getItem("envGroupVariables");
+      if (savedVariables) {
+        setLocalVariables(JSON.parse(savedVariables));
+        localStorage.removeItem("envGroupVariables");
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [localVariables]);
+
+  useEffect(() => {
+    return () => {
+      // Reset to the original state when the component is unmounted
+      localStorage.removeItem("envGroupVariables");
+    };
+  }, []);
+
+  const handleUpdate = () => {
+    handleUpdateValues();
+    localStorage.removeItem("envGroupVariables");
+  };
   return (
     <TabWrapper>
       <InnerWrapper>
@@ -488,8 +520,9 @@ const EnvGroupVariablesEditor = ({
           configuration.
         </Helper>
         <EnvGroupArray
-          values={variables}
-          setValues={(x: any) => {
+          values={localVariables}
+          setValues={(x) => {
+            setLocalVariables(x);
             onChange(x);
           }}
           fileUpload={true}
@@ -507,7 +540,7 @@ const EnvGroupVariablesEditor = ({
       {isAuthorized("env_group", "", ["get", "update"]) && (
         <SaveButton
           text="Update"
-          onClick={() => handleUpdateValues()}
+          onClick={handleUpdate}
           status={buttonStatus}
           makeFlush={true}
           clearPosition={true}