From 8d8d3a009f0d0b595099c8a635a69cabae2974a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez?=
 <alejandro.fernandez@elastic.co>
Date: Tue, 21 Jan 2020 10:50:17 +0100
Subject: [PATCH] [Logs UI] Fix z-index of logs page toolbar (#54469) (#55346)

* Fix z-index of logs page toolbar

* Extract `FixedDatePicker` from log setup page, and use it in the stream page

* Clean unused import

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../public/components/fixed_datepicker.tsx    | 25 +++++++++++++++++++
 .../analysis_setup_timerange_form.tsx         | 20 +--------------
 .../components/logging/log_time_controls.tsx  |  3 ++-
 3 files changed, 28 insertions(+), 20 deletions(-)
 create mode 100644 x-pack/legacy/plugins/infra/public/components/fixed_datepicker.tsx

diff --git a/x-pack/legacy/plugins/infra/public/components/fixed_datepicker.tsx b/x-pack/legacy/plugins/infra/public/components/fixed_datepicker.tsx
new file mode 100644
index 000000000000..aab1bcd1da87
--- /dev/null
+++ b/x-pack/legacy/plugins/infra/public/components/fixed_datepicker.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+import { EuiDatePicker, EuiDatePickerProps } from '@elastic/eui';
+import euiStyled from '../../../../common/eui_styled_components';
+
+export const FixedDatePicker = euiStyled(
+  ({
+    className,
+    inputClassName,
+    ...datePickerProps
+  }: {
+    className?: string;
+    inputClassName?: string;
+  } & EuiDatePickerProps) => (
+    <EuiDatePicker {...datePickerProps} className={inputClassName} popperClassName={className} />
+  )
+)`
+  z-index: 3 !important;
+`;
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_timerange_form.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_timerange_form.tsx
index 4319f844b1dc..02119fd1c09d 100644
--- a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_timerange_form.tsx
+++ b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_timerange_form.tsx
@@ -5,8 +5,6 @@
  */
 
 import {
-  EuiDatePicker,
-  EuiDatePickerProps,
   EuiDescribedFormGroup,
   EuiFlexGroup,
   EuiFormControlLayout,
@@ -16,8 +14,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import moment, { Moment } from 'moment';
 import React, { useMemo } from 'react';
-
-import { euiStyled } from '../../../../../../../common/eui_styled_components';
+import { FixedDatePicker } from '../../../fixed_datepicker';
 
 const startTimeLabel = i18n.translate('xpack.infra.analysisSetup.startTimeLabel', {
   defaultMessage: 'Start time',
@@ -138,18 +135,3 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
     </EuiDescribedFormGroup>
   );
 };
-
-const FixedDatePicker = euiStyled(
-  ({
-    className,
-    inputClassName,
-    ...datePickerProps
-  }: {
-    className?: string;
-    inputClassName?: string;
-  } & EuiDatePickerProps) => (
-    <EuiDatePicker {...datePickerProps} className={inputClassName} popperClassName={className} />
-  )
-)`
-  z-index: 3 !important;
-`;
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_time_controls.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_time_controls.tsx
index 8f5705a9b9c5..5095edd4c715 100644
--- a/x-pack/legacy/plugins/infra/public/components/logging/log_time_controls.tsx
+++ b/x-pack/legacy/plugins/infra/public/components/logging/log_time_controls.tsx
@@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import moment, { Moment } from 'moment';
 import React from 'react';
+import { FixedDatePicker } from '../fixed_datepicker';
 
 const noop = () => undefined;
 
@@ -56,7 +57,7 @@ export class LogTimeControls extends React.PureComponent<LogTimeControlsProps> {
       return (
         <EuiFlexGroup gutterSize="s">
           <EuiFlexItem>
-            <EuiDatePicker
+            <FixedDatePicker
               dateFormat="L LTS"
               onChange={this.handleChangeDate}
               popperPlacement="top-end"