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

Make deeplinks manual- and unittestable

Browse Source 
Summary: This diff makes sure we can manually & unit tests deeplinks more easily, by introducing a dialog in which a deeplink can be entered manually and extracting deeplink handling logic from the application dispatcher.

Reviewed By: jknoxville

Differential Revision: D29760933

fbshipit-source-id: 0fc8f577204ecdd278716853b87786557a6e2194
This commit is contained in:
Michel Weststrate
2021-07-22 04:16:01 -07:00
committed by Facebook GitHub Bot
parent fe96c9b6d2
commit 860f723521
6 changed files with 256 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
desktop/app/src/MenuBar.tsx
View File

@@ -34,6 +34,7 @@ import {
import {StyleGuide} from './sandy-chrome/StyleGuide'; import {StyleGuide} from './sandy-chrome/StyleGuide';
import {showEmulatorLauncher} from './sandy-chrome/appinspect/LaunchEmulator'; import {showEmulatorLauncher} from './sandy-chrome/appinspect/LaunchEmulator';
import {webFrame} from 'electron'; import {webFrame} from 'electron';
import {openDeeplinkDialog} from './deeplink';
export type DefaultKeyboardAction = keyof typeof _buildInMenuEntries; export type DefaultKeyboardAction = keyof typeof _buildInMenuEntries;
export type TopLevelMenu = 'Edit' | 'View' | 'Window' | 'Help'; export type TopLevelMenu = 'Edit' | 'View' | 'Window' | 'Help';
@@ -364,6 +365,12 @@ function getTemplate(
} }
}, },
}, },
{
label: 'Trigger deeplink...',
click() {
openDeeplinkDialog(store);
},
},
{ {
type: 'separator', type: 'separator',
}, },

95
desktop/app/src/__tests__/deeplink.node.tsx Normal file
View File

@@ -0,0 +1,95 @@
/**
* 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
*/
jest.useFakeTimers();
import React from 'react';
import {renderMockFlipperWithPlugin} from '../test-utils/createMockFlipperWithPlugin';
import {
_SandyPluginDefinition,
PluginClient,
TestUtils,
usePlugin,
createState,
useValue,
} from 'flipper-plugin';
import {handleDeeplink} from '../deeplink';
test('Triggering a deeplink will work', async () => {
const linksSeen: any[] = [];
const plugin = (client: PluginClient) => {
const linkState = createState('');
client.onDeepLink((link) => {
linksSeen.push(link);
linkState.set(String(link));
});
return {
linkState,
};
};
const definition = new _SandyPluginDefinition(
TestUtils.createMockPluginDetails(),
{
plugin,
Component() {
const instance = usePlugin(plugin);
const linkState = useValue(instance.linkState);
return <h1>{linkState || 'world'}</h1>;
},
},
);
const {renderer, client, store} = await renderMockFlipperWithPlugin(
definition,
);
expect(linksSeen).toEqual([]);
await handleDeeplink(
store,
`flipper://${client.query.app}/${definition.id}/universe`,
);
jest.runAllTimers();
expect(linksSeen).toEqual(['universe']);
expect(renderer.baseElement).toMatchInlineSnapshot(`
<body>
<div>
<div
class="css-1x2cmzz-SandySplitContainer e1hsqii10"
>
<div />
<div
class="css-1knrt0j-SandySplitContainer e1hsqii10"
>
<div
class="css-1woty6b-Container"
>
<h1>
universe
</h1>
</div>
<div
class="css-724x97-View-FlexBox-FlexRow"
id="detailsSidebar"
/>
</div>
</div>
</div>
</body>
`);
});
test('Will throw error on invalid deeplinks', async () => {
// flipper:///support-form/?form=litho
expect(() =>
handleDeeplink(undefined as any, `flipper://test`),
).rejects.toThrowErrorMatchingInlineSnapshot(`"Unknown deeplink"`);
});

146
desktop/app/src/deeplink.tsx Normal file
View File

@@ -0,0 +1,146 @@
/**
* 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 {
ACTIVE_SHEET_SIGN_IN,
setActiveSheet,
setPastedToken,
toggleAction,
} from './reducers/application';
import {Group, SUPPORTED_GROUPS} from './reducers/supportForm';
import {Store} from './reducers/index';
import {importDataToStore} from './utils/exportData';
import {selectPlugin} from './reducers/connections';
import {Layout, renderReactRoot} from 'flipper-plugin';
import React, {useState} from 'react';
import {Alert, Input, Modal} from 'antd';
const UNKNOWN = 'Unknown deeplink';
/**
* Handle a flipper:// deeplink. Will throw if the URL pattern couldn't be recognised
*/
export async function handleDeeplink(
store: Store,
query: string,
): Promise<void> {
const uri = new URL(query);
if (uri.protocol !== 'flipper:') {
throw new Error(UNKNOWN);
}
if (uri.pathname.match(/^\/*import\/*$/)) {
const url = uri.searchParams.get('url');
store.dispatch(toggleAction('downloadingImportData', true));
if (url) {
return fetch(url)
.then((res) => res.text())
.then((data) => importDataToStore(url, data, store))
.then(() => {
store.dispatch(toggleAction('downloadingImportData', false));
})
.catch((e: Error) => {
console.error('Failed to download Flipper trace' + e);
store.dispatch(toggleAction('downloadingImportData', false));
throw e;
});
}
throw new Error(UNKNOWN);
} else if (uri.pathname.match(/^\/*support-form\/*$/)) {
const formParam = uri.searchParams.get('form');
const grp = deeplinkFormParamToGroups(formParam);
if (grp) {
grp.handleSupportFormDeeplinks(store);
return;
}
throw new Error(UNKNOWN);
} else if (uri.pathname.match(/^\/*login\/*$/)) {
const token = uri.searchParams.get('token');
store.dispatch(setPastedToken(token ?? undefined));
if (store.getState().application.activeSheet !== ACTIVE_SHEET_SIGN_IN) {
store.dispatch(setActiveSheet(ACTIVE_SHEET_SIGN_IN));
}
return;
}
const match = uriComponents(query);
if (match.length > 1) {
// flipper://<client>/<pluginId>/<payload>
store.dispatch(
selectPlugin({
selectedApp: match[0],
selectedPlugin: match[1],
deepLinkPayload: match[2],
}),
);
return;
} else {
throw new Error(UNKNOWN);
}
}
function deeplinkFormParamToGroups(
formParam: string | null,
): Group | undefined {
if (!formParam) {
return undefined;
}
return SUPPORTED_GROUPS.find((grp) => {
return grp.deeplinkSuffix.toLowerCase() === formParam.toLowerCase();
});
}
export const uriComponents = (url: string): Array<string> => {
if (!url) {
return [];
}
const match: Array<string> | undefined | null = url.match(
/^flipper:\/\/([^\/]*)\/([^\/\?]*)\/?(.*)$/,
);
if (match) {
return match.map(decodeURIComponent).slice(1).filter(Boolean);
}
return [];
};
export function openDeeplinkDialog(store: Store) {
renderReactRoot((hide) => <TestDeeplinkDialog store={store} onHide={hide} />);
}
function TestDeeplinkDialog({
store,
onHide,
}: {
store: Store;
onHide: () => void;
}) {
const [query, setQuery] = useState('flipper://');
const [error, setError] = useState('');
return (
<Modal
title="Open deeplink..."
visible
onOk={() => {
handleDeeplink(store, query)
.then(onHide)
.catch((e) => {
setError(`Failed to handle deeplink '${query}': ${e}`);
});
}}
onCancel={onHide}>
<Layout.Container gap>
<>Enter a deeplink to test it:</>
<Input
value={query}
onChange={(v) => {
setQuery(v.target.value);
}}
/>
{error && <Alert type="error" message={error} />}
</Layout.Container>
</Modal>
);
}

2
desktop/app/src/dispatcher/__tests__/deeplinkURLParsing.node.tsx
View File

@@ -7,7 +7,7 @@
* @format * @format
*/ */
import {uriComponents} from '../application'; import {uriComponents} from '../../deeplink';
test('test parsing of deeplink URL', () => { test('test parsing of deeplink URL', () => {
const url = 'flipper://app/plugin/meta/data'; const url = 'flipper://app/plugin/meta/data';

85
desktop/app/src/dispatcher/application.tsx
View File

@@ -8,36 +8,16 @@
*/ */
import {remote, ipcRenderer, IpcRendererEvent} from 'electron'; import {remote, ipcRenderer, IpcRendererEvent} from 'electron';
import {
ACTIVE_SHEET_SIGN_IN,
setActiveSheet,
setPastedToken,
toggleAction,
} from '../reducers/application';
import {Group, SUPPORTED_GROUPS} from '../reducers/supportForm';
import {Store} from '../reducers/index'; import {Store} from '../reducers/index';
import {Logger} from '../fb-interfaces/Logger'; import {Logger} from '../fb-interfaces/Logger';
import {parseFlipperPorts} from '../utils/environmentVariables'; import {parseFlipperPorts} from '../utils/environmentVariables';
import { import {
importDataToStore,
importFileToStore, importFileToStore,
IMPORT_FLIPPER_TRACE_EVENT, IMPORT_FLIPPER_TRACE_EVENT,
} from '../utils/exportData'; } from '../utils/exportData';
import {tryCatchReportPlatformFailures} from '../utils/metrics'; import {tryCatchReportPlatformFailures} from '../utils/metrics';
import {selectPlugin} from '../reducers/connections'; import {handleDeeplink} from '../deeplink';
import {message} from 'antd';
export const uriComponents = (url: string): Array<string> => {
if (!url) {
return [];
}
const match: Array<string> | undefined | null = url.match(
/^flipper:\/\/([^\/]*)\/([^\/\?]*)\/?(.*)$/,
);
if (match) {
return match.map(decodeURIComponent).slice(1).filter(Boolean);
}
return [];
};
export default (store: Store, _logger: Logger) => { export default (store: Store, _logger: Logger) => {
const currentWindow = remote.getCurrentWindow(); const currentWindow = remote.getCurrentWindow();
@@ -77,66 +57,13 @@ export default (store: Store, _logger: Logger) => {
ipcRenderer.on( ipcRenderer.on(
'flipper-protocol-handler', 'flipper-protocol-handler',
(_event: IpcRendererEvent, query: string) => { (_event: IpcRendererEvent, query: string) => {
const uri = new URL(query); handleDeeplink(store, query).catch((e) => {
if (uri.protocol !== 'flipper:') { console.warn('Failed to handle deeplink', query, e);
return; message.error(`Failed to handle deeplink '${query}': ${e}`);
} });
if (uri.pathname.match(/^\/*import\/*$/)) {
const url = uri.searchParams.get('url');
store.dispatch(toggleAction('downloadingImportData', true));
return (
typeof url === 'string' &&
fetch(url)
.then((res) => res.text())
.then((data) => importDataToStore(url, data, store))
.then(() => {
store.dispatch(toggleAction('downloadingImportData', false));
})
.catch((e: Error) => {
console.error(e);
store.dispatch(toggleAction('downloadingImportData', false));
})
);
} else if (uri.pathname.match(/^\/*support-form\/*$/)) {
const formParam = uri.searchParams.get('form');
const grp = deeplinkFormParamToGroups(formParam);
if (grp) {
grp.handleSupportFormDeeplinks(store);
}
return;
} else if (uri.pathname.match(/^\/*login\/*$/)) {
const token = uri.searchParams.get('token');
store.dispatch(setPastedToken(token ?? undefined));
if (store.getState().application.activeSheet !== ACTIVE_SHEET_SIGN_IN) {
store.dispatch(setActiveSheet(ACTIVE_SHEET_SIGN_IN));
}
return;
}
const match = uriComponents(query);
if (match.length > 1) {
// flipper://<client>/<pluginId>/<payload>
return store.dispatch(
selectPlugin({
selectedApp: match[0],
selectedPlugin: match[1],
deepLinkPayload: match[2],
}),
);
}
}, },
); );
function deeplinkFormParamToGroups(
formParam: string | null,
): Group | undefined {
if (!formParam) {
return undefined;
}
return SUPPORTED_GROUPS.find((grp) => {
return grp.deeplinkSuffix.toLowerCase() === formParam.toLowerCase();
});
}
ipcRenderer.on( ipcRenderer.on(
'open-flipper-file', 'open-flipper-file',
(_event: IpcRendererEvent, url: string) => { (_event: IpcRendererEvent, url: string) => {

2
desktop/types/index.d.ts vendored
View File

@@ -16,6 +16,7 @@
/// <reference path="decompress-targz.d.ts" /> /// <reference path="decompress-targz.d.ts" />
/// <reference path="decompress-unzip.d.ts" /> /// <reference path="decompress-unzip.d.ts" />
/// <reference path="download-tarball.d.ts" /> /// <reference path="download-tarball.d.ts" />
/// <reference path="jest-extensions.d.ts" />
/// <reference path="json-format-highlight.d.ts" /> /// <reference path="json-format-highlight.d.ts" />
/// <reference path="line-replace.d.ts" /> /// <reference path="line-replace.d.ts" />
/// <reference path="live-plugin-manager.d.ts" /> /// <reference path="live-plugin-manager.d.ts" />
@@ -26,4 +27,3 @@
/// <reference path="nodejs.d.ts" /> /// <reference path="nodejs.d.ts" />
/// <reference path="npm-api.d.ts" /> /// <reference path="npm-api.d.ts" />
/// <reference path="openssl-wrapper.d.ts" /> /// <reference path="openssl-wrapper.d.ts" />
/// <reference path="jest-extensions.d.ts" />