Move EUI styled components integration to kibana_react (#86065)

...from xpack_legacy.

Remove the duplicated typings from the observability plugin and only use the ones from kibana_react.

Fixes #78248.

x-pack/plugins/xpack_legacy/common/eui_styled_components.tsx → src/plugins/kibana_react/common/eui_styled_components.tsx

@@ -1,7 +1,9 @@
 /*
  * 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.
+ * or more contributor license agreements. Licensed under the Elastic License
+ * and the Server Side Public License, v 1; you may not use this file except in
+ * compliance with, at your election, the Elastic License or the Server Side
+ * Public License, v 1.
  */
 
 import React from 'react';

src/plugins/kibana_react/common/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * and the Server Side Public License, v 1; you may not use this file except in
+ * compliance with, at your election, the Elastic License or the Server Side
+ * Public License, v 1.
+ */
+
+export * from './eui_styled_components';

src/plugins/kibana_react/kibana.json

@@ -2,5 +2,6 @@
   "id": "kibanaReact",
   "version": "kibana",
   "ui": true,
-  "server": false
+  "server": false,
+  "extraPublicDirs": ["common"]
 }

src/plugins/kibana_react/tsconfig.json

@@ -7,11 +7,6 @@
     "declaration": true,
     "declarationMap": true
   },
-  "include": [
-    "public/**/*",
-    "../../../typings/**/*"
-  ],
-  "references": [
-    { "path": "../kibana_utils/tsconfig.json" }
-  ]
+  "include": ["common/**/*", "public/**/*", "../../../typings/**/*"],
+  "references": [{ "path": "../kibana_utils/tsconfig.json" }]
 }

x-pack/plugins/apm/common/service_health_status.ts

@@ -5,10 +5,9 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { EuiTheme } from '../../../../src/plugins/kibana_react/common';
 import { ANOMALY_SEVERITY } from '../../ml/common';
 
-import { EuiTheme } from '../../xpack_legacy/common';
-
 export enum ServiceHealthStatus {
   healthy = 'healthy',
   critical = 'critical',

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/ExceptionStacktrace.stories.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { ComponentType } from 'react';
-import { EuiThemeProvider } from '../../../../../../observability/public';
+import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
 import { Exception } from '../../../../../typings/es_schemas/raw/error_raw';
 import { ExceptionStacktrace } from './ExceptionStacktrace';
 

x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/__stories__/MapTooltip.stories.tsx

@@ -6,7 +6,7 @@
 
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { EuiThemeProvider } from '../../../../../../../observability/public';
+import { EuiThemeProvider } from '../../../../../../../../../src/plugins/kibana_react/common';
 import { MapToolTip } from '../MapToolTip';
 import { COUNTRY_NAME, TRANSACTION_DURATION_COUNTRY } from '../useLayerList';
 

x-pack/plugins/apm/public/components/app/RumDashboard/utils/test_helper.tsx

@@ -11,7 +11,7 @@ import { of } from 'rxjs';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import { MemoryHistory } from 'history';
-import { EuiThemeProvider } from '../../../../../../observability/public';
+import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
 import { KibanaContextProvider } from '../../../../../../../../src/plugins/kibana_react/public';
 import { UrlParamsProvider } from '../../../../context/url_params_context/url_params_context';
 

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx

@@ -7,7 +7,7 @@
 import cytoscape from 'cytoscape';
 import { HttpSetup } from 'kibana/public';
 import React, { ComponentType } from 'react';
-import { EuiThemeProvider } from '../../../../../../observability/public';
+import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
 import { MockApmPluginContextWrapper } from '../../../../context/apm_plugin/mock_apm_plugin_context';
 import { MockUrlParamsContextProvider } from '../../../../context/url_params_context/mock_url_params_context_provider';
 import { createCallApmApi } from '../../../../services/rest/createCallApmApi';

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/service_stats_list.stories.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { ComponentType } from 'react';
-import { EuiThemeProvider } from '../../../../../../observability/public';
+import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
 import { ServiceStatsList } from './ServiceStatsList';
 
 export default {

x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/Cytoscape.stories.tsx

@@ -7,7 +7,7 @@
 import { EuiCard, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import cytoscape from 'cytoscape';
 import React, { ComponentType } from 'react';
-import { EuiThemeProvider } from '../../../../../../observability/public';
+import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
 import { Cytoscape } from '../Cytoscape';
 import { iconForNode } from '../icons';
 import { Centerer } from './centerer';

x-pack/plugins/apm/public/components/app/ServiceMap/__stories__/cytoscape_example_data.stories.tsx

@@ -16,7 +16,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import React, { ComponentType, useEffect, useState } from 'react';
-import { EuiThemeProvider } from '../../../../../../observability/public';
+import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
 import { Cytoscape } from '../Cytoscape';
 import { Centerer } from './centerer';
 import exampleResponseHipsterStore from './example_response_hipster_store.json';

x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts

@@ -5,7 +5,7 @@
  */
 import cytoscape from 'cytoscape';
 import { CSSProperties } from 'react';
-import { EuiTheme } from '../../../../../observability/public';
+import { EuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
 import { ServiceAnomalyStats } from '../../../../common/anomaly_detection';
 import {
   SERVICE_NAME,

x-pack/plugins/apm/public/components/app/ServiceMap/index.test.tsx

@@ -8,9 +8,9 @@ import { render } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { CoreStart } from 'kibana/public';
 import React, { ReactNode } from 'react';
-import { createKibanaReactContext } from 'src/plugins/kibana_react/public';
+import { createKibanaReactContext } from '../../../../../../../src/plugins/kibana_react/public';
 import { License } from '../../../../../licensing/common/license';
-import { EuiThemeProvider } from '../../../../../observability/public';
+import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
 import { MockApmPluginContextWrapper } from '../../../context/apm_plugin/mock_apm_plugin_context';
 import { LicenseContext } from '../../../context/license/license_context';
 import * as useFetcherModule from '../../../hooks/use_fetcher';

x-pack/plugins/apm/public/components/app/ServiceMap/use_cytoscape_event_handlers.test.tsx

@@ -7,7 +7,8 @@
 import { renderHook } from '@testing-library/react-hooks';
 import cytoscape from 'cytoscape';
 import dagre from 'cytoscape-dagre';
-import { EuiTheme, useUiTracker } from '../../../../../observability/public';
+import { EuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
+import { useUiTracker } from '../../../../../observability/public';
 import { useCytoscapeEventHandlers } from './use_cytoscape_event_handlers';
 import lodash from 'lodash';
 

x-pack/plugins/apm/public/components/app/ServiceMap/use_cytoscape_event_handlers.ts

@@ -7,7 +7,8 @@
 import cytoscape from 'cytoscape';
 import { debounce } from 'lodash';
 import { useEffect } from 'react';
-import { EuiTheme, useUiTracker } from '../../../../../observability/public';
+import { EuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
+import { useUiTracker } from '../../../../../observability/public';
 import { getAnimationOptions, getNodeHeight } from './cytoscape_options';
 
 /*

x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.stories.tsx

@@ -13,6 +13,7 @@
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { HttpSetup } from 'kibana/public';
+import { EuiThemeProvider } from '../../../../../../../../../src/plugins/kibana_react/common';
 import { AgentConfiguration } from '../../../../../../common/agent_configuration/configuration_types';
 import { FETCH_STATUS } from '../../../../../hooks/use_fetcher';
 import { createCallApmApi } from '../../../../../services/rest/createCallApmApi';
@@ -21,7 +22,6 @@ import {
   ApmPluginContext,
   ApmPluginContextValue,
 } from '../../../../../context/apm_plugin/apm_plugin_context';
-import { EuiThemeProvider } from '../../../../../../../observability/public';
 
 storiesOf(
   'app/Settings/AgentConfigurations/AgentConfigurationCreateEdit',

x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx

@@ -23,10 +23,10 @@ import d3 from 'd3';
 import { isEmpty } from 'lodash';
 import React from 'react';
 import { ValuesType } from 'utility-types';
-import { useTheme } from '../../../../../../observability/public';
 import { getDurationFormatter } from '../../../../../common/utils/formatters';
 import type { IUrlParams } from '../../../../context/url_params_context/types';
 import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
+import { useTheme } from '../../../../hooks/use_theme';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { unit } from '../../../../style/variables';
 import { ChartContainer } from '../../../shared/charts/chart_container';

x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/WaterfallContainer.stories.tsx

@@ -6,7 +6,7 @@
 
 import React, { ComponentType } from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { EuiThemeProvider } from '../../../../../../../observability/public';
+import { EuiThemeProvider } from '../../../../../../../../../src/plugins/kibana_react/common';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { TraceAPIResponse } from '../../../../../../server/lib/traces/get_trace';
 import { MockApmPluginContextWrapper } from '../../../../../context/apm_plugin/mock_apm_plugin_context';

x-pack/plugins/apm/public/components/app/service_inventory/service_inventory.test.tsx

@@ -9,10 +9,10 @@ import { CoreStart } from 'kibana/public';
 import { merge } from 'lodash';
 import React, { ReactNode } from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { createKibanaReactContext } from 'src/plugins/kibana_react/public';
+import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
+import { createKibanaReactContext } from '../../../../../../../src/plugins/kibana_react/public';
 import { ServiceHealthStatus } from '../../../../common/service_health_status';
 import { ServiceInventory } from '.';
-import { EuiThemeProvider } from '../../../../../observability/public';
 import { ApmPluginContextValue } from '../../../context/apm_plugin/apm_plugin_context';
 import {
   mockApmPluginContextValue,

x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx

@@ -8,7 +8,7 @@ import { shallow } from 'enzyme';
 import React from 'react';
 import { AgentMarker } from './AgentMarker';
 import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
-import { EuiThemeProvider } from '../../../../../../../observability/public';
+import { EuiThemeProvider } from '../../../../../../../../../src/plugins/kibana_react/common';
 
 describe('AgentMarker', () => {
   const mark = {

x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx

@@ -6,7 +6,7 @@
 import { render } from '@testing-library/react';
 import React, { ReactNode } from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { EuiThemeProvider } from '../../../../../observability/public';
+import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
 import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider';
 import { IUrlParams } from '../../../context/url_params_context/types';
 import {

x-pack/plugins/apm/public/hooks/use_theme.tsx

@@ -6,7 +6,7 @@
 
 import { useContext } from 'react';
 import { ThemeContext } from 'styled-components';
-import { EuiTheme } from '../../../observability/public';
+import { EuiTheme } from '../../../../../src/plugins/kibana_react/common';
 
 export function useTheme(): EuiTheme {
   const theme = useContext(ThemeContext);

x-pack/plugins/apm/public/selectors/latency_chart_selector.test.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiTheme } from '../../../xpack_legacy/common';
+import { EuiTheme } from '../../../../../src/plugins/kibana_react/common';
 import { LatencyAggregationType } from '../../common/latency_aggregation_types';
 import {
   getLatencyChartSelector,

x-pack/plugins/apm/public/selectors/latency_chart_selectors.ts

@@ -6,7 +6,7 @@
 import { Fit } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { rgba } from 'polished';
-import { EuiTheme } from '../../../observability/public';
+import { EuiTheme } from '../../../../../src/plugins/kibana_react/common';
 import { asDuration } from '../../common/utils/formatters';
 import { APMChartSpec, Coordinate } from '../../typings/timeseries';
 import { APIReturnType } from '../services/rest/createCallApmApi';

x-pack/plugins/apm/public/selectors/throuput_chart_selectors.test.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiTheme } from '../../../observability/public';
+import { EuiTheme } from '../../../../../src/plugins/kibana_react/common';
 import {
   getThrouputChartSelector,
   ThrouputChartsResponse,

x-pack/plugins/apm/public/selectors/throuput_chart_selectors.ts

@@ -5,7 +5,7 @@
  */
 
 import { difference, zipObject } from 'lodash';
-import { EuiTheme } from '../../../observability/public';
+import { EuiTheme } from '../../../../../src/plugins/kibana_react/common';
 import { asTransactionRate } from '../../common/utils/formatters';
 import { TimeSeries } from '../../typings/timeseries';
 import { APIReturnType } from '../services/rest/createCallApmApi';

x-pack/plugins/apm/public/utils/testHelpers.tsx

@@ -14,12 +14,12 @@ import moment from 'moment';
 import { Moment } from 'moment-timezone';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common';
 import {
   ESFilter,
   ESSearchRequest,
   ESSearchResponse,
 } from '../../../../typings/elasticsearch';
-import { EuiThemeProvider } from '../../../observability/public';
 import { PromiseReturnType } from '../../../observability/typings/common';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { APMConfig } from '../../server';

x-pack/plugins/fleet/public/applications/fleet/app.tsx

@@ -36,7 +36,7 @@ import { ProtectedRoute } from './index';
 import { FleetConfigType, FleetStartServices } from '../../plugin';
 import { UIExtensionsStorage } from './types';
 import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
-import { EuiThemeProvider } from '../../../../xpack_legacy/common';
+import { EuiThemeProvider } from '../../../../../../src/plugins/kibana_react/common';
 import { UIExtensionsContext } from './hooks/use_ui_extension';
 
 const ErrorLayout = ({ children }: { children: JSX.Element }) => (

x-pack/plugins/infra/common/inventory_models/aws_ec2/layout.tsx

@@ -15,8 +15,7 @@ import { SubSection } from '../../../public/pages/metrics/metric_detail/componen
 import { LayoutContent } from '../../../public/pages/metrics/metric_detail/components/layout_content';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../../observability/public';
+import { withTheme } from '../../../../../../src/plugins/kibana_react/common';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { MetadataDetails } from '../../../public/pages/metrics/metric_detail/components/metadata_details';
 

x-pack/plugins/infra/common/inventory_models/aws_rds/layout.tsx

@@ -13,8 +13,7 @@ import { Section } from '../../../public/pages/metrics/metric_detail/components/
 import { SubSection } from '../../../public/pages/metrics/metric_detail/components/sub_section';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../../observability/public';
+import { withTheme } from '../../../../../../src/plugins/kibana_react/common';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/metric_detail/components/layout_content';
 

x-pack/plugins/infra/common/inventory_models/aws_s3/layout.tsx

@@ -13,8 +13,7 @@ import { Section } from '../../../public/pages/metrics/metric_detail/components/
 import { SubSection } from '../../../public/pages/metrics/metric_detail/components/sub_section';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../../observability/public';
+import { withTheme } from '../../../../../../src/plugins/kibana_react/common';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/metric_detail/components/layout_content';
 

x-pack/plugins/infra/common/inventory_models/aws_sqs/layout.tsx

@@ -13,8 +13,7 @@ import { Section } from '../../../public/pages/metrics/metric_detail/components/
 import { SubSection } from '../../../public/pages/metrics/metric_detail/components/sub_section';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../../observability/public';
+import { withTheme } from '../../../../../../src/plugins/kibana_react/common';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/metric_detail/components/layout_content';
 

x-pack/plugins/infra/common/inventory_models/container/layout.tsx

@@ -15,8 +15,7 @@ import { SubSection } from '../../../public/pages/metrics/metric_detail/componen
 import { GaugesSectionVis } from '../../../public/pages/metrics/metric_detail/components/gauges_section_vis';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../../observability/public';
+import { withTheme } from '../../../../../../src/plugins/kibana_react/common';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/metric_detail/components/layout_content';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths

x-pack/plugins/infra/common/inventory_models/host/layout.tsx

@@ -5,8 +5,7 @@
  */
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../../observability/public';
+import { withTheme } from '../../../../../../src/plugins/kibana_react/common';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutPropsWithTheme } from '../../../public/pages/metrics/metric_detail/types';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths

x-pack/plugins/infra/common/inventory_models/pod/layout.tsx

@@ -15,8 +15,7 @@ import { SubSection } from '../../../public/pages/metrics/metric_detail/componen
 import { GaugesSectionVis } from '../../../public/pages/metrics/metric_detail/components/gauges_section_vis';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../public/pages/metrics/metric_detail/components/chart_section_vis';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../../observability/public';
+import { withTheme } from '../../../../../../src/plugins/kibana_react/common';
 import * as Nginx from '../shared/layouts/nginx';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { MetadataDetails } from '../../../public/pages/metrics/metric_detail/components/metadata_details';

x-pack/plugins/infra/common/inventory_models/shared/layouts/aws.tsx

@@ -15,8 +15,7 @@ import { SubSection } from '../../../../public/pages/metrics/metric_detail/compo
 import { GaugesSectionVis } from '../../../../public/pages/metrics/metric_detail/components/gauges_section_vis';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../../public/pages/metrics/metric_detail/components/chart_section_vis';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../../../observability/public';
+import { withTheme } from '../../../../../../../src/plugins/kibana_react/common';
 
 export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
   <React.Fragment>

x-pack/plugins/infra/common/inventory_models/shared/layouts/nginx.tsx

@@ -13,8 +13,7 @@ import { Section } from '../../../../public/pages/metrics/metric_detail/componen
 import { SubSection } from '../../../../public/pages/metrics/metric_detail/components/sub_section';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../../public/pages/metrics/metric_detail/components/chart_section_vis';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../../../observability/public';
+import { withTheme } from '../../../../../../../src/plugins/kibana_react/common';
 
 export const Layout = withTheme(({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
   <React.Fragment>