Show indicator when client setup fails (#339)

Summary:
At the moment, when a client is failing to connect, you effectively get an infinite spinner, as it keeps retrying.

This keeps the spinner while it's retrying, but in between, shows a failure icon.

This isn't perfect. It's still shown under possibly the wrong device, but that already happens anyway, this just adds an extra icon.
Pull Request resolved: https://github.com/facebook/flipper/pull/339

Reviewed By: priteshrnandgaonkar

Differential Revision: D13319635

Pulled By: jknoxville

fbshipit-source-id: e16177ecc7058b779fb17b61e20fcbac8ccf0c29

src/chrome/MainSidebar.js

@@ -156,12 +156,18 @@ class PluginSidebarListItem extends Component<{
   }
 }
 
-const Spinner = styled(LoadingIndicator)({
-  marginTop: '10px',
-  marginBottom: '10px',
-  marginLeft: 'auto',
-  marginRight: 'auto',
-});
+const Spinner = centerInSidebar(LoadingIndicator);
+
+const ErrorIndicator = centerInSidebar(Glyph);
+
+function centerInSidebar(component) {
+  return styled(component)({
+    marginTop: '10px',
+    marginBottom: '10px',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  });
+}
 
 type MainSidebarProps = {|
   selectedPlugin: ?string,
@@ -177,6 +183,7 @@ type MainSidebarProps = {|
   uninitializedClients: Array<{
     client: UninitializedClient,
     deviceId?: string,
+    errorMessage?: string,
   }>,
   numNotifications: number,
   devicePlugins: Map<string, Class<FlipperDevicePlugin<>>>,
@@ -290,7 +297,11 @@ class MainSidebar extends PureComponent<MainSidebarProps> {
         {uninitializedClients.map(entry => (
           <React.Fragment key={JSON.stringify(entry.client)}>
             <SidebarHeader>{entry.client.appName}</SidebarHeader>
-            <Spinner size={16} />
+            {entry.errorMessage ? (
+              <ErrorIndicator name={'mobile-cross'} size={16} />
+            ) : (
+              <Spinner size={16} />
+            )}
           </React.Fragment>
         ))}
       </Sidebar>