Settings panel

Summary:
This enables opening the settings panel from Sandy. Created a small code switch in layouting to make sure it looks ok in both sandy and native dialog. Inside the settings no new components are used yet, which will be done in next diffs.

Also removed the close button from temporarily titlebar as settings are now accessible from Sandy chrome

Reviewed By: cekkaewnumchai

Differential Revision: D23812321

fbshipit-source-id: f8888373632786bb75f6dad635d300729b5086dc

desktop/app/src/chrome/SettingsSheet.tsx

@@ -27,6 +27,7 @@ import restartFlipper from '../utils/restartFlipper';
 import LauncherSettingsPanel from '../fb-stubs/LauncherSettingsPanel';
 import SandySettingsPanel from '../fb-stubs/SandySettingsPanel';
 import {reportUsage} from '../utils/metrics';
+import {Modal} from 'antd';
 
 const Container = styled(FlexColumn)({
   padding: 20,
@@ -41,6 +42,7 @@ const Title = styled(Text)({
 });
 
 type OwnProps = {
+  useSandy?: boolean;
   onHide: () => void;
   platform: NodeJS.Platform;
 };
@@ -88,6 +90,39 @@ class SettingsSheet extends Component<Props, State> {
     this.props.onHide();
   };
 
+  renderSandyContainer(
+    contents: React.ReactElement,
+    footer: React.ReactElement,
+  ) {
+    return (
+      <Modal
+        visible
+        onCancel={this.props.onHide}
+        width={570}
+        title="Settings"
+        footer={footer}>
+        <FlexColumn>{contents}</FlexColumn>
+      </Modal>
+    );
+  }
+
+  renderNativeContainer(
+    contents: React.ReactElement,
+    footer: React.ReactElement,
+  ) {
+    return (
+      <Container>
+        <Title>Settings</Title>
+        {contents}
+        <br />
+        <FlexRow>
+          <Spacer />
+          {footer}
+        </FlexRow>
+      </Container>
+    );
+  }
+
   render() {
     const {
       enableAndroid,
@@ -100,14 +135,14 @@ class SettingsSheet extends Component<Props, State> {
       enableSandy,
       darkMode,
     } = this.state.updatedSettings;
+    const {useSandy} = this.props;
 
     const settingsPristine =
       isEqual(this.props.settings, this.state.updatedSettings) &&
       isEqual(this.props.launcherSettings, this.state.updatedLauncherSettings);
 
-    return (
-      <Container>
-        <Title>Settings</Title>
+    const contents = (
+      <>
         <ToggledSection
           label="Android Developer"
           toggled={enableAndroid}
@@ -276,30 +311,35 @@ class SettingsSheet extends Component<Props, State> {
             }}
           />
         </ToggledSection>
-        <br />
-        <FlexRow>
-          <Spacer />
-          <Button compact padded onClick={this.props.onHide}>
-            Cancel
-          </Button>
-          <Button
-            disabled={settingsPristine}
-            compact
-            padded
-            onClick={this.applyChangesWithoutRestart}>
-            Apply
-          </Button>
-          <Button
-            disabled={settingsPristine}
-            type="primary"
-            compact
-            padded
-            onClick={this.applyChanges}>
-            Apply and Restart
-          </Button>
-        </FlexRow>
-      </Container>
+      </>
     );
+
+    const footer = (
+      <>
+        <Button compact padded onClick={this.props.onHide}>
+          Cancel
+        </Button>
+        <Button
+          disabled={settingsPristine}
+          compact
+          padded
+          onClick={this.applyChangesWithoutRestart}>
+          Apply
+        </Button>
+        <Button
+          disabled={settingsPristine}
+          type="primary"
+          compact
+          padded
+          onClick={this.applyChanges}>
+          Apply and Restart
+        </Button>
+      </>
+    );
+
+    return useSandy
+      ? this.renderSandyContainer(contents, footer)
+      : this.renderNativeContainer(contents, footer);
   }
 }