[Lens/SCSS] Replace scss to css-in-js for Lens codebase

src/platform/packages/shared/kbn-chart-icons/tsconfig.json

@@ -2,16 +2,11 @@
   "extends": "../../../../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "target/types",
-    "types": [
-      "jest",
-      "node",
-      "react",
-      "@emotion/css/types"
-    ],
   },
   "include": [
     "**/*.ts",
     "**/*.tsx",
+    "../../../../../typings/**/*"
   ],
   "kbn_references": [
     "@kbn/ui-theme"

src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/dimension_button.tsx

@@ -75,9 +75,12 @@ function DimensionButtonImpl({
         <EuiFlexItem>
           <EuiToolTip content={message?.content} position="left">
             <EuiLink
-              className="lnsLayerPanel__dimensionLink"
               css={css`
                 width: 100%;
+                &:focus {
+                  background-color: transparent;
+                  text-decoration-thickness: ${euiTheme.border.thin} !important;
+                }
                 &:hover {
                   text-decoration: none;
                 }

src/platform/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/trigger.tsx

@@ -59,6 +59,9 @@ export const DimensionTrigger = ({
           <span
             className="dimensionTrigger__textLabel"
             css={css`
+              .domDroppable--replacing & {
+                text-decoration: line-through;
+              }
               transition: background-color ${euiThemeVars.euiAnimSpeedFast} ease-in-out;
 
               &:hover {

src/platform/test/functional/apps/discover/group3/_lens_vis.ts

@@ -256,7 +256,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         '10'
       );
 
-      await testSubjects.click('unifiedHistogramEditFlyoutVisualization');
       expect(await getCurrentVisTitle()).to.be('Line');
       expect(await discover.getVisContextSuggestionType()).to.be('histogramForESQL');
     });

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

@@ -5,14 +5,14 @@
  * 2.0.
  */
 
-import './app.scss';
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { i18n } from '@kbn/i18n';
 import type { TimeRange } from '@kbn/es-query';
 import { EuiConfirmModal } from '@elastic/eui';
 import { useExecutionContext, useKibana } from '@kbn/kibana-react-plugin/public';
 import { OnSaveProps } from '@kbn/saved-objects-plugin/public';
 import type { VisualizeFieldContext } from '@kbn/ui-actions-plugin/public';
+import { css } from '@emotion/react';
 import { LensAppProps, LensAppServices } from './types';
 import { LensTopNavMenu } from './lens_top_nav';
 import { AddUserMessages, EditorFrameInstance, Simplify, UserMessagesGetter } from '../types';
@@ -437,7 +437,18 @@ export function App({
 
   return (
     <>
-      <div className="lnsApp" data-test-subj="lnsApp" role="main">
+      <div
+        data-test-subj="lnsApp"
+        className="lnsApp"
+        role="main"
+        css={css`
+          flex: 1 1 auto;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          overflow: hidden;
+        `}
+      >
         <LensTopNavMenu
           initialInput={initialInput}
           redirectToOrigin={redirectToOrigin}

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

@@ -17,8 +17,9 @@ 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 } 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';
 import { LENS_APP_NAME } from '../../common/constants';
 import { LensAppServices, LensTopNavActions, LensTopNavMenuProps } from './types';
@@ -102,6 +103,23 @@ function getSaveButtonMeta({
   }
 }
 
+const navItemWithDividerStyles = (euiThemeContext: UseEuiTheme) => css`
+  ${euiBreakpoint(euiThemeContext, ['m', 'l', 'xl'])} {
+    margin-right: ${euiThemeContext.euiTheme.size.m};
+    position: relative;
+    &:after {
+      border-right: ${euiThemeContext.euiTheme.border.thin};
+      bottom: 0;
+      content: '';
+      display: block;
+      pointer-events: none;
+      position: absolute;
+      right: -${euiThemeContext.euiTheme.size.s};
+      top: 0;
+    }
+  }
+`;
+
 function getLensTopNavConfig(options: {
   isByValueMode: boolean;
   actions: LensTopNavActions;
@@ -123,7 +141,10 @@ function getLensTopNavConfig(options: {
     contextFromEmbeddable,
     isByValueMode,
   } = options;
-  const topNavMenu: TopNavMenuData[] = [];
+
+  const topNavMenu: Array<
+    TopNavMenuData | ({ css: ({ euiTheme }: UseEuiTheme) => SerializedStyles } & TopNavMenuData)
+  > = [];
 
   const showSaveAndReturn = actions.saveAndReturn.visible;
 
@@ -150,13 +171,13 @@ function getLensTopNavConfig(options: {
         values: { contextOriginatingApp },
       }),
       run: actions.goBack.execute,
-      className: 'lnsNavItem__withDivider',
       testId: 'lnsApp_goBackToAppButton',
       description: i18n.translate('xpack.lens.app.goBackLabel', {
         defaultMessage: `Go back to {contextOriginatingApp}`,
         values: { contextOriginatingApp },
       }),
       disableButton: !actions.goBack.enabled,
+      css: navItemWithDividerStyles,
     });
   }
 
@@ -169,12 +190,12 @@ function getLensTopNavConfig(options: {
       label: exploreDataInDiscoverLabel,
       run: actions.getUnderlyingDataUrl.execute,
       testId: 'lnsApp_openInDiscover',
-      className: 'lnsNavItem__withDivider',
       description: exploreDataInDiscoverLabel,
       disableButton: !actions.getUnderlyingDataUrl.enabled,
       tooltip: actions.getUnderlyingDataUrl.tooltip,
       target: '_blank',
       href: actions.getUnderlyingDataUrl.getLink?.(),
+      css: navItemWithDividerStyles,
     });
   }
 
@@ -210,11 +231,11 @@ function getLensTopNavConfig(options: {
       defaultMessage: 'Settings',
     }),
     run: actions.openSettings.execute,
-    className: 'lnsNavItem__withDivider',
     testId: 'lnsApp_settingsButton',
     description: i18n.translate('xpack.lens.app.settingsAriaLabel', {
       defaultMessage: 'Open the Lens settings menu',
     }),
+    css: navItemWithDividerStyles,
   });
 
   if (actions.cancel.visible) {

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

@@ -398,8 +398,6 @@ export async function mountApp(
     window.dispatchEvent(new HashChangeEvent('hashchange'));
   });
 
-  params.element.classList.add('lnsAppWrapper');
-
   render(
     <KibanaRenderContextProvider {...coreStart}>
       <KibanaContextProvider services={lensServices}>

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

@@ -122,6 +122,7 @@ export const FlyoutWrapper = ({
           margin-left: -${euiThemeVars.euiFormMaxWidth};
           pointer-events: none;
           .euiFlyoutBody__overflow {
+            transform: initial;
             -webkit-mask-image: none;
             padding-left: inherit;
             margin-left: inherit;

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

@@ -0,0 +1,23 @@
+/*
+ * 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 { UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const dataPanelStyles = ({ euiTheme }: UseEuiTheme) => {
+  return css`
+    padding: ${euiTheme.size.base} ${euiTheme.size.base} 0;
+    .unifiedFieldListItemButton.kbnFieldButton {
+      background: none;
+      box-shadow: none;
+      margin-bottom: calc(${euiTheme.size.xs} / 2);
+    }
+    .unifiedFieldListItemButton__dragging {
+      background: ${euiTheme.colors.backgroundBasePlain};
+    }
+  `;
+};

x-pack/platform/plugins/shared/lens/public/datasources/common/field_item.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import './field_item.scss';
-
 import React, { useCallback, useState, useMemo } from 'react';
 import { EuiText, EuiButton, EuiPopoverFooter } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -251,6 +249,10 @@ export function InnerFieldItem(props: FieldItemProps) {
         isOpen={infoIsOpen}
         closePopover={closePopover}
         panelClassName="lnsFieldItem__fieldPanel"
+        panelStyle={{
+          minWidth: '260px',
+          maxWidth: '300px',
+        }}
         initialFocus=".lnsFieldItem__fieldPanel"
         data-test-subj="lnsFieldListPanelField"
         panelProps={{