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

Export power search enabled components and types by default

Browse Source 
Summary: Provides power search typings to all users by default

Reviewed By: LukeDefeo

Differential Revision: D51306600

fbshipit-source-id: c1f0d318d8b6953dd02af16d2c51abbf0e6e9590
This commit is contained in:
Andrey Goncharov
2023-11-15 05:00:21 -08:00
committed by Facebook GitHub Bot
parent b34718ac32
commit bfc4e959bc
7 changed files with 125 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
desktop/flipper-plugin/src/index.tsx
View File

@@ -38,9 +38,8 @@ export {Sidebar as _Sidebar} from './ui/Sidebar';
export {DetailSidebar} from './ui/DetailSidebar'; export {DetailSidebar} from './ui/DetailSidebar';
export {Toolbar} from './ui/Toolbar'; export {Toolbar} from './ui/Toolbar';
export {MasterDetail} from './ui/MasterDetail'; export {MasterDetailWithPowerSearch as MasterDetail} from './ui/MasterDetailWithPowerSearch';
export {MasterDetail as MasterDetailLegacy} from './ui/MasterDetail'; export {MasterDetail as MasterDetailLegacy} from './ui/MasterDetail';
export {MasterDetailWithPowerSearch as _MasterDetailWithPowerSearch} from './ui/MasterDetailWithPowerSearch';
export {CodeBlock} from './ui/CodeBlock'; export {CodeBlock} from './ui/CodeBlock';
export {renderReactRoot, _PortalsManager} from './utils/renderReactRoot'; export {renderReactRoot, _PortalsManager} from './utils/renderReactRoot';
@@ -59,19 +58,17 @@ export {DataFormatter} from './ui/DataFormatter';
export {useLogger, _LoggerContext} from './utils/useLogger'; export {useLogger, _LoggerContext} from './utils/useLogger';
export {DataTable, DataTableColumn} from './ui/data-table/DataTable'; export {
DataTable,
DataTableColumn,
} from './ui/data-table/DataTableWithPowerSearch';
export { export {
DataTable as DataTableLegacy, DataTable as DataTableLegacy,
DataTableColumn as DataTableColumnLegacy, DataTableColumn as DataTableColumnLegacy,
} from './ui/data-table/DataTable'; } from './ui/data-table/DataTable';
export {DataTableManager} from './ui/data-table/DataTableManager'; export {DataTableManager} from './ui/data-table/DataTableWithPowerSearchManager';
export {DataTableManager as DataTableManagerLegacy} from './ui/data-table/DataTableManager'; export {DataTableManager as DataTableManagerLegacy} from './ui/data-table/DataTableManager';
export {
DataTable as _DataTableWithPowerSearch,
DataTableColumn as _DataTableColumnWithPowerSearch,
} from './ui/data-table/DataTableWithPowerSearch';
export {dataTablePowerSearchOperators} from './ui/data-table/DataTableDefaultPowerSearchOperators'; export {dataTablePowerSearchOperators} from './ui/data-table/DataTableDefaultPowerSearchOperators';
export {DataTableManager as _DataTableWithPowerSearchManager} from './ui/data-table/DataTableWithPowerSearchManager';
export {DataList} from './ui/DataList'; export {DataList} from './ui/DataList';
export {Spinner} from './ui/Spinner'; export {Spinner} from './ui/Spinner';
export * from './ui/PowerSearch'; export * from './ui/PowerSearch';

103
desktop/flipper-ui-core/src/chrome/__tests__/flipper_messages.node.tsx
View File

@@ -121,82 +121,49 @@ test('It can render rows', async () => {
(await renderer.findByText('unique-string')).parentElement?.parentElement, (await renderer.findByText('unique-string')).parentElement?.parentElement,
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
<div <div
class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 24px; transform: translateY(24px);"
> >
<div <div
class="css-12luweq-TableBodyColumnContainer e1luu51r0" class="ant-dropdown-trigger css-1k3kr6b-TableBodyRowContainer e1luu51r1"
width="14%"
> >
<span> <div
<span class="css-12luweq-TableBodyColumnContainer e1luu51r0"
style="background-color: rgb(255, 245, 102);" width="14%"
/> >
00:00:00.000 00:00:00.000
</span> </div>
</div> <div
<div class="css-12luweq-TableBodyColumnContainer e1luu51r0"
class="css-12luweq-TableBodyColumnContainer e1luu51r0" width="14%"
width="14%" >
>
<span>
<span
style="background-color: rgb(255, 245, 102);"
/>
Android Phone Android Phone
</span> </div>
</div> <div
<div class="css-12luweq-TableBodyColumnContainer e1luu51r0"
class="css-12luweq-TableBodyColumnContainer e1luu51r0" width="14%"
width="14%" >
>
<span>
<span
style="background-color: rgb(255, 245, 102);"
/>
FB4A FB4A
</span> </div>
</div> <div
<div class="css-12luweq-TableBodyColumnContainer e1luu51r0"
class="css-12luweq-TableBodyColumnContainer e1luu51r0" width="14%"
width="14%" >
>
<span>
<span
style="background-color: rgb(255, 245, 102);"
/>
unique-string unique-string
</span> </div>
</div> <div
<div class="css-12luweq-TableBodyColumnContainer e1luu51r0"
class="css-12luweq-TableBodyColumnContainer e1luu51r0" width="14%"
width="14%" />
> <div
<span> class="css-12luweq-TableBodyColumnContainer e1luu51r0"
<span width="14%"
style="background-color: rgb(255, 245, 102);" />
/> <div
</span> class="css-12luweq-TableBodyColumnContainer e1luu51r0"
</div> width="14%"
<div >
class="css-12luweq-TableBodyColumnContainer e1luu51r0"
width="14%"
>
<span>
<span
style="background-color: rgb(255, 245, 102);"
/>
</span>
</div>
<div
class="css-12luweq-TableBodyColumnContainer e1luu51r0"
width="14%"
>
<span>
<span
style="background-color: rgb(255, 245, 102);"
/>
toClient:send toClient:send
</span> </div>
</div> </div>
</div> </div>
`); `);

6
desktop/flipper-ui-core/src/dispatcher/plugins.tsx
View File

@@ -105,11 +105,11 @@ class UIPluginInitializer extends AbstractPluginInitializer {
let uiPluginInitializer: UIPluginInitializer; let uiPluginInitializer: UIPluginInitializer;
export default async (store: Store, _logger: Logger) => { export default async (store: Store, _logger: Logger) => {
let FlipperPlugin = FlipperPluginSDK; let FlipperPlugin = FlipperPluginSDK;
if (getRenderHostInstance().GK('flipper_power_search')) { if (!getRenderHostInstance().GK('flipper_power_search')) {
FlipperPlugin = { FlipperPlugin = {
...FlipperPlugin, ...FlipperPlugin,
MasterDetail: FlipperPlugin._MasterDetailWithPowerSearch as any, MasterDetail: FlipperPlugin.MasterDetailLegacy as any,
DataTable: FlipperPlugin._DataTableWithPowerSearch as any, DataTable: FlipperPlugin.DataTableLegacy as any,
}; };
} }

12
desktop/plugins/public/logs/index.tsx
View File

@@ -13,10 +13,10 @@ import {
usePlugin, usePlugin,
createDataSource, createDataSource,
dataTablePowerSearchOperators, dataTablePowerSearchOperators,
_DataTableColumnWithPowerSearch, DataTableColumn,
_DataTableWithPowerSearch, DataTable,
theme, theme,
_DataTableWithPowerSearchManager, DataTableManager,
createState, createState,
useValue, useValue,
DataFormatter, DataFormatter,
@@ -48,7 +48,7 @@ const logLevelEnumLabels = Object.entries(logTypes).reduce(
function createColumnConfig( function createColumnConfig(
_os: 'iOS' | 'Android' | 'Metro', _os: 'iOS' | 'Android' | 'Metro',
): _DataTableColumnWithPowerSearch<ExtendedLogEntry>[] { ): DataTableColumn<ExtendedLogEntry>[] {
return [ return [
{ {
key: 'type', key: 'type',
@@ -153,7 +153,7 @@ export function devicePlugin(client: DevicePluginClient) {
}); });
const isPaused = createState(true); const isPaused = createState(true);
const tableManagerRef = createRef< const tableManagerRef = createRef<
undefined | _DataTableWithPowerSearchManager<ExtendedLogEntry> undefined | DataTableManager<ExtendedLogEntry>
>(); >();
client.onDeepLink((payload: unknown) => { client.onDeepLink((payload: unknown) => {
@@ -264,7 +264,7 @@ export function Component() {
const plugin = usePlugin(devicePlugin); const plugin = usePlugin(devicePlugin);
const paused = useValue(plugin.isPaused); const paused = useValue(plugin.isPaused);
return ( return (
<_DataTableWithPowerSearch<ExtendedLogEntry> <DataTable<ExtendedLogEntry>
dataSource={plugin.rows} dataSource={plugin.rows}
columns={plugin.columns} columns={plugin.columns}
enableAutoScroll enableAutoScroll

6
desktop/plugins/public/network/index.tsx
View File

@@ -28,9 +28,9 @@ import {
usePlugin, usePlugin,
useValue, useValue,
createDataSource, createDataSource,
_DataTableWithPowerSearch as DataTable, DataTable,
_DataTableColumnWithPowerSearch as DataTableColumn, DataTableColumn,
_DataTableWithPowerSearchManager as DataTableManager, DataTableManager,
theme, theme,
renderReactRoot, renderReactRoot,
batch, batch,

6
desktop/plugins/public/network/request-mocking/NetworkRouteManager.tsx
View File

@@ -7,11 +7,7 @@
* @format * @format
*/ */
import { import {Atom, DataTableManager, getFlipperLib} from 'flipper-plugin';
Atom,
_DataTableWithPowerSearchManager as DataTableManager,
getFlipperLib,
} from 'flipper-plugin';
import {createContext} from 'react'; import {createContext} from 'react';
import {Header, Request} from '../types'; import {Header, Request} from '../types';

145
desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx
View File

@@ -9,12 +9,11 @@
import {DeleteOutlined, PartitionOutlined} from '@ant-design/icons'; import {DeleteOutlined, PartitionOutlined} from '@ant-design/icons';
import { import {
_DataTableWithPowerSearch as DataTable, DataTable,
DataTableColumn, DataTableColumn,
DetailSidebar, DetailSidebar,
Layout, Layout,
_DataTableColumnWithPowerSearch, DataTableManager,
_DataTableWithPowerSearchManager,
dataTablePowerSearchOperators, dataTablePowerSearchOperators,
usePlugin, usePlugin,
useValue, useValue,
@@ -44,10 +43,9 @@ export function FrameworkEventsTable({
const focusedNode = useValue(instance.uiState.focusedNode); const focusedNode = useValue(instance.uiState.focusedNode);
const managerRef = const managerRef = useRef<DataTableManager<AugmentedFrameworkEvent> | null>(
useRef<_DataTableWithPowerSearchManager<AugmentedFrameworkEvent> | null>( null,
null, );
);
useEffect(() => { useEffect(() => {
tracker.track('framework-event-table-opened', {}); tracker.track('framework-event-table-opened', {});
@@ -175,74 +173,73 @@ const inferredEnum = [
dataTablePowerSearchOperators.enum_is_not({}), dataTablePowerSearchOperators.enum_is_not({}),
]; ];
const staticColumns: _DataTableColumnWithPowerSearch<AugmentedFrameworkEvent>[] = const staticColumns: DataTableColumn<AugmentedFrameworkEvent>[] = [
[ {
{ key: 'timestamp',
key: 'timestamp', sortable: true,
sortable: true, onRender: (row: FrameworkEvent) => formatTimestampMillis(row.timestamp),
onRender: (row: FrameworkEvent) => formatTimestampMillis(row.timestamp), title: 'Timestamp',
title: 'Timestamp', formatters: MonoSpace,
formatters: MonoSpace,
powerSearchConfig: [ powerSearchConfig: [
dataTablePowerSearchOperators.newer_than_absolute_date(), dataTablePowerSearchOperators.newer_than_absolute_date(),
dataTablePowerSearchOperators.older_than_absolute_date(), dataTablePowerSearchOperators.older_than_absolute_date(),
], ],
},
{
key: 'type',
title: 'Event type',
onRender: (row: FrameworkEvent) => eventTypeToName(row.type),
powerSearchConfig: {
inferEnumOptionsFromData: true,
operators: inferredEnum,
}, },
{ },
key: 'type', {
title: 'Event type', key: 'duration',
onRender: (row: FrameworkEvent) => eventTypeToName(row.type), title: 'Duration (Nanos)',
powerSearchConfig: { onRender: (row: FrameworkEvent) =>
inferEnumOptionsFromData: true, row.duration != null ? formatDuration(row.duration) : null,
operators: inferredEnum, formatters: MonoSpace,
},
},
{
key: 'duration',
title: 'Duration (Nanos)',
onRender: (row: FrameworkEvent) =>
row.duration != null ? formatDuration(row.duration) : null,
formatters: MonoSpace,
powerSearchConfig: [ powerSearchConfig: [
dataTablePowerSearchOperators.int_greater_or_equal(), dataTablePowerSearchOperators.int_greater_or_equal(),
dataTablePowerSearchOperators.int_greater_than(), dataTablePowerSearchOperators.int_greater_than(),
dataTablePowerSearchOperators.int_equals(), dataTablePowerSearchOperators.int_equals(),
dataTablePowerSearchOperators.int_less_or_equal(), dataTablePowerSearchOperators.int_less_or_equal(),
dataTablePowerSearchOperators.int_less_than(), dataTablePowerSearchOperators.int_less_than(),
], ],
}, },
{ {
key: 'treeId', key: 'treeId',
title: 'TreeId', title: 'TreeId',
powerSearchConfig: idConfig, powerSearchConfig: idConfig,
formatters: MonoSpace, formatters: MonoSpace,
}, },
{ {
key: 'rootComponentName', key: 'rootComponentName',
title: 'Root component name', title: 'Root component name',
powerSearchConfig: stringConfig, powerSearchConfig: stringConfig,
formatters: MonoSpace, formatters: MonoSpace,
}, },
{ {
key: 'nodeId', key: 'nodeId',
title: 'Component ID', title: 'Component ID',
powerSearchConfig: idConfig, powerSearchConfig: idConfig,
formatters: MonoSpace, formatters: MonoSpace,
}, },
{ {
key: 'nodeName', key: 'nodeName',
title: 'Component name', title: 'Component name',
powerSearchConfig: stringConfig, powerSearchConfig: stringConfig,
formatters: MonoSpace, formatters: MonoSpace,
}, },
{ {
key: 'thread', key: 'thread',
title: 'Thread', title: 'Thread',
onRender: (row: FrameworkEvent) => startCase(row.thread), onRender: (row: FrameworkEvent) => startCase(row.thread),
powerSearchConfig: stringConfig, powerSearchConfig: stringConfig,
formatters: MonoSpace, formatters: MonoSpace,
}, },
]; ];