From b45a38390b5a9622b597b2a0b0d72e60719edf5d Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Fri, 31 Jan 2020 04:23:11 -0800 Subject: [PATCH] Remove old navigation from sidebar Summary: Remove the old sidebar, since the new one has been rolled out fully Reviewed By: jknoxville Differential Revision: D19659945 fbshipit-source-id: d1592df98fe69ef07d88d3a40790768dee3ab11c --- src/App.tsx | 6 +- src/chrome/mainsidebar/MainSidebar.tsx | 439 ------------------------ src/chrome/mainsidebar/sidebarUtils.tsx | 18 +- 3 files changed, 3 insertions(+), 460 deletions(-) delete mode 100644 src/chrome/mainsidebar/MainSidebar.tsx diff --git a/src/App.tsx b/src/App.tsx index a0b7ddae4..308591811 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,7 +11,6 @@ import React from 'react'; import {FlexColumn, FlexRow} from 'flipper'; import {connect} from 'react-redux'; import TitleBar from './chrome/TitleBar'; -import MainSidebar from './chrome/mainsidebar/MainSidebar'; import MainSidebar2 from './chrome/mainsidebar/MainSidebar2'; import BugReporterDialog from './chrome/BugReporterDialog'; import ErrorBar from './chrome/ErrorBar'; @@ -46,7 +45,6 @@ import PluginManager from './chrome/PluginManager'; import StatusBar from './chrome/StatusBar'; import SettingsSheet from './chrome/SettingsSheet'; import DoctorSheet from './chrome/DoctorSheet'; -import GK from './fb-stubs/GK'; const version = remote.app.getVersion(); @@ -135,7 +133,6 @@ export class App extends React.Component { }; render() { - const useNewSidebar = GK.get('flipper_sidebar2'); return ( @@ -143,8 +140,7 @@ export class App extends React.Component { {this.getSheet} - {this.props.leftSidebarVisible && - (useNewSidebar ? : )} + {this.props.leftSidebarVisible && } {this.props.staticView != null ? ( React.createElement(this.props.staticView, { logger: this.props.logger, diff --git a/src/chrome/mainsidebar/MainSidebar.tsx b/src/chrome/mainsidebar/MainSidebar.tsx deleted file mode 100644 index 351dca686..000000000 --- a/src/chrome/mainsidebar/MainSidebar.tsx +++ /dev/null @@ -1,439 +0,0 @@ -/** - * 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 BaseDevice from '../../devices/BaseDevice'; -import Client from '../../Client'; -import {UninitializedClient} from '../../UninitializedClient'; -import {sortPluginsByName} from '../../utils/pluginUtils'; -import {PluginNotification} from '../../reducers/notifications'; -import {ActiveSheet} from '../../reducers/application'; -import {State as Store} from '../../reducers'; -import { - Sidebar, - colors, - Glyph, - styled, - GK, - FlipperPlugin, - FlipperDevicePlugin, - Button, - ArchivedDevice, - SmallText, - Info, -} from 'flipper'; -import React, {PureComponent, Fragment} from 'react'; -import { - selectPlugin, - starPlugin, - StaticView, - setStaticView, - selectClient, - getAvailableClients, - getClientById, -} from '../../reducers/connections'; -import {setActiveSheet} from '../../reducers/application'; -import {connect} from 'react-redux'; -import SupportRequestFormManager from '../../fb-stubs/SupportRequestFormManager'; -import SupportRequestDetails from '../../fb-stubs/SupportRequestDetails'; -import MainSidebarUtils from './MainSidebarUtilsSection'; -import { - ListItem, - isStaticViewActive, - FlipperPlugins, - PluginsByCategory, - PluginName, - PluginIcon, - Plugins, - ErrorIndicator, - Spinner, - CategoryName, - PluginSidebarListItem, - NoDevices, - getFavoritePlugins, -} from './sidebarUtils'; - -const SidebarButton = styled(Button)<{small?: boolean}>(({small}) => ({ - fontWeight: 'bold', - fontSize: small ? 11 : 14, - width: '100%', - overflow: 'hidden', - marginTop: small ? 0 : 20, - pointer: 'cursor', - border: 'none', - background: 'none', - padding: 0, - justifyContent: 'left', - whiteSpace: 'nowrap', -})); - -type OwnProps = {}; - -type StateFromProps = { - numNotifications: number; - windowIsFocused: boolean; - selectedDevice: BaseDevice | null | undefined; - staticView: StaticView; - selectedPlugin: string | null | undefined; - selectedApp: string | null | undefined; - userStarredPlugins: Store['connections']['userStarredPlugins']; - clients: Array; - uninitializedClients: Array<{ - client: UninitializedClient; - deviceId?: string; - errorMessage?: string; - }>; - devicePlugins: Map; - clientPlugins: Map; -}; - -type DispatchFromProps = { - selectPlugin: (payload: { - selectedPlugin: string | null; - selectedApp: string | null; - deepLinkPayload: string | null; - selectedDevice: BaseDevice; - }) => void; - selectClient: typeof selectClient; - setActiveSheet: (activeSheet: ActiveSheet) => void; - setStaticView: (payload: StaticView) => void; - starPlugin: typeof starPlugin; -}; - -type Props = OwnProps & StateFromProps & DispatchFromProps; -type State = { - showAllPlugins: boolean; -}; - -class MainSidebar extends PureComponent { - state: State = { - showAllPlugins: false, - }; - - render() { - const { - selectedDevice, - selectClient, - selectedPlugin, - selectedApp, - selectPlugin, - uninitializedClients, - } = this.props; - const clients = getAvailableClients(selectedDevice, this.props.clients); - const client: Client | undefined = getClientById(clients, selectedApp); - - return ( - - - {selectedDevice ? ( - <> - - {selectedDevice.title} - - {this.showArchivedDeviceDetails(selectedDevice)} - {selectedDevice.devicePlugins.map(pluginName => { - const plugin = this.props.devicePlugins.get(pluginName)!; - return ( - - selectPlugin({ - selectedPlugin: plugin.id, - selectedApp: null, - deepLinkPayload: null, - selectedDevice, - }) - } - plugin={plugin} - /> - ); - })} - - ({ - checked: client === c, - label: c.query.app, - type: 'checkbox', - click: () => selectClient(c.id), - }))}> - {clients.length === 0 ? ( - <> - - No clients connected - - ) : !client ? ( - 'Select client' - ) : ( - <> - {client.query.app} - - - )} - - - {this.renderClientPlugins(selectedDevice, client)} - {uninitializedClients.map(entry => ( - - {entry.client.appName} - {entry.errorMessage ? ( - - ) : ( - - )} - - ))} - - ) : ( - - )} - - - - ); - } - - showArchivedDeviceDetails(selectedDevice: BaseDevice) { - if (!selectedDevice.isArchived || !selectedDevice.source) { - return null; - } - const {staticView, setStaticView} = this.props; - const supportRequestDetailsactive = isStaticViewActive( - staticView, - SupportRequestDetails, - ); - const showSupportForm = - GK.get('support_requests_v2') || - isStaticViewActive(staticView, SupportRequestFormManager); - return ( - <> - - - {selectedDevice.source ? 'Imported device' : 'Archived device'} - - - {showSupportForm && - (selectedDevice as ArchivedDevice).supportRequestDetails && ( - setStaticView(SupportRequestDetails)}> - - - Support Request Details - - - )} - - ); - } - - renderPluginsByCategory( - client: Client, - plugins: FlipperPlugins, - starred: boolean, - onFavorite: (pluginId: string) => void, - ) { - const { - selectedPlugin, - selectedApp, - selectPlugin, - selectedDevice, - } = this.props; - return groupPluginsByCategory(plugins).map(([category, plugins]) => ( - - {category && ( - - {category} - - )} - {plugins.map(plugin => ( - - selectPlugin({ - selectedPlugin: plugin.id, - selectedApp: client.id, - deepLinkPayload: null, - selectedDevice: selectedDevice!, - }) - } - plugin={plugin} - app={client.query.app} - onFavorite={() => onFavorite(plugin.id)} - starred={starred} - /> - ))} - - )); - } - - renderClientPlugins(device: BaseDevice, client?: Client) { - if (!client) { - return null; - } - const onFavorite = (plugin: string) => { - this.props.starPlugin({ - selectedApp: client.query.app, - selectedPlugin: plugin, - }); - }; - const allPlugins = Array.from(this.props.clientPlugins.values()).filter( - (p: typeof FlipperPlugin) => client.plugins.indexOf(p.id) > -1, - ); - const favoritePlugins: FlipperPlugins = getFavoritePlugins( - device, - client, - allPlugins, - this.props.userStarredPlugins[client.query.app], - true, - ); - const showAllPlugins = - this.state.showAllPlugins || - favoritePlugins.length === 0 || - // If the plugin is part of the hidden section, make sure sidebar is expanded - (client.plugins.includes(this.props.selectedPlugin!) && - !favoritePlugins.find( - plugin => plugin.id === this.props.selectedPlugin, - )); - return ( - <> - {favoritePlugins.length === 0 ? ( - - No plugins enabled - - ) : ( - <> - {this.renderPluginsByCategory( - client, - favoritePlugins, - true, - onFavorite, - )} - - {favoritePlugins.length === allPlugins.length ? null : ( - - this.setState(state => ({ - ...state, - showAllPlugins: !state.showAllPlugins, - })) - }> - {showAllPlugins ? 'Show less' : 'Show more'} - - - )} - - - )} -
- {showAllPlugins - ? this.renderPluginsByCategory( - client, - getFavoritePlugins( - device, - client, - allPlugins, - this.props.userStarredPlugins[client.query.app], - false, - ), - false, - onFavorite, - ) - : null} -
- - ); - } -} - -function groupPluginsByCategory(plugins: FlipperPlugins): PluginsByCategory { - const sortedPlugins = plugins.slice().sort(sortPluginsByName); - const byCategory: {[cat: string]: FlipperPlugins} = {}; - const res: PluginsByCategory = []; - sortedPlugins.forEach(plugin => { - const category = plugin.category || ''; - (byCategory[category] || (byCategory[category] = [])).push(plugin); - }); - // Sort categories - Object.keys(byCategory) - .sort() - .forEach(category => { - res.push([category, byCategory[category]]); - }); - return res; -} - -export default connect( - ({ - application: {windowIsFocused}, - connections: { - selectedDevice, - selectedPlugin, - selectedApp, - userStarredPlugins, - clients, - uninitializedClients, - staticView, - }, - notifications: {activeNotifications, blacklistedPlugins}, - plugins: {devicePlugins, clientPlugins}, - }) => ({ - numNotifications: (() => { - const blacklist = new Set(blacklistedPlugins); - return activeNotifications.filter( - (n: PluginNotification) => !blacklist.has(n.pluginId), - ).length; - })(), - windowIsFocused, - selectedDevice, - staticView, - selectedPlugin, - selectedApp, - userStarredPlugins, - clients, - uninitializedClients, - devicePlugins, - clientPlugins, - }), - { - selectPlugin, - selectClient, - setStaticView, - setActiveSheet, - starPlugin, - }, -)(MainSidebar); diff --git a/src/chrome/mainsidebar/sidebarUtils.tsx b/src/chrome/mainsidebar/sidebarUtils.tsx index 007ace157..2b60a0ed7 100644 --- a/src/chrome/mainsidebar/sidebarUtils.tsx +++ b/src/chrome/mainsidebar/sidebarUtils.tsx @@ -16,7 +16,6 @@ import { styled, FlipperPlugin, FlexColumn, - LoadingIndicator, FlipperBasePlugin, ToggleButton, brandColors, @@ -24,8 +23,8 @@ import { Heading, Client, BaseDevice, + StaticView, } from 'flipper'; -import {StaticView} from '../../reducers/connections'; import {BackgroundColorProperty} from 'csstype'; import {getPluginTitle} from '../../utils/pluginUtils'; @@ -71,7 +70,7 @@ export function PluginIcon({ ); } -export const PluginShape = styled(FlexBox)<{ +const PluginShape = styled(FlexBox)<{ backgroundColor?: BackgroundColorProperty; }>(({backgroundColor}) => ({ marginRight: 8, @@ -131,19 +130,6 @@ export const Plugins = styled(FlexColumn)({ overflow: 'auto', }); -export const Spinner = centerInSidebar(LoadingIndicator); - -export const ErrorIndicator = centerInSidebar(Glyph); - -export function centerInSidebar(component: any) { - return styled(component)({ - marginTop: '10px', - marginBottom: '10px', - marginLeft: 'auto', - marginRight: 'auto', - }); -} - export const PluginSidebarListItem: React.FC<{ onClick: () => void; isActive: boolean;