[Discover] SCSS to Emotions migration part 2/4 (#214729)

Author: akowalska622

src/core/packages/application/common/src/global_app_style.tsx

@@ -158,7 +158,9 @@ export const GlobalAppStyle = () => {
   return (
     <Global
       styles={css`
-        ${bannerStyles(euiTheme)} ${chromeStyles(euiTheme)} ${renderingOverrides(euiTheme)}
+        ${bannerStyles(euiTheme)}
+        ${chromeStyles(euiTheme)} 
+        ${renderingOverrides(euiTheme)}
       `}
     />
   );

src/core/public/cssUtils.ts

@@ -0,0 +1,21 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+// This file replaces scss core/public/_mixins.scss
+
+import { css } from '@emotion/react';
+
+// The `--kbnAppHeadersOffset` CSS variable is automatically updated by
+// styles/rendering/_base.scss, based on whether the Kibana chrome has a
+// header banner, app menu, and is visible or hidden
+export const kibanaFullBodyHeightCss = (additionalOffset = 0) => css`
+  height: calc(
+    100vh - var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0)) - ${additionalOffset}px
+  );
+`;

src/core/public/index.ts

@@ -308,3 +308,5 @@ export type { CoreSetup, CoreStart, StartServicesAccessor } from '@kbn/core-life
 export type { CoreSystem } from '@kbn/core-root-browser-internal';
 
 export { __kbnBootstrap__ } from '@kbn/core-root-browser-internal';
+
+export { kibanaFullBodyHeightCss } from './cssUtils';

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

@@ -12,6 +12,7 @@ import { mountWithIntl } from '@kbn/test-jest-helpers';
 import type { ActionBarProps } from './action_bar';
 import { ActionBar } from './action_bar';
 import { findTestSubject } from '@elastic/eui/lib/test';
+import { EuiThemeProvider } from '@elastic/eui';
 import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../services/constants';
 import { SurrDocType } from '../../services/context';
 
@@ -27,7 +28,11 @@ describe('Test Discover Context ActionBar for successor | predecessor records',
       onChangeCount,
       type,
     } as ActionBarProps;
-    const wrapper = mountWithIntl(<ActionBar {...props} />);
+    const wrapper = mountWithIntl(
+      <EuiThemeProvider>
+        <ActionBar {...props} />
+      </EuiThemeProvider>
+    );
 
     const input = findTestSubject(wrapper, `${type}CountPicker`);
     const btn = findTestSubject(wrapper, `${type}LoadMoreButton`);
@@ -83,7 +88,11 @@ describe('Test Discover Context ActionBar for successor | predecessor records',
     });
 
     test(`${type}: Load button disabled when defaultStepSize is 0`, () => {
-      const wrapperWhenZeroStep = mountWithIntl(<ActionBar {...props} defaultStepSize={0} />);
+      const wrapperWhenZeroStep = mountWithIntl(
+        <EuiThemeProvider>
+          <ActionBar {...props} defaultStepSize={0} />
+        </EuiThemeProvider>
+      );
       const inputWhenZeroStep = findTestSubject(wrapperWhenZeroStep, `${type}CountPicker`);
       const btnWhenZeroStep = findTestSubject(wrapperWhenZeroStep, `${type}LoadMoreButton`);
       expect(btnWhenZeroStep.props().disabled).toBe(true);

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

@@ -7,8 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './_action_bar.scss';
 import React, { useState, useEffect } from 'react';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import {
@@ -18,6 +18,7 @@ import {
   EuiFlexItem,
   EuiFormRow,
   EuiSpacer,
+  type UseEuiTheme,
 } from '@elastic/eui';
 import { ActionBarWarning } from './action_bar_warning';
 import { SurrDocType } from '../../services/context';
@@ -121,7 +122,7 @@ export function ActionBar({
                     })
               }
               compressed
-              className="cxtSizePicker"
+              css={cxtSizePickerCss}
               data-test-subj={`${type}CountPicker`}
               disabled={isDisabled}
               min={MIN_CONTEXT_SIZE}
@@ -161,3 +162,14 @@ export function ActionBar({
     </form>
   );
 }
+
+const cxtSizePickerCss = ({ euiTheme }: UseEuiTheme) => css`
+  text-align: center;
+  width: calc(${euiTheme.size.base} * 5);
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    appearance: none; // Hide increment and decrement buttons for type="number" input.
+    margin: 0;
+  }
+`;

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

@@ -11,6 +11,7 @@ import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { createFilterManagerMock } from '@kbn/data-plugin/public/query/filter_manager/filter_manager.mock';
+import { EuiThemeProvider } from '@elastic/eui';
 import { mockTopNavMenu } from './__mocks__/top_nav_menu';
 import { ContextAppContent } from './context_app_content';
 import { dataViewMock } from '@kbn/discover-utils/src/__mocks__';
@@ -96,7 +97,9 @@ describe('ContextApp test', () => {
   const mountComponent = () => {
     return mountWithIntl(
       <KibanaContextProvider services={services}>
-        <ContextApp {...defaultProps} />
+        <EuiThemeProvider>
+          <ContextApp {...defaultProps} />
+        </EuiThemeProvider>
       </KibanaContextProvider>
     );
   };

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

@@ -8,7 +8,6 @@
  */
 
 import React, { Fragment, memo, useEffect, useRef, useMemo, useCallback } from 'react';
-import './context_app.scss';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiText, EuiPage, EuiPageBody, EuiSpacer, useEuiPaddingSize } from '@elastic/eui';
 import { css } from '@emotion/react';
@@ -23,6 +22,7 @@ import type { UseColumnsProps } from '@kbn/unified-data-table';
 import { popularizeField, useColumns } from '@kbn/unified-data-table';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import type { DiscoverGridSettings } from '@kbn/saved-search-plugin/common';
+import { kibanaFullBodyHeightCss } from '@kbn/core/public';
 import { ContextErrorMessage } from './components/context_error_message';
 import { LoadingStatus } from './services/context_query_state';
 import type { AppState, GlobalState } from './services/context_state';
@@ -257,11 +257,11 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
             })}
           </h1>
           <TopNavMenu {...getNavBarProps()} />
-          <EuiPage className="dscDocsPage">
+          <EuiPage css={dscDocsPageCss}>
             <EuiPageBody
               panelled
               paddingSize="none"
-              className="dscDocsContent"
+              css={dscDocsContentCss}
               panelProps={{ role: 'main' }}
             >
               <EuiText
@@ -305,3 +305,13 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
     </Fragment>
   );
 };
+
+const dscDocsPageCss = css`
+  ${kibanaFullBodyHeightCss(54)}; // 54px is the action bar height
+`;
+
+const dscDocsContentCss = css`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;

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

@@ -204,7 +204,7 @@ export function ContextAppContent({
           isDisabled={isAnchorLoading}
         />
       </WrapperWithPadding>
-      <div className="dscDocsGrid">
+      <div css={dscDocsGridCss}>
         <CellActionsProvider getTriggerCompatibleActions={uiActions.getTriggerCompatibleActions}>
           <DiscoverGridMemoized
             ariaLabelledBy="surDocumentsAriaLabel"
@@ -266,3 +266,8 @@ const WrapperWithPadding: FC<React.PropsWithChildren<{}>> = ({ children }) => {
     </div>
   );
 };
+
+const dscDocsGridCss = css`
+  flex: 1 1 100%;
+  overflow: auto;
+`;