[Logs UI] Fix z-index of logs page toolbar (elastic#54469)

* 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>

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;
+`;

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;
-`;

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"