Move app/src (mostly) to flipper-ui-core/src
Summary: This diff moves all UI code from app/src to app/flipper-ui-core. That is now slightly too much (e.g. node deps are not removed yet), but from here it should be easier to move things out again, as I don't want this diff to be open for too long to avoid too much merge conflicts. * But at least flipper-ui-core is Electron free :) * Killed all cross module imports as well, as they where now even more in the way * Some unit test needed some changes, most not too big (but emotion hashes got renumbered in the snapshots, feel free to ignore that) * Found some files that were actually meaningless (tsconfig in plugins, WatchTools files, that start generating compile errors, removed those Follow up work: * make flipper-ui-core configurable, and wire up flipper-server-core in Electron instead of here * remove node deps (aigoncharov) * figure out correct place to load GKs, plugins, make intern requests etc., and move to the correct module * clean up deps Reviewed By: aigoncharov Differential Revision: D32427722 fbshipit-source-id: 14fe92e1ceb15b9dcf7bece367c8ab92df927a70
This commit is contained in:
Michel Weststrate
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
54b7ce9308
commit
7e50c0466a
235
desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx
Normal file
235
desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx
Normal file
@@ -0,0 +1,235 @@
|
||||
/**
|
||||
* 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 '../ui';
|
||||
import {Modal, Button, Image, Checkbox, Space, Typography, Tooltip} from 'antd';
|
||||
import {
|
||||
RocketOutlined,
|
||||
AppstoreAddOutlined,
|
||||
CodeOutlined,
|
||||
BugOutlined,
|
||||
HistoryOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import {
|
||||
Dialog,
|
||||
Layout,
|
||||
NUX,
|
||||
theme,
|
||||
Tracked,
|
||||
TrackingScope,
|
||||
} from 'flipper-plugin';
|
||||
|
||||
const {Text, Title} = Typography;
|
||||
|
||||
import constants from '../fb-stubs/constants';
|
||||
import config from '../fb-stubs/config';
|
||||
import isProduction from '../utils/isProduction';
|
||||
import {getAppVersion} from '../utils/info';
|
||||
import ReleaseChannel from '../ReleaseChannel';
|
||||
import {getFlipperLib} from 'flipper-plugin';
|
||||
import ChangelogSheet from '../chrome/ChangelogSheet';
|
||||
|
||||
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 (
|
||||
<Tracked action={props.title}>
|
||||
<RowContainer onClick={props.onClick}>
|
||||
<Space size="middle">
|
||||
{cloneElement(props.icon, {
|
||||
style: {fontSize: 36, color: theme.primaryColor},
|
||||
})}
|
||||
<FlexColumn>
|
||||
<Title level={3} style={{color: theme.primaryColor}}>
|
||||
{props.title}
|
||||
</Title>
|
||||
<Text type="secondary">{props.subtitle}</Text>
|
||||
</FlexColumn>
|
||||
</Space>
|
||||
</RowContainer>
|
||||
</Tracked>
|
||||
);
|
||||
}
|
||||
|
||||
const FooterContainer = styled(FlexRow)({
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
function WelcomeFooter({
|
||||
onClose,
|
||||
checked,
|
||||
onCheck,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
checked: boolean;
|
||||
onCheck: (value: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<FooterContainer>
|
||||
<Checkbox checked={checked} onChange={(e) => onCheck(e.target.checked)}>
|
||||
<Text style={{fontSize: theme.fontSize.small}}>
|
||||
Show this when app opens (or use ? icon on left)
|
||||
</Text>
|
||||
</Checkbox>
|
||||
<Button type="primary" onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</FooterContainer>
|
||||
);
|
||||
}
|
||||
|
||||
const openExternal = (url: string) => () => getFlipperLib().openLink(url);
|
||||
|
||||
export default function WelcomeScreen({
|
||||
visible,
|
||||
onClose,
|
||||
showAtStartup,
|
||||
onCheck,
|
||||
}: {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
showAtStartup: boolean;
|
||||
onCheck: (value: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<Modal
|
||||
closable={false}
|
||||
visible={visible}
|
||||
footer={
|
||||
<WelcomeFooter
|
||||
onClose={onClose}
|
||||
checked={showAtStartup}
|
||||
onCheck={onCheck}
|
||||
/>
|
||||
}
|
||||
onCancel={onClose}>
|
||||
<WelcomeScreenContent />
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export function WelcomeScreenStaticView() {
|
||||
return (
|
||||
<Layout.Container
|
||||
center
|
||||
style={{
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
pad
|
||||
grow>
|
||||
<Layout.Container width={400} center>
|
||||
<WelcomeScreenContent />
|
||||
</Layout.Container>
|
||||
</Layout.Container>
|
||||
);
|
||||
}
|
||||
|
||||
function WelcomeScreenContent() {
|
||||
function isInsidersChannel() {
|
||||
return config.getReleaseChannel() === ReleaseChannel.INSIDERS;
|
||||
}
|
||||
|
||||
return (
|
||||
<TrackingScope scope="welcomescreen">
|
||||
<Space
|
||||
direction="vertical"
|
||||
size="middle"
|
||||
style={{width: '100%', padding: '0 32px 32px', alignItems: 'center'}}>
|
||||
<Image
|
||||
style={{
|
||||
filter: isInsidersChannel() ? 'hue-rotate(230deg)' : 'none',
|
||||
}}
|
||||
width={125}
|
||||
height={125}
|
||||
src="./icon.png"
|
||||
preview={false}
|
||||
/>
|
||||
<Title level={1}>Welcome to Flipper</Title>
|
||||
<Text>
|
||||
Using release channel{' '}
|
||||
<code
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
border: 'none',
|
||||
background: 'none',
|
||||
color: isInsidersChannel() ? 'rgb(62, 124, 66)' : '#000',
|
||||
textTransform: 'capitalize',
|
||||
fontWeight: isInsidersChannel() ? 'bold' : 'normal',
|
||||
}}>
|
||||
{config.getReleaseChannel()}
|
||||
</code>
|
||||
</Text>
|
||||
<Space direction="horizontal" size="middle">
|
||||
<Text style={{color: theme.textColorPlaceholder}}>
|
||||
{isProduction() ? `Version ${getAppVersion()}` : 'Development Mode'}
|
||||
</Text>
|
||||
<Tooltip title="Changelog" placement="bottom">
|
||||
<NUX title="See Flipper changelog" placement="top">
|
||||
<Button
|
||||
size="small"
|
||||
icon={<HistoryOutlined />}
|
||||
title="Changelog"
|
||||
onClick={() =>
|
||||
Dialog.showModal((onHide) => (
|
||||
<ChangelogSheet onHide={onHide} />
|
||||
))
|
||||
}
|
||||
/>
|
||||
</NUX>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</Space>
|
||||
<Space direction="vertical" size="large" style={{width: '100%'}}>
|
||||
<Row
|
||||
icon={<RocketOutlined />}
|
||||
title="Using Flipper"
|
||||
subtitle="Learn how Flipper can help you debug your App"
|
||||
onClick={openExternal('https://fbflipper.com/docs/features/index')}
|
||||
/>
|
||||
<Row
|
||||
icon={<AppstoreAddOutlined />}
|
||||
title="Create Your Own Plugin"
|
||||
subtitle="Get started with these pointers"
|
||||
onClick={openExternal('https://fbflipper.com/docs/tutorial/intro')}
|
||||
/>
|
||||
<Row
|
||||
icon={<CodeOutlined />}
|
||||
title="Add Flipper Support to Your App"
|
||||
subtitle="Get started with these pointers"
|
||||
onClick={openExternal(
|
||||
'https://fbflipper.com/docs/getting-started/index',
|
||||
)}
|
||||
/>
|
||||
<Row
|
||||
icon={<BugOutlined />}
|
||||
title="Contributing and Feedback"
|
||||
subtitle="Report issues and help us improve Flipper"
|
||||
onClick={openExternal(constants.FEEDBACK_GROUP_LINK)}
|
||||
/>
|
||||
</Space>
|
||||
</TrackingScope>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user