[8.x] [Graph/SCSS] Refactor styles to use Emotion (#212916)

x-pack/platform/plugins/private/graph/public/_main.scss

@@ -20,12 +20,6 @@
  * Utilities
  */
 
-.gphNoUserSelect {
-  user-select: none;
-  -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
 .gphAppWrapper {
   display: flex;
   flex-direction: column;

x-pack/platform/plugins/private/graph/public/components/_index.scss

@@ -1,9 +1,2 @@
-@import './app';
-@import './search_bar';
 @import './source_modal';
-@import './graph_visualization/index';
 @import './settings/index';
-@import './field_manager/index';
-@import './graph';
-@import './sidebar';
-@import './inspect';

x-pack/platform/plugins/private/graph/public/components/control_panel/control_panel.tsx

@@ -8,6 +8,8 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { connect } from 'react-redux';
+import { type UseEuiTheme, useEuiShadow, euiFontSize } from '@elastic/eui';
+import { css } from '@emotion/react';
 import {
   ControlType,
   TermIntersect,
@@ -26,6 +28,7 @@ import { DrillDowns } from './drill_downs';
 import { DrillDownIconLinks } from './drill_down_icon_links';
 import { GraphState, liveResponseFieldsSelector, templatesSelector } from '../../state_management';
 import { SelectedNodeItem } from './selected_node_item';
+import { gphSidebarHeaderStyles } from '../../styles';
 
 export interface TargetOptions {
   toFields: WorkspaceField[];
@@ -78,21 +81,29 @@ const ControlPanelComponent = ({
   };
 
   return (
-    <div id="sidebar" className="gphSidebar">
+    <div
+      id="sidebar"
+      css={[
+        css`
+          ${useEuiShadow('m')};
+        `,
+        styles.gphSidebar,
+      ]}
+    >
       <ControlPanelToolBar
         workspace={workspace}
         liveResponseFields={liveResponseFields}
         onSetControl={onSetControl}
       />
 
       <div>
-        <div className="gphSidebar__header">
+        <div css={gphSidebarHeaderStyles}>
           {i18n.translate('xpack.graph.sidebar.selectionsTitle', {
             defaultMessage: 'Selections',
           })}
         </div>
         <SelectionToolBar workspace={workspace} onSetControl={onSetControl} />
-        <div className="gphSelectionList">
+        <div css={styles.gphSelectionList}>
           {workspace.selectedNodes.length === 0 && (
             <p className="help-block">
               {i18n.translate('xpack.graph.sidebar.selections.noSelectionsHelpText', {
@@ -137,6 +148,35 @@ const ControlPanelComponent = ({
   );
 };
 
+const styles = {
+  gphSidebar: (euiThemeContext: UseEuiTheme) =>
+    css({
+      position: 'absolute',
+      right: euiThemeContext.euiTheme.size.s,
+      top: euiThemeContext.euiTheme.size.s,
+      width: `calc(${euiThemeContext.euiTheme.size.xl} * 10)`,
+      zIndex: euiThemeContext.euiTheme.levels.flyout, // https://eui.elastic.co/#/theming/more-tokens#levels
+      backgroundColor: euiThemeContext.euiTheme.colors.emptyShade,
+      border: euiThemeContext.euiTheme.border.thin,
+      padding: euiThemeContext.euiTheme.size.xs,
+      borderRadius: euiThemeContext.euiTheme.border.radius.medium,
+      opacity: 0.9,
+
+      '.help-block': {
+        fontSize: euiFontSize(euiThemeContext, 'xs', { unit: 'px' }).fontSize,
+        color: euiThemeContext.euiTheme.colors.text,
+      },
+    }),
+
+  gphSelectionList: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      height: `calc(${euiTheme.size.l} * 10)`,
+      backgroundColor: euiTheme.colors.lightestShade,
+      overflow: 'auto',
+      marginBottom: 0,
+    }),
+};
+
 export const ControlPanel = connect((state: GraphState) => ({
   urlTemplates: templatesSelector(state),
   liveResponseFields: liveResponseFieldsSelector(state),

x-pack/platform/plugins/private/graph/public/components/control_panel/drill_down_icon_links.tsx

@@ -5,8 +5,15 @@
  * 2.0.
  */
 
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiToolTip,
+  type UseEuiTheme,
+} from '@elastic/eui';
 import React from 'react';
+import { css } from '@emotion/react';
 import { UrlTemplate } from '../../types';
 import { IconRenderer } from '../icon_renderer';
 
@@ -48,11 +55,16 @@ export const DrillDownIconLinks = ({
 
   return (
     <EuiFlexGroup
-      className="gphDrillDownIconLinks"
       justifyContent="flexStart"
       alignItems="center"
       gutterSize="xs"
       responsive={false}
+      css={({ euiTheme }: UseEuiTheme) =>
+        css({
+          marginTop: `calc(0.5 * ${euiTheme.size.xs})`,
+          marginBottom: `calc(0.5 * ${euiTheme.size.xs})`,
+        })
+      }
     >
       {drillDowns}
     </EuiFlexGroup>

x-pack/platform/plugins/private/graph/public/components/control_panel/drill_downs.tsx

@@ -10,6 +10,7 @@ import { i18n } from '@kbn/i18n';
 import { EuiIcon } from '@elastic/eui';
 import { UrlTemplate } from '../../types';
 import { IconRenderer } from '../icon_renderer';
+import { gphSidebarHeaderStyles, gphSidebarPanelStyles, noUserSelectStyles } from '../../styles';
 
 interface DrillDownsProps {
   urlTemplates: UrlTemplate[];
@@ -19,14 +20,14 @@ interface DrillDownsProps {
 export const DrillDowns = ({ urlTemplates, openUrlTemplate }: DrillDownsProps) => {
   return (
     <div>
-      <div className="gphSidebar__header">
+      <div css={gphSidebarHeaderStyles}>
         <EuiIcon type="iInCircle" />{' '}
         {i18n.translate('xpack.graph.sidebar.drillDownsTitle', {
           defaultMessage: 'Drill-downs',
         })}
       </div>
 
-      <div className="gphSidebar__panel">
+      <div css={gphSidebarPanelStyles}>
         {urlTemplates.length === 0 && (
           <p className="help-block">
             {i18n.translate('xpack.graph.sidebar.drillDowns.noDrillDownsHelpText', {
@@ -43,7 +44,7 @@ export const DrillDowns = ({ urlTemplates, openUrlTemplate }: DrillDownsProps) =
               <li className="list-group-item">
                 {urlTemplate.icon && (
                   <>
-                    <IconRenderer icon={urlTemplate.icon} className="gphNoUserSelect" />{' '}
+                    <IconRenderer icon={urlTemplate.icon} css={noUserSelectStyles} />{' '}
                   </>
                 )}
                 <a aria-hidden="true" onClick={onOpenUrlTemplate}>