From fdd2151532dc0eb2a6bcd41806855b967a675003 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 22 Sep 2020 12:01:46 -0700
Subject: [PATCH] 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      | 92 +++++++++++++------
 .../src/chrome/settings/ToggledSection.tsx    |  3 +-
 desktop/app/src/sandy-chrome/LeftRail.tsx     | 26 +++++-
 desktop/app/src/sandy-chrome/SandyApp.tsx     |  4 +-
 .../src/sandy-chrome/TemporarilyTitlebar.tsx  | 14 +--
 5 files changed, 95 insertions(+), 44 deletions(-)

diff --git a/desktop/app/src/chrome/SettingsSheet.tsx b/desktop/app/src/chrome/SettingsSheet.tsx
index 9b8fe10a4..3ba7e181c 100644
--- a/desktop/app/src/chrome/SettingsSheet.tsx
+++ b/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);
   }
 }
 
diff --git a/desktop/app/src/chrome/settings/ToggledSection.tsx b/desktop/app/src/chrome/settings/ToggledSection.tsx
index 64e4e6aaf..4ec60ff08 100644
--- a/desktop/app/src/chrome/settings/ToggledSection.tsx
+++ b/desktop/app/src/chrome/settings/ToggledSection.tsx
@@ -9,13 +9,14 @@
 
 import {FlexColumn, styled, FlexRow, ToggleButton} from 'flipper';
 import React from 'react';
+import {theme} from '../../sandy-chrome/theme';
 
 const IndentedSection = styled(FlexColumn)({
   paddingLeft: 50,
   paddingBottom: 10,
 });
 const GreyedOutOverlay = styled.div({
-  backgroundColor: '#EFEEEF',
+  background: theme.backgroundDefault,
   borderRadius: 4,
   opacity: 0.6,
   height: '100%',
diff --git a/desktop/app/src/sandy-chrome/LeftRail.tsx b/desktop/app/src/sandy-chrome/LeftRail.tsx
index 4b660bc73..a803bc449 100644
--- a/desktop/app/src/sandy-chrome/LeftRail.tsx
+++ b/desktop/app/src/sandy-chrome/LeftRail.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import React, {cloneElement} from 'react';
+import React, {cloneElement, useState, useCallback} from 'react';
 import {styled, FlexColumn} from 'flipper';
 import {Button, Divider, Badge, Tooltip} from 'antd';
 import {
@@ -25,6 +25,7 @@ import {SidebarLeft, SidebarRight} from './SandyIcons';
 import {useDispatch, useStore} from '../utils/useStore';
 import {toggleLeftSidebarVisible} from '../reducers/application';
 import {theme} from './theme';
+import SettingsSheet from '../chrome/SettingsSheet';
 
 const LeftRailContainer = styled(FlexColumn)({
   background: theme.backgroundDefault,
@@ -62,7 +63,7 @@ function LeftRailButton({
   icon?: React.ReactElement;
   small?: boolean;
   toggled?: boolean;
-  selected?: boolean;
+  selected?: boolean; // TODO: make sure only one element can be selected
   count?: number;
   title: string;
   onClick?: React.MouseEventHandler<HTMLElement>;
@@ -123,7 +124,7 @@ export function LeftRail() {
           small
           title="Help / Start Screen"
         />
-        <LeftRailButton icon={<SettingOutlined />} small title="Settings" />
+        <ShowSettingsButton />
         <LeftRailButton
           icon={<BugOutlined />}
           small
@@ -160,3 +161,22 @@ function LeftSidebarToggleButton() {
     />
   );
 }
+
+function ShowSettingsButton() {
+  const [showSettings, setShowSettings] = useState(false);
+  const onClose = useCallback(() => setShowSettings(false), []);
+  return (
+    <>
+      <LeftRailButton
+        icon={<SettingOutlined />}
+        small
+        title="Settings"
+        onClick={() => setShowSettings(true)}
+        selected={showSettings}
+      />
+      {showSettings && (
+        <SettingsSheet platform={process.platform} onHide={onClose} useSandy />
+      )}
+    </>
+  );
+}
diff --git a/desktop/app/src/sandy-chrome/SandyApp.tsx b/desktop/app/src/sandy-chrome/SandyApp.tsx
index 2a3f99be7..f3509376e 100644
--- a/desktop/app/src/sandy-chrome/SandyApp.tsx
+++ b/desktop/app/src/sandy-chrome/SandyApp.tsx
@@ -39,7 +39,9 @@ export function SandyApp({logger}: {logger: Logger}) {
         <LeftMenu collapsed={!mainMenuVisible}>
           <LeftRail />
           {mainMenuVisible && (
-            <div style={{background: 'white', width: '100%'}}>LeftMenu</div>
+            <div style={{background: theme.backgroundDefault, width: '100%'}}>
+              LeftMenu
+            </div>
           )}
         </LeftMenu>
         <MainContainer>
diff --git a/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx b/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx
index bee4b0e67..ad9862336 100644
--- a/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx
+++ b/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx
@@ -8,10 +8,7 @@
  */
 
 import React from 'react';
-import {updateSettings} from '../reducers/settings';
 import {styled, colors} from 'flipper';
-import {Button, Space} from 'antd';
-import {CloseCircleOutlined} from '@ant-design/icons';
 import FpsGraph from '../chrome/FpsGraph';
 import NetworkGraph from '../chrome/NetworkGraph';
 import isProduction from '../utils/isProduction';
@@ -20,7 +17,7 @@ import AutoUpdateVersion from '../chrome/AutoUpdateVersion';
 import UpdateIndicator from '../chrome/UpdateIndicator';
 import RatingButton from '../chrome/RatingButton';
 import {Version} from '../chrome/TitleBar';
-import {useDispatch, useStore} from '../utils/useStore';
+import {useStore} from '../utils/useStore';
 import config from '../fb-stubs/config';
 import {remote} from 'electron';
 
@@ -51,21 +48,12 @@ const TemporarilyTitlebarContainer = styled('div')<{focused?: boolean}>(
 // This component should be dropped, and insetTitlebar should be removed from Electron startup once Sandy is the default
 // But: figure out where to put the graphs, version numbers, flipper rating ets :)
 export function TemporarilyTitlebar() {
-  const dispatch = useDispatch();
-  const settings = useStore((state) => state.settingsState);
   const launcherMsg = useStore((state) => state.application.launcherMsg);
   const isFocused = useStore((state) => state.application.windowIsFocused);
 
   return (
     <TemporarilyTitlebarContainer focused={isFocused}>
       [Sandy] Flipper{' '}
-      <Button
-        size="small"
-        type="link"
-        icon={<CloseCircleOutlined />}
-        onClick={() =>
-          dispatch(updateSettings({...settings, enableSandy: false}))
-        }></Button>
       {!isProduction() && <NetworkGraph height={20} width={60} />}
       {!isProduction() && <FpsGraph height={20} width={60} />}
       {config.showFlipperRating ? <RatingButton /> : null}