Add android enable/disable to settings screen

Summary:
The UI could do with a bit more fine tuning, but it's a start.

Fully functional with updating the settings file. But nothing actually uses that setting yet.

Reviewed By: priteshrnandgaonkar

Differential Revision: D17810588

fbshipit-source-id: 791ee60616f3ee73f41813a5a442b08a5e395458

src/chrome/SettingsSheet.tsx

@@ -5,26 +5,16 @@
  * @format
  */
 
-import {
+import {FlexColumn, Button, styled, Text, FlexRow, Spacer} from 'flipper';
-  FlexColumn,
+import React, {Component} from 'react';
-  Button,
-  styled,
-  Text,
-  FlexRow,
-  Spacer,
-  Input,
-  colors,
-  Glyph,
-} from 'flipper';
-import React, {Component, useState} 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 {promises as fs} from 'fs';
+import ToggledSection from './settings/ToggledSection';
+import {FilePathConfigField} from './settings/configFields';
 import {remote} from 'electron';
-import path from 'path';
 import isEqual from 'lodash.isequal';
 
 const Container = styled(FlexColumn)({
@@ -39,26 +29,6 @@ const Title = styled(Text)({
   fontSize: '40px',
 });
 
-const InfoText = styled(Text)({
-  lineHeight: 1.35,
-  paddingTop: 5,
-});
-
-const FileInputBox = styled(Input)(({isValid}: {isValid: boolean}) => ({
-  marginRight: 0,
-  flexGrow: 1,
-  fontFamily: 'monospace',
-  color: isValid ? undefined : colors.red,
-  marginLeft: 10,
-  marginTop: 'auto',
-  marginBottom: 'auto',
-}));
-
-const CenteredGlyph = styled(Glyph)({
-  margin: 'auto',
-  marginLeft: 10,
-});
-
 type OwnProps = {
   onHide: () => void;
 };
@@ -75,56 +45,9 @@ type State = {
   updatedSettings: Settings;
 };
 
-function FilePathConfigField(props: {
-  label: string;
-  defaultValue: string;
-  onChange: (path: string) => void;
-}) {
-  const [value, setValue] = useState(props.defaultValue);
-  const [isValid, setIsValid] = useState(true);
-  fs.stat(value)
-    .then(stat => setIsValid(stat.isDirectory()))
-    .catch(_ => setIsValid(false));
-  return (
-    <FlexRow>
-      <InfoText>{props.label}</InfoText>
-      <FileInputBox
-        placeholder={props.label}
-        value={value}
-        isValid={isValid}
-        onChange={e => {
-          setValue(e.target.value);
-          props.onChange(e.target.value);
-          fs.stat(e.target.value)
-            .then(stat => setIsValid(stat.isDirectory()))
-            .catch(_ => setIsValid(false));
-        }}
-      />
-      <FlexColumn
-        onClick={() =>
-          remote.dialog.showOpenDialog(
-            {
-              properties: ['openDirectory', 'showHiddenFiles'],
-              defaultPath: path.resolve('/'),
-            },
-            (paths: Array<string> | undefined) => {
-              paths && setValue(paths[0]);
-              paths && props.onChange(paths[0]);
-            },
-          )
-        }>
-        <CenteredGlyph name="dots-3-circle" variant="outline" />
-      </FlexColumn>
-      {isValid ? null : (
-        <CenteredGlyph name="caution-triangle" color={colors.yellow} />
-      )}
-    </FlexRow>
-  );
-}
-
 type Props = OwnProps & StateFromProps & DispatchFromProps;
-class SignInSheet extends Component<Props, State> {
+class SettingsSheet extends Component<Props, State> {
-  state = {
+  state: State = {
     updatedSettings: {...this.props.settings},
   };
 
@@ -141,6 +64,17 @@ class SignInSheet extends Component<Props, State> {
     return (
       <Container>
         <Title>Settings</Title>
+        <ToggledSection
+          label="Android"
+          enabled={this.state.updatedSettings.enableAndroid}
+          onChange={v => {
+            this.setState({
+              updatedSettings: {
+                ...this.state.updatedSettings,
+                enableAndroid: v,
+              },
+            });
+          }}>
           <FilePathConfigField
             label="Android SDK Location"
             defaultValue={this.state.updatedSettings.androidHome}
@@ -153,6 +87,8 @@ class SignInSheet extends Component<Props, State> {
               });
             }}
           />
+        </ToggledSection>
+
         <br />
         <FlexRow>
           <Spacer />
@@ -176,4 +112,4 @@ class SignInSheet extends Component<Props, State> {
 export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
   ({settingsState}) => ({settings: settingsState}),
   {updateSettings},
-)(SignInSheet);
+)(SettingsSheet);

src/chrome/settings/ToggledSection.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import {FlexColumn, styled, FlexRow, ToggleButton} from 'flipper';
+import React from 'react';
+
+const IndentedSection = styled(FlexColumn)({
+  paddingLeft: 50,
+});
+const GreyedOutOverlay = styled('div')({
+  backgroundColor: '#EFEEEF',
+  borderRadius: 4,
+  opacity: 0.6,
+  height: '100%',
+  position: 'absolute',
+  left: 50,
+  right: 0,
+});
+
+export default function ToggledSection(props: {
+  label: string;
+  enabled: boolean;
+  onChange: (value: boolean) => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <FlexColumn>
+      <FlexRow>
+        <ToggleButton
+          label={props.label}
+          onClick={() => props.onChange(!props.enabled)}
+          toggled={props.enabled}
+        />
+      </FlexRow>
+      <IndentedSection>
+        {props.children}
+        {props.enabled ? null : <GreyedOutOverlay />}
+      </IndentedSection>
+    </FlexColumn>
+  );
+}

src/chrome/settings/configFields.tsx

@@ -0,0 +1,85 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import {FlexColumn, styled, Text, FlexRow, Input, colors, Glyph} from 'flipper';
+import React, {useState} from 'react';
+import {promises as fs} from 'fs';
+import {remote} from 'electron';
+import path from 'path';
+
+const ConfigFieldContainer = styled(FlexRow)({
+  paddingLeft: 10,
+  paddingRight: 10,
+});
+
+const InfoText = styled(Text)({
+  lineHeight: 1.35,
+  paddingTop: 5,
+});
+
+const FileInputBox = styled(Input)(({isValid}: {isValid: boolean}) => ({
+  marginRight: 0,
+  flexGrow: 1,
+  fontFamily: 'monospace',
+  color: isValid ? undefined : colors.red,
+  marginLeft: 10,
+  marginTop: 'auto',
+  marginBottom: 'auto',
+}));
+
+const CenteredGlyph = styled(Glyph)({
+  margin: 'auto',
+  marginLeft: 10,
+});
+
+export function FilePathConfigField(props: {
+  label: string;
+  defaultValue: string;
+  onChange: (path: string) => void;
+}) {
+  const [value, setValue] = useState(props.defaultValue);
+  const [isValid, setIsValid] = useState(true);
+  fs.stat(value)
+    .then(stat => setIsValid(stat.isDirectory()))
+    .catch(_ => setIsValid(false));
+
+  return (
+    <ConfigFieldContainer>
+      <InfoText>{props.label}</InfoText>
+      <FileInputBox
+        placeholder={props.label}
+        value={value}
+        isValid={isValid}
+        onChange={e => {
+          setValue(e.target.value);
+          props.onChange(e.target.value);
+          fs.stat(e.target.value)
+            .then(stat => setIsValid(stat.isDirectory()))
+            .catch(_ => setIsValid(false));
+        }}
+      />
+      <FlexColumn
+        onClick={() =>
+          remote.dialog.showOpenDialog(
+            {
+              properties: ['openDirectory', 'showHiddenFiles'],
+              defaultPath: path.resolve('/'),
+            },
+            (paths: Array<string> | undefined) => {
+              paths && setValue(paths[0]);
+              paths && props.onChange(paths[0]);
+            },
+          )
+        }>
+        <CenteredGlyph name="dots-3-circle" variant="outline" />
+      </FlexColumn>
+      {isValid ? null : (
+        <CenteredGlyph name="caution-triangle" color={colors.yellow} />
+      )}
+    </ConfigFieldContainer>
+  );
+}

src/reducers/settings.tsx

@@ -9,6 +9,7 @@ import {Actions} from './index';
 
 export type Settings = {
   androidHome: string;
+  enableAndroid: boolean;
 };
 
 export type Action =
@@ -20,6 +21,7 @@ export type Action =
 
 const initialState: Settings = {
   androidHome: '/opt/android_sdk',
+  enableAndroid: true,
 };
 
 export default function reducer(