jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert Navigation plugin to Sandy

Browse Source 
Summary:
Converted the Navigation plugin to Sandy, and updated Locations bookmark accordingly.
This is a prerequisite step of supporting the bookmarkswidgetin the new AppInspect tab.

Updated LocationsButton accordingly, and overal simplified implementation a bit; locationsbutton now reuses the logic of the NavigationPlugin, rather than reimplemting it. This reduces code duplication and also makes sure the state between plugin and location button stays in sync.

Made sure that search providers are derived and cached rather than stored, again simplifying logic

That being said, the navigation plugin is buggy, but all these things failed before this diff as well:
* No events happening when using iOS, despite the plugin being enabled. But these seems to be a long time know issue, looks like it was never implemented
* Not sure if the parameterized bookmarks is working correctly
* screenshots not always happening at the right time (but fixed a race condition where the wrong bookmark might get updated)
* Locations button doesn't show up if the navigation plugin is supported but not enabled (will try to fix in next diff)

Would be great if bnelo12 could do some exploratory testing to verify what ought to be working, but currently isn't.

Reviewed By: cekkaewnumchai

Differential Revision: D24860757

fbshipit-source-id: e4b56072de8c42af2ada0f5bb022cb9f8c04bb47
This commit is contained in:
Michel Weststrate
2020-11-12 04:13:16 -08:00
committed by Facebook GitHub Bot
parent ba541e76dc
commit 661bea1d5b
8 changed files with 325 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
desktop/app/src/chrome/LocationsButton.tsx
View File

@@ -7,43 +7,19 @@
* @format
*/
import {Button, styled} from '../ui';
import {connect} from 'react-redux';
import React, {Component} from 'react';
import {State as Store} from '../reducers';
// TODO T71355623
// eslint-disable-next-line flipper/no-relative-imports-across-packages
import {
readBookmarksFromDB,
writeBookmarkToDB,
} from '../../../plugins/navigation/util/indexedDB';
// TODO T71355623
// eslint-disable-next-line flipper/no-relative-imports-across-packages
import {PersistedState as NavPluginState} from '../../../plugins/navigation/types';
import BaseDevice from '../devices/BaseDevice';
import {State as PluginState} from '../reducers/pluginStates';
import React, {useCallback, useEffect} from 'react';
import {platform} from 'os';
import {getPluginKey} from '../utils/pluginUtils';
import {useValue} from 'flipper-plugin';
import {Button, styled} from '../ui';
import {useStore} from '../utils/useStore';
import {useMemoize} from '../utils/useMemoize';
import {State} from '../reducers';
type State = {
bookmarks: Array<Bookmark>;
hasRetrievedBookmarks: boolean;
retreivingBookmarks: boolean;
};
type OwnProps = {};
type StateFromProps = {
currentURI: string | undefined;
selectedDevice: BaseDevice | null | undefined;
};
type DispatchFromProps = {};
type Bookmark = {
uri: string;
commonName: string | null;
};
// TODO T71355623
// eslint-disable-next-line flipper/no-relative-imports-across-packages
import type {NavigationPlugin} from '../../../plugins/navigation/index';
// eslint-disable-next-line flipper/no-relative-imports-across-packages
import type {Bookmark} from '../../../plugins/navigation/types';
const DropdownButton = styled(Button)({
fontSize: 11,
@@ -57,64 +33,81 @@ const shortenText = (text: string, MAX_CHARACTERS = 30): string => {
}
};
type Props = OwnProps & StateFromProps & DispatchFromProps;
class LocationsButton extends Component<Props, State> {
state: State = {
bookmarks: [],
hasRetrievedBookmarks: false,
retreivingBookmarks: false,
};
const NAVIGATION_PLUGIN_ID = 'Navigation';
componentDidMount() {
document.addEventListener('keydown', this.keyDown);
this.updateBookmarks();
export function LocationsButton() {
const navPlugin = useStore(navPluginStateSelector);
return navPlugin ? (
<ActiveLocationsButton navPlugin={navPlugin} />
) : (
<DropdownButton compact={true}>(none)</DropdownButton>
);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.keyDown);
}
function ActiveLocationsButton({navPlugin}: {navPlugin: NavigationPlugin}) {
const currentURI = useValue(navPlugin.currentURI);
const bookmarks = useValue(navPlugin.bookmarks);
goToLocation = (location: string) => {
const {selectedDevice} = this.props;
if (selectedDevice != null) {
selectedDevice.navigateToLocation(location);
}
};
keyDown = (e: KeyboardEvent) => {
const keyDown = useCallback(
(e: KeyboardEvent) => {
if (
((platform() === 'darwin' && e.metaKey) ||
(platform() !== 'darwin' && e.ctrlKey)) &&
/^\d$/.test(e.key) &&
this.state.bookmarks.length >= parseInt(e.key, 10)
bookmarks.size >= parseInt(e.key, 10)
) {
this.goToLocation(this.state.bookmarks[parseInt(e.key, 10) - 1].uri);
navPlugin.navigateTo(
Array.from(bookmarks.values())[parseInt(e.key, 10) - 1].uri,
);
}
},
[bookmarks, navPlugin],
);
useEffect(() => {
document.addEventListener('keydown', keyDown);
return () => {
document.removeEventListener('keydown', keyDown);
};
}, [keyDown]);
updateBookmarks = () => {
readBookmarksFromDB().then((bookmarksMap) => {
const bookmarks: Array<Bookmark> = [];
bookmarksMap.forEach((bookmark: Bookmark) => {
bookmarks.push(bookmark);
});
this.setState({bookmarks});
});
};
const dropdown = useMemoize(computeBookmarkDropdown, [
navPlugin,
bookmarks,
currentURI,
]);
render() {
const {currentURI} = this.props;
const {bookmarks} = this.state;
return (
<DropdownButton compact={true} dropdown={dropdown}>
{(currentURI && shortenText(currentURI)) || '(none)'}
</DropdownButton>
);
}
const dropdown: any[] = [
export function navPluginStateSelector(state: State) {
const {selectedApp, clients} = state.connections;
if (!selectedApp) return undefined;
const client = clients.find((client) => client.id === selectedApp);
if (!client) return undefined;
return client.sandyPluginStates.get(NAVIGATION_PLUGIN_ID)?.instanceApi as
| undefined
| NavigationPlugin;
}
function computeBookmarkDropdown(
navPlugin: NavigationPlugin,
bookmarks: Map<string, Bookmark>,
currentURI: string,
) {
const dropdown: Electron.MenuItemConstructorOptions[] = [
{
label: 'Bookmarks',
enabled: false,
},
...bookmarks.map((bookmark, i) => {
...Array.from(bookmarks.values()).map((bookmark, i) => {
return {
click: () => {
this.goToLocation(bookmark.uri);
navPlugin.navigateTo(bookmark.uri);
},
accelerator: i < 9 ? `CmdOrCtrl+${i + 1}` : undefined,
label: shortenText(
@@ -131,53 +124,14 @@ class LocationsButton extends Component<Props, State> {
{type: 'separator'},
{
label: 'Bookmark Current Location',
click: async () => {
await writeBookmarkToDB({
click: () => {
navPlugin.addBookmark({
uri: currentURI,
commonName: null,
});
this.updateBookmarks();
},
},
);
}
return (
<DropdownButton
onMouseDown={this.updateBookmarks}
compact={true}
dropdown={dropdown}>
{(currentURI && shortenText(currentURI)) || '(none)'}
</DropdownButton>
);
return dropdown;
}
}
const mapStateFromPluginStatesToProps = (
pluginStates: PluginState,
selectedDevice: BaseDevice | null,
selectedApp: string | null,
) => {
const pluginKey = getPluginKey(selectedApp, selectedDevice, 'Navigation');
let currentURI: string | undefined;
if (pluginKey) {
const navPluginState = pluginStates[pluginKey] as
| NavPluginState
| undefined;
currentURI = navPluginState && navPluginState.currentURI;
}
return {
currentURI,
};
};
export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
({connections: {selectedDevice, selectedApp}, pluginStates}) => ({
selectedDevice,
...mapStateFromPluginStatesToProps(
pluginStates,
selectedDevice,
selectedApp,
),
}),
)(LocationsButton);

18
desktop/app/src/chrome/TitleBar.tsx
View File

@@ -31,7 +31,7 @@ import {
import {connect} from 'react-redux';
import RatingButton from './RatingButton';
import DevicesButton from './DevicesButton';
import LocationsButton from './LocationsButton';
import {LocationsButton} from './LocationsButton';
import ScreenCaptureButtons from './ScreenCaptureButtons';
import AutoUpdateVersion from './AutoUpdateVersion';
import UpdateIndicator from './UpdateIndicator';
@@ -45,7 +45,7 @@ import {reportUsage} from '../utils/metrics';
import FpsGraph from './FpsGraph';
import NetworkGraph from './NetworkGraph';
import MetroButton from './MetroButton';
import {getPluginKey} from '../utils/pluginUtils';
import {navPluginStateSelector} from './LocationsButton';
const AppTitleBar = styled(FlexRow)<{focused?: boolean}>(({focused}) => ({
userSelect: 'none',
@@ -228,7 +228,8 @@ class TitleBar extends React.Component<Props, StateFromProps> {
}
export default connect<StateFromProps, DispatchFromProps, OwnProps, State>(
({
(state) => {
const {
application: {
windowIsFocused,
leftSidebarVisible,
@@ -238,15 +239,8 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, State>(
launcherMsg,
share,
},
connections: {selectedDevice, selectedApp},
pluginStates,
}) => {
const navigationPluginKey = getPluginKey(
selectedApp,
selectedDevice,
'Navigation',
);
const navPluginIsActive = !!pluginStates[navigationPluginKey];
} = state;
const navPluginIsActive = !!navPluginStateSelector(state);
return {
windowIsFocused,

4
desktop/flipper-plugin/src/state/atom.tsx
View File

@@ -7,10 +7,12 @@
* @format
*/
import {produce, Draft} from 'immer';
import {produce, Draft, enableMapSet} from 'immer';
import {useState, useEffect} from 'react';
import {getCurrentPluginInstance} from '../plugin/PluginBase';
enableMapSet();
export type Atom<T> = {
get(): T;
set(newValue: T): void;

282
desktop/plugins/navigation/index.tsx
View File

@@ -8,7 +8,7 @@
* @flow strict-local
*/
import {FlipperPlugin, FlexColumn, bufferToBlob} from 'flipper';
import {bufferToBlob} from 'flipper';
import {
BookmarksSidebar,
SaveBookmarkDialog,
@@ -17,218 +17,228 @@ import {
RequiredParametersDialog,
} from './components';
import {
removeBookmark,
removeBookmarkFromDB,
readBookmarksFromDB,
writeBookmarkToDB,
} from './util/indexedDB';
import {
appMatchPatternsToAutoCompleteProvider,
bookmarksToAutoCompleteProvider,
DefaultProvider,
} from './util/autoCompleteProvider';
import {getAppMatchPatterns} from './util/appMatchPatterns';
import {getRequiredParameters, filterOptionalParameters} from './util/uri';
import {
State,
PersistedState,
Bookmark,
NavigationEvent,
AppMatchPattern,
URI,
RawNavigationEvent,
} from './types';
import React from 'react';
import React, {useMemo} from 'react';
import {
PluginClient,
createState,
useValue,
usePlugin,
Layout,
} from 'flipper-plugin';
export default class extends FlipperPlugin<State, any, PersistedState> {
static defaultPersistedState = {
navigationEvents: [],
bookmarks: new Map<string, Bookmark>(),
currentURI: '',
bookmarksProvider: DefaultProvider(),
appMatchPatterns: [],
appMatchPatternsProvider: DefaultProvider(),
export type State = {
shouldShowSaveBookmarkDialog: boolean;
shouldShowURIErrorDialog: boolean;
saveBookmarkURI: URI | null;
requiredParameters: Array<string>;
};
state = {
shouldShowSaveBookmarkDialog: false,
saveBookmarkURI: null as string | null,
shouldShowURIErrorDialog: false,
requiredParameters: [],
type Events = {
nav_event: RawNavigationEvent;
};
static persistedStateReducer = (
persistedState: PersistedState,
method: string,
payload: any,
) => {
switch (method) {
case 'nav_event':
type Methods = {
navigate_to(params: {url: string}): Promise<void>;
};
export type NavigationPlugin = ReturnType<typeof plugin>;
export function plugin(client: PluginClient<Events, Methods>) {
const bookmarks = createState(new Map<URI, Bookmark>(), {
persist: 'bookmarks',
});
const navigationEvents = createState<NavigationEvent[]>([], {
persist: 'navigationEvents',
});
const appMatchPatterns = createState<AppMatchPattern[]>([], {
persist: 'appMatchPatterns',
});
const currentURI = createState('');
const shouldShowURIErrorDialog = createState(false);
const requiredParameters = createState<string[]>([]);
const shouldShowSaveBookmarkDialog = createState(false);
const saveBookmarkURI = createState<null | string>(null);
client.onMessage('nav_event', async (payload) => {
const navigationEvent: NavigationEvent = {
uri:
payload.uri === undefined ? null : decodeURIComponent(payload.uri),
date: new Date(payload.date) || new Date(),
uri: payload.uri === undefined ? null : decodeURIComponent(payload.uri),
date: payload.date ? new Date(payload.date) : new Date(),
className: payload.class === undefined ? null : payload.class,
screenshot: null,
};
return {
...persistedState,
currentURI:
navigationEvent.uri == null
? persistedState.currentURI
: decodeURIComponent(navigationEvent.uri),
navigationEvents: [
navigationEvent,
...persistedState.navigationEvents,
],
};
default:
return persistedState;
}
};
if (navigationEvent.uri) currentURI.set(navigationEvent.uri);
subscribeToNavigationEvents = () => {
this.client.subscribe('nav_event', () =>
// Wait for view to render and then take a screenshot
setTimeout(async () => {
const device = await this.getDevice();
const screenshot = await device.screenshot();
navigationEvents.update((draft) => {
draft.unshift(navigationEvent);
});
const screenshot: Buffer = await client.device.realDevice.screenshot();
const blobURL = URL.createObjectURL(bufferToBlob(screenshot));
this.props.persistedState.navigationEvents[0].screenshot = blobURL;
this.props.setPersistedState({...this.props.persistedState});
}, 1000),
);
};
componentDidMount() {
const {selectedApp} = this.props;
this.subscribeToNavigationEvents();
this.getDevice()
.then((device) => getAppMatchPatterns(selectedApp, device))
.then((patterns: Array<AppMatchPattern>) => {
this.props.setPersistedState({
appMatchPatterns: patterns,
appMatchPatternsProvider: appMatchPatternsToAutoCompleteProvider(
patterns,
),
});
})
.catch(() => {
/* Silently fail here. */
});
readBookmarksFromDB().then((bookmarks) => {
this.props.setPersistedState({
bookmarks: bookmarks,
bookmarksProvider: bookmarksToAutoCompleteProvider(bookmarks),
});
// this process is async, make sure we update the correct one..
const navigationEventIndex = navigationEvents
.get()
.indexOf(navigationEvent);
if (navigationEventIndex !== -1) {
navigationEvents.update((draft) => {
draft[navigationEventIndex].screenshot = blobURL;
});
}
});
navigateTo = async (query: string) => {
getAppMatchPatterns(client.appId, client.device.realDevice)
.then((patterns) => {
appMatchPatterns.set(patterns);
})
.catch((e) => {
console.error('[Navigation] Failed to find appMatchPatterns', e);
});
readBookmarksFromDB().then((bookmarksData) => {
bookmarks.set(bookmarksData);
});
function navigateTo(query: string) {
const filteredQuery = filterOptionalParameters(query);
this.props.setPersistedState({currentURI: filteredQuery});
const requiredParameters = getRequiredParameters(filteredQuery);
if (requiredParameters.length === 0) {
const device = await this.getDevice();
if (this.realClient.query.app === 'Facebook' && device.os === 'iOS') {
currentURI.set(filteredQuery);
const params = getRequiredParameters(filteredQuery);
if (params.length === 0) {
if (client.appName === 'Facebook' && client.device.os === 'iOS') {
// use custom navigate_to event for Wilde
this.client.send('navigate_to', {
client.send('navigate_to', {
url: filterOptionalParameters(filteredQuery),
});
} else {
device.navigateToLocation(filterOptionalParameters(filteredQuery));
client.device.realDevice.navigateToLocation(
filterOptionalParameters(filteredQuery),
);
}
} else {
this.setState({
requiredParameters,
shouldShowURIErrorDialog: true,
});
requiredParameters.set(params);
shouldShowURIErrorDialog.set(true);
}
}
};
onFavorite = (uri: string) => {
this.setState({shouldShowSaveBookmarkDialog: true, saveBookmarkURI: uri});
};
function onFavorite(uri: string) {
// TODO: why does this need a dialog?
shouldShowSaveBookmarkDialog.set(true);
saveBookmarkURI.set(uri);
}
addBookmark = (bookmark: Bookmark) => {
function addBookmark(bookmark: Bookmark) {
const newBookmark = {
uri: bookmark.uri,
commonName: bookmark.commonName,
};
bookmarks.update((draft) => {
draft.set(newBookmark.uri, newBookmark);
});
writeBookmarkToDB(newBookmark);
const newMapRef = this.props.persistedState.bookmarks;
newMapRef.set(newBookmark.uri, newBookmark);
this.props.setPersistedState({
bookmarks: newMapRef,
bookmarksProvider: bookmarksToAutoCompleteProvider(newMapRef),
});
};
}
removeBookmark = (uri: string) => {
removeBookmark(uri);
const newMapRef = this.props.persistedState.bookmarks;
newMapRef.delete(uri);
this.props.setPersistedState({
bookmarks: newMapRef,
bookmarksProvider: bookmarksToAutoCompleteProvider(newMapRef),
function removeBookmark(uri: string) {
bookmarks.update((draft) => {
draft.delete(uri);
});
};
removeBookmarkFromDB(uri);
}
render() {
const {
return {
navigateTo,
onFavorite,
addBookmark,
removeBookmark,
bookmarks,
saveBookmarkURI,
shouldShowSaveBookmarkDialog,
shouldShowURIErrorDialog,
requiredParameters,
} = this.state;
const {
bookmarks,
bookmarksProvider,
currentURI,
appMatchPatternsProvider,
appMatchPatterns,
navigationEvents,
} = this.props.persistedState;
const autoCompleteProviders = [bookmarksProvider, appMatchPatternsProvider];
currentURI,
};
}
export function Component() {
const instance = usePlugin(plugin);
const bookmarks = useValue(instance.bookmarks);
const appMatchPatterns = useValue(instance.appMatchPatterns);
const saveBookmarkURI = useValue(instance.saveBookmarkURI);
const shouldShowSaveBookmarkDialog = useValue(
instance.shouldShowSaveBookmarkDialog,
);
const shouldShowURIErrorDialog = useValue(instance.shouldShowURIErrorDialog);
const requiredParameters = useValue(instance.requiredParameters);
const currentURI = useValue(instance.currentURI);
const navigationEvents = useValue(instance.navigationEvents);
const autoCompleteProviders = useMemo(
() => [
bookmarksToAutoCompleteProvider(bookmarks),
appMatchPatternsToAutoCompleteProvider(appMatchPatterns),
],
[bookmarks, appMatchPatterns],
);
return (
<FlexColumn grow>
<Layout.Container>
<SearchBar
providers={autoCompleteProviders}
bookmarks={bookmarks}
onNavigate={this.navigateTo}
onFavorite={this.onFavorite}
onNavigate={instance.navigateTo}
onFavorite={instance.onFavorite}
uriFromAbove={currentURI}
/>
<Timeline
bookmarks={bookmarks}
events={navigationEvents}
onNavigate={this.navigateTo}
onFavorite={this.onFavorite}
onNavigate={instance.navigateTo}
onFavorite={instance.onFavorite}
/>
<BookmarksSidebar
bookmarks={bookmarks}
onRemove={this.removeBookmark}
onNavigate={this.navigateTo}
onRemove={instance.removeBookmark}
onNavigate={instance.navigateTo}
/>
<SaveBookmarkDialog
shouldShow={shouldShowSaveBookmarkDialog}
uri={saveBookmarkURI}
onHide={() => this.setState({shouldShowSaveBookmarkDialog: false})}
edit={
saveBookmarkURI != null ? bookmarks.has(saveBookmarkURI) : false
}
onSubmit={this.addBookmark}
onRemove={this.removeBookmark}
onHide={() => {
instance.shouldShowSaveBookmarkDialog.set(false);
}}
edit={saveBookmarkURI != null ? bookmarks.has(saveBookmarkURI) : false}
onSubmit={instance.addBookmark}
onRemove={instance.removeBookmark}
/>
<RequiredParametersDialog
shouldShow={shouldShowURIErrorDialog}
onHide={() => this.setState({shouldShowURIErrorDialog: false})}
onHide={() => {
instance.shouldShowURIErrorDialog.set(false);
}}
uri={currentURI}
requiredParameters={requiredParameters}
onSubmit={this.navigateTo}
onSubmit={instance.navigateTo}
/>
</FlexColumn>
</Layout.Container>
);
}
}
/* @scarf-info: do not remove, more info: https://fburl.com/scarf */
/* @scarf-generated: flipper-plugin index.js.template 0bfa32e5-fb15-4705-81f8-86260a1f3f8e */

3
desktop/plugins/navigation/package.json
View File

@@ -13,5 +13,8 @@
"icon": "directions",
"bugs": {
"email": "beneloca@fb.com"
},
"peerDependencies": {
"flipper-plugin": "0.64.0"
}
}

19
desktop/plugins/navigation/types.tsx
View File

@@ -9,20 +9,11 @@
export type URI = string;
export type State = {
shouldShowSaveBookmarkDialog: boolean;
shouldShowURIErrorDialog: boolean;
saveBookmarkURI: URI | null;
requiredParameters: Array<string>;
};
export type PersistedState = {
bookmarks: Map<URI, Bookmark>;
navigationEvents: Array<NavigationEvent>;
bookmarksProvider: AutoCompleteProvider;
appMatchPatterns: Array<AppMatchPattern>;
appMatchPatternsProvider: AutoCompleteProvider;
currentURI: string;
export type RawNavigationEvent = {
date: string | undefined;
uri: URI | undefined;
class: string | undefined;
screenshot: string | undefined;
};
export type NavigationEvent = {

2
desktop/plugins/navigation/util/indexedDB.tsx
View File

@@ -88,7 +88,7 @@ export const readBookmarksFromDB: () => Promise<Map<string, Bookmark>> = () => {
});
};
export const removeBookmark: (uri: string) => Promise<void> = (uri) => {
export const removeBookmarkFromDB: (uri: string) => Promise<void> = (uri) => {
return new Promise<void>((resolve, reject) => {
openNavigationPluginDB()
.then((db: IDBDatabase) => {

6
desktop/static/icons.json
View File

@@ -532,5 +532,11 @@
],
"hourglass": [
16
],
"mobile-outline": [
16
],
"bookmark-outline": [
16
]
}