From c614dd3b6aeaed5b73bb03bce68b274ae1efc348 Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Mon, 17 Mar 2025 12:59:49 +0100 Subject: [PATCH 01/14] [Discover] ActionBar SCSS to Emotions refactor --- .../components/action_bar/_action_bar.scss | 10 ---------- .../components/action_bar/action_bar.test.tsx | 13 +++++++++++-- .../context/components/action_bar/action_bar.tsx | 16 ++++++++++++++-- 3 files changed, 25 insertions(+), 14 deletions(-) delete mode 100644 src/platform/plugins/shared/discover/public/application/context/components/action_bar/_action_bar.scss diff --git a/src/platform/plugins/shared/discover/public/application/context/components/action_bar/_action_bar.scss b/src/platform/plugins/shared/discover/public/application/context/components/action_bar/_action_bar.scss deleted file mode 100644 index da0911c3a452b..0000000000000 --- a/src/platform/plugins/shared/discover/public/application/context/components/action_bar/_action_bar.scss +++ /dev/null @@ -1,10 +0,0 @@ -.cxtSizePicker { - text-align: center; - width: $euiSize * 5; - - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - appearance: none; // Hide increment and decrement buttons for type="number" input. - margin: 0; - } -} diff --git a/src/platform/plugins/shared/discover/public/application/context/components/action_bar/action_bar.test.tsx b/src/platform/plugins/shared/discover/public/application/context/components/action_bar/action_bar.test.tsx index dcf394283c19c..edd74c57d4419 100644 --- a/src/platform/plugins/shared/discover/public/application/context/components/action_bar/action_bar.test.tsx +++ b/src/platform/plugins/shared/discover/public/application/context/components/action_bar/action_bar.test.tsx @@ -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(); + const wrapper = mountWithIntl( + + + + ); 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(); + const wrapperWhenZeroStep = mountWithIntl( + + + + ); const inputWhenZeroStep = findTestSubject(wrapperWhenZeroStep, `${type}CountPicker`); const btnWhenZeroStep = findTestSubject(wrapperWhenZeroStep, `${type}LoadMoreButton`); expect(btnWhenZeroStep.props().disabled).toBe(true); diff --git a/src/platform/plugins/shared/discover/public/application/context/components/action_bar/action_bar.tsx b/src/platform/plugins/shared/discover/public/application/context/components/action_bar/action_bar.tsx index 337d6191399c2..1453f20974954 100644 --- a/src/platform/plugins/shared/discover/public/application/context/components/action_bar/action_bar.tsx +++ b/src/platform/plugins/shared/discover/public/application/context/components/action_bar/action_bar.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({ ); } + +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; + } +`; From ef341f9953e8a7e4423ce98265cc4bbc562f6db9 Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Mon, 17 Mar 2025 13:17:37 +0100 Subject: [PATCH 02/14] [Discover] ContextApp SCSS to Emotions refactor --- src/core/public/cssUtils.ts | 21 +++++++++++++++++++ src/core/public/index.ts | 2 ++ .../application/context/context_app.scss | 16 -------------- .../application/context/context_app.test.tsx | 5 ++++- .../application/context/context_app.tsx | 16 +++++++++++--- .../context/context_app_content.tsx | 7 ++++++- 6 files changed, 46 insertions(+), 21 deletions(-) create mode 100644 src/core/public/cssUtils.ts delete mode 100644 src/platform/plugins/shared/discover/public/application/context/context_app.scss diff --git a/src/core/public/cssUtils.ts b/src/core/public/cssUtils.ts new file mode 100644 index 0000000000000..515f63043f985 --- /dev/null +++ b/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 + ); +`; diff --git a/src/core/public/index.ts b/src/core/public/index.ts index ecce03d0b5092..b8f17f2ff6b74 100644 --- a/src/core/public/index.ts +++ b/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'; diff --git a/src/platform/plugins/shared/discover/public/application/context/context_app.scss b/src/platform/plugins/shared/discover/public/application/context/context_app.scss deleted file mode 100644 index 6fe4c154b61df..0000000000000 --- a/src/platform/plugins/shared/discover/public/application/context/context_app.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import '../../../../../../../core/public/mixins'; - -.dscDocsPage { - @include kibanaFullBodyHeight(54px); // action bar height -} - -.dscDocsContent { - display: flex; - flex-direction: column; - height: 100%; -} - -.dscDocsGrid { - flex: 1 1 100%; - overflow: auto; -} diff --git a/src/platform/plugins/shared/discover/public/application/context/context_app.test.tsx b/src/platform/plugins/shared/discover/public/application/context/context_app.test.tsx index 76d2b06d1aedc..92a48606c5d9c 100644 --- a/src/platform/plugins/shared/discover/public/application/context/context_app.test.tsx +++ b/src/platform/plugins/shared/discover/public/application/context/context_app.test.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( - + + + ); }; diff --git a/src/platform/plugins/shared/discover/public/application/context/context_app.tsx b/src/platform/plugins/shared/discover/public/application/context/context_app.tsx index 63bb0faaf3bd6..3dedbdd4d9b53 100644 --- a/src/platform/plugins/shared/discover/public/application/context/context_app.tsx +++ b/src/platform/plugins/shared/discover/public/application/context/context_app.tsx @@ -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) => })} - + ); }; + +const dscDocsPageCss = css` + ${kibanaFullBodyHeightCss(54)}; // 54px is the action bar height +`; + +const dscDocsContentCss = css` + display: flex; + flex-direction: column; + height: 100%; +`; diff --git a/src/platform/plugins/shared/discover/public/application/context/context_app_content.tsx b/src/platform/plugins/shared/discover/public/application/context/context_app_content.tsx index f1dcdddb63191..ad699b773e8d5 100644 --- a/src/platform/plugins/shared/discover/public/application/context/context_app_content.tsx +++ b/src/platform/plugins/shared/discover/public/application/context/context_app_content.tsx @@ -204,7 +204,7 @@ export function ContextAppContent({ isDisabled={isAnchorLoading} /> -
+
> = ({ children }) => {
); }; + +const dscDocsGridCss = css` + flex: 1 1 100%; + overflow: auto; +`; From 1305814579ece33d30ea5fbd7b1dd16212f54e31 Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Mon, 17 Mar 2025 13:38:24 +0100 Subject: [PATCH 03/14] [Discover] DiscoverNoResults SCSS to Emotions refactor --- .../main/components/no_results/_no_results.scss | 8 -------- .../application/main/components/no_results/no_results.tsx | 1 - 2 files changed, 9 deletions(-) delete mode 100644 src/platform/plugins/shared/discover/public/application/main/components/no_results/_no_results.scss diff --git a/src/platform/plugins/shared/discover/public/application/main/components/no_results/_no_results.scss b/src/platform/plugins/shared/discover/public/application/main/components/no_results/_no_results.scss deleted file mode 100644 index b4afc76bb607a..0000000000000 --- a/src/platform/plugins/shared/discover/public/application/main/components/no_results/_no_results.scss +++ /dev/null @@ -1,8 +0,0 @@ -.dscNoResults { - padding: $euiSizeL; -} - -.dscPageContent--emptyPrompt { - // override EUI specificity - max-width: $euiSizeXXL * 19 !important; // sass-lint:disable-line no-important -} \ No newline at end of file diff --git a/src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results.tsx b/src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results.tsx index ee96a1bba1a27..37af1bbcc5923 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results.tsx @@ -15,7 +15,6 @@ import { SearchResponseWarningsEmptyPrompt } from '@kbn/search-response-warnings import { NoResultsSuggestions } from './no_results_suggestions'; import type { DiscoverStateContainer } from '../../state_management/discover_state'; import { useDataState } from '../../hooks/use_data_state'; -import './_no_results.scss'; export interface DiscoverNoResultsProps { stateContainer: DiscoverStateContainer; From 219332bebd199e55ad4ef4889124bf33a3ba2263 Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Mon, 17 Mar 2025 16:02:20 +0100 Subject: [PATCH 04/14] [Discover] NoResultsIllustration SCSS to Emotions refactor --- .../assets/no_results_illustration.scss | 19 -------------- .../assets/no_results_illustration.tsx | 25 +++++++++++++------ 2 files changed, 17 insertions(+), 27 deletions(-) delete mode 100644 src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results_suggestions/assets/no_results_illustration.scss diff --git a/src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results_suggestions/assets/no_results_illustration.scss b/src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results_suggestions/assets/no_results_illustration.scss deleted file mode 100644 index 10e3b807559c8..0000000000000 --- a/src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results_suggestions/assets/no_results_illustration.scss +++ /dev/null @@ -1,19 +0,0 @@ -.dscNoResultsIllustration__decor { - fill: lightOrDarkTheme(#E6EBF2, #294492); -} - -.dscNoResultsIllustration__fly { - fill: lightOrDarkTheme(#294492, #E6EBF2); -} - -@include euiBreakpoint('xs', 's') { - .dscNoResults__illustration > svg { - width: $euiSize * 12; - height: auto; - margin: 0 auto; - } - - .dscNoResults__title { - text-align: center; - } -} diff --git a/src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results_suggestions/assets/no_results_illustration.tsx b/src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results_suggestions/assets/no_results_illustration.tsx index d8ec976313801..68131e6735af2 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results_suggestions/assets/no_results_illustration.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/no_results/no_results_suggestions/assets/no_results_illustration.tsx @@ -7,8 +7,17 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import './no_results_illustration.scss'; import React from 'react'; +import { css } from '@emotion/react'; +import type { UseEuiTheme } from '@elastic/eui'; + +const dscNoResultsIllustrationDecorCss = ({ colorMode }: UseEuiTheme) => css` + fill: ${colorMode === 'LIGHT' ? '#E6EBF2' : '#294492'}} +`; + +const dscNoResultsIllustrationFlyCss = ({ colorMode }: UseEuiTheme) => css` + fill: ${colorMode === 'LIGHT' ? '#294492' : '#E6EBF2'}} +`; export const NoResultsIllustration = () => ( ( viewBox="0 0 226 166" > ( d="M81.887 77.465a.699.699 0 00.174-.52h-2.916c.106.422 0 .588-.474.445a.866.866 0 00-1.055.422.881.881 0 000 1.077.708.708 0 001.017.241c.259-.152.48-.36.648-.61.143-.196.263-.34.512-.324.362 0 .482-.196.482-.527a1.063 1.063 0 001.612-.204zM79.718 80.418a.61.61 0 00.678.332.528.528 0 00.512-.46c.045-.384-.512-.987-.753-.949a1.115 1.115 0 00-.437 1.077zM78.64 80.365a.618.618 0 00-.692.4.798.798 0 00.369.866.889.889 0 001.017-.475c.067-.3-.234-.632-.694-.79zM81.601 65.367c0-.287-.135-.422-.384-.475a.503.503 0 00-.625.384.443.443 0 00.406.52.534.534 0 00.603-.43zM76.561 86.159c-.361-.098-.61.256-.678.46-.067.203.324.602.754.489a.557.557 0 00.324-.362.491.491 0 00-.4-.587zM76.087 83.288c-.505-1.295-1.266-1.408-2.125-.376a1.765 1.765 0 01-.263-.083.557.557 0 00-.754.226.693.693 0 000 .798c.354.754.693.867 1.341.528.49-.249.995-.482 1.507-.754.603.95.753.98 1.34.362a.834.834 0 00-1.046-.7zM80.479 67.853a.43.43 0 00.316.572.52.52 0 00.655-.324.503.503 0 00-.406-.595.46.46 0 00-.565.347zM90.528 68.553h.859a.369.369 0 00-.211-.173.498.498 0 00-.445.075c-.06.03-.135.053-.203.098zM76.305 95.854a.85.85 0 00-.957.482.587.587 0 00.385.708.753.753 0 00.843-.504.51.51 0 00-.27-.686zM80.524 93.014a.934.934 0 00.957-.603c.075-.293-.241-.685-.618-.753-.49-.105-.754 0-.867.392a.882.882 0 00.528.964zM80.765 94.325c0-.166-.06-.595-.256-.625-.196-.03-.4.376-.43.527-.03.15.181.294.317.346.135.053.391-.015.369-.248zM81.94 96.826c-.188 0-.663.083-.693.271-.03.188.354.445.52.535.166.09.444-.128.474-.37.03-.24-.06-.444-.3-.436zM80.833 101.933a.402.402 0 00-.234.498c.098.384.4.429.754.444.165-.301.406-.542.15-.836a.536.536 0 00-.67-.106zM78.415 93.413a1.257 1.257 0 00-1.334.7 1.002 1.002 0 00.678 1.116.972.972 0 00.656-1.816zM79.793 87.552a.528.528 0 01-.15-.572.617.617 0 00-.58-.626c-.332 0-.422.174-.445.445.006.197-.032.393-.113.572-.226.362-.512.686-.753 1.048-1.025-.287-1.334-.106-1.349.836a.7.7 0 00.92.753 6.378 6.378 0 001.13-.618 1.242 1.242 0 001.378.113 1.297 1.297 0 00-.038-1.95zM76.343 92.833c-.254.038-.506.09-.754.158-.504-.391-1.001-.46-1.235-.165a1.04 1.04 0 00.188 1.243c.34.278.573.195 1.153-.467.279.203.542.444.851.105a.543.543 0 00.083-.685c-.075-.09-.203-.196-.286-.189zM78.158 97.722a.85.85 0 00-.881.7c-.083.438.18.754.686.837a.707.707 0 00.896-.603.828.828 0 00-.7-.934zM82.49 99.975c-.098 0-.316-.06-.384.098s.128.293.18.293a.407.407 0 00.302-.135s-.045-.241-.098-.256zM78.128 91.153a.594.594 0 00-.158-.467.445.445 0 00-.4-.06c-.293.166-.285.43-.135.753.264.015.565.098.693-.226zM82.498 89.73a.663.663 0 00-.505-.754.437.437 0 00-.527.309.557.557 0 00.165.678.616.616 0 00.867-.233zM89.006 94.49a.754.754 0 00-.587-.753c-.362-.083-.603.045-.678.362a.89.89 0 00.497 1.062.798.798 0 00.768-.67zM88.517 90.4c.113-.467-.241-.897-.844-1.032a.752.752 0 00-.972.588 1.018 1.018 0 00.754 1.175 1.04 1.04 0 001.062-.731zM83.243 91.718c-.105.106-.331.234-.421.422-.09.189.143.58.459.625a.459.459 0 00.52-.421.617.617 0 00-.558-.626zM82.55 60.56a1.055 1.055 0 001.093-.753.756.756 0 10-1.507-.128.708.708 0 00.414.881zM86.807 99.478a.822.822 0 00-1.198 0 .753.753 0 00.06.889.598.598 0 00.799.18c.233-.113.753-.211.798-.595.045-.384-.324-.346-.46-.474zM87.891 76.945a.543.543 0 00.053.34 1.567 1.567 0 001.673.813c.085-.387.175-.77.27-1.153h-1.996zM84.509 91.53a.52.52 0 00.618-.377.537.537 0 10-1.055-.203.603.603 0 00.437.58zM85.88 93.511a.497.497 0 00-.43-.535c-.414-.052-.753.422-.753.588a.754.754 0 00.754.512.505.505 0 00.43-.565zM84.102 86.52l-.045-.067c.094.104.207.19.331.256a.325.325 0 00.49-.211.393.393 0 00-.249-.55.933.933 0 00-.497.098.467.467 0 00-.346-.535.534.534 0 00-.64.587c0 .362-.204.468-.422.67-.558-.572-1.04-.534-1.387.069a1.008 1.008 0 00-.09.18c-.173.445-.053.701.4.83.451.127.753.172 1.077-.37.063.178.103.362.12.55a.49.49 0 00.37.573.754.754 0 00.82-.136c.724-.806.739-1.123.068-1.944zM84.728 96.427a.558.558 0 00-.596.346.64.64 0 00.354.67.497.497 0 00.58-.353.573.573 0 00-.338-.663zM89.067 97.624a.459.459 0 00-.588.31.52.52 0 00.339.594.438.438 0 00.588-.301.542.542 0 00-.34-.603zM78.89 61.63a.632.632 0 00.654-.384c.121-.497-.052-.957-.391-1.025a.92.92 0 00-.882.618c-.067.271.294.738.618.791zM75.273 104.427a.3.3 0 00-.083-.181l.083.181zM74.58 67.386c.166 0 .467 0 .527-.196s-.143-.43-.286-.558c-.143-.128-.324 0-.437.136l-.075.203a.317.317 0 00.271.415zM75.898 68.553h.468c.105-.08.222-.143.346-.188a.663.663 0 00.527-.7c0-.377-.256-.754-.203-.897.053-.143.173-.377.444-.271.272.105.709-.053.897-.618.188-.565-.309-1.175-.753-1.047-.445.128-.453.4-.603.331-.15-.067-.354-.369-.625-.256-.272.113-.287.987-.219 1.115.068.128.392.392.173.603-.218.21-.595.263-.662.572-.068.31-.257 1.032.143 1.341l.067.015zM77.036 63.68c.52.18.859-.287 1.024-.536.166-.248-.3-.753-.753-.753a.505.505 0 00-.55.407c-.12.324.015.79.279.881zM80.772 62.127a1.13 1.13 0 00.701 1.319 1.167 1.167 0 001.243-.754c.143-.482-.226-.979-.881-1.16a.851.851 0 00-1.063.595zM79.416 63.144a.542.542 0 00-.625.392.505.505 0 00.392.558.445.445 0 00.587-.324.48.48 0 00-.354-.626zM80.403 59.325c.234.083.354-.136.392-.347.038-.21-.113-.504-.331-.474-.219.03-.55 0-.558.324-.007.324.332.444.497.497zM78.437 66.949a1.13 1.13 0 00.821 1.1c.302.052.626-.257.693-.67.068-.415-.105-.754-.625-.852-.407-.076-.829.12-.889.422zM79.213 58.76a.61.61 0 00.407-.264c.098-.196-.166-.527-.4-.504a.836.836 0 00-.346.188c-.053.316.12.58.339.58zM75.047 90.076c.15-.054.297-.12.437-.196.467-.226.625-.52.497-.911a.815.815 0 00-1.024-.528 8.65 8.65 0 01-1.507.294c-.414 0-.881.347-.851.633a.617.617 0 00.602.414c.362-.12.468.136.686.264.22.1.46.147.7.135.16-.001.316-.037.46-.105zM72.606 95.907a.49.49 0 00-.27 0l.248.987a.49.49 0 00.414-.392.58.58 0 00-.392-.595zM72.99 92.396a1.123 1.123 0 00-.602-.82c-.286-.076-.497.105-.58.504-.083.4 0 .693.324.753.437.106.798-.083.858-.437zM75.778 90.159a.655.655 0 00-.754.339c-.15.505 0 .972.317 1.062a.873.873 0 00.927-.542.753.753 0 00-.49-.86zM74.098 97.466a.158.158 0 00-.166.128c0 .045.083.143.12.143a.151.151 0 00.159-.09.15.15 0 00-.06-.157.15.15 0 00-.053-.024zM71.717 84.923a.844.844 0 00-.24-.957.52.52 0 00-.505.06v1.462h.052a.904.904 0 00.618-.12.331.331 0 00.075-.445zM71.567 80.908a.82.82 0 00-.196-1.1.874.874 0 00.24-.256.603.603 0 000-.618c.079.007.157.007.234 0a1.13 1.13 0 00.867-1.265.377.377 0 00.226 0 .446.446 0 00.143-.64h-.61a.505.505 0 00-.12.33.754.754 0 00-.822-.12 47.256 47.256 0 00-.452 4.302c.158-.113.332-.264.49-.633z" /> ( d="M179.911 12.867c-.279 2.629 5.688 6.08 7.865 7.24a1.612 1.612 0 001.507 0l.459-.264a1.59 1.59 0 00.851-1.319c.121-2.47.249-9.356-2.154-10.478-2.185-1.017-5.183.753-5.183.753s-3.096 1.672-3.345 4.068z" /> ( Date: Mon, 17 Mar 2025 16:12:19 +0100 Subject: [PATCH 05/14] [Discover] SkipBottomButton SCSS to Emotions refactor --- .../skip_bottom_button/skip_bottom_button.scss | 8 -------- .../skip_bottom_button.test.tsx | 7 ++++++- .../skip_bottom_button/skip_bottom_button.tsx | 16 +++++++++++++--- 3 files changed, 19 insertions(+), 12 deletions(-) delete mode 100644 src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.scss diff --git a/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.scss b/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.scss deleted file mode 100644 index 3376229f0b346..0000000000000 --- a/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.scss +++ /dev/null @@ -1,8 +0,0 @@ -.dscSkipButton { - z-index: $euiZLevel1; - transition: none !important; - &:focus { - animation: none !important; - position: absolute; - } -} diff --git a/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.test.tsx b/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.test.tsx index 149116572a084..d83a8089f8235 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.test.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.test.tsx @@ -12,6 +12,7 @@ import { mountWithIntl } from '@kbn/test-jest-helpers'; import type { ReactWrapper } from 'enzyme'; import type { SkipBottomButtonProps } from './skip_bottom_button'; import { SkipBottomButton } from './skip_bottom_button'; +import { EuiThemeProvider } from '@elastic/eui'; describe('Skip to Bottom Button', function () { let props: SkipBottomButtonProps; @@ -24,7 +25,11 @@ describe('Skip to Bottom Button', function () { }); it('should be clickable', function () { - component = mountWithIntl(); + component = mountWithIntl( + + + + ); component.find('[data-test-subj="discoverSkipTableButton"]').last().simulate('click'); expect(props.onClick).toHaveBeenCalled(); }); diff --git a/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.tsx b/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.tsx index aecb2476727f4..3986450e2d4f6 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.tsx @@ -8,9 +8,9 @@ */ import React from 'react'; -import './skip_bottom_button.scss'; -import { EuiScreenReaderOnly, EuiButton } from '@elastic/eui'; +import { EuiScreenReaderOnly, EuiButton, type UseEuiTheme } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; +import { css } from '@emotion/react'; export interface SkipBottomButtonProps { /** @@ -23,10 +23,10 @@ export function SkipBottomButton({ onClick }: SkipBottomButtonProps) { return ( ); } + +const skipBottomButtonCss = ({ euiTheme }: UseEuiTheme) => css` + z-index: ${euiTheme.levels.header}; + transition: none !important; + + &:focus { + animation: none !important; + position: absolute; + } +`; From c10a86323d1e4186fac883f21e547a388d6b92f9 Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Mon, 17 Mar 2025 16:15:32 +0100 Subject: [PATCH 06/14] [Discover] DiscoverTopNav SCSS to Emotions refactor --- .../application/main/components/top_nav/discover_topnav.tsx | 3 +-- .../public/application/main/components/top_nav/top_nav.scss | 3 --- 2 files changed, 1 insertion(+), 5 deletions(-) delete mode 100644 src/platform/plugins/shared/discover/public/application/main/components/top_nav/top_nav.scss diff --git a/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx b/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx index bac1fc41003ae..b249fe7bf82a4 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx @@ -21,7 +21,6 @@ import { useAppStateSelector } from '../../state_management/discover_app_state_c import { useDiscoverTopNav } from './use_discover_topnav'; import { useIsEsqlMode } from '../../hooks/use_is_esql_mode'; import { ESQLToDataViewTransitionModal } from './esql_dataview_transition'; -import './top_nav.scss'; import { internalStateActions, useCurrentDataView, @@ -166,7 +165,7 @@ export const DiscoverTopNav = ({ badges: topNavBadges, config: topNavMenu, setMenuMountPoint: setHeaderActionMenu, - className: 'dscTopNav', // FIXME: Delete the scss file and pass `gutterSize="xxs"` instead (after next Eui release) + gutterSize: 'xxs', }), [setHeaderActionMenu, topNavBadges, topNavMenu] ); diff --git a/src/platform/plugins/shared/discover/public/application/main/components/top_nav/top_nav.scss b/src/platform/plugins/shared/discover/public/application/main/components/top_nav/top_nav.scss deleted file mode 100644 index a8eb63905b210..0000000000000 --- a/src/platform/plugins/shared/discover/public/application/main/components/top_nav/top_nav.scss +++ /dev/null @@ -1,3 +0,0 @@ -.dscTopNav .euiHeaderLinks__list { - gap: $euiSizeXS; -} From 03d3c57a4b66f0733d1b31362c0e43a2e7ac1854 Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Mon, 17 Mar 2025 16:24:43 +0100 Subject: [PATCH 07/14] [Discover] saved search grid SCSS to Emotions refactor --- .../application/common/src/global_app_style.tsx | 12 +++++++++++- .../embeddable/components/saved_search_grid.scss | 8 -------- .../embeddable/components/saved_search_grid.tsx | 1 - 3 files changed, 11 insertions(+), 10 deletions(-) delete mode 100644 src/platform/plugins/shared/discover/public/embeddable/components/saved_search_grid.scss diff --git a/src/core/packages/application/common/src/global_app_style.tsx b/src/core/packages/application/common/src/global_app_style.tsx index b8e75532fc200..3c6aae13dffbc 100644 --- a/src/core/packages/application/common/src/global_app_style.tsx +++ b/src/core/packages/application/common/src/global_app_style.tsx @@ -88,6 +88,14 @@ export const renderingOverrides = (euiTheme: UseEuiTheme['euiTheme']) => css` --kbnAppHeadersOffset: var(--euiFixedHeadersOffset, 0); } } + + // Fixes fullscreen mode for saved searches on Dashboard. Otherwise, sibling grids can obscure the grid in fullscreen mode. + // "euiDataGrid__restrictBody" is set to body element when a grid is in fullscreen + // https://github.com/elastic/kibana/issues/134032 + + .euiDataGrid__restrictBody .embPanel .embPanel__content { + z-index: unset !important; + } `; export const bannerStyles = (euiTheme: UseEuiTheme['euiTheme']) => css` @@ -158,7 +166,9 @@ export const GlobalAppStyle = () => { return ( ); diff --git a/src/platform/plugins/shared/discover/public/embeddable/components/saved_search_grid.scss b/src/platform/plugins/shared/discover/public/embeddable/components/saved_search_grid.scss deleted file mode 100644 index f3ddfd23e3eb1..0000000000000 --- a/src/platform/plugins/shared/discover/public/embeddable/components/saved_search_grid.scss +++ /dev/null @@ -1,8 +0,0 @@ -/** - * 1. Fixes fullscreen mode for saved searches on Dashboard. Otherwise, sibling grids can obscure the grid in fullscreen mode. - * "euiDataGrid__restrictBody" is set to body element when a grid is in fullscreen - * https://github.com/elastic/kibana/issues/134032 - */ -.euiDataGrid__restrictBody .embPanel .embPanel__content { - z-index: unset !important; /* 1 */ -} diff --git a/src/platform/plugins/shared/discover/public/embeddable/components/saved_search_grid.tsx b/src/platform/plugins/shared/discover/public/embeddable/components/saved_search_grid.tsx index 0a2919fe1540c..ce3b7ba1db88d 100644 --- a/src/platform/plugins/shared/discover/public/embeddable/components/saved_search_grid.tsx +++ b/src/platform/plugins/shared/discover/public/embeddable/components/saved_search_grid.tsx @@ -21,7 +21,6 @@ import { getRowHeight, } from '@kbn/unified-data-table'; import { DiscoverGrid } from '../../components/discover_grid'; -import './saved_search_grid.scss'; import { DiscoverGridFlyout } from '../../components/discover_grid_flyout'; import { SavedSearchEmbeddableBase } from './saved_search_embeddable_base'; import { TotalDocuments } from '../../application/main/components/total_documents/total_documents'; From 7eafcbeea9f3264fb3597b8b4b665a1e4105186a Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Mon, 17 Mar 2025 17:02:04 +0100 Subject: [PATCH 08/14] [Discover] Discover layout SCSS to Emotions refactor --- .../components/layout/discover_documents.tsx | 30 +++++--- .../components/layout/discover_layout.scss | 73 ------------------- .../components/layout/discover_layout.tsx | 53 ++++++++++++-- .../layout/discover_resizable_layout.tsx | 12 ++- .../plugins/shared/discover/public/plugin.tsx | 4 - 5 files changed, 75 insertions(+), 97 deletions(-) delete mode 100644 src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.scss diff --git a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_documents.tsx b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_documents.tsx index d22e6ba606a15..c7d3b63f82a8b 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_documents.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_documents.tsx @@ -80,14 +80,6 @@ import { useInternalStateSelector, } from '../../state_management/redux'; -const containerStyles = css` - position: relative; -`; - -const progressStyle = css` - z-index: 2; -`; - const DiscoverGridMemoized = React.memo(DiscoverGrid); // export needs for testing @@ -393,7 +385,8 @@ function DiscoverDocumentsComponent({ if (isDataViewLoading || (isEmptyDataResult && isDataLoading)) { return ( -
+ // class is used in tests +
@@ -404,6 +397,7 @@ function DiscoverDocumentsComponent({ } return ( + // class is used in tests

@@ -477,3 +471,21 @@ function DiscoverDocumentsComponent({ } export const DiscoverDocuments = memo(DiscoverDocumentsComponent); + +const containerStyles = css` + position: relative; + min-height: 0; +`; + +const progressStyle = css` + z-index: 2; +`; + +const dscDocumentsLoadingCss = css` + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + height: 100%; + width: 100%; +`; diff --git a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.scss b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.scss deleted file mode 100644 index 3b4d4fbeda2ca..0000000000000 --- a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.scss +++ /dev/null @@ -1,73 +0,0 @@ -@import '../../../../../../../../../core/public/mixins'; - -discover-app { - flex-grow: 1; -} - -.dscAppWrapper { - overflow-y: hidden; -} - -.dscPage { - flex-direction: column; - overflow: hidden; - padding: 0; - - @include euiBreakpoint('m', 'l', 'xl') { - @include kibanaFullBodyHeight(); - } -} - -.dscPage .dscPageBody { - overflow: hidden; -} - -.dscPageBody__inner { - overflow: hidden; - height: 100%; -} - -.dscPageBody__contents { - overflow: hidden; - height: 100%; -} - -.dscPageContent__wrapper { - overflow: hidden; // Ensures horizontal scroll of table - display: flex; - flex-direction: column; - height: 100%; -} - -.dscPageContent { - position: relative; - overflow: hidden; - height: 100%; -} - -.dscPageContent--centered { - width: auto; - height: auto; - align-self: center; - margin-top: auto; - margin-bottom: auto; - flex-grow: 0; -} - -.dscPageContent__panelsToggleWhenNoResults { - padding: $euiSizeS; -} - -.dscTable { - // needs for scroll container of lagacy table - min-height: 0; -} - -.dscDocuments__loading { - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - height: 100%; - width: 100%; -} diff --git a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx index 67e9d58bcfba3..10c64b5c18434 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx @@ -7,7 +7,6 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import './discover_layout.scss'; import type { ReactElement } from 'react'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { @@ -17,13 +16,13 @@ import { EuiProgress, EuiDelayRender, useEuiTheme, + useEuiBreakpoint, } from '@elastic/eui'; import { css } from '@emotion/react'; import { i18n } from '@kbn/i18n'; import { isOfAggregateQueryType } from '@kbn/es-query'; import { appendWhereClauseToESQLQuery, hasTransformationalCommand } from '@kbn/esql-utils'; import { METRIC_TYPE } from '@kbn/analytics'; -import classNames from 'classnames'; import { generateFilters } from '@kbn/data-plugin/public'; import { useDragDropContext } from '@kbn/dom-drag-drop'; import { type DataViewField, DataViewType } from '@kbn/data-views-plugin/public'; @@ -33,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 { kibanaFullBodyHeightCss } from '@kbn/core/public'; import { useSavedSearchInitial } from '../../state_management/discover_state_provider'; import type { DiscoverStateContainer } from '../../state_management/discover_state'; import { VIEW_MODE } from '../../../../../common/constants'; @@ -359,10 +359,22 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) { return (

+ {/* class is used in different styles */}
} mainPanel={ -
+
{resultState === 'none' ? ( <> {React.isValidElement(panelsToggle) ? ( -
+
{React.cloneElement(panelsToggle, { renderedFor: 'prompt', isChartAvailable: false, @@ -470,9 +487,7 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) { hasShadow={false} hasBorder={false} color="transparent" - className={classNames('dscPageContent', { - 'dscPageContent--centered': contentCentered, - })} + css={[dscPageContentCss, contentCentered && dscPageContentCenteredCss]} > {mainDisplay} @@ -500,3 +515,25 @@ const getOperator = (fieldName: string, values: unknown, operation: '+' | '-') = return operation; }; + +const dscPageContentWrapperCss = css` + overflow: hidden; // Ensures horizontal scroll of table + display: flex; + flex-direction: column; + height: 100%; +`; + +const dscPageContentCss = css` + position: relative; + overflow: hidden; + height: 100%; +`; + +const dscPageContentCenteredCss = css` + width: auto; + height: auto; + align-self: center; + margin-top: auto; + margin-bottom: auto; + flex-grow: 0; +`; diff --git a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_resizable_layout.tsx b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_resizable_layout.tsx index 3132a89e05531..65cee7de0b2eb 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_resizable_layout.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_resizable_layout.tsx @@ -13,8 +13,8 @@ import { ResizableLayoutDirection, ResizableLayoutMode, } from '@kbn/resizable-layout'; -import type { ReactNode } from 'react'; -import React, { useState } from 'react'; +import React, { useState, type ReactNode } from 'react'; +import { css } from '@emotion/react'; import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal'; import useLocalStorage from 'react-use/lib/useLocalStorage'; import useObservable from 'react-use/lib/useObservable'; @@ -63,7 +63,8 @@ export const DiscoverResizableLayout = ({ {sidebarPanel} {mainPanel} ); }; + +const dscPageBodyContentsCss = css` + overflow: hidden; + height: 100%; +`; diff --git a/src/platform/plugins/shared/discover/public/plugin.tsx b/src/platform/plugins/shared/discover/public/plugin.tsx index 33bda138aa46a..293e886249c42 100644 --- a/src/platform/plugins/shared/discover/public/plugin.tsx +++ b/src/platform/plugins/shared/discover/public/plugin.tsx @@ -205,10 +205,6 @@ export class DiscoverPlugin // make sure the data view list is up to date discoverStartPlugins.dataViews.clearCache(); - // FIXME: Temporarily hide overflow-y in Discover app when Field Stats table is shown - // due to EUI bug https://github.com/elastic/eui/pull/5152 - params.element.classList.add('dscAppWrapper'); - const { renderApp } = await import('./application'); const unmount = renderApp({ element: params.element, From 1dc461678c89c57cf4a47101837f5df0a93e331e Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Wed, 19 Mar 2025 10:15:59 +0100 Subject: [PATCH 09/14] [Discover] Implement gutter size for TopNavMenuItems --- .../application/main/components/top_nav/discover_topnav.tsx | 3 ++- .../shared/navigation/public/top_nav_menu/top_nav_menu.tsx | 5 ++++- .../navigation/public/top_nav_menu/top_nav_menu_items.tsx | 5 ++++- src/platform/plugins/shared/navigation/public/types.ts | 2 ++ 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx b/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx index b249fe7bf82a4..f2041c955d234 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx @@ -11,6 +11,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import { DataViewType } from '@kbn/data-views-plugin/public'; import type { DataViewPickerProps } from '@kbn/unified-search-plugin/public'; import { DiscoverFlyouts, dismissAllFlyoutsExceptFor } from '@kbn/discover-utils'; +import type { EuiGutterSize } from '@kbn/navigation-plugin/public/types'; import { useSavedSearchInitial } from '../../state_management/discover_state_provider'; import { ESQL_TRANSITION_MODAL_KEY } from '../../../../../common/constants'; import { useDiscoverServices } from '../../../../hooks/use_discover_services'; @@ -165,7 +166,7 @@ export const DiscoverTopNav = ({ badges: topNavBadges, config: topNavMenu, setMenuMountPoint: setHeaderActionMenu, - gutterSize: 'xxs', + gutterSize: 'xxs' as EuiGutterSize, }), [setHeaderActionMenu, topNavBadges, topNavMenu] ); diff --git a/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu.tsx index 36a96de32ce22..c4e3ef590e92e 100644 --- a/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu.tsx +++ b/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu.tsx @@ -19,6 +19,7 @@ import type { EuiBreakpointSize } from '@elastic/eui'; import type { TopNavMenuData } from './top_nav_menu_data'; import { TopNavMenuItems } from './top_nav_menu_items'; import { type TopNavMenuBadgeProps, TopNavMenuBadges } from './top_nav_menu_badges'; +import type { EuiGutterSize } from '../types'; export type TopNavMenuProps = Omit< StatefulSearchBarProps, @@ -33,6 +34,7 @@ export type TopNavMenuProps = Omit< unifiedSearch?: UnifiedSearchPublicPluginStart; className?: string; visible?: boolean; + gutterSize?: EuiGutterSize; /** * If provided, the menu part of the component will be rendered as a portal inside the given mount point. * @@ -71,7 +73,7 @@ export type TopNavMenuProps = Omit< export function TopNavMenu( props: TopNavMenuProps ): ReactElement | null { - const { config, badges, showSearchBar, ...searchBarProps } = props; + const { config, badges, showSearchBar, gutterSize, ...searchBarProps } = props; if ((!config || config.length === 0) && (!showSearchBar || !props.unifiedSearch)) { return null; @@ -93,6 +95,7 @@ export function TopNavMenu( } `} popoverBreakpoints={props.popoverBreakpoints} + gutterSize={gutterSize} /> ); } diff --git a/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu_items.tsx b/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu_items.tsx index e5150679bf1d5..189a90eb6c397 100644 --- a/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu_items.tsx +++ b/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu_items.tsx @@ -11,6 +11,7 @@ import { EuiBreakpointSize, EuiHeaderLinks, useIsWithinBreakpoints } from '@elas import React from 'react'; import type { TopNavMenuData } from './top_nav_menu_data'; import { TopNavMenuItem } from './top_nav_menu_item'; +import type { EuiGutterSize } from '../types'; const POPOVER_BREAKPOINTS: EuiBreakpointSize[] = ['xs', 's']; @@ -18,12 +19,14 @@ interface TopNavMenuItemsProps { config: TopNavMenuData[] | undefined; className?: string; popoverBreakpoints?: EuiBreakpointSize[]; + gutterSize?: EuiGutterSize; } export const TopNavMenuItems = ({ config, className, popoverBreakpoints = POPOVER_BREAKPOINTS, + gutterSize = 'xs', }: TopNavMenuItemsProps) => { const isMobileMenu = useIsWithinBreakpoints(popoverBreakpoints); @@ -31,7 +34,7 @@ export const TopNavMenuItems = ({ return ( diff --git a/src/platform/plugins/shared/navigation/public/types.ts b/src/platform/plugins/shared/navigation/public/types.ts index 82f417acd467d..dbaf80711f0bc 100644 --- a/src/platform/plugins/shared/navigation/public/types.ts +++ b/src/platform/plugins/shared/navigation/public/types.ts @@ -57,3 +57,5 @@ export interface NavigationPublicStartDependencies { } export type SolutionType = 'es' | 'oblt' | 'security' | 'analytics'; + +export type EuiGutterSize = 'xxs' | 'xs' | 's' | 'm' | 'l'; From 8169b1866d7cc021dc33571ed0389de4c1ce191b Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Wed, 19 Mar 2025 10:32:51 +0100 Subject: [PATCH 10/14] [Discover] Fix types for top nav gutterSize --- .../main/components/top_nav/discover_topnav.tsx | 4 ++-- .../navigation/public/top_nav_menu/top_nav_menu.tsx | 5 ++--- .../public/top_nav_menu/top_nav_menu_items.tsx | 10 +++++++--- src/platform/plugins/shared/navigation/public/types.ts | 2 -- 4 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx b/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx index f2041c955d234..eeeda7cb01908 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/top_nav/discover_topnav.tsx @@ -11,7 +11,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import { DataViewType } from '@kbn/data-views-plugin/public'; import type { DataViewPickerProps } from '@kbn/unified-search-plugin/public'; import { DiscoverFlyouts, dismissAllFlyoutsExceptFor } from '@kbn/discover-utils'; -import type { EuiGutterSize } from '@kbn/navigation-plugin/public/types'; +import type { EuiHeaderLinksProps } from '@elastic/eui'; import { useSavedSearchInitial } from '../../state_management/discover_state_provider'; import { ESQL_TRANSITION_MODAL_KEY } from '../../../../../common/constants'; import { useDiscoverServices } from '../../../../hooks/use_discover_services'; @@ -166,7 +166,7 @@ export const DiscoverTopNav = ({ badges: topNavBadges, config: topNavMenu, setMenuMountPoint: setHeaderActionMenu, - gutterSize: 'xxs' as EuiGutterSize, + gutterSize: 'xxs' as EuiHeaderLinksProps['gutterSize'], }), [setHeaderActionMenu, topNavBadges, topNavMenu] ); diff --git a/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu.tsx index c4e3ef590e92e..99a3d69a5a9fe 100644 --- a/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu.tsx +++ b/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu.tsx @@ -15,11 +15,10 @@ import { MountPointPortal } from '@kbn/react-kibana-mount'; import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public'; import type { StatefulSearchBarProps } from '@kbn/unified-search-plugin/public'; import type { AggregateQuery, Query } from '@kbn/es-query'; -import type { EuiBreakpointSize } from '@elastic/eui'; +import type { EuiBreakpointSize, EuiHeaderLinksProps } from '@elastic/eui'; import type { TopNavMenuData } from './top_nav_menu_data'; import { TopNavMenuItems } from './top_nav_menu_items'; import { type TopNavMenuBadgeProps, TopNavMenuBadges } from './top_nav_menu_badges'; -import type { EuiGutterSize } from '../types'; export type TopNavMenuProps = Omit< StatefulSearchBarProps, @@ -34,7 +33,7 @@ export type TopNavMenuProps = Omit< unifiedSearch?: UnifiedSearchPublicPluginStart; className?: string; visible?: boolean; - gutterSize?: EuiGutterSize; + gutterSize?: EuiHeaderLinksProps['gutterSize']; /** * If provided, the menu part of the component will be rendered as a portal inside the given mount point. * diff --git a/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu_items.tsx b/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu_items.tsx index 189a90eb6c397..dd7bb983003aa 100644 --- a/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu_items.tsx +++ b/src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu_items.tsx @@ -7,11 +7,15 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { EuiBreakpointSize, EuiHeaderLinks, useIsWithinBreakpoints } from '@elastic/eui'; +import { + EuiBreakpointSize, + EuiHeaderLinks, + useIsWithinBreakpoints, + type EuiHeaderLinksProps, +} from '@elastic/eui'; import React from 'react'; import type { TopNavMenuData } from './top_nav_menu_data'; import { TopNavMenuItem } from './top_nav_menu_item'; -import type { EuiGutterSize } from '../types'; const POPOVER_BREAKPOINTS: EuiBreakpointSize[] = ['xs', 's']; @@ -19,7 +23,7 @@ interface TopNavMenuItemsProps { config: TopNavMenuData[] | undefined; className?: string; popoverBreakpoints?: EuiBreakpointSize[]; - gutterSize?: EuiGutterSize; + gutterSize?: EuiHeaderLinksProps['gutterSize']; } export const TopNavMenuItems = ({ diff --git a/src/platform/plugins/shared/navigation/public/types.ts b/src/platform/plugins/shared/navigation/public/types.ts index dbaf80711f0bc..82f417acd467d 100644 --- a/src/platform/plugins/shared/navigation/public/types.ts +++ b/src/platform/plugins/shared/navigation/public/types.ts @@ -57,5 +57,3 @@ export interface NavigationPublicStartDependencies { } export type SolutionType = 'es' | 'oblt' | 'security' | 'analytics'; - -export type EuiGutterSize = 'xxs' | 'xs' | 's' | 'm' | 'l'; From 47858f597cf231d8f5c0fad04cfcf27650a6ce73 Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Wed, 19 Mar 2025 10:33:04 +0100 Subject: [PATCH 11/14] [Discover] remove redundant css for discover layout --- .../application/main/components/layout/discover_layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx index 10c64b5c18434..53b6d97b8c4b2 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx @@ -363,7 +363,6 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) { data-fetch-counter={fetchCounter.current} direction="column" css={css` - flex-direction: column; overflow: hidden; padding: 0; background-color: ${pageBackgroundColor}; From 3a545189335111cbd66d5048127eccfd6dcc66ad Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Wed, 19 Mar 2025 10:48:33 +0100 Subject: [PATCH 12/14] [Discover] Remove redundant styles and component --- .../common/src/global_app_style.tsx | 8 --- .../components/skip_bottom_button/index.ts | 10 ---- .../skip_bottom_button.test.tsx | 36 -------------- .../skip_bottom_button/skip_bottom_button.tsx | 49 ------------------- 4 files changed, 103 deletions(-) delete mode 100644 src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/index.ts delete mode 100644 src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.test.tsx delete mode 100644 src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.tsx diff --git a/src/core/packages/application/common/src/global_app_style.tsx b/src/core/packages/application/common/src/global_app_style.tsx index 3c6aae13dffbc..470c87cbbf9a3 100644 --- a/src/core/packages/application/common/src/global_app_style.tsx +++ b/src/core/packages/application/common/src/global_app_style.tsx @@ -88,14 +88,6 @@ export const renderingOverrides = (euiTheme: UseEuiTheme['euiTheme']) => css` --kbnAppHeadersOffset: var(--euiFixedHeadersOffset, 0); } } - - // Fixes fullscreen mode for saved searches on Dashboard. Otherwise, sibling grids can obscure the grid in fullscreen mode. - // "euiDataGrid__restrictBody" is set to body element when a grid is in fullscreen - // https://github.com/elastic/kibana/issues/134032 - - .euiDataGrid__restrictBody .embPanel .embPanel__content { - z-index: unset !important; - } `; export const bannerStyles = (euiTheme: UseEuiTheme['euiTheme']) => css` diff --git a/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/index.ts b/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/index.ts deleted file mode 100644 index bb3c7db8cf6f0..0000000000000 --- a/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - * 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". - */ - -export { SkipBottomButton } from './skip_bottom_button'; diff --git a/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.test.tsx b/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.test.tsx deleted file mode 100644 index d83a8089f8235..0000000000000 --- a/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.test.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* - * 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". - */ - -import React from 'react'; -import { mountWithIntl } from '@kbn/test-jest-helpers'; -import type { ReactWrapper } from 'enzyme'; -import type { SkipBottomButtonProps } from './skip_bottom_button'; -import { SkipBottomButton } from './skip_bottom_button'; -import { EuiThemeProvider } from '@elastic/eui'; - -describe('Skip to Bottom Button', function () { - let props: SkipBottomButtonProps; - let component: ReactWrapper; - - beforeAll(() => { - props = { - onClick: jest.fn(), - }; - }); - - it('should be clickable', function () { - component = mountWithIntl( - - - - ); - component.find('[data-test-subj="discoverSkipTableButton"]').last().simulate('click'); - expect(props.onClick).toHaveBeenCalled(); - }); -}); diff --git a/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.tsx b/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.tsx deleted file mode 100644 index 3986450e2d4f6..0000000000000 --- a/src/platform/plugins/shared/discover/public/application/main/components/skip_bottom_button/skip_bottom_button.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/* - * 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". - */ - -import React from 'react'; -import { EuiScreenReaderOnly, EuiButton, type UseEuiTheme } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n-react'; -import { css } from '@emotion/react'; - -export interface SkipBottomButtonProps { - /** - * Action to perform on click - */ - onClick: () => void; -} - -export function SkipBottomButton({ onClick }: SkipBottomButtonProps) { - return ( - - - - - - ); -} - -const skipBottomButtonCss = ({ euiTheme }: UseEuiTheme) => css` - z-index: ${euiTheme.levels.header}; - transition: none !important; - - &:focus { - animation: none !important; - position: absolute; - } -`; From 5e43a20fe42c2cf6c1c31d35411785695a764f83 Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Wed, 19 Mar 2025 11:11:06 +0100 Subject: [PATCH 13/14] [Discover] Fix layout overflow --- .../main/components/layout/discover_layout.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx index 53b6d97b8c4b2..9cd698f41e92d 100644 --- a/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx +++ b/src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx @@ -370,10 +370,6 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) { ${useEuiBreakpoint(['m', 'l', 'xl'])} { ${kibanaFullBodyHeightCss()} } - - .dscPage .dscPageBody { - overflow: hidden; - } `} >

- {/* class is used in different styles */} - +
Date: Wed, 19 Mar 2025 11:54:23 +0100 Subject: [PATCH 14/14] [Discover] Remove redundant i18n entries --- .../plugins/private/translations/translations/fr-FR.json | 1 - .../plugins/private/translations/translations/ja-JP.json | 1 - .../plugins/private/translations/translations/zh-CN.json | 1 - 3 files changed, 3 deletions(-) diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json index 59ac40d01a036..1129fa67502cd 100644 --- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json +++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json @@ -2845,7 +2845,6 @@ "discover.showingSavedDataViewWarningDescription": "Affichage de la vue de données enregistrée : \"{ownDataViewTitle}\" ({ownDataViewId})", "discover.singleDocRoute.errorMessage": "Aucune donnée correspondante pour l'ID {dataViewId}", "discover.singleDocRoute.errorTitle": "Une erreur s'est produite", - "discover.skipToBottomButtonLabel": "Atteindre la fin du tableau", "discover.topNav.managedContentLabel": "Cette session Discover est gérée par Elastic. Les modifications effectuées ici doivent être enregistrées dans une nouvelle session Discover.", "discover.topNav.openSearchPanel.manageSearchesButtonLabel": "Gérer les sessions Discover", "discover.topNav.openSearchPanel.noSearchesFoundDescription": "Aucune session Discover correspondante n'a été trouvée.", diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json index 0be3251495965..7dba56ca840e6 100644 --- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json +++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json @@ -2844,7 +2844,6 @@ "discover.showingSavedDataViewWarningDescription": "保存されたデータビューを表示しています：\"{ownDataViewTitle}\" ({ownDataViewId})", "discover.singleDocRoute.errorMessage": "ID {dataViewId}の一致するデータビューが見つかりません", "discover.singleDocRoute.errorTitle": "エラーが発生しました", - "discover.skipToBottomButtonLabel": "テーブルの最後に移動", "discover.topNav.managedContentLabel": "このDiscoverセッションはElasticが管理しています。この変更は、新しいDiscoverセッションに保存する必要があります。", "discover.topNav.openSearchPanel.manageSearchesButtonLabel": "Discoverセッションを管理", "discover.topNav.openSearchPanel.noSearchesFoundDescription": "一致するDiscoverセッションが見つかりませんでした。", diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json index f3f398658bff4..2806cf42702cd 100644 --- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json +++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json @@ -2845,7 +2845,6 @@ "discover.showingSavedDataViewWarningDescription": "正在显示已保存数据视图：“{ownDataViewTitle}”({ownDataViewId})", "discover.singleDocRoute.errorMessage": "没有与 ID {dataViewId} 相匹配的数据视图", "discover.singleDocRoute.errorTitle": "发生错误", - "discover.skipToBottomButtonLabel": "转到表尾", "discover.topNav.managedContentLabel": "此 Discover 会话由 Elastic 进行管理。此处的更改必须保存到新 Discover 会话。", "discover.topNav.openSearchPanel.manageSearchesButtonLabel": "管理 Discover 会话", "discover.topNav.openSearchPanel.noSearchesFoundDescription": "找不到匹配的 Discover 会话。",