Auto detect devices/apps and fetch plugin details (#2734)

Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/2734

This diff is the third out of n for the troubleshooting guide for flipper.
What has been done -

- Added autodetect and select for devices and apps. The user can now select these from the dropdown.
- Added functions to get failed plugins from the store and the list of available plugins and their details.
- This data will be used in future diffs to preprocess which state/question to redirect the user to.
- Unit tests for this section will be added once the preprocessing is completed in the next diff. Right now the function just returns the plugin name itself. It will essentially return the state to toggle to in the future.

NOTE - The location of the guide on the first screen of flipper has also been moved after discussion.  The guide is now always open to select irrespective of devices connecting or not.

Presently this is how the button is rendered.

- Public build/ internal build when user is not in allowlist of the gatekeeper

{F655248582}

It does not appear in the public build once a device is detected

{F655248769}

- Internal build when user is in the allowlist

{F655249521}

Reviewed By: passy

Differential Revision: D30450347

fbshipit-source-id: 68b4b311e913ebd82055acf7a3a581825246f4ed

desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx

@@ -83,34 +83,39 @@ export function AppSelector() {
   );
   const client = clients.find((client) => client.id === selectedApp);
 
-  return entries.length ? (
-    <Radio.Group
-      value={selectedApp}
-      size="small"
-      style={{
-        display: 'flex',
-        flex: 1,
-      }}>
-      <Dropdown
-        trigger={['click']}
-        overlay={
-          <Menu selectedKeys={selectedApp ? [selectedApp] : []}>{entries}</Menu>
-        }>
-        <AppInspectButton title="Select the device / app to inspect">
-          <Layout.Horizontal gap center>
-            <AppIcon appname={client?.query.app} device={selectedDevice} />
-            <Layout.Container grow shrink>
-              <Text strong>{client?.query.app ?? ''}</Text>
-              <Text>{selectedDevice?.title || 'Available devices'}</Text>
-            </Layout.Container>
-            <CaretDownOutlined />
-          </Layout.Horizontal>
-        </AppInspectButton>
-      </Dropdown>
-    </Radio.Group>
-  ) : (
-    // GK check to decide if troubleshooting guide will be visible or not
-    <TroubleshootingGuide showGuide={GK.get('flipper_self_sufficiency')} />
+  return (
+    <>
+      <Radio.Group
+        value={selectedApp}
+        size="small"
+        style={{
+          display: 'flex',
+          flex: 1,
+        }}>
+        <Dropdown
+          trigger={['click']}
+          overlay={
+            <Menu selectedKeys={selectedApp ? [selectedApp] : []}>
+              {entries}
+            </Menu>
+          }>
+          <AppInspectButton title="Select the device / app to inspect">
+            <Layout.Horizontal gap center>
+              <AppIcon appname={client?.query.app} device={selectedDevice} />
+              <Layout.Container grow shrink>
+                <Text strong>{client?.query.app ?? ''}</Text>
+                <Text>{selectedDevice?.title || 'Available devices'}</Text>
+              </Layout.Container>
+              <CaretDownOutlined />
+            </Layout.Horizontal>
+          </AppInspectButton>
+        </Dropdown>
+      </Radio.Group>
+      <TroubleshootingGuide
+        showGuide={GK.get('flipper_self_sufficiency')}
+        devicesDetected={entries.length}
+      />
+    </>
   );
 }
 

desktop/app/src/sandy-chrome/appinspect/fb-stubs/TroubleshootingGuide.tsx

@@ -10,6 +10,12 @@
 import React from 'react';
 import {NoDevices} from '../NoDevices';
 
-export function TroubleshootingGuide(_props: {showGuide: boolean}) {
-  return <NoDevices />;
+export function TroubleshootingGuide(_props: {
+  showGuide: boolean;
+  devicesDetected: number;
+}) {
+  if (_props.devicesDetected == 0) return <NoDevices />;
+  else {
+    return <></>;
+  }
 }