Path: blob/trunk/javascript/grid-ui/src/components/RunningSessions/RunningSessionsSearchBar.tsx
2887 views
// Licensed to the Software Freedom Conservancy (SFC) under one1// or more contributor license agreements. See the NOTICE file2// distributed with this work for additional information3// regarding copyright ownership. The SFC licenses this file4// to you under the Apache License, Version 2.0 (the5// "License"); you may not use this file except in compliance6// with the License. You may obtain a copy of the License at7//8// http://www.apache.org/licenses/LICENSE-2.09//10// Unless required by applicable law or agreed to in writing,11// software distributed under the License is distributed on an12// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY13// KIND, either express or implied. See the License for the14// specific language governing permissions and limitations15// under the License.1617import React from 'react'18import { Info as InfoIcon } from '@mui/icons-material'19import Typography from '@mui/material/Typography'20import Table from '@mui/material/Table'21import TableCell from '@mui/material/TableCell'22import TableContainer from '@mui/material/TableContainer'23import TableHead from '@mui/material/TableHead'24import TableRow from '@mui/material/TableRow'25import TableBody from '@mui/material/TableBody'26import OutlinedInput from '@mui/material/OutlinedInput'27import IconButton from '@mui/material/IconButton'28import DialogTitle from '@mui/material/DialogTitle'29import Dialog from '@mui/material/Dialog'30import DialogActions from '@mui/material/DialogActions'31import DialogContent from '@mui/material/DialogContent'32import Button from '@mui/material/Button'33import Box from '@mui/material/Box'34import { alpha, styled } from '@mui/material/styles'35import InputBase from '@mui/material/InputBase'36import { Search as SearchIcon } from '@mui/icons-material'3738interface RunningSessionsSearchBarProps {39searchFilter: string40handleSearch: (value: string) => void41searchBarHelpOpen: boolean42setSearchBarHelpOpen: (value: boolean) => void43}4445const Search = styled('div')(({ theme }) => ({46position: 'relative',47borderRadius: theme.shape.borderRadius,48backgroundColor: alpha(theme.palette.common.white, 0.15),49'&:hover': {50backgroundColor: alpha(theme.palette.common.white, 0.25),51},52marginLeft: 0,53width: '100%',54[theme.breakpoints.up('sm')]: {55marginLeft: theme.spacing(1),56width: 'auto',57},58}));5960const SearchIconWrapper = styled('div')(({ theme }) => ({61padding: theme.spacing(0, 2),62height: '100%',63position: 'absolute',64pointerEvents: 'none',65display: 'flex',66alignItems: 'center',67justifyContent: 'center',68}));6970const StyledInputBase = styled(InputBase)(({ theme }) => ({71color: 'inherit',72'& .MuiInputBase-input': {73padding: theme.spacing(1, 1, 1, 0),74// vertical padding + font size from searchIcon75paddingLeft: `calc(1em + ${theme.spacing(4)})`,76transition: theme.transitions.create('width'),77width: '100%',78[theme.breakpoints.up('sm')]: {79width: '12ch',80'&:focus': {81width: '20ch',82},83},84},85}));8687function RunningSessionsSearchBar ({88searchFilter,89handleSearch,90searchBarHelpOpen,91setSearchBarHelpOpen92}: RunningSessionsSearchBarProps): JSX.Element {93return (94<Box95component='span'96display='flex'97justifyContent='flex-end'98>99<Search>100<SearchIconWrapper>101<SearchIcon />102</SearchIconWrapper>103<StyledInputBase104id='search-query-tab-running'105autoFocus106value={searchFilter}107onChange={(e) => handleSearch(e.target.value)}108placeholder="Search…"109inputProps={{ 'aria-label': 'search' }}110/>111</Search>112<IconButton113sx={{ padding: '1px' }}114onClick={() => setSearchBarHelpOpen(true)}115size='large'116>117<InfoIcon />118</IconButton>119<SearchBarHelpDialog isDialogOpen={searchBarHelpOpen} onClose={() => setSearchBarHelpOpen(false)} />120</Box>121)122}123124interface SearchBarHelpDialogProps {125isDialogOpen: boolean126onClose: (e) => void127}128129function SearchBarHelpDialog ({130isDialogOpen,131onClose132}: SearchBarHelpDialogProps): JSX.Element {133return (134<Dialog135onClose={onClose}136aria-labelledby='search-bar-help-dialog'137open={isDialogOpen}138fullWidth139maxWidth='sm'140>141<DialogTitle id='search-bar-help-dialog'>142<Typography143gutterBottom component='span'144sx={{ paddingX: '10px' }}145>146<Box147fontWeight='fontWeightBold'148mr={1}149display='inline'150>151Search Bar Help Dialog152</Box>153</Typography>154</DialogTitle>155<DialogContent156dividers157sx={{ height: '500px' }}158>159<p>160The search field will do a lazy search and look for all the sessions with a matching string161however if you want to do more complex searches you can use some of the queries below.162</p>163<TableContainer>164<Table sx={{ minWidth: 300 }} aria-label='search bar help table' size='small'>165<TableHead>166<TableRow>167<TableCell><Box fontWeight='bold'>Property to Search</Box></TableCell>168<TableCell><Box fontWeight='bold'>Sample Query</Box></TableCell>169</TableRow>170</TableHead>171<TableBody>172<TableRow>173<TableCell>Session IDs</TableCell>174<TableCell><pre>id=aee43d32ks10e85d359029719c20b146</pre></TableCell>175</TableRow>176<TableRow>177<TableCell>Browser Name</TableCell>178<TableCell><pre>browserName=chrome</pre></TableCell>179</TableRow>180<TableRow>181<TableCell>Capability</TableCell>182<TableCell><pre>capabilities,platformName=windows</pre></TableCell>183</TableRow>184</TableBody>185</Table>186</TableContainer>187<p>The basic syntax for searching is <strong><i>key=value</i></strong> or <strong><i>capabilities,key=value</i></strong>.188All properties under <strong><i>SessionData</i></strong> are available for search and most capabilities are also searchable189</p>190</DialogContent>191<DialogActions>192<Button193onClick={onClose}194color='primary'195variant='contained'196>197Close198</Button>199</DialogActions>200</Dialog>201)202}203204export default RunningSessionsSearchBar205206207