feat: Use Environment variables for secrets capabilities #1702

app/common/public/locales/en/translation.json

@@ -295,5 +295,8 @@
   "gestureNameCannotBeEmptyError": "Gesture name cannot be empty",
   "gestureInvalidJsonError": "Invalid JSON file. Unable to parse the file content",
   "gestureImportedFrom": "Gesture imported from '{{fileName}}'",
-  "invalidSessionFile": "Invalid session file"
+  "invalidSessionFile": "Invalid session file",
+  "Environment Variables": "Environment Variables",
+  "Variable Name": "Variable Name",
+  "Delete Variable": "Delete Variable"
 }

app/common/renderer/actions/Inspector.js

@@ -1,6 +1,10 @@
 import _ from 'lodash';
 
-import {SAVED_FRAMEWORK, SET_SAVED_GESTURES} from '../../shared/setting-defs';
+import {
+  ENVIRONMENT_VARIABLES,
+  SAVED_FRAMEWORK,
+  SET_SAVED_GESTURES,
+} from '../../shared/setting-defs';
 import {POINTER_TYPES} from '../constants/gestures';
 import {APP_MODE, NATIVE_APP} from '../constants/session-inspector';
 import i18n from '../i18next';
@@ -116,6 +120,7 @@ export const TOGGLE_SHOW_ATTRIBUTES = 'TOGGLE_SHOW_ATTRIBUTES';
 export const TOGGLE_REFRESHING_STATE = 'TOGGLE_REFRESHING_STATE';
 
 export const SET_GESTURE_UPLOAD_ERROR = 'SET_GESTURE_UPLOAD_ERROR';
+export const SET_ENVIRONMENT_VARIABLES = 'SET_ENVIRONMENT_VARIABLES';
 
 const KEEP_ALIVE_PING_INTERVAL = 20 * 1000;
 const NO_NEW_COMMAND_LIMIT = 24 * 60 * 60 * 1000; // Set timeout to 24 hours
@@ -357,6 +362,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});
     }
@@ -919,6 +927,13 @@ export function setGestureUploadErrors(errors) {
   };
 }
 
+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/actions/Session.js

@@ -15,11 +15,14 @@ import {APP_MODE} from '../constants/session-inspector';
 import i18n from '../i18next';
 import {getSetting, ipcRenderer, setSetting} from '../polyfills';
 import {fetchSessionInformation, formatSeleniumGridSessions} from '../utils/attaching-to-session';
+import {interpolateEnvironmentVariables} from '../utils/env-utils';
 import {downloadFile, parseSessionFileContents} from '../utils/file-handling';
 import {log} from '../utils/logger';
 import {addVendorPrefixes} from '../utils/other';
 import {quitSession, setSessionDetails} from './Inspector';
 
+export const ENVIRONMENT_VARIABLES = 'ENVIRONMENT_VARIABLES';
+
 export const NEW_SESSION_REQUESTED = 'NEW_SESSION_REQUESTED';
 export const NEW_SESSION_LOADING = 'NEW_SESSION_LOADING';
 export const NEW_SESSION_DONE = 'NEW_SESSION_DONE';
@@ -68,6 +71,10 @@ export const SET_CAPABILITY_NAME_ERROR = 'SET_CAPABILITY_NAME_ERROR';
 export const SET_STATE_FROM_URL = 'SET_STATE_FROM_URL';
 export const SET_STATE_FROM_FILE = 'SET_STATE_FROM_FILE';
 
+export const SET_ENVIRONMENT_VARIABLES = 'SET_ENVIRONMENT_VARIABLES';
+export const ADD_ENVIRONMENT_VARIABLE = 'ADD_ENVIRONMENT_VARIABLE';
+export const DELETE_ENVIRONMENT_VARIABLE = 'DELETE_ENVIRONMENT_VARIABLE';
+
 const APPIUM_SESSION_FILE_VERSION = '1.0';
 
 const CAPS_NEW_COMMAND = 'appium:newCommandTimeout';
@@ -229,7 +236,25 @@ export function newSession(caps, attachSessId = null) {
 
     dispatch({type: NEW_SESSION_REQUESTED, caps});
 
+    // Get environment variables from state
+    const environmentVariables = session.environmentVariables || [];
+
+    // Get capabilities and interpolate environment variables
     let desiredCapabilities = caps ? getCapsObject(caps) : {};
+
+    // Modify this section to handle W3C capabilities format
+    if (desiredCapabilities.alwaysMatch) {
+      desiredCapabilities.alwaysMatch = interpolateEnvironmentVariables(
+        desiredCapabilities.alwaysMatch,
+        environmentVariables,
+      );
+    } else {
+      desiredCapabilities = interpolateEnvironmentVariables(
+        desiredCapabilities,
+        environmentVariables,
+      );
+    }
+
     let host, port, username, accessKey, https, path, token;
     desiredCapabilities = addCustomCaps(desiredCapabilities);
 
@@ -1190,3 +1215,35 @@ export function initFromQueryString(loadNewSession) {
     }
   };
 }
+
+export function setEnvironmentVariables(envVars) {
+  return async (dispatch) => {
+    await setSetting(ENVIRONMENT_VARIABLES, envVars);
+    dispatch({type: SET_ENVIRONMENT_VARIABLES, envVars});
+  };
+}
+
+export function loadEnvironmentVariables() {
+  return async (dispatch) => {
+    const envVars = (await getSetting(ENVIRONMENT_VARIABLES)) || [];
+    dispatch({type: SET_ENVIRONMENT_VARIABLES, envVars});
+  };
+}
+
+export function addEnvironmentVariable(key, value) {
+  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 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});
+  };
+}

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

@@ -30,7 +30,7 @@ import {downloadFile} from '../../utils/file-handling';
 import Commands from './Commands.jsx';
 import GestureEditor from './GestureEditor.jsx';
 import HeaderButtons from './HeaderButtons.jsx';
-import InspectorStyles from './Inspector.module.css';
+import styles from './Inspector.module.css';
 import Recorder from './Recorder.jsx';
 import SavedGestures from './SavedGestures.jsx';
 import Screenshot from './Screenshot.jsx';
@@ -221,7 +221,7 @@ const Inspector = (props) => {
   }, [showKeepAlivePrompt]);
 
   const screenShotControls = (
-    <div className={InspectorStyles['screenshot-controls']}>
+    <div className={styles['screenshot-controls']}>
       <Space size="middle">
         <Tooltip
           title={t(showCentroids ? 'Hide Element Handles' : 'Show Element Handles')}
@@ -263,22 +263,22 @@ const Inspector = (props) => {
   );
 
   const main = (
-    <div className={InspectorStyles['inspector-main']}>
+    <div className={styles['inspector-main']}>
       <div
         id="screenshotContainer"
-        className={InspectorStyles['screenshot-container']}
+        className={styles['screenshot-container']}
         ref={screenshotContainerEl}
       >
         {screenShotControls}
         {showScreenshot && <Screenshot {...props} scaleRatio={scaleRatio} />}
         {screenshotError && t('couldNotObtainScreenshot', {screenshotError})}
         {!showScreenshot && (
           <Spin size="large" spinning={true}>
-            <div className={InspectorStyles.screenshotBox} />
+            <div className={styles.screenshotBox} />
           </Spin>
         )}
       </div>
-      <div id="sourceTreeContainer" className={InspectorStyles['interaction-tab-container']}>
+      <div id="sourceTreeContainer" className={styles['interaction-tab-container']}>
         <Tabs
           activeKey={selectedInspectorTab}
           size="small"
@@ -331,15 +331,15 @@ const Inspector = (props) => {
                   </div>
                   <div
                     id="selectedElementContainer"
-                    className={`${InspectorStyles['interaction-tab-container']} ${InspectorStyles['element-detail-container']} action-col`}
+                    className={`${styles['interaction-tab-container']} ${styles['element-detail-container']} action-col`}
                   >
                     <Card
                       title={
                         <span>
                           <TagOutlined /> {t('selectedElement')}
                         </span>
                       }
-                      className={InspectorStyles['selected-element-card']}
+                      className={styles['selected-element-card']}
                     >
                       {selectedElement.path && <SelectedElement {...props} />}
                       {!selectedElement.path && <i>{t('selectElementInSource')}</i>}
@@ -359,7 +359,7 @@ const Inspector = (props) => {
                       <ThunderboltOutlined /> {t('Execute Commands')}
                     </span>
                   }
-                  className={InspectorStyles['interaction-tab-card']}
+                  className={styles['interaction-tab-card']}
                 >
                   <Commands {...props} />
                 </Card>
@@ -376,7 +376,7 @@ const Inspector = (props) => {
                       <HighlightOutlined /> {t('Gesture Builder')}
                     </span>
                   }
-                  className={InspectorStyles['interaction-tab-card']}
+                  className={styles['interaction-tab-card']}
                 >
                   <GestureEditor {...props} />
                 </Card>
@@ -387,7 +387,7 @@ const Inspector = (props) => {
                       <HighlightOutlined /> {t('Saved Gestures')}
                     </span>
                   }
-                  className={InspectorStyles['interaction-tab-card']}
+                  className={styles['interaction-tab-card']}
                 >
                   <SavedGestures {...props} />
                 </Card>
@@ -410,7 +410,7 @@ const Inspector = (props) => {
                       <InfoCircleOutlined /> {t('Session Information')}
                     </span>
                   }
-                  className={InspectorStyles['interaction-tab-card']}
+                  className={styles['interaction-tab-card']}
                 >
                   <SessionInfo {...props} />
                 </Card>
@@ -423,7 +423,7 @@ const Inspector = (props) => {
   );
 
   return (
-    <div className={InspectorStyles['inspector-container']}>
+    <div className={styles['inspector-container']}>
       <HeaderButtons quitCurrentSession={quitCurrentSession} {...props} />
       {main}
       <Modal

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

@@ -0,0 +1,101 @@
+import {DeleteOutlined, PlusOutlined, SettingOutlined} from '@ant-design/icons';
+import {Button, Card, Input, Popconfirm, Space, Table, Tooltip} from 'antd';
+import {useState} from 'react';
+
+import SessionStyles from './Session.module.css';
+
+const EnvironmentVariables = ({t, envVars, addVariable, deleteVariable}) => {
+  const [newVar, setNewVar] = useState({key: '', value: ''});
+
+  const tableData = Array.from(envVars, ([key, value]) => ({key, value}));
+
+  const columns = [
+    {
+      title: t('Variable Name'),
+      dataIndex: 'key',
+      key: 'key',
+      width: '40%',
+    },
+    {
+      title: t('Value'),
+      dataIndex: 'value',
+      key: 'value',
+      width: '40%',
+      render: (text) => <Input.Password value={text} readOnly />,
+    },
+    {
+      title: t('Actions'),
+      key: 'action',
+      width: '20%',
+      render: (_, record) => (
+        <Tooltip zIndex={3} title={t('Delete')}>
+          <Popconfirm
+            zIndex={4}
+            title={t('confirmDeletion')}
+            placement="topRight"
+            okText={t('OK')}
+            cancelText={t('Cancel')}
+            onConfirm={() => deleteVariable(record.key)}
+          >
+            <Button icon={<DeleteOutlined />} />
+          </Popconfirm>
+        </Tooltip>
+      ),
+    },
+  ];
+
+  const handleAddVariable = () => {
+    if (!newVar.key || !newVar.value) {
+      return;
+    }
+
+    // Check for duplicate keys is no longer needed since Map handles this automatically
+    addVariable(newVar.key, newVar.value);
+    setNewVar({key: '', value: ''});
+  };
+
+  return (
+    <Card
+      title={
+        <span>
+          <SettingOutlined /> {t('Environment Variables')}
+        </span>
+      }
+      className={SessionStyles['interaction-tab-card']}
+    >
+      <div className={SessionStyles.container}>
+        <div className={SessionStyles.addForm}>
+          <Space.Compact style={{width: '100%'}}>
+            <Input
+              placeholder={t('Variable Name')}
+              value={newVar.key}
+              onChange={(e) => setNewVar({...newVar, key: e.target.value})}
+            />
+            <Input.Password
+              placeholder={t('Value')}
+              value={newVar.value}
+              onChange={(e) => setNewVar({...newVar, value: e.target.value})}
+            />
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={handleAddVariable}
+              disabled={!newVar.key || !newVar.value}
+            >
+              {t('Add')}
+            </Button>
+          </Space.Compact>
+        </div>
+        <Table
+          columns={columns}
+          dataSource={tableData}
+          pagination={false}
+          rowKey="key"
+          size="small"
+        />
+      </div>
+    </Card>
+  );
+};
+
+export default EnvironmentVariables;