Skip to content

Commit

Permalink
playback window tab bar
Browse files Browse the repository at this point in the history
  • Loading branch information
toddtarsi committed Jan 11, 2024
1 parent 810cca7 commit 33c6637
Show file tree
Hide file tree
Showing 43 changed files with 739 additions and 447 deletions.
4 changes: 2 additions & 2 deletions packages/selenium-ide/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "selenium-ide",
"version": "4.0.1-alpha.74",
"version": "4.0.1-alpha.75",
"private": false,
"description": "Selenium IDE electron app",
"author": "Todd <[email protected]>",
Expand Down Expand Up @@ -111,7 +111,7 @@
"@seleniumhq/code-export-python-pytest": "^4.0.0-alpha.4",
"@seleniumhq/code-export-ruby-rspec": "^4.0.0-alpha.3",
"@seleniumhq/get-driver": "^4.0.0-alpha.3",
"@seleniumhq/side-api": "^4.0.0-alpha.42",
"@seleniumhq/side-api": "^4.0.0-alpha.43",
"@seleniumhq/side-commons": "^4.0.0-alpha.2",
"@seleniumhq/side-model": "^4.0.0-alpha.5",
"@seleniumhq/side-runtime": "^4.0.0-alpha.35",
Expand Down
32 changes: 32 additions & 0 deletions packages/selenium-ide/src/browser/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ body,
display: block;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
}

/**
Expand Down Expand Up @@ -174,6 +175,16 @@ body,
margin-bottom: auto;
}

.m-0 {
margin: 0;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.m-2 {
margin: 0.5rem;
}
Expand Down Expand Up @@ -208,10 +219,24 @@ body,
.pt-4 {
padding-top: 1rem;
}
.ps-3 {
padding-left: 0.5rem;
}
.ps-4 {
padding-left: 1rem;
}
.px-3 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-2 {
padding-bottom: 0.25rem;
padding-top: 0.25rem;
}
.py-3 {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
Expand All @@ -221,6 +246,13 @@ body,
padding-top: 1rem;
}

/**
* Width
*/
.mw-200 {
max-width: 200px;
}

/**
* Text-Align
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/selenium-ide/src/browser/windows/Logger/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const SIDELogger: React.FC = () => {
</Paper>
</div>
<pre
className="fill overflow-y"
className="fill m-0 overflow-y"
ref={logContainer}
style={consoleStyle}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@ export const window: WindowConfig['window'] = () => ({
resizable: false,
roundedCorners: false,
show: false,
skipTaskbar: true,
title: 'Playback Window',
})
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import IconButton from '@mui/material/IconButton'
import MenuIcon from '@mui/icons-material/Menu'
import React from 'react'
import TabPanel from '../Tab/Panel'
import SuiteControls from '../../tabs/Suites/Controls'
Expand All @@ -9,29 +7,13 @@ import { SIDEMainProps } from '../types'
import AppBarTabs from './AppBarTabs'
import { Paper } from '@mui/material'

const SIDEAppBar: React.FC<SIDEMainProps> = ({
openDrawer,
const SIDEAppBar: React.FC<Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>> = ({
session,
setOpenDrawer,
setTab,
tab,
}) => {
return (
<Paper className="flex flex-row width-100" elevation={5} square>
<IconButton
aria-label="openDrawer drawer"
color="inherit"
onClick={() => setOpenDrawer(true)}
sx={{
flex: 0,
paddingX: 2,
borderRadius: 0.5,
...(openDrawer && { display: 'none' }),
}}
size="small"
>
<MenuIcon />
</IconButton>
<Paper className="flex flex-row width-100" elevation={15} square>
<AppBarTabs setTab={setTab} tab={tab} />
<div className="flex flex-1" />
<TabPanel index={TESTS_TAB} value={tab}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,32 +14,20 @@ export interface EditorToolbarIconsProps {
disabled?: boolean
onAdd?: () => void
onEdit?: () => void
editText?: string
onRemove?: () => void
onView?: () => void
}

export const EditorToolbarIcons: FC<EditorToolbarIconsProps> = ({
disabled = false,
editText = 'Edit',
onAdd,
onEdit,
onRemove,
onView,
}) => (
<>
{onAdd ? (
<Box sx={{ flex: 0 }}>
<Tooltip title="Add">
<IconButton
{...baseControlProps}
color="success"
disabled={disabled}
onClick={onAdd}
>
<AddIcon />
</IconButton>
</Tooltip>
</Box>
) : null}
{onRemove ? (
<Box sx={{ flex: 0 }}>
<Tooltip title="Remove">
Expand All @@ -56,7 +44,7 @@ export const EditorToolbarIcons: FC<EditorToolbarIconsProps> = ({
) : null}
{onEdit ? (
<Box sx={{ flex: 0 }}>
<Tooltip title="Edit">
<Tooltip title={editText}>
<IconButton
{...baseControlProps}
color="info"
Expand All @@ -68,6 +56,20 @@ export const EditorToolbarIcons: FC<EditorToolbarIconsProps> = ({
</Tooltip>
</Box>
) : null}
{onAdd ? (
<Box sx={{ flex: 0 }}>
<Tooltip title="Add">
<IconButton
{...baseControlProps}
color="success"
disabled={disabled}
onClick={onAdd}
>
<AddIcon />
</IconButton>
</Tooltip>
</Box>
) : null}
{onView ? (
<Box sx={{ flex: 0 }}>
<Tooltip title="View Playback Results">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,29 @@ import SuitesTab from '../../tabs/Suites/SuitesTab'
import TestsTab from '../../tabs/Tests/TestsTab'
import { SIDEMainProps } from '../types'

const SIDEMain: React.FC<
Pick<
SIDEMainProps,
'openDrawer' | 'session' | 'setOpenDrawer' | 'setTab' | 'tab'
>
> = ({ openDrawer, session, setOpenDrawer, setTab, tab }) => (
const SIDEMain: React.FC<Pick<SIDEMainProps, 'session' | 'setTab' | 'tab'>> = ({
session,
setTab,
tab,
}) => (
<>
<TabPanel index={TESTS_TAB} value={tab}>
<TestsTab
openDrawer={openDrawer}
session={session}
setOpenDrawer={setOpenDrawer}
setTab={setTab}
tab={tab}
/>
</TabPanel>
<TabPanel index={SUITES_TAB} value={tab}>
<SuitesTab
openDrawer={openDrawer}
session={session}
setOpenDrawer={setOpenDrawer}
setTab={setTab}
tab={tab}
/>
</TabPanel>
<TabPanel index={PROJECT_TAB} value={tab}>
<ProjectTab
openDrawer={openDrawer}
session={session}
setOpenDrawer={setOpenDrawer}
setTab={setTab}
tab={tab}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import Paper from '@mui/material/Paper'
import React from 'react'
import PlaybackTab, { TabShape } from './tab'

const {
windows: {
onPlaybackWindowChanged,
onPlaybackWindowClosed,
onPlaybackWindowOpened,
},
} = window.sideAPI
console.log(onPlaybackWindowChanged, onPlaybackWindowClosed, onPlaybackWindowOpened)

const PlaybackTabBar: React.FC = () => {
const [tabs, setTabs] = React.useState<TabShape[]>([])
React.useEffect(() => {
onPlaybackWindowChanged.addListener((id, partialTab) => {
setTabs((tabs) => {
const tab = tabs.find((tab) => tab.id === id)
if (!tab) return tabs
return tabs.map((tab) => {
if (tab.id !== id) return tab
return {
...tab,
...partialTab,
}
})
})
});
onPlaybackWindowOpened.addListener((id, {title}) => {
setTabs((tabs) => [...tabs, { id, focused: false, title }])
});
onPlaybackWindowClosed.addListener((id) => {
setTabs((tabs) => tabs.filter((tab) => tab.id !== id))
});
}, []);
return (
<Paper
className="flex flex-initial flex-row px-3 width-100"
elevation={5}
square
sx={{
height: 40,
}}
>
{tabs.map((tab) => (
<PlaybackTab key={tab.id} {...tab} />
))}
</Paper>
)
}

export default PlaybackTabBar
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import Clear from '@mui/icons-material/Clear'
import Box from '@mui/material/Box'
import IconButton from '@mui/material/IconButton'
import Paper from '@mui/material/Paper'
import Typography from '@mui/material/Typography'
import React from 'react'

const {
windows: { closePlaybackWindow, focusPlaybackWindow },
} = window.sideAPI

export type TabShape = {
id: number
title: string
focused: boolean
}

const PlaybackTab: React.FC<TabShape> = ({ focused, id, title }) => {
return (
<Paper
className="flex flex-1 flex-row mw-200 mx-2 ps-3"
elevation={10}
onClick={() => {
focusPlaybackWindow(id)
}}
square
sx={{
marginBottom: focused ? 0 : 0.25,
}}
>
<Box className="flex-1 text-overflow">
<Box className="flex flex-col height-100" justifyContent="center">
<Typography variant="subtitle1">{title}</Typography>
</Box>
</Box>
<Box className="flex flex-initial">
<IconButton
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
closePlaybackWindow(id)
}}
sx={{ borderRadius: 0.5 }}
>
<Clear />
</IconButton>
</Box>
</Paper>
)
}

export default PlaybackTab
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import FormControl from '@mui/material/FormControl'
import Box from '@mui/material/Box'
import Paper from '@mui/material/Paper'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import React from 'react'
import { SIDEMainProps } from '../types'

Expand All @@ -10,21 +11,23 @@ const {

const URLBar: React.FC<Pick<SIDEMainProps, 'session'>> = ({ session }) => {
return (
<Paper className="flex-initial pb-0 p-3" elevation={7} square>
<FormControl fullWidth size="small">
<Paper className="flex flex-initial flex-row px-3 py-2" elevation={15} square>
<Box className="flex flex-col flex-initial ps-4" justifyContent="center">
<Typography>URL</Typography>
</Box>
<Box className="flex-1 px-4">
<TextField
id="url"
label="URL"
name="url"
className="width-100"
onChange={(e: any) => {
update({
url: e.target.value,
})
}}
margin="none"
size="small"
value={session.project.url}
/>
</FormControl>
</Box>
</Paper>
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { TAB } from '../enums/tab'

export interface SIDEMainProps {
session: CoreSessionData
openDrawer: boolean
setOpenDrawer: React.Dispatch<React.SetStateAction<boolean>>
setTab: React.Dispatch<React.SetStateAction<TAB>>
tab: number
}
Loading

0 comments on commit 33c6637

Please sign in to comment.