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)({
+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>
+            {entry.errorMessage ? (
+              <ErrorIndicator name={'mobile-cross'} size={16} />
+            ) : (
               <Spinner size={16} />
+            )}
           </React.Fragment>
         ))}
       </Sidebar>

src/dispatcher/iOSDevice.js

@@ -9,6 +9,7 @@ import type {ChildProcess} from 'child_process';
 import type {Store} from '../reducers/index.js';
 import type Logger from '../fb-stubs/Logger.js';
 import type {DeviceType} from '../devices/BaseDevice';
+import {RecurringError} from '../utils/errors';
 
 import {promisify} from 'util';
 import path from 'path';
@@ -111,10 +112,12 @@ function getActiveSimulators(): Promise<Array<IOSDeviceParams>> {
 }
 
 function getActiveDevices(): Promise<Array<IOSDeviceParams>> {
-  return iosUtil.targets().catch(e => {
+  return iosUtil.isAvailable()
-    console.warn(e);
+    ? iosUtil.targets().catch(e => {
+        console.error(new RecurringError(e.message));
         return [];
-  });
+      })
+    : Promise.resolve([]);
 }
 
 export default (store: Store, logger: Logger) => {

src/reducers/connections.js

@@ -315,7 +315,7 @@ export default function reducer(
           .map(
             c =>
               isEqual(c.client, payload.client)
-                ? {...c, error: errorMessage}
+                ? {...c, errorMessage: errorMessage}
                 : c,
           )
           .sort((a, b) => a.client.appName.localeCompare(b.client.appName)),

src/server.js

@@ -192,7 +192,6 @@ export default class Server extends EventEmitter {
                 });
               })
               .catch(e => {
-                console.error(e, 'server');
                 subscriber.onError(e);
                 this.emit('client-setup-error', {client, error: e});
               });