Provide standardised MasterDetail
Summary: Noticed in reviews during the convertathon there is still quite some boilerplate in things that happen on the boundary of UI and plugin state, such as setting up menu entries and providing common functionality like clear, master/detail layout, etc. This diff introduces the `MasterDetail` component, which takes a higher level approach by merely needing to provide the state atoms and desired features, and taking care of the wiring. Applied it to createTablePlugin, to prove that going from `createTablePlugin` to `MasterDetail` will be a much smaller step now. Verified on the funnel logger plugin Reviewed By: passy Differential Revision: D28090362 fbshipit-source-id: 146f8c315fea903901ad4e3e46711642f16cf0e6
This commit is contained in:
Michel Weststrate
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
e7cdbcbe85
commit
e26a8c5ad0
263
desktop/flipper-plugin/src/ui/MasterDetail.tsx
Normal file
263
desktop/flipper-plugin/src/ui/MasterDetail.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
/**
|
||||
* 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 * as React from 'react';
|
||||
import {
|
||||
createElement,
|
||||
createRef,
|
||||
useCallback,
|
||||
useState,
|
||||
useEffect,
|
||||
} from 'react';
|
||||
import {DataInspector} from './data-inspector/DataInspector';
|
||||
import {DataTable, DataTableProps} from './data-table/DataTable';
|
||||
import {DataTableManager} from './data-table/DataTableManager';
|
||||
import {DetailSidebar} from './DetailSidebar';
|
||||
import {Layout} from './Layout';
|
||||
import {Panel} from './Panel';
|
||||
|
||||
import {
|
||||
DeleteOutlined,
|
||||
PauseCircleOutlined,
|
||||
PlayCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import {Button} from 'antd';
|
||||
import {usePluginInstance} from '../plugin/PluginContext';
|
||||
import {Atom, createState, useValue} from '../state/atom';
|
||||
import {useAssertStableRef} from '../utils/useAssertStableRef';
|
||||
|
||||
type MasterDetailProps<T> = {
|
||||
/**
|
||||
* Where to display the details of the currently selected record?
|
||||
* 'main' (default): show the details in the standard, centrally controlled right sidebar
|
||||
* 'right': show a resizable pane to the right
|
||||
* 'bottom': show a resizable pane to the bottom
|
||||
* 'none': don't show details at all
|
||||
*/
|
||||
sidebarPosition?: 'bottom' | 'right' | 'main' | 'none';
|
||||
/**
|
||||
* Component that accepts a 'record' prop that is used to render details.
|
||||
* If none is provided, a standard `DataInspector` component will be used to display the entire record.
|
||||
*/
|
||||
sidebarComponent?: React.FC<{record: T}>;
|
||||
/**
|
||||
* Default size of the sidebar.
|
||||
*/
|
||||
sidebarSize?: number;
|
||||
/**
|
||||
* If provided, this atom will be used to store selection in.
|
||||
*/
|
||||
selection?: Atom<T | undefined>;
|
||||
/**
|
||||
* If provided, this atom will be used to store pause/resume state in, and a pause/resume toggle will be shown
|
||||
*/
|
||||
isPaused?: Atom<boolean>;
|
||||
/**
|
||||
* If set, a clear button will be shown.
|
||||
* By default this will clear the dataSource (if applicable).
|
||||
*/
|
||||
enableClear?: boolean;
|
||||
/**
|
||||
* Callback to be called when clear action is used.
|
||||
*/
|
||||
onClear?: () => void;
|
||||
/**
|
||||
* If provided, standard menu entries will be created for clear, goToBottom and createPaste
|
||||
*/
|
||||
enableMenuEntries?: boolean;
|
||||
};
|
||||
|
||||
export function MasterDetail<T extends object>({
|
||||
dataSource,
|
||||
records,
|
||||
sidebarComponent,
|
||||
sidebarPosition,
|
||||
sidebarSize,
|
||||
onSelect,
|
||||
extraActions,
|
||||
enableMenuEntries,
|
||||
enableClear,
|
||||
isPaused,
|
||||
selection,
|
||||
onClear,
|
||||
...tableProps
|
||||
}: MasterDetailProps<T> & DataTableProps<T>) {
|
||||
useAssertStableRef(isPaused, 'isPaused');
|
||||
useAssertStableRef(selection, 'selection');
|
||||
|
||||
const pluginInstance = usePluginInstance();
|
||||
const {client} = pluginInstance;
|
||||
const connected = useValue(pluginInstance.client.connected);
|
||||
|
||||
const selectionAtom =
|
||||
// if no selection atom is provided, the component is uncontrolled
|
||||
// and we maintain our own selection atom
|
||||
// eslint-disable-next-line
|
||||
selection ?? useState(() => createState<T | undefined>(undefined))[0];
|
||||
const selectedRecord = useValue(selectionAtom);
|
||||
|
||||
// if a tableManagerRef is provided, we piggy back on that same ref
|
||||
// eslint-disable-next-line
|
||||
const tableManagerRef = tableProps.tableManagerRef ?? createRef<undefined | DataTableManager<T>>();
|
||||
|
||||
const pausedState = useValue(isPaused, false);
|
||||
|
||||
const sidebar =
|
||||
sidebarPosition !== 'none' && selectedRecord && sidebarComponent
|
||||
? createElement(sidebarComponent, {
|
||||
record: selectedRecord,
|
||||
})
|
||||
: null;
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(record: T | undefined, records: T[]) => {
|
||||
selectionAtom.set(record);
|
||||
onSelect?.(record, records);
|
||||
},
|
||||
[selectionAtom, onSelect],
|
||||
);
|
||||
|
||||
const handleTogglePause = useCallback(() => {
|
||||
isPaused?.set(!isPaused?.get());
|
||||
}, [isPaused]);
|
||||
|
||||
const handleClear = useCallback(() => {
|
||||
handleSelect(undefined, []);
|
||||
if (dataSource) {
|
||||
dataSource.clear();
|
||||
onClear?.();
|
||||
} else {
|
||||
if (!onClear) {
|
||||
throw new Error(
|
||||
"onClear must be set when using 'enableClear' and 'records'",
|
||||
);
|
||||
}
|
||||
onClear();
|
||||
}
|
||||
}, [dataSource, onClear, handleSelect]);
|
||||
|
||||
const handleCreatePaste = useCallback(() => {
|
||||
const selection = tableManagerRef.current?.getSelectedItems();
|
||||
switch (selection?.length) {
|
||||
case undefined:
|
||||
case 0:
|
||||
return;
|
||||
case 1:
|
||||
client.createPaste(JSON.stringify(selection[0], null, 2));
|
||||
break;
|
||||
default:
|
||||
client.createPaste(JSON.stringify(selection, null, 2));
|
||||
}
|
||||
}, [client, tableManagerRef]);
|
||||
|
||||
const handleGoToBottom = useCallback(() => {
|
||||
const size = dataSource ? dataSource.view.size : records!.length;
|
||||
tableManagerRef?.current?.selectItem(size - 1);
|
||||
}, [dataSource, records, tableManagerRef]);
|
||||
|
||||
useEffect(
|
||||
function setupMenuEntries() {
|
||||
if (enableMenuEntries) {
|
||||
if (enableClear) {
|
||||
client.addMenuEntry({
|
||||
action: 'clear',
|
||||
handler: handleClear,
|
||||
});
|
||||
}
|
||||
if (client.isFB) {
|
||||
client.addMenuEntry({
|
||||
action: 'createPaste',
|
||||
handler: handleCreatePaste,
|
||||
});
|
||||
}
|
||||
client.addMenuEntry({
|
||||
action: 'goToBottom',
|
||||
handler: handleGoToBottom,
|
||||
});
|
||||
}
|
||||
},
|
||||
[
|
||||
client,
|
||||
enableClear,
|
||||
enableMenuEntries,
|
||||
handleClear,
|
||||
handleCreatePaste,
|
||||
handleGoToBottom,
|
||||
],
|
||||
);
|
||||
|
||||
const table = (
|
||||
<DataTable<T>
|
||||
autoScroll
|
||||
{...tableProps}
|
||||
dataSource={dataSource as any}
|
||||
records={records!}
|
||||
tableManagerRef={tableManagerRef}
|
||||
onSelect={handleSelect}
|
||||
extraActions={
|
||||
<>
|
||||
{connected && isPaused && (
|
||||
<Button
|
||||
title={`Click to ${pausedState ? 'resume' : 'pause'} the stream`}
|
||||
danger={pausedState}
|
||||
onClick={handleTogglePause}>
|
||||
{pausedState ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
|
||||
</Button>
|
||||
)}
|
||||
{connected && enableClear && (
|
||||
<Button title="Clear records" onClick={handleClear}>
|
||||
<DeleteOutlined />
|
||||
</Button>
|
||||
)}
|
||||
{extraActions}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
switch (sidebarPosition!) {
|
||||
case 'main':
|
||||
return (
|
||||
<Layout.Container grow>
|
||||
{table}
|
||||
<DetailSidebar>{sidebar}</DetailSidebar>
|
||||
</Layout.Container>
|
||||
);
|
||||
case 'right':
|
||||
return (
|
||||
<Layout.Right resizable width={sidebarSize}>
|
||||
{table}
|
||||
{sidebar}
|
||||
</Layout.Right>
|
||||
);
|
||||
case 'bottom':
|
||||
return (
|
||||
<Layout.Bottom resizable width={sidebarSize}>
|
||||
{table}
|
||||
{sidebar}
|
||||
</Layout.Bottom>
|
||||
);
|
||||
case 'none':
|
||||
return table;
|
||||
}
|
||||
}
|
||||
|
||||
MasterDetail.defaultProps = {
|
||||
sidebarPosition: 'main',
|
||||
sidebarSize: 400,
|
||||
sidebarComponent: DefaultRenderSidebar,
|
||||
} as Partial<MasterDetailProps<any>>;
|
||||
|
||||
function DefaultRenderSidebar<T>({record}: {record: T}) {
|
||||
return (
|
||||
<Panel title="Payload" collapsible={false} pad>
|
||||
<DataInspector data={record} expandRoot />
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user