diff --git a/desktop/app/src/reducers/settings.tsx b/desktop/app/src/reducers/settings.tsx
index ecc53dd15..ef672cd8d 100644
--- a/desktop/app/src/reducers/settings.tsx
+++ b/desktop/app/src/reducers/settings.tsx
@@ -45,6 +45,7 @@ export type Settings = {
};
enableSandy: boolean;
darkMode: boolean;
+ showWelcomeAtStartup: boolean;
};
export type Action =
@@ -79,6 +80,7 @@ const initialState: Settings = {
},
enableSandy: false,
darkMode: false,
+ showWelcomeAtStartup: true,
};
export default function reducer(
diff --git a/desktop/app/src/sandy-chrome/LeftRail.tsx b/desktop/app/src/sandy-chrome/LeftRail.tsx
index a803bc449..e35756aaf 100644
--- a/desktop/app/src/sandy-chrome/LeftRail.tsx
+++ b/desktop/app/src/sandy-chrome/LeftRail.tsx
@@ -26,6 +26,7 @@ import {useDispatch, useStore} from '../utils/useStore';
import {toggleLeftSidebarVisible} from '../reducers/application';
import {theme} from './theme';
import SettingsSheet from '../chrome/SettingsSheet';
+import WelcomeScreen from './WelcomeScreen';
const LeftRailContainer = styled(FlexColumn)({
background: theme.backgroundDefault,
@@ -119,11 +120,7 @@ export function LeftRail() {
small
title="Setup Doctor"
/>
- }
- small
- title="Help / Start Screen"
- />
+
}
@@ -180,3 +177,32 @@ function ShowSettingsButton() {
>
);
}
+
+function WelcomeScreenButton() {
+ const settings = useStore((state) => state.settingsState);
+ const showWelcomeScreenAtStartup = settings.showWelcomeAtStartup;
+ const dispatch = useDispatch();
+ const [visible, setVisible] = useState(showWelcomeScreenAtStartup);
+
+ return (
+ <>
+ }
+ small
+ title="Help / Start Screen"
+ onClick={() => setVisible(true)}
+ />
+ setVisible(false)}
+ showAtStartup={showWelcomeScreenAtStartup}
+ onCheck={(value) =>
+ dispatch({
+ type: 'UPDATE_SETTINGS',
+ payload: {...settings, showWelcomeAtStartup: value},
+ })
+ }
+ />
+ >
+ );
+}
diff --git a/desktop/app/src/sandy-chrome/WelcomeScreen.tsx b/desktop/app/src/sandy-chrome/WelcomeScreen.tsx
new file mode 100644
index 000000000..6dc442c12
--- /dev/null
+++ b/desktop/app/src/sandy-chrome/WelcomeScreen.tsx
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {cloneElement} from 'react';
+import {styled, FlexRow, FlexColumn} from 'flipper';
+import {Modal, Button, Image, Checkbox, Space, Typography} from 'antd';
+import {
+ RocketOutlined,
+ AppstoreAddOutlined,
+ CodeOutlined,
+ BugOutlined,
+} from '@ant-design/icons';
+import {theme} from './theme';
+
+const {Text, Title} = Typography;
+
+import constants from '../fb-stubs/constants';
+import isProduction from '../utils/isProduction';
+import isHeadless from '../utils/isHeadless';
+const {shell, remote} = !isHeadless()
+ ? require('electron')
+ : {shell: undefined, remote: undefined};
+
+const RowContainer = styled(FlexRow)({
+ alignItems: 'flex-start',
+ padding: `${theme.space.small}px`,
+ cursor: 'pointer',
+ '&:hover, &:focus, &:active': {
+ backgroundColor: theme.backgroundTransparentHover,
+ borderRadius: theme.borderRadius,
+ textDecoration: 'none',
+ },
+});
+
+function Row(props: {
+ icon: React.ReactElement;
+ title: string;
+ subtitle: string;
+ onClick?: () => void;
+}) {
+ return (
+
+
+ {cloneElement(props.icon, {
+ style: {fontSize: 36, color: theme.primaryColor},
+ })}
+
+
+ {props.title}
+
+ {props.subtitle}
+
+
+
+ );
+}
+
+const FooterContainer = styled(FlexRow)({
+ justifyContent: 'space-between',
+ alignItems: 'center',
+});
+
+function WelcomeFooter({
+ onClose,
+ checked,
+ onCheck,
+}: {
+ onClose: () => void;
+ checked: boolean;
+ onCheck: (value: boolean) => void;
+}) {
+ return (
+
+ onCheck(e.target.checked)}>
+
+ Show this when app opens (or use ? icon on left)
+
+
+
+
+ );
+}
+
+const openExternal = (url: string) => () => shell && shell.openExternal(url);
+
+export default function WelcomeScreen({
+ visible,
+ onClose,
+ showAtStartup,
+ onCheck,
+}: {
+ visible: boolean;
+ onClose: () => void;
+ showAtStartup: boolean;
+ onCheck: (value: boolean) => void;
+}) {
+ return (
+
+ }
+ onCancel={onClose}>
+
+
+ Welcome to Flipper
+
+ {isProduction() && remote
+ ? `Version ${remote.app.getVersion()}`
+ : 'Development Mode'}
+
+
+
+
}
+ title="Using Flipper"
+ subtitle="Learn how Flipper can help you debug your App"
+ onClick={openExternal('https://fbflipper.com/docs/features/index')}
+ />
+
}
+ title="Create Your Own Plugin"
+ subtitle="Get started with these pointers"
+ onClick={openExternal('https://fbflipper.com/docs/tutorial/intro')}
+ />
+
}
+ title="Add Flipper Support to Your App"
+ subtitle="Get started with these pointers"
+ onClick={openExternal(
+ 'https://fbflipper.com/docs/getting-started/index',
+ )}
+ />
+
}
+ title="Contributing and Feedback"
+ subtitle="Report issues and help us improve Flipper"
+ onClick={openExternal(constants.FEEDBACK_GROUP_LINK)}
+ />
+
+
+ );
+}
diff --git a/desktop/app/src/sandy-chrome/theme.tsx b/desktop/app/src/sandy-chrome/theme.tsx
index 5315d04ad..31d13c33f 100644
--- a/desktop/app/src/sandy-chrome/theme.tsx
+++ b/desktop/app/src/sandy-chrome/theme.tsx
@@ -29,4 +29,7 @@ export const theme = {
middle: 16,
large: 24,
} as const,
+ fontSize: {
+ smallBody: '12px',
+ },
};