Generalize client OS filtering by device and move logic to Device class itself

Summary: Adding support for a WindowsDevice (in following diff) that relies on this behavior, also seems reasonable that the logic for what client os' a device supports should be in the device class.

Reviewed By: jknoxville

Differential Revision: D8861698

fbshipit-source-id: 2907f616baa04eb71a9e4ef3b6704980acbafaf5

src/chrome/MainSidebar.js

@@ -28,8 +28,6 @@ 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,
@@ -166,18 +164,10 @@ class MainSidebar extends Component<MainSidebarProps> {
     });
 
     clients = clients
-      .filter((client: Client) => {
+      .filter(
-        if (
+        (client: Client) =>
-          (selectedDevice instanceof AndroidDevice &&
+          selectedDevice && selectedDevice.supportsOS(client.query.os),
-            client.query.os.toLowerCase() !== 'android') ||
+      )
-          (selectedDevice instanceof IOSDevice &&
-            client.query.os.toLowerCase() !== 'ios')
-        ) {
-          return false;
-        } else {
-          return true;
-        }
-      })
       .sort((a, b) => (a.query.app || '').localeCompare(b.query.app));
 
     return (

src/devices/BaseDevice.js

@@ -53,6 +53,10 @@ export default class BaseDevice {
   // possible src of icon to display next to the device title
   icon: ?string;
 
+  supportsOS(os: string) {
+    return os.toLowerCase() === this.os.toLowerCase();
+  }
+
   supportsPlugin = (DevicePlugin: Class<SonarDevicePlugin<>>): boolean => {
     return this.supportedPlugins.includes(DevicePlugin.id);
   };