pass the theme explicitly to remove the console errors when testing

x-pack/platform/plugins/shared/lens/public/app_plugin/lens_top_nav.tsx

@@ -17,7 +17,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { DataViewPickerProps } from '@kbn/unified-search-plugin/public';
 import { getManagedContentBadge } from '@kbn/managed-content-badge';
 import moment from 'moment';
-import { EuiCallOut, UseEuiTheme, useEuiBreakpoint } from '@elastic/eui';
+import { EuiCallOut, UseEuiTheme, euiBreakpoint } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { SerializedStyles, css } from '@emotion/react';
 import { LENS_APP_LOCATOR } from '../../common/locator/locator';
@@ -103,8 +103,8 @@ function getSaveButtonMeta({
   }
 }
 
-const NavItemWithDividerStyles = (euiThemeContext: UseEuiTheme) => css`
-  ${useEuiBreakpoint(['m', 'l', 'xl'])} {
+const navItemWithDividerStyles = (euiThemeContext: UseEuiTheme) => css`
+  ${euiBreakpoint(euiThemeContext, ['m', 'l', 'xl'])} {
     margin-right: ${euiThemeContext.euiTheme.size.m};
     position: relative;
     &:after {
@@ -177,7 +177,7 @@ function getLensTopNavConfig(options: {
         values: { contextOriginatingApp },
       }),
       disableButton: !actions.goBack.enabled,
-      css: NavItemWithDividerStyles,
+      css: navItemWithDividerStyles,
     });
   }
 
@@ -195,7 +195,7 @@ function getLensTopNavConfig(options: {
       tooltip: actions.getUnderlyingDataUrl.tooltip,
       target: '_blank',
       href: actions.getUnderlyingDataUrl.getLink?.(),
-      css: NavItemWithDividerStyles,
+      css: navItemWithDividerStyles,
     });
   }
 
@@ -235,7 +235,7 @@ function getLensTopNavConfig(options: {
     description: i18n.translate('xpack.lens.app.settingsAriaLabel', {
       defaultMessage: 'Open the Lens settings menu',
     }),
-    css: NavItemWithDividerStyles,
+    css: navItemWithDividerStyles,
   });
 
   if (actions.cancel.visible) {

x-pack/platform/plugins/shared/lens/public/datasources/common/datapanel.styles.ts

@@ -6,9 +6,10 @@
  */
 
 import { UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 export const dataPanelStyles = ({ euiTheme }: UseEuiTheme) => {
-  return `
+  return css`
     padding: ${euiTheme.size.base} ${euiTheme.size.base} 0;
     .unifiedFieldListItemButton.kbnFieldButton {
       background: none;
@@ -17,5 +18,6 @@ export const dataPanelStyles = ({ euiTheme }: UseEuiTheme) => {
     }
     .unifiedFieldListItemButton__dragging {
       background: ${euiTheme.colors.backgroundBasePlain};
-    }`;
+    }
+  `;
 };

x-pack/platform/plugins/shared/lens/public/datasources/form_based/datapanel.tsx

@@ -7,7 +7,7 @@
 
 import { uniq } from 'lodash';
 import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiCallOut, EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { CoreStart } from '@kbn/core/public';
@@ -102,6 +102,7 @@ export function FormBasedDataPanel({
   const { indexPatterns, indexPatternRefs } = frame.dataViews;
   const { currentIndexPatternId } = state;
 
+  const euiThemeContext = useEuiTheme();
   const activeIndexPatterns = useMemo(() => {
     return uniq(
       (
@@ -116,7 +117,12 @@ export function FormBasedDataPanel({
   return (
     <>
       {Object.keys(indexPatterns).length === 0 && indexPatternRefs.length === 0 ? (
-        <EuiFlexGroup gutterSize="m" css={dataPanelStyles} direction="column" responsive={false}>
+        <EuiFlexGroup
+          gutterSize="m"
+          css={dataPanelStyles(euiThemeContext)}
+          direction="column"
+          responsive={false}
+        >
           <EuiFlexItem grow={null}>
             <EuiCallOut
               data-test-subj="indexPattern-no-indexpatterns"
@@ -196,6 +202,7 @@ export const InnerFormBasedDataPanel = function InnerFormBasedDataPanel({
   layerFields?: string[];
   activeIndexPatterns: IndexPattern[];
 }) {
+  const euiThemeContext = useEuiTheme();
   const { indexPatterns } = frame.dataViews;
   const currentIndexPattern = indexPatterns[currentIndexPatternId];
 
@@ -395,7 +402,7 @@ export const InnerFormBasedDataPanel = function InnerFormBasedDataPanel({
 
   return (
     <FieldList
-      css={dataPanelStyles}
+      css={dataPanelStyles(euiThemeContext)}
       isProcessing={isProcessing}
       prepend={<FieldListFilters {...fieldListFiltersProps} data-test-subj="lnsIndexPattern" />}
     >

x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimension_editor.tsx

@@ -141,7 +141,9 @@ export function DimensionEditor(props: DimensionEditorProps) {
 
   const temporaryQuickFunction = Boolean(temporaryState === quickFunctionsName);
   const temporaryStaticValue = Boolean(temporaryState === staticValueOperationName);
-  const { euiTheme } = useEuiTheme();
+
+  const euiThemeContext = useEuiTheme();
+  const { euiTheme } = euiThemeContext;
 
   const updateLayer = useCallback(
     (newLayer: Partial<FormBasedLayer>) =>
@@ -534,7 +536,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
         isActive,
         size: 's',
         isDisabled: !!disabledStatus,
-        css: operationsButtonStyles,
+        css: operationsButtonStyles(euiThemeContext),
         'data-test-subj': `lns-indexPatternDimension-${operationType}${
           compatibleWithCurrentField ? '' : ' incompatible'
         }`,
@@ -811,7 +813,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
         fullWidth
       >
         <EuiListGroup
-          css={sideNavItems.length > 3 ? operationsTwoColumnsStyles : undefined}
+          css={sideNavItems.length > 3 ? operationsTwoColumnsStyles(euiThemeContext) : undefined}
           gutterSize="none"
           color="primary"
           listItems={
@@ -1292,15 +1294,15 @@ export function DimensionEditor(props: DimensionEditorProps) {
 }
 
 const operationsTwoColumnsStyles = ({ euiTheme }: UseEuiTheme) => {
-  return `
+  return css`
     display: block;
     column-count: 2;
     column-gap: ${euiTheme.size.m};
   `;
 };
 
 export const operationsButtonStyles = ({ euiTheme }: UseEuiTheme) => {
-  return `
+  return css`
     > button {
       padding-top: 0;
       padding-bottom: 0;

x-pack/platform/plugins/shared/lens/public/datasources/form_based/dimension_panel/dimensions_editor_helpers.tsx

@@ -14,7 +14,8 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiCallOut, EuiButtonGroup, EuiFormRow, UseEuiTheme } from '@elastic/eui';
+import { EuiCallOut, EuiButtonGroup, EuiFormRow, UseEuiTheme, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { nonNullable } from '../../../utils';
 import {
   operationDefinitionMap,
@@ -140,6 +141,7 @@ export const CalloutWarning = ({
   currentOperationType: keyof typeof operationDefinitionMap | undefined;
   temporaryStateType: TemporaryState;
 }) => {
+  const euiThemeContext = useEuiTheme();
   if (
     temporaryStateType === 'none' ||
     (currentOperationType != null && isQuickFunction(currentOperationType))
@@ -153,7 +155,7 @@ export const CalloutWarning = ({
     return (
       <>
         <EuiCallOut
-          css={dimensionEditorWarningStyles}
+          css={dimensionEditorWarningStyles(euiThemeContext)}
           size="s"
           title={i18n.translate('xpack.lens.indexPattern.staticValueWarning', {
             defaultMessage: 'Static value currently applied',
@@ -173,7 +175,7 @@ export const CalloutWarning = ({
   return (
     <>
       <EuiCallOut
-        css={dimensionEditorWarningStyles}
+        css={dimensionEditorWarningStyles(euiThemeContext)}
         size="s"
         title={i18n.translate('xpack.lens.indexPattern.formulaWarning', {
           defaultMessage: 'Formula currently applied',
@@ -253,7 +255,7 @@ export const DimensionEditorButtonGroups = ({
 };
 
 const dimensionEditorWarningStyles = ({ euiTheme }: UseEuiTheme) => {
-  return `
+  return css`
     margin-bottom: ${euiTheme.size.base};
     margin-top: ${euiTheme.size.s};
   `;

x-pack/platform/plugins/shared/lens/public/datasources/form_based/help_popover.tsx

@@ -17,8 +17,10 @@ import {
   EuiPopoverTitle,
   EuiText,
   UseEuiTheme,
+  useEuiTheme,
 } from '@elastic/eui';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
+import { css } from '@emotion/react';
 import { StartServices } from '../../types';
 
 export const HelpPopoverButton = ({
@@ -28,32 +30,34 @@ export const HelpPopoverButton = ({
   children: string;
   onClick: EuiLinkButtonProps['onClick'];
 }) => {
+  const euiThemeContext = useEuiTheme();
   return (
     <EuiText size="xs">
       <EuiLink onClick={onClick}>
-        <EuiIcon size="s" type="help" css={helpPopoverStyles.button} />
+        <EuiIcon size="s" type="help" css={helpPopoverStyles.button(euiThemeContext)} />
         {children}
       </EuiLink>
     </EuiText>
   );
 };
 
 const HelpPopoverContent = ({ title, children }: { title?: string; children: ReactNode }) => {
+  const euiThemeContext = useEuiTheme();
   return (
     <>
       {title && <EuiPopoverTitle paddingSize="m">{title}</EuiPopoverTitle>}
-      <EuiText className="eui-yScroll" size="s" css={helpPopoverStyles.content}>
+      <EuiText className="eui-yScroll" size="s" css={helpPopoverStyles.content(euiThemeContext)}>
         {children}
       </EuiText>
     </>
   );
 };
 
 const helpPopoverStyles = {
-  button: ({ euiTheme }: UseEuiTheme) => `
+  button: ({ euiTheme }: UseEuiTheme) => css`
     margin-right: ${euiTheme.size.xs};
   `,
-  content: ({ euiTheme }: UseEuiTheme) => `
+  content: ({ euiTheme }: UseEuiTheme) => css`
     max-height: 40vh;
     padding: ${euiTheme.size.m};
   `,

x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/filters/filter_popover.tsx

@@ -6,12 +6,13 @@
  */
 
 import React, { useState } from 'react';
-import { EuiPopover, EuiSpacer, euiTextBreakWord, useEuiFontSize, UseEuiTheme } from '@elastic/eui';
+import { euiFontSize, EuiPopover, EuiSpacer, euiTextBreakWord, UseEuiTheme } from '@elastic/eui';
 import type { Query } from '@kbn/es-query';
 // Need to keep it separate to make it work Jest mocks in dimension_panel tests
 // import { QueryInput } from '../../../../shared_components/query_input';
 import { isQueryValid, QueryInput } from '@kbn/visualization-ui-components';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { css } from '@emotion/react';
 import { LENS_APP_NAME } from '../../../../../../common/constants';
 import { IndexPattern } from '../../../../../types';
 import { FilterValue, defaultLabel } from '.';
@@ -101,12 +102,11 @@ export const FilterPopover = ({
   );
 };
 
-export const DraggablePopoverButtonStyles = ({ euiTheme }: UseEuiTheme) => {
-  const euiFontSize = useEuiFontSize('s');
-  return `
+export const draggablePopoverButtonStyles = (euiThemeContext: UseEuiTheme) => {
+  return css`
     ${euiTextBreakWord()};
-    ${euiFontSize};
-    min-height: ${euiTheme.size.xl};
+    ${euiFontSize(euiThemeContext, 's')};
+    min-height: ${euiThemeContext.euiTheme.size.xl};
     width: 100%;
   `;
 };

x-pack/platform/plugins/shared/lens/public/datasources/form_based/operations/definitions/filters/filters.tsx

@@ -8,7 +8,7 @@
 import React, { useState } from 'react';
 import { omit } from 'lodash';
 import { i18n } from '@kbn/i18n';
-import { EuiFormRow, EuiLink, htmlIdGenerator } from '@elastic/eui';
+import { EuiFormRow, EuiLink, htmlIdGenerator, useEuiTheme } from '@elastic/eui';
 import type { Query } from '@kbn/es-query';
 import type { AggFunctionsMapping } from '@kbn/data-plugin/public';
 import { queryFilterToAst } from '@kbn/data-plugin/common';
@@ -23,7 +23,7 @@ import { IndexPattern } from '../../../../../types';
 import { updateColumnParam } from '../../layer_helpers';
 import type { OperationDefinition } from '..';
 import type { BaseIndexPatternColumn } from '../column_types';
-import { DraggablePopoverButtonStyles, FilterPopover } from './filter_popover';
+import { draggablePopoverButtonStyles, FilterPopover } from './filter_popover';
 import { TermsIndexPatternColumn } from '../terms';
 import { isColumnOfType } from '../helpers';
 
@@ -180,6 +180,7 @@ export const FilterList = ({
   indexPattern: IndexPattern;
   defaultQuery: Filter;
 }) => {
+  const euiThemeContext = useEuiTheme();
   const [activeFilterId, setActiveFilterId] = useState('');
   const [localFilters, setLocalFilters] = useState(() =>
     filters.map((filter) => ({ ...filter, id: generateId() }))
@@ -274,7 +275,7 @@ export const FilterList = ({
                     title={i18n.translate('xpack.lens.indexPattern.filters.clickToEdit', {
                       defaultMessage: 'Click to edit',
                     })}
-                    css={DraggablePopoverButtonStyles}
+                    css={draggablePopoverButtonStyles(euiThemeContext)}
                   >
                     {filter.label || (filter.input.query as string) || defaultLabel}
                   </EuiLink>