[grid-ui] Refactoring more components to classes and adding more tests

SeleniumHQ · Feb 18, 2021 · 6662cc6 · 6662cc6
1 parent ce3a14d
commit 6662cc6
Show file tree

Hide file tree

Showing 8 changed files with 418 additions and 231 deletions.
diff --git a/javascript/grid-ui/package-lock.json b/javascript/grid-ui/package-lock.json
diff --git a/javascript/grid-ui/src/components/EnhancedTableToolbar.tsx b/javascript/grid-ui/src/components/EnhancedTableToolbar.tsx
@@ -15,34 +15,41 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import * as React from 'react';
-import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
+import React from 'react';
+import {Theme, withStyles} from '@material-ui/core/styles';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 
 
-const useToolbarStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = (theme: Theme) => (
+  {
     root: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(1),
     },
     title: {
       flex: '1 1 100%',
     },
-  }),
-);
+  });
 
-export default function EnhancedTableToolbar(props) {
-  const classes = useToolbarStyles();
-  const {title} = props;
-  return (
-    <Toolbar
-      className={classes.root}
-    >
-      <Typography className={classes.title} variant="h3" id="tableTitle" component="div">
-        {title}
-      </Typography>
-    </Toolbar>
-  );
+type EnhancedTableToolbarProps = {
+  title: string
+  classes: any;
+};
+
+class EnhancedTableToolbar extends React.Component<EnhancedTableToolbarProps, {}> {
+  render () {
+    const {title, classes} = this.props;
+    return (
+      <Toolbar
+        className={classes.root}
+      >
+        <Typography className={classes.title} variant="h3" id="tableTitle" component="div">
+          {title}
+        </Typography>
+      </Toolbar>
+    );
+  }
 }
+
+export default withStyles(useStyles)(EnhancedTableToolbar)
diff --git a/javascript/grid-ui/src/components/QueuedSessions/QueuedSessions.tsx b/javascript/grid-ui/src/components/QueuedSessions/QueuedSessions.tsx
@@ -16,13 +16,12 @@
 // under the License.
 
 import * as React from 'react';
-import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
-import {List, ListItem} from "@material-ui/core";
+import {createStyles, Theme} from '@material-ui/core/styles';
+import {List, ListItem, withStyles} from "@material-ui/core";
 import EnhancedTableToolbar from "../EnhancedTableToolbar";
 
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = (theme: Theme) => createStyles(
+  {
     root: {
       width: '100%',
       paddingTop: 30,
@@ -37,35 +36,42 @@ const useStyles = makeStyles((theme: Theme) =>
       borderBottomStyle: 'solid',
       borderBottomColor: '#e0e0e0',
     },
-  }),
-);
+  });
 
-export default function QueuedSessions(props) {
-  const {sessionQueueRequests} = props;
-  const classes = useStyles();
+type QueuedSessionsProps = {
+  sessionQueueRequests: string[];
+  classes: any;
+};
 
-  const queue = sessionQueueRequests.map((queuedSession) => {
-    return JSON.stringify(JSON.parse(queuedSession));
-  });
+class QueuedSessions extends React.Component<QueuedSessionsProps, {}> {
 
-  return (
-    <div className={classes.root}>
-      {queue.length > 0 && (
-        <div className={classes.queueList}>
-          <EnhancedTableToolbar title={`Queue (${queue.length})`}/>
-          <List component="nav" aria-label="main mailbox folders">
-            {queue.map((queueItem, index) => {
-              return (
-                <ListItem className={classes.queueListItem} key={index}>
-                  <pre>
-                    {queueItem}
-                  </pre>
-                </ListItem>
-              )
-            })}
-          </List>
-        </div>
-      )}
-    </div>
-  );
+
+  render () {
+    const {sessionQueueRequests, classes} = this.props;
+    const queue = sessionQueueRequests.map((queuedSession) => {
+      return JSON.stringify(JSON.parse(queuedSession));
+    });
+    return (
+      <div className={classes.root}>
+        {queue.length > 0 && (
+          <div className={classes.queueList}>
+            <EnhancedTableToolbar title={`Queue (${queue.length})`}/>
+            <List component="nav" aria-label="main mailbox folders">
+              {queue.map((queueItem, index) => {
+                return (
+                  <ListItem className={classes.queueListItem} key={index}>
+                    <pre>
+                      {queueItem}
+                    </pre>
+                  </ListItem>
+                )
+              })}
+            </List>
+          </div>
+        )}
+      </div>
+    );
+  }
 }
+
+export default withStyles(useStyles)(QueuedSessions)