only show apps from selected OS

Summary:
The sidebar always showed all apps, because we don't know on which device an app is running. This filters the sidebar to only show Android apps, when an Android device is selected and only show iOS apps when an iOS device is selected.
Still, we can't filter when where are more simulators with the same OS.

Reviewed By: jknoxville

Differential Revision: D8766007

fbshipit-source-id: dcf0db41b2c2c5dcaa2d1700343b1dd45d3d53b0

src/chrome/MainSidebar.js

@@ -28,6 +28,8 @@ import {devicePlugins} from '../device-plugins/index.js';
 import plugins from '../plugins/index.js';
 import {selectPlugin} from '../reducers/connections.js';
 import {connect} from 'react-redux';
+import AndroidDevice from '../devices/AndroidDevice.js';
+import IOSDevice from '../devices/IOSDevice.js';
 
 const CustomClickableListItem = ClickableListItem.extends({
   paddingLeft: 10,
@@ -164,10 +166,18 @@ class MainSidebar extends Component<MainSidebarProps> {
     });
 
     clients = clients
-      // currently we can't filter clients for a device, because all clients
+      .filter((client: Client) => {
-      // are reporting `unknown` as their deviceID, due to a change in Android's
+        if (
-      // API.
+          (device instanceof AndroidDevice &&
-      //.filter((client: Client) => client.getDevice() === device)
+            client.query.os.toLowerCase() !== 'android') ||
+          (device instanceof IOSDevice &&
+            client.query.os.toLowerCase() !== 'ios')
+        ) {
+          return false;
+        } else {
+          return true;
+        }
+      })
       .sort((a, b) => (a.query.app || '').localeCompare(b.query.app));
 
     return (