[grid-ui] Refactoring all components to classes, and implementing rob…

…ust graphql data polling with error handling and recovering after errors
SeleniumHQ · Feb 18, 2021 · c317354 · c317354
1 parent 6662cc6
commit c317354
Show file tree

Hide file tree

Showing 7 changed files with 579 additions and 400 deletions.
diff --git a/javascript/grid-ui/src/App.tsx b/javascript/grid-ui/src/App.tsx
@@ -15,8 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import {ApolloClient, ApolloLink, ApolloProvider, HttpLink, InMemoryCache} from "@apollo/client";
-import {onError} from "@apollo/client/link/error";
+import {ApolloClient, ApolloProvider, InMemoryCache} from "@apollo/client";
 import {HashRouter as Router, Route, Switch} from "react-router-dom";
 import React from "react";
 import ReactModal from "react-modal";
@@ -28,18 +27,12 @@ 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";
-
-const errorLink = onError(({graphQLErrors, networkError}) => {
-  console.log('GQL ERROR', graphQLErrors, networkError)
-});
-
-const httpLink = new HttpLink({
-  uri: GridConfig.serverUri,
-});
+import {RouteComponentProps, withRouter} from "react-router-dom";
+import {createStyles, Theme, withStyles} from "@material-ui/core/styles";
 
 export const client = new ApolloClient({
-  link: ApolloLink.from([errorLink, httpLink]),
   cache: new InMemoryCache(),
+  uri:GridConfig.serverUri,
 });
 
 function Copyright() {
@@ -59,49 +52,57 @@ function Copyright() {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: "flex",
-  },
-  content: {
-    flexGrow: 1,
-    height: '100vh',
-    overflow: 'auto',
-    paddingTop: theme.spacing(8),
-  },
-  container: {
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(4),
-  },
-}));
-
+const useStyles = (theme: Theme) => createStyles(
+  {
+    root: {
+      display: "flex",
+    },
+    content: {
+      flexGrow: 1,
+      height: '100vh',
+      overflow: 'auto',
+      paddingTop: theme.spacing(8),
+    },
+    container: {
+      paddingTop: theme.spacing(4),
+      paddingBottom: theme.spacing(4),
+    },
+  });
 
 if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement("#root");
 
-function App() {
-  const classes = useStyles();
-  return (
-    <ApolloProvider client={client}>
-      <Router>
-        <div className={classes.root}>
-          <TopBar/>
-          <main className={classes.content}>
-            <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}>
-              <Copyright/>
-            </Box>
-          </main>
-        </div>
-      </Router>
-    </ApolloProvider>
-  );
+type AppProps = RouteComponentProps & {
+  classes: any;
+};
+
+class App extends React.Component<AppProps> {
+
+  render () {
+    const {classes} = this.props;
+
+    return (
+      <ApolloProvider client={client}>
+        <Router>
+          <div className={classes.root}>
+            <TopBar/>
+            <main className={classes.content}>
+              <Container maxWidth={false} className={classes.container}>
+                <Switch>
+                  <Route exact path={"/sessions"} component={Sessions} {...this.props}/>
+                  <Route exact path={"/help"} component={Help} {...this.props}/>
+                  <Route exact path={"/"} component={Overview} {...this.props}/>
+                  <Route component={Help} {...this.props} {...this.props}/>
+                </Switch>
+              </Container>
+              <Box pt={4}>
+                <Copyright/>
+              </Box>
+            </main>
+          </div>
+        </Router>
+      </ApolloProvider>
+    );
+  }
 }
 
-export default App;
+export default withStyles(useStyles)(withRouter(App));
diff --git a/javascript/grid-ui/src/components/QueuedSessions/QueuedSessions.tsx b/javascript/grid-ui/src/components/QueuedSessions/QueuedSessions.tsx
@@ -45,7 +45,6 @@ type QueuedSessionsProps = {
 
 class QueuedSessions extends React.Component<QueuedSessionsProps, {}> {
 
-
   render () {
     const {sessionQueueRequests, classes} = this.props;
     const queue = sessionQueueRequests.map((queuedSession) => {