From b0973cf26cfa50a3e9c0e6bdfa2a7f5eb5a50142 Mon Sep 17 00:00:00 2001 From: Faisal Kanout Date: Wed, 15 Jan 2025 17:53:49 +0300 Subject: [PATCH] [Exploratory View] Audit new EUI Borealis theme (#205212) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary It fixes #205051 Files are excluded because of `euiScrollBar` and `euiScrollBarCorner` replacement (TBD) - x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series_editor.tsx - x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/filter_values_list.tsx ✅ DONE --- .../styled_components_files.js | 11 ---- .../e2e/journeys/step_duration.journey.ts | 13 +++-- .../public/application/index.tsx | 22 ++++---- .../components/empty_view.tsx | 2 +- .../components/series_color_picker.tsx | 7 +-- .../mobile/mobile_kpi_config.test.ts | 18 ++++++- .../embeddable/embeddable.tsx | 2 +- .../exploratory_view/embeddable/index.tsx | 35 ++++++------- .../embeddable/use_embeddable_attributes.ts | 10 ++-- .../exploratory_view/exploratory_view.tsx | 2 +- .../exploratory_view/header/last_updated.tsx | 50 +++++++++---------- .../header/refresh_button.tsx | 26 ++++------ .../hooks/use_lens_attributes.ts | 16 +++--- .../shared/exploratory_view/index.tsx | 3 +- .../exploratory_view/lens_embeddable.tsx | 2 +- .../shared/exploratory_view/rtl_helpers.tsx | 4 +- .../series_editor/breakdown/breakdowns.tsx | 2 +- .../series_editor/columns/date_picker_col.tsx | 2 +- .../columns/filter_value_btn.test.tsx | 2 +- .../columns/filter_value_btn.tsx | 22 ++++---- .../series_editor/columns/series_name.tsx | 2 +- .../components/filter_values_list.tsx | 13 +++-- .../exploratory_view/series_editor/series.tsx | 2 +- .../series_editor/series_editor.tsx | 26 +++++----- 24 files changed, 141 insertions(+), 153 deletions(-) diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js index c4b7225147cf1..bbf09cf7a9892 100644 --- a/packages/kbn-babel-preset/styled_components_files.js +++ b/packages/kbn-babel-preset/styled_components_files.js @@ -101,17 +101,6 @@ module.exports = { /x-pack[\/\\]platform[\/\\]plugins[\/\\]shared[\/\\]fleet[\/\\]public[\/\\]components[\/\\]package_icon.tsx/, /x-pack[\/\\]platform[\/\\]plugins[\/\\]shared[\/\\]fleet[\/\\]public[\/\\]layouts[\/\\]without_header.tsx/, /x-pack[\/\\]platform[\/\\]plugins[\/\\]shared[\/\\]triggers_actions_ui[\/\\]public[\/\\]application[\/\\]sections[\/\\]actions_connectors_list[\/\\]components[\/\\]actions_connectors_list.test.tsx/, - /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]components[\/\\]empty_view.tsx/, - /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]embeddable[\/\\]embeddable.tsx/, - /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]embeddable[\/\\]index.tsx/, - /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]exploratory_view.tsx/, - /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]header[\/\\]last_updated.tsx/, - /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]lens_embeddable.tsx/, - /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]series_editor[\/\\]breakdown[\/\\]breakdowns.tsx/, - /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]series_editor[\/\\]columns[\/\\]date_picker_col.tsx/, - /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]series_editor[\/\\]columns[\/\\]series_name.tsx/, - /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]series_editor[\/\\]components[\/\\]filter_values_list.tsx/, - /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]exploratory_view[\/\\]public[\/\\]components[\/\\]shared[\/\\]exploratory_view[\/\\]series_editor[\/\\]series.tsx/, /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]observability[\/\\]public[\/\\]pages[\/\\]overview[\/\\]components[\/\\]news_feed[\/\\]news_feed.tsx/, /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]observability[\/\\]public[\/\\]pages[\/\\]overview[\/\\]components[\/\\]sections[\/\\]apm[\/\\]apm_section.tsx/, /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]observability[\/\\]public[\/\\]pages[\/\\]overview[\/\\]components[\/\\]sections[\/\\]empty[\/\\]empty_sections.tsx/, diff --git a/x-pack/solutions/observability/plugins/exploratory_view/e2e/journeys/step_duration.journey.ts b/x-pack/solutions/observability/plugins/exploratory_view/e2e/journeys/step_duration.journey.ts index 861f4036b9ec0..a0ff1a5e3cde6 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/e2e/journeys/step_duration.journey.ts +++ b/x-pack/solutions/observability/plugins/exploratory_view/e2e/journeys/step_duration.journey.ts @@ -67,13 +67,12 @@ journey('Step Duration series', async ({ page, params }) => { step('Verify that changes are applied', async () => { await waitForLoadingToFinish({ page }); - - await page.click('[aria-label="series color: #54b399"]'); - await page.click('[aria-label="series color: #6092c0"]'); - await page.click('[aria-label="series color: #d36086"] path'); - await page.click('[aria-label="series color: #9170b8"]'); - await page.click('[aria-label="series color: #ca8eae"]'); - await page.click('[aria-label="series color: #d6bf57"]'); + await page.click('svg[aria-label="series color: #16c5c0"]'); + await page.click('svg[aria-label="series color: #a6edea"]'); + await page.click('svg[aria-label="series color: #61a2ff"]'); + await page.click('svg[aria-label="series color: #bfdbff"]'); + await page.click('svg[aria-label="series color: #ee72a6"]'); + await page.click('svg[aria-label="series color: #ffc7db"]'); await page.click('text=load homepage'); await page.click('text=load homepage'); await page.click('text=load github'); diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/application/index.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/application/index.tsx index cda4cda9d8618..e35f61c01c2b1 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/application/index.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/application/index.tsx @@ -10,7 +10,6 @@ import ReactDOM from 'react-dom'; import { i18n } from '@kbn/i18n'; import { Router, Routes, Route } from '@kbn/shared-ux-router'; import { AppMountParameters, APP_WRAPPER_CLASS, CoreStart } from '@kbn/core/public'; -import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app'; @@ -53,7 +52,6 @@ export const renderApp = ({ isDev?: boolean; }) => { const { element, history } = appMountParameters; - const isDarkMode = core.theme.getTheme().darkMode; core.chrome.setHelpExtension({ appName: i18n.translate('xpack.exploratoryView.feedbackMenu.appName', { @@ -85,17 +83,15 @@ export const renderApp = ({ }} > - -
- - - -
- +
+ + + +
diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/components/empty_view.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/components/empty_view.tsx index cf4d3dc1e6e15..3f198f99a7872 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/components/empty_view.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/components/empty_view.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { isEmpty } from 'lodash'; import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { i18n } from '@kbn/i18n'; import { LOADING_VIEW } from '../series_editor/series_editor'; import { ReportViewType, SeriesUrl } from '../types'; diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/components/series_color_picker.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/components/series_color_picker.tsx index 35f839b3ec2e6..aa0e13c8e7be8 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/components/series_color_picker.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/components/series_color_picker.tsx @@ -15,12 +15,12 @@ import { EuiButtonEmpty, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { useTheme } from '@kbn/observability-shared-plugin/public'; +import { useEuiTheme } from '@elastic/eui'; import { useSeriesStorage } from '../hooks/use_series_storage'; import { SeriesUrl } from '../types'; export function SeriesColorPicker({ seriesId, series }: { seriesId: number; series: SeriesUrl }) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const { setSeries } = useSeriesStorage(); @@ -31,7 +31,8 @@ export function SeriesColorPicker({ seriesId, series }: { seriesId: number; seri }; const color = - series.color ?? (theme.eui as unknown as Record)[`euiColorVis${seriesId}`]; + series.color ?? + (euiTheme.colors.vis as unknown as Record)[`euiColorVis${seriesId}`]; const button = ( diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/configurations/mobile/mobile_kpi_config.test.ts b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/configurations/mobile/mobile_kpi_config.test.ts index bd98f202b4be9..d159e81884aad 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/configurations/mobile/mobile_kpi_config.test.ts +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/configurations/mobile/mobile_kpi_config.test.ts @@ -13,6 +13,7 @@ import { testMobileKPIAttr } from '../test_data/mobile_test_attribute'; import { getLayerConfigs } from '../../hooks/use_lens_attributes'; import { DataViewState } from '../../hooks/use_app_data_view'; import { ReportTypes } from '../../../../..'; +import { EuiThemeComputed } from '@elastic/eui'; describe('Mobile kpi config test', function () { mockAppDataView(); @@ -31,7 +32,22 @@ describe('Mobile kpi config test', function () { }, ], ReportTypes.KPI, - {} as any, + { + colors: { + vis: { + euiColorVis0: '#54B399', + euiColorVis1: '#54B399', + euiColorVis2: '#54B399', + euiColorVis3: '#54B399', + euiColorVis4: '#54B399', + euiColorVis5: '#54B399', + euiColorVis6: '#54B399', + euiColorVis7: '#54B399', + euiColorVis8: '#54B399', + euiColorVis9: '#54B399', + }, + }, + } as unknown as EuiThemeComputed, { mobile: mockDataView } as DataViewState, obsvReportConfigMap ); diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx index 1b3028a0283ed..a7331e32d613d 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx @@ -17,7 +17,7 @@ import { } from '@kbn/lens-plugin/public'; import { ViewMode } from '@kbn/embeddable-plugin/common'; import { observabilityFeatureId } from '@kbn/observability-shared-plugin/public'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { AnalyticsServiceSetup } from '@kbn/core-analytics-browser'; import { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types'; import { useEBTTelemetry } from '../hooks/use_ebt_telemetry'; diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx index f67c48bb4e0c2..a4eb35f034d38 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx @@ -7,11 +7,10 @@ import React, { useCallback, useMemo, useState, useEffect } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui'; -import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import type { AnalyticsServiceSetup, CoreStart } from '@kbn/core/public'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { EuiErrorBoundary } from '@elastic/eui'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { DataView } from '@kbn/data-views-plugin/common'; import { FormulaPublicApi } from '@kbn/lens-plugin/public'; import { i18n } from '@kbn/i18n'; @@ -34,7 +33,7 @@ export function getExploratoryViewEmbeddable( services: CoreStart & ExploratoryViewPublicPluginsStart, analytics?: AnalyticsServiceSetup ) { - const { lens, dataViews: dataViewsService, theme } = services; + const { lens, dataViews: dataViewsService } = services; const dataViewCache: Record = {}; @@ -71,8 +70,6 @@ export function getExploratoryViewEmbeddable( const series = attributes[0]; - const isDarkMode = theme?.getTheme().darkMode ?? false; - const { data: lensHelper, loading: lensLoading } = useFetcher(async () => { if (lenStateHelperPromise) { return lenStateHelperPromise; @@ -132,21 +129,19 @@ export function getExploratoryViewEmbeddable( return ( - - - - - - - + + + + + ); }; diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts index f1124d2a32a30..78ab0cc75c8c9 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts @@ -6,7 +6,8 @@ */ import { useMemo } from 'react'; -import { useKibanaSpace, useTheme } from '@kbn/observability-shared-plugin/public'; +import { useKibanaSpace } from '@kbn/observability-shared-plugin/public'; +import { useEuiTheme } from '@elastic/eui'; import { ExploratoryEmbeddableComponentProps } from './embeddable'; import { LayerConfig, LensAttributes } from '../configurations/lens_attributes'; import { getLayerConfigs } from '../hooks/use_lens_attributes'; @@ -14,7 +15,6 @@ import { obsvReportConfigMap } from '../obsv_exploratory_view'; import { ReportTypes } from '../../../..'; import { SingleMetricLensAttributes } from '../configurations/lens_attributes/single_metric_attributes'; import { HeatMapLensAttributes } from '../configurations/lens_attributes/heatmap_attributes'; - export const useEmbeddableAttributes = ({ attributes, dataViewState, @@ -24,14 +24,14 @@ export const useEmbeddableAttributes = ({ dslFilters, }: ExploratoryEmbeddableComponentProps) => { const spaceId = useKibanaSpace(); - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); return useMemo(() => { try { const layerConfigs: LayerConfig[] = getLayerConfigs( attributes, reportType, - theme, + euiTheme, dataViewState, { ...reportConfigMap, ...obsvReportConfigMap }, spaceId.space?.id @@ -68,10 +68,10 @@ export const useEmbeddableAttributes = ({ attributes, dataViewState, dslFilters, + euiTheme, lensFormulaHelper, reportConfigMap, reportType, spaceId.space?.id, - theme, ]); }; diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/exploratory_view.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/exploratory_view.tsx index 9b5fadb9c1bf8..8db137c94839f 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/exploratory_view.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/exploratory_view.tsx @@ -7,7 +7,7 @@ import { i18n } from '@kbn/i18n'; import React, { useEffect, useRef, useState } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { EuiButtonEmpty, EuiResizableContainer, diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/last_updated.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/last_updated.tsx index f3d8f4cfdec00..2afaae87d9abd 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/last_updated.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/last_updated.tsx @@ -7,9 +7,9 @@ import React, { useEffect, useState } from 'react'; import moment from 'moment'; -import styled from 'styled-components'; -import { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; +import { useSeriesStorage } from '../hooks/use_series_storage'; import { ChartCreationInfo } from './chart_creation_info'; export interface ChartTimeRange { @@ -18,12 +18,10 @@ export interface ChartTimeRange { from?: number; } -interface Props { - chartTimeRange?: ChartTimeRange; -} +export function LastUpdated() { + const { chartTimeRangeContext } = useSeriesStorage(); -export function LastUpdated({ chartTimeRange }: Props) { - const { lastUpdated } = chartTimeRange || {}; + const { lastUpdated } = chartTimeRangeContext || {}; const [refresh, setRefresh] = useState(() => Date.now()); useEffect(() => { @@ -48,25 +46,23 @@ export function LastUpdated({ chartTimeRange }: Props) { const isDanger = moment().diff(moment(lastUpdated), 'minute') > 10; return ( - - } - > - - {' '} - - + + + }> + + + + + + + + + ); } - -export const StyledToolTipWrapper = styled.div` - min-width: 30vw; -`; diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/refresh_button.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/refresh_button.tsx index de2828af096fd..aa2188448a093 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/refresh_button.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/refresh_button.tsx @@ -7,28 +7,20 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import { LastUpdated } from './last_updated'; +import { EuiButton } from '@elastic/eui'; import { useSeriesStorage } from '../hooks/use_series_storage'; export function RefreshButton() { - const { setLastRefresh, chartTimeRangeContext } = useSeriesStorage(); + const { setLastRefresh } = useSeriesStorage(); return ( - - - - - - setLastRefresh(Date.now())} - > - {REFRESH_LABEL} - - - + setLastRefresh(Date.now())} + > + {REFRESH_LABEL} + ); } diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/hooks/use_lens_attributes.ts b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/hooks/use_lens_attributes.ts index 5d785bdd682e4..f710bf18c8a58 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/hooks/use_lens_attributes.ts +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/hooks/use_lens_attributes.ts @@ -8,8 +8,8 @@ import { useMemo } from 'react'; import { isEmpty } from 'lodash'; import { TypedLensByValueInput } from '@kbn/lens-plugin/public'; -import { EuiTheme } from '@kbn/kibana-react-plugin/common'; -import { useTheme, useKibanaSpace } from '@kbn/observability-shared-plugin/public'; +import { useKibanaSpace } from '@kbn/observability-shared-plugin/public'; +import { EuiThemeComputed, useEuiTheme } from '@elastic/eui'; import { HeatMapLensAttributes } from '../configurations/lens_attributes/heatmap_attributes'; import { useLensFormulaHelper } from './use_lens_formula_helper'; import { ALL_VALUES_SELECTED } from '../configurations/constants/url_constants'; @@ -44,7 +44,7 @@ export const getFiltersFromDefs = ( export function getLayerConfigs( allSeries: AllSeries, reportType: ReportViewType, - theme: EuiTheme, + euiTheme: EuiThemeComputed, dataViews: DataViewState, reportConfigMap: ReportConfigMap, spaceId?: string @@ -73,7 +73,9 @@ export function getLayerConfigs( getFiltersFromDefs(series.textReportDefinitions) ); - const color = (theme.eui as unknown as Record)?.[`euiColorVis${seriesIndex}`]; + const color = (euiTheme.colors.vis as unknown as Record)?.[ + `euiColorVis${seriesIndex}` + ]; let seriesColor = series.color!; if (reportType !== 'single-metric') { seriesColor = series.color ?? color; @@ -108,7 +110,7 @@ export const useLensAttributes = (): TypedLensByValueInput['attributes'] | null const { reportConfigMap } = useExploratoryView(); - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const lensFormulaHelper = useLensFormulaHelper(); @@ -123,7 +125,7 @@ export const useLensAttributes = (): TypedLensByValueInput['attributes'] | null const layerConfigs = getLayerConfigs( allSeriesT, reportTypeT, - theme, + euiTheme, dataViews, reportConfigMap, spaceId.space?.id @@ -158,5 +160,5 @@ export const useLensAttributes = (): TypedLensByValueInput['attributes'] | null return lensAttributes.getJSON('lnsXY', lastRefresh); // we also want to check the state on allSeries changes // eslint-disable-next-line react-hooks/exhaustive-deps - }, [dataViews, reportType, storage, theme, lastRefresh, allSeries, lensFormulaHelper]); + }, [dataViews, reportType, storage, euiTheme, lastRefresh, allSeries, lensFormulaHelper]); }; diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/index.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/index.tsx index 750429602aecf..e30520cbfe011 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/index.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/index.tsx @@ -16,6 +16,7 @@ import { } from '@kbn/kibana-utils-plugin/public'; import { TypedLensByValueInput } from '@kbn/lens-plugin/public'; import { useBreadcrumbs, useTrackPageview } from '@kbn/observability-shared-plugin/public'; +import { LastUpdated } from './header/last_updated'; import { ExploratoryView } from './exploratory_view'; import { useKibana } from './hooks/use_kibana'; import { DataViewContextProvider } from './hooks/use_app_data_view'; @@ -76,7 +77,7 @@ export function ExploratoryViewPage({ ], + rightSideItems: [, ], }} > diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/lens_embeddable.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/lens_embeddable.tsx index 6512e2b190d78..c6b0affe09765 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/lens_embeddable.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/lens_embeddable.tsx @@ -7,7 +7,7 @@ import { i18n } from '@kbn/i18n'; import React, { Dispatch, SetStateAction, useCallback, useState } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { LensEmbeddableInput, TypedLensByValueInput } from '@kbn/lens-plugin/public'; import { useUiTracker } from '@kbn/observability-shared-plugin/public'; import { useSeriesStorage } from './hooks/use_series_storage'; diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/rtl_helpers.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/rtl_helpers.tsx index 336c6eae6badb..03e88ea294a35 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/rtl_helpers.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/rtl_helpers.tsx @@ -20,7 +20,7 @@ import { CoreStart } from '@kbn/core/public'; import { I18nProvider } from '@kbn/i18n-react'; import { coreMock, themeServiceMock } from '@kbn/core/public/mocks'; import { KibanaContextProvider, KibanaServices } from '@kbn/kibana-react-plugin/public'; -import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; +import { EuiThemeProvider } from '@elastic/eui'; import { lensPluginMock } from '@kbn/lens-plugin/public/mocks'; import { setIndexPatterns } from '@kbn/unified-search-plugin/public/services'; import type { DataView, DataViewsContract } from '@kbn/data-views-plugin/public'; @@ -159,7 +159,7 @@ export function MockKibanaProvider>({ return ( - + {children} diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/breakdown/breakdowns.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/breakdown/breakdowns.tsx index f654870499742..0a0b2847af279 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/breakdown/breakdowns.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/breakdown/breakdowns.tsx @@ -6,7 +6,7 @@ */ import React, { useEffect } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { EuiSuperSelect, EuiToolTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { useSeriesStorage } from '../../hooks/use_series_storage'; diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/date_picker_col.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/date_picker_col.tsx index 29e06150f8a8a..4ba38171e90e1 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/date_picker_col.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/date_picker_col.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { i18n } from '@kbn/i18n'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { useSeriesStorage } from '../../hooks/use_series_storage'; diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_value_btn.test.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_value_btn.test.tsx index 2532d48a3d036..23adef3fc4b50 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_value_btn.test.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_value_btn.test.tsx @@ -51,7 +51,7 @@ describe('FilterValueButton', function () { expect(screen.getByText('Not Chrome')).toBeInTheDocument(); expect(screen.getByTitle('Not Chrome')).toBeInTheDocument(); const btn = screen.getByRole('button'); - expect(btn.classList[4]).toContain('empty-danger'); + expect(btn.classList[2]).toContain('empty-danger'); }); }); diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_value_btn.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_value_btn.tsx index 8ab4f791f785e..75da0926440ac 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_value_btn.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_value_btn.tsx @@ -7,7 +7,7 @@ import { i18n } from '@kbn/i18n'; import React, { useMemo } from 'react'; import { EuiFilterButton, hexToRgb } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { FieldValueSuggestions } from '@kbn/observability-shared-plugin/public'; import { useAppDataViewContext } from '../../hooks/use_app_data_view'; import { useSeriesFilters } from '../../hooks/use_series_filters'; @@ -112,13 +112,15 @@ export function FilterValueButton({ ); } -const FilterButton = euiStyled(EuiFilterButton)` - background-color: rgba(${(props) => { - const color = props.hasActiveFilters - ? props.color === 'danger' - ? hexToRgb(props.theme.eui.euiColorDanger) - : hexToRgb(props.theme.eui.euiColorPrimary) - : 'initial'; - return `${color[0]}, ${color[1]}, ${color[2]}, 0.1`; - }}); +const FilterButton = styled(EuiFilterButton)` + background-color: rgba( + ${(props) => { + const color = props.hasActiveFilters + ? props.color === 'danger' + ? hexToRgb(props.theme.euiTheme.colors.danger) + : hexToRgb(props.theme.euiTheme.colors.primary) + : 'initial'; + return `${color[0]}, ${color[1]}, ${color[2]}, 0.1`; + }} + ); `; diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx index 1d5c9892c4db1..178dd352d2443 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx @@ -6,7 +6,7 @@ */ import React, { useState, ChangeEvent, useEffect, useRef, KeyboardEventHandler } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { i18n } from '@kbn/i18n'; import { EuiFieldText, diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/filter_values_list.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/filter_values_list.tsx index fbaa7a8ec4787..bc557b73fc62d 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/filter_values_list.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/components/filter_values_list.tsx @@ -8,10 +8,9 @@ import { EuiFieldSearch, EuiFilterGroup, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui'; import React, { Fragment, useState } from 'react'; import { rgba } from 'polished'; -import styled from 'styled-components'; import { map } from 'lodash'; import { i18n } from '@kbn/i18n'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { FilterValueButton } from '../columns/filter_value_btn'; import { FilterProps, NestedFilterOpen } from '../columns/filter_expanded'; import { UrlFilter } from '../../types'; @@ -123,17 +122,17 @@ const getSearchLabel = (label: string) => values: { label }, }); -const ListWrapper = euiStyled.div` +const ListWrapper = styled.div` height: 370px; overflow-y: auto; &::-webkit-scrollbar { - height: ${({ theme }) => theme.eui.euiScrollBar}; - width: ${({ theme }) => theme.eui.euiScrollBar}; + height: ${({ theme }) => theme.euiTheme.size.base}; + width: ${({ theme }) => theme.euiTheme.size.base}; } &::-webkit-scrollbar-thumb { background-clip: content-box; - background-color: ${({ theme }) => rgba(theme.eui.euiColorDarkShade, 0.5)}; - border: ${({ theme }) => theme.eui.euiScrollBarCorner} solid transparent; + background-color: ${({ theme }) => rgba(theme.euiTheme.colors.darkShade, 0.5)}; + border: ${({ theme }) => theme.euiTheme.border.radius.small} solid transparent; } &::-webkit-scrollbar-corner, &::-webkit-scrollbar-track { diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series.tsx index 08810e673a0e6..9aa135abcc529 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series.tsx @@ -6,7 +6,7 @@ */ import React, { useEffect, useState } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { i18n } from '@kbn/i18n'; import { EuiFlexItem, EuiFlexGroup, EuiPanel, EuiAccordion, EuiSpacer } from '@elastic/eui'; import { BuilderItem } from '../types'; diff --git a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series_editor.tsx b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series_editor.tsx index 3a267433e70a3..f59b0823f6815 100644 --- a/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series_editor.tsx +++ b/x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series_editor.tsx @@ -9,7 +9,7 @@ import React, { useEffect, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiSpacer, EuiFormRow, EuiFlexItem, EuiFlexGroup } from '@elastic/eui'; import { rgba } from 'polished'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { AppDataType, ReportViewType, BuilderItem } from '../types'; import { SeriesContextValue, useSeriesStorage } from '../hooks/use_series_storage'; import { DataViewState, useAppDataViewContext } from '../hooks/use_app_data_view'; @@ -160,15 +160,15 @@ export const SeriesEditor = React.memo(function () { ); }); -const Wrapper = euiStyled.div` +const Wrapper = styled.div` &::-webkit-scrollbar { - height: ${({ theme }) => theme.eui.euiScrollBar}; - width: ${({ theme }) => theme.eui.euiScrollBar}; + height: ${({ theme }) => theme.euiTheme.size.base}; + width: ${({ theme }) => theme.euiTheme.size.base}; } &::-webkit-scrollbar-thumb { background-clip: content-box; - background-color: ${({ theme }) => rgba(theme.eui.euiColorDarkShade, 0.5)}; - border: ${({ theme }) => theme.eui.euiScrollBarCorner} solid transparent; + background-color: ${({ theme }) => rgba(theme.euiTheme.colors.darkShade, 0.5)}; + border: ${({ theme }) => theme.euiTheme.border.radius.small} solid transparent; } &::-webkit-scrollbar-corner, &::-webkit-scrollbar-track { @@ -178,7 +178,7 @@ const Wrapper = euiStyled.div` &&& { .euiTableRow-isExpandedRow .euiTableRowCell { border-top: none; - background-color: #FFFFFF; + background-color: #ffffff; border-bottom: 2px solid #d3dae6; border-right: 2px solid rgb(211, 218, 230); border-left: 2px solid rgb(211, 218, 230); @@ -197,26 +197,26 @@ const Wrapper = euiStyled.div` } `; -const SectionHeaderBackground = euiStyled.div` +const SectionHeaderBackground = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 56px; - background-color: ${({ theme }) => theme.eui.euiPageBackgroundColor}; - border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; + background-color: ${({ theme }) => theme.euiTheme.colors.body}; + border-bottom: 1px solid ${({ theme }) => theme.euiTheme.colors.lightShade}; z-index: 90; `; -const StickyFlexGroup = euiStyled(EuiFlexGroup)` +const StickyFlexGroup = styled(EuiFlexGroup)` position: sticky; top: 0; z-index: 100; padding: 0; `; -const EditorRowsWrapper = euiStyled.div` - margin: ${({ theme }) => theme.eui.euiSizeM} 0; +const EditorRowsWrapper = styled.div` + margin: ${({ theme }) => theme.euiTheme.size.m} 0; `; export const LOADING_VIEW = i18n.translate(