[ES|QL] Inline editing flyout styles (#179953)

stratoula · web-flow · commit a85ba2b7ee27 · 2024-04-03T21:42:22.000+02:00
## Summary The EuiThemeProvider messes up with our custom styles for some reason. I am using the kibanaThemeProvider which is used across Lens and doesnt create the problem ![image (31)](https://github.com/elastic/kibana/assets/17003240/e6a16840-8beb-4a89-bc97-e97608fe5210) ![image (30)](https://github.com/elastic/kibana/assets/17003240/5f1f2041-9859-4164-8f21-c2c42e492cad)
diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration.tsx
@@ -6,14 +6,14 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import { EuiFlyout, EuiLoadingSpinner, EuiOverlayMask, EuiThemeProvider } from '@elastic/eui';
+import { EuiFlyout, EuiLoadingSpinner, EuiOverlayMask } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n-react';
 import { Provider } from 'react-redux';
 import type { MiddlewareAPI, Dispatch, Action } from '@reduxjs/toolkit';
 import { css } from '@emotion/react';
 import type { CoreStart } from '@kbn/core/public';
-import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { isEqual } from 'lodash';
 import { RootDragDropProvider } from '@kbn/dom-drag-drop';
 import type { LensPluginStartDependencies } from '../../../plugin';
@@ -99,7 +99,6 @@ export async function getEditLensConfiguration(
     startDependencies,
     getLensAttributeService(coreStart, startDependencies)
   );
-  const theme = coreStart.theme.getTheme();
 
   return ({
     attributes,
@@ -224,15 +223,15 @@ export async function getEditLensConfiguration(
 
     return getWrapper(
       <Provider store={lensStore}>
-        <EuiThemeProvider colorMode={theme.darkMode ? 'dark' : 'light'}>
+        <KibanaThemeProvider theme$={coreStart.theme.theme$}>
           <I18nProvider>
             <KibanaContextProvider services={lensServices}>
               <RootDragDropProvider>
                 <LensEditConfigurationFlyout {...configPanelProps} />
               </RootDragDropProvider>
             </KibanaContextProvider>
           </I18nProvider>
-        </EuiThemeProvider>
+        </KibanaThemeProvider>
       </Provider>
     );
   };
