Merge branch 'main' into implement/babel-register-packages

elastic · Dec 22, 2022 · 129d0fc · 129d0fc
2 parents 97be880 + 251bdce
commit 129d0fc
Show file tree

Hide file tree

Showing 40 changed files with 421 additions and 309 deletions.
diff --git a/package.json b/package.json
@@ -107,7 +107,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.3.3",
-    "@elastic/eui": "71.0.0",
+    "@elastic/eui": "72.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
@@ -1323,6 +1323,9 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiQuickSelect.valueLabel': i18n.translate('core.euiQuickSelect.valueLabel', {
       defaultMessage: 'Time value',
     }),
+    'euiQuickSelectPopover.buttonLabel': i18n.translate('core.euiQuickSelectPopover.buttonLabel', {
+      defaultMessage: 'Date quick select',
+    }),
     'euiRecentlyUsed.legend': i18n.translate('core.euiRecentlyUsed.legend', {
       defaultMessage: 'Recently used date ranges',
     }),

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -84,6 +84,6 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/eui@71.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@72.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };
diff --git a/src/plugins/kibana_react/public/page_template/with_solution_nav.tsx b/src/plugins/kibana_react/public/page_template/with_solution_nav.tsx
@@ -9,7 +9,7 @@
 import React, { ComponentType, useState } from 'react';
 import classNames from 'classnames';
 import { useIsWithinBreakpoints } from '@elastic/eui';
-import { EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar';
+import { EuiPageSideBarProps_Deprecated as EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar';
 import { KibanaPageTemplateSolutionNav, KibanaPageTemplateSolutionNavProps } from './solution_nav';
 import { KibanaPageTemplateProps } from '.';
 

diff --git a/src/plugins/unified_search/public/dataview_picker/dataview_list.test.tsx b/src/plugins/unified_search/public/dataview_picker/dataview_list.test.tsx
@@ -30,7 +30,8 @@ function selectDataViewPickerOption(instance: ShallowWrapper, selectedLabel: str
       ? { ...option, checked: 'on' }
       : { ...option, checked: undefined }
   );
-  return getDataViewPickerList(instance).prop('onChange')!(options, event);
+  const selectedOption = { label: selectedLabel };
+  return getDataViewPickerList(instance).prop('onChange')!(options, event, selectedOption);
 }
 
 describe('DataView list component', () => {

diff --git a/src/plugins/unified_search/public/dataview_picker/text_languages_list.test.tsx b/src/plugins/unified_search/public/dataview_picker/text_languages_list.test.tsx
@@ -31,7 +31,8 @@ function selectTextLanguagePickerOption(instance: ShallowWrapper, selectedLabel:
       ? { ...option, checked: 'on' }
       : { ...option, checked: undefined }
   );
-  return getTextLanguagesPickerList(instance).prop('onChange')!(options, event);
+  const selectedOption = { label: selectedLabel };
+  return getTextLanguagesPickerList(instance).prop('onChange')!(options, event, selectedOption);
 }
 
 describe('Text based languages list component', () => {

diff --git a/...sualizer/public/application/common/components/date_picker_wrapper/date_picker_wrapper.tsx b/...sualizer/public/application/common/components/date_picker_wrapper/date_picker_wrapper.tsx
@@ -34,6 +34,7 @@ import { dataVisualizerRefresh$ } from '../../../index_data_visualizer/services/
 import { useUrlState } from '../../util/url_state';
 
 const DEFAULT_REFRESH_INTERVAL_MS = 5000;
+const DATE_PICKER_MAX_WIDTH = 540;
 
 interface TimePickerQuickRange {
   from: string;
@@ -69,10 +70,11 @@ function updateLastRefresh(timeRange?: OnRefreshProps) {
 }
 
 // FIXME: Consolidate this component with ML and AIOps's component
-export const DatePickerWrapper: FC<{ isAutoRefreshOnly?: boolean; showRefresh?: boolean }> = ({
-  isAutoRefreshOnly,
-  showRefresh,
-}) => {
+export const DatePickerWrapper: FC<{
+  isAutoRefreshOnly?: boolean;
+  showRefresh?: boolean;
+  compact?: boolean;
+}> = ({ isAutoRefreshOnly, showRefresh, compact = false }) => {
   const {
     services,
     notifications: { toasts },
@@ -242,9 +244,18 @@ export const DatePickerWrapper: FC<{ isAutoRefreshOnly?: boolean; showRefresh?:
     <EuiFlexGroup
       gutterSize="s"
       alignItems="center"
-      className="mlNavigationMenu__datePickerWrapper"
+      data-test-subj="mlNavigationMenuDatePickerWrapper"
     >
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem
+        grow={false}
+        css={
+          compact
+            ? {
+                maxWidth: DATE_PICKER_MAX_WIDTH,
+              }
+            : null
+        }
+      >
         <EuiSuperDatePicker
           start={time.from}
           end={time.to}
@@ -257,6 +268,7 @@ export const DatePickerWrapper: FC<{ isAutoRefreshOnly?: boolean; showRefresh?:
           recentlyUsedRanges={recentlyUsedRanges}
           dateFormat={dateFormat}
           commonlyUsedRanges={commonlyUsedRanges}
+          updateButtonProps={{ iconOnly: compact }}
         />
       </EuiFlexItem>
 

diff --git a/...on/common/components/document_count_content/document_count_chart/document_count_chart.tsx b/...on/common/components/document_count_content/document_count_chart/document_count_chart.tsx
@@ -9,7 +9,7 @@ import React, { FC, useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
   Axis,
-  BarSeries,
+  HistogramBarSeries,
   BrushEndListener,
   Chart,
   ElementClickListener,
@@ -22,7 +22,7 @@ import {
 import moment from 'moment';
 import { IUiSettingsClient } from '@kbn/core/public';
 import { MULTILAYER_TIME_AXIS_STYLE } from '@kbn/charts-plugin/common';
-import { EuiLoadingSpinner, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiLoadingSpinner, EuiFlexItem } from '@elastic/eui';
 import { useDataVisualizerKibana } from '../../../../kibana_context';
 
 export interface DocumentCountChartPoint {
@@ -137,8 +137,9 @@ export const DocumentCountChart: FC<Props> = ({
   const timeZone = getTimezone(uiSettings);
 
   return (
-    <div
-      style={{ width: width ?? '100%', height: 120, display: 'flex', alignItems: 'center' }}
+    <EuiFlexGroup
+      alignItems="center"
+      css={{ width: width ?? '100%' }}
       data-test-subj="dataVisualizerDocumentCountChart"
     >
       {loading ? (
@@ -147,6 +148,7 @@ export const DocumentCountChart: FC<Props> = ({
         <Chart
           size={{
             width: '100%',
+            height: 120,
           }}
         >
           <Settings
@@ -161,11 +163,13 @@ export const DocumentCountChart: FC<Props> = ({
             position={Position.Bottom}
             showOverlappingTicks={true}
             tickFormat={(value) => xAxisFormatter.convert(value)}
+            // temporary fix to reduce horizontal chart margin until fixed in Elastic Charts itself
+            labelFormat={useLegacyTimeAxis ? undefined : () => ''}
             timeAxisLayerCount={useLegacyTimeAxis ? 0 : 2}
             style={useLegacyTimeAxis ? {} : MULTILAYER_TIME_AXIS_STYLE}
           />
           <Axis id="left" position={Position.Left} />
-          <BarSeries
+          <HistogramBarSeries
             id={SPEC_ID}
             name={seriesName}
             xScaleType={ScaleType.Time}
@@ -174,9 +178,10 @@ export const DocumentCountChart: FC<Props> = ({
             yAccessors={['value']}
             data={adjustedChartPoints}
             timeZone={timeZone}
+            yNice
           />
         </Chart>
       )}
-    </div>
+    </EuiFlexGroup>
   );
 };
diff --git a/...a_visualizer/public/application/common/components/field_count_panel/field_count_panel.tsx b/...a_visualizer/public/application/common/components/field_count_panel/field_count_panel.tsx
@@ -31,6 +31,7 @@ export const FieldCountPanel: FC<Props> = ({
       data-test-subj="dataVisualizerFieldCountPanel"
       responsive={false}
       className="dvFieldCount__panel"
+      wrap
     >
       <TotalFieldsCount fieldsCountStats={fieldsCountStats} />
       <MetricFieldsCount metricsStats={metricsStats} />

diff --git a/...a_visualizer/public/application/common/components/fields_stats_grid/fields_stats_grid.tsx b/...a_visualizer/public/application/common/components/fields_stats_grid/fields_stats_grid.tsx
@@ -85,6 +85,7 @@ export const FieldsStatsGrid: FC<Props> = ({ results }) => {
         gutterSize="xs"
         style={{ marginLeft: 4 }}
         data-test-subj="dataVisualizerFieldCountPanel"
+        responsive={true}
       >
         <TotalFieldsCount fieldsCountStats={fieldsCountStats} />
         <MetricFieldsCount metricsStats={metricsStats} />

diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/link_card/link_card.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/link_card/link_card.tsx
@@ -17,6 +17,7 @@ import {
   EuiPanel,
   EuiLink,
 } from '@elastic/eui';
+import { useCurrentEuiTheme } from '../../hooks/use_current_eui_theme';
 
 export interface LinkCardProps {
   icon: IconType;
@@ -41,6 +42,8 @@ export const LinkCard: FC<LinkCardProps> = ({
   isDisabled,
   'data-test-subj': dataTestSubj,
 }) => {
+  const euiTheme = useCurrentEuiTheme();
+
   const linkHrefAndOnClickProps = {
     ...(href ? { href } : {}),
     ...(onClick ? { onClick } : {}),
@@ -62,10 +65,10 @@ export const LinkCard: FC<LinkCardProps> = ({
         color="subdued"
         {...linkHrefAndOnClickProps}
       >
-        <EuiFlexGroup gutterSize="l" responsive={true}>
-          <EuiFlexItem grow={false} style={{ paddingTop: '8px' }}>
+        <EuiFlexGroup gutterSize="s" responsive={true}>
+          <EuiFlexItem grow={false} css={{ paddingTop: euiTheme.euiSizeXS }}>
             {typeof icon === 'string' ? (
-              <EuiIcon size="xl" type={icon} aria-label={iconAreaLabel} />
+              <EuiIcon size="m" type={icon} aria-label={iconAreaLabel} />
             ) : (
               icon
             )}

diff --git a/...sualizer/public/application/common/components/multi_select_picker/multi_select_picker.tsx b/...sualizer/public/application/common/components/multi_select_picker/multi_select_picker.tsx
@@ -15,10 +15,11 @@ import {
   EuiPopoverTitle,
   EuiSpacer,
 } from '@elastic/eui';
-import React, { FC, ReactNode, useEffect, useMemo, useState } from 'react';
+import React, { FC, ReactNode, useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { euiDarkVars as euiThemeDark, euiLightVars as euiThemeLight } from '@kbn/ui-theme';
-import { useDataVisualizerKibana } from '../../../kibana_context';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+import { useCurrentEuiTheme } from '../../hooks/use_current_eui_theme';
 
 export interface Option {
   name?: string | ReactNode;
@@ -27,6 +28,8 @@ export interface Option {
   disabled?: boolean;
 }
 
+const SELECT_PICKER_HEIGHT = '250px';
+
 const NoFilterItems = () => {
   return (
     <div className="euiFilterSelect__note">
@@ -44,23 +47,19 @@ const NoFilterItems = () => {
   );
 };
 
-export function useCurrentEuiTheme() {
-  const { services } = useDataVisualizerKibana();
-  const uiSettings = services.uiSettings;
-  return useMemo(
-    () => (uiSettings.get('theme:darkMode') ? euiThemeDark : euiThemeLight),
-    [uiSettings]
-  );
+interface MultiSelectPickerStyles {
+  filterGroup?: SerializedStyles;
+  filterItemContainer?: SerializedStyles;
 }
-
 export const MultiSelectPicker: FC<{
   options: Option[];
   onChange?: (items: string[]) => void;
   title?: string;
   checkedOptions: string[];
   dataTestSubj: string;
   postfix?: React.ReactElement;
-}> = ({ options, onChange, title, checkedOptions, dataTestSubj, postfix }) => {
+  cssStyles?: MultiSelectPickerStyles;
+}> = ({ options, onChange, title, checkedOptions, dataTestSubj, postfix, cssStyles }) => {
   const euiTheme = useCurrentEuiTheme();
 
   const [items, setItems] = useState<Option[]>(options);
@@ -114,7 +113,7 @@ export const MultiSelectPicker: FC<{
   );
 
   return (
-    <EuiFilterGroup data-test-subj={dataTestSubj} style={{ marginLeft: 8 }}>
+    <EuiFilterGroup data-test-subj={dataTestSubj} css={cssStyles?.filterGroup}>
       <EuiPopover
         ownFocus
         data-test-subj={`${dataTestSubj}-popover`}
@@ -130,7 +129,15 @@ export const MultiSelectPicker: FC<{
             data-test-subj={`${dataTestSubj}-searchInput`}
           />
         </EuiPopoverTitle>
-        <div style={{ maxHeight: 250, overflow: 'auto' }}>
+        <div
+          css={
+            cssStyles?.filterItemContainer ??
+            css`
+              max-height: ${SELECT_PICKER_HEIGHT};
+              overflow: auto;
+            `
+          }
+        >
           {Array.isArray(items) && items.length > 0 ? (
             items.map((item, index) => {
               const checked =

diff --git a/...public/application/common/components/stats_table/components/field_count_stats/_index.scss b/...public/application/common/components/stats_table/components/field_count_stats/_index.scss
@@ -8,5 +8,5 @@
 
 .dvFieldCount__item {
   max-width: 300px;
-  min-width: 300px;
+  min-width: 200px;
 }
diff --git a/...sualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx b/...sualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx
@@ -88,7 +88,6 @@ export const DataVisualizerTable = <T extends DataVisualizerTableItem>({
   );
   const [showDistributions, setShowDistributions] = useState<boolean>(showPreviewByDefault ?? true);
   const [dimensions, setDimensions] = useState(calculateTableColumnsDimensions());
-  const [tableWidth, setTableWidth] = useState<number>(1400);
 
   const toggleExpandAll = useCallback(
     (shouldExpandAll: boolean) => {
@@ -109,10 +108,9 @@ export const DataVisualizerTable = <T extends DataVisualizerTableItem>({
     throttle((e: { width: number; height: number }) => {
       // When window or table is resized,
       // update the column widths and other settings accordingly
-      setTableWidth(e.width);
       setDimensions(calculateTableColumnsDimensions(e.width));
     }, 500),
-    [tableWidth]
+    []
   );
 
   const toggleShowDistribution = useCallback(() => {
@@ -138,6 +136,8 @@ export const DataVisualizerTable = <T extends DataVisualizerTableItem>({
   const columns = useMemo(() => {
     const expanderColumn: EuiTableComputedColumnType<DataVisualizerTableItem> = {
       name:
+        // EUI will automatically show an expander button when table is mobile view (where width <700)
+        // so we need to not render any addition button
         dimensions.breakPoint !== 'small' ? (
           <EuiButtonIcon
             data-test-subj={`dataVisualizerToggleDetailsForAllRowsButton ${

diff --git a/...data_visualizer/public/application/common/components/stats_table/hooks/use_color_range.ts b/...data_visualizer/public/application/common/components/stats_table/hooks/use_color_range.ts
@@ -6,12 +6,11 @@
  */
 
 import d3 from 'd3';
-import { useMemo } from 'react';
 import { euiLightVars as euiThemeLight, euiDarkVars as euiThemeDark } from '@kbn/ui-theme';
 
 import { i18n } from '@kbn/i18n';
 
-import { useDataVisualizerKibana } from '../../../../kibana_context';
+import { useCurrentEuiTheme } from '../../../hooks/use_current_eui_theme';
 
 /**
  * Custom color scale factory that takes the amount of feature influencers
@@ -159,7 +158,7 @@ export const useColorRange = (
   colorRangeScale = COLOR_RANGE_SCALE.LINEAR,
   featureCount = 1
 ) => {
-  const { euiTheme } = useCurrentEuiTheme();
+  const euiTheme = useCurrentEuiTheme();
 
   const colorRanges: Record<COLOR_RANGE, string[]> = {
     [COLOR_RANGE.BLUE]: [
@@ -197,13 +196,3 @@ export const useColorRange = (
 };
 
 export type EuiThemeType = typeof euiThemeLight | typeof euiThemeDark;
-
-export function useCurrentEuiTheme() {
-  const {
-    services: { uiSettings },
-  } = useDataVisualizerKibana();
-  return useMemo(
-    () => ({ euiTheme: uiSettings.get('theme:darkMode') ? euiThemeDark : euiThemeLight }),
-    [uiSettings]
-  );
-}
diff --git a/...alizer/public/application/common/components/stats_table/hooks/use_data_viz_chart_theme.ts b/...alizer/public/application/common/components/stats_table/hooks/use_data_viz_chart_theme.ts
@@ -7,9 +7,9 @@
 
 import type { PartialTheme } from '@elastic/charts';
 import { useMemo } from 'react';
-import { useCurrentEuiTheme } from './use_color_range';
+import { useCurrentEuiTheme } from '../../../hooks/use_current_eui_theme';
 export const useDataVizChartTheme = (): PartialTheme => {
-  const { euiTheme } = useCurrentEuiTheme();
+  const euiTheme = useCurrentEuiTheme();
   const chartTheme = useMemo<PartialTheme>(() => {
     const AREA_SERIES_COLOR = euiTheme.euiColorVis0;
     return {