Add support manager to display an error screen or litho form

Summary:
This diff shows the error screen when one of the following condition is met:

- Selected device is not android
- No clients are active for selected device
-  At least there is one client which supports inspector plugin.

For this I have added a SupportRequestManager class which loads the error screen or the litho form based on the above condition.

The UI is super basic. Will improve the design based on your feedback in the coming diffs.

Reviewed By: jknoxville

Differential Revision: D17790596

fbshipit-source-id: 2afc917c93c6e7321399633c5bf9d27a703742ee

src/App.tsx

@@ -36,7 +36,6 @@ import BugReporter from './fb-stubs/BugReporter';
 import {State as Store} from './reducers/index';
 import {StaticView} from './reducers/connections';
 import PluginManager from './chrome/PluginManager';
-import BaseDevice from './devices/BaseDevice';
 import StatusBar from './chrome/StatusBar';
 import SettingsSheet from './chrome/SettingsSheet';
 const version = remote.app.getVersion();
@@ -52,8 +51,6 @@ type StateFromProps = {
   activeSheet: ActiveSheet;
   share: ShareType | null;
   staticView: StaticView;
-  clients: Array<Client>;
-  selectedDevice: null | BaseDevice;
 };
 
 type Props = StateFromProps & OwnProps;
@@ -125,7 +122,7 @@ export class App extends React.Component<Props> {
         <FlexRow grow={true}>
           {this.props.leftSidebarVisible && <MainSidebar />}
           {this.props.staticView != null ? (
-            React.createElement(this.props.staticView, this.props)
+            React.createElement(this.props.staticView)
           ) : (
             <PluginContainer logger={this.props.logger} />
           )}
@@ -140,14 +137,12 @@ export class App extends React.Component<Props> {
 export default connect<StateFromProps, {}, OwnProps, Store>(
   ({
     application: {leftSidebarVisible, activeSheet, share},
-    connections: {error, staticView, clients, selectedDevice},
+    connections: {error, staticView},
   }) => ({
     leftSidebarVisible,
     activeSheet,
     share: share,
     error,
     staticView,
-    clients,
-    selectedDevice,
   }),
 )(App);

src/chrome/MainSidebar.tsx

@@ -44,7 +44,7 @@ import {
   SHOW_REMAINING_PLUGIN_IF_LESS_THAN,
 } from '../Client';
 import {StyledOtherComponent} from 'create-emotion-styled';
-import SupportRequestForm from '../fb-stubs/SupportRequestForm';
+import SupportRequestFormManager from '../fb-stubs/SupportRequestFormManager';
 
 const ListItem = styled('div')(({active}: {active?: boolean}) => ({
   paddingLeft: 10,
@@ -304,18 +304,20 @@ class MainSidebar extends PureComponent<Props> {
           )}
           {GK.get('flipper_support_requests') && (
             <ListItem
-              active={staticView != null && staticView === SupportRequestForm}
+              active={
-              onClick={() => setStaticView(SupportRequestForm)}>
+                staticView != null && staticView === SupportRequestFormManager
+              }
+              onClick={() => setStaticView(SupportRequestFormManager)}>
               <PluginIcon
                 color={colors.light50}
                 name={'app-dailies'}
                 isActive={
-                  staticView != null && staticView === SupportRequestForm
+                  staticView != null && staticView === SupportRequestFormManager
                 }
               />
               <PluginName
                 isActive={
-                  staticView != null && staticView === SupportRequestForm
+                  staticView != null && staticView === SupportRequestFormManager
                 }>
                 Litho Support Request
               </PluginName>

src/fb-stubs/SupportRequestFormManager.tsx

@@ -8,7 +8,10 @@
 import Text from '../ui/components/FlexRow';
 import React, {PureComponent} from 'react';
 
-export default class SupportRequestForm extends PureComponent<void, void> {
+export default class SupportRequestFormManager extends PureComponent<
+  void,
+  void
+> {
   render() {
     return <Text> Implement your own Bug creator </Text>;
   }

src/reducers/connections.tsx

@@ -18,7 +18,7 @@ import {Actions} from '.';
 const WelcomeScreen = isHeadless()
   ? require('../chrome/WelcomeScreenHeadless').default
   : require('../chrome/WelcomeScreen').default;
-import SupportRequestForm from '../fb-stubs/SupportRequestForm';
+import SupportRequestForm from '../fb-stubs/SupportRequestFormManager';
 
 export type StaticView =
   | null