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,6 +235,27 @@ class MainSidebar2 extends PureComponent<Props, State> {
       selectedDevice,
     } = this.props;
     const clients = getAvailableClients(device, this.props.clients);
+    const devicePluginsItems = device.devicePlugins.map(pluginName => {
+      const plugin = this.props.devicePlugins.get(pluginName)!;
+      return (
+        <PluginSidebarListItem
+          key={plugin.id}
+          isActive={plugin.id === selectedPlugin && selectedDevice === device}
+          onClick={() =>
+            selectPlugin({
+              selectedPlugin: plugin.id,
+              selectedApp: null,
+              deepLinkPayload: null,
+              selectedDevice: device,
+            })
+          }
+          plugin={plugin}
+        />
+      );
+    });
+    const wrapDevicePlugins =
+      clients.length > 0 && device.devicePlugins.length > 1 && !device.source;
+
     return (
       <SidebarSection
         title={device.displayTitle()}
@@ -242,50 +263,29 @@ class MainSidebar2 extends PureComponent<Props, State> {
         level={1}
         defaultCollapsed={!canBeDefaultDevice(device)}>
         {this.showArchivedDeviceDetails(device)}
-        {device.devicePlugins.length > 0 ? (
+        {wrapDevicePlugins ? (
           <SidebarSection
             level={2}
             title="Device Plugins"
             defaultCollapsed={true}>
-            {device.devicePlugins.map(pluginName => {
+            {devicePluginsItems}
-              const plugin = this.props.devicePlugins.get(pluginName)!;
-              return (
-                <PluginSidebarListItem
-                  key={plugin.id}
-                  isActive={
-                    plugin.id === selectedPlugin && selectedDevice === device
-                  }
-                  onClick={() =>
-                    selectPlugin({
-                      selectedPlugin: plugin.id,
-                      selectedApp: null,
-                      deepLinkPayload: null,
-                      selectedDevice: device,
-                    })
-                  }
-                  plugin={plugin}
-                />
-              );
-            })}
           </SidebarSection>
-        ) : null}
-        {clients.length === 0 ? (
-          <NoClients />
         ) : (
-          clients.map(client => (
+          <div style={{marginTop: 6}}>{devicePluginsItems}</div>
-            <PluginList
-              device={device}
-              key={client.id}
-              client={client}
-              clientPlugins={clientPlugins}
-              starPlugin={starPlugin}
-              userStarredPlugins={userStarredPlugins}
-              selectedPlugin={selectedPlugin}
-              selectedApp={selectedApp}
-              selectPlugin={selectPlugin}
-            />
-          ))
         )}
+        {clients.map(client => (
+          <PluginList
+            device={device}
+            key={client.id}
+            client={client}
+            clientPlugins={clientPlugins}
+            starPlugin={starPlugin}
+            userStarredPlugins={userStarredPlugins}
+            selectedPlugin={selectedPlugin}
+            selectedApp={selectedApp}
+            selectPlugin={selectPlugin}
+          />
+        ))}
       </SidebarSection>
     );
   }