Revert "First level of questions and redirection along with unit tests" (#2702)

Summary:
This reverts commit 2e87164152.

Causing OSS tests to break: https://github.com/facebook/flipper/runs/3358415851

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

Differential Revision: D30393320

Pulled By: passy

fbshipit-source-id: a326a59d35fdbe0af0c52a2502a01ab9753d2e60
This commit is contained in:
Pascal Hartig
2021-08-18 03:58:13 -07:00
committed by Facebook GitHub Bot
parent 0cb6c0b3d2
commit 75c4f20c8a
7 changed files with 3 additions and 217 deletions

View File

@@ -29,8 +29,7 @@ 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 GK from '../../fb-stubs/GK';
import TroubleshootingGuide from './fb-stubs/TroubleshootingGuide';
const {Text} = Typography;
@@ -109,8 +108,7 @@ export function AppSelector() {
</Dropdown>
</Radio.Group>
) : (
// GK check to decide if troubleshooting guide will be visible or not
<TroubleshootingGuide showGuide={GK.get('flipper_self_sufficiency')} />
<TroubleshootingGuide />
);
}

View File

@@ -1,73 +0,0 @@
/**
* 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');
});

View File

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

View File

@@ -1,61 +0,0 @@
/**
* 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>
);
}

View File

@@ -1,26 +0,0 @@
/**
* 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>
);
}

View File

@@ -1,26 +0,0 @@
/**
* 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>
);
}

View File

@@ -1,26 +0,0 @@
/**
* 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>
);
}