[Logs UI] Fix z-index of logs page toolbar (#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"