[8.x] [Graph/SCSS] Migrate settings _index.css, _legacy_icon.scss and _url_template_list.scss files to Emotion (#215021)

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

@@ -1,2 +1 @@
 @import './source_modal';
-@import './settings/index';

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

@@ -16,18 +16,21 @@ import {
   EuiText,
   EuiCallOut,
   EuiIcon,
+  useEuiTheme,
 } from '@elastic/eui';
 
 import { SettingsWorkspaceProps } from './settings';
 import { useListKeys } from './use_list_keys';
 import { IconRenderer } from '../icon_renderer';
+import { legacyIconStyles } from './legacy_icon.styles';
 
 export function BlocklistForm({
   blocklistedNodes,
   unblockNode,
   unblockAll,
 }: Pick<SettingsWorkspaceProps, 'blocklistedNodes' | 'unblockNode' | 'unblockAll'>) {
   const getListKey = useListKeys(blocklistedNodes || []);
+  const euiThemeContext = useEuiTheme();
   return (
     <>
       {blocklistedNodes && blocklistedNodes.length > 0 ? (
@@ -56,7 +59,13 @@ export function BlocklistForm({
             {blocklistedNodes.map((node) => (
               <EuiListGroupItem
                 icon={
-                  <IconRenderer icon={node.icon} className="gphLegacyIcon gphLegacyIcon--list" />
+                  <IconRenderer
+                    icon={node.icon}
+                    css={[
+                      legacyIconStyles.base(euiThemeContext),
+                      legacyIconStyles.list(euiThemeContext),
+                    ]}
+                  />
                 }
                 key={getListKey(node)}
                 label={node.label}

x-pack/platform/plugins/private/graph/public/components/settings/legacy_icon.styles.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 { type UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const legacyIconStyles = {
+  base: ({ euiTheme }: UseEuiTheme) => css`
+    width: calc(${euiTheme.size.s} * 2);
+  `,
+
+  list: ({ euiTheme }: UseEuiTheme) => css`
+    margin-right: ${euiTheme.size.m};
+  `,
+
+  pickable: ({ euiTheme }: UseEuiTheme) => css`
+    margin: ${euiTheme.size.xs};
+    cursor: pointer;
+    opacity: 0.7;
+
+    &:hover,
+    &:focus {
+      transform: scale(1.4);
+      opacity: 1;
+    }
+  `,
+
+  selected: css`
+    transform: scale(1.4);
+    opacity: 1;
+  `,
+};

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

@@ -16,15 +16,18 @@ import {
   EuiButtonEmpty,
   EuiLink,
   EuiAccordion,
+  UseEuiTheme,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import classNames from 'classnames';
+import { css } from '@emotion/react';
 import { UrlTemplate } from '../../types';
 import { outlinkEncoders } from '../../helpers/outlink_encoders';
 import { urlTemplateIconChoices } from '../../helpers/style_choices';
 import { isUrlTemplateValid, isKibanaUrl, replaceKibanaUrlParam } from '../../helpers/url_template';
 import { isEqual } from '../helpers';
 import { IconRenderer } from '../icon_renderer';
+import { legacyIconStyles } from './legacy_icon.styles';
 
 export interface NewFormProps {
   onSubmit: (template: UrlTemplate) => void;
@@ -59,6 +62,8 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) {
 
   const [currentTemplate, setCurrentTemplate] = useState(getInitialTemplate);
 
+  const euiThemeContext = useEuiTheme();
+
   const persistedTemplateState = isUpdateForm(props) && props.initialTemplate;
 
   // reset local form if template passed in from parent component changes
@@ -129,14 +134,15 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) {
         props.initialTemplate.icon && (
           <IconRenderer
             icon={props.initialTemplate.icon}
-            className="gphLegacyIcon gphLegacyIcon--list"
+            css={[legacyIconStyles.base(euiThemeContext), legacyIconStyles.list(euiThemeContext)]}
           />
         )
       }
-      className={classNames('gphUrlTemplateList__accordion', {
-        'gphUrlTemplateList__accordion--isOpen': open,
-      })}
-      buttonClassName="gphUrlTemplateList__accordionbutton"
+      css={[
+        styles.listAccordion(euiThemeContext),
+        open && styles.openListAccordion(euiThemeContext),
+      ]}
+      buttonProps={{ css: styles.button(euiThemeContext) }}
       onToggle={(isOpen) => {
         setOpen(isOpen);
       }}
@@ -285,9 +291,11 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) {
                     setValue('icon', icon);
                   }
                 }}
-                className={classNames('gphLegacyIcon gphLegacyIcon--pickable', {
-                  'gphLegacyIcon--selected': icon === currentTemplate.icon,
-                })}
+                css={[
+                  legacyIconStyles.base(euiThemeContext),
+                  legacyIconStyles.pickable(euiThemeContext),
+                  icon === currentTemplate.icon && legacyIconStyles.selected,
+                ]}
               />
             ))}
           </div>
@@ -336,3 +344,26 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) {
     </EuiAccordion>
   );
 }
+
+const styles = {
+  listAccordion: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      borderTop: euiTheme.border.thin,
+      borderBottom: euiTheme.border.thin,
+
+      '& + &': {
+        // If there is another after it, shift up 1px to overlap borders
+        marginTop: '-1px',
+      },
+    }),
+
+  openListAccordion: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      backgroundColor: euiTheme.colors.body,
+    }),
+
+  button: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      padding: euiTheme.size.m,
+    }),
+};