fix review comments

Co-authored-by: Saikrishna321 <[email protected]>

Author: SrinivasanTarget

app/common/renderer/actions/Inspector.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-import {SAVED_FRAMEWORK, SET_SAVED_GESTURES} from '../../shared/setting-defs';
+import {SAVED_FRAMEWORK, SET_SAVED_GESTURES, ENVIRONMENT_VARIABLES} from '../../shared/setting-defs';
 import {POINTER_TYPES} from '../constants/gestures';
 import {APP_MODE, NATIVE_APP} from '../constants/session-inspector';
 import i18n from '../i18next';
@@ -360,6 +360,9 @@ export function quitSession(reason, killedByUser = true) {
     const applyAction = applyClientMethod({methodName: 'quit'});
     await applyAction(dispatch, getState);
     dispatch({type: QUIT_SESSION_DONE});
+    // Reload environment variables from persistent settings after session ends
+    const loadEnvAction = loadEnvironmentVariables();
+    await loadEnvAction(dispatch);
     if (!killedByUser) {
       showError(new Error(reason || i18n.t('Session has been terminated')), {secs: 0});
     }
@@ -923,23 +926,37 @@ export function setGestureUploadErrors(errors) {
 }
 
 export function setEnvironmentVariables(envVars) {
-  return (dispatch) => {
+  return async (dispatch) => {
+    await setSetting(ENVIRONMENT_VARIABLES, envVars);
     dispatch({type: SET_ENVIRONMENT_VARIABLES, envVars});
   };
 }
 
 export function addEnvironmentVariable(key, value) {
-  return (dispatch) => {
+  return async (dispatch, getState) => {
+    const currentEnvVars = getState().inspector.environmentVariables || [];
+    const newEnvVars = [...currentEnvVars, {key, value}];
+    await setSetting(ENVIRONMENT_VARIABLES, newEnvVars);
     dispatch({type: ADD_ENVIRONMENT_VARIABLE, key, value});
   };
 }
 
 export function deleteEnvironmentVariable(key) {
-  return (dispatch) => {
+  return async (dispatch, getState) => {
+    const currentEnvVars = getState().inspector.environmentVariables || [];
+    const newEnvVars = currentEnvVars.filter(v => v.key !== key);
+    await setSetting(ENVIRONMENT_VARIABLES, newEnvVars);
     dispatch({type: DELETE_ENVIRONMENT_VARIABLE, key});
   };
 }
 
+export function loadEnvironmentVariables() {
+  return async (dispatch) => {
+    const envVars = await getSetting(ENVIRONMENT_VARIABLES) || [];
+    dispatch({type: SET_ENVIRONMENT_VARIABLES, envVars});
+  };
+}
+
 export function uploadGesturesFromFile(fileList) {
   return async (dispatch) => {
     const gestures = await readTextFromUploadedFiles(fileList);

app/common/renderer/components/Inspector/EnvironmentVariables.jsx

@@ -1,13 +1,11 @@
 import {PlusOutlined, DeleteOutlined} from '@ant-design/icons';
-import {Button, Input, Space, Table, Tooltip} from 'antd';
+import {Button, Input, Space, Table, Tooltip, Popconfirm} from 'antd';
 import {useState} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {connect} from 'react-redux';
 import {setEnvironmentVariables, addEnvironmentVariable, deleteEnvironmentVariable} from '../../actions/Inspector';
-import styles from './EnvironmentVariables.module.css';
+import styles from './Inspector.module.css';
 
-const EnvironmentVariables = ({t}) => {
-  const dispatch = useDispatch();
-  const envVars = useSelector(state => state.inspector.environmentVariables || []);
+const EnvironmentVariables = ({t, envVars, addVariable, deleteVariable}) => {
   const [newVar, setNewVar] = useState({key: '', value: ''});
 
   const columns = [
@@ -29,15 +27,21 @@ const EnvironmentVariables = ({t}) => {
       key: 'action',
       width: '20%',
       render: (_, record) => (
-        <Tooltip title={t('Delete Variable')}>
-          <Button
-            type="text"
-            danger
-            icon={<DeleteOutlined />}
-            onClick={() => {
-              dispatch(deleteEnvironmentVariable(record.key));
-            }}
-          />
+        <Tooltip zIndex={3} title={t('Delete Variable')}>
+          <Popconfirm
+            zIndex={4}
+            title={t('Are you sure you want to delete this variable?')}
+            placement="topRight"
+            okText={t('OK')}
+            cancelText={t('Cancel')}
+            onConfirm={() => deleteVariable(record.key)}
+          >
+            <Button
+              type="text"
+              danger
+              icon={<DeleteOutlined />}
+            />
+          </Popconfirm>
         </Tooltip>
       ),
     },
@@ -51,7 +55,7 @@ const EnvironmentVariables = ({t}) => {
       return;
     }
 
-    dispatch(addEnvironmentVariable(newVar.key, newVar.value));
+    addVariable(newVar.key, newVar.value);
     setNewVar({key: '', value: ''});
   };
 
@@ -90,4 +94,13 @@ const EnvironmentVariables = ({t}) => {
   );
 };
 
-export default EnvironmentVariables;
+const mapStateToProps = (state) => ({
+  envVars: state.inspector.environmentVariables || []
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  addVariable: (key, value) => dispatch(addEnvironmentVariable(key, value)),
+  deleteVariable: (key) => dispatch(deleteEnvironmentVariable(key))
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(EnvironmentVariables);

app/common/renderer/components/Inspector/EnvironmentVariables.module.css

@@ -732,3 +732,13 @@
   color: red;
   margin: 5px;
 }
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.addForm {
+  padding: 8px 0;
+}