[Logs onboarding] replace euiThemeVars usage (#157729)

This Pr is a follow up of [PR#157008](#157008) and [PR#157147](#157147). Changes: 1. Replaced usage of `euiThemeVars` by `useEuiTheme` and `useEuiFontSize`. 2. e2e cloudId following [cloud plugin format](https://github.com/elastic/kibana/tree/main/x-pack/plugins/cloud#cloudid).
elastic · May 15, 2023 · 37d9db0 · 37d9db0
1 parent 23682d2
commit 37d9db0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/x-pack/plugins/observability_onboarding/e2e/ftr_kibana.yml b/x-pack/plugins/observability_onboarding/e2e/ftr_kibana.yml
@@ -1,3 +1,3 @@
 xpack.observability_onboarding.ui.enabled: true
 
-xpack.cloud.id: 'foo'
+xpack.cloud.id: 'myDeployment:03ce773830e104e139243c8f053c974d'
diff --git a/...gins/observability_onboarding/public/components/app/custom_logs/wizard/configure_logs.tsx b/...gins/observability_onboarding/public/components/app/custom_logs/wizard/configure_logs.tsx
@@ -20,10 +20,11 @@ import {
   EuiSpacer,
   EuiText,
   EuiTextArea,
+  useEuiFontSize,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React, { useState } from 'react';
 import { useWizard } from '.';
 import { OptionalFormRow } from '../../../shared/optional_form_row';
@@ -35,6 +36,9 @@ import {
 import { getFilename, replaceSpecialChars } from './get_filename';
 
 export function ConfigureLogs() {
+  const { euiTheme } = useEuiTheme();
+  const xsFontSize = useEuiFontSize('xs').fontSize;
+
   const { goToStep, goBack, getState, setState } = useWizard();
   const wizardState = getState();
   const [datasetName, setDatasetName] = useState(wizardState.datasetName);
@@ -196,13 +200,13 @@ export function ConfigureLogs() {
                 id="advancedSettingsAccordion"
                 css={{
                   '.euiAccordion__buttonContent': {
-                    color: euiThemeVars.euiColorPrimaryText,
-                    fontSize: euiThemeVars.euiFontSizeXS,
+                    color: euiTheme.colors.primaryText,
+                    fontSize: xsFontSize,
                   },
                   '.euiAccordion__iconButton svg': {
-                    stroke: euiThemeVars.euiButtonTypes.primary,
-                    width: euiThemeVars.euiSizeM,
-                    height: euiThemeVars.euiSizeM,
+                    stroke: euiTheme.colors.primary,
+                    width: euiTheme.size.m,
+                    height: euiTheme.size.m,
                   },
                 }}
                 buttonContent={i18n.translate(

diff --git a/x-pack/plugins/observability_onboarding/public/components/shared/optional_form_row.tsx b/x-pack/plugins/observability_onboarding/public/components/shared/optional_form_row.tsx
@@ -10,14 +10,16 @@ import {
   EuiFlexItem,
   EuiFormRow,
   EuiFormRowProps,
+  useEuiTheme,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React from 'react';
 
 type OptionalFormRowProps = EuiFormRowProps;
 
 export function OptionalFormRow(props: OptionalFormRowProps) {
+  const { euiTheme } = useEuiTheme();
+
   const { label, children, helpText } = props;
   return (
     <EuiFormRow
@@ -27,7 +29,7 @@ export function OptionalFormRow(props: OptionalFormRowProps) {
         },
         '.euiFormLabel > .euiFlexGroup > div:last-of-type': {
           fontWeight: 'normal',
-          color: euiThemeVars.euiTextSubduedColor,
+          color: euiTheme.colors.subduedText,
         },
       }}
       label={