From d572f66a841e82cacdf6df63101fd34a19c70f7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopyci=C5=84ski?= Date: Tue, 14 Jan 2025 18:26:38 +0100 Subject: [PATCH] [EUI Visual Refresh][Security Gen AI] Add support for borealis theme (#202393) ## Summary Zrzut ekranu 2025-01-8 o 18 33 20 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../impl/assistant/assistant_body/index.tsx | 18 ++++-- .../impl/assistant/assistant_header/index.tsx | 8 ++- .../assistant_overlay/flyout_navigation.tsx | 16 ++++-- .../impl/assistant/chat_send/index.tsx | 9 +-- .../impl/assistant/index.tsx | 12 ++-- .../selected_prompt_contexts/index.tsx | 20 +++++-- .../prompt_editor/system_prompt/helpers.tsx | 30 +++++----- .../select_system_prompt/index.tsx | 9 +-- .../settings_context_menu.tsx | 6 +- .../connector_selector/index.tsx | 25 +++++---- .../connector_selector_inline.tsx | 6 +- .../index.tsx | 7 ++- .../context_editor_modal/index.tsx | 5 +- .../context_preview.tsx | 6 +- .../stats/allowed_stat/index.tsx | 8 +-- .../stats/anonymized_stat/index.tsx | 8 +-- .../stats/available_stat/index.tsx | 8 +-- .../kbn-elastic-assistant/tsconfig.json | 3 +- .../get_comments/stream/message_text.tsx | 55 +++++++++---------- 19 files changed, 151 insertions(+), 108 deletions(-) diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx index 6fc10341864f3..91d79ccdd5e36 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx @@ -13,9 +13,15 @@ import React, { useMemo, useRef, } from 'react'; -import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui'; +import { + EuiEmptyPrompt, + EuiFlexGroup, + EuiFlexItem, + EuiPanel, + EuiText, + useEuiTheme, +} from '@elastic/eui'; import { HttpSetup } from '@kbn/core-http-browser'; -import { euiThemeVars } from '@kbn/ui-theme'; import { css } from '@emotion/react'; import { PromptResponse } from '@kbn/elastic-assistant-common'; import { AssistantBeacon } from '@kbn/ai-assistant-icon'; @@ -53,6 +59,8 @@ export const AssistantBody: FunctionComponent = ({ isWelcomeSetup, setIsSettingsModalVisible, }) => { + const { euiTheme } = useEuiTheme(); + const isEmptyConversation = useMemo( () => currentConversation?.messages.length === 0, [currentConversation?.messages.length] @@ -64,16 +72,16 @@ export const AssistantBody: FunctionComponent = ({ {i18n.DISCLAIMER} ), - [isEmptyConversation] + [euiTheme, isEmptyConversation] ); // Start Scrolling diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx index 406ef8be16c73..e604fb142073c 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx @@ -14,9 +14,9 @@ import { EuiPanel, EuiToolTip, EuiSkeletonTitle, + useEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { isEmpty } from 'lodash'; import { DataStreamApis } from '../use_data_stream_apis'; import { Conversation } from '../../..'; @@ -79,6 +79,8 @@ export const AssistantHeader: React.FC = ({ isAssistantEnabled, refetchPrompts, }) => { + const { euiTheme } = useEuiTheme(); + const showAnonymizedValuesChecked = useMemo( () => selectedConversation?.replacements != null && @@ -148,8 +150,8 @@ export const AssistantHeader: React.FC = ({ hasShadow={false} paddingSize="m" css={css` - padding-top: ${euiThemeVars.euiSizeS}; - padding-bottom: ${euiThemeVars.euiSizeS}; + padding-top: ${euiTheme.size.s}; + padding-bottom: ${euiTheme.size.s}; `} > diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx index 89518940799ee..180654c3efecc 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx @@ -6,11 +6,17 @@ */ import React, { memo, useCallback, useMemo } from 'react'; -import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiButtonEmpty } from '@elastic/eui'; +import { + EuiPanel, + EuiFlexGroup, + EuiFlexItem, + EuiButtonIcon, + EuiButtonEmpty, + useEuiTheme, +} from '@elastic/eui'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { i18n } from '@kbn/i18n'; -import { euiThemeVars } from '@kbn/ui-theme'; import { NEW_CHAT } from '../conversations/conversation_sidepanel/translations'; export interface FlyoutNavigationProps { @@ -26,7 +32,7 @@ const VerticalSeparator = styled.div` :before { content: ''; height: 100%; - border-left: 1px solid ${euiThemeVars.euiColorLightShade}; + border-left: ${(props) => props.theme.euiTheme.border.thin}; } `; @@ -44,6 +50,8 @@ export const FlyoutNavigation = memo( onConversationCreate, isAssistantEnabled, }) => { + const { euiTheme } = useEuiTheme(); + const onToggle = useCallback( () => setIsExpanded && setIsExpanded(!isExpanded), [isExpanded, setIsExpanded] @@ -84,7 +92,7 @@ export const FlyoutNavigation = memo( paddingSize="s" grow={false} css={css` - border-bottom: 1px solid ${euiThemeVars.euiColorLightShade}; + border-bottom: ${euiTheme.border.thin}; `} > = ({ shouldRefocusPrompt, userPrompt, }) => { + const { euiTheme } = useEuiTheme(); + // For auto-focusing prompt within timeline const promptTextAreaRef = useRef(null); useEffect(() => { @@ -77,8 +78,8 @@ export const ChatSend: React.FC = ({ css={css` right: 0; position: absolute; - margin-right: ${euiThemeVars.euiSizeS}; - margin-bottom: ${euiThemeVars.euiSizeS}; + margin-right: ${euiTheme.size.s}; + margin-bottom: ${euiTheme.size.s}; `} grow={false} > diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/index.tsx index b20122f822164..d37397e97d29b 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/index.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/index.tsx @@ -23,8 +23,8 @@ import { EuiFlyoutFooter, EuiFlyoutHeader, EuiFlyoutBody, + useEuiTheme, } from '@elastic/eui'; -import { euiThemeVars } from '@kbn/ui-theme'; import { createPortal } from 'react-dom'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; @@ -79,6 +79,7 @@ const AssistantComponent: React.FC = ({ setChatHistoryVisible, shouldRefocusPrompt = false, }) => { + const { euiTheme } = useEuiTheme(); const { assistantAvailability: { isAssistantEnabled }, assistantTelemetry, @@ -378,7 +379,7 @@ const AssistantComponent: React.FC = ({ })} // Avoid comments going off the flyout css={css` - padding-bottom: ${euiThemeVars.euiSizeL}; + padding-bottom: ${euiTheme.size.l}; > li > div:nth-child(2) { overflow: hidden; @@ -402,6 +403,7 @@ const AssistantComponent: React.FC = ({ setIsStreaming, currentUserAvatar, currentSystemPrompt?.content, + euiTheme.size.l, selectedPromptContextsCount, ] ); @@ -425,7 +427,7 @@ const AssistantComponent: React.FC = ({ grow={false} css={css` inline-size: ${CONVERSATION_SIDE_PANEL_WIDTH}px; - border-right: 1px solid ${euiThemeVars.euiColorLightShade}; + border-right: ${euiTheme.border.thin}; `} > = ({ = ({ {!isDisabled && ( = ({ setSelectedPromptContexts, currentReplacements, }) => { + const { euiTheme } = useEuiTheme(); + const unselectPromptContext = useCallback( (unselectedId: string) => { setSelectedPromptContexts((prev) => omit(unselectedId, prev)); @@ -65,12 +73,12 @@ const SelectedPromptContextsComponent: React.FC = ({ id={id} paddingSize="s" css={css` - background: ${euiThemeVars.euiPageBackgroundColor}; - border-radius: ${euiThemeVars.euiBorderRadius}; + background: ${euiTheme.colors.backgroundBaseSubdued}; + border-radius: ${euiTheme.border.radius.medium}; > div:first-child { - color: ${euiThemeVars.euiColorPrimary}; - padding: ${euiThemeVars.euiFormControlPadding}; + color: ${euiTheme.colors.textPrimary}; + padding: ${euiTheme.size.m}; } `} borders={'all'} diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx index 7d54d347964e4..60f745149a0e2 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx @@ -5,18 +5,17 @@ * 2.0. */ -import { EuiText, EuiToolTip } from '@elastic/eui'; +import { EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui'; import type { EuiSuperSelectOption } from '@elastic/eui'; import React from 'react'; import styled from '@emotion/styled'; import { isEmpty } from 'lodash/fp'; -import { euiThemeVars } from '@kbn/ui-theme'; import { PromptResponse } from '@kbn/elastic-assistant-common'; import { css } from '@emotion/react'; import { EMPTY_PROMPT } from './translations'; const Strong = styled.strong` - margin-right: ${euiThemeVars.euiSizeS}; + margin-right: ${(props) => props.theme.euiTheme.size.s}; `; interface GetOptionFromPromptProps extends PromptResponse { @@ -25,23 +24,28 @@ interface GetOptionFromPromptProps extends PromptResponse { name: string; } -export const getOptionFromPrompt = ({ - content, - id, - name, -}: GetOptionFromPromptProps): EuiSuperSelectOption => ({ - value: id, - inputDisplay: ( +const InputDisplay = ({ name }: { name: string }) => { + const { euiTheme } = useEuiTheme(); + + return ( {name} - ), + ); +}; + +export const getOptionFromPrompt = ({ + content, + id, + name, +}: GetOptionFromPromptProps): EuiSuperSelectOption => ({ + value: id, + inputDisplay: , dropdownDisplay: ( <> {name} diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx index c567e18a446f4..31c0e5501694c 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx @@ -14,10 +14,10 @@ import { EuiFormRow, EuiSuperSelect, EuiToolTip, + useEuiTheme, } from '@elastic/eui'; import React, { useCallback, useMemo, useState } from 'react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { PromptResponse, PromptTypeEnum, @@ -56,6 +56,7 @@ const SelectSystemPromptComponent: React.FC = ({ selectedPrompt, setIsSettingsModalVisible, }) => { + const { euiTheme } = useEuiTheme(); const { setSelectedSettingsTab } = useAssistantContext(); const allSystemPrompts = useMemo( () => allPrompts.filter((p) => p.promptType === PromptTypeEnum.system), @@ -128,7 +129,7 @@ const SelectSystemPromptComponent: React.FC = ({ = ({ inline-size: 16px; block-size: 16px; border-radius: 16px; - background: ${euiThemeVars.euiColorMediumShade}; + background: ${euiTheme.colors.backgroundBaseSubdued}; :hover:not(:disabled) { - background: ${euiThemeVars.euiColorMediumShade}; + background: ${euiTheme.colors.backgroundBaseSubdued}; transform: none; } diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx index 7b55e994b47ad..f3bd4e372658c 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/settings/settings_context_menu/settings_context_menu.tsx @@ -15,9 +15,9 @@ import { EuiNotificationBadge, EuiPopover, EuiButtonIcon, + useEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { KnowledgeBaseTour } from '../../../tour/knowledge_base'; import { AnonymizationSettingsManagement } from '../../../data_anonymization/settings/anonymization_settings_management'; import { useAssistantContext } from '../../../..'; @@ -32,6 +32,7 @@ interface Params { export const SettingsContextMenu: React.FC = React.memo( ({ isDisabled = false, onChatCleared }: Params) => { + const { euiTheme } = useEuiTheme(); const { navigateToApp, knowledgeBase } = useAssistantContext(); const [isPopoverOpen, setPopover] = useState(false); @@ -139,7 +140,7 @@ export const SettingsContextMenu: React.FC = React.memo( icon={'refresh'} data-test-subj={'clear-chat'} css={css` - color: ${euiThemeVars.euiColorDanger}; + color: ${euiTheme.colors.textDanger}; `} > {i18n.RESET_CONVERSATION} @@ -147,6 +148,7 @@ export const SettingsContextMenu: React.FC = React.memo( ], [ + euiTheme.colors.textDanger, handleNavigateToAnonymization, handleNavigateToKnowledgeBase, handleNavigateToSettings, diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx index 2093904ddf698..407aabc1ffd96 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/connectorland/connector_selector/index.tsx @@ -5,14 +5,20 @@ * 2.0. */ -import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSuperSelect, EuiText } from '@elastic/eui'; +import { + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, + EuiSuperSelect, + EuiText, + useEuiTheme, +} from '@elastic/eui'; import { css } from '@emotion/css'; import React, { Suspense, useCallback, useMemo, useState } from 'react'; import { ActionConnector, ActionType } from '@kbn/triggers-actions-ui-plugin/public'; import { OpenAiProviderType } from '@kbn/stack-connectors-plugin/common/openai/constants'; -import { euiThemeVars } from '@kbn/ui-theme'; import { some } from 'lodash'; import type { AttackDiscoveryStats } from '@kbn/elastic-assistant-common'; import { AttackDiscoveryStatusIndicator } from './attack_discovery_status_indicator'; @@ -25,13 +31,6 @@ import { AddConnectorModal } from '../add_connector_modal'; export const ADD_NEW_CONNECTOR = 'ADD_NEW_CONNECTOR'; -const placeholderCss = css` - .euiSuperSelectControl__placeholder { - color: ${euiThemeVars.euiColorPrimary}; - margin-right: ${euiThemeVars.euiSizeXS}; - } -`; - interface Props { isDisabled?: boolean; isOpen?: boolean; @@ -57,6 +56,7 @@ export const ConnectorSelector: React.FC = React.memo( setIsOpen, stats = null, }) => { + const { euiTheme } = useEuiTheme(); const { actionTypeRegistry, http, assistantAvailability, inferenceEnabled } = useAssistantContext(); // Connector Modal State @@ -200,7 +200,12 @@ export const ConnectorSelector: React.FC = React.memo( ) : ( = React.memo( onConnectorSelected, stats = null, }) => { + const { euiTheme } = useEuiTheme(); const [isOpen, setIsOpen] = useState(false); const { assistantAvailability } = useAssistantContext(); const { setApiConfig } = useConversation(); @@ -120,7 +120,7 @@ export const ConnectorSelectorInline: React.FC = React.memo( {displayText} diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management/index.tsx index 3b8758afdd215..48f34eeab29b6 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management/index.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization/settings/anonymization_settings_management/index.tsx @@ -17,10 +17,10 @@ import { EuiPanel, EuiSpacer, EuiText, + useEuiTheme, } from '@elastic/eui'; import React, { useCallback, useState } from 'react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { Stats } from '../../../data_anonymization_editor/stats'; import { ContextEditor } from '../../../data_anonymization_editor/context_editor'; import * as i18n from '../anonymization_settings/translations'; @@ -52,6 +52,7 @@ const AnonymizationSettingsManagementComponent: React.FC = ({ modalMode = false, onClose, }) => { + const { euiTheme } = useEuiTheme(); const { toasts } = useAssistantContext(); const { data: anonymizationFields } = useFetchAnonymizationFields(); const [hasPendingChanges, setHasPendingChanges] = useState(false); @@ -138,7 +139,7 @@ const AnonymizationSettingsManagementComponent: React.FC = ({ isDataAnonymizable={true} anonymizationFields={updatedAnonymizationData.data} titleSize="m" - gap={euiThemeVars.euiSizeS} + gap={euiTheme.size.s} /> @@ -173,7 +174,7 @@ const AnonymizationSettingsManagementComponent: React.FC = ({ isDataAnonymizable={true} anonymizationFields={updatedAnonymizationData.data} titleSize="m" - gap={euiThemeVars.euiSizeS} + gap={euiTheme.size.s} /> diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor_modal/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor_modal/index.tsx index 652f6fd89b315..831aa3d5e8188 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor_modal/index.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor_modal/index.tsx @@ -22,10 +22,10 @@ import { EuiFlexItem, useGeneratedHtmlId, EuiFormRow, + useEuiTheme, } from '@elastic/eui'; import { i18n as I18n } from '@kbn/i18n'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { AnonymizationFieldResponse, PerformAnonymizationFieldsBulkActionRequestBody, @@ -48,6 +48,7 @@ export interface Props { } const SelectedPromptContextEditorModalComponent = ({ onClose, onSave, promptContext }: Props) => { + const { euiTheme } = useEuiTheme(); const { http, toasts } = useAssistantContext(); const [checked, setChecked] = useState(false); const checkboxId = useGeneratedHtmlId({ prefix: 'updateSettingPresetsCheckbox' }); @@ -187,7 +188,7 @@ const SelectedPromptContextEditorModalComponent = ({ onClose, onSave, promptCont diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx index 49d5d0fe4d63d..b315f050607dc 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/context_preview.tsx @@ -10,7 +10,6 @@ import { EuiText } from '@elastic/eui'; import { getAnonymizedValue } from '@kbn/elastic-assistant-common'; import { getAnonymizedData } from '@kbn/elastic-assistant-common/impl/data_anonymization/get_anonymized_data'; import { getAnonymizedValues } from '@kbn/elastic-assistant-common/impl/data_anonymization/get_anonymized_values'; -import { euiThemeVars } from '@kbn/ui-theme'; import { css } from '@emotion/react'; import { AnonymizedData } from '@kbn/elastic-assistant-common/impl/data_anonymization/types'; import styled from '@emotion/styled'; @@ -18,10 +17,11 @@ import { SelectedPromptContext } from '../assistant/prompt_context/types'; const Strong = styled.strong<{ showRealValues: boolean }>` color: ${(props) => - props.showRealValues ? euiThemeVars.euiColorSuccess : euiThemeVars.euiColorAccent}; + props.showRealValues + ? props.theme.euiTheme.colors.textPrimary + : props.theme.euiTheme.colors.textAccent}; cursor: pointer; `; - export interface Props { selectedPromptContext: SelectedPromptContext; showRealValues: boolean; diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/allowed_stat/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/allowed_stat/index.tsx index 9d893cdaa65a2..9ebf4f98f45a5 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/allowed_stat/index.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/allowed_stat/index.tsx @@ -5,10 +5,9 @@ * 2.0. */ -import { EuiStat, EuiToolTip } from '@elastic/eui'; +import { EuiStat, EuiToolTip, useEuiTheme } from '@elastic/eui'; import React, { useMemo } from 'react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { css } from '@emotion/react'; import { TITLE_SIZE } from '../constants'; import * as i18n from './translations'; @@ -26,8 +25,9 @@ const AllowedStatComponent: React.FC = ({ total, inline, titleSize = TITLE_SIZE, - gap = euiThemeVars.euiSizeXS, + gap, }) => { + const { euiTheme } = useEuiTheme(); const tooltipContent = useMemo(() => i18n.ALLOWED_TOOLTIP({ allowed, total }), [allowed, total]); return ( @@ -38,7 +38,7 @@ const AllowedStatComponent: React.FC = ({ ? css` display: flex; align-items: center; - gap: ${gap}; + gap: ${gap || euiTheme.size.xs}; ` : null } diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/anonymized_stat/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/anonymized_stat/index.tsx index 74b3e631b7117..e07892d5fe14c 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/anonymized_stat/index.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/anonymized_stat/index.tsx @@ -5,11 +5,10 @@ * 2.0. */ -import { EuiStat, EuiText, EuiToolTip } from '@elastic/eui'; +import { EuiStat, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui'; import React, { useMemo } from 'react'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { getColor, getTooltipContent } from './helpers'; import { TITLE_SIZE } from '../constants'; import * as i18n from './translations'; @@ -27,8 +26,9 @@ const AnonymizedStatComponent: React.FC = ({ isDataAnonymizable, inline, titleSize = TITLE_SIZE, - gap = euiThemeVars.euiSizeXS, + gap, }) => { + const { euiTheme } = useEuiTheme(); const color = useMemo(() => getColor(isDataAnonymizable), [isDataAnonymizable]); const tooltipContent = useMemo( @@ -53,7 +53,7 @@ const AnonymizedStatComponent: React.FC = ({ ? css` display: flex; align-items: center; - gap: ${gap}; + gap: ${gap || euiTheme.size.xs}; ` : null } diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/available_stat/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/available_stat/index.tsx index d29bfab02b897..0a0877895da57 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/available_stat/index.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/available_stat/index.tsx @@ -5,11 +5,10 @@ * 2.0. */ -import { EuiStat, EuiToolTip } from '@elastic/eui'; +import { EuiStat, EuiToolTip, useEuiTheme } from '@elastic/eui'; import React, { useMemo } from 'react'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { TITLE_SIZE } from '../constants'; import * as i18n from './translations'; @@ -24,8 +23,9 @@ const AvailableStatComponent: React.FC = ({ total, inline, titleSize = TITLE_SIZE, - gap = euiThemeVars.euiSizeXS, + gap, }) => { + const { euiTheme } = useEuiTheme(); const tooltipContent = useMemo(() => i18n.AVAILABLE_TOOLTIP(total), [total]); return ( @@ -36,7 +36,7 @@ const AvailableStatComponent: React.FC = ({ ? css` display: flex; align-items: center; - gap: ${gap}; + gap: ${gap || euiTheme.size.xs}; ` : null } diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json b/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json index 95c51c0d85119..0349d31758d0f 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json @@ -6,7 +6,8 @@ "jest", "node", "react", - "@kbn/ambient-ui-types" + "@kbn/ambient-ui-types", + "@emotion/react/types/css-prop" ] }, "include": [ diff --git a/x-pack/solutions/security/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx b/x-pack/solutions/security/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx index ff526c33497c3..eeb0ac04205fa 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/assistant/get_comments/stream/message_text.tsx @@ -14,14 +14,11 @@ import { EuiText, getDefaultEuiMarkdownParsingPlugins, getDefaultEuiMarkdownProcessingPlugins, - transparentize, + useEuiTheme, } from '@elastic/eui'; -import { css } from '@emotion/css'; -import classNames from 'classnames'; +import { css } from '@emotion/react'; import type { Code, InlineCode, Parent, Text } from 'mdast'; import React from 'react'; -import { euiThemeVars } from '@kbn/ui-theme'; - import type { Node } from 'unist'; import { customCodeBlockLanguagePlugin } from '../custom_codeblock/custom_codeblock_markdown_plugin'; import { CustomCodeBlock } from '../custom_codeblock/custom_code_block'; @@ -35,30 +32,32 @@ interface Props { const ANIMATION_TIME = 1; -const cursorCss = css` - @keyframes blink { - 0% { - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; +export const Cursor = () => { + const { euiTheme } = useEuiTheme(); + + const cursorCss = css` + @keyframes blink { + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } } - } - animation: blink ${ANIMATION_TIME}s infinite; - width: 10px; - height: 16px; - vertical-align: middle; - display: inline-block; - background: ${transparentize(euiThemeVars.euiColorDarkShade, 0.25)}; -`; + width: 10px; + height: 16px; + vertical-align: middle; + display: inline-block; + animation: blink ${ANIMATION_TIME}s infinite; + background: ${euiTheme.colors.backgroundLightText}; + `; -const Cursor = () => ( - -); + return ; +}; // a weird combination of different whitespace chars to make sure it stays // invisible even when we cannot properly parse the text while still being @@ -145,14 +144,14 @@ const getPluginDependencies = () => { }; export function MessageText({ loading, content, index, 'data-test-subj': dataTestSubj }: Props) { - const containerClassName = css` + const containerCss = css` overflow-wrap: anywhere; `; const { parsingPluginList, processingPluginList } = getPluginDependencies(); return ( - +