[grid] Adding a new Help page (UI)

Author: diemol

javascript/grid-ui/src/App.tsx

@@ -10,6 +10,7 @@ import {Box, Link, makeStyles} from "@material-ui/core";
 import Container from "@material-ui/core/Container";
 import Typography from "@material-ui/core/Typography";
 import Sessions from "./screens/Sessions/Sessions";
+import Help from "./screens/Help/Help";
 
 export const client = new ApolloClient({
 	cache: new InMemoryCache(),
@@ -30,7 +31,7 @@ function Copyright() {
 	return (
 		<Typography variant="body2" color="textSecondary" align="center">
 			{'All rights reserved - '}
-			<Link color="inherit" href="https://sfconservancy.org/" target={"_blank"}>
+			<Link href="https://sfconservancy.org/" target={"_blank"}>
 				Software Freedom Conservancy
 			</Link>{' '}
 			{new Date().getFullYear()}
@@ -70,7 +71,9 @@ function App() {
 						<Container maxWidth={false} className={classes.container}>
 							<Switch>
 								<Route exact path={"/sessions"} component={Sessions}/>
+								<Route exact path={"/help"} component={Help}/>
 								<Route exact path={"/"} component={Overview}/>
+								<Route component={Help}/>
 							</Switch>
 						</Container>
 						<Box pt={4}>

javascript/grid-ui/src/screens/Help/Help.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import {Box, Container, Link, Typography} from "@material-ui/core";
+import {makeStyles} from "@material-ui/core/styles";
+import {useLocation} from "react-router-dom";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: theme.palette.secondary.main,
+    height: '100%',
+    paddingBottom: theme.spacing(3),
+    paddingTop: theme.spacing(3),
+    width: '100%',
+    justifyContent: "center",
+  },
+  image: {
+    marginTop: 50,
+    display: 'inline-block',
+    maxWidth: '100%',
+    width: 560
+  },
+}));
+
+export default function Help() {
+  const classes = useStyles();
+  const location = useLocation();
+
+  // noinspection HtmlUnknownAnchorTarget
+  return (
+    <div className={classes.root}>
+      <Box
+        display="flex"
+        flexDirection="column"
+        height="100%"
+        justifyContent="center"
+      >
+        <Container maxWidth="md">
+          {!["/sessions", "/help", "/"].includes(location.pathname) && (
+            <Box mt={2}>
+              <Typography
+                align="center"
+                color="textPrimary"
+                variant="h2"
+              >
+                Whoops! The URL specified routes to this help page.
+              </Typography>
+            </Box>
+          )}
+          <Box mt={6}>
+            <Typography
+              align="center"
+              color="textPrimary"
+              variant="h3"
+            >
+              More information about Selenium Grid can be found at the{' '}
+              <Link href="https://www.selenium.dev/documentation/en/grid/" target={"_blank"}>
+                documentation
+              </Link>.
+            </Typography>
+          </Box>
+          <Box mt={6}>
+            <Typography
+              align="center"
+              color="textPrimary"
+              variant="h3"
+            >
+              Please report bugs and issues to the Selenium{' '}
+              <Link href="https://github.com/SeleniumHQ/selenium/issues/new/choose" target={"_blank"}>
+                issue tracker
+              </Link>.
+            </Typography>
+          </Box>
+          <Box mt={6}>
+            <Typography
+              align="center"
+              color="textPrimary"
+              variant="h3"
+            >
+              For questions and help, check the different support channels on our{' '}
+              <Link href="https://www.selenium.dev/support/" target={"_blank"}>
+                website
+              </Link>.
+            </Typography>
+          </Box>
+          <Box m={10}>
+            <Typography
+              align="center"
+              color="textPrimary"
+              variant="h4"
+            >
+              Selenium is made possible through the efforts of our open source
+              community, contributions from these{' '}
+              <Link href="https://www.selenium.dev/documentation/en/front_matter/copyright_and_attributions/"
+                    target={"_blank"}>
+                people
+              </Link>
+              , and our{' '}
+              <Link href="https://www.selenium.dev/sponsors/" target={"_blank"}>
+                sponsors
+              </Link>.
+            </Typography>
+          </Box>
+        </Container>
+      </Box>
+    </div>
+  );
+}