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,9 +311,11 @@ class SettingsSheet extends Component<Props, State> {
             }}
           />
         </ToggledSection>
-        <br />
-        <FlexRow>
-          <Spacer />
+      </>
+    );
+
+    const footer = (
+      <>
         <Button compact padded onClick={this.props.onHide}>
           Cancel
         </Button>
@@ -297,9 +334,12 @@ class SettingsSheet extends Component<Props, State> {
           onClick={this.applyChanges}>
           Apply and Restart
         </Button>
-        </FlexRow>
-      </Container>
+      </>
     );
+
+    return useSandy
+      ? this.renderSandyContainer(contents, footer)
+      : this.renderNativeContainer(contents, footer);
   }
 }
 

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%',

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

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>

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}