Remove cyclic dependancy on components

Summary:
- Minor change on Diff - D30040808
- Removed cyclic dependancy on AppSelector
- Previous dependancy chain : AppSelector -> TroubleshootingGuide -> AppSelector
- Now the NoDevices component that troubleshooting guide was importing has been moved to an independent file.

Reviewed By: passy

Differential Revision: D30041820

fbshipit-source-id: 17856aad7d2a569ec4e0f19e63f458472b22dcf8

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

@@ -8,13 +8,12 @@
  */
 
 import React from 'react';
-import {Alert, Button, Dropdown, Menu, Radio, Typography} from 'antd';
+import {Button, Dropdown, Menu, Radio, Typography} from 'antd';
 import {
   AppleOutlined,
   AndroidOutlined,
   WindowsOutlined,
   CaretDownOutlined,
-  RocketOutlined,
 } from '@ant-design/icons';
 import {Glyph, Layout, styled} from '../../ui';
 import {theme, useTrackedCallback, useValue} from 'flipper-plugin';
@@ -30,10 +29,9 @@ import BaseDevice, {OS} from '../../devices/BaseDevice';
 import Client from '../../Client';
 import {State} from '../../reducers';
 import {brandColors, brandIcons, colors} from '../../ui/components/colors';
-import {showEmulatorLauncher} from './LaunchEmulator';
 import TroubleshootingGuide from './fb-stubs/TroubleshootingGuide';
 
-const {Text, Link, Title} = Typography;
+const {Text} = Typography;
 
 function getOsIcon(os?: OS) {
   switch (os) {
@@ -266,37 +264,6 @@ function ClientTitle({client}: {client: Client}) {
   );
 }
 
-export function NoDevices() {
-  const store = useStore();
-
-  const onLaunchEmulator = useTrackedCallback(
-    'select-emulator',
-    () => {
-      showEmulatorLauncher(store);
-    },
-    [],
-  );
-
-  return (
-    <Alert
-      type="info"
-      message={
-        <>
-          <Title level={4}>No devices found</Title>
-          <Text>
-            Start a fresh emulator <RocketOutlined onClick={onLaunchEmulator} />{' '}
-            or check the{' '}
-            <Link href="https://fbflipper.com/docs/troubleshooting">
-              troubleshooting guide
-            </Link>
-            .
-          </Text>
-        </>
-      }
-    />
-  );
-}
-
 function getColorByApp(app?: string | null): string {
   let iconColor: string | undefined = (brandColors as any)[app!];
 

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

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import {RocketOutlined} from '@ant-design/icons';
+import {Alert, Typography} from 'antd';
+import {useTrackedCallback} from 'flipper-plugin';
+import {showEmulatorLauncher} from './LaunchEmulator';
+import {useStore} from '../../utils/useStore';
+
+const {Text, Link, Title} = Typography;
+
+export function NoDevices() {
+  const store = useStore();
+
+  const onLaunchEmulator = useTrackedCallback(
+    'select-emulator',
+    () => {
+      showEmulatorLauncher(store);
+    },
+    [],
+  );
+
+  return (
+    <Alert
+      type="info"
+      message={
+        <>
+          <Title level={4}>No devices found</Title>
+          <Text>
+            Start a fresh emulator <RocketOutlined onClick={onLaunchEmulator} />{' '}
+            or check the{' '}
+            <Link href="https://fbflipper.com/docs/troubleshooting">
+              troubleshooting guide
+            </Link>
+            .
+          </Text>
+        </>
+      }
+    />
+  );
+}

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

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {NoDevices} from '../AppSelector';
+import {NoDevices} from '../NoDevices';
 
 export default function TroubleshootingGuide() {
   return <NoDevices />;