Unwrap device plugins in sidebar in certain scenarios

Summary:
This diff removes the 'device plugins' section, and shows plugin at top level in certain scenarios:

- there are no other clients
- there is only one device plugin
- the device has been imported

This removes visual clutter

Reviewed By: nikoant

Differential Revision: D19789511

fbshipit-source-id: 6a5fce120ac811428662828ee43f7ab7f3331362

src/chrome/mainsidebar/MainSidebar2.tsx

@@ -235,26 +235,12 @@ class MainSidebar2 extends PureComponent<Props, State> {
       selectedDevice,
     } = this.props;
     const clients = getAvailableClients(device, this.props.clients);
-    return (
+    const devicePluginsItems = device.devicePlugins.map(pluginName => {
-      <SidebarSection
-        title={device.displayTitle()}
-        key={device.serial}
-        level={1}
-        defaultCollapsed={!canBeDefaultDevice(device)}>
-        {this.showArchivedDeviceDetails(device)}
-        {device.devicePlugins.length > 0 ? (
-          <SidebarSection
-            level={2}
-            title="Device Plugins"
-            defaultCollapsed={true}>
-            {device.devicePlugins.map(pluginName => {
       const plugin = this.props.devicePlugins.get(pluginName)!;
       return (
         <PluginSidebarListItem
           key={plugin.id}
-                  isActive={
+          isActive={plugin.id === selectedPlugin && selectedDevice === device}
-                    plugin.id === selectedPlugin && selectedDevice === device
-                  }
           onClick={() =>
             selectPlugin({
               selectedPlugin: plugin.id,
@@ -266,13 +252,28 @@ class MainSidebar2 extends PureComponent<Props, State> {
           plugin={plugin}
         />
       );
-            })}
+    });
+    const wrapDevicePlugins =
+      clients.length > 0 && device.devicePlugins.length > 1 && !device.source;
+
+    return (
+      <SidebarSection
+        title={device.displayTitle()}
+        key={device.serial}
+        level={1}
+        defaultCollapsed={!canBeDefaultDevice(device)}>
+        {this.showArchivedDeviceDetails(device)}
+        {wrapDevicePlugins ? (
+          <SidebarSection
+            level={2}
+            title="Device Plugins"
+            defaultCollapsed={true}>
+            {devicePluginsItems}
           </SidebarSection>
-        ) : null}
-        {clients.length === 0 ? (
-          <NoClients />
         ) : (
-          clients.map(client => (
+          <div style={{marginTop: 6}}>{devicePluginsItems}</div>
+        )}
+        {clients.map(client => (
           <PluginList
             device={device}
             key={client.id}
@@ -284,8 +285,7 @@ class MainSidebar2 extends PureComponent<Props, State> {
             selectedApp={selectedApp}
             selectPlugin={selectPlugin}
           />
-          ))
+        ))}
-        )}
       </SidebarSection>
     );
   }