From fa7628fbf495eff499071569dfc27f235a3901fa Mon Sep 17 00:00:00 2001
From: Ananya Arun <ananyaarun@fb.com>
Date: Wed, 25 Aug 2021 00:00:01 -0700
Subject: [PATCH] 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
---
 .../sandy-chrome/appinspect/AppSelector.tsx   | 61 ++++++++++---------
 .../fb-stubs/TroubleshootingGuide.tsx         | 10 ++-
 2 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx b/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
index e8297db95..f6dcea450 100644
--- a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
+++ b/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}
+      />
+    </>
   );
 }
 
diff --git a/desktop/app/src/sandy-chrome/appinspect/fb-stubs/TroubleshootingGuide.tsx b/desktop/app/src/sandy-chrome/appinspect/fb-stubs/TroubleshootingGuide.tsx
index 0c624dd00..0ed5a8ee6 100644
--- a/desktop/app/src/sandy-chrome/appinspect/fb-stubs/TroubleshootingGuide.tsx
+++ b/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 <></>;
+  }
 }