[8.19] [Index Management] Move field_list_item out of scss (#219669) (#220195)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Index Management] Move field_list_item out of scss
(#219669)](#219669)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Sonia Sanz
Vivas","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-05-05T14:59:22Z","message":"[Index
Management] Move field_list_item out of scss (#219669)\n\nFixes
https://github.com/elastic/kibana/issues/219021\n\n## Summary\nIn
serverless, when the user loads the index mapping page and refresh\nthe
page, the styles get lost for the fields. It only happens
in\nserverless.\n\nTo address that and as part of the [migration to
emotion\ninitiative](#205027), I
decided\nto move the styles to emotion. I didn't remove the scss file
because\nit's a complex package of shared components and it needs a
thorough\ntesting to verify that no other component is using that styles
(we have\nmultiple components and scss files with the same class
names).\n\n### How to test\n\n1. Run serverless elasticsearch (`yarn
serverless-es`)\n2. Open Kibana\n3. Create an index\n4. Navigate to the
index details page
(URL\n`/app/elasticsearch/indices/index_details/<index_name>`)\n5.
Select the Mappings tab
(URL\n`/app/elasticsearch/indices/index_details/<index_name>/mappings`)\n6.
Hard-refresh the browser (Cmd+Shift+R on Mac)\n7. Verify that the styles
are not missed.\n\nCo-authored-by: Matthew Kime
<[email protected]>","sha":"d4e4e4ee4246b32f47cb933551a036b0257e75ca","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Index
Management","Team:Kibana
Management","release_note:skip","backport:prev-minor","v9.1.0","v8.19.0","v9.0.1"],"title":"[Index
Management] Move field_list_item out of
scss","number":219669,"url":"https://github.com/elastic/kibana/pull/219669","mergeCommit":{"message":"[Index
Management] Move field_list_item out of scss (#219669)\n\nFixes
https://github.com/elastic/kibana/issues/219021\n\n## Summary\nIn
serverless, when the user loads the index mapping page and refresh\nthe
page, the styles get lost for the fields. It only happens
in\nserverless.\n\nTo address that and as part of the [migration to
emotion\ninitiative](#205027), I
decided\nto move the styles to emotion. I didn't remove the scss file
because\nit's a complex package of shared components and it needs a
thorough\ntesting to verify that no other component is using that styles
(we have\nmultiple components and scss files with the same class
names).\n\n### How to test\n\n1. Run serverless elasticsearch (`yarn
serverless-es`)\n2. Open Kibana\n3. Create an index\n4. Navigate to the
index details page
(URL\n`/app/elasticsearch/indices/index_details/<index_name>`)\n5.
Select the Mappings tab
(URL\n`/app/elasticsearch/indices/index_details/<index_name>/mappings`)\n6.
Hard-refresh the browser (Cmd+Shift+R on Mac)\n7. Verify that the styles
are not missed.\n\nCo-authored-by: Matthew Kime
<[email protected]>","sha":"d4e4e4ee4246b32f47cb933551a036b0257e75ca"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/219669","number":219669,"mergeCommit":{"message":"[Index
Management] Move field_list_item out of scss (#219669)\n\nFixes
https://github.com/elastic/kibana/issues/219021\n\n## Summary\nIn
serverless, when the user loads the index mapping page and refresh\nthe
page, the styles get lost for the fields. It only happens
in\nserverless.\n\nTo address that and as part of the [migration to
emotion\ninitiative](#205027), I
decided\nto move the styles to emotion. I didn't remove the scss file
because\nit's a complex package of shared components and it needs a
thorough\ntesting to verify that no other component is using that styles
(we have\nmultiple components and scss files with the same class
names).\n\n### How to test\n\n1. Run serverless elasticsearch (`yarn
serverless-es`)\n2. Open Kibana\n3. Create an index\n4. Navigate to the
index details page
(URL\n`/app/elasticsearch/indices/index_details/<index_name>`)\n5.
Select the Mappings tab
(URL\n`/app/elasticsearch/indices/index_details/<index_name>/mappings`)\n6.
Hard-refresh the browser (Cmd+Shift+R on Mac)\n7. Verify that the styles
are not missed.\n\nCo-authored-by: Matthew Kime
<[email protected]>","sha":"d4e4e4ee4246b32f47cb933551a036b0257e75ca"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.0","label":"v9.0.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/220102","number":220102,"state":"MERGED","mergeCommit":{"sha":"47b93c57479d40abc01a09e95ab87c609e58a80a","message":"[9.0]
[Index Management] Move field_list_item out of scss (#219669)
(#220102)\n\n# Backport\n\nThis will backport the following commits from
`main` to `9.0`:\n- [[Index Management] Move field_list_item out of
scss\n(#219669)](https://github.com/elastic/kibana/pull/219669)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Sonia Sanz Vivas <[email protected]>"}}]}] BACKPORT-->

Co-authored-by: Matthew Kime <[email protected]>

Author: SoniaSanzV

x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list.tsx

@@ -31,7 +31,7 @@ export const FieldsList = React.memo(function FieldsListComponent({
     return null;
   }
   return (
-    <ul className="mappingsEditor__fieldsList" data-test-subj="fieldsList">
+    <ul data-test-subj="fieldsList">
       {fields.map((field, index) => (
         <FieldsListItemContainer
           key={field.id}

x-pack/platform/plugins/shared/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx

@@ -6,18 +6,20 @@
  */
 
 import React, { forwardRef } from 'react';
-import classNames from 'classnames';
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiBadge,
   EuiButtonIcon,
   EuiToolTip,
   EuiIcon,
+  useEuiTheme,
+  EuiThemeComputed,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-
+import { css } from '@emotion/react';
 import { NormalizedField, NormalizedFields, State } from '../../../types';
+
 import { getTypeLabelFromField } from '../../../lib';
 import { CHILD_FIELD_INDENT_SIZE, LEFT_PADDING_SIZE_FIELD_ITEM_WRAPPER } from '../../../constants';
 
@@ -46,6 +48,51 @@ const i18nTexts = {
   }),
 };
 
+const getListItemStyle = ({ border, colors, size }: EuiThemeComputed<{}>) => ({
+  dotted: css`
+    border-bottom-style: dashed;
+  `,
+  field: css`
+    border-bottom: ${border.thin};
+    height: calc(${size.xl} * 2);
+    margin-top: ${size.xs};
+  `,
+  fieldEnabled: css`
+    &:hover {
+      background-color: ${colors.backgroundBaseHighlighted};
+    }
+  `,
+  fieldHighlighted: css`
+    background-color: ${colors.backgroundBaseHighlighted};
+  `,
+  fieldDim: css`
+    opacity: 0.3;
+    &:hover {
+      background-color: initial;
+    }
+  `,
+  wrapper: css`
+    padding-left: ${size.xs};
+  `,
+  wrapperIndent: css`
+    padding-left: ${size};
+  `,
+  content: css`
+    height: calc(${size.xl} * 2);
+    position: relative;
+  `,
+  contentIndent: css`
+    padding-left: ${size.xl};
+  `,
+  toggle: css`
+    padding-left: ${size.xs};
+    width: ${size.l};
+  `,
+  actions: css`
+    padding-left: ${size.s};
+  `,
+});
+
 interface Props {
   field: NormalizedField;
   allFields: NormalizedFields['byId'];
@@ -101,6 +148,8 @@ function FieldListItemComponent(
     isExpanded,
     path,
   } = field;
+  const { euiTheme } = useEuiTheme();
+  const styles = getListItemStyle(euiTheme);
 
   // When there aren't any "child" fields (the maxNestedDepth === 0), there is no toggle icon on the left of any field.
   // For that reason, we need to compensate and substract some indent to left align on the page.
@@ -145,7 +194,7 @@ function FieldListItemComponent(
     const { addMultiFieldButtonLabel, addPropertyButtonLabel, editButtonLabel, deleteButtonLabel } =
       i18nTexts;
     return (
-      <EuiFlexGroup gutterSize="s" className="mappingsEditor__fieldsListItem__actions">
+      <EuiFlexGroup gutterSize="s" css={styles.actions}>
         {canHaveMultiFields && (
           <EuiFlexItem grow={false}>
             <EuiToolTip content={addMultiFieldButtonLabel}>
@@ -205,39 +254,33 @@ function FieldListItemComponent(
   const dataTestSubj = `${path.join('')}Field`;
 
   return (
-    <li
-      className={classNames('mappingsEditor__fieldsListItem', {
-        'mappingsEditor__fieldsListItem--dottedLine': hasDottedLine,
-      })}
-      data-test-subj={`fieldsListItem ${dataTestSubj}`}
-      ref={ref}
-    >
+    <li data-test-subj={`fieldsListItem ${dataTestSubj}`} ref={ref}>
       <div
         style={{ paddingLeft: `${indent}px` }}
-        className={classNames('mappingsEditor__fieldsListItem__field', {
-          'mappingsEditor__fieldsListItem__field--enabled': areActionButtonsVisible,
-          'mappingsEditor__fieldsListItem__field--highlighted': isHighlighted,
-          'mappingsEditor__fieldsListItem__field--dim': isDimmed,
-        })}
+        css={[
+          styles.field,
+          areActionButtonsVisible && styles.fieldEnabled,
+          isHighlighted && styles.fieldHighlighted,
+          isDimmed && styles.fieldDim,
+          hasDottedLine && styles.dotted,
+        ]}
       >
         <div
-          className={classNames('mappingsEditor__fieldsListItem__wrapper', {
-            'mappingsEditor__fieldsListItem__wrapper--indent':
-              treeDepth === 0 && maxNestedDepth === 0,
-          })}
+          css={[styles.wrapper, treeDepth === 0 && maxNestedDepth === 0 && styles.wrapperIndent]}
         >
           <EuiFlexGroup
             gutterSize="s"
             alignItems="center"
-            className={classNames('mappingsEditor__fieldsListItem__content', {
-              'mappingsEditor__fieldsListItem__content--toggle': hasChildFields || hasMultiFields,
-              'mappingsEditor__fieldsListItem__content--multiField': isMultiField,
-              'mappingsEditor__fieldsListItem__content--indent':
-                !hasChildFields && !hasMultiFields && maxNestedDepth > treeDepth,
-            })}
+            css={[
+              styles.content,
+              !hasChildFields &&
+                !hasMultiFields &&
+                maxNestedDepth > treeDepth &&
+                styles.contentIndent,
+            ]}
           >
             {(hasChildFields || hasMultiFields) && (
-              <EuiFlexItem grow={false} className="mappingsEditor__fieldsListItem__toggle">
+              <EuiFlexItem grow={false} css={styles.toggle}>
                 <EuiButtonIcon
                   color="text"
                   onClick={toggleExpand}
@@ -263,16 +306,12 @@ function FieldListItemComponent(
             )}
 
             {isMultiField && (
-              <EuiFlexItem grow={false} className="mappingsEditor__fieldsListItem__icon">
+              <EuiFlexItem grow={false}>
                 <EuiIcon color="subdued" type="documents" />
               </EuiFlexItem>
             )}
 
-            <EuiFlexItem
-              grow={false}
-              className="mappingsEditor__fieldsListItem__name"
-              data-test-subj={`fieldName ${dataTestSubj}-fieldName`}
-            >
+            <EuiFlexItem grow={false} data-test-subj={`fieldName ${dataTestSubj}-fieldName`}>
               {source.name}
             </EuiFlexItem>