[EuiSuperDatePicker] Add customQuickSelectRender prop

src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_render.tsx

@@ -0,0 +1,182 @@
+import React, { useState } from 'react';
+
+import {
+  EuiPanel,
+  EuiSwitch,
+  EuiSpacer,
+  EuiLink,
+  EuiTitle,
+  EuiCode,
+  EuiCodeBlock,
+  EuiFlexGrid,
+} from '../../../../src';
+
+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';
+
+// 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 [showCustomPanels, setShowCustomPanels] = useState(true);
+  const [showRecentlyUsed, setShowRecentlyUsed] = useState(true);
+  const [showCommonlyUsed, setShowCommonlyUsed] = useState(true);
+  const [showRefreshInterval, setShowRefreshInterval] = useState(true);
+  const [showCustomContent, setShowCustomContent] = useState(false);
+
+  const snippet = `const customQuickSelectRender = ({
+  quickSelect,
+  commonlyUsedRanges,
+  recentlyUsedRanges,
+  refreshInterval,
+  customQuickSelectPanels,
+}) => (
+  <>${
+    showCustomContent
+      ? `
+    <EuiTitle size="xxs"><span>Hello world!</span></EuiTitle>`
+      : ''
+  }${
+    showCustomPanels
+      ? `
+    {customQuickSelectPanels}`
+      : ''
+  }${
+    showCommonlyUsed
+      ? `
+    {commonlyUsedRanges}`
+      : ''
+  }${
+    showRecentlyUsed
+      ? `
+    {recentlyUsedRanges}`
+      : ''
+  }${
+    showQuickSelectPanel
+      ? `
+    {quickSelect}`
+      : ''
+  }${
+    showRefreshInterval
+      ? `
+    {refreshInterval}`
+      : ''
+  }
+  </>
+);
+
+<EuiSuperDatePicker customQuickSelectRender={customQuickSelectRender} />`;
+
+  return (
+    <>
+      <EuiFlexGrid columns={3} gutterSize="s">
+        <EuiSwitch
+          label={
+            <>
+              Show <EuiCode>quickSelect</EuiCode> panel
+            </>
+          }
+          onChange={() => setShowQuickSelectPanel(!showQuickSelectPanel)}
+          checked={showQuickSelectPanel}
+        />
+        <EuiSwitch
+          label={
+            <>
+              Show <EuiCode>commonlyUsedRanges</EuiCode> panel
+            </>
+          }
+          onChange={() => setShowCommonlyUsed(!showCommonlyUsed)}
+          checked={showCommonlyUsed}
+        />
+        <EuiSwitch
+          label={
+            <>
+              Show <EuiCode>recentlyUsedRanges</EuiCode> panel
+            </>
+          }
+          onChange={() => setShowRecentlyUsed(!showRecentlyUsed)}
+          checked={showRecentlyUsed}
+        />
+        <EuiSwitch
+          label={
+            <>
+              Show <EuiCode>customQuickSelectPanels</EuiCode>
+            </>
+          }
+          onChange={() => setShowCustomPanels(!showCustomPanels)}
+          checked={showCustomPanels}
+        />
+        <EuiSwitch
+          label={
+            <>
+              Show <EuiCode>refreshInterval</EuiCode> panel
+            </>
+          }
+          onChange={() => setShowRefreshInterval(!showRefreshInterval)}
+          checked={showRefreshInterval}
+        />
+        <EuiSwitch
+          label="Show completely custom content"
+          onChange={() => setShowCustomContent(!showCustomContent)}
+          checked={showCustomContent}
+        />
+      </EuiFlexGrid>
+      <EuiSpacer />
+      <EuiPanel style={{ width: 'fit-content' }}>
+        <EuiQuickSelectPanels
+          start="now-30m"
+          end="now"
+          dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+          timeOptions={timeOptions}
+          commonlyUsedRanges={timeOptions.commonDurationRanges}
+          recentlyUsedRanges={[
+            { start: 'now-30m', end: 'now', label: 'Last 30 minutes' },
+            { start: 'now/d', end: 'now/d', label: 'Today' },
+          ]}
+          customQuickSelectPanels={[
+            {
+              title: 'Custom quick select panel',
+              content: (
+                <EuiLink onClick={noop}>Entire dataset timerange</EuiLink>
+              ),
+            },
+          ]}
+          isPaused={false}
+          refreshInterval={1000}
+          applyRefreshInterval={noop}
+          applyTime={noop}
+          customQuickSelectRender={({
+            quickSelect,
+            commonlyUsedRanges,
+            recentlyUsedRanges,
+            customQuickSelectPanels,
+            refreshInterval,
+          }) => (
+            <>
+              {showCustomContent && (
+                <EuiTitle size="xxs">
+                  <span>Hello world!</span>
+                </EuiTitle>
+              )}
+              {showCustomPanels && customQuickSelectPanels}
+              {showCommonlyUsed && commonlyUsedRanges}
+              {showRecentlyUsed && recentlyUsedRanges}
+              {showQuickSelectPanel && quickSelect}
+              {showRefreshInterval && refreshInterval}
+            </>
+          )}
+        />
+      </EuiPanel>
+      <EuiSpacer />
+      <EuiTitle size="xs">
+        <strong>Example snippet:</strong>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiCodeBlock language="jsx">{snippet}</EuiCodeBlock>
+    </>
+  );
+};

src-docs/src/views/super_date_picker/super_date_picker_example.js

@@ -27,6 +27,8 @@ 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 SuperDatePickerCustomQuickSelectRender from './super_date_picker_custom_quick_select_render';
+
 import AutoRefresh from './auto_refresh';
 const autoRefreshSource = require('!!raw-loader!./auto_refresh');
 import AutoRefreshOnly from './auto_refresh_only';
@@ -218,6 +220,20 @@ if (!endMoment || !endMoment.isValid()) {
       snippet: superDatePickerCustomQuickSelectSnippet,
       demo: <SuperDatePickerCustomQuickSelect />,
     },
+    {
+      text: (
+        <>
+          <h3 id="quickselect-custom-rendering">Custom rendering</h3>
+          <p>
+            You can optionally pass the{' '}
+            <EuiCode>customQuickSelectRender</EuiCode> 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.
+          </p>
+        </>
+      ),
+      demo: <SuperDatePickerCustomQuickSelectRender />,
+    },
     {
       title: 'Sizing',
       source: [

src/components/date_picker/auto_refresh/refresh_interval.tsx

@@ -208,7 +208,7 @@ export class EuiRefreshInterval extends Component<
     return (
       <RenderI18nTimeOptions>
         {({ refreshUnitsOptions }) => (
-          <fieldset>
+          <fieldset className="euiQuickSelectPopover__panel">
             <EuiFlexGroup
               alignItems="center"
               gutterSize="s"

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiQuickSelect is rendered 1`] = `
-<fieldset>
+<fieldset
+  className="euiQuickSelectPopover__panel"
+>
   <EuiI18n
     default="Quick select a time range"
     token="euiQuickSelect.legendText"
@@ -125,7 +127,9 @@ exports[`EuiQuickSelect is rendered 1`] = `
 `;
 
 exports[`EuiQuickSelect prevQuickSelect 1`] = `
-<fieldset>
+<fieldset
+  className="euiQuickSelectPopover__panel"
+>
   <EuiI18n
     default="Quick select a time range"
     token="euiQuickSelect.legendText"