[Discover] Align SCSS - Emotion migration part 2 with new guidelines (#224586)

## Summary

This pull requests aligns previous SCSS refactor part 2 ([[Discover]
SCSS to Emotions migration part
2/4](https://github.com/elastic/kibana/pull/214729/files#top)) with new
[Emotion
standards](https://docs.google.com/document/d/1CPflY8yCc3lZDg2BQkaMTgIkZlqiAEyMcAAvZbsjcTc/edit?pli=1&tab=t.0#heading=h.4zj1jq66y5an),
so the code is easier to read, maintain and unified across Discover.

src/platform/plugins/shared/discover/public/application/context/components/action_bar/action_bar.tsx

@@ -20,6 +20,8 @@ import {
   EuiSpacer,
   type UseEuiTheme,
 } from '@elastic/eui';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
+
 import { ActionBarWarning } from './action_bar_warning';
 import { SurrDocType } from '../../services/context';
 import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../services/constants';
@@ -70,6 +72,8 @@ export function ActionBar({
   onChangeCount,
   type,
 }: ActionBarProps) {
+  const styles = useMemoCss(componentStyles);
+
   const showWarning = !isDisabled && !isLoading && docCountAvailable < docCount;
   const isSuccessor = type === SurrDocType.SUCCESSORS;
   const [newDocCount, setNewDocCount] = useState(docCount);
@@ -122,7 +126,7 @@ export function ActionBar({
                     })
               }
               compressed
-              css={cxtSizePickerCss}
+              css={styles.cxtSizePicker}
               data-test-subj={`${type}CountPicker`}
               disabled={isDisabled}
               min={MIN_CONTEXT_SIZE}
@@ -163,13 +167,15 @@ export function ActionBar({
   );
 }
 
-const cxtSizePickerCss = ({ euiTheme }: UseEuiTheme) => css`
+const componentStyles = {
-  text-align: center;
+  cxtSizePicker: ({ euiTheme }: UseEuiTheme) =>
-  width: calc(${euiTheme.size.base} * 5);
+    css({
+      textAlign: 'center',
+      width: `calc(${euiTheme.size.base} * 5)`,
 
-  &::-webkit-outer-spin-button,
+      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-  &::-webkit-inner-spin-button {
+        appearance: 'none', // Hide increment and decrement buttons for type="number" input.
-    appearance: none; // Hide increment and decrement buttons for type="number" input.
+        margin: 0,
-    margin: 0;
+      },
-  }
+    }),
-`;
+};

src/platform/plugins/shared/discover/public/application/context/context_app.tsx

@@ -14,11 +14,12 @@ import {
   EuiPage,
   EuiPageBody,
   EuiSpacer,
-  useEuiPaddingSize,
+  euiPaddingSize,
-  useEuiTheme,
+  type UseEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { cloneDeep } from 'lodash';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
 import { generateFilters } from '@kbn/data-plugin/public';
@@ -50,7 +51,8 @@ export interface ContextAppProps {
 }
 
 export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) => {
-  const { euiTheme } = useEuiTheme();
+  const styles = useMemoCss(componentStyles);
+
   const services = useDiscoverServices();
   const {
     analytics,
@@ -246,8 +248,6 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
     };
   };
 
-  const titlePadding = useEuiPaddingSize('m');
-
   return (
     <Fragment>
       {fetchedState.anchorStatus.value === LoadingStatus.FAILED ? (
@@ -272,28 +272,12 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
               css={styles.docsContent}
               panelProps={{ role: 'main' }}
             >
-              <EuiText
+              <EuiText data-test-subj="contextDocumentSurroundingHeader" css={styles.title}>
-                data-test-subj="contextDocumentSurroundingHeader"
-                css={css`
-                  padding: ${titlePadding} ${titlePadding} 0;
-                  font-weight: ${euiTheme.font.weight.bold};
-                `}
-              >
                 <FormattedMessage
                   id="discover.context.contextOfTitle"
                   defaultMessage="Documents surrounding {anchorId}"
                   values={{
-                    anchorId: (
+                    anchorId: <span css={styles.documentId}>#{anchorId}</span>,
-                      <span
-                        css={css`
-                          background-color: ${euiTheme.colors.backgroundBaseWarning};
-                          color: ${euiTheme.colors.textWarning};
-                          padding: 0 ${euiTheme.size.xs};
-                        `}
-                      >
-                        #{anchorId}
-                      </span>
-                    ),
                   }}
                 />
               </EuiText>
@@ -325,11 +309,26 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
   );
 };
 
-const styles = {
+const componentStyles = {
   docsContent: css({
     display: 'flex',
     flexDirection: 'column',
     height: '100%',
   }),
   docsPage: kbnFullBodyHeightCss('54px'), // 54px is the action bar height
+  title: (themeContext: UseEuiTheme) => {
+    const { euiTheme } = themeContext;
+    const titlePadding = euiPaddingSize(themeContext, 's');
+
+    return css({
+      padding: `${titlePadding} ${titlePadding} 0`,
+      fontWeight: euiTheme.font.weight.bold,
+    });
+  },
+  documentId: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      backgroundColor: euiTheme.colors.backgroundBaseWarning,
+      color: euiTheme.colors.textWarning,
+      padding: `0 ${euiTheme.size.xs}`,
+    }),
 };

src/platform/plugins/shared/discover/public/application/main/components/layout/discover_documents.tsx

@@ -380,7 +380,7 @@ function DiscoverDocumentsComponent({
           size="xs"
           color="accent"
           position="absolute"
-          css={progressStyle}
+          css={styles.progress}
         />
       ) : null,
     [isDataLoading]
@@ -411,7 +411,7 @@ function DiscoverDocumentsComponent({
   if (isDataViewLoading || (isEmptyDataResult && isDataLoading)) {
     return (
       // class is used in tests
-      <div className="dscDocuments__loading" css={dscDocumentsLoadingCss}>
+      <div className="dscDocuments__loading" css={styles.dscDocumentsLoading}>
         <EuiText size="xs" color="subdued">
           <EuiLoadingSpinner />
           <EuiSpacer size="s" />
@@ -423,7 +423,7 @@ function DiscoverDocumentsComponent({
 
   return (
     // class is used in tests
-    <EuiFlexItem className="dscTable" aria-labelledby="documentsAriaLabel" css={containerStyles}>
+    <EuiFlexItem className="dscTable" aria-labelledby="documentsAriaLabel" css={styles.container}>
       <EuiScreenReaderOnly>
         <h2 id="documentsAriaLabel">
           <FormattedMessage id="discover.documentsAriaLabel" defaultMessage="Documents" />
@@ -499,20 +499,20 @@ function DiscoverDocumentsComponent({
 
 export const DiscoverDocuments = memo(DiscoverDocumentsComponent);
 
-const containerStyles = css`
+const styles = {
-  position: relative;
+  container: css({
-  min-height: 0;
+    position: 'relative',
-`;
+    minHeight: 0,
-
+  }),
-const progressStyle = css`
+  progress: css({
-  z-index: 2;
+    zIndex: 2,
-`;
+  }),
-
+  dscDocumentsLoading: css({
-const dscDocumentsLoadingCss = css`
+    display: 'flex',
-  display: flex;
+    flexDirection: 'column',
-  flex-direction: column;
+    justifyContent: 'center',
-  justify-content: center;
+    textAlign: 'center',
-  text-align: center;
+    height: '100%',
-  height: 100%;
+    width: '100%',
-  width: 100%;
+  }),
-`;
+};

src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx

@@ -15,8 +15,8 @@ import {
   EuiPanel,
   EuiProgress,
   EuiDelayRender,
-  useEuiTheme,
   useEuiBreakpoint,
+  type UseEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
@@ -32,6 +32,7 @@ import { popularizeField, useColumns } from '@kbn/unified-data-table';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { BehaviorSubject } from 'rxjs';
 import type { DiscoverGridSettings } from '@kbn/saved-search-plugin/common';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import { kbnFullBodyHeightCss } from '@kbn/css-utils/public/full_body_height_css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useSavedSearchInitial } from '../../state_management/discover_state_provider';
@@ -91,8 +92,8 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
     ebtManager,
     fieldsMetadata,
   } = useDiscoverServices();
-  const { euiTheme } = useEuiTheme();
+  const styles = useMemoCss(componentStyles);
-  const pageBackgroundColor = euiTheme.colors.backgroundBasePlain;
+
   const globalQueryState = data.query.getState();
   const { main$ } = stateContainer.dataState.data$;
   const [query, savedQuery, columns, sort, grid] = useAppStateSelector((state) => [
@@ -372,15 +373,14 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
       className="dscPage" // class is used in tests and other styles
       data-fetch-counter={fetchCounter.current}
       direction="column"
-      css={css`
+      css={[
-        overflow: hidden;
+        styles.DscPage,
-        padding: 0;
+        css`
-        background-color: ${pageBackgroundColor};
+          ${useEuiBreakpoint(['m', 'l', 'xl'])} {
-
+            ${kbnFullBodyHeightCss(TABS_ENABLED ? '32px' : undefined)}
-        ${useEuiBreakpoint(['m', 'l', 'xl'])} {
+          }
-          ${kbnFullBodyHeightCss(TABS_ENABLED ? '32px' : undefined)}
+        `,
-        }
+      ]}
-      `}
     >
       <h1
         id="savedSearchTitle"
@@ -407,19 +407,8 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
         isLoading={isLoading}
         onCancelClick={onCancelClick}
       />
-      <EuiPageBody
+      <EuiPageBody aria-describedby="savedSearchTitle" css={styles.savedSearchTitle}>
-        aria-describedby="savedSearchTitle"
+        <div ref={setSidebarContainer} css={styles.sidebarContainer}>
-        css={css`
-          overflow: hidden;
-        `}
-      >
-        <div
-          ref={setSidebarContainer}
-          css={css`
-            width: 100%;
-            height: 100%;
-          `}
-        >
           {dataViewLoading && (
             <EuiDelayRender delay={300}>
               <EuiProgress size="xs" color="accent" position="absolute" />
@@ -450,15 +439,11 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
               />
             }
             mainPanel={
-              <div css={dscPageContentWrapperCss}>
+              <div css={styles.dscPageContentWrapper}>
                 {resultState === 'none' ? (
                   <>
                     {React.isValidElement(panelsToggle) ? (
-                      <div
+                      <div css={styles.mainPanel}>
-                        css={css`
-                          padding: ${euiTheme.size.s};
-                        `}
-                      >
                         {React.cloneElement(panelsToggle, {
                           renderedFor: 'prompt',
                           isChartAvailable: false,
@@ -496,7 +481,7 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
                     hasShadow={false}
                     hasBorder={false}
                     color="transparent"
-                    css={[dscPageContentCss, contentCentered && dscPageContentCenteredCss]}
+                    css={[styles.dscPageContent, contentCentered && styles.dscPageContentCentered]}
                   >
                     {mainDisplay}
                   </EuiPanel>
@@ -525,24 +510,41 @@ const getOperator = (fieldName: string, values: unknown, operation: '+' | '-') =
   return operation;
 };
 
-const dscPageContentWrapperCss = css`
+const componentStyles = {
-  overflow: hidden; // Ensures horizontal scroll of table
+  dscPage: ({ euiTheme }: UseEuiTheme) =>
-  display: flex;
+    css({
-  flex-direction: column;
+      overflow: 'hidden',
-  height: 100%;
+      padding: 0,
-`;
+      backgroundColor: euiTheme.colors.backgroundBasePlain,
-
+    }),
-const dscPageContentCss = css`
+  savedSearchTitle: css({
-  position: relative;
+    overflow: 'hidden',
-  overflow: hidden;
+  }),
-  height: 100%;
+  sidebarContainer: css({
-`;
+    width: '100%',
-
+    height: '100%',
-const dscPageContentCenteredCss = css`
+  }),
-  width: auto;
+  mainPanel: ({ euiTheme }: UseEuiTheme) =>
-  height: auto;
+    css({
-  align-self: center;
+      padding: euiTheme.size.s,
-  margin-top: auto;
+    }),
-  margin-bottom: auto;
+  dscPageContentWrapper: css({
-  flex-grow: 0;
+    overflow: 'hidden', // Ensures horizontal scroll of table
-`;
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+  }),
+  dscPageContent: css({
+    position: 'relative',
+    overflow: 'hidden',
+    height: '100%',
+  }),
+  dscPageContentCentered: css({
+    width: 'auto',
+    height: 'auto',
+    alignSelf: 'center',
+    marginTop: 'auto',
+    marginBottom: 'auto',
+    flexGrow: 0,
+  }),
+};