From 4aada7e45e14ff129f3769d8166e9620520193f2 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Thu, 17 Nov 2022 16:15:07 -0500 Subject: [PATCH 01/14] [EuiSuperDatePicker] Created the customQuickSelectRender prop EuiSuperDatePicker. This prop allows consumers to control the order in which the panels within the Quick Select menu are displayed. This is an optional prop that returns the panels, but if the prop is not provided, the panels will appear in the default order (Commonly Used Ranges, Recently Used Ranges, and Custom Panels). --- .../quick_select_popover.tsx | 55 +++++++++++++++---- .../super_date_picker/super_date_picker.tsx | 22 +++++++- 2 files changed, 65 insertions(+), 12 deletions(-) diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx index 901cc581155..08c3e61ec5e 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { Component, Fragment } from 'react'; +import React, { Component, Fragment, ReactNode, ReactElement } from 'react'; import { EuiButtonEmpty } from '../../../button'; import { EuiIcon } from '../../../icon'; @@ -33,6 +33,11 @@ export interface EuiQuickSelectPopoverProps { applyTime: ApplyTime; commonlyUsedRanges: DurationRange[]; customQuickSelectPanels?: QuickSelectPanel[]; + customQuickSelectRender?: ( + commonlyUsedTimes: ReactElement, + recentlyUsedTimes: ReactElement, + customQuickSelectPanels?: ReactElement + ) => ReactNode; dateFormat: string; end: string; isDisabled: boolean; @@ -92,23 +97,22 @@ export class EuiQuickSelectPopover extends Component< recentlyUsedRanges, start, timeOptions, + customQuickSelectRender, } = this.props; const { prevQuickSelect } = this.state; - return ( - - + const commonlyUsedRangesElement = ( + <> {commonlyUsedRanges.length > 0 && } + + ); + + const recentlyUsedRangesElement = ( + <> {recentlyUsedRanges.length > 0 && } - {this.renderCustomQuickSelectPanels()} + + ); + + const customQuickSelectPanelsElement = ( + <>{this.renderCustomQuickSelectPanels()} + ); + + return ( + + + + {customQuickSelectRender ? ( + customQuickSelectRender( + commonlyUsedRangesElement, + recentlyUsedRangesElement, + customQuickSelectPanelsElement + ) + ) : ( + <> + {commonlyUsedRangesElement} + {recentlyUsedRangesElement} + {customQuickSelectPanelsElement} + + )} ); }; diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx index 13d1796a204..005627af291 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -6,7 +6,13 @@ * Side Public License, v 1. */ -import React, { Component, FocusEventHandler, FunctionComponent } from 'react'; +import React, { + Component, + FocusEventHandler, + FunctionComponent, + ReactNode, + ReactElement, +} from 'react'; import classNames from 'classnames'; import moment, { LocaleSpecifier } from 'moment'; // eslint-disable-line import/named import dateMath from '@elastic/datemath'; @@ -43,6 +49,9 @@ import { EuiAutoRefreshButton, } from '../auto_refresh/auto_refresh'; +import { EuiCommonlyUsedTimeRanges } from './quick_select_popover/commonly_used_time_ranges'; +import { EuiRecentlyUsed } from './quick_select_popover/recently_used'; + export interface OnTimeChangeProps extends DurationRange { isInvalid: boolean; isQuickSelection: boolean; @@ -56,6 +65,15 @@ export type EuiSuperDatePickerProps = CommonProps & { commonlyUsedRanges?: DurationRange[]; customQuickSelectPanels?: QuickSelectPanel[]; + /** + * A function that allows the Quick Select panels to render in a custom order + */ + customQuickSelectRender?: ( + commonlyUsedTimes: ReactElement, + recentlyUsedTimes: ReactElement, + customQuickSelectPanels?: ReactElement + ) => ReactNode; + /** * Specifies the formatted used when displaying dates and/or datetimes */ @@ -536,6 +554,7 @@ export class EuiSuperDatePickerInternal extends Component< commonlyUsedRanges, timeOptions, customQuickSelectPanels, + customQuickSelectRender, dateFormat, end, isAutoRefreshOnly, @@ -575,6 +594,7 @@ export class EuiSuperDatePickerInternal extends Component< applyTime={this.applyQuickTime} commonlyUsedRanges={commonlyUsedRanges} customQuickSelectPanels={customQuickSelectPanels} + customQuickSelectRender={customQuickSelectRender} dateFormat={dateFormat} end={end} isDisabled={isDisabled} From cc095ff9257b5bc6118a8088ba78cd061b97ade9 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 18 Nov 2022 09:59:10 -0500 Subject: [PATCH 02/14] [EuiSuperDatePicker] -Add EuiQuickSelect to the list of components that can be ordered with customQuickSelectRender - Updated cusomQuickSelectRender parameter to accept a single object containing all components that can be reordered --- .../quick_select_popover.tsx | 52 ++++++++++++------- .../super_date_picker/super_date_picker.tsx | 13 ++--- 2 files changed, 37 insertions(+), 28 deletions(-) diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx index 08c3e61ec5e..116dad5a05d 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx @@ -28,15 +28,20 @@ import { QuickSelectPanel, } from '../../types'; +export type CustomQuickSelectRenderOptions = { + quickSelect: ReactElement; + commonlyUsedTimes: ReactElement; + recentlyUsedTimes: ReactElement; + customQuickSelectPanels?: ReactElement; +}; + export interface EuiQuickSelectPopoverProps { applyRefreshInterval?: ApplyRefreshInterval; applyTime: ApplyTime; commonlyUsedRanges: DurationRange[]; customQuickSelectPanels?: QuickSelectPanel[]; customQuickSelectRender?: ( - commonlyUsedTimes: ReactElement, - recentlyUsedTimes: ReactElement, - customQuickSelectPanels?: ReactElement + options: CustomQuickSelectRenderOptions ) => ReactNode; dateFormat: string; end: string; @@ -101,7 +106,20 @@ export class EuiQuickSelectPopover extends Component< } = this.props; const { prevQuickSelect } = this.state; - const commonlyUsedRangesElement = ( + const quickSelectElement = ( + <> + {customQuickSelectRender && } + + + ); + + const commonlyUsedElement = ( <> {commonlyUsedRanges.length > 0 && } ); - const recentlyUsedRangesElement = ( + const recentlyUsedElement = ( <> {recentlyUsedRanges.length > 0 && } - - {customQuickSelectRender ? ( - customQuickSelectRender( - commonlyUsedRangesElement, - recentlyUsedRangesElement, - customQuickSelectPanelsElement - ) + customQuickSelectRender({ + quickSelect: quickSelectElement, + commonlyUsedTimes: commonlyUsedElement, + recentlyUsedTimes: recentlyUsedElement, + customQuickSelectPanels: customQuickSelectPanelsElement, + }) ) : ( <> - {commonlyUsedRangesElement} - {recentlyUsedRangesElement} + {quickSelectElement} + {commonlyUsedElement} + {recentlyUsedElement} {customQuickSelectPanelsElement} )} diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx index 005627af291..ae956b220fc 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -11,7 +11,6 @@ import React, { FocusEventHandler, FunctionComponent, ReactNode, - ReactElement, } from 'react'; import classNames from 'classnames'; import moment, { LocaleSpecifier } from 'moment'; // eslint-disable-line import/named @@ -40,7 +39,10 @@ import { EuiSuperUpdateButton, EuiSuperUpdateButtonProps, } from './super_update_button'; -import { EuiQuickSelectPopover } from './quick_select_popover/quick_select_popover'; +import { + EuiQuickSelectPopover, + CustomQuickSelectRenderOptions, +} from './quick_select_popover/quick_select_popover'; import { EuiDatePopoverButton } from './date_popover/date_popover_button'; import { EuiDatePopoverContentProps } from './date_popover/date_popover_content'; @@ -49,9 +51,6 @@ import { EuiAutoRefreshButton, } from '../auto_refresh/auto_refresh'; -import { EuiCommonlyUsedTimeRanges } from './quick_select_popover/commonly_used_time_ranges'; -import { EuiRecentlyUsed } from './quick_select_popover/recently_used'; - export interface OnTimeChangeProps extends DurationRange { isInvalid: boolean; isQuickSelection: boolean; @@ -69,9 +68,7 @@ export type EuiSuperDatePickerProps = CommonProps & { * A function that allows the Quick Select panels to render in a custom order */ customQuickSelectRender?: ( - commonlyUsedTimes: ReactElement, - recentlyUsedTimes: ReactElement, - customQuickSelectPanels?: ReactElement + options: CustomQuickSelectRenderOptions ) => ReactNode; /** From 52c3c130da5b73ce8342d0c2d1d8d9dc2c17cbc8 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 18 Nov 2022 16:48:52 -0500 Subject: [PATCH 03/14] [EuiSuperDatePicker] - Add refreshInterval to the list of components that can be customized via customQuickSelectRender --- .../_quick_select_popover.scss | 9 ++ .../commonly_used_time_ranges.tsx | 18 ++-- .../quick_select_popover.tsx | 83 ++++++++----------- 3 files changed, 54 insertions(+), 56 deletions(-) diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss index 4758040c944..fd86ce1763c 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss +++ b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss @@ -1,6 +1,15 @@ .euiQuickSelectPopover__content { width: $euiFormMaxWidth; max-width: 100%; + + // Add border between customQuickSelect sections + > *:first-child { + padding-bottom: $euiSizeM; + } + > *:not(:first-child) { + border-top: $euiBorderThin; + padding: $euiSizeM 0; + } } .euiQuickSelectPopover__section { diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx index bfa92afbc46..7aea735fca0 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx @@ -46,14 +46,16 @@ export const EuiCommonlyUsedTimeRanges: FunctionComponent - - - - - + + + + + + +
; recentlyUsedTimes: ReactElement; customQuickSelectPanels?: ReactElement; + applyRefreshIntervalPanel?: ReactElement; }; export interface EuiQuickSelectPopoverProps { @@ -94,7 +94,7 @@ export class EuiQuickSelectPopover extends Component< } }; - renderDateTimeSections = () => { + renderQuickSelectMenuSections = () => { const { commonlyUsedRanges, dateFormat, @@ -103,48 +103,49 @@ export class EuiQuickSelectPopover extends Component< start, timeOptions, customQuickSelectRender, + applyRefreshInterval, + isPaused, + refreshInterval, } = this.props; const { prevQuickSelect } = this.state; const quickSelectElement = ( - <> - {customQuickSelectRender && } - - + ); const commonlyUsedElement = ( - <> - {commonlyUsedRanges.length > 0 && } - - + ); const recentlyUsedElement = ( - <> - {recentlyUsedRanges.length > 0 && } - - + ); const customQuickSelectPanelsElement = ( <>{this.renderCustomQuickSelectPanels()} ); + const refreshIntervalElement = applyRefreshInterval && ( + + ); return ( {customQuickSelectRender ? ( @@ -153,6 +154,7 @@ export class EuiQuickSelectPopover extends Component< commonlyUsedTimes: commonlyUsedElement, recentlyUsedTimes: recentlyUsedElement, customQuickSelectPanels: customQuickSelectPanelsElement, + applyRefreshIntervalPanel: refreshIntervalElement, }) ) : ( <> @@ -160,6 +162,7 @@ export class EuiQuickSelectPopover extends Component< {commonlyUsedElement} {recentlyUsedElement} {customQuickSelectPanelsElement} + {applyRefreshInterval && refreshIntervalElement} )} @@ -174,26 +177,20 @@ export class EuiQuickSelectPopover extends Component< return customQuickSelectPanels.map(({ title, content }) => { return ( - - +
{title} {React.cloneElement(content, { applyTime: this.applyTime })} - +
); }); }; render() { - const { - applyRefreshInterval, - isDisabled, - isPaused, - refreshInterval, - } = this.props; + const { isDisabled } = this.props; const { isOpen } = this.state; const quickSelectButton = ( @@ -224,17 +221,7 @@ export class EuiQuickSelectPopover extends Component< className="euiQuickSelectPopover__content" data-test-subj="superDatePickerQuickMenu" > - {this.renderDateTimeSections()} - {applyRefreshInterval && ( - <> - - - - )} + {this.renderQuickSelectMenuSections()}
); From e1220a363313cd359c293ab627c440ee39528b52 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 18 Nov 2022 17:10:03 -0500 Subject: [PATCH 04/14] [EuiSuperDatePicker] Update snapshots for quickSelectPopover as the horizontal rules have been removed. Added test cases for customQuickSelectPanels and customQuickSelectRender props --- .../quick_select_popover.test.tsx.snap | 277 +++++++++++++++++- .../quick_select_popover.test.tsx | 131 +++++++++ .../quick_select_popover.tsx | 2 +- 3 files changed, 401 insertions(+), 9 deletions(-) diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap index 4feff58fb70..0fb9c32efb5 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap +++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap @@ -208,9 +208,6 @@ exports[`EuiQuickSelectPopover is rendered 1`] = ` } } /> - - - + + +`; + +exports[`EuiQuickSelectPopover props customQuickSelectPanels should render custom panels 1`] = ` + + + + } + closePopover={[Function]} + display="inline-block" + hasArrow={true} + isOpen={false} + ownFocus={true} + panelPaddingSize="m" +> +
+ + + +
+ + + My custom panel + + + + + +
`; diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx index 7389468739c..f5546c3a97b 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx @@ -15,8 +15,38 @@ import { EuiQuickSelectPopoverProps, } from './quick_select_popover'; +import { ApplyTime } from '../../types'; +import { EuiLink } from '../../../link'; + +import { EuiQuickSelect } from './quick_select'; +import { EuiCommonlyUsedTimeRanges } from './commonly_used_time_ranges'; +import { EuiRecentlyUsed } from './recently_used'; +import { EuiRefreshInterval } from '../../auto_refresh/refresh_interval'; + const noop = () => {}; +function MyCustomQuickSelectPanel({ applyTime }: { applyTime?: ApplyTime }) { + function applyMyCustomTime() { + applyTime!({ start: 'now-30d', end: 'now+7d' }); + } + + return ( + + Entire dataset timerange + + ); +} + +const customQuickSelectPanels = [ + { + title: 'My custom panel', + content: , + }, +]; + const defaultProps: Omit = { applyTime: noop, applyRefreshInterval: noop, @@ -41,4 +71,105 @@ describe('EuiQuickSelectPopover', () => { ).dive(); expect(component).toMatchSnapshot(); }); + + describe('props', () => { + describe('customQuickSelectPanels', () => { + it('should render custom panels', () => { + const component = shallow( + + {(timeOptions) => ( + + )} + + ).dive(); + + expect(component).toMatchSnapshot(); + }); + }); + + describe('customQuickSelectRender', () => { + it('should render Quick Select sections in default order when customQuickSelectRender is not present', () => { + const component = shallow( + + {(timeOptions) => ( + + )} + + ).dive(); + + const menu = component.find( + '[data-test-subj="superDatePickerQuickMenu"]' + ); + + expect(menu.children()).toHaveLength(5); + + expect(menu.children().at(0).is(EuiQuickSelect)).toBeTruthy(); + + expect( + menu.children().at(1).is(EuiCommonlyUsedTimeRanges) + ).toBeTruthy(); + + expect(menu.children().at(2).is(EuiRecentlyUsed)).toBeTruthy(); + + expect(menu.children().at(3).is(EuiRefreshInterval)).toBeTruthy(); + + expect(menu.children().at(4).is('div')).toBeTruthy(); + }); + + it('should render Quick Select sections in a custom order customQuickSelectRender is present', () => { + const component = shallow( + + {(timeOptions) => ( + ( + <> + {customQuickSelectPanels} + {applyRefreshIntervalPanel} + {quickSelect} + {commonlyUsedTimes} + {recentlyUsedTimes} + + )} + /> + )} + + ).dive(); + + const menu = component.find( + '[data-test-subj="superDatePickerQuickMenu"]' + ); + + expect(menu.children()).toHaveLength(5); + + expect(menu.children().at(0).is('div')).toBeTruthy(); + + expect(menu.children().at(1).is(EuiRefreshInterval)).toBeTruthy(); + + expect(menu.children().at(2).is(EuiQuickSelect)).toBeTruthy(); + + expect( + menu.children().at(3).is(EuiCommonlyUsedTimeRanges) + ).toBeTruthy(); + + expect(menu.children().at(4).is(EuiRecentlyUsed)).toBeTruthy(); + }); + }); + }); }); diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx index 135594bd57d..12274202eb8 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx @@ -161,8 +161,8 @@ export class EuiQuickSelectPopover extends Component< {quickSelectElement} {commonlyUsedElement} {recentlyUsedElement} - {customQuickSelectPanelsElement} {applyRefreshInterval && refreshIntervalElement} + {customQuickSelectPanelsElement} )} From 59daac14c820fa112fec4939111e30bdbf2e75ab Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 18 Nov 2022 18:12:12 -0500 Subject: [PATCH 05/14] Added documentation for new customQuickSelectRender prop --- ...icker_custom_quick_select_custom_order.tsx | 99 +++++++++++++++++++ .../super_date_picker_example.js | 93 +++++++++++++++++ .../_quick_select_popover.scss | 1 + 3 files changed, 193 insertions(+) create mode 100644 src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx diff --git a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx new file mode 100644 index 00000000000..cc3b68c2fd6 --- /dev/null +++ b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx @@ -0,0 +1,99 @@ +import React, { useState, Fragment } from 'react'; + +import { + EuiSuperDatePicker, + EuiSpacer, + EuiLink, + OnTimeChangeProps, + OnRefreshProps, + ApplyTime, + EuiSuperDatePickerProps, +} from '../../../../src'; + +function MyCustomQuickSelectPanel({ applyTime }: { applyTime?: ApplyTime }) { + function applyMyCustomTime() { + applyTime!({ start: 'now-30d', end: 'now+7d' }); + } + + return ( + Entire dataset timerange + ); +} + +export default () => { + const [recentlyUsedRanges, setRecentlyUsedRanges] = useState< + NonNullable + >([]); + const [isLoading, setIsLoading] = useState(false); + const [start, setStart] = useState('now-30m'); + const [end, setEnd] = useState('now'); + + const onTimeChange = ({ start, end }: OnTimeChangeProps) => { + const recentlyUsedRange = recentlyUsedRanges.filter((recentlyUsedRange) => { + const isDuplicate = + recentlyUsedRange.start === start && recentlyUsedRange.end === end; + return !isDuplicate; + }); + recentlyUsedRange.unshift({ start, end }); + setStart(start); + setEnd(end); + setRecentlyUsedRanges( + recentlyUsedRange.length > 10 + ? recentlyUsedRange.slice(0, 9) + : recentlyUsedRange + ); + setIsLoading(true); + startLoading(); + }; + + const onRefresh = ({ start, end, refreshInterval }: OnRefreshProps) => { + return new Promise((resolve) => { + setTimeout(resolve, 100); + }).then(() => { + console.log(start, end, refreshInterval); + }); + }; + + const startLoading = () => { + setTimeout(stopLoading, 1000); + }; + + const stopLoading = () => { + setIsLoading(false); + }; + + const customQuickSelectPanels = [ + { + title: 'My custom panel', + content: , + }, + ]; + + return ( + + ( + <> + {customQuickSelectPanels} + {quickSelect} + {commonlyUsedTimes} + {recentlyUsedTimes} + + )} + /> + + + ); +}; diff --git a/src-docs/src/views/super_date_picker/super_date_picker_example.js b/src-docs/src/views/super_date_picker/super_date_picker_example.js index bfd1ea09fc1..8640f0f1afc 100644 --- a/src-docs/src/views/super_date_picker/super_date_picker_example.js +++ b/src-docs/src/views/super_date_picker/super_date_picker_example.js @@ -10,6 +10,7 @@ import { EuiLink, EuiText, EuiSuperDatePicker, + EuiBasicTable, } from '../../../../src/components'; import { EuiSuperUpdateButtonProps } from './props'; @@ -27,6 +28,9 @@ const superDatePickerWidthSource = require('!!raw-loader!./super_date_picker_wid import SuperDatePickerCustomQuickSelect from './super_date_picker_custom_quick_select'; const superDatePickerCustomQuickSelectSource = require('!!raw-loader!./super_date_picker_custom_quick_select'); +import SuperDatePickerCustomQuickSelectCustomOrder from './super_date_picker_custom_quick_select_custom_order'; +const superDatePickerCustomQuickSelectCustomOrderSource = require('!!raw-loader!./super_date_picker_custom_quick_select_custom_order'); + import AutoRefresh from './auto_refresh'; const autoRefreshSource = require('!!raw-loader!./auto_refresh'); import AutoRefreshOnly from './auto_refresh_only'; @@ -57,6 +61,69 @@ const superDatePickerCustomQuickSelectSnippet = ` `; +const superDatePickerCustomQuickSelectCustomOrderSnippet = ` ( + <> + {customQuickSelectPanels} + {quickSelect} + {commonlyUsedTimes} + {recentlyUsedTimes} + + )} +/> +`; + +const quickSelectTableColumns = [ + { + field: 'key', + name: 'Key', + }, + { + field: 'controls', + name: 'Panel Controlled', + }, +]; + +const quickSelectTableItems = [ + { + key: 'quickSelect', + controls: 'Quick select', + }, + { + key: 'commonlyUsedTimes', + controls: 'Commonly used', + }, + { + key: 'recentlyUsedTimes', + controls: 'Recently used', + }, + { + key: 'customQuickSelectPanels', + controls: 'Custom panels', + }, + { + key: 'applyRefreshIntervalPanels', + controls: 'Refresh toggles', + }, +]; + export const SuperDatePickerExample = { title: 'Super date picker', intro: ( @@ -218,6 +285,32 @@ if (!endMoment || !endMoment.isValid()) { snippet: superDatePickerCustomQuickSelectSnippet, demo: , }, + { + source: [ + { + type: GuideSectionTypes.TSX, + code: superDatePickerCustomQuickSelectCustomOrderSource, + }, + ], + text: ( + <> +

Customing panel order

+

+ You can optionally pass the{' '} + customQuickSelectRender prop that returns Quick + Select panels and allows you to customize the order of them.{' '} +

+ + + ), + snippet: superDatePickerCustomQuickSelectCustomOrderSnippet, + demo: , + }, { title: 'Sizing', source: [ diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss index fd86ce1763c..920c03db318 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss +++ b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss @@ -6,6 +6,7 @@ > *:first-child { padding-bottom: $euiSizeM; } + > *:not(:first-child) { border-top: $euiBorderThin; padding: $euiSizeM 0; From 6a8fd99bf35f9fdebd3960f40317a4ea4dc2d4ad Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 18 Nov 2022 18:15:33 -0500 Subject: [PATCH 06/14] CHANGELOG --- upcoming_changelogs/6382.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 upcoming_changelogs/6382.md diff --git a/upcoming_changelogs/6382.md b/upcoming_changelogs/6382.md new file mode 100644 index 00000000000..1eb902cad22 --- /dev/null +++ b/upcoming_changelogs/6382.md @@ -0,0 +1 @@ +- Added the `customQuickSelectRender` prop to `EuiSuperDatePicker` which allows the Quick Select panels to be rendered in a custom order \ No newline at end of file From a01df046fe14a232dc5f4fcefca436209597b60a Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Wed, 7 Dec 2022 16:04:11 -0500 Subject: [PATCH 07/14] Misc changes: - Removed new lines between test assertions on test cases - Updated change log text - Corrected typo in new docs example --- .../super_date_picker/super_date_picker_example.js | 2 +- .../quick_select_popover/quick_select_popover.test.tsx | 10 ---------- .../super_date_picker/super_date_picker.tsx | 5 +++-- upcoming_changelogs/6382.md | 2 +- 4 files changed, 5 insertions(+), 14 deletions(-) diff --git a/src-docs/src/views/super_date_picker/super_date_picker_example.js b/src-docs/src/views/super_date_picker/super_date_picker_example.js index 8640f0f1afc..e203543c30e 100644 --- a/src-docs/src/views/super_date_picker/super_date_picker_example.js +++ b/src-docs/src/views/super_date_picker/super_date_picker_example.js @@ -294,7 +294,7 @@ if (!endMoment || !endMoment.isValid()) { ], text: ( <> -

Customing panel order

+

Customizing panel order

You can optionally pass the{' '} customQuickSelectRender prop that returns Quick diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx index f5546c3a97b..a3c76e6552f 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx @@ -110,17 +110,12 @@ describe('EuiQuickSelectPopover', () => { ); expect(menu.children()).toHaveLength(5); - expect(menu.children().at(0).is(EuiQuickSelect)).toBeTruthy(); - expect( menu.children().at(1).is(EuiCommonlyUsedTimeRanges) ).toBeTruthy(); - expect(menu.children().at(2).is(EuiRecentlyUsed)).toBeTruthy(); - expect(menu.children().at(3).is(EuiRefreshInterval)).toBeTruthy(); - expect(menu.children().at(4).is('div')).toBeTruthy(); }); @@ -157,17 +152,12 @@ describe('EuiQuickSelectPopover', () => { ); expect(menu.children()).toHaveLength(5); - expect(menu.children().at(0).is('div')).toBeTruthy(); - expect(menu.children().at(1).is(EuiRefreshInterval)).toBeTruthy(); - expect(menu.children().at(2).is(EuiQuickSelect)).toBeTruthy(); - expect( menu.children().at(3).is(EuiCommonlyUsedTimeRanges) ).toBeTruthy(); - expect(menu.children().at(4).is(EuiRecentlyUsed)).toBeTruthy(); }); }); diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx index ae956b220fc..8a78a92530b 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -64,8 +64,9 @@ export type EuiSuperDatePickerProps = CommonProps & { commonlyUsedRanges?: DurationRange[]; customQuickSelectPanels?: QuickSelectPanel[]; - /** - * A function that allows the Quick Select panels to render in a custom order + /* An optional render prop function that allows customizing the display of the Quick Select menu. + * This function passes all default quick select panels within an object, allowing you to + * re-order panels, omit certain panels entirely, or pass in your own fully custom content. */ customQuickSelectRender?: ( options: CustomQuickSelectRenderOptions diff --git a/upcoming_changelogs/6382.md b/upcoming_changelogs/6382.md index 1eb902cad22..b33f35c518f 100644 --- a/upcoming_changelogs/6382.md +++ b/upcoming_changelogs/6382.md @@ -1 +1 @@ -- Added the `customQuickSelectRender` prop to `EuiSuperDatePicker` which allows the Quick Select panels to be rendered in a custom order \ No newline at end of file +- Added the `customQuickSelectRender` render prop to `EuiSuperDatePicker`, which allows customizing the Quick Select popover \ No newline at end of file From 2aa12bded5904a0b4586bd984d46c52fb706521f Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Thu, 15 Dec 2022 11:31:40 -0500 Subject: [PATCH 08/14] Updated documentation for Quick Select Panel reordering. Removed the table with panel keys and implemented toggles to control each panel in the example. --- ...icker_custom_quick_select_custom_order.tsx | 87 +++++++++++++++++-- .../super_date_picker_example.js | 41 --------- 2 files changed, 81 insertions(+), 47 deletions(-) diff --git a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx index cc3b68c2fd6..3ab79db3510 100644 --- a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx +++ b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx @@ -2,10 +2,12 @@ import React, { useState, Fragment } from 'react'; import { EuiSuperDatePicker, + EuiSwitch, EuiSpacer, EuiLink, OnTimeChangeProps, OnRefreshProps, + OnRefreshChangeProps, ApplyTime, EuiSuperDatePickerProps, } from '../../../../src'; @@ -21,6 +23,32 @@ function MyCustomQuickSelectPanel({ applyTime }: { applyTime?: ApplyTime }) { } export default () => { + const [showQuickSelectPanel, setShowQuickSelectPanel] = useState(true); + const [showCustomQuickSelectPanel, setShowCustomQuickSelectPanel] = useState( + true + ); + const [showRecentlyUsed, setShowRecentlyUsed] = useState(true); + const [showCommonlyUsed, setCommonlyUsed] = useState(true); + const [showApplyRefreshInterval, setApplyRefreshInterval] = useState(true); + const [refreshInterval, setRefreshInterval] = useState(1000); + const [isPaused, setIsPaused] = useState(true); + + const toggleShowQuickSelectPanel = () => { + setShowQuickSelectPanel(!showQuickSelectPanel); + }; + const toggleShowCustomQuickSelectPanel = () => { + setShowCustomQuickSelectPanel(!showCustomQuickSelectPanel); + }; + const toggleShowRecentlyUsed = () => { + setShowRecentlyUsed(!showRecentlyUsed); + }; + const toggleShowCommonlyUsed = () => { + setCommonlyUsed(!showCommonlyUsed); + }; + const toggleShowApplyRefreshInterval = () => { + setApplyRefreshInterval(!showApplyRefreshInterval); + }; + const [recentlyUsedRanges, setRecentlyUsedRanges] = useState< NonNullable >([]); @@ -54,6 +82,14 @@ export default () => { }); }; + const onRefreshChange = ({ + isPaused, + refreshInterval, + }: OnRefreshChangeProps) => { + setIsPaused(isPaused); + setRefreshInterval(refreshInterval); + }; + const startLoading = () => { setTimeout(stopLoading, 1000); }; @@ -71,25 +107,64 @@ export default () => { return ( + + + + + + + + + + + ( <> - {customQuickSelectPanels} - {quickSelect} - {commonlyUsedTimes} - {recentlyUsedTimes} + {showCustomQuickSelectPanel ? customQuickSelectPanels : undefined} + {showCommonlyUsed ? commonlyUsedTimes : undefined} + {showRecentlyUsed ? recentlyUsedTimes : undefined} + {showQuickSelectPanel ? quickSelect : undefined} + {showApplyRefreshInterval ? applyRefreshIntervalPanel : undefined} )} /> diff --git a/src-docs/src/views/super_date_picker/super_date_picker_example.js b/src-docs/src/views/super_date_picker/super_date_picker_example.js index e203543c30e..d49b8cea0b2 100644 --- a/src-docs/src/views/super_date_picker/super_date_picker_example.js +++ b/src-docs/src/views/super_date_picker/super_date_picker_example.js @@ -10,7 +10,6 @@ import { EuiLink, EuiText, EuiSuperDatePicker, - EuiBasicTable, } from '../../../../src/components'; import { EuiSuperUpdateButtonProps } from './props'; @@ -90,40 +89,6 @@ const superDatePickerCustomQuickSelectCustomOrderSnippet = ` `; -const quickSelectTableColumns = [ - { - field: 'key', - name: 'Key', - }, - { - field: 'controls', - name: 'Panel Controlled', - }, -]; - -const quickSelectTableItems = [ - { - key: 'quickSelect', - controls: 'Quick select', - }, - { - key: 'commonlyUsedTimes', - controls: 'Commonly used', - }, - { - key: 'recentlyUsedTimes', - controls: 'Recently used', - }, - { - key: 'customQuickSelectPanels', - controls: 'Custom panels', - }, - { - key: 'applyRefreshIntervalPanels', - controls: 'Refresh toggles', - }, -]; - export const SuperDatePickerExample = { title: 'Super date picker', intro: ( @@ -300,12 +265,6 @@ if (!endMoment || !endMoment.isValid()) { customQuickSelectRender prop that returns Quick Select panels and allows you to customize the order of them.{' '}

- ), snippet: superDatePickerCustomQuickSelectCustomOrderSnippet, From 66430c38260613d0284cccee800403ce4f70a34f Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 16 Dec 2022 14:22:37 -0500 Subject: [PATCH 09/14] Revised the styling used to target Quick Select Panels and add a bottom border by removing wildcard selectors. Updated Quick Select Popover tests to use RTL render for better debugging --- .../auto_refresh/refresh_interval.tsx | 2 +- .../__snapshots__/quick_select.test.tsx.snap | 8 +- .../quick_select_popover.test.tsx.snap | 387 ++++++------------ .../_quick_select_popover.scss | 18 +- .../commonly_used_time_ranges.tsx | 20 +- .../quick_select_popover/quick_select.tsx | 2 +- .../quick_select_popover.test.tsx | 5 +- .../quick_select_popover.tsx | 2 +- .../quick_select_popover/recently_used.tsx | 4 +- 9 files changed, 158 insertions(+), 290 deletions(-) diff --git a/src/components/date_picker/auto_refresh/refresh_interval.tsx b/src/components/date_picker/auto_refresh/refresh_interval.tsx index 9330fb1d7e1..86e4830e017 100644 --- a/src/components/date_picker/auto_refresh/refresh_interval.tsx +++ b/src/components/date_picker/auto_refresh/refresh_interval.tsx @@ -208,7 +208,7 @@ export class EuiRefreshInterval extends Component< return ( {({ refreshUnitsOptions }) => ( -
+
+
+
- - - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" -> -
- - - - +Object { + "asFragment": [Function], + "baseElement": +
+
+
+ +
+
+
+ , + "container":
- - - My custom panel - - - - - + +
-
- + , + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByTestSubject": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByTestSubject": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByTestSubject": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByTestSubject": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByTestSubject": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByTestSubject": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} `; diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss index 6c0f49566b5..0ca7a8e3c85 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss +++ b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss @@ -2,14 +2,17 @@ width: $euiFormMaxWidth; max-width: 100%; - // Add border between customQuickSelect sections - > *:first-child { - padding-bottom: $euiSizeM; - } + .euiQuickSelectPopover__panel { + &:not(:first-child) { + border-top: $euiBorderThin; + padding-top: $euiSizeM; + margin-top: $euiSizeM; + } - > *:not(:first-child) { - border-top: $euiBorderThin; - padding: $euiSizeM 0; + .euiQuickSelectPopover__panelTitle { + float: left; + margin-bottom: $euiSizeM; + } } } @@ -19,6 +22,7 @@ overflow: hidden; overflow-y: auto; margin: $euiSizeS 0 0; + clear: both; } .euiQuickSelectPopover__buttonText { diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx index 7aea735fca0..dd152aca945 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx @@ -45,17 +45,15 @@ export const EuiCommonlyUsedTimeRanges: FunctionComponent - - - - - - - +
+ + + + +
+
{ describe('props', () => { describe('customQuickSelectPanels', () => { it('should render custom panels', () => { - const component = shallow( + const component = render( {(timeOptions) => ( { /> )} - ).dive(); + ); expect(component).toMatchSnapshot(); }); diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx index 12274202eb8..12f0164320f 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx @@ -177,7 +177,7 @@ export class EuiQuickSelectPopover extends Component< return customQuickSelectPanels.map(({ title, content }) => { return ( -
+
{title} diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx index 8c7dd5ceb5c..1734c9582b5 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx @@ -56,9 +56,9 @@ export const EuiRecentlyUsed: FunctionComponent = ({ }); return ( -
+
- + Date: Mon, 19 Dec 2022 10:09:07 -0800 Subject: [PATCH 10/14] [minor] fix docblock comment style --- .../date_picker/super_date_picker/super_date_picker.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx index 8a78a92530b..a3c84150e4c 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -64,7 +64,8 @@ export type EuiSuperDatePickerProps = CommonProps & { commonlyUsedRanges?: DurationRange[]; customQuickSelectPanels?: QuickSelectPanel[]; - /* An optional render prop function that allows customizing the display of the Quick Select menu. + /** + * An optional render prop function that allows customizing the display of the Quick Select menu. * This function passes all default quick select panels within an object, allowing you to * re-order panels, omit certain panels entirely, or pass in your own fully custom content. */ From 7d8850753e30053592df7f0e6128ea754fc7cd0c Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 19 Dec 2022 10:57:56 -0800 Subject: [PATCH 11/14] Name `refreshInterval` arg more succinctly - the `apply` verb isn't really useful or meaningful here, so let's remove it - `Panel` isn't a suffix we're using for any other props other than the existing `customQuickSelectPanels` name, so let's keep it succinct + remove unnecessary extra `applyRefreshInterval &&` conditional (it's already checked in the `refreshIntervalElement` definition) --- ...e_picker_custom_quick_select_custom_order.tsx | 16 ++++++++-------- .../quick_select_popover.test.tsx | 4 ++-- .../quick_select_popover.tsx | 7 ++++--- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx index 3ab79db3510..a4e56468b2b 100644 --- a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx +++ b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx @@ -29,7 +29,7 @@ export default () => { ); const [showRecentlyUsed, setShowRecentlyUsed] = useState(true); const [showCommonlyUsed, setCommonlyUsed] = useState(true); - const [showApplyRefreshInterval, setApplyRefreshInterval] = useState(true); + const [showRefreshInterval, setShowRefreshInterval] = useState(true); const [refreshInterval, setRefreshInterval] = useState(1000); const [isPaused, setIsPaused] = useState(true); @@ -45,8 +45,8 @@ export default () => { const toggleShowCommonlyUsed = () => { setCommonlyUsed(!showCommonlyUsed); }; - const toggleShowApplyRefreshInterval = () => { - setApplyRefreshInterval(!showApplyRefreshInterval); + const toggleShowRefreshInterval = () => { + setShowRefreshInterval(!showRefreshInterval); }; const [recentlyUsedRanges, setRecentlyUsedRanges] = useState< @@ -132,9 +132,9 @@ export default () => { /> @@ -157,14 +157,14 @@ export default () => { commonlyUsedTimes, recentlyUsedTimes, customQuickSelectPanels, - applyRefreshIntervalPanel, + refreshInterval, }) => ( <> {showCustomQuickSelectPanel ? customQuickSelectPanels : undefined} {showCommonlyUsed ? commonlyUsedTimes : undefined} {showRecentlyUsed ? recentlyUsedTimes : undefined} {showQuickSelectPanel ? quickSelect : undefined} - {showApplyRefreshInterval ? applyRefreshIntervalPanel : undefined} + {showRefreshInterval ? refreshInterval : undefined} )} /> diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx index cdd71b2d2fe..e6e8875d00f 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx @@ -129,7 +129,7 @@ describe('EuiQuickSelectPopover', () => { timeOptions={timeOptions} customQuickSelectPanels={customQuickSelectPanels} customQuickSelectRender={({ - applyRefreshIntervalPanel, + refreshInterval, quickSelect, commonlyUsedTimes, recentlyUsedTimes, @@ -137,7 +137,7 @@ describe('EuiQuickSelectPopover', () => { }) => ( <> {customQuickSelectPanels} - {applyRefreshIntervalPanel} + {refreshInterval} {quickSelect} {commonlyUsedTimes} {recentlyUsedTimes} diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx index 12f0164320f..ac5ccf7ba0b 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx @@ -32,7 +32,7 @@ export type CustomQuickSelectRenderOptions = { commonlyUsedTimes: ReactElement; recentlyUsedTimes: ReactElement; customQuickSelectPanels?: ReactElement; - applyRefreshIntervalPanel?: ReactElement; + refreshInterval?: ReactElement; }; export interface EuiQuickSelectPopoverProps { @@ -146,6 +146,7 @@ export class EuiQuickSelectPopover extends Component< refreshInterval={refreshInterval} /> ); + return ( {customQuickSelectRender ? ( @@ -154,14 +155,14 @@ export class EuiQuickSelectPopover extends Component< commonlyUsedTimes: commonlyUsedElement, recentlyUsedTimes: recentlyUsedElement, customQuickSelectPanels: customQuickSelectPanelsElement, - applyRefreshIntervalPanel: refreshIntervalElement, + refreshInterval: refreshIntervalElement, }) ) : ( <> {quickSelectElement} {commonlyUsedElement} {recentlyUsedElement} - {applyRefreshInterval && refreshIntervalElement} + {refreshIntervalElement} {customQuickSelectPanelsElement} )} From 3566552e9d15e7a4ede59f8b68d09ec44996afbd Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 19 Dec 2022 12:00:56 -0800 Subject: [PATCH 12/14] Documentation changes - rename file name to more clearly denote prop being documented, update copy to reflect full usage - remove demo TS and static snippet in favor of a dynamically generated code block that reflects toggle state and demonstrates API/usage more succinctly - clean up toggle display and and labels - add toggle example of completely custom content --- ...ate_picker_custom_quick_select_render.tsx} | 149 ++++++++++++++---- .../super_date_picker_example.js | 48 +----- 2 files changed, 122 insertions(+), 75 deletions(-) rename src-docs/src/views/super_date_picker/{super_date_picker_custom_quick_select_custom_order.tsx => super_date_picker_custom_quick_select_render.tsx} (59%) diff --git a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_render.tsx similarity index 59% rename from src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx rename to src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_render.tsx index a4e56468b2b..06f0049da65 100644 --- a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx +++ b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_render.tsx @@ -1,10 +1,14 @@ -import React, { useState, Fragment } from 'react'; +import React, { useState } from 'react'; import { EuiSuperDatePicker, EuiSwitch, EuiSpacer, EuiLink, + EuiTitle, + EuiCode, + EuiCodeBlock, + EuiFlexGrid, OnTimeChangeProps, OnRefreshProps, OnRefreshChangeProps, @@ -30,6 +34,7 @@ export default () => { const [showRecentlyUsed, setShowRecentlyUsed] = useState(true); const [showCommonlyUsed, setCommonlyUsed] = useState(true); const [showRefreshInterval, setShowRefreshInterval] = useState(true); + const [showCustomContent, setShowCustomContent] = useState(false); const [refreshInterval, setRefreshInterval] = useState(1000); const [isPaused, setIsPaused] = useState(true); @@ -48,6 +53,9 @@ export default () => { const toggleShowRefreshInterval = () => { setShowRefreshInterval(!showRefreshInterval); }; + const toggleShowCustomContent = () => { + setShowCustomContent(!showCustomContent); + }; const [recentlyUsedRanges, setRecentlyUsedRanges] = useState< NonNullable @@ -105,38 +113,103 @@ export default () => { }, ]; - return ( - - - - - - - - - - + const snippet = `const customQuickSelectRender = ({ + quickSelect, + commonlyUsedTimes, + recentlyUsedTimes, + refreshInterval, + customQuickSelectPanels, +}) => ( + <>${ + showCustomContent + ? ` + Hello world!` + : '' + }${ + showCustomQuickSelectPanel + ? ` + {customQuickSelectPanels}` + : '' + }${ + showCommonlyUsed + ? ` + {commonlyUsedTimes}` + : '' + }${ + showRecentlyUsed + ? ` + {recentlyUsedTimes}` + : '' + }${ + showQuickSelectPanel + ? ` + {quickSelect}` + : '' + }${ + showRefreshInterval + ? ` + {refreshInterval}` + : '' + } + +); + +`; + return ( + <> + + + Show quickSelect panel + + } + onChange={toggleShowQuickSelectPanel} + checked={showQuickSelectPanel} + /> + + Show recentlyUsedTimes panel + + } + onChange={toggleShowRecentlyUsed} + checked={showRecentlyUsed} + /> + + Show commonlyUsedTimes panel + + } + onChange={toggleShowCommonlyUsed} + checked={showCommonlyUsed} + /> + + Show customQuickSelectPanels + + } + onChange={toggleShowCustomQuickSelectPanel} + checked={showCustomQuickSelectPanel} + /> + + Show refreshInterval panel + + } + onChange={toggleShowRefreshInterval} + checked={showRefreshInterval} + /> + + { refreshInterval, }) => ( <> + {showCustomContent && ( + + Hello world! + + )} {showCustomQuickSelectPanel ? customQuickSelectPanels : undefined} {showCommonlyUsed ? commonlyUsedTimes : undefined} {showRecentlyUsed ? recentlyUsedTimes : undefined} @@ -169,6 +247,11 @@ export default () => { )} /> - + + Example snippet: + + + {snippet} + ); }; diff --git a/src-docs/src/views/super_date_picker/super_date_picker_example.js b/src-docs/src/views/super_date_picker/super_date_picker_example.js index d49b8cea0b2..95e194be0de 100644 --- a/src-docs/src/views/super_date_picker/super_date_picker_example.js +++ b/src-docs/src/views/super_date_picker/super_date_picker_example.js @@ -27,8 +27,7 @@ const superDatePickerWidthSource = require('!!raw-loader!./super_date_picker_wid import SuperDatePickerCustomQuickSelect from './super_date_picker_custom_quick_select'; const superDatePickerCustomQuickSelectSource = require('!!raw-loader!./super_date_picker_custom_quick_select'); -import SuperDatePickerCustomQuickSelectCustomOrder from './super_date_picker_custom_quick_select_custom_order'; -const superDatePickerCustomQuickSelectCustomOrderSource = require('!!raw-loader!./super_date_picker_custom_quick_select_custom_order'); +import SuperDatePickerCustomQuickSelectRender from './super_date_picker_custom_quick_select_render'; import AutoRefresh from './auto_refresh'; const autoRefreshSource = require('!!raw-loader!./auto_refresh'); @@ -60,35 +59,6 @@ const superDatePickerCustomQuickSelectSnippet = ` `; -const superDatePickerCustomQuickSelectCustomOrderSnippet = ` ( - <> - {customQuickSelectPanels} - {quickSelect} - {commonlyUsedTimes} - {recentlyUsedTimes} - - )} -/> -`; - export const SuperDatePickerExample = { title: 'Super date picker', intro: ( @@ -251,24 +221,18 @@ if (!endMoment || !endMoment.isValid()) { demo: , }, { - source: [ - { - type: GuideSectionTypes.TSX, - code: superDatePickerCustomQuickSelectCustomOrderSource, - }, - ], text: ( <> -

Customizing panel order

+

Custom rendering

You can optionally pass the{' '} - customQuickSelectRender prop that returns Quick - Select panels and allows you to customize the order of them.{' '} + customQuickSelectRender prop that passes default + panels as arguments and allows you to re-order panels, omit certain + panels entirely, or pass in your own fully custom content.

), - snippet: superDatePickerCustomQuickSelectCustomOrderSnippet, - demo: , + demo: , }, { title: 'Sizing', From 6c93a670f11a9cc365140babdecaab032b7e532f Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 19 Dec 2022 12:03:16 -0800 Subject: [PATCH 13/14] [naming] Rename `commonly/recentUsed` from `Times` to `Ranges`, to match existing documentation & props --- ...date_picker_custom_quick_select_render.tsx | 20 +++++++++---------- .../quick_select_popover.test.tsx | 8 ++++---- .../quick_select_popover.tsx | 8 ++++---- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_render.tsx b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_render.tsx index 06f0049da65..5df821ea95f 100644 --- a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_render.tsx +++ b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_render.tsx @@ -115,8 +115,8 @@ export default () => { const snippet = `const customQuickSelectRender = ({ quickSelect, - commonlyUsedTimes, - recentlyUsedTimes, + commonlyUsedRanges, + recentlyUsedRanges, refreshInterval, customQuickSelectPanels, }) => ( @@ -133,12 +133,12 @@ export default () => { }${ showCommonlyUsed ? ` - {commonlyUsedTimes}` + {commonlyUsedRanges}` : '' }${ showRecentlyUsed ? ` - {recentlyUsedTimes}` + {recentlyUsedRanges}` : '' }${ showQuickSelectPanel @@ -171,7 +171,7 @@ export default () => { - Show recentlyUsedTimes panel + Show recentlyUsedRanges panel } onChange={toggleShowRecentlyUsed} @@ -180,7 +180,7 @@ export default () => { - Show commonlyUsedTimes panel + Show commonlyUsedRanges panel } onChange={toggleShowCommonlyUsed} @@ -227,8 +227,8 @@ export default () => { onRefreshChange={onRefreshChange} customQuickSelectRender={({ quickSelect, - commonlyUsedTimes, - recentlyUsedTimes, + commonlyUsedRanges, + recentlyUsedRanges, customQuickSelectPanels, refreshInterval, }) => ( @@ -239,8 +239,8 @@ export default () => { )} {showCustomQuickSelectPanel ? customQuickSelectPanels : undefined} - {showCommonlyUsed ? commonlyUsedTimes : undefined} - {showRecentlyUsed ? recentlyUsedTimes : undefined} + {showCommonlyUsed ? commonlyUsedRanges : undefined} + {showRecentlyUsed ? recentlyUsedRanges : undefined} {showQuickSelectPanel ? quickSelect : undefined} {showRefreshInterval ? refreshInterval : undefined} diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx index e6e8875d00f..04f754dd79f 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx @@ -131,16 +131,16 @@ describe('EuiQuickSelectPopover', () => { customQuickSelectRender={({ refreshInterval, quickSelect, - commonlyUsedTimes, - recentlyUsedTimes, + commonlyUsedRanges, + recentlyUsedRanges, customQuickSelectPanels, }) => ( <> {customQuickSelectPanels} {refreshInterval} {quickSelect} - {commonlyUsedTimes} - {recentlyUsedTimes} + {commonlyUsedRanges} + {recentlyUsedRanges} )} /> diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx index ac5ccf7ba0b..43244815ca3 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx @@ -29,8 +29,8 @@ import { export type CustomQuickSelectRenderOptions = { quickSelect: ReactElement; - commonlyUsedTimes: ReactElement; - recentlyUsedTimes: ReactElement; + commonlyUsedRanges: ReactElement; + recentlyUsedRanges: ReactElement; customQuickSelectPanels?: ReactElement; refreshInterval?: ReactElement; }; @@ -152,8 +152,8 @@ export class EuiQuickSelectPopover extends Component< {customQuickSelectRender ? ( customQuickSelectRender({ quickSelect: quickSelectElement, - commonlyUsedTimes: commonlyUsedElement, - recentlyUsedTimes: recentlyUsedElement, + commonlyUsedRanges: commonlyUsedElement, + recentlyUsedRanges: recentlyUsedElement, customQuickSelectPanels: customQuickSelectPanelsElement, refreshInterval: refreshIntervalElement, }) From f1db86b75b785f99f5e8db84d9ed3e981c725e24 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 19 Dec 2022 16:11:01 -0800 Subject: [PATCH 14/14] Refactor EuiQuickSelectPopover to non-class component(s) + fix missing aria i18n + split up the `renderQuickSelectMenuSections` class method into a separate `EuiQuickSelectPanels` sub-component - slightly for code readability, but primarily so our docs can reach in and grab this component and immediately render the quick select content instead of having to open a popover first + fix test snapshots + docs changes: render the quick select content in an `EuiPanel`, remove all logic around actually setting EuiSuperDatePicker date/times, and instead pass in static/mock data (which leaves the focus of the code example on the render prop), and makes it much easier to see how the toggles work without having to open the popover again each time misc docs code cleanup: - remove unnecessary `toggle` fn declarations - just use inline callbacks since they're only used in one place - remove unnecessary ternaries in favor of `&&` --- ...date_picker_custom_quick_select_render.tsx | 209 ++--- .../quick_select_popover.test.tsx.snap | 770 ++++++++++-------- .../quick_select_popover.test.tsx | 212 +++-- .../quick_select_popover.tsx | 310 ++++--- 4 files changed, 740 insertions(+), 761 deletions(-) diff --git a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_render.tsx b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_render.tsx index 5df821ea95f..8764c61d3cc 100644 --- a/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_render.tsx +++ b/src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_render.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { - EuiSuperDatePicker, + EuiPanel, EuiSwitch, EuiSpacer, EuiLink, @@ -9,109 +9,24 @@ import { EuiCode, EuiCodeBlock, EuiFlexGrid, - OnTimeChangeProps, - OnRefreshProps, - OnRefreshChangeProps, - ApplyTime, - EuiSuperDatePickerProps, } from '../../../../src'; -function MyCustomQuickSelectPanel({ applyTime }: { applyTime?: ApplyTime }) { - function applyMyCustomTime() { - applyTime!({ start: 'now-30d', end: 'now+7d' }); - } +import { EuiQuickSelectPanels } from '../../../../src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover'; +import { useI18nTimeOptions } from '../../../../src/components/date_picker/super_date_picker/time_options'; - return ( - Entire dataset timerange - ); -} +// Since we're only demoing how the popover panels render, and not +// actual EuiSuperDatePicker functionality, use noops for brevity +const noop = () => {}; export default () => { + const timeOptions = useI18nTimeOptions(); + const [showQuickSelectPanel, setShowQuickSelectPanel] = useState(true); - const [showCustomQuickSelectPanel, setShowCustomQuickSelectPanel] = useState( - true - ); + const [showCustomPanels, setShowCustomPanels] = useState(true); const [showRecentlyUsed, setShowRecentlyUsed] = useState(true); - const [showCommonlyUsed, setCommonlyUsed] = useState(true); + const [showCommonlyUsed, setShowCommonlyUsed] = useState(true); const [showRefreshInterval, setShowRefreshInterval] = useState(true); const [showCustomContent, setShowCustomContent] = useState(false); - const [refreshInterval, setRefreshInterval] = useState(1000); - const [isPaused, setIsPaused] = useState(true); - - const toggleShowQuickSelectPanel = () => { - setShowQuickSelectPanel(!showQuickSelectPanel); - }; - const toggleShowCustomQuickSelectPanel = () => { - setShowCustomQuickSelectPanel(!showCustomQuickSelectPanel); - }; - const toggleShowRecentlyUsed = () => { - setShowRecentlyUsed(!showRecentlyUsed); - }; - const toggleShowCommonlyUsed = () => { - setCommonlyUsed(!showCommonlyUsed); - }; - const toggleShowRefreshInterval = () => { - setShowRefreshInterval(!showRefreshInterval); - }; - const toggleShowCustomContent = () => { - setShowCustomContent(!showCustomContent); - }; - - const [recentlyUsedRanges, setRecentlyUsedRanges] = useState< - NonNullable - >([]); - const [isLoading, setIsLoading] = useState(false); - const [start, setStart] = useState('now-30m'); - const [end, setEnd] = useState('now'); - - const onTimeChange = ({ start, end }: OnTimeChangeProps) => { - const recentlyUsedRange = recentlyUsedRanges.filter((recentlyUsedRange) => { - const isDuplicate = - recentlyUsedRange.start === start && recentlyUsedRange.end === end; - return !isDuplicate; - }); - recentlyUsedRange.unshift({ start, end }); - setStart(start); - setEnd(end); - setRecentlyUsedRanges( - recentlyUsedRange.length > 10 - ? recentlyUsedRange.slice(0, 9) - : recentlyUsedRange - ); - setIsLoading(true); - startLoading(); - }; - - const onRefresh = ({ start, end, refreshInterval }: OnRefreshProps) => { - return new Promise((resolve) => { - setTimeout(resolve, 100); - }).then(() => { - console.log(start, end, refreshInterval); - }); - }; - - const onRefreshChange = ({ - isPaused, - refreshInterval, - }: OnRefreshChangeProps) => { - setIsPaused(isPaused); - setRefreshInterval(refreshInterval); - }; - - const startLoading = () => { - setTimeout(stopLoading, 1000); - }; - - const stopLoading = () => { - setIsLoading(false); - }; - - const customQuickSelectPanels = [ - { - title: 'My custom panel', - content: , - }, - ]; const snippet = `const customQuickSelectRender = ({ quickSelect, @@ -126,7 +41,7 @@ export default () => { Hello world!` : '' }${ - showCustomQuickSelectPanel + showCustomPanels ? ` {customQuickSelectPanels}` : '' @@ -165,26 +80,26 @@ export default () => { Show quickSelect panel } - onChange={toggleShowQuickSelectPanel} + onChange={() => setShowQuickSelectPanel(!showQuickSelectPanel)} checked={showQuickSelectPanel} /> - Show recentlyUsedRanges panel + Show commonlyUsedRanges panel } - onChange={toggleShowRecentlyUsed} - checked={showRecentlyUsed} + onChange={() => setShowCommonlyUsed(!showCommonlyUsed)} + checked={showCommonlyUsed} /> - Show commonlyUsedRanges panel + Show recentlyUsedRanges panel } - onChange={toggleShowCommonlyUsed} - checked={showCommonlyUsed} + onChange={() => setShowRecentlyUsed(!showRecentlyUsed)} + checked={showRecentlyUsed} /> { Show customQuickSelectPanels } - onChange={toggleShowCustomQuickSelectPanel} - checked={showCustomQuickSelectPanel} + onChange={() => setShowCustomPanels(!showCustomPanels)} + checked={showCustomPanels} /> { Show refreshInterval panel } - onChange={toggleShowRefreshInterval} + onChange={() => setShowRefreshInterval(!showRefreshInterval)} checked={showRefreshInterval} /> setShowCustomContent(!showCustomContent)} checked={showCustomContent} /> - ( - <> - {showCustomContent && ( - - Hello world! - - )} - {showCustomQuickSelectPanel ? customQuickSelectPanels : undefined} - {showCommonlyUsed ? commonlyUsedRanges : undefined} - {showRecentlyUsed ? recentlyUsedRanges : undefined} - {showQuickSelectPanel ? quickSelect : undefined} - {showRefreshInterval ? refreshInterval : undefined} - - )} - /> + + Entire dataset timerange + ), + }, + ]} + isPaused={false} + refreshInterval={1000} + applyRefreshInterval={noop} + applyTime={noop} + customQuickSelectRender={({ + quickSelect, + commonlyUsedRanges, + recentlyUsedRanges, + customQuickSelectPanels, + refreshInterval, + }) => ( + <> + {showCustomContent && ( + + Hello world! + + )} + {showCustomPanels && customQuickSelectPanels} + {showCommonlyUsed && commonlyUsedRanges} + {showRecentlyUsed && recentlyUsedRanges} + {showQuickSelectPanel && quickSelect} + {showRefreshInterval && refreshInterval} + + )} + /> + Example snippet: diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap index 086d838aa00..9c8a08945f7 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap +++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap @@ -1,383 +1,459 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiQuickSelectPopover is rendered 1`] = ` - - - - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="m" +exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panels 1`] = ` +
-
- - - - -
- -`; - -exports[`EuiQuickSelectPopover props customQuickSelectPanels should render custom panels 1`] = ` -Object { - "asFragment": [Function], - "baseElement": -
+ + Quick select a time range + +
+
+
+
- - + - +
+
+ + + +
- , - "container":
+
+
+
+ +
+ + +
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+

+ Currently set to last 15 Minutes. +

+
+
+ + Commonly used + +
+
    +
  • + +
    • +
+
+
+
+ + Recently used date ranges + +
+
    +
  • + +
    • +
+
+
+
+
+
+
+ + + + Refresh every + - +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+

+ Refresh is off, interval set to 0 Seconds. +

+
+
+ + My custom panel + +
+
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByTestSubject": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByTestSubject": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByTestSubject": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByTestSubject": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByTestSubject": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByTestSubject": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} +
+
+`; + +exports[`EuiQuickSelectPopover is rendered 1`] = ` +
+
+ +
+
`; diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx index 04f754dd79f..c2da25261b6 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx @@ -14,9 +14,9 @@ import { RenderI18nTimeOptions } from '../time_options'; import { EuiQuickSelectPopover, EuiQuickSelectPopoverProps, + EuiQuickSelectPanels, } from './quick_select_popover'; -import { ApplyTime } from '../../types'; import { EuiLink } from '../../../link'; import { EuiQuickSelect } from './quick_select'; @@ -26,28 +26,6 @@ import { EuiRefreshInterval } from '../../auto_refresh/refresh_interval'; const noop = () => {}; -function MyCustomQuickSelectPanel({ applyTime }: { applyTime?: ApplyTime }) { - function applyMyCustomTime() { - applyTime!({ start: 'now-30d', end: 'now+7d' }); - } - - return ( - - Entire dataset timerange - - ); -} - -const customQuickSelectPanels = [ - { - title: 'My custom panel', - content: , - }, -]; - const defaultProps: Omit = { applyTime: noop, applyRefreshInterval: noop, @@ -63,104 +41,114 @@ const defaultProps: Omit = { describe('EuiQuickSelectPopover', () => { test('is rendered', () => { - const component = shallow( + const { container } = render( {(timeOptions) => ( )} - ).dive(); - expect(component).toMatchSnapshot(); + ); + expect(container.firstChild).toMatchSnapshot(); + }); +}); + +describe('EuiQuickSelectPanels', () => { + const CustomQuickSelectPanel = () => { + return ( + + Entire dataset timerange + + ); + }; + const customQuickSelectPanels = [ + { + title: 'My custom panel', + content: , + }, + ]; + + describe('customQuickSelectPanels', () => { + it('should render custom panels', () => { + const { container } = render( + + {(timeOptions) => ( + + )} + + ); + + expect(container.firstChild).toMatchSnapshot(); + }); }); - describe('props', () => { - describe('customQuickSelectPanels', () => { - it('should render custom panels', () => { - const component = render( - - {(timeOptions) => ( - - )} - - ); - - expect(component).toMatchSnapshot(); - }); + describe('customQuickSelectRender', () => { + it('should render Quick Select sections in default order when customQuickSelectRender is not present', () => { + const component = shallow( + + {(timeOptions) => ( + + )} + + ).dive(); + + const menu = component.find( + '[data-test-subj="superDatePickerQuickMenu"]' + ); + + expect(menu.children()).toHaveLength(5); + expect(menu.children().at(0).is(EuiQuickSelect)).toBeTruthy(); + expect(menu.children().at(1).is(EuiCommonlyUsedTimeRanges)).toBeTruthy(); + expect(menu.children().at(2).is(EuiRecentlyUsed)).toBeTruthy(); + expect(menu.children().at(3).is(EuiRefreshInterval)).toBeTruthy(); + expect(menu.children().at(4).is('div')).toBeTruthy(); }); - describe('customQuickSelectRender', () => { - it('should render Quick Select sections in default order when customQuickSelectRender is not present', () => { - const component = shallow( - - {(timeOptions) => ( - - )} - - ).dive(); - - const menu = component.find( - '[data-test-subj="superDatePickerQuickMenu"]' - ); - - expect(menu.children()).toHaveLength(5); - expect(menu.children().at(0).is(EuiQuickSelect)).toBeTruthy(); - expect( - menu.children().at(1).is(EuiCommonlyUsedTimeRanges) - ).toBeTruthy(); - expect(menu.children().at(2).is(EuiRecentlyUsed)).toBeTruthy(); - expect(menu.children().at(3).is(EuiRefreshInterval)).toBeTruthy(); - expect(menu.children().at(4).is('div')).toBeTruthy(); - }); - - it('should render Quick Select sections in a custom order customQuickSelectRender is present', () => { - const component = shallow( - - {(timeOptions) => ( - ( - <> - {customQuickSelectPanels} - {refreshInterval} - {quickSelect} - {commonlyUsedRanges} - {recentlyUsedRanges} - - )} - /> - )} - - ).dive(); - - const menu = component.find( - '[data-test-subj="superDatePickerQuickMenu"]' - ); - - expect(menu.children()).toHaveLength(5); - expect(menu.children().at(0).is('div')).toBeTruthy(); - expect(menu.children().at(1).is(EuiRefreshInterval)).toBeTruthy(); - expect(menu.children().at(2).is(EuiQuickSelect)).toBeTruthy(); - expect( - menu.children().at(3).is(EuiCommonlyUsedTimeRanges) - ).toBeTruthy(); - expect(menu.children().at(4).is(EuiRecentlyUsed)).toBeTruthy(); - }); + it('should render Quick Select sections in a custom order customQuickSelectRender is present', () => { + const component = shallow( + + {(timeOptions) => ( + ( + <> + {customQuickSelectPanels} + {refreshInterval} + {quickSelect} + {commonlyUsedRanges} + {recentlyUsedRanges} + + )} + /> + )} + + ).dive(); + + const menu = component.find( + '[data-test-subj="superDatePickerQuickMenu"]' + ); + + expect(menu.children()).toHaveLength(5); + expect(menu.children().at(0).is('div')).toBeTruthy(); + expect(menu.children().at(1).is(EuiRefreshInterval)).toBeTruthy(); + expect(menu.children().at(2).is(EuiQuickSelect)).toBeTruthy(); + expect(menu.children().at(3).is(EuiCommonlyUsedTimeRanges)).toBeTruthy(); + expect(menu.children().at(4).is(EuiRecentlyUsed)).toBeTruthy(); }); }); }); diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx index 43244815ca3..df9c52132f7 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx @@ -6,13 +6,21 @@ * Side Public License, v 1. */ -import React, { Component, Fragment, ReactNode, ReactElement } from 'react'; +import React, { + FunctionComponent, + useState, + useCallback, + useMemo, + ReactNode, + ReactElement, +} from 'react'; import { EuiButtonEmpty } from '../../../button'; import { EuiIcon } from '../../../icon'; import { EuiPopover } from '../../../popover'; import { EuiTitle } from '../../../title'; import { EuiText } from '../../../text'; +import { useEuiI18n } from '../../../i18n'; import { EuiQuickSelect } from './quick_select'; import { EuiCommonlyUsedTimeRanges } from './commonly_used_time_ranges'; @@ -31,8 +39,8 @@ export type CustomQuickSelectRenderOptions = { quickSelect: ReactElement; commonlyUsedRanges: ReactElement; recentlyUsedRanges: ReactElement; - customQuickSelectPanels?: ReactElement; refreshInterval?: ReactElement; + customQuickSelectPanels?: ReactNode; }; export interface EuiQuickSelectPopoverProps { @@ -53,129 +61,124 @@ export interface EuiQuickSelectPopoverProps { timeOptions: TimeOptions; } -interface EuiQuickSelectPopoverState { - isOpen: boolean; - prevQuickSelect?: QuickSelect; -} - -export class EuiQuickSelectPopover extends Component< - EuiQuickSelectPopoverProps, - EuiQuickSelectPopoverState -> { - state: EuiQuickSelectPopoverState = { - isOpen: false, - }; - - closePopover = () => { - this.setState({ isOpen: false }); - }; - - togglePopover = () => { - this.setState((prevState) => ({ - isOpen: !prevState.isOpen, - })); - }; - - applyTime: ApplyTime = ({ - start, - end, - quickSelect, - keepPopoverOpen = false, - }) => { - this.props.applyTime({ - start, - end, - }); - if (quickSelect) { - this.setState({ prevQuickSelect: quickSelect }); - } - if (!keepPopoverOpen) { - this.closePopover(); - } - }; - - renderQuickSelectMenuSections = () => { - const { - commonlyUsedRanges, - dateFormat, - end, - recentlyUsedRanges, - start, - timeOptions, - customQuickSelectRender, - applyRefreshInterval, - isPaused, - refreshInterval, - } = this.props; - const { prevQuickSelect } = this.state; - - const quickSelectElement = ( - = ({ + applyTime: _applyTime, + ...props +}) => { + const [prevQuickSelect, setQuickSelect] = useState(); + const [isOpen, setIsOpen] = useState(false); + const closePopover = useCallback(() => setIsOpen(false), []); + const togglePopover = useCallback(() => setIsOpen((isOpen) => !isOpen), []); + + const applyTime: ApplyTime = useCallback( + ({ start, end, quickSelect, keepPopoverOpen = false }) => { + _applyTime({ start, end }); + if (quickSelect) { + setQuickSelect(quickSelect); + } + if (!keepPopoverOpen) { + closePopover(); + } + }, + [_applyTime, closePopover] + ); + + const buttonlabel = useEuiI18n( + 'euiQuickSelectPopover.buttonLabel', + 'Date quick select' + ); + + const quickSelectButton = ( + + + + ); + + return ( + + - ); - - const commonlyUsedElement = ( - - ); - - const recentlyUsedElement = ( - - ); - - const customQuickSelectPanelsElement = ( - <>{this.renderCustomQuickSelectPanels()} - ); + + ); +}; - const refreshIntervalElement = applyRefreshInterval && ( - - ); - - return ( - - {customQuickSelectRender ? ( - customQuickSelectRender({ - quickSelect: quickSelectElement, - commonlyUsedRanges: commonlyUsedElement, - recentlyUsedRanges: recentlyUsedElement, - customQuickSelectPanels: customQuickSelectPanelsElement, - refreshInterval: refreshIntervalElement, - }) - ) : ( - <> - {quickSelectElement} - {commonlyUsedElement} - {recentlyUsedElement} - {refreshIntervalElement} - {customQuickSelectPanelsElement} - - )} - - ); - }; - - renderCustomQuickSelectPanels = () => { - const { customQuickSelectPanels } = this.props; +export const EuiQuickSelectPanels: FunctionComponent< + Omit & { + prevQuickSelect?: QuickSelect; + } +> = ({ + start, + end, + dateFormat, + timeOptions, + commonlyUsedRanges, + recentlyUsedRanges, + customQuickSelectPanels, + customQuickSelectRender, + isPaused, + refreshInterval, + applyRefreshInterval, + applyTime, + prevQuickSelect, +}) => { + const quickSelectElement = ( + + ); + + const commonlyUsedElement = ( + + ); + + const recentlyUsedElement = ( + + ); + + const refreshIntervalElement = applyRefreshInterval && ( + + ); + + const customQuickSelectPanelsElement = useMemo(() => { if (!customQuickSelectPanels) { return null; } - return customQuickSelectPanels.map(({ title, content }) => { return (
@@ -183,48 +186,35 @@ export class EuiQuickSelectPopover extends Component< {title} - {React.cloneElement(content, { applyTime: this.applyTime })} + {React.cloneElement(content, { applyTime })}
); }); - }; - - render() { - const { isDisabled } = this.props; - const { isOpen } = this.state; - - const quickSelectButton = ( - - - - ); - - return ( - -
- {this.renderQuickSelectMenuSections()} -
- - ); - } -} + }, [customQuickSelectPanels, applyTime]); + + return ( +
+ {customQuickSelectRender ? ( + customQuickSelectRender({ + quickSelect: quickSelectElement, + commonlyUsedRanges: commonlyUsedElement, + recentlyUsedRanges: recentlyUsedElement, + refreshInterval: refreshIntervalElement, + customQuickSelectPanels: customQuickSelectPanelsElement, + }) + ) : ( + <> + {quickSelectElement} + {commonlyUsedElement} + {recentlyUsedElement} + {refreshIntervalElement} + {customQuickSelectPanelsElement} + + )} +
+ ); +};