make emotion typing global (#200958)

## Summary

Informed by
https://github.com/elastic/eui/discussions/6828#discussioncomment-11247425,
closes https://github.com/elastic/kibana-team/issues/1299

This PR consolidates typings to provide adequate typing for the `css`
prop EUI components accept. Placing the required typing file in the
typing directory means that all other plugins that already reference
this directory in their `tsconfig.json` would get this improvement by
default.

<!--
### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_node:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...


-->

typings/emotion.d.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends UseEuiTheme {}
+}

x-pack/packages/ml/data_grid/emotion.d.ts

@@ -1,14 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import '@emotion/react';
-import type { UseEuiTheme } from '@elastic/eui';
-
-declare module '@emotion/react' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface Theme extends UseEuiTheme {}
-}

x-pack/packages/ml/data_grid/tsconfig.json

@@ -14,7 +14,7 @@
   "include": [
     "**/*.ts",
     "**/*.tsx",
-    "./emotion.d.ts", // Emotion EUI theme typing
+    "../../../../typings/emotion.d.ts"
   ],
   "exclude": [
     "target/**/*"

x-pack/plugins/cases/public/common/lib/kibana/kibana_react.mock.tsx

@@ -15,7 +15,7 @@ import { coreMock } from '@kbn/core/public/mocks';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import type { ILicense } from '@kbn/licensing-plugin/public';
 import type { StartServices } from '../../../types';
-import type { EuiTheme } from '@kbn/kibana-react-plugin/common';
+import type { UseEuiTheme } from '@elastic/eui';
 import { securityMock } from '@kbn/security-plugin/public/mocks';
 import { spacesPluginMock } from '@kbn/spaces-plugin/public/mocks';
 import { triggersActionsUiMock } from '@kbn/triggers-actions-ui-plugin/public/mocks';
@@ -118,5 +118,5 @@ export const createKibanaContextProviderMock = () => {
     React.createElement(KibanaContextProvider, { services }, children);
 };
 
-export const getMockTheme = (partialTheme: RecursivePartial<EuiTheme>): EuiTheme =>
+export const getMockTheme = (partialTheme: RecursivePartial<UseEuiTheme>): UseEuiTheme =>
-  partialTheme as EuiTheme;
+  partialTheme as UseEuiTheme;

x-pack/plugins/cases/public/components/empty_value/empty_value.test.tsx

@@ -21,7 +21,7 @@ import {
 import { getMockTheme } from '../../common/lib/kibana/kibana_react.mock';
 
 describe('EmptyValue', () => {
-  const mockTheme = getMockTheme({ eui: { euiColorMediumShade: '#ece' } });
+  const mockTheme = getMockTheme({ euiTheme: { colors: { mediumShade: '#ece' } } });
 
   test('it renders against snapshot', () => {
     const wrapper = shallow(<p>{getEmptyString()}</p>);

x-pack/plugins/cases/public/components/empty_value/index.tsx

@@ -7,14 +7,11 @@
 
 import { get, isString } from 'lodash/fp';
 import React from 'react';
-import { css } from '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 import * as i18n from './translations';
 
-const emptyWrapperCss = css`
+const emptyWrapperCss = ({ euiTheme }: UseEuiTheme) => ({ color: euiTheme.colors.mediumShade });
-  color: ${euiThemeVars.euiColorMediumShade};
-`;
 
 export const getEmptyValue = () => '—';
 export const getEmptyString = () => `(${i18n.EMPTY_STRING})`;

x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx

@@ -93,6 +93,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
               <EuiSpacer size="s" />
               <Threshold
                 title={`Threshold breached`}
+                // @ts-expect-error this chart needs to be migrated to the new chart theming system, comment should be removed once https://github.com/elastic/kibana/issues/202138 is resolved
                 chartProps={{ theme, baseTheme: LEGACY_LIGHT_THEME }}
                 comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
                 id={'threshold-ratio-chart'}
@@ -160,6 +161,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
               <EuiSpacer size="s" />
               <Threshold
                 title={`Threshold breached`}
+                // @ts-expect-error this chart needs to be migrated to the new chart theming system, comment should be removed once https://github.com/elastic/kibana/issues/202138 is resolved
                 chartProps={{ theme, baseTheme: LEGACY_LIGHT_THEME }}
                 comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
                 id="logCountThreshold"

x-pack/plugins/observability_solution/observability/public/pages/alerts/alerts.test.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { ThemeProvider } from '@emotion/react';
+import { EuiThemeProvider as ThemeProvider } from '@elastic/eui';
 import { MAINTENANCE_WINDOW_FEATURE_ID } from '@kbn/alerting-plugin/common/maintenance_window';
 import { fetchActiveMaintenanceWindows } from '@kbn/alerts-ui-shared/src/maintenance_window_callout/api';
 import { RUNNING_MAINTENANCE_WINDOW_1 } from '@kbn/alerts-ui-shared/src/maintenance_window_callout/mock';
@@ -14,7 +14,6 @@ import { TimeBuckets } from '@kbn/data-plugin/common';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { observabilityAIAssistantPluginMock } from '@kbn/observability-ai-assistant-plugin/public/mock';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
-import { euiDarkVars } from '@kbn/ui-theme';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, waitFor } from '@testing-library/react';
 import React from 'react';
@@ -121,9 +120,7 @@ const queryClient = new QueryClient({
 });
 function AllTheProviders({ children }: { children: any }) {
   return (
-    <ThemeProvider
+    <ThemeProvider>
-      theme={() => ({ eui: { ...euiDarkVars, euiColorLightShade: '#ece' }, darkMode: true })}
-    >
       <IntlProvider locale="en">
         <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
       </IntlProvider>

x-pack/plugins/osquery/emotion.d.ts

@@ -1,14 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import '@emotion/react';
-import type { UseEuiTheme } from '@elastic/eui';
-
-declare module '@emotion/react' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface Theme extends UseEuiTheme {}
-}

x-pack/plugins/osquery/tsconfig.json

@@ -13,9 +13,7 @@
     "server/**/*",
     "../../../typings/**/*",
     // ECS and Osquery schema files
-    "public/common/schemas/*/**.json",
+    "public/common/schemas/*/**.json"
-    // Emotion theme typing
-    "./emotion.d.ts"
   ],
   "kbn_references": [
     "@kbn/core",

x-pack/plugins/security_solution/public/flyout/shared/components/expandable_panel.test.tsx

@@ -14,11 +14,9 @@ import {
   EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID,
   EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID,
 } from './test_ids';
-import { ThemeProvider } from '@emotion/react';
+import { EuiThemeProvider as ThemeProvider } from '@elastic/eui';
 import { ExpandablePanel } from './expandable_panel';
 
-const mockTheme = { eui: { euiColorMediumShade: '#ece' } };
-
 const TEST_ID = 'test-id';
 const defaultProps = {
   header: {
@@ -33,7 +31,7 @@ describe('<ExpandablePanel />', () => {
   describe('panel is not expandable by default', () => {
     it('should render non-expandable panel by default', () => {
       const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...defaultProps}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -54,7 +52,7 @@ describe('<ExpandablePanel />', () => {
         },
       };
       const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...props}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -70,7 +68,7 @@ describe('<ExpandablePanel />', () => {
 
     it('should only render left section of panel header when headerContent is not passed', () => {
       const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...defaultProps}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -88,7 +86,7 @@ describe('<ExpandablePanel />', () => {
         header: { ...defaultProps.header, headerContent: <>{'test header content'}</> },
       };
       const { getByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...props}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -105,7 +103,7 @@ describe('<ExpandablePanel />', () => {
 
     it('should not render content when content is null', () => {
       const { queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...defaultProps} />
         </ThemeProvider>
       );
@@ -123,7 +121,7 @@ describe('<ExpandablePanel />', () => {
 
     it('should render panel with toggle and collapsed by default', () => {
       const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...expandableDefaultProps}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -135,7 +133,7 @@ describe('<ExpandablePanel />', () => {
 
     it('click toggle button should expand the panel', () => {
       const { getByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...expandableDefaultProps}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -152,7 +150,7 @@ describe('<ExpandablePanel />', () => {
 
     it('should not render toggle or content when content is null', () => {
       const { queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...expandableDefaultProps} />
         </ThemeProvider>
       );
@@ -169,7 +167,7 @@ describe('<ExpandablePanel />', () => {
 
     it('should render header and content', () => {
       const { getByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...expandedDefaultProps}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -184,7 +182,7 @@ describe('<ExpandablePanel />', () => {
 
     it('click toggle button should collapse the panel', () => {
       const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...expandedDefaultProps}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -200,7 +198,7 @@ describe('<ExpandablePanel />', () => {
 
     it('should not render content when content is null', () => {
       const { queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...expandedDefaultProps} />
         </ThemeProvider>
       );