From afd7634fd6465528085fe36f7dce624831d63376 Mon Sep 17 00:00:00 2001 From: Chaiwat Ekkaewnumchai Date: Wed, 21 Aug 2019 08:48:25 -0700 Subject: [PATCH] Add Button to Expand or Collapse Left Panel Summary: - Add `show more` and `show less` button to expand and collapse - The element to show depends on its usage rank from Flipper dashboard (manually copied) Reviewed By: danielbuechele Differential Revision: D16917952 fbshipit-source-id: fc37d5c640be33794694e302341fa08849b8f97f --- src/Client.tsx | 2 ++ src/chrome/MainSidebar.tsx | 21 +++++++++++++++++- src/fb-stubs/pluginUsage.tsx | 42 ++++++++++++++++++++++++++++++++++++ src/reducers/connections.tsx | 22 +++++++++++++++++++ 4 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 src/fb-stubs/pluginUsage.tsx diff --git a/src/Client.tsx b/src/Client.tsx index 20c8558db..559655eb8 100644 --- a/src/Client.tsx +++ b/src/Client.tsx @@ -100,6 +100,7 @@ export default class Client extends EventEmitter { sdkVersion: number; messageIdCounter: number; plugins: Plugins; + showAllPlugins: boolean; connection: RSocketClientSocket | null | undefined; responder: Partial>; store: Store; @@ -130,6 +131,7 @@ 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; diff --git a/src/chrome/MainSidebar.tsx b/src/chrome/MainSidebar.tsx index a80741d8f..5ae699098 100644 --- a/src/chrome/MainSidebar.tsx +++ b/src/chrome/MainSidebar.tsx @@ -13,6 +13,7 @@ import {FlipperBasePlugin} from '../plugin'; import {PluginNotification} from '../reducers/notifications'; import {ActiveSheet} from '../reducers/application'; import {State as Store} from '../reducers'; +import {isTopUsedPlugin} from '../fb-stubs/pluginUsage'; import { Sidebar, @@ -30,7 +31,7 @@ import { } from 'flipper'; import React, {Component, PureComponent} from 'react'; import NotificationsHub from '../NotificationsHub'; -import {selectPlugin} from '../reducers/connections'; +import {selectPlugin, showMoreOrLessPlugins} from '../reducers/connections'; import {setActiveSheet} from '../reducers/application'; import UserAccount from './UserAccount'; import {connect} from 'react-redux'; @@ -116,6 +117,13 @@ const PluginDebugger = styled(FlexBox)(props => ({ textOverflow: 'ellipsis', })); +const PluginShowMoreOrLess = styled(ListItem)({ + color: colors.blue, + fontSize: 10, + lineHeight: '10px', + paddingBottom: 5, +}); + function PluginIcon({ isActive, backgroundColor, @@ -214,6 +222,8 @@ type DispatchFromProps = { }) => void; setActiveSheet: (activeSheet: ActiveSheet) => void; + + showMoreOrLessPlugins: (payload: string) => void; }; type Props = OwnProps & StateFromProps & DispatchFromProps; @@ -310,6 +320,10 @@ class MainSidebar extends PureComponent { (p: typeof FlipperDevicePlugin) => client.plugins.indexOf(p.id) > -1, ) + .filter( + (p: typeof FlipperDevicePlugin) => + client.showAllPlugins || isTopUsedPlugin(p.title, 5), + ) .sort(byPluginNameOrId) .map((plugin: typeof FlipperDevicePlugin) => ( { app={client.query.app} /> ))} + this.props.showMoreOrLessPlugins(client.id)}> + {client.showAllPlugins ? 'Show less' : 'Show more'} + ))} {uninitializedClients.map(entry => ( @@ -389,5 +407,6 @@ export default connect( { selectPlugin, setActiveSheet, + showMoreOrLessPlugins, }, )(MainSidebar); diff --git a/src/fb-stubs/pluginUsage.tsx b/src/fb-stubs/pluginUsage.tsx new file mode 100644 index 000000000..1fa5b79dd --- /dev/null +++ b/src/fb-stubs/pluginUsage.tsx @@ -0,0 +1,42 @@ +/** + * Copyright 2018-present Facebook. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * @format + */ + +// copied from Flipper dashboard +const pluginRanking = [ + 'DeviceLogs', + 'Inspector', + 'Network', + 'AnalyticsLogging', + 'GraphQL', + 'oculus-service-logs', + 'UIPerf', + 'CrashReporter', + 'Msys', + 'React', + 'Databases', + 'notifications', + 'MobileConfig', + 'FunnelLogger', + 'Fresco', + 'MScreen', + 'Preferences', + 'DeviceCPU', + 'Hermesdebugger', + 'vros-event-profiler', + 'Mobileboost', + 'Sections', + 'Composer', + 'Stories', + 'DesignOverlay', +]; + +export function isTopUsedPlugin(pluginName: string, range: number): boolean { + const rank = pluginRanking.findIndex((name: string) => { + return name === pluginName; + }); + return rank >= 0 && rank < range; +} diff --git a/src/reducers/connections.tsx b/src/reducers/connections.tsx index 268454370..a69171253 100644 --- a/src/reducers/connections.tsx +++ b/src/reducers/connections.tsx @@ -92,6 +92,10 @@ export type Action = | { type: 'CLIENT_SETUP_ERROR'; payload: {client: UninitializedClient; error: Error}; + } + | { + type: 'CLIENT_SHOW_MORE_OR_LESS'; + payload: string; }; const DEFAULT_PLUGIN = 'DeviceLogs'; @@ -336,6 +340,19 @@ const reducer = (state: State = INITAL_STATE, action: Action): State => { error: `Client setup error: ${errorMessage}`, }; } + case 'CLIENT_SHOW_MORE_OR_LESS': { + const {payload} = action; + + return { + ...state, + clients: state.clients.map((client: Client) => { + if (client.id === payload) { + client.showAllPlugins = !client.showAllPlugins; + } + return client; + }), + }; + } default: return state; } @@ -382,6 +399,11 @@ export const selectPlugin = (payload: { payload, }); +export const showMoreOrLessPlugins = (payload: string): Action => ({ + type: 'CLIENT_SHOW_MORE_OR_LESS', + payload, +}); + export const userPreferredPlugin = (payload: string): Action => ({ type: 'SELECT_USER_PREFERRED_PLUGIN', payload,