no client/device

Summary:
Plugin debugger is now supporting 3 different scenarios:
- no devices connected
- device connected, but no app for the selected device is connected
- apps are connected

Added button to the sidebar to open plugin debugger.

Reviewed By: passy

Differential Revision: D13608749

fbshipit-source-id: d5ba04882590dace78e4ef0b17799d5a394dc3c4

src/chrome/MainSidebar.js

@@ -21,6 +21,7 @@ import {
   Text,
   Glyph,
   styled,
+  FlexColumn,
   GK,
   FlipperPlugin,
   FlipperDevicePlugin,
@@ -29,6 +30,7 @@ import {
 import React from 'react';
 import NotificationsHub from '../NotificationsHub.js';
 import {selectPlugin} from '../reducers/connections.js';
+import {setActiveSheet} from '../reducers/application.js';
 import {connect} from 'react-redux';
 
 const ListItem = styled('div')(({active}) => ({
@@ -97,6 +99,20 @@ const PluginName = styled(Text)(props => ({
   },
 }));
 
+const Plugins = styled(FlexColumn)({
+  flexGrow: 1,
+});
+
+const PluginDebugger = styled(FlexBox)(props => ({
+  color: colors.blackAlpha50,
+  borderTop: `1px solid ${colors.blackAlpha10}`,
+  alignItems: 'center',
+  padding: 10,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+}));
+
 function PluginIcon({
   isActive,
   backgroundColor,
@@ -188,6 +204,7 @@ type MainSidebarProps = {|
   numNotifications: number,
   devicePlugins: Map<string, Class<FlipperDevicePlugin<>>>,
   clientPlugins: Map<string, Class<FlipperPlugin<>>>,
+  setActiveSheet: (activeSheet: ?string) => any,
 |};
 
 class MainSidebar extends PureComponent<MainSidebarProps> {
@@ -216,6 +233,7 @@ class MainSidebar extends PureComponent<MainSidebarProps> {
         backgroundColor={
           process.platform === 'darwin' && windowIsFocused ? 'transparent' : ''
         }>
+        <Plugins>
           {!GK.get('flipper_disable_notifications') && (
             <ListItem
               active={selectedPlugin === 'notifications'}
@@ -283,7 +301,8 @@ class MainSidebar extends PureComponent<MainSidebarProps> {
                     <PluginSidebarListItem
                       key={plugin.id}
                       isActive={
-                      plugin.id === selectedPlugin && selectedApp === client.id
+                        plugin.id === selectedPlugin &&
+                        selectedApp === client.id
                       }
                       onClick={() =>
                         selectPlugin({
@@ -308,6 +327,17 @@ class MainSidebar extends PureComponent<MainSidebarProps> {
               )}
             </React.Fragment>
           ))}
+        </Plugins>
+        <PluginDebugger
+          onClick={() => this.props.setActiveSheet('PLUGIN_DEBUGGER')}>
+          <Glyph
+            name="question-circle"
+            size={16}
+            variant="outline"
+            color={colors.blackAlpha30}
+          />
+          &nbsp;Plugin not showing?
+        </PluginDebugger>
       </Sidebar>
     );
   }
@@ -347,5 +377,6 @@ export default connect(
   }),
   {
     selectPlugin,
+    setActiveSheet,
   },
 )(MainSidebar);

src/chrome/PluginDebugger.js

@@ -9,9 +9,17 @@ import type {FlipperDevicePlugin, FlipperPlugin} from '../plugin';
 import type {PluginDefinition} from '../dispatcher/plugins';
 import type Client from '../Client';
 
-import {Component} from 'react';
+import {Component, Fragment} from 'react';
 import {connect} from 'react-redux';
-import {FlexColumn, Button, Text, ManagedTable, styled, colors} from 'flipper';
+import {
+  FlexColumn,
+  Button,
+  Text,
+  ManagedTable,
+  styled,
+  colors,
+  Link,
+} from 'flipper';
 import {remote} from 'electron';
 
 const Container = styled(FlexColumn)({
@@ -20,7 +28,8 @@ const Container = styled(FlexColumn)({
 });
 
 const InfoText = styled(Text)({
-  lineHeight: '140%',
+  lineHeight: '130%',
+  marginBottom: 8,
 });
 
 const Title = styled('div')({
@@ -67,6 +76,7 @@ type Props = {|
   disabledPlugins: Array<PluginDefinition>,
   failedPlugins: Array<[PluginDefinition, string]>,
   clients: Array<Client>,
+  selectedDevice: ?string,
   onHide: () => mixed,
 |};
 
@@ -217,13 +227,58 @@ class PluginDebugger extends Component<Props> {
   }
 
   render() {
-    return (
-      <Container>
-        <Title>Plugin Status</Title>
+    let content = null;
+
+    if (!this.props.selectedDevice) {
+      content = (
+        <InfoText>
+          We can't find any device connected to your computer. Is an
+          emulator/simulator currently running on your system, or is there a
+          development device connected via USB? There are some devices/emulators
+          known to have problems connecting to Flipper. Check out the{' '}
+          <Link href="https://fbflipper.com/docs/troubleshooting.html#known-incompatibilities">
+            known incompatibilities
+          </Link>.
+        </InfoText>
+      );
+    } else if (
+      !this.props.clients.some(
+        (client: Client) =>
+          client.query.device_id === this.props.selectedDevice,
+      )
+    ) {
+      // no clients for selected device
+      content = (
+        <Fragment>
+          <InfoText>
+            While Flipper was able to connect to your device, it wasn't able to
+            connect to the app you are running on your device. For this reason,
+            app-specific plugins will not show up.
+          </InfoText>
+          {this.props.clients.length > 0 && (
+            // we have clients, but not for this device
+            <InfoText>
+              Make sure you selected the correct device from the dropdown button
+              in the upper left corner. Only plugins for the selected device are
+              shown in the sidebar.
+            </InfoText>
+          )}
+          <InfoText>
+            To debug why Flipper couldn't establish a connection to the app,
+            check out our documentation about{' '}
+            <Link href="https://fbflipper.com/docs/troubleshooting.html#connection-issues">
+              connection issues
+            </Link>.
+          </InfoText>
+        </Fragment>
+      );
+    } else {
+      content = (
+        <Fragment>
           <InfoText>
             The table lists all plugins known to Flipper. Some of them might be
-          blocked by GKs, others may not show up, because none of the connected
-          apps is supporting it.
+            blocked by GKs, others may not show up, because none of the
+            connected apps is supporting it.
           </InfoText>
           <TableContainer>
             <ManagedTable
@@ -233,6 +288,13 @@ class PluginDebugger extends Component<Props> {
               columnSizes={COLUMNS_SIZES}
             />
           </TableContainer>
+        </Fragment>
+      );
+    }
+    return (
+      <Container>
+        <Title>Plugin Status</Title>
+        {content}
         <Row>
           <Button compact padded onClick={this.props.onHide}>
             Close
@@ -253,7 +315,7 @@ export default connect(
       disabledPlugins,
       failedPlugins,
     },
-    connections: {selectedPlugin, clients},
+    connections: {selectedPlugin, clients, selectedDevice},
   }) => ({
     devicePlugins: Array.from(devicePlugins.values()),
     clientPlugins: Array.from(clientPlugins.values()),
@@ -261,5 +323,6 @@ export default connect(
     clients,
     disabledPlugins,
     failedPlugins,
+    selectedDevice: selectedDevice?.serial,
   }),
 )(PluginDebugger);