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

Support auto completion on discovered bookmarks and filling out params

Browse Source 
Summary:
This diff adds support for finding appPatterns (not sure how the feature is called) in the device, and auto completing on it.

Also improved the styling of bookmark sections.

This diff also adds support of showing a dialog in which params an be filled out if needed.

The behavior around optional arguments seems buggy, as in, no dialog will show up, but since I didn't want to change the logic around this unilaterally, left it as-is for now.

Updated the dialog to Ant so that the renderReactRoot utility could be used safely

Reviewed By: cekkaewnumchai

Differential Revision: D24889855

fbshipit-source-id: 6af264abec2e9e5b921ef7da6deb1d0021615e9e
This commit is contained in:
Michel Weststrate
2020-11-12 04:13:16 -08:00
committed by Facebook GitHub Bot
parent 5118727cb7
commit 273b895e30
8 changed files with 171 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
desktop/app/src/sandy-chrome/appinspect/BookmarkSection.tsx
View File

@@ -8,14 +8,18 @@
*/
import React, {useCallback, useMemo} from 'react';
import {AutoComplete, Input} from 'antd';
import {AutoComplete, Input, Typography} from 'antd';
import {StarFilled, StarOutlined} from '@ant-design/icons';
import {useStore} from '../../utils/useStore';
import {NUX, useValue} from 'flipper-plugin';
import {Layout, NUX, useValue} from 'flipper-plugin';
import {navPluginStateSelector} from '../../chrome/LocationsButton';
// eslint-disable-next-line flipper/no-relative-imports-across-packages
import type {NavigationPlugin} from '../../../../plugins/navigation/index';
import {useMemoize} from '../../utils/useMemoize';
import styled from '@emotion/styled';
const {Text} = Typography;
export function BookmarkSection() {
const navPlugin = useStore(navPluginStateSelector);
@@ -32,15 +36,22 @@ export function BookmarkSection() {
function BookmarkSectionInput({navPlugin}: {navPlugin: NavigationPlugin}) {
const currentURI = useValue(navPlugin.currentURI);
const bookmarks = useValue(navPlugin.bookmarks);
const patterns = useValue(navPlugin.appMatchPatterns);
const isBookmarked = useMemo(() => bookmarks.has(currentURI), [
bookmarks,
currentURI,
]);
const autoCompleteItems = useMemoize(
navPlugin.getAutoCompleteAppMatchPatterns,
[currentURI, bookmarks, patterns, 20],
);
const handleBookmarkClick = useCallback(() => {
if (isBookmarked) {
navPlugin.removeBookmark(currentURI);
} else {
} else if (currentURI) {
navPlugin.addBookmark({
uri: currentURI,
commonName: null,
@@ -55,15 +66,31 @@ function BookmarkSectionInput({navPlugin}: {navPlugin: NavigationPlugin}) {
);
return (
<AutoComplete
<StyledAutoComplete
dropdownMatchSelectWidth={500}
value={currentURI}
onSelect={navPlugin.navigateTo}
options={Array.from(bookmarks.values()).map((bookmark) => ({
style={{flex: 1}}
options={[
{
label: <Text strong>Bookmarks</Text>,
options: Array.from(bookmarks.values()).map((bookmark) => ({
value: bookmark.uri,
label: bookmark.commonName
? `${bookmark.commonName} - ${bookmark.uri}`
: bookmark.uri,
}))}>
label: (
<NavigationEntry label={bookmark.commonName} uri={bookmark.uri} />
),
})),
},
{
label: <Text strong>Entry points</Text>,
options: autoCompleteItems.map((value) => ({
value: value.pattern,
label: (
<NavigationEntry label={value.className} uri={value.pattern} />
),
})),
},
]}>
<Input
addonAfter={bookmarkButton}
defaultValue="<select a bookmark>"
@@ -71,10 +98,27 @@ function BookmarkSectionInput({navPlugin}: {navPlugin: NavigationPlugin}) {
onChange={(e) => {
navPlugin.currentURI.set(e.target.value);
}}
onPressEnter={(e) => {
onPressEnter={() => {
navPlugin.navigateTo(currentURI);
}}
/>
</AutoComplete>
</StyledAutoComplete>
);
}
function NavigationEntry({label, uri}: {label: string | null; uri: string}) {
return (
<Layout.Container>
<Text>{label ?? uri}</Text>
<Text type="secondary">{uri}</Text>
</Layout.Container>
);
}
const StyledAutoComplete = styled(AutoComplete)({
display: 'flex',
flex: 1,
'.ant-select-selector': {
flex: 1,
},
});

13
desktop/app/src/sandy-chrome/appinspect/LaunchEmulator.tsx
View File

@@ -10,11 +10,11 @@
import React, {useEffect, useState} from 'react';
import {Modal, Button, message, Alert} from 'antd';
import {AndroidOutlined, AppleOutlined} from '@ant-design/icons';
import {renderReactRoot} from '../../utils/renderReactRoot';
import {Store} from '../../reducers';
import {useStore} from '../../utils/useStore';
import {launchEmulator} from '../../devices/AndroidDevice';
import {Layout} from 'flipper-plugin';
import {Layout, renderReactRoot} from 'flipper-plugin';
import {Provider} from 'react-redux';
import {
launchSimulator,
getSimulators,
@@ -22,12 +22,11 @@ import {
} from '../../dispatcher/iOSDevice';
export function showEmulatorLauncher(store: Store) {
renderReactRoot(
(unmount) => (
renderReactRoot((unmount) => (
<Provider store={store}>
<LaunchEmulatorDialog onClose={unmount} getSimulators={getSimulators} />
),
store,
);
</Provider>
));
}
type GetSimulators = typeof getSimulators;

2
desktop/flipper-plugin/src/index.ts
View File

@@ -36,6 +36,8 @@ export {theme} from './ui/theme';
export {Layout} from './ui/Layout';
export {NUX, NuxManagerContext, createNuxManager} from './ui/NUX';
export {renderReactRoot} from './utils/renderReactRoot';
// It's not ideal that this exists in flipper-plugin sources directly,
// but is the least pain for plugin authors.
// Probably we should make sure that testing-library doesn't end up in our final Flipper bundle (which packages flipper-plugin)

9
desktop/app/src/utils/renderReactRoot.tsx → desktop/flipper-plugin/src/utils/renderReactRoot.tsx
View File

@@ -9,8 +9,6 @@
import React from 'react';
import {render, unmountComponentAtNode} from 'react-dom';
import {Provider} from 'react-redux';
import {Store} from '../reducers/';
/**
* This utility creates a fresh react render hook, which is great to render elements imperatively, like opening dialogs.
@@ -18,16 +16,13 @@ import {Store} from '../reducers/';
*/
export function renderReactRoot(
handler: (unmount: () => void) => React.ReactElement,
store: Store,
): void {
const div = document.body.appendChild(document.createElement('div'));
render(
<Provider store={store}>
{handler(() => {
handler(() => {
unmountComponentAtNode(div);
div.remove();
})}
</Provider>,
}),
div,
);
}

149
desktop/plugins/navigation/components/RequiredParametersDialog.tsx
View File

@@ -7,7 +7,8 @@
* @format
*/
import {Button, FlexColumn, Input, Sheet, styled, Glyph, colors} from 'flipper';
import {Modal, Button, Alert, Input, Typography} from 'antd';
import {Layout} from 'flipper-plugin';
import {
replaceRequiredParametersWithValues,
parameterIsNumberType,
@@ -23,84 +24,49 @@ import {URI} from '../types';
type Props = {
uri: string;
requiredParameters: Array<string>;
shouldShow: boolean;
onHide?: () => void;
onHide: () => void;
onSubmit: (uri: URI) => void;
};
const Container = styled(FlexColumn)({
padding: 10,
width: 600,
});
const Title = styled.span({
display: 'flex',
marginTop: 8,
marginLeft: 2,
marginBottom: 8,
});
const Text = styled.span({
lineHeight: 1.3,
});
const ErrorLabel = styled.span({
color: colors.yellow,
lineHeight: 1.4,
});
const URIContainer = styled.div({
lineHeight: 1.3,
marginLeft: 2,
marginBottom: 8,
marginTop: 10,
overflowWrap: 'break-word',
});
const ButtonContainer = styled.div({
marginLeft: 'auto',
});
const RequiredParameterInput = styled(Input)({
margin: 0,
marginTop: 8,
height: 30,
width: '100%',
});
const WarningIconContainer = styled.span({
marginRight: 8,
});
export default (props: Props) => {
const {shouldShow, onHide, onSubmit, uri, requiredParameters} = props;
const {onHide, onSubmit, uri, requiredParameters} = props;
const {isValid, values, setValuesArray} = useRequiredParameterFormValidator(
requiredParameters,
);
if (uri == null || !shouldShow) {
return null;
} else {
return (
<Sheet onHideSheet={onHide}>
{(hide: () => void) => {
return (
<Container>
<Title>
<WarningIconContainer>
<Glyph
name="caution-triangle"
size={16}
variant="filled"
color={colors.yellow}
<Modal
visible
onCancel={onHide}
title="Provide bookmark details"
footer={
<>
<Button
onClick={() => {
onHide();
setValuesArray([]);
}}>
Cancel
</Button>
<Button
type={'primary'}
onClick={() => {
onSubmit(replaceRequiredParametersWithValues(uri, values));
onHide();
}}
disabled={!isValid}>
Submit
</Button>
</>
}>
<Layout.Container gap>
<Alert
type="info"
message="This uri has required parameters denoted by '{parameter}'}."
/>
</WarningIconContainer>
<Text>
This uri has required parameters denoted by {'{parameter}'}.
</Text>
</Title>
{requiredParameters.map((paramater, idx) => (
<div key={idx}>
<RequiredParameterInput
<Input
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setValuesArray([
...values.slice(0, idx),
@@ -114,51 +80,20 @@ export default (props: Props) => {
{values[idx] &&
parameterIsNumberType(paramater) &&
!validateParameter(values[idx], paramater) ? (
<ErrorLabel>Parameter must be a number</ErrorLabel>
<Alert type="error" message="Parameter must be a number" />
) : null}
{values[idx] &&
parameterIsBooleanType(paramater) &&
!validateParameter(values[idx], paramater) ? (
<ErrorLabel>
Parameter must be either 'true' or 'false'
</ErrorLabel>
<Alert
type="error"
message="Parameter must be either 'true' or 'false'"
/>
) : null}
</div>
))}
<URIContainer>{liveEdit(uri, values)}</URIContainer>
<ButtonContainer>
<Button
onClick={() => {
if (onHide != null) {
onHide();
}
setValuesArray([]);
hide();
}}
compact
padded>
Cancel
</Button>
<Button
type={isValid ? 'primary' : undefined}
onClick={() => {
onSubmit(replaceRequiredParametersWithValues(uri, values));
if (onHide != null) {
onHide();
}
setValuesArray([]);
hide();
}}
disabled={!isValid}
compact
padded>
Submit
</Button>
</ButtonContainer>
</Container>
<Typography.Text code>{liveEdit(uri, values)}</Typography.Text>
</Layout.Container>
</Modal>
);
}}
</Sheet>
);
}
};

11
desktop/plugins/navigation/hooks/requiredParameters.tsx
View File

@@ -7,7 +7,7 @@
* @format
*/
import {useEffect, useState} from 'react';
import {useMemo, useState} from 'react';
import {validateParameter} from '../util/uri';
export const useRequiredParameterFormValidator = (
@@ -16,8 +16,7 @@ export const useRequiredParameterFormValidator = (
const [values, setValuesArray] = useState<Array<string>>(
requiredParameters.map(() => ''),
);
const [isValid, setIsValid] = useState(false);
useEffect(() => {
const isValid = useMemo(() => {
if (requiredParameters.length != values.length) {
setValuesArray(requiredParameters.map(() => ''));
}
@@ -26,10 +25,10 @@ export const useRequiredParameterFormValidator = (
validateParameter(value, requiredParameters[idx]),
)
) {
setIsValid(true);
return true;
} else {
setIsValid(false);
return false;
}
});
}, [requiredParameters, values]);
return {isValid, values, setValuesArray};
};

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

@@ -41,6 +41,7 @@ import {
useValue,
usePlugin,
Layout,
renderReactRoot,
} from 'flipper-plugin';
export type State = {
@@ -71,8 +72,6 @@ export function plugin(client: PluginClient<Events, Methods>) {
persist: 'appMatchPatterns',
});
const currentURI = createState('');
const shouldShowURIErrorDialog = createState(false);
const requiredParameters = createState<string[]>([]);
const shouldShowSaveBookmarkDialog = createState(false);
const saveBookmarkURI = createState<null | string>(null);
@@ -131,13 +130,18 @@ export function plugin(client: PluginClient<Events, Methods>) {
);
}
} else {
requiredParameters.set(params);
shouldShowURIErrorDialog.set(true);
renderReactRoot((unmount) => (
<RequiredParametersDialog
onHide={unmount}
uri={filteredQuery}
requiredParameters={params}
onSubmit={navigateTo}
/>
));
}
}
function onFavorite(uri: string) {
// TODO: why does this need a dialog?
shouldShowSaveBookmarkDialog.set(true);
saveBookmarkURI.set(uri);
}
@@ -169,11 +173,29 @@ export function plugin(client: PluginClient<Events, Methods>) {
bookmarks,
saveBookmarkURI,
shouldShowSaveBookmarkDialog,
shouldShowURIErrorDialog,
requiredParameters,
appMatchPatterns,
navigationEvents,
currentURI,
getAutoCompleteAppMatchPatterns(
query: string,
bookmarks: Map<string, Bookmark>,
appMatchPatterns: AppMatchPattern[],
limit: number,
): AppMatchPattern[] {
const q = query.toLowerCase();
const results: AppMatchPattern[] = [];
for (const item of appMatchPatterns) {
if (
!bookmarks.has(item.pattern) &&
(item.className.toLowerCase().includes(q) ||
item.pattern.toLowerCase().includes(q))
) {
results.push(item);
if (--limit < 1) break;
}
}
return results;
},
};
}
@@ -185,8 +207,6 @@ export function Component() {
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);
@@ -227,15 +247,6 @@ export function Component() {
onSubmit={instance.addBookmark}
onRemove={instance.removeBookmark}
/>
<RequiredParametersDialog
shouldShow={shouldShowURIErrorDialog}
onHide={() => {
instance.shouldShowURIErrorDialog.set(false);
}}
uri={currentURI}
requiredParameters={requiredParameters}
onSubmit={instance.navigateTo}
/>
</Layout.Container>
);
}

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

@@ -15,6 +15,7 @@
"email": "beneloca@fb.com"
},
"peerDependencies": {
"flipper-plugin": "0.64.0"
"flipper-plugin": "0.64.0",
"antd": "*"
}
}