Rework sidebar selection

Summary:
- Make sure newly connecting apps are automatically selected
- Improved the sidebar UI by using more consistent, spacious styling, and giving some more attention to error states

Reviewed By: passy

Differential Revision: D18505636

fbshipit-source-id: 18b2c8e78be13aabb3a54c60553f6b0d1e613b27

src/devices/BaseDevice.tsx

@@ -8,6 +8,8 @@
  */
 
 import stream from 'stream';
+import {FlipperDevicePlugin} from 'flipper';
+import {sortPluginsByName} from '../plugin';
 
 export type LogLevel =
   | 'unknown'
@@ -81,6 +83,9 @@ export default class BaseDevice {
   // if imported, stores the original source location
   source = '';
 
+  // sorted list of supported device plugins
+  devicePlugins!: string[];
+
   supportsOS(os: OS) {
     return os.toLowerCase() === this.os.toLowerCase();
   }
@@ -164,4 +169,11 @@ export default class BaseDevice {
   async stopScreenCapture(): Promise<string | null> {
     return null;
   }
+
+  loadDevicePlugins(devicePlugins?: Map<string, typeof FlipperDevicePlugin>) {
+    this.devicePlugins = Array.from(devicePlugins ? devicePlugins.values() : [])
+      .filter(plugin => plugin.supportsDevice(this))
+      .sort(sortPluginsByName)
+      .map(plugin => plugin.id);
+  }
 }