From d387c913f66e35e4977ab5e9f776ebb6fa1498ab Mon Sep 17 00:00:00 2001
From: Diego Molina <diemol@gmail.com>
Date: Sun, 21 Feb 2021 00:44:18 +0100
Subject: [PATCH] [grid] Avoiding NPE on the Grid UI

---
 .../selenium/remote/tracing/BUILD.bazel       |  4 ++--
 .../src/components/Node/Stereotypes.tsx       | 24 ++++++++-----------
 .../src/components/common/BrowserLogo.tsx     |  4 ++--
 .../grid-ui/src/screens/Overview/Overview.tsx |  2 +-
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/java/client/test/org/openqa/selenium/remote/tracing/BUILD.bazel b/java/client/test/org/openqa/selenium/remote/tracing/BUILD.bazel
index bcd59528c7020..16cca85274ee6 100644
--- a/java/client/test/org/openqa/selenium/remote/tracing/BUILD.bazel
+++ b/java/client/test/org/openqa/selenium/remote/tracing/BUILD.bazel
@@ -12,10 +12,10 @@ java_library(
     deps = [
         "//java/client/src/org/openqa/selenium/remote/tracing",
         "//java/client/src/org/openqa/selenium/remote/tracing/opentelemetry",
-         artifact("io.opentelemetry:opentelemetry-api"),
+        artifact("io.opentelemetry:opentelemetry-api"),
+        artifact("io.opentelemetry:opentelemetry-context"),
         artifact("io.opentelemetry:opentelemetry-sdk"),
         artifact("io.opentelemetry:opentelemetry-sdk-common"),
         artifact("io.opentelemetry:opentelemetry-sdk-trace"),
-        artifact("io.opentelemetry:opentelemetry-context"),
     ],
 )
diff --git a/javascript/grid-ui/src/components/Node/Stereotypes.tsx b/javascript/grid-ui/src/components/Node/Stereotypes.tsx
index 0c1186e8839d9..0f193fe092606 100644
--- a/javascript/grid-ui/src/components/Node/Stereotypes.tsx
+++ b/javascript/grid-ui/src/components/Node/Stereotypes.tsx
@@ -15,23 +15,19 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import {
-  Box,
-  createStyles,
-  Grid,
-  Theme,
-  Typography,
-  withStyles
-} from '@material-ui/core';
+import {Box, createStyles, Grid, Theme, Typography, withStyles} from '@material-ui/core';
 import React from 'react';
 import StereotypeInfo from "../../models/stereotype-info";
 import BrowserLogo from "../common/BrowserLogo";
 
 const useStyles = (theme: Theme) => createStyles(
   {
-    slotInfo: {
+    slotCount: {
       marginBottom: 5,
-      marginRight: 10,
+    },
+    browserVersion: {
+      marginBottom: 5,
+      marginRight: 20,
     },
   });
 
@@ -42,7 +38,7 @@ type StereotypesProps = {
 
 class Stereotypes extends React.Component<StereotypesProps, {}> {
 
-  render () {
+  render() {
     const {stereotypes, classes} = this.props;
 
     function CreateStereotypeGridItem(slotStereotype: StereotypeInfo, index: any) {
@@ -53,12 +49,12 @@ class Stereotypes extends React.Component<StereotypesProps, {}> {
               <BrowserLogo browserName={slotStereotype.browserName}/>
             </Grid>
             <Grid item>
-              <Typography className={classes.slotInfo}>
+              <Typography className={classes.slotCount}>
                 {slotStereotype.slotCount}
               </Typography>
             </Grid>
             <Grid item>
-              <Typography className={classes.slotInfo}>
+              <Typography className={classes.browserVersion} variant={"caption"}>
                 {slotStereotype.browserVersion}
               </Typography>
             </Grid>
@@ -82,7 +78,7 @@ class Stereotypes extends React.Component<StereotypesProps, {}> {
           {
             stereotypes
               .sort((a, b) => a.browserName.localeCompare(b.browserName)
-                              || a.browserVersion.localeCompare(b.browserVersion))
+                || a.browserVersion.localeCompare(b.browserVersion))
               .map((slotStereotype: any, idx) => {
                 return (
                   CreateStereotypeGridItem(slotStereotype, idx)
diff --git a/javascript/grid-ui/src/components/common/BrowserLogo.tsx b/javascript/grid-ui/src/components/common/BrowserLogo.tsx
index 7ca29ef144264..53ad62b3c307e 100644
--- a/javascript/grid-ui/src/components/common/BrowserLogo.tsx
+++ b/javascript/grid-ui/src/components/common/BrowserLogo.tsx
@@ -24,7 +24,7 @@ import clsx from "clsx";
 const useStyles = (theme: Theme) => (
   {
     logo: {
-      marginRight: 5,
+      marginRight: 0,
     },
     small: {
       width: 24,
@@ -55,7 +55,7 @@ class BrowserLogo extends React.Component<BrowserLogoProps, {}> {
   render() {
     const {browserName, size, classes} = this.props;
 
-    function sizeMap (size) {
+    function sizeMap(size) {
       if (size === Size.S) {
         return classes.small;
       }
diff --git a/javascript/grid-ui/src/screens/Overview/Overview.tsx b/javascript/grid-ui/src/screens/Overview/Overview.tsx
index 68b67a89c57a1..d50dbb5704cc7 100644
--- a/javascript/grid-ui/src/screens/Overview/Overview.tsx
+++ b/javascript/grid-ui/src/screens/Overview/Overview.tsx
@@ -103,7 +103,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
         </ApolloConsumer>
       )
     }
-    const {loading, error, data} = this.state;
+    const {loading, error, data} = this.state ?? {loading: false, error: "No connection to the Grid", data: []};
 
     if (loading) {
       return (