scroll commands into view

Author: toddtarsi

packages/selenium-ide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selenium-ide",
-  "version": "4.0.1-alpha.78",
+  "version": "4.0.1-alpha.79",
   "private": false,
   "description": "Selenium IDE electron app",
   "author": "Todd <[email protected]>",

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/TestCommandListItem.tsx

@@ -74,6 +74,7 @@ const CommandRow: React.FC<CommandRowProps> = ({
     <ReorderableListItem
       className={mainClass}
       divider
+      data-command-id={id}
       dragType="COMMAND"
       id={id}
       index={index}

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/TestCommandRow.tsx

@@ -115,6 +115,7 @@ const CommandRow: React.FC<CommandRowProps> = ({
         },
       }}
       divider
+      data-command-id={id}
       dragType="COMMAND"
       id={id}
       index={index}

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/TestsTab.tsx

@@ -64,15 +64,27 @@ const TestsTab: React.FC<Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>> = ({
   const CommandsComponent = isTableWidth ? CommandTable : CommandList
   const activeTest = getActiveTest(session)
   const activeCommand = getActiveCommand(session)
+  React.useEffect(() => {
+    if (activeCommand) {
+      setTimeout(() => {
+        const commandElement = document.querySelector(
+          `[data-command-id="${activeCommand.id}"]`
+        )
+        if (commandElement) {
+          commandElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'start',
+          })
+        }
+      }, 100)
+    }
+  }, [activeCommand])
   const disabled = ['playing', 'recording'].includes(session.state.status)
   return (
     <Box className="fill flex flex-col">
       <Box className="flex-initial">
-        <AppBar
-          session={session}
-          setTab={setTab}
-          tab={tab}
-        />
+        <AppBar session={session} setTab={setTab} tab={tab} />
       </Box>
       <Box className="flex-1 flex-col" ref={ref}>
         <TestSelector session={session} />

packages/selenium-ide/src/main/session/controllers/Playback/index.ts

@@ -360,14 +360,6 @@ export default class PlaybackController extends BaseController {
               this.playNextTest()
             }
           }
-          if (e.state === 'finished') {
-            await this.session.api.state.updateStepSelection(
-              0,
-              false,
-              false,
-              true
-            )
-          }
       }
       this.session.api.playback.onPlayUpdate.dispatchEvent(e)
     }