Skip to content

Commit c12e9d2

Browse files
toddtarsitoddtarsi
committed
beta v2
1 parent 5455fd3 commit c12e9d2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+1147
-747
lines changed

‎packages/selenium-ide/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "selenium-ide",
3-
"version": "4.0.1-beta.1",
3+
"version": "4.0.1-beta.2",
44
"private": false,
55
"description": "Selenium IDE electron app",
66
"author": "Todd <[email protected]>",
@@ -112,16 +112,16 @@
112112
"@emotion/react": "^11.11.1",
113113
"@emotion/styled": "^11.11.0",
114114
"@fontsource/roboto": "^5.0.8",
115-
"@mui/icons-material": "^5.15.0",
116-
"@mui/material": "^5.15.0",
115+
"@mui/icons-material": "^5.15.13",
116+
"@mui/material": "^5.15.13",
117117
"@seleniumhq/code-export-csharp-nunit": "^4.0.1",
118118
"@seleniumhq/code-export-csharp-xunit": "^4.0.1",
119119
"@seleniumhq/code-export-java-junit": "^4.0.1",
120120
"@seleniumhq/code-export-javascript-mocha": "^4.0.1",
121121
"@seleniumhq/code-export-python-pytest": "^4.0.1",
122122
"@seleniumhq/code-export-ruby-rspec": "^4.0.1",
123123
"@seleniumhq/get-driver": "^4.0.1",
124-
"@seleniumhq/side-api": "^4.0.1",
124+
"@seleniumhq/side-api": "^4.0.2",
125125
"@seleniumhq/side-commons": "^4.0.1",
126126
"@seleniumhq/side-model": "^4.0.1",
127127
"@seleniumhq/side-runtime": "^4.0.1",

‎packages/selenium-ide/src/browser/components/AppBar/index.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import MenuIcon from '@mui/icons-material/Menu'
22
import MenuOpenIcon from '@mui/icons-material/MenuOpen'
3-
import React from 'react'
4-
import TabPanel from '../Tab/Panel'
3+
import React, { useContext } from 'react'
54
import SuiteControls from 'browser/windows/ProjectEditor/tabs/Suites/Controls'
65
import TestControls from 'browser/windows/ProjectEditor/tabs/Tests/Controls'
76
import { SUITES_TAB, TESTS_TAB } from 'browser/enums/tab'
87
import { SIDEMainProps } from '../types'
98
import AppBarTabs from './AppBarTabs'
109
import IconButton from '@mui/material/IconButton'
1110
import Paper from '@mui/material/Paper'
12-
import { getActiveTest } from '@seleniumhq/side-api'
11+
import { context } from 'browser/contexts/show-drawer'
1312
import baseControlProps from '../Controls/BaseProps'
13+
import TabPanel from '../Tab/Panel'
1414

15-
type SIDEAppBarProps = Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>
15+
type SIDEAppBarProps = Pick<SIDEMainProps, 'setTab' | 'tab'>
1616

17-
const SIDEAppBar: React.FC<SIDEAppBarProps> = ({ session, setTab, tab }) => {
18-
const showDrawer = session.state.editor.showDrawer
17+
const SIDEAppBar: React.FC<SIDEAppBarProps> = ({ setTab, tab }) => {
18+
const showDrawer = useContext(context)
1919
return (
2020
<Paper className="flex flex-row width-100 z-3" elevation={1} square>
2121
<IconButton
@@ -30,10 +30,10 @@ const SIDEAppBar: React.FC<SIDEAppBarProps> = ({ session, setTab, tab }) => {
3030
<AppBarTabs setTab={setTab} tab={tab} />
3131
<div className="flex flex-1" />
3232
<TabPanel index={TESTS_TAB} value={tab}>
33-
<TestControls state={session.state} test={getActiveTest(session)} />
33+
<TestControls />
3434
</TabPanel>
3535
<TabPanel index={SUITES_TAB} value={tab}>
36-
<SuiteControls state={session.state} />
36+
<SuiteControls />
3737
</TabPanel>
3838
</Paper>
3939
)

‎packages/selenium-ide/src/browser/components/Controls/PlayButton.tsx‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
import PlayArrowIcon from '@mui/icons-material/PlayArrow'
22
import IconButton from '@mui/material/IconButton'
33
import Tooltip from '@mui/material/Tooltip'
4-
import { StateShape } from '@seleniumhq/side-api'
5-
import React, { FC } from 'react'
4+
import React, { FC, useContext } from 'react'
65
import { badIndex } from '@seleniumhq/side-api/dist/constants/badIndex'
76
import baseControlProps from './BaseProps'
7+
import { context as playbackCurrentIndexContext } from 'browser/contexts/playback-current-index'
8+
import { context as activeTestContext } from 'browser/contexts/active-test'
89

9-
export interface PlayButtonProps {
10-
state: StateShape
10+
const PlayButton: FC = () => {
11+
const { activeTestID } = useContext(activeTestContext)
12+
const currentIndex = useContext(playbackCurrentIndexContext)
13+
return (
14+
<Tooltip title="Play" aria-label="play">
15+
<IconButton
16+
{...baseControlProps}
17+
data-play
18+
onClick={() => {
19+
currentIndex === badIndex
20+
? window.sideAPI.playback.play(activeTestID)
21+
: window.sideAPI.playback.resume()
22+
}}
23+
>
24+
<PlayArrowIcon />
25+
</IconButton>
26+
</Tooltip>
27+
)
1128
}
1229

13-
const PlayButton: FC<PlayButtonProps> = ({ state }) => (
14-
<Tooltip title="Play" aria-label="play">
15-
<IconButton
16-
{...baseControlProps}
17-
data-play
18-
onClick={() => {
19-
state.playback.currentIndex === badIndex
20-
? window.sideAPI.playback.play(state.activeTestID)
21-
: window.sideAPI.playback.resume()
22-
}}
23-
>
24-
<PlayArrowIcon />
25-
</IconButton>
26-
</Tooltip>
27-
)
28-
2930
export default PlayButton

‎packages/selenium-ide/src/browser/components/Controls/PlayListButton.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
import PlaylistPlayIcon from '@mui/icons-material/PlaylistPlay'
22
import IconButton from '@mui/material/IconButton'
33
import Tooltip from '@mui/material/Tooltip'
4-
import { StateShape } from '@seleniumhq/side-api'
54
import React, { FC } from 'react'
65
import baseControlProps from './BaseProps'
76

8-
export interface PlayListButtonProps {
9-
state: StateShape
10-
}
11-
12-
const PlayListButton: FC<PlayListButtonProps> = () => (
7+
const PlayListButton: FC = () => (
138
<Tooltip title="Play Suite" aria-label="play-suite">
149
<IconButton
1510
{...baseControlProps}

‎packages/selenium-ide/src/browser/components/Drawer/index.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,18 @@ import TestsDrawer from 'browser/windows/ProjectEditor/tabs/Tests/TestsDrawer'
66
import SuitesDrawer from 'browser/windows/ProjectEditor/tabs/Suites/SuitesDrawer'
77
import ProjectDrawer from 'browser/windows/ProjectEditor/tabs/Project/ProjectDrawer'
88

9-
const SIDEDrawer: React.FC<Pick<SIDEMainProps, 'session' | 'tab'>> = ({
10-
session,
9+
const SIDEDrawer: React.FC<Pick<SIDEMainProps, 'tab'>> = ({
1110
tab,
1211
}) => (
1312
<>
1413
<TabPanel index={TESTS_TAB} value={tab}>
15-
<TestsDrawer
16-
session={session}
17-
/>
14+
<TestsDrawer />
1815
</TabPanel>
1916
<TabPanel index={SUITES_TAB} value={tab}>
20-
<SuitesDrawer
21-
session={session}
22-
/>
17+
<SuitesDrawer />
2318
</TabPanel>
2419
<TabPanel index={PROJECT_TAB} value={tab}>
25-
<ProjectDrawer
26-
session={session}
27-
/>
20+
<ProjectDrawer />
2821
</TabPanel>
2922
</>
3023
)

‎packages/selenium-ide/src/browser/components/Input/index.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React, { ChangeEvent, FocusEvent } from 'react';
2+
3+
type Props = React.HTMLAttributes<HTMLInputElement> & {
4+
value: string;
5+
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
6+
onFocus: (e: FocusEvent<HTMLInputElement>) => void;
7+
onBlur: (e: FocusEvent<HTMLInputElement>) => void;
8+
}
9+
10+
type State = {
11+
isFocused: boolean;
12+
currentValue: string;
13+
}
14+
15+
class Input extends React.Component<Props, State> {
16+
static defaultProps: Partial<Props> = {
17+
onChange: () => {},
18+
onFocus: () => {},
19+
onBlur: () => {}
20+
};
21+
22+
state: State = {
23+
isFocused: false,
24+
currentValue: this.props.value
25+
};
26+
27+
static getDerivedStateFromProps(nextProps: Props, prevState: State) {
28+
// This lifecycle method does not have access to 'this',
29+
// so you cannot directly compare with 'this.state'.
30+
// Instead, it receives the next props and previous state:
31+
if (!prevState.isFocused) {
32+
return { currentValue: nextProps.value };
33+
}
34+
return null; // Return null to indicate no change to state.
35+
}
36+
37+
handleChange = (e: ChangeEvent<HTMLInputElement>) => {
38+
this.setState({ currentValue: e.target.value });
39+
this.props.onChange(e);
40+
};
41+
42+
handleFocus = (e: FocusEvent<HTMLInputElement>) => {
43+
this.setState({ isFocused: true });
44+
this.props.onFocus(e);
45+
};
46+
47+
handleBlur = (e: FocusEvent<HTMLInputElement>) => {
48+
this.setState({ isFocused: false });
49+
this.props.onBlur(e);
50+
};
51+
52+
render() {
53+
// Destructuring to avoid passing internal methods or state as props to the input element
54+
const { value, onChange, onFocus, onBlur, ...rest } = this.props;
55+
return (
56+
<input
57+
{...rest}
58+
onChange={this.handleChange}
59+
onFocus={this.handleFocus}
60+
onBlur={this.handleBlur}
61+
value={this.state.currentValue}
62+
/>
63+
);
64+
}
65+
}
66+
67+
export default Input;

‎packages/selenium-ide/src/browser/components/Logger/index.tsx‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,41 @@
1-
import Delete from '@mui/icons-material/Delete'
2-
import { Paper } from '@mui/material'
3-
import IconButton from '@mui/material/IconButton'
4-
import { LogLevel } from 'electron-log'
5-
import React from 'react'
1+
import Delete from '@mui/icons-material/Delete';
2+
import { Paper, IconButton } from '@mui/material';
3+
import React from 'react';
64

75
const consoleStyle = {
86
fontSize: '0.75rem',
97
lineHeight: '1.2',
10-
}
8+
};
119

1210
const SIDELogger: React.FC = () => {
13-
const logContainer = React.useRef<HTMLPreElement>(null)
11+
const logContainer = React.useRef<HTMLPreElement>(null);
12+
13+
const handleLog = React.useCallback((level: string, log: string) => {
14+
const el = logContainer.current;
15+
if (!el) return;
16+
const newLogEntry = document.createTextNode(
17+
`${new Date().toLocaleTimeString()} [${level}] ${log}\n`
18+
);
19+
el.appendChild(newLogEntry);
20+
el.scrollTo(0, el.scrollHeight);
21+
}, []); // useCallback ensures this function is memoized and not recreated on each render.
22+
1423
React.useEffect(() => {
15-
const handleLog = (level: LogLevel, log: string) => {
16-
const el = logContainer.current
17-
if (!el) return;
18-
el.append(
19-
`${new Date().toLocaleTimeString()} [${level}] ${log}\n`
20-
)
21-
el.scrollTo(0, el.scrollHeight)
22-
}
23-
window.sideAPI.system.onLog.addListener(handleLog)
24+
window.sideAPI.system.onLog.addListener(handleLog);
2425
return () => {
25-
window.sideAPI.system.onLog.removeListener(handleLog)
26-
}
27-
}, [logContainer])
26+
window.sideAPI.system.onLog.removeListener(handleLog);
27+
};
28+
}, [handleLog]); // Depend on handleLog which is now memoized.
29+
2830
return (
2931
<>
3032
<div className="p-1 pos-abs" style={{ top: 0, right: 0 }}>
3133
<Paper className="p-1" elevation={3} square>
3234
<IconButton
3335
onClick={() => {
34-
if (logContainer.current) {
35-
logContainer.current.innerHTML = ''
36+
const el = logContainer.current;
37+
if (el) {
38+
el.textContent = ''; // Safer and potentially faster than innerHTML
3639
}
3740
}}
3841
>
@@ -46,7 +49,7 @@ const SIDELogger: React.FC = () => {
4649
style={consoleStyle}
4750
/>
4851
</>
49-
)
50-
}
52+
);
53+
};
5154

52-
export default SIDELogger
55+
export default SIDELogger;

‎packages/selenium-ide/src/browser/components/Main/index.tsx‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,19 @@ import SuitesTab from '../../windows/ProjectEditor/tabs/Suites/SuitesTab'
66
import TestsTab from '../../windows/ProjectEditor/tabs/Tests/TestsTab'
77
import { SIDEMainProps } from '../types'
88

9-
const SIDEMain: React.FC<Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>> = ({
10-
session,
9+
const SIDEMain: React.FC<Pick<SIDEMainProps, 'setTab' | 'tab'>> = ({
1110
setTab,
1211
tab,
1312
}) => (
1413
<>
1514
<TabPanel index={TESTS_TAB} value={tab}>
16-
<TestsTab
17-
session={session}
18-
setTab={setTab}
19-
tab={tab}
20-
/>
15+
<TestsTab />
2116
</TabPanel>
2217
<TabPanel index={SUITES_TAB} value={tab}>
23-
<SuitesTab
24-
session={session}
25-
setTab={setTab}
26-
tab={tab}
27-
/>
18+
<SuitesTab />
2819
</TabPanel>
2920
<TabPanel index={PROJECT_TAB} value={tab}>
30-
<ProjectTab
31-
session={session}
32-
setTab={setTab}
33-
tab={tab}
34-
/>
21+
<ProjectTab setTab={setTab} tab={tab} />
3522
</TabPanel>
3623
</>
3724
)

0 commit comments

Comments
 (0)