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
577
desktop/flipper-ui-core/src/NotificationsHub.tsx
Normal file
577
desktop/flipper-ui-core/src/NotificationsHub.tsx
Normal file
@@ -0,0 +1,577 @@
|
||||
/**
|
||||
* 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 {SearchableProps} from './ui';
|
||||
import {Logger} from 'flipper-common';
|
||||
import {
|
||||
Searchable,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
FlexBox,
|
||||
FlexColumn,
|
||||
FlexRow,
|
||||
Glyph,
|
||||
ContextMenu,
|
||||
styled,
|
||||
colors,
|
||||
} from './ui';
|
||||
import {PluginDefinition, DevicePluginMap, ClientPluginMap} from './plugin';
|
||||
import {connect} from 'react-redux';
|
||||
import React, {Component, Fragment} from 'react';
|
||||
import {
|
||||
PluginNotification,
|
||||
updatePluginBlocklist,
|
||||
updateCategoryBlocklist,
|
||||
} from './reducers/notifications';
|
||||
import {selectPlugin} from './reducers/connections';
|
||||
import {State as StoreState} from './reducers/index';
|
||||
import {textContent} from 'flipper-plugin';
|
||||
import createPaste from './fb-stubs/createPaste';
|
||||
import {getPluginTitle} from './utils/pluginUtils';
|
||||
import {getFlipperLib} from 'flipper-plugin';
|
||||
import {ContextMenuItem} from './ui/components/ContextMenu';
|
||||
|
||||
type OwnProps = {
|
||||
onClear: () => void;
|
||||
selectedID: string | null | undefined;
|
||||
logger: Logger;
|
||||
} & Partial<SearchableProps>;
|
||||
|
||||
type StateFromProps = {
|
||||
activeNotifications: Array<PluginNotification>;
|
||||
invalidatedNotifications: Array<PluginNotification>;
|
||||
blocklistedPlugins: Array<string>;
|
||||
blocklistedCategories: Array<string>;
|
||||
devicePlugins: DevicePluginMap;
|
||||
clientPlugins: ClientPluginMap;
|
||||
};
|
||||
|
||||
type DispatchFromProps = {
|
||||
selectPlugin: typeof selectPlugin;
|
||||
updatePluginBlocklist: (blocklist: Array<string>) => any;
|
||||
updateCategoryBlocklist: (blocklist: Array<string>) => any;
|
||||
};
|
||||
|
||||
type Props = OwnProps & StateFromProps & DispatchFromProps;
|
||||
|
||||
type State = {
|
||||
selectedNotification: string | null | undefined;
|
||||
};
|
||||
|
||||
const Content = styled(FlexColumn)({
|
||||
padding: '0 10px',
|
||||
backgroundColor: colors.light02,
|
||||
overflow: 'scroll',
|
||||
flexGrow: 1,
|
||||
});
|
||||
|
||||
const Heading = styled(FlexBox)({
|
||||
display: 'block',
|
||||
alignItems: 'center',
|
||||
marginTop: 15,
|
||||
marginBottom: 5,
|
||||
color: colors.macOSSidebarSectionTitle,
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
textOverflow: 'ellipsis',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
const NoContent = styled(FlexColumn)({
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
flexGrow: 1,
|
||||
fontWeight: 500,
|
||||
lineHeight: 2.5,
|
||||
color: colors.light30,
|
||||
});
|
||||
|
||||
class NotificationsTable extends Component<Props & SearchableProps, State> {
|
||||
contextMenuItems = [{label: 'Clear all', click: this.props.onClear}];
|
||||
state: State = {
|
||||
selectedNotification: this.props.selectedID,
|
||||
};
|
||||
|
||||
componentDidUpdate(prevProps: Props & SearchableProps) {
|
||||
if (this.props.filters.length !== prevProps.filters.length) {
|
||||
this.props.updatePluginBlocklist(
|
||||
this.props.filters
|
||||
.filter(
|
||||
(f) => f.type === 'exclude' && f.key.toLowerCase() === 'plugin',
|
||||
)
|
||||
.map((f) => String(f.value)),
|
||||
);
|
||||
|
||||
this.props.updateCategoryBlocklist(
|
||||
this.props.filters
|
||||
.filter(
|
||||
(f) => f.type === 'exclude' && f.key.toLowerCase() === 'category',
|
||||
)
|
||||
.map((f) => String(f.value)),
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
this.props.selectedID &&
|
||||
prevProps.selectedID !== this.props.selectedID
|
||||
) {
|
||||
this.setState({
|
||||
selectedNotification: this.props.selectedID,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onHidePlugin = (pluginId: string) => {
|
||||
// add filter to searchbar
|
||||
this.props.addFilter({
|
||||
value: pluginId,
|
||||
type: 'exclude',
|
||||
key: 'plugin',
|
||||
});
|
||||
this.props.updatePluginBlocklist(
|
||||
this.props.blocklistedPlugins.concat(pluginId),
|
||||
);
|
||||
};
|
||||
|
||||
onHideCategory = (category: string) => {
|
||||
// add filter to searchbar
|
||||
this.props.addFilter({
|
||||
value: category,
|
||||
type: 'exclude',
|
||||
key: 'category',
|
||||
});
|
||||
this.props.updatePluginBlocklist(
|
||||
this.props.blocklistedCategories.concat(category),
|
||||
);
|
||||
};
|
||||
|
||||
getFilter =
|
||||
(): ((n: PluginNotification) => boolean) => (n: PluginNotification) => {
|
||||
const searchTerm = this.props.searchTerm.toLowerCase();
|
||||
|
||||
// filter plugins
|
||||
const blocklistedPlugins = new Set(
|
||||
this.props.blocklistedPlugins.map((p) => p.toLowerCase()),
|
||||
);
|
||||
if (blocklistedPlugins.has(n.pluginId.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// filter categories
|
||||
const {category} = n.notification;
|
||||
if (category) {
|
||||
const blocklistedCategories = new Set(
|
||||
this.props.blocklistedCategories.map((p) => p.toLowerCase()),
|
||||
);
|
||||
if (blocklistedCategories.has(category.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (searchTerm.length === 0) {
|
||||
return true;
|
||||
} else if (n.notification.title.toLowerCase().indexOf(searchTerm) > -1) {
|
||||
return true;
|
||||
} else if (
|
||||
typeof n.notification.message === 'string' &&
|
||||
n.notification.message.toLowerCase().indexOf(searchTerm) > -1
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
getPlugin = (id: string) =>
|
||||
this.props.clientPlugins.get(id) || this.props.devicePlugins.get(id);
|
||||
|
||||
render() {
|
||||
const activeNotifications = this.props.activeNotifications
|
||||
.filter(this.getFilter())
|
||||
.map((n: PluginNotification) => {
|
||||
const {category} = n.notification;
|
||||
|
||||
return (
|
||||
<NotificationItem
|
||||
key={n.notification.id}
|
||||
{...n}
|
||||
plugin={this.getPlugin(n.pluginId)}
|
||||
isSelected={this.state.selectedNotification === n.notification.id}
|
||||
onHighlight={() =>
|
||||
this.setState({selectedNotification: n.notification.id})
|
||||
}
|
||||
onClear={this.props.onClear}
|
||||
onHidePlugin={() => this.onHidePlugin(n.pluginId)}
|
||||
onHideCategory={
|
||||
category ? () => this.onHideCategory(category) : undefined
|
||||
}
|
||||
selectPlugin={this.props.selectPlugin}
|
||||
logger={this.props.logger}
|
||||
/>
|
||||
);
|
||||
})
|
||||
.reverse();
|
||||
|
||||
const invalidatedNotifications = this.props.invalidatedNotifications
|
||||
.filter(this.getFilter())
|
||||
.map((n: PluginNotification) => (
|
||||
<NotificationItem
|
||||
key={n.notification.id}
|
||||
{...n}
|
||||
plugin={this.getPlugin(n.pluginId)}
|
||||
onClear={this.props.onClear}
|
||||
inactive
|
||||
/>
|
||||
))
|
||||
.reverse();
|
||||
|
||||
return (
|
||||
<ContextMenu items={this.contextMenuItems} component={Content}>
|
||||
{activeNotifications.length > 0 && (
|
||||
<Fragment>
|
||||
<Heading>Active notifications</Heading>
|
||||
<FlexColumn shrink={false}>{activeNotifications}</FlexColumn>
|
||||
</Fragment>
|
||||
)}
|
||||
{invalidatedNotifications.length > 0 && (
|
||||
<Fragment>
|
||||
<Heading>Past notifications</Heading>
|
||||
<FlexColumn shrink={false}>{invalidatedNotifications}</FlexColumn>
|
||||
</Fragment>
|
||||
)}
|
||||
{activeNotifications.length + invalidatedNotifications.length === 0 && (
|
||||
<NoContent>
|
||||
<Glyph
|
||||
name="bell-null"
|
||||
size={24}
|
||||
variant="outline"
|
||||
color={colors.light30}
|
||||
/>
|
||||
No Notifications
|
||||
</NoContent>
|
||||
)}
|
||||
</ContextMenu>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const ConnectedNotificationsTable = connect<
|
||||
StateFromProps,
|
||||
DispatchFromProps,
|
||||
OwnProps,
|
||||
StoreState
|
||||
>(
|
||||
({
|
||||
notifications: {
|
||||
activeNotifications,
|
||||
invalidatedNotifications,
|
||||
blocklistedPlugins,
|
||||
blocklistedCategories,
|
||||
},
|
||||
plugins: {devicePlugins, clientPlugins},
|
||||
}) => ({
|
||||
activeNotifications,
|
||||
invalidatedNotifications,
|
||||
blocklistedPlugins,
|
||||
blocklistedCategories,
|
||||
devicePlugins,
|
||||
clientPlugins,
|
||||
}),
|
||||
{
|
||||
updatePluginBlocklist,
|
||||
updateCategoryBlocklist,
|
||||
selectPlugin,
|
||||
},
|
||||
)(Searchable(NotificationsTable));
|
||||
|
||||
const shadow = (
|
||||
props: {isSelected?: boolean; inactive?: boolean},
|
||||
_hover?: boolean,
|
||||
) => {
|
||||
if (props.inactive) {
|
||||
return `inset 0 0 0 1px ${colors.light10}`;
|
||||
}
|
||||
const shadow = ['1px 1px 5px rgba(0,0,0,0.1)'];
|
||||
if (props.isSelected) {
|
||||
shadow.push(`inset 0 0 0 2px ${colors.macOSTitleBarIconSelected}`);
|
||||
}
|
||||
|
||||
return shadow.join(',');
|
||||
};
|
||||
|
||||
const SEVERITY_COLOR_MAP = {
|
||||
warning: colors.yellow,
|
||||
error: colors.red,
|
||||
};
|
||||
|
||||
type NotificationBoxProps = {
|
||||
inactive?: boolean;
|
||||
isSelected?: boolean;
|
||||
severity: keyof typeof SEVERITY_COLOR_MAP;
|
||||
};
|
||||
|
||||
const NotificationBox = styled(FlexRow)<NotificationBoxProps>((props) => ({
|
||||
backgroundColor: props.inactive ? 'transparent' : colors.white,
|
||||
opacity: props.inactive ? 0.5 : 1,
|
||||
alignItems: 'flex-start',
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
flexShrink: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
marginBottom: 10,
|
||||
boxShadow: shadow(props),
|
||||
'::before': {
|
||||
content: '""',
|
||||
display: !props.inactive && !props.isSelected ? 'block' : 'none',
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: 3,
|
||||
backgroundColor: SEVERITY_COLOR_MAP[props.severity] || colors.info,
|
||||
},
|
||||
':hover': {
|
||||
boxShadow: shadow(props, true),
|
||||
'& > *': {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const Title = styled.div({
|
||||
minWidth: 150,
|
||||
color: colors.light80,
|
||||
flexShrink: 0,
|
||||
marginBottom: 6,
|
||||
fontWeight: 500,
|
||||
lineHeight: 1,
|
||||
fontSize: '1.1em',
|
||||
});
|
||||
|
||||
const NotificationContent = styled(FlexColumn)<{isSelected?: boolean}>(
|
||||
(props) => ({
|
||||
marginLeft: 6,
|
||||
marginRight: 10,
|
||||
flexGrow: 1,
|
||||
overflow: 'hidden',
|
||||
maxHeight: props.isSelected ? 'none' : 56,
|
||||
lineHeight: 1.4,
|
||||
color: props.isSelected ? colors.light50 : colors.light30,
|
||||
userSelect: 'text',
|
||||
}),
|
||||
);
|
||||
|
||||
const Actions = styled(FlexRow)({
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
color: colors.light20,
|
||||
marginTop: 12,
|
||||
borderTop: `1px solid ${colors.light05}`,
|
||||
paddingTop: 8,
|
||||
});
|
||||
|
||||
const NotificationButton = styled.div({
|
||||
border: `1px solid ${colors.light20}`,
|
||||
color: colors.light50,
|
||||
borderRadius: 4,
|
||||
textAlign: 'center',
|
||||
padding: 4,
|
||||
width: 80,
|
||||
marginBottom: 4,
|
||||
opacity: 0,
|
||||
transition: '0.15s opacity',
|
||||
'[data-role="notification"]:hover &': {
|
||||
opacity: 0.5,
|
||||
},
|
||||
':last-child': {
|
||||
marginBottom: 0,
|
||||
},
|
||||
'[data-role="notification"] &:hover': {
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
type ItemProps = {
|
||||
onHighlight?: () => any;
|
||||
onHidePlugin?: () => any;
|
||||
onHideCategory?: () => any;
|
||||
onClear?: () => any;
|
||||
isSelected?: boolean;
|
||||
inactive?: boolean;
|
||||
selectPlugin?: typeof selectPlugin;
|
||||
logger?: Logger;
|
||||
plugin: PluginDefinition | null | undefined;
|
||||
};
|
||||
|
||||
type ItemState = {
|
||||
reportedNotHelpful: boolean;
|
||||
};
|
||||
|
||||
class NotificationItem extends Component<
|
||||
ItemProps & PluginNotification,
|
||||
ItemState
|
||||
> {
|
||||
constructor(props: ItemProps & PluginNotification) {
|
||||
super(props);
|
||||
const items: Array<ContextMenuItem> = [];
|
||||
if (props.onHidePlugin && props.plugin) {
|
||||
items.push({
|
||||
label: `Hide ${getPluginTitle(props.plugin)} plugin`,
|
||||
click: this.props.onHidePlugin,
|
||||
});
|
||||
}
|
||||
if (props.onHideCategory) {
|
||||
items.push({
|
||||
label: 'Hide Similar',
|
||||
click: this.props.onHideCategory,
|
||||
});
|
||||
}
|
||||
items.push(
|
||||
{label: 'Copy', role: 'copy'},
|
||||
{label: 'Copy All', click: this.copy},
|
||||
{label: 'Create Paste', click: this.createPaste},
|
||||
);
|
||||
|
||||
this.contextMenuItems = items;
|
||||
}
|
||||
|
||||
state = {reportedNotHelpful: false};
|
||||
contextMenuItems: Array<ContextMenuItem>;
|
||||
deepLinkButton = React.createRef();
|
||||
|
||||
createPaste = () => {
|
||||
createPaste(this.getContent());
|
||||
};
|
||||
|
||||
copy = () => getFlipperLib().writeTextToClipboard(this.getContent());
|
||||
|
||||
getContent = (): string =>
|
||||
[
|
||||
this.props.notification.timestamp,
|
||||
`[${this.props.notification.severity}] ${this.props.notification.title}`,
|
||||
this.props.notification.action,
|
||||
this.props.notification.category,
|
||||
textContent(this.props.notification.message),
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join('\n');
|
||||
|
||||
openDeeplink = () => {
|
||||
const {notification, pluginId, client} = this.props;
|
||||
if (this.props.selectPlugin && notification.action) {
|
||||
this.props.selectPlugin({
|
||||
selectedPlugin: pluginId,
|
||||
selectedAppId: client,
|
||||
deepLinkPayload: notification.action,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
reportNotUseful = (e: React.MouseEvent<any>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (this.props.logger) {
|
||||
this.props.logger.track(
|
||||
'usage',
|
||||
'notification-not-useful',
|
||||
this.props.notification,
|
||||
);
|
||||
}
|
||||
this.setState({reportedNotHelpful: true});
|
||||
};
|
||||
|
||||
onHide = (e: React.MouseEvent<any>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (this.props.onHideCategory) {
|
||||
this.props.onHideCategory();
|
||||
} else if (this.props.onHidePlugin) {
|
||||
this.props.onHidePlugin();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
notification,
|
||||
isSelected,
|
||||
inactive,
|
||||
onHidePlugin,
|
||||
onHideCategory,
|
||||
plugin,
|
||||
} = this.props;
|
||||
const {action} = notification;
|
||||
|
||||
return (
|
||||
<ContextMenu<React.ComponentProps<typeof NotificationBox>>
|
||||
data-role="notification"
|
||||
component={NotificationBox}
|
||||
severity={notification.severity}
|
||||
onClick={this.props.onHighlight}
|
||||
isSelected={isSelected}
|
||||
inactive={inactive}
|
||||
items={this.contextMenuItems}>
|
||||
<Glyph name={(plugin ? plugin.icon : 'bell') || 'bell'} size={12} />
|
||||
<NotificationContent isSelected={isSelected}>
|
||||
<Title>{notification.title}</Title>
|
||||
{notification.message}
|
||||
{!inactive &&
|
||||
isSelected &&
|
||||
plugin &&
|
||||
(action || onHidePlugin || onHideCategory) && (
|
||||
<Actions>
|
||||
<FlexRow>
|
||||
{action && (
|
||||
<Button onClick={this.openDeeplink}>
|
||||
Open in {getPluginTitle(plugin)}
|
||||
</Button>
|
||||
)}
|
||||
<ButtonGroup>
|
||||
{onHideCategory && (
|
||||
<Button onClick={onHideCategory}>Hide similar</Button>
|
||||
)}
|
||||
{onHidePlugin && (
|
||||
<Button onClick={onHidePlugin}>
|
||||
Hide {getPluginTitle(plugin)}
|
||||
</Button>
|
||||
)}
|
||||
</ButtonGroup>
|
||||
</FlexRow>
|
||||
<span>
|
||||
{notification.timestamp
|
||||
? new Date(notification.timestamp).toTimeString()
|
||||
: ''}
|
||||
</span>
|
||||
</Actions>
|
||||
)}
|
||||
</NotificationContent>
|
||||
{action && !inactive && !isSelected && (
|
||||
<FlexColumn style={{alignSelf: 'center'}}>
|
||||
{action && (
|
||||
<NotificationButton onClick={this.openDeeplink}>
|
||||
Open
|
||||
</NotificationButton>
|
||||
)}
|
||||
{this.state.reportedNotHelpful ? (
|
||||
<NotificationButton onClick={this.onHide}>
|
||||
Hide
|
||||
</NotificationButton>
|
||||
) : (
|
||||
<NotificationButton onClick={this.reportNotUseful}>
|
||||
Not helpful
|
||||
</NotificationButton>
|
||||
)}
|
||||
</FlexColumn>
|
||||
)}
|
||||
</ContextMenu>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user