diff --git a/desktop/flipper-plugin/package.json b/desktop/flipper-plugin/package.json index 4600345ca..ea371ac36 100644 --- a/desktop/flipper-plugin/package.json +++ b/desktop/flipper-plugin/package.json @@ -16,6 +16,7 @@ "@types/react": "17.0.39", "@types/react-color": "^3.0.6", "@types/react-dom": "^17.0.13", + "dayjs": "^1.11.9", "eventemitter3": "^4.0.7", "flipper-common": "0.0.0", "flipper-plugin-core": "0.0.0", diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchAbsoluteDateTerm.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchAbsoluteDateTerm.tsx new file mode 100644 index 000000000..c74e511ca --- /dev/null +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchAbsoluteDateTerm.tsx @@ -0,0 +1,75 @@ +/** + * Copyright (c) Meta Platforms, Inc. and 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 {DatePicker, DatePickerProps} from 'antd'; +import React from 'react'; + +type PowerSearchAbsoluteTermProps = { + onCancel: () => void; + onChange: (value: Date) => void; + dateOnly?: boolean; + minValue?: Date; + maxValue?: Date; +}; + +export const DATE_ONLY_FORMAT = 'YYYY-MM-DD'; +export const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'; + +export const PowerSearchAbsoluteDateTerm: React.FC< + PowerSearchAbsoluteTermProps +> = ({onCancel, onChange, dateOnly, minValue, maxValue}) => { + const disabledDate: DatePickerProps['disabledDate'] = React.useCallback( + (date) => { + if (minValue !== undefined && date < minValue) { + return true; + } + if (maxValue !== undefined && date > maxValue) { + return true; + } + return false; + }, + [minValue, maxValue], + ); + + const format = dateOnly ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'; + + const valueRef = React.useRef(); + + return ( + { + if (!newValue) { + onCancel(); + return; + } + + const newDate = newValue.toDate(); + valueRef.current = newDate; + onChange(newDate); + }} + onKeyDown={(event) => { + if (event.key === 'Escape') { + onCancel(); + } + }} + onBlur={() => { + if (!valueRef.current) { + onCancel(); + } + }} + disabledDate={disabledDate} + showTime={!dateOnly} + defaultOpen + /> + ); +}; diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchConfig.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchConfig.tsx index 57afa7214..f1ecc0653 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchConfig.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchConfig.tsx @@ -35,7 +35,6 @@ export type AbsoluteDateOperatorConfig = { dateOnly?: boolean; minValue?: Date; maxValue?: Date; - isNegative?: boolean; }; export type OperatorConfig = diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchExampleConfig.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchExampleConfig.tsx index 8a65e321c..c33da7570 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchExampleConfig.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchExampleConfig.tsx @@ -77,14 +77,12 @@ const operators = { newer_than_absolute_date: { key: 'newer_than_absolute_date', label: 'is after', - isNegative: false, valueType: 'ABSOLUTE_DATE', dateOnly: false, }, newer_than_absolute_date_no_time: { key: 'newer_than_absolute_date_no_time', label: 'is after the day', - isNegative: false, valueType: 'ABSOLUTE_DATE', dateOnly: true, }, @@ -138,6 +136,15 @@ export const powerSearchExampleConfig: PowerSearchConfig = { less_than_float: operators.less_than_float, }, }, + date: { + key: 'date', + label: 'Date', + operators: { + newer_than_absolute_date_no_time: + operators.newer_than_absolute_date_no_time, + newer_than_absolute_date: operators.newer_than_absolute_date, + }, + }, caller: { key: 'caller', label: 'Caller', diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx index f32d67670..5f38f0680 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx @@ -9,7 +9,13 @@ import {CloseOutlined} from '@ant-design/icons'; import {Button, Space} from 'antd'; +import dayjs from 'dayjs'; import * as React from 'react'; +import { + DATE_ONLY_FORMAT, + DATE_TIME_FORMAT, + PowerSearchAbsoluteDateTerm, +} from './PowerSearchAbsoluteDateTerm'; import {FieldConfig, OperatorConfig} from './PowerSearchConfig'; import {PowerSearchEnumTerm} from './PowerSearchEnumTerm'; import {PowerSearchFloatTerm} from './PowerSearchFloatTerm'; @@ -101,10 +107,26 @@ export const PowerSearchTerm: React.FC = ({ ); break; } + case 'ABSOLUTE_DATE': { + searchValueComponent = ( + { + onFinalize({ + ...searchTerm, + searchValue: newValue, + }); + }} + minValue={searchTerm.operator.minValue} + maxValue={searchTerm.operator.maxValue} + dateOnly={searchTerm.operator.dateOnly} + /> + ); + break; + } default: { console.error( - 'PowerSearchTerm -> unknownoperator.valueType', - searchTerm.operator.valueType, + 'PowerSearchTerm -> unknown operator.valueType', searchTerm, ); } @@ -119,6 +141,16 @@ export const PowerSearchTerm: React.FC = ({ ); break; } + case 'ABSOLUTE_DATE': { + searchValueComponent = ( + + ); + break; + } case 'NO_VALUE': { searchValueComponent = null; break; diff --git a/desktop/yarn.lock b/desktop/yarn.lock index fdb59e94f..c43666164 100644 --- a/desktop/yarn.lock +++ b/desktop/yarn.lock @@ -6836,6 +6836,11 @@ dayjs@1.x: resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468" integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig== +dayjs@^1.11.9: + version "1.11.9" + resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.9.tgz#9ca491933fadd0a60a2c19f6c237c03517d71d1a" + integrity sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA== + debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9, debug@~2.6.3: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"