First level of questions and redirection along with unit tests

Summary:
This diff is the first out of n for the troubleshooting guide for flipper.

What has been done -
- Defined a structure for the troubleshooting guide in TroubleshootingGuide.tsx (parent component ) to render children components or the individual questions from here.
- The initial screen of the trouble shooting guide along with the 3 sections of questions users face. Clicking them prompts to individual question screens that will be built in future diffs.
- Units tests in jest for the rendering of the screens and functions.

Reviewed By: mweststrate

Differential Revision: D30279739

fbshipit-source-id: 3e317b67e5ac461902c6779eaa584e1032741b85

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

@@ -29,7 +29,8 @@ import BaseDevice, {OS} from '../../server/devices/BaseDevice';
 import Client from '../../Client';
 import {State} from '../../reducers';
 import {brandColors, brandIcons, colors} from '../../ui/components/colors';
-import TroubleshootingGuide from './fb-stubs/TroubleshootingGuide';
+import {TroubleshootingGuide} from './fb-stubs/TroubleshootingGuide';
+import GK from '../../fb-stubs/GK';
 
 const {Text} = Typography;
 
@@ -108,7 +109,8 @@ export function AppSelector() {
       </Dropdown>
     </Radio.Group>
   ) : (
-    <TroubleshootingGuide />
+    // GK check to decide if troubleshooting guide will be visible or not
+    <TroubleshootingGuide showGuide={GK.get('flipper_self_sufficiency')} />
   );
 }
 

desktop/app/src/sandy-chrome/appinspect/__tests__/TroubleshootingGuide.node.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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 {render, fireEvent} from '@testing-library/react';
+import React from 'react';
+import {TroubleshootingGuide} from '../fb/TroubleshootingGuide';
+import {Provider} from 'react-redux';
+import {createMockFlipperWithPlugin} from '../../../test-utils/createMockFlipperWithPlugin';
+import {TestUtils} from 'flipper-plugin';
+import {loadNext} from '../fb/TroubleshootingGuide';
+
+test('render initial screen of troubleshooting guide correctly', async () => {
+  const TestPlugin = TestUtils.createTestPlugin({
+    plugin() {
+      return {};
+    },
+  });
+
+  const {store} = await createMockFlipperWithPlugin(TestPlugin);
+
+  const res = render(
+    <Provider store={store}>
+      <TroubleshootingGuide showGuide />,
+    </Provider>,
+  );
+
+  // Clicking on the troubleshooting guide button to launch the guide
+  fireEvent.click(res.getByText('Troubleshooting Guide'));
+
+  // Checking if the 3 initial questions appear
+  expect(res.queryAllByText("Can't see the device.").length).toBe(1);
+  expect(res.queryAllByText('Can see the device but not the app.').length).toBe(
+    1,
+  );
+  expect(
+    res.queryAllByText('Can see the device and the app but not the plugin.')
+      .length,
+  ).toBe(1);
+
+  // Clicking on close
+  fireEvent.click(res.getByRole('button', {name: 'Close'}));
+
+  // Checking if close on the modal popup works and the questions are no longer visible
+  expect(res.queryAllByText("Can't see the device.").length).toBe(0);
+  expect(res.queryAllByText('Can see the device but not the app.').length).toBe(
+    0,
+  );
+  expect(
+    res.queryAllByText('Can see the device and the app but not the plugin.')
+      .length,
+  ).toBe(0);
+
+  // Clicking on the first radio checkbox ie the first question after re-launching the guide
+  fireEvent.click(res.getByText('Troubleshooting Guide'));
+  fireEvent.click(res.getByText("Can't see the device."));
+  fireEvent.click(res.getByText('Next'));
+
+  // Checking if the screen of the first question shows up
+  expect(res.queryAllByText('Work in progress Q1 !').length).toBe(1);
+});
+
+test('check return value of loadNext function', async () => {
+  const toggleModal = jest.fn();
+  const result = loadNext('cannot_see_device', toggleModal);
+  // Checking loadNext returns 'q1' which will be used to toggleModal when the user input in the previous screen was 'opt1'
+  expect(result).toBe('question1');
+});

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

@@ -10,6 +10,6 @@
 import React from 'react';
 import {NoDevices} from '../NoDevices';
 
-export default function TroubleshootingGuide() {
+export function TroubleshootingGuide(_props: {showGuide: boolean}) {
   return <NoDevices />;
 }

desktop/app/src/sandy-chrome/appinspect/troubleshooting/GuideFirstScreen.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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, {useState} from 'react';
+import {Modal, Typography, Radio, Space, Button, RadioChangeEvent} from 'antd';
+import {Layout} from 'flipper-plugin';
+import {ModalDialog} from '../fb/TroubleshootingGuide';
+
+const {Text} = Typography;
+
+export function GuideFirstScreen(props: {
+  toggleModal: (showModal: ModalDialog) => void;
+  onAnswer: (
+    answer: string,
+    toggleModal: (showModal: ModalDialog) => void,
+  ) => void;
+}) {
+  const [answer, setAnswer] = useState('');
+  const handleChange = (e: RadioChangeEvent) => {
+    setAnswer(e.target.value);
+  };
+
+  return (
+    <Modal
+      title="Troubleshooting Guide"
+      visible
+      width={650}
+      footer={null}
+      onCancel={() => props.toggleModal('next')}
+      bodyStyle={{maxHeight: 800, overflow: 'auto'}}>
+      <Layout.Container gap="huge">
+        <Text>What problem are you facing?</Text>
+        <Radio.Group onChange={handleChange}>
+          <Space direction="vertical">
+            <Radio value={'cannot_see_device'}>
+              <Text>Can't see the device.</Text>
+            </Radio>
+            <Radio value={'cannot_see_app'}>
+              <Text>Can see the device but not the app.</Text>
+            </Radio>
+            <Radio value={'cannot_see_plugin'}>
+              <Text>Can see the device and the app but not the plugin.</Text>
+            </Radio>
+          </Space>
+        </Radio.Group>
+        <Button
+          type="primary"
+          style={{flex: 0.1, marginLeft: 500}}
+          onClick={() => props.onAnswer(answer, props.toggleModal)}>
+          Next
+        </Button>
+      </Layout.Container>
+    </Modal>
+  );
+}

desktop/app/src/sandy-chrome/appinspect/troubleshooting/Question1.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 {Modal} from 'antd';
+import {ModalDialog} from '../fb/TroubleshootingGuide';
+
+export function Question1(props: {
+  toggleModal: (showModal: ModalDialog) => void;
+}) {
+  return (
+    <Modal
+      title="Work in progress Q1 !"
+      visible
+      width={650}
+      footer={null}
+      onCancel={() => props.toggleModal('next')}
+      bodyStyle={{maxHeight: 800, overflow: 'auto'}}></Modal>
+  );
+}

desktop/app/src/sandy-chrome/appinspect/troubleshooting/Question2.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 {Modal} from 'antd';
+import {ModalDialog} from '../fb/TroubleshootingGuide';
+
+export function Question2(props: {
+  toggleModal: (showModal: ModalDialog) => void;
+}) {
+  return (
+    <Modal
+      title="Work in progress Q2 !"
+      visible
+      width={650}
+      footer={null}
+      onCancel={() => props.toggleModal('next')}
+      bodyStyle={{maxHeight: 800, overflow: 'auto'}}></Modal>
+  );
+}

desktop/app/src/sandy-chrome/appinspect/troubleshooting/Question3.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 {Modal} from 'antd';
+import {ModalDialog} from '../fb/TroubleshootingGuide';
+
+export function Question3(props: {
+  toggleModal: (showModal: ModalDialog) => void;
+}) {
+  return (
+    <Modal
+      title="Work in progress Q3 !"
+      visible
+      width={650}
+      footer={null}
+      onCancel={() => props.toggleModal('next')}
+      bodyStyle={{maxHeight: 800, overflow: 'auto'}}></Modal>
+  );
+}