Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
seleniumhq
GitHub Repository: seleniumhq/selenium
Path: blob/trunk/javascript/grid-ui/src/components/RunningSessions/RunningSessionsSearchBar.tsx
2887 views
1
// Licensed to the Software Freedom Conservancy (SFC) under one
2
// or more contributor license agreements. See the NOTICE file
3
// distributed with this work for additional information
4
// regarding copyright ownership. The SFC licenses this file
5
// to you under the Apache License, Version 2.0 (the
6
// "License"); you may not use this file except in compliance
7
// with the License. You may obtain a copy of the License at
8
//
9
// http://www.apache.org/licenses/LICENSE-2.0
10
//
11
// Unless required by applicable law or agreed to in writing,
12
// software distributed under the License is distributed on an
13
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14
// KIND, either express or implied. See the License for the
15
// specific language governing permissions and limitations
16
// under the License.
17
18
import React from 'react'
19
import { Info as InfoIcon } from '@mui/icons-material'
20
import Typography from '@mui/material/Typography'
21
import Table from '@mui/material/Table'
22
import TableCell from '@mui/material/TableCell'
23
import TableContainer from '@mui/material/TableContainer'
24
import TableHead from '@mui/material/TableHead'
25
import TableRow from '@mui/material/TableRow'
26
import TableBody from '@mui/material/TableBody'
27
import OutlinedInput from '@mui/material/OutlinedInput'
28
import IconButton from '@mui/material/IconButton'
29
import DialogTitle from '@mui/material/DialogTitle'
30
import Dialog from '@mui/material/Dialog'
31
import DialogActions from '@mui/material/DialogActions'
32
import DialogContent from '@mui/material/DialogContent'
33
import Button from '@mui/material/Button'
34
import Box from '@mui/material/Box'
35
import { alpha, styled } from '@mui/material/styles'
36
import InputBase from '@mui/material/InputBase'
37
import { Search as SearchIcon } from '@mui/icons-material'
38
39
interface RunningSessionsSearchBarProps {
40
searchFilter: string
41
handleSearch: (value: string) => void
42
searchBarHelpOpen: boolean
43
setSearchBarHelpOpen: (value: boolean) => void
44
}
45
46
const Search = styled('div')(({ theme }) => ({
47
position: 'relative',
48
borderRadius: theme.shape.borderRadius,
49
backgroundColor: alpha(theme.palette.common.white, 0.15),
50
'&:hover': {
51
backgroundColor: alpha(theme.palette.common.white, 0.25),
52
},
53
marginLeft: 0,
54
width: '100%',
55
[theme.breakpoints.up('sm')]: {
56
marginLeft: theme.spacing(1),
57
width: 'auto',
58
},
59
}));
60
61
const SearchIconWrapper = styled('div')(({ theme }) => ({
62
padding: theme.spacing(0, 2),
63
height: '100%',
64
position: 'absolute',
65
pointerEvents: 'none',
66
display: 'flex',
67
alignItems: 'center',
68
justifyContent: 'center',
69
}));
70
71
const StyledInputBase = styled(InputBase)(({ theme }) => ({
72
color: 'inherit',
73
'& .MuiInputBase-input': {
74
padding: theme.spacing(1, 1, 1, 0),
75
// vertical padding + font size from searchIcon
76
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
77
transition: theme.transitions.create('width'),
78
width: '100%',
79
[theme.breakpoints.up('sm')]: {
80
width: '12ch',
81
'&:focus': {
82
width: '20ch',
83
},
84
},
85
},
86
}));
87
88
function RunningSessionsSearchBar ({
89
searchFilter,
90
handleSearch,
91
searchBarHelpOpen,
92
setSearchBarHelpOpen
93
}: RunningSessionsSearchBarProps): JSX.Element {
94
return (
95
<Box
96
component='span'
97
display='flex'
98
justifyContent='flex-end'
99
>
100
<Search>
101
<SearchIconWrapper>
102
<SearchIcon />
103
</SearchIconWrapper>
104
<StyledInputBase
105
id='search-query-tab-running'
106
autoFocus
107
value={searchFilter}
108
onChange={(e) => handleSearch(e.target.value)}
109
placeholder="Search…"
110
inputProps={{ 'aria-label': 'search' }}
111
/>
112
</Search>
113
<IconButton
114
sx={{ padding: '1px' }}
115
onClick={() => setSearchBarHelpOpen(true)}
116
size='large'
117
>
118
<InfoIcon />
119
</IconButton>
120
<SearchBarHelpDialog isDialogOpen={searchBarHelpOpen} onClose={() => setSearchBarHelpOpen(false)} />
121
</Box>
122
)
123
}
124
125
interface SearchBarHelpDialogProps {
126
isDialogOpen: boolean
127
onClose: (e) => void
128
}
129
130
function SearchBarHelpDialog ({
131
isDialogOpen,
132
onClose
133
}: SearchBarHelpDialogProps): JSX.Element {
134
return (
135
<Dialog
136
onClose={onClose}
137
aria-labelledby='search-bar-help-dialog'
138
open={isDialogOpen}
139
fullWidth
140
maxWidth='sm'
141
>
142
<DialogTitle id='search-bar-help-dialog'>
143
<Typography
144
gutterBottom component='span'
145
sx={{ paddingX: '10px' }}
146
>
147
<Box
148
fontWeight='fontWeightBold'
149
mr={1}
150
display='inline'
151
>
152
Search Bar Help Dialog
153
</Box>
154
</Typography>
155
</DialogTitle>
156
<DialogContent
157
dividers
158
sx={{ height: '500px' }}
159
>
160
<p>
161
The search field will do a lazy search and look for all the sessions with a matching string
162
however if you want to do more complex searches you can use some of the queries below.
163
</p>
164
<TableContainer>
165
<Table sx={{ minWidth: 300 }} aria-label='search bar help table' size='small'>
166
<TableHead>
167
<TableRow>
168
<TableCell><Box fontWeight='bold'>Property to Search</Box></TableCell>
169
<TableCell><Box fontWeight='bold'>Sample Query</Box></TableCell>
170
</TableRow>
171
</TableHead>
172
<TableBody>
173
<TableRow>
174
<TableCell>Session IDs</TableCell>
175
<TableCell><pre>id=aee43d32ks10e85d359029719c20b146</pre></TableCell>
176
</TableRow>
177
<TableRow>
178
<TableCell>Browser Name</TableCell>
179
<TableCell><pre>browserName=chrome</pre></TableCell>
180
</TableRow>
181
<TableRow>
182
<TableCell>Capability</TableCell>
183
<TableCell><pre>capabilities,platformName=windows</pre></TableCell>
184
</TableRow>
185
</TableBody>
186
</Table>
187
</TableContainer>
188
<p>The basic syntax for searching is <strong><i>key=value</i></strong> or <strong><i>capabilities,key=value</i></strong>.
189
All properties under <strong><i>SessionData</i></strong> are available for search and most capabilities are also searchable
190
</p>
191
</DialogContent>
192
<DialogActions>
193
<Button
194
onClick={onClose}
195
color='primary'
196
variant='contained'
197
>
198
Close
199
</Button>
200
</DialogActions>
201
</Dialog>
202
)
203
}
204
205
export default RunningSessionsSearchBar
206
207