feat: retrieve commands and execute methods from active extensions (#2414)

* chore: move static commands list to own file

* chore: pass generateCommandNotes as prop

* only show static commands list if there is no method map support

* add tab switcher for dynamic commands grid

* add UI for rendering command/method buttons

* filter empty values

* do not render collapses if only one available

* also filter execute methods with no content

* remove hardcoded input value types, try to detect them

* convert static commands list to use a format compatible with endpoint result
also remove handling for notes and driver-specific command exclusion

* store pending command in react hooks instead of redux

* dynamic execute methods are now working

* dynamic commands (with matching names) are working

* filter execute methods before saving them

* improve execute method filtering and add tests

* add filtering for standard commands - full map WIP

* add full map of supported commands

* commands and execute methods are both working

* rename property for clarity

* extract parameters from paths for applicable commands

* add element commands to driver, to allow calling them as commands

* remove driver dependency for filterAvailableCommands

* add unit tests for filterAvailableCommands

* add support for required attribute

* add support for deprecated attribute

* add support for info attribute

* add descriptions for both tabs

* move CommandResultModal to Commands component

* split runCommand into two methods for clarity

* store command result in react hooks instead of redux

* refactor MethodMapCommandsList components

* add searchbar for dynamic method map

* combine all commands in one list & support plugins

* reduce sluggishness when entering command parameter values

* simplify handling for special methods

* add extra handling for certain commands

* adjust tab descriptions

* update deprecated command background in light mode

* update commands documentation

* update types

* run prettier

* add a few more unit tests

* add extra handling for printPage

* improve test for filtering out unsupported commands

* add back stopRecordingScreen

* use a map for handling mismatching commands

* fix destructuring

* add some memoization

* add various workarounds for antd performance issues

* fix lint

* use useRef for full command lists

* remove unneeded cancel button

* make parameter input smoother

* remove isMemo due to react compiler

* speed up method filtering by avoiding dynamic toPairs calls

* simplify table to row/col

* ensure linebreaks for long method names

* fix css

* update translation strings

* update docs

* handle edge case for overrides

* tune previous edge case handling

* address copilot comments

* update translation string

* define local constants for method names

* address comments in Commands component

* address comments in commands tab utils

* address comments in commands unit test file

* label args for executeScript as optional

* address comments

* update docs image due to updated texts

Author: eglitise

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

@@ -320,5 +320,9 @@
   "toggleTableFormatting": "Toggle Table Formatting",
   "copyResultToClipboard": "Copy Result to Clipboard",
   "Property": "Property",
-  "noCapsFound": "No session capabilities found. Please use the Capability Builder to edit, add, and save your capability set. Refer to the tutorial at {{url}}"
+  "noCapsFound": "No session capabilities found. Please use the Capability Builder to edit, add, and save your capability set. Refer to the tutorial at {{url}}",
+  "executeMethods": "Execute Methods",
+  "dynamicCommandsDescription": "Run commands supported by the currently active driver and plugin(s). Note that some commands may only work in specific contexts. Any commands not supported by WebdriverIO are not included in this list.",
+  "dynamicExecuteMethodsDescription": "Run any execute method supported by the currently active driver and plugin(s).",
+  "methodDeprecated": "This method is deprecated"
 }

app/common/renderer/actions/SessionInspector.js

@@ -81,10 +81,6 @@ export const HIDE_PROMPT_KEEP_ALIVE = 'HIDE_PROMPT_KEEP_ALIVE';
 
 export const SELECT_INSPECTOR_TAB = 'SELECT_INSPECTOR_TAB';
 
-export const ENTERING_COMMAND_ARGS = 'ENTERING_COMMAND_ARGS';
-export const CANCEL_PENDING_COMMAND = 'CANCEL_PENDING_COMMAND';
-export const SET_COMMAND_ARG = 'SET_COMMAND_ARG';
-
 export const SET_CONTEXT = 'SET_CONTEXT';
 
 export const SET_APP_ID = 'SET_APP_ID';
@@ -95,8 +91,6 @@ export const SET_KEEP_ALIVE_INTERVAL = 'SET_KEEP_ALIVE_INTERVAL';
 export const SET_USER_WAIT_TIMEOUT = 'SET_USER_WAIT_TIMEOUT';
 export const SET_LAST_ACTIVE_MOMENT = 'SET_LAST_ACTIVE_MOMENT';
 
-export const SET_VISIBLE_COMMAND_RESULT = 'SET_VISIBLE_COMMAND_RESULT';
-
 export const SET_AWAITING_MJPEG_STREAM = 'SET_AWAITING_MJPEG_STREAM';
 
 export const SHOW_GESTURE_EDITOR = 'SHOW_GESTURE_EDITOR';
@@ -343,7 +337,7 @@ export function restartSession(error, params) {
     });
     const quitSes = quitSession('Window closed');
     const newSes = newSession(getState().builder.caps);
-    const getPageSrc = applyClientMethod({methodName: 'getPageSource', ignoreResult: true});
+    const getPageSrc = applyClientMethod({methodName: 'getPageSource'});
     const storeSessionSet = storeSessionSettings();
     const getSavedClientFrame = getSavedClientFramework();
     const runKeepAliveLp = runKeepAliveLoop();
@@ -458,7 +452,6 @@ export function storeSessionSettings(updatedSessionSettings = null) {
       const action = applyClientMethod({
         methodName: 'getSettings',
         skipRefresh: true,
-        ignoreResult: true,
       });
       sessionSettings = await action(dispatch, getState);
     }
@@ -587,7 +580,6 @@ export function setLocatorTestElement(elementId) {
           methodName: 'getElementRect',
           skipRefresh: true,
           skipRecord: true,
-          ignoreResult: true,
         });
         const {commandRes} = await action(dispatch, getState);
         dispatch({
@@ -826,21 +818,23 @@ export function selectInspectorTab(interaction) {
   };
 }
 
-export function startEnteringCommandArgs(commandName, command) {
-  return (dispatch) => {
-    dispatch({type: ENTERING_COMMAND_ARGS, commandName, command});
-  };
-}
-
-export function cancelPendingCommand() {
-  return (dispatch) => {
-    dispatch({type: CANCEL_PENDING_COMMAND});
-  };
-}
+export function getSupportedSessionMethods() {
+  return async (_dispatch, getState) => {
+    async function safelyCallCommand(methodName) {
+      try {
+        const action = executeDriverCommand({methodName});
+        const {commandRes} = await action(getState);
+        return commandRes;
+      } catch {
+        return [];
+      }
+    }
 
-export function setCommandArg(index, value) {
-  return (dispatch) => {
-    dispatch({type: SET_COMMAND_ARG, index, value});
+    const [commands, executeMethods] = await Promise.all([
+      safelyCallCommand('getAppiumCommands'),
+      safelyCallCommand('getAppiumExtensions'),
+    ]);
+    return {commands, executeMethods};
   };
 }
 
@@ -909,7 +903,6 @@ export function callClientMethod(params) {
   return async (dispatch, getState) => {
     const {driver, appMode, isUsingMjpegMode, isSourceRefreshOn, autoSessionRestart} =
       getState().inspector;
-    const {methodName, ignoreResult = true} = params;
     params.appMode = appMode;
     params.autoSessionRestart = autoSessionRestart;
 
@@ -929,22 +922,6 @@ export function callClientMethod(params) {
       action(dispatch, getState);
       const inspectorDriver = InspectorDriver.instance(driver);
       const res = await inspectorDriver.run(params);
-      let {commandRes} = res;
-
-      // Ignore empty objects
-      if (_.isObject(res) && _.isEmpty(res)) {
-        commandRes = null;
-      }
-
-      if (!ignoreResult) {
-        // if the user is running actions manually, we want to show the full response with the
-        // ability to scroll etc...
-        const result = JSON.stringify(commandRes, null, '  ');
-        const truncatedResult = _.truncate(result, {length: 2000});
-        log.info(`Result of client command was:`);
-        log.info(truncatedResult);
-        setVisibleCommandResult(result, methodName)(dispatch);
-      }
       res.elementId = res.id;
       return res;
     } catch (error) {
@@ -959,9 +936,14 @@ export function callClientMethod(params) {
   };
 }
 
-export function setVisibleCommandResult(result, methodName) {
-  return (dispatch) => {
-    dispatch({type: SET_VISIBLE_COMMAND_RESULT, result, methodName});
+// Simple alternative to callClientMethod, for when we only want to
+// run the command without any side-effects
+export function executeDriverCommand(params) {
+  return async (getState) => {
+    const {driver} = getState().inspector;
+    params.skipRefresh = true;
+    const inspectorDriver = InspectorDriver.instance(driver);
+    return await inspectorDriver.run(params);
   };
 }
 

app/common/renderer/components/SessionInspector/CommandsTab/CommandResultModal.jsx

@@ -173,7 +173,7 @@ const CommandResultRawTable = ({result}) => {
 };
 
 const CommandResultModalFooter = ({
-  visibleCommandResult,
+  commandResult,
   closeCommandModal,
   setFormatResult,
   formatResult,
@@ -195,7 +195,7 @@ const CommandResultModalFooter = ({
           <Button
             icon={<CopyOutlined />}
             disabled={formatResult}
-            onClick={() => copyToClipboard(visibleCommandResult)}
+            onClick={() => copyToClipboard(commandResult)}
           />
         </Tooltip>
       </Space>
@@ -208,31 +208,26 @@ const CommandResultModalFooter = ({
   </Row>
 );
 
-const CommandResultModal = ({
-  visibleCommandMethod,
-  visibleCommandResult,
-  setVisibleCommandResult,
-  t,
-}) => {
+const CommandResultModal = ({commandName, commandResult, clearCurrentCommand, t}) => {
   const [formatResult, setFormatResult] = useState(false);
 
-  const {parsedResult, isPrimitive} = parseCommandResult(visibleCommandResult);
+  const {parsedResult, isPrimitive} = parseCommandResult(commandResult);
 
   const closeCommandModal = () => {
-    setVisibleCommandResult(null);
+    clearCurrentCommand();
     setFormatResult(false);
   };
 
   return (
     <Modal
-      title={t('methodCallResult', {methodName: visibleCommandMethod})}
-      open={!!visibleCommandResult}
+      title={t('methodCallResult', {methodName: commandName})}
+      open={!!commandResult}
       onCancel={() => closeCommandModal()}
       width={{md: '80%', lg: '70%', xl: '60%', xxl: '50%'}}
       className={styles.commandResultModal}
       footer={
         <CommandResultModalFooter
-          visibleCommandResult={visibleCommandResult}
+          commandResult={commandResult}
           closeCommandModal={closeCommandModal}
           setFormatResult={setFormatResult}
           formatResult={formatResult}
@@ -244,7 +239,7 @@ const CommandResultModal = ({
       {formatResult ? (
         <CommandResultFormattedTable result={parsedResult} isPrimitive={isPrimitive} t={t} />
       ) : (
-        <CommandResultRawTable result={visibleCommandResult} />
+        <CommandResultRawTable result={commandResult} />
       )}
     </Modal>
   );