Add settings UI

Summary:
Adds a simple UI for editing settings, a reducer and persistance config for the data.
These values aren't yet used for anything.

Reviewed By: passy

Differential Revision: D17684490

fbshipit-source-id: e76ac43ffa17d3606e59f4a1ccb940e8d9fbd9e8

src/chrome/SettingsSheet.tsx

@@ -0,0 +1,168 @@
+/**
+ * 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,
+  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 {promises as fs} from 'fs';
+import {remote} from 'electron';
+import path from 'path';
+
+const Container = styled(FlexColumn)({
+  padding: 20,
+  width: 800,
+});
+
+const Title = styled(Text)({
+  marginBottom: 18,
+  marginRight: 10,
+  fontWeight: 100,
+  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;
+};
+
+type StateFromProps = {
+  settings: Settings;
+};
+
+type DispatchFromProps = {
+  updateSettings: (settings: Settings) => Action;
+};
+
+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> {
+  state = {
+    updatedSettings: {...this.props.settings},
+  };
+
+  applyChanges = async () => {
+    this.props.updateSettings(this.state.updatedSettings);
+    this.props.onHide();
+  };
+
+  render() {
+    return (
+      <Container>
+        <Title>Settings</Title>
+        <FilePathConfigField
+          label="Android SDK Location"
+          defaultValue={this.state.updatedSettings.androidHome}
+          onChange={v => {
+            this.setState({
+              updatedSettings: {
+                ...this.state.updatedSettings,
+                androidHome: v,
+              },
+            });
+          }}
+        />
+        <br />
+        <FlexRow>
+          <Spacer />
+          <Button compact padded onClick={this.props.onHide}>
+            Cancel
+          </Button>
+          <Button type="primary" compact padded onClick={this.applyChanges}>
+            Apply
+          </Button>
+        </FlexRow>
+      </Container>
+    );
+  }
+}
+
+export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
+  ({settingsState}) => ({settings: settingsState.settings}),
+  {updateSettings},
+)(SignInSheet);

src/chrome/TitleBar.tsx

@@ -14,6 +14,7 @@ import {
   toggleRightSidebarVisible,
   ACTIVE_SHEET_BUG_REPORTER,
   setFlipperRating,
+  ACTIVE_SHEET_SETTINGS,
 } from '../reducers/application';
 import {
   colors,
@@ -181,6 +182,12 @@ class TitleBar extends React.Component<Props, StateFromProps> {
             icon="bug"
           />
         )}
+        <Button
+          icon="settings"
+          title="Settings"
+          compact={true}
+          onClick={() => this.props.setActiveSheet(ACTIVE_SHEET_SETTINGS)}
+        />
         <ButtonGroup>
           <Button
             compact={true}