From 2840238c4c235749e58158a17454950ce81cd019 Mon Sep 17 00:00:00 2001
From: Hannah Mudge <hannah.wright@elastic.co>
Date: Wed, 13 Dec 2023 15:44:56 -0700
Subject: [PATCH] Allow dates to be unselected

---
 .../components/time_picker_control.tsx        | 50 +++++++++----------
 .../time_picker/time_picker_reducers.ts       |  5 +-
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/src/plugins/controls/public/time_picker/components/time_picker_control.tsx b/src/plugins/controls/public/time_picker/components/time_picker_control.tsx
index ef89227ec360..81d8bdab2caf 100644
--- a/src/plugins/controls/public/time_picker/components/time_picker_control.tsx
+++ b/src/plugins/controls/public/time_picker/components/time_picker_control.tsx
@@ -6,33 +6,15 @@
  * Side Public License, v 1.
  */
 
-import { EuiDatePicker, EuiDatePickerRange, EuiFormControlLayoutDelimited } from '@elastic/eui';
+import { EuiDatePicker, EuiDatePickerRange } from '@elastic/eui';
 import moment, { Moment } from 'moment-timezone';
-import React, { forwardRef, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { pluginServices } from '../../services';
 import { getMomentTimezone } from '../../time_slider/time_utils';
 import { useTimePicker } from '../embeddable/time_picker_embeddable';
 
 import './time_picker.scss';
 
-const ExampleCustomInput = forwardRef(({ onClick, min, max }, ref) => {
-  return (
-    // <EuiButton className="example-custom-input" onClick={onClick}>
-    //   {min?.format('MM/DD/YYYY')} {'->'} {max?.format('MM/DD/YYYY')}
-    // </EuiButton>
-    <EuiFormControlLayoutDelimited
-      onClick={onClick}
-      startControl={
-        <input type={'text'} placeholder={min?.format('MM/DD/YYYY')} className="euiFieldNumber" />
-      }
-      endControl={
-        <input type={'text'} placeholder={max?.format('MM/DD/YYYY')} className="euiFieldNumber" />
-      }
-      fullWidth
-    />
-  );
-});
-
 export const TimePickerControl = () => {
   const timePicker = useTimePicker();
 
@@ -84,15 +66,19 @@ export const TimePickerControl = () => {
       isLoading={loading}
       showTimeSelect={false}
       showIcon={false}
+      popoverPlacement={'downCenter'}
       selected={startDate}
       minDate={minDate}
       maxDate={maxDate}
+      allowSameDay={true}
       adjustDateOnChange={false}
       onChange={(date) => {
         if (!date) return;
-        timePicker.dispatch.setSingleDate(date.valueOf());
-        // timePicker.dispatch.setStartDate(date.startOf('day').valueOf());
-        // timePicker.dispatch.setEndDate(date.endOf('day').valueOf());
+        if (date.isSame(startDate)) {
+          timePicker.dispatch.setSingleDate(undefined);
+        } else {
+          timePicker.dispatch.setSingleDate(date.valueOf());
+        }
       }}
     />
   ) : (
@@ -104,12 +90,17 @@ export const TimePickerControl = () => {
       isInvalid={isInvalid}
       startDateControl={
         <EuiDatePicker
+          allowSameDay={true}
           placeholder={minDate?.format('MM/DD/YYYY')}
           adjustDateOnChange={false}
-          selected={startDate}
+          selected={startDate === minDate ? undefined : startDate}
           onChange={(date) => {
             if (!date) return;
-            timePicker.dispatch.setStartDate(date.startOf('day').valueOf());
+            if (date.isSame(startDate)) {
+              timePicker.dispatch.setStartDate(undefined);
+            } else {
+              timePicker.dispatch.setStartDate(date.startOf('day').valueOf());
+            }
           }}
           startDate={startDate ?? minDate}
           endDate={endDate ?? maxDate}
@@ -121,12 +112,17 @@ export const TimePickerControl = () => {
       }
       endDateControl={
         <EuiDatePicker
+          allowSameDay={true}
           placeholder={maxDate?.format('MM/DD/YYYY')}
           adjustDateOnChange={false}
-          selected={endDate}
+          selected={endDate === maxDate ? undefined : endDate}
           onChange={(date) => {
             if (!date) return;
-            timePicker.dispatch.setEndDate(date.endOf('day').valueOf());
+            if (date.isSame(endDate)) {
+              timePicker.dispatch.setEndDate(undefined);
+            } else {
+              timePicker.dispatch.setEndDate(date.endOf('day').valueOf());
+            }
           }}
           startDate={startDate ?? minDate}
           endDate={endDate ?? maxDate}
diff --git a/src/plugins/controls/public/time_picker/time_picker_reducers.ts b/src/plugins/controls/public/time_picker/time_picker_reducers.ts
index 9d4292f0de2e..d88c60fb501b 100644
--- a/src/plugins/controls/public/time_picker/time_picker_reducers.ts
+++ b/src/plugins/controls/public/time_picker/time_picker_reducers.ts
@@ -19,7 +19,10 @@ export const getDefaultComponentState = (): TimePickerReduxState['componentState
 });
 
 export const timePickerReducers = {
-  setSingleDate: (state: WritableDraft<TimePickerReduxState>, action: PayloadAction<number>) => {
+  setSingleDate: (
+    state: WritableDraft<TimePickerReduxState>,
+    action: PayloadAction<number | undefined>
+  ) => {
     state.explicitInput.startDate = action.payload;
     state.explicitInput.endDate = action.payload;
   },