-
-
Notifications
You must be signed in to change notification settings - Fork 8.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[grid][ui] Add search field for running sessions (#11197)
* [grid][ui] Added search field for running sessions Changes Include: 1) Modified the EnhancedTableToolbar to accept children elements as props, also fixed its styling using Box elements 2) Added a new React component called RunningSessionsSearchBar, this component contains three things: search input field, info/help icon, help dialog 3) Added search filters during the render step for the rows, results are filter right after they are sorted for rendering - the ordering should still work 4) Updated the tests for RunningSessions to check for some of the use cases using search field Fixes #10632 * [grid][ui] Allow users to do a lazy search The search field will allow users to enter any string and it will filter out any sessions containing that string. Users can still use the complex searches by using the = symbol and the search syntax. Fixes #10632 Co-authored-by: Diego Molina <diemol@users.noreply.github.com>
- Loading branch information
Showing
4 changed files
with
285 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
160 changes: 160 additions & 0 deletions
160
javascript/grid-ui/src/components/RunningSessions/RunningSessionsSearchBar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| /* | ||
| * Licensed to the Software Freedom Conservancy (SFC) under one | ||
| * or more contributor license agreements. See the NOTICE file | ||
| * distributed with this work for additional information | ||
| * regarding copyright ownership. The SFC licenses this file | ||
| * to you under the Apache License, Version 2.0 (the | ||
| * "License"); you may not use this file except in compliance | ||
| * with the License. You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, | ||
| * software distributed under the License is distributed on an | ||
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
| * KIND, either express or implied. See the License for the | ||
| * specific language governing permissions and limitations | ||
| * under the License. | ||
| */ | ||
|
|
||
| import React from 'react' | ||
| import InfoIcon from '@mui/icons-material/Info' | ||
| import Typography from '@mui/material/Typography' | ||
| import Table from '@mui/material/Table' | ||
| import TableCell from '@mui/material/TableCell' | ||
| import TableContainer from '@mui/material/TableContainer' | ||
| import TableHead from '@mui/material/TableHead' | ||
| import TableRow from '@mui/material/TableRow' | ||
| import TableBody from '@mui/material/TableBody' | ||
| import OutlinedInput from '@mui/material/OutlinedInput' | ||
| import IconButton from '@mui/material/IconButton' | ||
| import DialogTitle from '@mui/material/DialogTitle' | ||
| import Dialog from '@mui/material/Dialog' | ||
| import DialogActions from '@mui/material/DialogActions' | ||
| import DialogContent from '@mui/material/DialogContent' | ||
| import Button from '@mui/material/Button' | ||
| import Box from '@mui/material/Box' | ||
|
|
||
| interface RunningSessionsSearchBarProps { | ||
| searchFilter: string | ||
| handleSearch: (value: string) => void | ||
| searchBarHelpOpen: boolean | ||
| setSearchBarHelpOpen: (value: boolean) => void | ||
| } | ||
|
|
||
| function RunningSessionsSearchBar ({ | ||
| searchFilter, | ||
| handleSearch, | ||
| searchBarHelpOpen, | ||
| setSearchBarHelpOpen | ||
| }: RunningSessionsSearchBarProps): JSX.Element { | ||
| return ( | ||
| <Box | ||
| component='span' | ||
| display='flex' | ||
| justifyContent='flex-end' | ||
| > | ||
| <OutlinedInput | ||
| id='search-query-tab-running' | ||
| autoFocus | ||
| margin='dense' | ||
| type='text' | ||
| value={searchFilter} | ||
| placeholder='search sessions...' | ||
| onChange={(e) => { | ||
| handleSearch(e.target.value) | ||
| }} | ||
| /> | ||
| <IconButton | ||
| sx={{ padding: '1px' }} | ||
| onClick={() => setSearchBarHelpOpen(true)} | ||
| size='large' | ||
| > | ||
| <InfoIcon /> | ||
| </IconButton> | ||
| <SearchBarHelpDialog isDialogOpen={searchBarHelpOpen} onClose={() => setSearchBarHelpOpen(false)} /> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| interface SearchBarHelpDialogProps { | ||
| isDialogOpen: boolean | ||
| onClose: (e) => void | ||
| } | ||
|
|
||
| function SearchBarHelpDialog ({ | ||
| isDialogOpen, | ||
| onClose | ||
| }: SearchBarHelpDialogProps): JSX.Element { | ||
| return ( | ||
| <Dialog | ||
| onClose={onClose} | ||
| aria-labelledby='search-bar-help-dialog' | ||
| open={isDialogOpen} | ||
| fullWidth | ||
| maxWidth='sm' | ||
| > | ||
| <DialogTitle id='search-bar-help-dialog'> | ||
| <Typography | ||
| gutterBottom component='span' | ||
| sx={{ paddingX: '10px' }} | ||
| > | ||
| <Box | ||
| fontWeight='fontWeightBold' | ||
| mr={1} | ||
| display='inline' | ||
| > | ||
| Search Bar Help Dialog | ||
| </Box> | ||
| </Typography> | ||
| </DialogTitle> | ||
| <DialogContent | ||
| dividers | ||
| sx={{ height: '500px' }} | ||
| > | ||
| <p> | ||
| The search field will do a lazy search and look for all the sessions with a matching string | ||
| however if you want to do more complex searches you can use some of the queries below. | ||
| </p> | ||
| <TableContainer> | ||
| <Table sx={{ minWidth: 300 }} aria-label='search bar help table' size='small'> | ||
| <TableHead> | ||
| <TableRow> | ||
| <TableCell><Box fontWeight='bold'>Property to Search</Box></TableCell> | ||
| <TableCell><Box fontWeight='bold'>Sample Query</Box></TableCell> | ||
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| <TableRow> | ||
| <TableCell>Session IDs</TableCell> | ||
| <TableCell><pre>id=aee43d32ks10e85d359029719c20b146</pre></TableCell> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell>Browser Name</TableCell> | ||
| <TableCell><pre>browserName=chrome</pre></TableCell> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell>Capability</TableCell> | ||
| <TableCell><pre>capabilities,platformName=windows</pre></TableCell> | ||
| </TableRow> | ||
| </TableBody> | ||
| </Table> | ||
| </TableContainer> | ||
| <p>The basic syntax for searching is <strong><i>key=value</i></strong> or <strong><i>capabilities,key=value</i></strong>. | ||
| All properties under <strong><i>SessionData</i></strong> are available for search and most capabilities are also searchable | ||
| </p> | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <Button | ||
| onClick={onClose} | ||
| color='primary' | ||
| variant='contained' | ||
| > | ||
| Close | ||
| </Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| ) | ||
| } | ||
|
|
||
| export default RunningSessionsSearchBar |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters