[8.19] [Discover] SCSS to Emotions migration part 3/4 (#222947)

src/platform/plugins/shared/field_formats/public/plugin.ts

@@ -11,7 +11,6 @@ import { CoreSetup, Plugin } from '@kbn/core/public';
 import { FieldFormatsRegistry, FORMATS_UI_SETTINGS } from '../common';
 import { baseFormattersPublic } from './lib';
 import { FormatFactory } from '../common/types';
-import './index.scss';
 
 export class FieldFormatsPlugin implements Plugin<FieldFormatsSetup, FieldFormatsStart> {
   private readonly fieldFormatsRegistry: FieldFormatsRegistry = new FieldFormatsRegistry();

src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_source/source.tsx

@@ -7,18 +7,18 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './source.scss';
-
 import React, { useEffect, useState } from 'react';
+import { css } from '@emotion/react';
+import { omit } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { monaco } from '@kbn/monaco';
 import { EuiButton, EuiEmptyPrompt, EuiLoadingSpinner, EuiSpacer, EuiText } from '@elastic/eui';
+import { euiThemeVars } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import { ElasticRequestState } from '@kbn/unified-doc-viewer';
 import { isLegacyTableEnabled, SEARCH_FIELDS_FROM_SOURCE } from '@kbn/discover-utils';
-import { omit } from 'lodash';
 import { getUnifiedDocViewerServices } from '../../plugin';
 import { useEsDocSearch } from '../../hooks';
 import { getHeight, DEFAULT_MARGIN_BOTTOM } from './get_height';
@@ -102,8 +102,8 @@ export const DocViewerSource = ({
   }, [editor, jsonValue, useDocExplorer, setEditorHeight, decreaseAvailableHeightBy]);
 
   const loadingState = (
-    <div className="sourceViewer__loading">
-      <EuiLoadingSpinner className="sourceViewer__loadingSpinner" />
+    <div css={styles.loading}>
+      <EuiLoadingSpinner css={styles.loadingSpinner} />
       <EuiText size="xs" color="subdued">
         <FormattedMessage id="unifiedDocViewer.loadingJSON" defaultMessage="Loading JSON" />
       </EuiText>
@@ -153,3 +153,19 @@ export const DocViewerSource = ({
     />
   );
 };
+
+const styles = {
+  loading: css({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'left',
+    flex: '1 0 100%',
+    textAlign: 'center',
+    height: '100%',
+    width: '100%',
+    marginTop: euiThemeVars.euiSizeS,
+  }),
+  loadingSpinner: css({
+    marginRight: euiThemeVars.euiSizeS,
+  }),
+};

src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/legacy/table.tsx

@@ -7,7 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import '../table.scss';
 import React, { useCallback, useMemo } from 'react';
 import { EuiInMemoryTable } from '@elastic/eui';
 import { getFieldIconType } from '@kbn/field-utils/src/utils/get_field_icon_type';

src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.tsx

@@ -7,7 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './table.scss';
 import React, { useCallback, useMemo, useState } from 'react';
 import useWindowSize from 'react-use/lib/useWindowSize';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
@@ -38,6 +37,8 @@ import {
   canPrependTimeFieldColumn,
 } from '@kbn/discover-utils';
 import type { DocViewRenderProps } from '@kbn/unified-doc-viewer/types';
+import { euiThemeVars } from '@kbn/ui-theme';
+
 import { getUnifiedDocViewerServices } from '../../plugin';
 import {
   getFieldCellActions,
@@ -499,7 +500,7 @@ export const DocViewerTable = ({
       </EuiFlexItem>
 
       {rows.length === 0 ? (
-        <EuiSelectableMessage css={{ minHeight: 300 }}>
+        <EuiSelectableMessage css={styles.noFieldsFound}>
           <p>
             <EuiI18n
               token="unifiedDocViewer.docViews.table.noFieldFound"
@@ -508,20 +509,15 @@ export const DocViewerTable = ({
           </p>
         </EuiSelectableMessage>
       ) : (
-        <EuiFlexItem
-          grow={Boolean(containerHeight)}
-          css={css`
-            min-block-size: 0;
-            display: block;
-          `}
-        >
+        <EuiFlexItem grow={Boolean(containerHeight)} css={styles.fieldsGridWrapper}>
           <EuiDataGrid
             key={`fields-table-${hit.id}`}
             {...GRID_PROPS}
             aria-label={i18n.translate('unifiedDocViewer.fieldsTable.ariaLabel', {
               defaultMessage: 'Field values',
             })}
             className="kbnDocViewer__fieldsGrid"
+            css={styles.fieldsGrid}
             columns={gridColumns}
             toolbarVisibility={false}
             rowCount={rows.length}
@@ -535,3 +531,52 @@ export const DocViewerTable = ({
     </EuiFlexGroup>
   );
 };
+
+const styles = {
+  fieldsGridWrapper: css({
+    minBlockSize: 0,
+    display: 'block',
+
+    '.euiDataGridRow': {
+      '&:hover': {
+        // we keep using a deprecated shade until proper token is available
+        backgroundColor: euiThemeVars.euiColorLightestShade,
+      },
+    },
+  }),
+  fieldsGrid: css({
+    '&.euiDataGrid--noControls.euiDataGrid--bordersHorizontal .euiDataGridHeader': {
+      borderTop: 'none',
+    },
+
+    '&.euiDataGrid--headerUnderline .euiDataGridHeader': {
+      borderBottom: euiThemeVars.euiBorderThin,
+    },
+
+    '& [data-gridcell-column-id="name"] .euiDataGridRowCell__content': {
+      paddingTop: 0,
+      paddingBottom: 0,
+    },
+
+    '& [data-gridcell-column-id="pin_field"] .euiDataGridRowCell__content': {
+      padding: `calc(${euiThemeVars.euiSizeXS} / 2) 0 0 ${euiThemeVars.euiSizeXS}`,
+    },
+
+    '.kbnDocViewer__fieldsGrid__pinAction': {
+      opacity: 0,
+    },
+
+    '& [data-gridcell-column-id="pin_field"]:focus-within': {
+      '.kbnDocViewer__fieldsGrid__pinAction': {
+        opacity: 1,
+      },
+    },
+
+    '.euiDataGridRow:hover .kbnDocViewer__fieldsGrid__pinAction': {
+      opacity: 1,
+    },
+  }),
+  noFieldsFound: css({
+    minHeight: 300,
+  }),
+};