Skip to content

Commit c8daf2c

Browse files
diemoldiemol
committed
[grid] Breaking Grid UI into components
This simplifies the use of the React Router component.
1 parent cfea6be commit c8daf2c

File tree

6 files changed

+280
-364
lines changed

6 files changed

+280
-364
lines changed

‎javascript/grid-ui/src/App.css

-5
This file was deleted.

‎javascript/grid-ui/src/App.tsx

+52-18
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import {ApolloClient, ApolloProvider, InMemoryCache} from "@apollo/client";
2-
// import { HashRouter as Router, Route, Switch } from "react-router-dom";
2+
import {HashRouter as Router, Route, Switch} from "react-router-dom";
33
import React from "react";
44
import ReactModal from "react-modal";
55
// css import order is important
66
/* 1 */
77
// import "./css/theme.css";
88
/* 2 */
99
// import "./css/theme-selenium.css";
10-
/* 3 */
11-
// import "./App.css";
12-
// import HelpPage from "./screens/HelpPage/HelpPage";
13-
// import NavBar from "./components/NavBar/NavBar";
1410
import {GridConfig} from "./config";
1511
import NodeType from "./models/node";
12+
import TopBar from "./components/TopBar/TopBar";
1613
import Overview from "./screens/Overview/Overview";
14+
import {Box, Link, makeStyles} from "@material-ui/core";
15+
import Container from "@material-ui/core/Container";
16+
import Typography from "@material-ui/core/Typography";
1717

1818
export const client = new ApolloClient({
1919
cache: new InMemoryCache(),
@@ -30,25 +30,59 @@ declare global {
3030
}
3131
}
3232

33+
function Copyright() {
34+
return (
35+
<Typography variant="body2" color="textSecondary" align="center">
36+
{'All rights reserved - '}
37+
<Link color="inherit" href="https://sfconservancy.org/" target={"_blank"}>
38+
Software Freedom Conservancy
39+
</Link>{' '}
40+
{new Date().getFullYear()}
41+
{'.'}
42+
</Typography>
43+
);
44+
}
45+
46+
47+
const useStyles = makeStyles((theme) => ({
48+
root: {
49+
display: "flex",
50+
},
51+
content: {
52+
flexGrow: 1,
53+
height: '100vh',
54+
overflow: 'auto',
55+
paddingTop: theme.spacing(8),
56+
},
57+
container: {
58+
paddingTop: theme.spacing(4),
59+
paddingBottom: theme.spacing(4),
60+
},
61+
}));
62+
63+
3364
if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement("#root");
3465

3566
function App() {
67+
const classes = useStyles();
3668
return (
3769
<ApolloProvider client={client}>
38-
<Overview/>
70+
<Router>
71+
<div className={classes.root}>
72+
<TopBar/>
73+
<main className={classes.content}>
74+
<Container maxWidth={false} className={classes.container}>
75+
<Switch>
76+
<Route exact path={"/"} component={Overview}/>
77+
</Switch>
78+
</Container>
79+
<Box pt={4}>
80+
<Copyright/>
81+
</Box>
82+
</main>
83+
</div>
84+
</Router>
3985
</ApolloProvider>
40-
// <ApolloProvider client={client}>
41-
// <Router>
42-
// <NavBar />
43-
// <Switch>
44-
// <Route exact path="/" component={Console} />
45-
// <Route exact path="/node/:id" component={NodePage} />
46-
// <Route exact path="/home" component={HelpPage} />
47-
// <Route exact path="/console" component={Console} />
48-
// <Route component={HelpPage} />
49-
// </Switch>
50-
// </Router>
51-
// </ApolloProvider>
5286
);
5387
}
5488

‎javascript/grid-ui/src/components/NavBar/NavBar.tsx

+80-135
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,89 @@
1-
// https://github.com/vercel/next.js/issues/11230#issuecomment-643595034
1+
import Divider from '@material-ui/core/Divider';
2+
import Drawer from '@material-ui/core/Drawer';
3+
import IconButton from '@material-ui/core/IconButton';
4+
import List from '@material-ui/core/List';
5+
import ListItem from "@material-ui/core/ListItem";
6+
import ListItemIcon from "@material-ui/core/ListItemIcon";
7+
import ListItemText from "@material-ui/core/ListItemText";
8+
import {makeStyles} from '@material-ui/core/styles';
9+
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
10+
import DashboardIcon from "@material-ui/icons/Dashboard";
11+
import clsx from 'clsx';
12+
import * as React from 'react';
213

3-
import React, {useState} from "react";
4-
import {Link} from "react-router-dom";
5-
import {ReactComponent as SearchIcon} from "../../assets/icons/search2.svg";
6-
import {ReactComponent as TimesIcon} from "../../assets/icons/times.svg";
7-
import seleniumIcon from "../../assets/selenium.svg";
8-
import "../../css/icons.css";
9-
import styles from "./NavBar.module.css";
10-
import searchHighlight from "../../core/Search";
11-
import "./NavBar.css";
14+
const drawerWidth = 240;
1215

13-
/**
14-
* NavBar component, includes search bar and search functions
15-
* Look at `core/Search.ts` for the highlight function
16-
*/
17-
export default function NavBar() {
18-
let [prevSearch, setPrevSearch] = useState<any>();
19-
let [prevTerm, setPrevTerm] = useState<string>("");
16+
const useStyles = makeStyles((theme) => ({
17+
root: {
18+
display: 'flex',
19+
},
20+
toolbarIcon: {
21+
display: 'flex',
22+
alignItems: 'center',
23+
justifyContent: 'flex-end',
24+
padding: '0 8px',
25+
...theme.mixins.toolbar,
26+
backgroundColor: theme.palette.primary.main,
27+
},
28+
drawerPaper: {
29+
position: 'relative',
30+
whiteSpace: 'nowrap',
31+
width: drawerWidth,
32+
minHeight: '100vh',
33+
transition: theme.transitions.create('width', {
34+
easing: theme.transitions.easing.sharp,
35+
duration: theme.transitions.duration.enteringScreen,
36+
}),
37+
},
38+
drawerPaperClose: {
39+
overflowX: 'hidden',
40+
minHeight: '100vh',
41+
transition: theme.transitions.create('width', {
42+
easing: theme.transitions.easing.sharp,
43+
duration: theme.transitions.duration.leavingScreen,
44+
}),
45+
width: theme.spacing(7),
46+
[theme.breakpoints.up('sm')]: {
47+
width: theme.spacing(9),
48+
},
49+
},
50+
}));
2051

21-
const searchTerminDOM = (term: string) => {
22-
if (prevSearch) {
23-
prevSearch.revert();
24-
}
25-
if (term && term !== "") {
26-
prevSearch = searchHighlight(term);
27-
setPrevSearch(prevSearch);
28-
}
29-
setPrevTerm(term);
30-
};
31-
32-
const rerunSearch = () => searchTerminDOM(prevTerm);
33-
window.rerunSearch = rerunSearch;
52+
function ListItemLink(props) {
53+
return <ListItem button component="a" {...props} />;
54+
}
3455

35-
const clearSearch = () => {
36-
const searchBar = document.getElementById("search-by") as HTMLInputElement;
37-
searchBar.value = "";
38-
// revert prev search as well
39-
searchTerminDOM("");
40-
};
56+
export default function NavBar(props) {
57+
const classes = useStyles();
58+
const open = props.open;
4159

4260
return (
43-
<React.Fragment>
44-
<nav id="sidebar">
45-
<div id="header-wrapper">
46-
<div id="header" style={{ height: "70px" }}>
47-
<Link id="logo" to="/home">
48-
<img
49-
src={seleniumIcon}
50-
alt="logo"
51-
className={styles.iconDetails}
52-
/>
53-
<div
54-
style={{
55-
marginLeft: "60px",
56-
marginTop: "5px",
57-
}}
58-
>
59-
<h3 className={styles.h4}>Selenium Grid</h3>
60-
</div>
61-
</Link>
62-
</div>
63-
64-
<div className="searchbox">
65-
<label htmlFor="search-by">
66-
<SearchIcon className="icon-green" />
67-
</label>
68-
<input
69-
data-search-input=""
70-
id="search-by"
71-
type="search"
72-
placeholder="Search..."
73-
autoComplete="off"
74-
onChange={(ev) => searchTerminDOM(ev.target.value)}
75-
/>
76-
<span data-search-clear="">
77-
<TimesIcon className="icon-green" onClick={clearSearch} />
78-
</span>
79-
</div>
61+
<Drawer
62+
variant="permanent"
63+
classes={{
64+
paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
65+
}}
66+
open={open}
67+
>
68+
<div className={classes.toolbarIcon}>
69+
<IconButton color={"secondary"}>
70+
<ChevronLeftIcon/>
71+
</IconButton>
72+
</div>
73+
<Divider/>
74+
<List>
75+
<div>
76+
<ListItemLink href={"#"}>
77+
<ListItemIcon>
78+
<DashboardIcon/>
79+
</ListItemIcon>
80+
<ListItemText primary="Overview"/>
81+
</ListItemLink>
8082
</div>
81-
<div className="highlightable ps-container ps-theme-default ps-active-y">
82-
<ul className="topics">
83-
<li data-nav-id="/console" title="Console" className="dd-item">
84-
<Link to="/console">Console</Link>
85-
</li>
86-
<li data-nav-id="/docs/" title="Docs" className="dd-item parent">
87-
<a href="https://www.selenium.dev/documentation/en/grid/">
88-
Docs
89-
<i className="fas fa-check read-icon"></i>
90-
</a>
91-
92-
<ul>
93-
<li
94-
data-nav-id="/grid/purposes_and_main_functionalities/"
95-
title="Purposes and main functionalities"
96-
className="dd-item "
97-
>
98-
<a href="https://www.selenium.dev/documentation/en/grid/purposes_and_main_functionalities/">
99-
Purposes and functionalities
100-
<i className="fas fa-check read-icon"></i>
101-
</a>
102-
</li>
103-
104-
<li
105-
data-nav-id="/grid/when_to_use_grid/"
106-
title="When to use Grid"
107-
className="dd-item "
108-
>
109-
<a href="https://www.selenium.dev/documentation/en/grid/when_to_use_grid/">
110-
When to use Grid
111-
<i className="fas fa-check read-icon"></i>
112-
</a>
113-
</li>
114-
115-
<li
116-
data-nav-id="/grid/grid_4/"
117-
title="Grid 4"
118-
className="dd-item"
119-
>
120-
<a href="https://www.selenium.dev/documentation/en/grid/grid_4/">
121-
Grid 4<i className="fas fa-check read-icon"></i>
122-
</a>
123-
124-
<ul>
125-
<li
126-
data-nav-id="/grid/grid_4/components_of_a_grid/"
127-
title="Components"
128-
className="dd-item "
129-
>
130-
<a href="https://www.selenium.dev/documentation/en/grid/grid_4/components_of_a_grid/">
131-
Components
132-
<i className="fas fa-check read-icon"></i>
133-
</a>
134-
</li>
135-
</ul>
136-
</li>
137-
</ul>
138-
</li>
139-
</ul>
140-
</div>
141-
</nav>
142-
</React.Fragment>
83+
</List>
84+
{/*<Divider/>*/}
85+
{/*<List>{secondaryListItems}</List>*/}
86+
</Drawer>
14387
);
14488
}
89+

0 commit comments

Comments
 (0)