Add platform wizard when opening Flipper for first time

Summary: T103651722 - Added a first time wizard to pick the user platforms when the user opens it for the first time. The fact that the wizard was shown is stored in localstorage.

Reviewed By: mweststrate

Differential Revision: D31861286

fbshipit-source-id: a46c532520cd88a0c4c608d3ee314289f0407475

desktop/app/src/chrome/PlatformSelectWizard.tsx

@@ -0,0 +1,158 @@
+/**
+ * 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, {Component} from 'react';
+import {updateSettings, Action} from '../reducers/settings';
+import {connect} from 'react-redux';
+import {State as Store} from '../reducers';
+import {Settings} from '../reducers/settings';
+import {flush} from '../utils/persistor';
+import ToggledSection from './settings/ToggledSection';
+import {isEqual} from 'lodash';
+import restartFlipper from '../utils/restartFlipper';
+import {reportUsage} from 'flipper-common';
+import {Modal, Button} from 'antd';
+import {Layout, withTrackingScope, _NuxManagerContext} from 'flipper-plugin';
+
+const WIZARD_FINISHED_LOCAL_STORAGE_KEY = 'platformSelectWizardFinished';
+
+type OwnProps = {
+  onHide: () => void;
+  platform: NodeJS.Platform;
+};
+
+type StateFromProps = {
+  settings: Settings;
+};
+
+type DispatchFromProps = {
+  updateSettings: (settings: Settings) => Action;
+};
+
+type State = {
+  updatedSettings: Settings;
+  forcedRestartSettings: Partial<Settings>;
+};
+
+type Props = OwnProps & StateFromProps & DispatchFromProps;
+class PlatformSelectWizard extends Component<Props, State> {
+  state: State = {
+    updatedSettings: {...this.props.settings},
+    forcedRestartSettings: {},
+  };
+
+  componentDidMount() {
+    reportUsage('platformwizard:opened');
+  }
+
+  componentWillUnmount() {
+    reportUsage('platformwizard:closed');
+  }
+
+  applyChanges = async (settingsPristine: boolean) => {
+    this.props.updateSettings(this.state.updatedSettings);
+
+    markWizardAsCompleted();
+
+    this.props.onHide();
+
+    return flush().then(() => {
+      if (!settingsPristine) {
+        reportUsage('platformwizard:action:changed');
+        restartFlipper(true);
+      } else {
+        reportUsage('platformwizard:action:noop');
+      }
+    });
+  };
+
+  render() {
+    const {enableAndroid, enableIOS} = this.state.updatedSettings;
+
+    const settingsPristine = isEqual(
+      this.props.settings,
+      this.state.updatedSettings,
+    );
+
+    const contents = (
+      <Layout.Container gap>
+        <Layout.Container style={{width: '100%', paddingBottom: 15}}>
+          <>
+            Please select the targets you intend to debug, so that we can
+            optimise the configuration for the selected targets.
+          </>
+        </Layout.Container>
+        <ToggledSection
+          label="Android Developer"
+          toggled={enableAndroid}
+          onChange={(v) => {
+            this.setState({
+              updatedSettings: {
+                ...this.state.updatedSettings,
+                enableAndroid: v,
+              },
+            });
+          }}></ToggledSection>
+        <ToggledSection
+          label="iOS Developer"
+          toggled={enableIOS && this.props.platform === 'darwin'}
+          onChange={(v) => {
+            this.setState({
+              updatedSettings: {...this.state.updatedSettings, enableIOS: v},
+            });
+          }}></ToggledSection>
+      </Layout.Container>
+    );
+
+    const footerText = settingsPristine ? 'Looks fine' : 'Apply and Restart';
+    const footer = (
+      <>
+        <Button
+          type="primary"
+          onClick={() => this.applyChanges(settingsPristine)}>
+          {footerText}
+        </Button>
+      </>
+    );
+
+    return (
+      <Modal
+        visible
+        onCancel={() => {
+          this.props.onHide();
+          markWizardAsCompleted();
+        }}
+        width={570}
+        title="Select Platform Configuration"
+        footer={footer}>
+        {contents}
+      </Modal>
+    );
+  }
+}
+
+export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
+  ({settingsState}) => ({
+    settings: settingsState,
+  }),
+  {updateSettings},
+)(withTrackingScope(PlatformSelectWizard));
+
+export function hasPlatformWizardBeenDone(
+  localStorage: Storage | undefined,
+): boolean {
+  return (
+    !localStorage ||
+    localStorage.getItem(WIZARD_FINISHED_LOCAL_STORAGE_KEY) !== 'true'
+  );
+}
+
+function markWizardAsCompleted() {
+  window.localStorage.setItem(WIZARD_FINISHED_LOCAL_STORAGE_KEY, 'true');
+}

desktop/app/src/sandy-chrome/SandyApp.tsx

@@ -30,6 +30,9 @@ import PluginContainer from '../PluginContainer';
 import {ContentContainer} from './ContentContainer';
 import {Notification} from './notification/Notification';
 import ChangelogSheet, {hasNewChangesToShow} from '../chrome/ChangelogSheet';
+import PlatformSelectWizard, {
+  hasPlatformWizardBeenDone,
+} from '../chrome/PlatformSelectWizard';
 import {getVersionString} from '../utils/versionString';
 import config from '../fb-stubs/config';
 import {WelcomeScreenStaticView} from './WelcomeScreen';
@@ -98,6 +101,13 @@ export function SandyApp() {
     if (hasNewChangesToShow(window.localStorage)) {
       Dialog.showModal((onHide) => <ChangelogSheet onHide={onHide} recent />);
     }
+
+    if (hasPlatformWizardBeenDone(window.localStorage)) {
+      Dialog.showModal((onHide) => (
+        <PlatformSelectWizard onHide={onHide} platform={process.platform} />
+      ));
+    }
+
     // don't warn about logger, even with a new logger we don't want to re-register
     // eslint-disable-next-line
   }, []);