[Exploratory View] Audit new EUI Borealis theme (#205212)

## Summary It fixes #205051 <del> 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 </del> ✅ DONE
elastic · Jan 15, 2025 · b0973cf · b0973cf
1 parent dcc09d4
commit b0973cf
Show file tree

Hide file tree

Showing 24 changed files with 141 additions and 153 deletions.
diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js
diff --git a/...ck/solutions/observability/plugins/exploratory_view/e2e/journeys/step_duration.journey.ts b/...ck/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
@@ -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 = ({
             }}
           >
             <Router history={history}>
-              <EuiThemeProvider darkMode={isDarkMode}>
-                <div className={APP_WRAPPER_CLASS} data-test-subj="exploratoryViewMainContainer">
-                  <RedirectAppLinks
-                    coreStart={{
-                      application: core.application,
-                    }}
-                  >
-                    <App startServices={core} />
-                  </RedirectAppLinks>
-                </div>
-              </EuiThemeProvider>
+              <div className={APP_WRAPPER_CLASS} data-test-subj="exploratoryViewMainContainer">
+                <RedirectAppLinks
+                  coreStart={{
+                    application: core.application,
+                  }}
+                >
+                  <App startServices={core} />
+                </RedirectAppLinks>
+              </div>
             </Router>
           </PluginContext.Provider>
         </KibanaContextProvider>

diff --git a/...gins/exploratory_view/public/components/shared/exploratory_view/components/empty_view.tsx b/...gins/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/...oratory_view/public/components/shared/exploratory_view/components/series_color_picker.tsx b/...oratory_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<string, string>)[`euiColorVis${seriesId}`];
+    series.color ??
+    (euiTheme.colors.vis as unknown as Record<string, string>)[`euiColorVis${seriesId}`];
 
   const button = (
     <EuiToolTip content={EDIT_SERIES_COLOR_LABEL}>

diff --git a/...public/components/shared/exploratory_view/configurations/mobile/mobile_kpi_config.test.ts b/...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/...gins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx b/...gins/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/...y/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx b/...y/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<string, DataView> = {};
 
@@ -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 (
       <EuiErrorBoundary>
-        <EuiThemeProvider darkMode={isDarkMode}>
-          <KibanaContextProvider services={services}>
-            <Wrapper customHeight={props.customHeight} data-test-subj={props.dataTestSubj}>
-              <ExploratoryViewEmbeddable
-                {...embedProps}
-                dataViewState={dataViews}
-                lens={lens}
-                lensFormulaHelper={lensHelper?.formula}
-                searchSessionId={services.data.search.session.getSessionId()}
-                onLoad={onLensLoaded}
-                analytics={analytics}
-              />
-            </Wrapper>
-          </KibanaContextProvider>
-        </EuiThemeProvider>
+        <KibanaContextProvider services={services}>
+          <Wrapper customHeight={props.customHeight} data-test-subj={props.dataTestSubj}>
+            <ExploratoryViewEmbeddable
+              {...embedProps}
+              dataViewState={dataViews}
+              lens={lens}
+              lensFormulaHelper={lensHelper?.formula}
+              searchSessionId={services.data.search.session.getSessionId()}
+              onLoad={onLensLoaded}
+              analytics={analytics}
+            />
+          </Wrapper>
+        </KibanaContextProvider>
       </EuiErrorBoundary>
     );
   };

diff --git a/...ry_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts b/...ry_view/public/components/shared/exploratory_view/embeddable/use_embeddable_attributes.ts
@@ -6,15 +6,15 @@
  */
 
 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';
 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/...y/plugins/exploratory_view/public/components/shared/exploratory_view/exploratory_view.tsx b/...y/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/...lugins/exploratory_view/public/components/shared/exploratory_view/header/last_updated.tsx b/...lugins/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 (
-    <EuiText color={isDanger ? 'danger' : isWarning ? 'warning' : 'subdued'} size="s">
-      <StyledToolTipWrapper
-        as={EuiToolTip}
-        position="top"
-        content={<ChartCreationInfo {...chartTimeRange} />}
-      >
-        <EuiIcon type="iInCircle" />
-      </StyledToolTipWrapper>{' '}
-      <FormattedMessage
-        id="xpack.exploratoryView.expView.lastUpdated.label"
-        defaultMessage="Last Updated: {updatedDate}"
-        values={{
-          updatedDate: moment(lastUpdated).from(refresh),
-        }}
-      />
-    </EuiText>
+    <EuiFlexGroup alignItems="center" gutterSize="m">
+      <EuiFlexItem grow={false}>
+        <EuiToolTip position="top" content={<ChartCreationInfo {...chartTimeRangeContext} />}>
+          <EuiIcon type="iInCircle" />
+        </EuiToolTip>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiText color={isDanger ? 'danger' : isWarning ? 'warning' : 'subdued'} size="s">
+          <FormattedMessage
+            id="xpack.exploratoryView.expView.lastUpdated.label"
+            defaultMessage="Last Updated: {updatedDate}"
+            values={{
+              updatedDate: moment(lastUpdated).from(refresh),
+            }}
+          />
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }
-
-export const StyledToolTipWrapper = styled.div`
-  min-width: 30vw;
-`;
diff --git a/...gins/exploratory_view/public/components/shared/exploratory_view/header/refresh_button.tsx b/...gins/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 (
-    <EuiFlexGroup alignItems="center" gutterSize="m">
-      <EuiFlexItem style={{ textAlign: 'right', minWidth: 280 }}>
-        <LastUpdated chartTimeRange={chartTimeRangeContext} />
-      </EuiFlexItem>
-      <EuiFlexItem style={{ textAlign: 'right' }}>
-        <EuiButton
-          data-test-subj="o11yRefreshButtonButton"
-          iconType="refresh"
-          onClick={() => setLastRefresh(Date.now())}
-        >
-          {REFRESH_LABEL}
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <EuiButton
+      data-test-subj="o11yRefreshButtonButton"
+      iconType="refresh"
+      onClick={() => setLastRefresh(Date.now())}
+    >
+      {REFRESH_LABEL}
+    </EuiButton>
   );
 }