From b77b16074bac8a6dc0285c2efe7b4e9578fdfc90 Mon Sep 17 00:00:00 2001 From: Jenny Date: Wed, 14 Sep 2022 11:14:20 +0200 Subject: [PATCH 1/2] Move styles to the index.scss file to avoid emotion css override --- x-pack/plugins/infra/public/index.scss | 9 +++++++++ .../infra/public/pages/logs/stream/page_content.tsx | 11 +---------- .../infra/public/pages/metrics/hosts/index.tsx | 12 +----------- .../public/pages/metrics/inventory_view/index.tsx | 11 +---------- 4 files changed, 12 insertions(+), 31 deletions(-) diff --git a/x-pack/plugins/infra/public/index.scss b/x-pack/plugins/infra/public/index.scss index e69de29bb2d1d..aca7942b897f3 100644 --- a/x-pack/plugins/infra/public/index.scss +++ b/x-pack/plugins/infra/public/index.scss @@ -0,0 +1,9 @@ +// This is added to facilitate a full height layout whereby the +// inner container will set its own height and be scrollable. +.pageSectionContent { + display: flex; + flex-direction: column; + flex: 1 0 auto; + width: 100%; + height: 100%; +} diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx index 2bafa8e2fc571..e314c99834d8c 100644 --- a/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx +++ b/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx @@ -8,7 +8,6 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; import { APP_WRAPPER_CLASS } from '@kbn/core/public'; -import { css } from '@emotion/react'; import { LogSourceErrorPage } from '../../../components/logging/log_source_error_page'; import { SourceLoadingPage } from '../../../components/source_loading_page'; import { useLogViewContext } from '../../../hooks/use_log_view'; @@ -44,15 +43,7 @@ export const StreamPageContent: React.FunctionComponent = () => { }} pageSectionProps={{ contentProps: { - // This is added to facilitate a full height layout whereby the - // inner container will set its own height and be scrollable. - css: css` - display: flex; - flex-direction: column; - flex: 1 0 auto; - width: 100%; - height: 100%; - `, + className: 'pageSectionContent', }, }} > diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx index c2c8d3f435bd2..bbe89130cf70f 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx @@ -7,7 +7,6 @@ import { EuiErrorBoundary } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { css } from '@emotion/react'; import React from 'react'; import { useTrackPageview } from '@kbn/observability-plugin/public'; import { APP_WRAPPER_CLASS } from '@kbn/core/public'; @@ -63,17 +62,8 @@ export const HostsPage = () => { pageTitle: hostsTitle, }} pageSectionProps={{ - paddingSize: 'none', contentProps: { - // This is added to facilitate a full height layout whereby the - // inner container will set its own height and be scrollable. - css: css` - display: flex; - flex-direction: column; - flex: 1 0 auto; - width: 100%; - height: 100%; - `, + className: 'pageSectionContent', }, }} > diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx index 113279a7c8391..a79b883f71542 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx @@ -8,7 +8,6 @@ import { EuiErrorBoundary } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { css } from '@emotion/react'; import { useTrackPageview } from '@kbn/observability-plugin/public'; import { APP_WRAPPER_CLASS } from '@kbn/core/public'; import { FilterBar } from './components/filter_bar'; @@ -77,15 +76,7 @@ export const SnapshotPage = () => { }} pageSectionProps={{ contentProps: { - // This is added to facilitate a full height layout whereby the - // inner container will set its own height and be scrollable. - css: css` - display: flex; - flex-direction: column; - flex: 1 0 auto; - width: 100%; - height: 100%; - `, + className: 'pageSectionContent', }, }} > From acb7892ec46b11ae90bd45f1b6df608a6bffaa82 Mon Sep 17 00:00:00 2001 From: Jenny Date: Mon, 19 Sep 2022 11:18:04 +0200 Subject: [PATCH 2/2] Use emotion css instead of scss --- x-pack/plugins/infra/public/index.scss | 9 --------- .../infra/public/page_template.styles.ts | 18 ++++++++++++++++++ .../public/pages/logs/stream/page_content.tsx | 3 ++- .../infra/public/pages/metrics/hosts/index.tsx | 3 ++- .../pages/metrics/inventory_view/index.tsx | 3 ++- 5 files changed, 24 insertions(+), 12 deletions(-) create mode 100644 x-pack/plugins/infra/public/page_template.styles.ts diff --git a/x-pack/plugins/infra/public/index.scss b/x-pack/plugins/infra/public/index.scss index aca7942b897f3..e69de29bb2d1d 100644 --- a/x-pack/plugins/infra/public/index.scss +++ b/x-pack/plugins/infra/public/index.scss @@ -1,9 +0,0 @@ -// This is added to facilitate a full height layout whereby the -// inner container will set its own height and be scrollable. -.pageSectionContent { - display: flex; - flex-direction: column; - flex: 1 0 auto; - width: 100%; - height: 100%; -} diff --git a/x-pack/plugins/infra/public/page_template.styles.ts b/x-pack/plugins/infra/public/page_template.styles.ts new file mode 100644 index 0000000000000..97fb7fcc46afb --- /dev/null +++ b/x-pack/plugins/infra/public/page_template.styles.ts @@ -0,0 +1,18 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { css } from '@emotion/react'; + +// This is added `EuiPageSection.contentProps` to facilitate a full height layout whereby the +// inner container will set its own height and be scrollable. +export const fullHeightContentStyles = css` + display: flex; + flex-direction: column; + flex: 1 0 auto; + width: 100%; + height: 100%; +`; diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx index e314c99834d8c..23c3b8ab8838a 100644 --- a/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx +++ b/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx @@ -13,6 +13,7 @@ import { SourceLoadingPage } from '../../../components/source_loading_page'; import { useLogViewContext } from '../../../hooks/use_log_view'; import { LogsPageTemplate } from '../page_template'; import { LogsPageLogsContent } from './page_logs_content'; +import { fullHeightContentStyles } from '../../../page_template.styles'; const streamTitle = i18n.translate('xpack.infra.logs.streamPageTitle', { defaultMessage: 'Stream', @@ -43,7 +44,7 @@ export const StreamPageContent: React.FunctionComponent = () => { }} pageSectionProps={{ contentProps: { - className: 'pageSectionContent', + css: fullHeightContentStyles, }, }} > diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx index bbe89130cf70f..5c2fed9753b80 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx @@ -21,6 +21,7 @@ import { MetricsPageTemplate } from '../page_template'; import { hostsTitle } from '../../../translations'; import { HostsContent } from './hosts_content'; import { MetricsDataViewProvider } from './hooks/use_data_view'; +import { fullHeightContentStyles } from '../../../page_template.styles'; export const HostsPage = () => { const { @@ -63,7 +64,7 @@ export const HostsPage = () => { }} pageSectionProps={{ contentProps: { - className: 'pageSectionContent', + css: fullHeightContentStyles, }, }} > diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx index a79b883f71542..8031af55828c4 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx @@ -26,6 +26,7 @@ import { MetricsPageTemplate } from '../page_template'; import { inventoryTitle } from '../../../translations'; import { SavedViews } from './components/saved_views'; import { SnapshotContainer } from './components/snapshot_container'; +import { fullHeightContentStyles } from '../../../page_template.styles'; export const SnapshotPage = () => { const { @@ -76,7 +77,7 @@ export const SnapshotPage = () => { }} pageSectionProps={{ contentProps: { - className: 'pageSectionContent', + css: fullHeightContentStyles, }, }} >