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/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>
+  );
+}