[Lens/SCSS] Replace scss to css-in-js for Lens codebase (elastic#209768)

Replace SCSS in css-in-js for Lens codebase

Author: mbondyra

src/platform/packages/shared/kbn-chart-icons/src/assets/drop_illustration.tsx

@@ -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-chart-icons/tsconfig.json

@@ -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/dimension_button.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/packages/shared/kbn-visualization-ui-components/components/dimension_buttons/trigger.tsx

@@ -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');
     });

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

@@ -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/_mixins.scss

@@ -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) {