add new window controls

Author: toddtarsi

packages/selenium-ide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seleniumhq/selenium-ide",
-  "version": "4.0.0-alpha.42",
+  "version": "4.0.0-alpha.43",
   "private": true,
   "description": "Selenium IDE electron app",
   "author": "Todd <[email protected]>",

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

@@ -1,4 +1,4 @@
-import { CodeOff, HelpCenter } from '@mui/icons-material'
+import { CodeOff, HelpCenter, OpenInNew } from '@mui/icons-material'
 import { Autocomplete } from '@mui/material'
 import { FormControl } from '@mui/material'
 import { TextField } from '@mui/material'
@@ -9,6 +9,7 @@ import { setField, updateACField } from './utils'
 import { CommandSelectorProps } from '../types'
 
 const setCommandFactory = setField('command')
+const setOpensWindowFactory = setField<boolean>('opensWindow')
 const updateCommand = updateACField('command')
 const CommandSelector: FC<CommandSelectorProps> = ({
   command,
@@ -28,54 +29,68 @@ const CommandSelector: FC<CommandSelectorProps> = ({
   }
   const commandData = commands[command.command]
   const setCommand = setCommandFactory(testID, command.id)
+  const setOpensWindow = setOpensWindowFactory(testID, command.id)
   const commandOptions = commandsList.map((item) => {
     return { label: item.name, id: item.id }
   })
 
   return (
-    <FormControl className="flex flex-row">
-      <Autocomplete
-        id='command-selector'
-        className="flex-1"
-        onChange={updateCommand(testID, command.id)}
-        getOptionLabel={(option) => option.label}
-        options={commandOptions}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            inputProps={{
-              ...params.inputProps,
-              ['data-overridearrowkeys']: true,
-            }}
-            label="Command"
-          />
-        )}
-        size="small"
-        value={commandOptions.find((entry) => entry.id === command.command)}
-        isOptionEqualToValue={(option, value) => option.id === value.id}
-      />
+    <>
+      <FormControl className="flex flex-row">
+        <Autocomplete
+          id="command-selector"
+          className="flex-1"
+          onChange={updateCommand(testID, command.id)}
+          getOptionLabel={(option) => option.label}
+          options={commandOptions}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              inputProps={{
+                ...params.inputProps,
+                ['data-overridearrowkeys']: true,
+              }}
+              label="Command"
+            />
+          )}
+          size="small"
+          value={commandOptions.find((entry) => entry.id === command.command)}
+          isOptionEqualToValue={(option, value) => option.id === value.id}
+        />
 
-      <Tooltip
-        className="flex-initial ml-4 my-auto"
-        title={`${isDisabled ? 'En' : 'Dis'}able this command`}
-        placement="top-end"
-      >
-        <IconButton
-          onClick={() =>
-            setCommand(isDisabled ? command.command : `//${command.command}`)
-          }
+        <Tooltip
+          className="flex-initial ml-4 my-auto"
+          title={`${
+            command.opensWindow ? 'Opens' : 'Does not open'
+          } a new window`}
+          placement="top-end"
         >
-          <CodeOff color={isDisabled ? 'info' : 'inherit'} />
-        </IconButton>
-      </Tooltip>
-      <Tooltip
-        className="flex-initial mx-2 my-auto"
-        title={commandData.description}
-        placement="top-end"
-      >
-        <HelpCenter />
-      </Tooltip>
-    </FormControl>
+          <IconButton onClick={() => setOpensWindow(!command.opensWindow)}>
+            <OpenInNew color={command.opensWindow ? 'info' : 'inherit'} />
+          </IconButton>
+        </Tooltip>
+        <Tooltip
+          className="flex-initial ml-4 my-auto"
+          title={`${isDisabled ? 'En' : 'Dis'}able this command`}
+          placement="top-end"
+        >
+          <IconButton
+            onClick={() =>
+              setCommand(isDisabled ? command.command : `//${command.command}`)
+            }
+          >
+            <CodeOff color={isDisabled ? 'info' : 'inherit'} />
+          </IconButton>
+        </Tooltip>
+        <Tooltip
+          className="flex-initial mx-2 my-auto"
+          title={commandData.description}
+          placement="top-end"
+        >
+          <HelpCenter />
+        </Tooltip>
+      </FormControl>
+    </>
   )
 }
 

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

@@ -1,23 +1,27 @@
 import FormControl from '@mui/material/FormControl'
 import HelpCenter from '@mui/icons-material/HelpCenter'
 import TextField from 'browser/components/UncontrolledTextField'
-import capitalize from 'lodash/fp/capitalize'
+import startCase from 'lodash/fp/startCase'
 import React, { FC } from 'react'
 import { CommandFieldProps } from '../types'
 import { updateField } from './utils'
 import Tooltip from '@mui/material/Tooltip'
+import { LocatorFields } from '@seleniumhq/side-api'
 
 const CommandTextField: FC<CommandFieldProps> = ({
   commands,
   command,
   fieldName,
+  note,
   testID,
 }) => {
-  const FieldName = capitalize(fieldName)
+  const FieldName = startCase(fieldName)
   const updateText = updateField(fieldName)
-  const isComment = fieldName === 'comment'
-  const fullnote = isComment ? '' : commands[command.command][fieldName]?.description ?? ''
-  const label = fullnote ? FieldName + ' - ' + fullnote : FieldName
+  const fullNote =
+    (note ||
+      commands[command.command][fieldName as LocatorFields]?.description) ??
+    ''
+  const label = fullNote ? FieldName + ' - ' + fullNote : FieldName
 
   return (
     <FormControl className="flex flex-row">
@@ -36,10 +40,10 @@ const CommandTextField: FC<CommandFieldProps> = ({
           window.sideAPI.menus.open('textField')
         }}
         size="small"
-        value={command[fieldName]}
+        value={command[fieldName as LocatorFields]}
       />
-      {!isComment && (
-        <Tooltip className="mx-2 my-auto" title={fullnote} placement="top-end">
+      {fullNote && (
+        <Tooltip className="mx-2 my-auto" title={fullNote} placement="top-end">
           <HelpCenter />
         </Tooltip>
       )}

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/CommandFields/utils.ts

@@ -1,5 +1,5 @@
 export const setField =
-  (name: string) => (testID: string, commandID: string) => (value: string) => {
+  <T = string>(name: string) => (testID: string, commandID: string) => (value: T) => {
     window.sideAPI.tests.updateStep(testID, commandID, {
       [name]: value,
     })

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

@@ -57,10 +57,19 @@ const CommandEditor: FC<CommandEditorProps> = ({
       />
       <ArgField command={correctedCommand} {...props} fieldName="target" />
       <ArgField command={correctedCommand} {...props} fieldName="value" />
+      {command.opensWindow && (
+        <CommandTextField
+          command={correctedCommand}
+          {...props}
+          fieldName="newWindowHandle"
+          note="Variable name to set to the new window handle"
+        />
+      )}
       <CommandTextField
         command={correctedCommand}
         {...props}
         fieldName="comment"
+        note=""
       />
     </Stack>
   )

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

@@ -47,10 +47,13 @@ const updateIsBreakpoint = (
   })
 }
 
+export const defaultCommandState =
+  {} as unknown as PlaybackEventShapes['COMMAND_STATE_CHANGED']
+
 const CommandRow: React.FC<CommandRowProps> = ({
   activeTest,
-  commandState = {},
-  command: { command, id, isBreakpoint, target, value },
+  commandState = defaultCommandState,
+  command: { command, id, isBreakpoint, opensWindow, target, value },
   index,
   reorderPreview,
   resetPreview,
@@ -103,7 +106,9 @@ const CommandRow: React.FC<CommandRowProps> = ({
         disableTypography
         primary={
           <Box sx={commandTextFormat}>
-            {camelToTitleCase(commandText)} {isDisabled ? '[Disabled]' : ''}
+            {camelToTitleCase(commandText)}&nbsp;
+            {opensWindow ? '(Opens window)' : ''}&nbsp;
+            {isDisabled ? '[Disabled]' : ''}
           </Box>
         }
         secondary={

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/types.ts

@@ -16,7 +16,8 @@ export interface CommandArgFieldProps extends CommandEditorProps {
 }
 
 export interface CommandFieldProps extends CommandEditorProps {
-  fieldName: 'comment' | LocatorFields
+  fieldName: 'comment' | 'newWindowHandle' | LocatorFields
+  note?: string
 }
 
 export interface MiniCommandShape {

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

@@ -35,11 +35,18 @@ export default class StateController extends BaseController {
   async onProjectLoaded() {
     // If this file has been saved, fetch state
     if (this.session.projects.filepath) {
-      this.state = {
+      const storageState: StateShape = storage.get(this.getStatePath());
+      const newState: StateShape = {
         ...defaultState,
-        ...storage.get(this.getStatePath()),
+        ...storageState,
         commands: this.state.commands,
-      }
+        editor: {
+          ...defaultState.editor,
+          ...storageState?.editor ?? {},
+          selectedCommandIndexes: [],
+        }
+      };
+      this.state = newState
     }
   }