Introduce favorite plugins
Summary: This diff lands improved sidebar navigation. The old functionality to order plugins based on last-recently-used, and cropping at 5 items has been removed. Instead, items can be starred and their position will be fixed. Together with the app switcher introduced this should lead to a cleaner, stabler, and more customizable UI. Reviewed By: jknoxville Differential Revision: D18299401 fbshipit-source-id: 29b7eb3a4130933c637f7c81834558bf738d5bf0
This commit is contained in:
Michel Weststrate
committed by
Facebook Github Bot
Facebook Github Bot
parent
969a857fae
commit
3cee927674
@@ -22,7 +22,6 @@ import {registerPlugins} from './reducers/plugins';
|
||||
import createTableNativePlugin from './plugins/TableNativePlugin';
|
||||
import EventEmitter from 'events';
|
||||
import invariant from 'invariant';
|
||||
import {Responder} from 'rsocket-types/ReactiveSocketTypes';
|
||||
|
||||
type Plugins = Array<string>;
|
||||
|
||||
@@ -98,11 +97,6 @@ const handleError = (
|
||||
}
|
||||
};
|
||||
|
||||
export const MAX_MINIMUM_PLUGINS = 5;
|
||||
export const SHOW_REMAINING_PLUGIN_IF_LESS_THAN = 3;
|
||||
export const SAVED_PLUGINS_COUNT =
|
||||
MAX_MINIMUM_PLUGINS + SHOW_REMAINING_PLUGIN_IF_LESS_THAN;
|
||||
|
||||
export default class Client extends EventEmitter {
|
||||
app: App | undefined;
|
||||
connected: boolean;
|
||||
@@ -111,8 +105,6 @@ export default class Client extends EventEmitter {
|
||||
sdkVersion: number;
|
||||
messageIdCounter: number;
|
||||
plugins: Plugins;
|
||||
lessPlugins: Plugins | undefined;
|
||||
showAllPlugins: boolean;
|
||||
connection: RSocketClientSocket<any, any> | null | undefined;
|
||||
store: Store;
|
||||
activePlugins: Set<string>;
|
||||
@@ -146,7 +138,6 @@ export default class Client extends EventEmitter {
|
||||
super();
|
||||
this.connected = true;
|
||||
this.plugins = plugins ? plugins : [];
|
||||
this.showAllPlugins = false;
|
||||
this.connection = conn;
|
||||
this.id = id;
|
||||
this.query = query;
|
||||
@@ -188,29 +179,6 @@ export default class Client extends EventEmitter {
|
||||
}
|
||||
}
|
||||
|
||||
/// Sort plugins by LRU order stored in lessPlugins; if not, sort by alphabet
|
||||
byClientLRU(
|
||||
pluginsCount: number,
|
||||
a: typeof FlipperPlugin,
|
||||
b: typeof FlipperPlugin,
|
||||
): number {
|
||||
// Sanity check
|
||||
if (this.lessPlugins != null) {
|
||||
const showPluginsCount =
|
||||
pluginsCount >= MAX_MINIMUM_PLUGINS + SHOW_REMAINING_PLUGIN_IF_LESS_THAN
|
||||
? MAX_MINIMUM_PLUGINS
|
||||
: pluginsCount;
|
||||
let idxA = this.lessPlugins.indexOf(a.id);
|
||||
idxA = idxA < 0 || idxA >= showPluginsCount ? showPluginsCount : idxA;
|
||||
let idxB = this.lessPlugins.indexOf(b.id);
|
||||
idxB = idxB < 0 || idxB >= showPluginsCount ? showPluginsCount : idxB;
|
||||
if (idxA !== idxB) {
|
||||
return idxA > idxB ? 1 : -1;
|
||||
}
|
||||
}
|
||||
return (a.title || a.id) > (b.title || b.id) ? 1 : -1;
|
||||
}
|
||||
|
||||
/* All clients should have a corresponding Device in the store.
|
||||
However, clients can connect before a device is registered, so wait a
|
||||
while for the device to be registered if it isn't already. */
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
* @format
|
||||
*/
|
||||
|
||||
import {styled, colors} from 'flipper';
|
||||
import {styled, colors, Glyph} from 'flipper';
|
||||
import React, {useState, memo} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {FlipperError, dismissError} from '../reducers/connections';
|
||||
@@ -51,7 +51,13 @@ const ErrorBar = memo(function ErrorBar(props: Props) {
|
||||
<DismissAllErrors
|
||||
onClick={() => setCollapsed(c => !c)}
|
||||
title="Show / hide errors">
|
||||
{collapsed ? `▼ ${errorCount}` : '▲'}
|
||||
<Glyph
|
||||
color={colors.white}
|
||||
size={8}
|
||||
name={collapsed ? 'chevron-down' : 'chevron-up'}
|
||||
style={{marginRight: 4}}
|
||||
/>
|
||||
{collapsed && errorCount}
|
||||
</DismissAllErrors>
|
||||
</ErrorBarContainer>
|
||||
);
|
||||
|
||||
@@ -29,12 +29,13 @@ import {
|
||||
FlipperDevicePlugin,
|
||||
LoadingIndicator,
|
||||
Button,
|
||||
StarButton,
|
||||
} from 'flipper';
|
||||
import React, {Component, PureComponent, Fragment} from 'react';
|
||||
import NotificationsHub from '../NotificationsHub';
|
||||
import {
|
||||
selectPlugin,
|
||||
showMoreOrLessPlugins,
|
||||
starPlugin,
|
||||
StaticView,
|
||||
setStaticView,
|
||||
} from '../reducers/connections';
|
||||
@@ -42,13 +43,12 @@ import {setActiveSheet} from '../reducers/application';
|
||||
import UserAccount from './UserAccount';
|
||||
import {connect} from 'react-redux';
|
||||
import {BackgroundColorProperty} from 'csstype';
|
||||
import {
|
||||
MAX_MINIMUM_PLUGINS,
|
||||
SHOW_REMAINING_PLUGIN_IF_LESS_THAN,
|
||||
} from '../Client';
|
||||
import {StyledOtherComponent} from 'create-emotion-styled';
|
||||
import SupportRequestFormManager from '../fb-stubs/SupportRequestFormManager';
|
||||
|
||||
type FlipperPlugins = (typeof FlipperPlugin)[];
|
||||
type PluginsByCategory = [string, FlipperPlugins][];
|
||||
|
||||
const ListItem = styled('div')(({active}: {active?: boolean}) => ({
|
||||
paddingLeft: 10,
|
||||
display: 'flex',
|
||||
@@ -64,19 +64,18 @@ const ListItem = styled('div')(({active}: {active?: boolean}) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const SidebarHeader = styled(FlexBox)({
|
||||
display: 'block',
|
||||
alignItems: 'center',
|
||||
padding: 3,
|
||||
color: colors.macOSSidebarSectionTitle,
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
marginLeft: 7,
|
||||
textOverflow: 'ellipsis',
|
||||
const SidebarButton = styled(Button)(({small}: {small?: boolean}) => ({
|
||||
fontWeight: 'bold',
|
||||
fontSize: small ? 11 : 14,
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
flexShrink: 0,
|
||||
});
|
||||
marginTop: small ? 0 : 20,
|
||||
pointer: 'cursor',
|
||||
border: 'none',
|
||||
background: 'none',
|
||||
padding: 0,
|
||||
justifyContent: 'left',
|
||||
}));
|
||||
|
||||
const PluginShape = styled(FlexBox)(
|
||||
({backgroundColor}: {backgroundColor?: BackgroundColorProperty}) => ({
|
||||
@@ -130,23 +129,6 @@ const Plugins = styled(FlexColumn)({
|
||||
overflow: 'auto',
|
||||
});
|
||||
|
||||
const PluginDebugger = styled(FlexBox)({
|
||||
color: colors.blackAlpha50,
|
||||
alignItems: 'center',
|
||||
padding: 10,
|
||||
flexShrink: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
});
|
||||
|
||||
const PluginShowMoreOrLess = styled(ListItem)({
|
||||
color: colors.blue,
|
||||
fontSize: 10,
|
||||
lineHeight: '10px',
|
||||
paddingBottom: 5,
|
||||
});
|
||||
|
||||
function PluginIcon({
|
||||
isActive,
|
||||
backgroundColor,
|
||||
@@ -170,9 +152,13 @@ class PluginSidebarListItem extends Component<{
|
||||
isActive: boolean;
|
||||
plugin: typeof FlipperBasePlugin;
|
||||
app?: string | null | undefined;
|
||||
helpRef?: any;
|
||||
provided?: any;
|
||||
onFavorite?: () => void;
|
||||
starred?: boolean;
|
||||
}> {
|
||||
render() {
|
||||
const {isActive, plugin} = this.props;
|
||||
const {isActive, plugin, onFavorite, starred} = this.props;
|
||||
const app = this.props.app || 'Facebook';
|
||||
let iconColor: string | undefined = (brandColors as any)[app];
|
||||
|
||||
@@ -201,6 +187,9 @@ class PluginSidebarListItem extends Component<{
|
||||
color={colors.white}
|
||||
/>
|
||||
<PluginName>{plugin.title || plugin.id}</PluginName>
|
||||
{starred !== undefined && (
|
||||
<StarButton onStar={onFavorite!} starred={starred} />
|
||||
)}
|
||||
</ListItem>
|
||||
);
|
||||
}
|
||||
@@ -230,6 +219,7 @@ type StateFromProps = {
|
||||
staticView: StaticView;
|
||||
selectedPlugin: string | null | undefined;
|
||||
selectedApp: string | null | undefined;
|
||||
userStarredPlugins: Store['connections']['userStarredPlugins'];
|
||||
clients: Array<Client>;
|
||||
uninitializedClients: Array<{
|
||||
client: UninitializedClient;
|
||||
@@ -248,16 +238,21 @@ type DispatchFromProps = {
|
||||
}) => void;
|
||||
setActiveSheet: (activeSheet: ActiveSheet) => void;
|
||||
setStaticView: (payload: StaticView) => void;
|
||||
showMoreOrLessPlugins: (payload: string) => void;
|
||||
starPlugin: typeof starPlugin;
|
||||
};
|
||||
|
||||
type Props = OwnProps & StateFromProps & DispatchFromProps;
|
||||
type State = {showSupportForm: boolean; selectedClientIndex: number};
|
||||
type State = {
|
||||
showSupportForm: boolean;
|
||||
selectedClientIndex: number;
|
||||
showAllPlugins: boolean;
|
||||
};
|
||||
class MainSidebar extends PureComponent<Props, State> {
|
||||
state: State = {
|
||||
showSupportForm: GK.get('flipper_support_requests'),
|
||||
// Not to be confused with selectedApp prop, this one only used to remember the client drowdown selector
|
||||
selectedClientIndex: 0,
|
||||
showAllPlugins: false,
|
||||
};
|
||||
static getDerivedStateFromProps(props: Props, state: State) {
|
||||
if (
|
||||
@@ -297,11 +292,6 @@ class MainSidebar extends PureComponent<Props, State> {
|
||||
const client: Client | null =
|
||||
clients[this.state.selectedClientIndex] || null;
|
||||
|
||||
const byPluginNameOrId = (
|
||||
a: typeof FlipperBasePlugin,
|
||||
b: typeof FlipperBasePlugin,
|
||||
) => ((a.title || a.id) > (b.title || b.id) ? 1 : -1);
|
||||
|
||||
return (
|
||||
<Sidebar
|
||||
position="left"
|
||||
@@ -310,60 +300,15 @@ class MainSidebar extends PureComponent<Props, State> {
|
||||
process.platform === 'darwin' && windowIsFocused ? 'transparent' : ''
|
||||
}>
|
||||
<Plugins>
|
||||
{!GK.get('flipper_disable_notifications') && (
|
||||
<ListItem
|
||||
active={selectedPlugin === 'notifications'}
|
||||
onClick={() =>
|
||||
selectPlugin({
|
||||
selectedPlugin: 'notifications',
|
||||
selectedApp: null,
|
||||
deepLinkPayload: null,
|
||||
})
|
||||
}>
|
||||
<PluginIcon
|
||||
color={colors.light50}
|
||||
name={
|
||||
numNotifications > 0
|
||||
? NotificationsHub.icon || 'bell'
|
||||
: 'bell-null'
|
||||
}
|
||||
isActive={selectedPlugin === NotificationsHub.id}
|
||||
/>
|
||||
<PluginName
|
||||
count={numNotifications}
|
||||
isActive={selectedPlugin === NotificationsHub.id}>
|
||||
{NotificationsHub.title}
|
||||
</PluginName>
|
||||
</ListItem>
|
||||
)}
|
||||
{this.state.showSupportForm && (
|
||||
<ListItem
|
||||
active={
|
||||
staticView != null && staticView === SupportRequestFormManager
|
||||
}
|
||||
onClick={() => setStaticView(SupportRequestFormManager)}>
|
||||
<PluginIcon
|
||||
color={colors.light50}
|
||||
name={'app-dailies'}
|
||||
isActive={
|
||||
staticView != null && staticView === SupportRequestFormManager
|
||||
}
|
||||
/>
|
||||
<PluginName
|
||||
isActive={
|
||||
staticView != null && staticView === SupportRequestFormManager
|
||||
}>
|
||||
Litho Support Request
|
||||
</PluginName>
|
||||
</ListItem>
|
||||
)}
|
||||
{selectedDevice && (
|
||||
<SidebarHeader>{selectedDevice.title}</SidebarHeader>
|
||||
<ListItem>
|
||||
<SidebarButton>{selectedDevice.title}</SidebarButton>
|
||||
</ListItem>
|
||||
)}
|
||||
{selectedDevice &&
|
||||
Array.from(this.props.devicePlugins.values())
|
||||
.filter(plugin => plugin.supportsDevice(selectedDevice))
|
||||
.sort(byPluginNameOrId)
|
||||
.sort(sortPluginsByName)
|
||||
.map((plugin: typeof FlipperDevicePlugin) => (
|
||||
<PluginSidebarListItem
|
||||
key={plugin.id}
|
||||
@@ -378,128 +323,248 @@ class MainSidebar extends PureComponent<Props, State> {
|
||||
plugin={plugin}
|
||||
/>
|
||||
))}
|
||||
<ListItem style={{marginTop: 20}}>
|
||||
<Button
|
||||
title="Select a client to see available plugins"
|
||||
<ListItem>
|
||||
<SidebarButton
|
||||
title="Select an app to see available plugins"
|
||||
compact={true}
|
||||
dropdown={clients.map((c, index) => ({
|
||||
checked: client === c,
|
||||
label: c.query.app,
|
||||
type: 'checkbox',
|
||||
click: () => this.setState({selectedClientIndex: index}),
|
||||
}))}
|
||||
style={{
|
||||
fontSize: 11,
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{clients.length === 0
|
||||
? '(Not connected to client)'
|
||||
: this.state.selectedClientIndex >= clients.length
|
||||
? '(Select a client)'
|
||||
: client.query.app}{' '}
|
||||
</Button>
|
||||
}))}>
|
||||
{clients.length === 0 ? (
|
||||
'(Not connected to app)'
|
||||
) : this.state.selectedClientIndex >= clients.length ? (
|
||||
'(Select app)'
|
||||
) : (
|
||||
<>
|
||||
{client.query.app}
|
||||
{clients.length > 1 && (
|
||||
<Glyph
|
||||
size={12}
|
||||
name="chevron-down"
|
||||
style={{marginLeft: 8}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</SidebarButton>
|
||||
</ListItem>
|
||||
{this.renderClientPlugins(client)}
|
||||
{uninitializedClients.map(entry => (
|
||||
<React.Fragment key={JSON.stringify(entry.client)}>
|
||||
<SidebarHeader>{entry.client.appName}</SidebarHeader>
|
||||
<ListItem key={JSON.stringify(entry.client)}>
|
||||
{entry.client.appName}
|
||||
{entry.errorMessage ? (
|
||||
<ErrorIndicator name={'mobile-cross'} size={16} />
|
||||
) : (
|
||||
<Spinner size={16} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
</ListItem>
|
||||
))}
|
||||
</Plugins>
|
||||
<PluginDebugger
|
||||
{!GK.get('flipper_disable_notifications') && (
|
||||
<ListItem
|
||||
active={selectedPlugin === 'notifications'}
|
||||
onClick={() =>
|
||||
selectPlugin({
|
||||
selectedPlugin: 'notifications',
|
||||
selectedApp: null,
|
||||
deepLinkPayload: null,
|
||||
})
|
||||
}
|
||||
style={{
|
||||
borderTop: `1px solid ${colors.blackAlpha10}`,
|
||||
}}>
|
||||
<PluginIcon
|
||||
color={colors.light50}
|
||||
name={
|
||||
numNotifications > 0
|
||||
? NotificationsHub.icon || 'bell'
|
||||
: 'bell-null'
|
||||
}
|
||||
isActive={selectedPlugin === NotificationsHub.id}
|
||||
/>
|
||||
<PluginName
|
||||
count={numNotifications}
|
||||
isActive={selectedPlugin === NotificationsHub.id}>
|
||||
{NotificationsHub.title}
|
||||
</PluginName>
|
||||
</ListItem>
|
||||
)}
|
||||
{this.state.showSupportForm && (
|
||||
<ListItem
|
||||
active={
|
||||
staticView != null && staticView === SupportRequestFormManager
|
||||
}
|
||||
onClick={() => setStaticView(SupportRequestFormManager)}>
|
||||
<PluginIcon
|
||||
color={colors.light50}
|
||||
name={'app-dailies'}
|
||||
isActive={
|
||||
staticView != null && staticView === SupportRequestFormManager
|
||||
}
|
||||
/>
|
||||
<PluginName
|
||||
isActive={
|
||||
staticView != null && staticView === SupportRequestFormManager
|
||||
}>
|
||||
Litho Support Request
|
||||
</PluginName>
|
||||
</ListItem>
|
||||
)}
|
||||
<ListItem
|
||||
onClick={() => this.props.setActiveSheet(ACTIVE_SHEET_PLUGINS)}>
|
||||
<Glyph
|
||||
<PluginIcon
|
||||
name="question-circle"
|
||||
size={16}
|
||||
variant="outline"
|
||||
color={colors.blackAlpha30}
|
||||
color={colors.light50}
|
||||
isActive={false}
|
||||
/>
|
||||
Manage Plugins...
|
||||
</PluginDebugger>
|
||||
Manage Plugins
|
||||
</ListItem>
|
||||
{config.showLogin && <UserAccount />}
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
renderPluginsByCategory(
|
||||
client: Client,
|
||||
plugins: FlipperPlugins,
|
||||
starred: boolean,
|
||||
onFavorite: (pluginId: string) => void,
|
||||
) {
|
||||
const {selectedPlugin, selectedApp, selectPlugin} = this.props;
|
||||
return groupPluginsByCategory(plugins).map(([category, plugins]) => (
|
||||
<Fragment key={category}>
|
||||
{category && (
|
||||
<ListItem>
|
||||
<CategoryName>{category}</CategoryName>
|
||||
</ListItem>
|
||||
)}
|
||||
{plugins.map(plugin => (
|
||||
<PluginSidebarListItem
|
||||
key={plugin.id}
|
||||
isActive={plugin.id === selectedPlugin && selectedApp === client.id}
|
||||
onClick={() =>
|
||||
selectPlugin({
|
||||
selectedPlugin: plugin.id,
|
||||
selectedApp: client.id,
|
||||
deepLinkPayload: null,
|
||||
})
|
||||
}
|
||||
plugin={plugin}
|
||||
app={client.query.app}
|
||||
onFavorite={() => onFavorite(plugin.id)}
|
||||
starred={starred}
|
||||
/>
|
||||
))}
|
||||
</Fragment>
|
||||
));
|
||||
}
|
||||
|
||||
renderClientPlugins(client: Client | null) {
|
||||
if (!client) {
|
||||
return null;
|
||||
}
|
||||
const {selectedPlugin, selectedApp, selectPlugin} = this.props;
|
||||
const plugins = Array.from(this.props.clientPlugins.values()).filter(
|
||||
(p: typeof FlipperPlugin) => client.plugins.indexOf(p.id) > -1,
|
||||
const onFavorite = (plugin: string) => {
|
||||
this.props.starPlugin({
|
||||
selectedApp: client.id,
|
||||
selectedPlugin: plugin,
|
||||
});
|
||||
};
|
||||
const allPlugins = Array.from(this.props.clientPlugins.values());
|
||||
const favoritePlugins: FlipperPlugins = getFavoritePlugins(
|
||||
client,
|
||||
allPlugins,
|
||||
this.props.userStarredPlugins,
|
||||
true,
|
||||
);
|
||||
|
||||
const minShowPluginsCount =
|
||||
plugins.length < MAX_MINIMUM_PLUGINS + SHOW_REMAINING_PLUGIN_IF_LESS_THAN
|
||||
? plugins.length
|
||||
: MAX_MINIMUM_PLUGINS;
|
||||
|
||||
return (
|
||||
<React.Fragment key={client.id}>
|
||||
{groupPluginsByCategory(
|
||||
plugins
|
||||
.sort((a: typeof FlipperPlugin, b: typeof FlipperPlugin) =>
|
||||
client.byClientLRU(plugins.length, a, b),
|
||||
)
|
||||
.slice(
|
||||
0,
|
||||
client.showAllPlugins
|
||||
? client.plugins.length
|
||||
: minShowPluginsCount,
|
||||
),
|
||||
).map(([category, plugins]) => (
|
||||
<Fragment key={category}>
|
||||
{category && (
|
||||
<ListItem>
|
||||
<CategoryName>{category}</CategoryName>
|
||||
</ListItem>
|
||||
<>
|
||||
{favoritePlugins.length === 0 ? (
|
||||
<ListItem>
|
||||
<div style={{textAlign: 'center', width: '100%'}}>
|
||||
Star some plugins!
|
||||
<hr style={{width: '100%'}} />
|
||||
</div>
|
||||
</ListItem>
|
||||
) : (
|
||||
<>
|
||||
{this.renderPluginsByCategory(
|
||||
client,
|
||||
favoritePlugins,
|
||||
true,
|
||||
onFavorite,
|
||||
)}
|
||||
{plugins.map(plugin => (
|
||||
<PluginSidebarListItem
|
||||
key={plugin.id}
|
||||
isActive={
|
||||
plugin.id === selectedPlugin && selectedApp === client.id
|
||||
}
|
||||
<ListItem>
|
||||
<SidebarButton
|
||||
small
|
||||
compact
|
||||
onClick={() =>
|
||||
selectPlugin({
|
||||
selectedPlugin: plugin.id,
|
||||
selectedApp: client.id,
|
||||
deepLinkPayload: null,
|
||||
})
|
||||
}
|
||||
plugin={plugin}
|
||||
app={client.query.app}
|
||||
/>
|
||||
))}
|
||||
</Fragment>
|
||||
))}
|
||||
{plugins.length > minShowPluginsCount && (
|
||||
<PluginShowMoreOrLess
|
||||
onClick={() => this.props.showMoreOrLessPlugins(client.id)}>
|
||||
{client.showAllPlugins ? 'Show less' : 'Show more'}
|
||||
</PluginShowMoreOrLess>
|
||||
this.setState(state => ({
|
||||
...state,
|
||||
showAllPlugins: !state.showAllPlugins,
|
||||
}))
|
||||
}>
|
||||
{this.state.showAllPlugins ? 'Show less' : 'Show more'}
|
||||
<Glyph
|
||||
size={8}
|
||||
name={
|
||||
this.state.showAllPlugins ? 'chevron-up' : 'chevron-down'
|
||||
}
|
||||
style={{
|
||||
marginLeft: 4,
|
||||
}}
|
||||
/>
|
||||
</SidebarButton>
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
</React.Fragment>
|
||||
<div
|
||||
style={{
|
||||
flex: 'auto' /*scroll this region, not the entire thing*/,
|
||||
overflow: 'auto',
|
||||
height: 'auto',
|
||||
}}>
|
||||
{this.state.showAllPlugins || favoritePlugins.length === 0
|
||||
? this.renderPluginsByCategory(
|
||||
client,
|
||||
getFavoritePlugins(
|
||||
client,
|
||||
allPlugins,
|
||||
this.props.userStarredPlugins,
|
||||
false,
|
||||
),
|
||||
false,
|
||||
onFavorite,
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
type PluginsByCategory = [string, (typeof FlipperPlugin)[]][];
|
||||
function getFavoritePlugins(
|
||||
client: Client,
|
||||
allPlugins: FlipperPlugins,
|
||||
userStarredPlugins: Props['userStarredPlugins'],
|
||||
favorite: boolean,
|
||||
): FlipperPlugins {
|
||||
const appName = client.id;
|
||||
return allPlugins.filter(plugin => {
|
||||
const idx = userStarredPlugins[appName]
|
||||
? userStarredPlugins[appName].indexOf(plugin.id)
|
||||
: -1;
|
||||
return idx === -1 ? !favorite : favorite;
|
||||
});
|
||||
}
|
||||
|
||||
function groupPluginsByCategory(
|
||||
plugins: (typeof FlipperPlugin)[],
|
||||
): PluginsByCategory {
|
||||
// Pre condition: plugins are already sorted globally
|
||||
const byCategory: {[cat: string]: (typeof FlipperPlugin)[]} = {};
|
||||
function groupPluginsByCategory(plugins: FlipperPlugins): PluginsByCategory {
|
||||
const sortedPlugins = plugins.slice().sort(sortPluginsByName);
|
||||
const byCategory: {[cat: string]: FlipperPlugins} = {};
|
||||
const res: PluginsByCategory = [];
|
||||
plugins.forEach(plugin => {
|
||||
sortedPlugins.forEach(plugin => {
|
||||
const category = plugin.category || '';
|
||||
(byCategory[category] || (byCategory[category] = [])).push(plugin);
|
||||
});
|
||||
@@ -512,6 +577,13 @@ function groupPluginsByCategory(
|
||||
return res;
|
||||
}
|
||||
|
||||
function sortPluginsByName(
|
||||
a: typeof FlipperBasePlugin,
|
||||
b: typeof FlipperBasePlugin,
|
||||
): number {
|
||||
return (a.title || a.id) > (b.title || b.id) ? 1 : -1;
|
||||
}
|
||||
|
||||
export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
|
||||
({
|
||||
application: {windowIsFocused},
|
||||
@@ -519,6 +591,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
|
||||
selectedDevice,
|
||||
selectedPlugin,
|
||||
selectedApp,
|
||||
userStarredPlugins,
|
||||
clients,
|
||||
uninitializedClients,
|
||||
staticView,
|
||||
@@ -537,6 +610,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
|
||||
staticView,
|
||||
selectedPlugin,
|
||||
selectedApp,
|
||||
userStarredPlugins,
|
||||
clients,
|
||||
uninitializedClients,
|
||||
devicePlugins,
|
||||
@@ -546,6 +620,6 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
|
||||
selectPlugin,
|
||||
setStaticView,
|
||||
setActiveSheet,
|
||||
showMoreOrLessPlugins,
|
||||
starPlugin,
|
||||
},
|
||||
)(MainSidebar);
|
||||
|
||||
@@ -14,7 +14,6 @@ import {UninitializedClient} from '../UninitializedClient';
|
||||
import {isEqual} from 'lodash';
|
||||
import iosUtil from '../fb-stubs/iOSContainerUtility';
|
||||
import {performance} from 'perf_hooks';
|
||||
import {SAVED_PLUGINS_COUNT} from '../Client';
|
||||
import isHeadless from '../utils/isHeadless';
|
||||
import {Actions} from '.';
|
||||
const WelcomeScreen = isHeadless()
|
||||
@@ -43,7 +42,7 @@ export type State = {
|
||||
userPreferredDevice: null | string;
|
||||
userPreferredPlugin: null | string;
|
||||
userPreferredApp: null | string;
|
||||
userLRUPlugins: {[key: string]: Array<string>};
|
||||
userStarredPlugins: {[key: string]: Array<string>};
|
||||
errors: FlipperError[];
|
||||
clients: Array<Client>;
|
||||
uninitializedClients: Array<{
|
||||
@@ -116,11 +115,6 @@ export type Action =
|
||||
type: 'CLIENT_SETUP_ERROR';
|
||||
payload: {client: UninitializedClient; error: FlipperError};
|
||||
}
|
||||
| {
|
||||
type: 'CLIENT_SHOW_MORE_OR_LESS';
|
||||
payload: string;
|
||||
}
|
||||
| {type: 'CLEAR_LRU_PLUGINS_HISTORY'}
|
||||
| {
|
||||
type: 'SET_STATIC_VIEW';
|
||||
payload: StaticView;
|
||||
@@ -128,6 +122,13 @@ export type Action =
|
||||
| {
|
||||
type: 'DISMISS_ERROR';
|
||||
payload: number;
|
||||
}
|
||||
| {
|
||||
type: 'STAR_PLUGIN';
|
||||
payload: {
|
||||
selectedPlugin: string;
|
||||
selectedApp: string;
|
||||
};
|
||||
};
|
||||
|
||||
const DEFAULT_PLUGIN = 'DeviceLogs';
|
||||
@@ -141,7 +142,7 @@ const INITAL_STATE: State = {
|
||||
userPreferredDevice: null,
|
||||
userPreferredPlugin: null,
|
||||
userPreferredApp: null,
|
||||
userLRUPlugins: {},
|
||||
userStarredPlugins: {},
|
||||
errors: [],
|
||||
clients: [],
|
||||
uninitializedClients: [],
|
||||
@@ -259,45 +260,43 @@ const reducer = (state: State = INITAL_STATE, action: Actions): State => {
|
||||
}
|
||||
|
||||
const userPreferredApp = selectedApp || state.userPreferredApp;
|
||||
const selectedAppName = extractAppNameFromAppId(userPreferredApp);
|
||||
// Need to recreate an array to make sure that it doesn't refer to the
|
||||
// array that is showed in on the screen and the array that is kept for
|
||||
// least recently used plugins reference
|
||||
const LRUPlugins = [
|
||||
...((selectedAppName && state.userLRUPlugins[selectedAppName]) || []),
|
||||
];
|
||||
const idxLRU =
|
||||
(selectedPlugin && LRUPlugins.indexOf(selectedPlugin)) || -1;
|
||||
if (idxLRU >= 0) {
|
||||
LRUPlugins.splice(idxLRU, 1);
|
||||
}
|
||||
selectedPlugin && LRUPlugins.unshift(selectedPlugin);
|
||||
LRUPlugins.splice(SAVED_PLUGINS_COUNT);
|
||||
return {
|
||||
...state,
|
||||
...payload,
|
||||
staticView: null,
|
||||
userPreferredApp: userPreferredApp,
|
||||
userPreferredPlugin: selectedPlugin,
|
||||
userLRUPlugins: selectedAppName
|
||||
? {
|
||||
...state.userLRUPlugins,
|
||||
[selectedAppName]: LRUPlugins,
|
||||
}
|
||||
: {...state.userLRUPlugins},
|
||||
};
|
||||
}
|
||||
case 'STAR_PLUGIN': {
|
||||
const {selectedPlugin, selectedApp} = action.payload;
|
||||
const starredPluginsForApp = [
|
||||
...(state.userStarredPlugins[selectedApp] || []),
|
||||
];
|
||||
const idx = starredPluginsForApp.indexOf(selectedPlugin);
|
||||
if (idx === -1) {
|
||||
starredPluginsForApp.push(selectedPlugin);
|
||||
} else {
|
||||
starredPluginsForApp.splice(idx, 1);
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
userStarredPlugins: {
|
||||
...state.userStarredPlugins,
|
||||
[selectedApp]: starredPluginsForApp,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
case 'SELECT_USER_PREFERRED_PLUGIN': {
|
||||
const {payload} = action;
|
||||
return {...state, userPreferredPlugin: payload};
|
||||
}
|
||||
case 'NEW_CLIENT': {
|
||||
const {payload} = action;
|
||||
const {userPreferredApp, userPreferredPlugin, userLRUPlugins} = state;
|
||||
const {userPreferredApp, userPreferredPlugin} = state;
|
||||
let {selectedApp, selectedPlugin} = state;
|
||||
|
||||
const appName = extractAppNameFromAppId(payload.id);
|
||||
payload.lessPlugins = (appName && userLRUPlugins[appName]) || [];
|
||||
if (
|
||||
userPreferredApp &&
|
||||
userPreferredPlugin &&
|
||||
@@ -317,10 +316,6 @@ const reducer = (state: State = INITAL_STATE, action: Actions): State => {
|
||||
c.client.appName !== payload.query.app
|
||||
);
|
||||
}),
|
||||
userLRUPlugins: {
|
||||
...state.userLRUPlugins,
|
||||
[payload.id]: payload.lessPlugins,
|
||||
},
|
||||
selectedApp,
|
||||
selectedPlugin,
|
||||
};
|
||||
@@ -420,33 +415,6 @@ const reducer = (state: State = INITAL_STATE, action: Actions): State => {
|
||||
}),
|
||||
};
|
||||
}
|
||||
case 'CLIENT_SHOW_MORE_OR_LESS': {
|
||||
const {payload} = action;
|
||||
const appName = extractAppNameFromAppId(payload);
|
||||
|
||||
return {
|
||||
...state,
|
||||
clients: state.clients.map((client: Client) => {
|
||||
if (appName && extractAppNameFromAppId(client.id) === appName) {
|
||||
client.showAllPlugins = !client.showAllPlugins;
|
||||
client.lessPlugins = state.userLRUPlugins[appName] || [];
|
||||
}
|
||||
return client;
|
||||
}),
|
||||
};
|
||||
}
|
||||
case 'CLEAR_LRU_PLUGINS_HISTORY': {
|
||||
const clearLRUPlugins: {[key: string]: Array<string>} = {};
|
||||
Object.keys(state.userLRUPlugins).forEach((key: string) => {
|
||||
if (key !== null) {
|
||||
clearLRUPlugins[key] = [];
|
||||
}
|
||||
});
|
||||
return {
|
||||
...state,
|
||||
userLRUPlugins: clearLRUPlugins,
|
||||
};
|
||||
}
|
||||
case 'DISMISS_ERROR': {
|
||||
const errors = state.errors.slice();
|
||||
errors.splice(action.payload, 1);
|
||||
@@ -531,8 +499,11 @@ export const selectPlugin = (payload: {
|
||||
payload,
|
||||
});
|
||||
|
||||
export const showMoreOrLessPlugins = (payload: string): Action => ({
|
||||
type: 'CLIENT_SHOW_MORE_OR_LESS',
|
||||
export const starPlugin = (payload: {
|
||||
selectedPlugin: string;
|
||||
selectedApp: string;
|
||||
}): Action => ({
|
||||
type: 'STAR_PLUGIN',
|
||||
payload,
|
||||
});
|
||||
|
||||
|
||||
@@ -96,7 +96,7 @@ export default combineReducers<State, Actions>({
|
||||
'userPreferredDevice',
|
||||
'userPreferredPlugin',
|
||||
'userPreferredApp',
|
||||
'userLRUPlugins',
|
||||
'userStarredPlugins',
|
||||
],
|
||||
},
|
||||
connections,
|
||||
|
||||
@@ -43,12 +43,13 @@ function ColoredIcon(
|
||||
size?: number;
|
||||
className?: string;
|
||||
color?: string;
|
||||
style?: React.CSSProperties;
|
||||
},
|
||||
context: {
|
||||
glyphColor?: string;
|
||||
},
|
||||
) {
|
||||
const {color = context.glyphColor, name, size = 16, src} = props;
|
||||
const {color = context.glyphColor, name, size = 16, src, style} = props;
|
||||
|
||||
const isBlack =
|
||||
color == null ||
|
||||
@@ -63,6 +64,7 @@ function ColoredIcon(
|
||||
src={src}
|
||||
size={size}
|
||||
className={props.className}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
@@ -72,6 +74,7 @@ function ColoredIcon(
|
||||
size={size}
|
||||
src={src}
|
||||
className={props.className}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -87,9 +90,10 @@ export default class Glyph extends React.PureComponent<{
|
||||
variant?: 'filled' | 'outline';
|
||||
className?: string;
|
||||
color?: string;
|
||||
style?: React.CSSProperties;
|
||||
}> {
|
||||
render() {
|
||||
const {name, size = 16, variant, color, className} = this.props;
|
||||
const {name, size = 16, variant, color, className, style} = this.props;
|
||||
|
||||
return (
|
||||
<ColoredIcon
|
||||
@@ -102,6 +106,7 @@ export default class Glyph extends React.PureComponent<{
|
||||
size,
|
||||
typeof window !== 'undefined' ? window.devicePixelRatio : 1,
|
||||
)}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
62
src/ui/components/StarButton.tsx
Normal file
62
src/ui/components/StarButton.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
/**
|
||||
* 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, {useState, useCallback} from 'react';
|
||||
import {colors} from './colors';
|
||||
import Glyph from './Glyph';
|
||||
import styled from 'react-emotion';
|
||||
|
||||
const DownscaledGlyph = styled(Glyph)({
|
||||
maskSize: '12px 12px',
|
||||
WebkitMaskSize: '12px 12px',
|
||||
height: 12,
|
||||
width: 12,
|
||||
});
|
||||
|
||||
export function StarButton({
|
||||
starred,
|
||||
onStar,
|
||||
}: {
|
||||
starred: boolean;
|
||||
onStar: () => void;
|
||||
}) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const handleClick = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onStar();
|
||||
},
|
||||
[onStar],
|
||||
);
|
||||
const handleMouseEnter = useCallback(setHovered.bind(null, true), []);
|
||||
const handleMouseLeave = useCallback(setHovered.bind(null, false), []);
|
||||
return (
|
||||
<button
|
||||
style={{
|
||||
border: 'none',
|
||||
background: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: 0,
|
||||
paddingLeft: 4,
|
||||
flex: 0,
|
||||
}}
|
||||
onClick={handleClick}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}>
|
||||
<DownscaledGlyph
|
||||
size={
|
||||
16 /* the icons used below are not available in smaller sizes :-/ */
|
||||
}
|
||||
name={hovered ? (starred ? 'star-slash' : 'life-event-major') : 'star'}
|
||||
color={hovered ? colors.lemonDark1 : colors.macOSTitleBarIconBlur}
|
||||
variant={hovered || starred ? 'filled' : 'outline'}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -175,3 +175,4 @@ export {InspectorSidebar} from './components/elements-inspector/sidebar';
|
||||
export {Console} from './components/console';
|
||||
|
||||
export {default as Sheet} from './components/Sheet';
|
||||
export {StarButton} from './components/StarButton';
|
||||
|
||||
@@ -24,7 +24,8 @@ const ICONS = {
|
||||
'caution-octagon': [16],
|
||||
'caution-triangle': [16],
|
||||
'chevron-down-outline': [10],
|
||||
'chevron-down': [8],
|
||||
'chevron-down': [8, 12],
|
||||
'chevron-up': [8, 12],
|
||||
'chevron-right': [8],
|
||||
'dots-3-circle-outline': [16],
|
||||
'info-circle': [16],
|
||||
@@ -52,6 +53,8 @@ const ICONS = {
|
||||
rocket: [20],
|
||||
settings: [12],
|
||||
star: [16, 24],
|
||||
'star-slash': [16],
|
||||
'life-event-major': [16],
|
||||
target: [12, 16],
|
||||
tools: [20],
|
||||
};
|
||||
@@ -77,7 +80,12 @@ function buildLocalIconPath(name, size, density) {
|
||||
// $FlowFixMe not using flow in this file
|
||||
function buildIconURL(name, size, density) {
|
||||
const icon = getIconPartsFromName(name);
|
||||
const url = `https://external.xx.fbcdn.net/assets/?name=${icon.trimmedName}&variant=${icon.variant}&size=${size}&set=facebook_icons&density=${density}x`;
|
||||
// eslint-disable-next-line prettier/prettier
|
||||
const url = `https://external.xx.fbcdn.net/assets/?name=${
|
||||
icon.trimmedName
|
||||
}&variant=${
|
||||
icon.variant
|
||||
}&size=${size}&set=facebook_icons&density=${density}x`;
|
||||
if (
|
||||
typeof window !== 'undefined' &&
|
||||
(!ICONS[name] || !ICONS[name].includes(size))
|
||||
|
||||
Reference in New Issue
Block a user