From 336392c5dc865bf18ebb2db747640ec9b388a950 Mon Sep 17 00:00:00 2001 From: Kenneth Kreindler <42113355+KDKHD@users.noreply.github.com> Date: Tue, 10 Dec 2024 13:43:13 +0000 Subject: [PATCH 1/2] [Security Assistant] Fix animation border color of security AI assistant (#202319) ## Summary **Resolves: https://github.com/elastic/kibana/issues/186135** Changes: - Update border color of animated border of the security AI assistance icon from `euiColorPrimary` to `euiBorderColor`. Old border color: image New border color: image image New animated: ![Nov-29-2024 13-58-11](https://github.com/user-attachments/assets/2eaaf5a0-9bc2-4d84-9625-11ed7902c2c8) ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. No Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [X] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine (cherry picked from commit 2818a7cc5a94880964017e9ff80dcd546f5357f7) --- .../impl/assistant/assistant_animated_icon.tsx | 7 +++---- .../impl/data_anonymization_editor/stats/index.tsx | 6 +++--- .../impl/mock/test_providers/test_providers.tsx | 7 +++---- x-pack/packages/kbn-elastic-assistant/tsconfig.json | 1 + 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx index eeb6e83368acd..f569ca1450caf 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx @@ -7,7 +7,6 @@ import React from 'react'; import styled from '@emotion/styled'; -import { euiThemeVars } from '@kbn/ui-theme'; import { AssistantAvatar } from './assistant_avatar/assistant_avatar'; const Container = styled.div` @@ -18,8 +17,8 @@ const Container = styled.div` display: flex; justify-content: center; align-items: center; - margin-top: ${euiThemeVars.euiSizeXXL}; - margin-bottom: ${euiThemeVars.euiSizeL}; + margin-top: ${({ theme }) => theme.euiTheme.size.xxl}; + margin-bottom: ${({ theme }) => theme.euiTheme.size.l}; :before, :after { @@ -45,7 +44,7 @@ const Animation = styled.div` top: 0; left: 0; z-index: 0; - border: 1px solid ${euiThemeVars.euiColorPrimary}; + border: 1px solid ${(props) => props.theme.euiTheme.colors.borderBasePlain}; border-radius: inherit; animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing; } diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx index b628119032d1a..180933409aafd 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx @@ -9,8 +9,8 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { AnonymizationFieldResponse } from '@kbn/elastic-assistant-common/impl/schemas/anonymization_fields/bulk_crud_anonymization_fields_route.gen'; import { Replacements } from '@kbn/elastic-assistant-common'; import React, { useMemo } from 'react'; -// eslint-disable-next-line @kbn/eslint/module_migration -import styled from 'styled-components'; + +import styled from '@emotion/styled'; import { AllowedStat } from './allowed_stat'; import { AnonymizedStat } from './anonymized_stat'; @@ -18,7 +18,7 @@ import { getStats } from '../get_stats'; import { AvailableStat } from './available_stat'; const StatFlexItem = styled(EuiFlexItem)` - margin-right: ${({ theme }) => theme.eui.euiSizeL}; + margin-right: ${({ theme }) => theme.euiTheme.size.l}; `; interface Props { diff --git a/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx b/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx index 763085cca2688..d19dd7ff70890 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx @@ -8,10 +8,9 @@ import { httpServiceMock } from '@kbn/core-http-browser-mocks'; import { I18nProvider } from '@kbn/i18n-react'; import { actionTypeRegistryMock } from '@kbn/triggers-actions-ui-plugin/public/application/action_type_registry.mock'; -import { euiDarkVars } from '@kbn/ui-theme'; import React from 'react'; -// eslint-disable-next-line @kbn/eslint/module_migration -import { ThemeProvider } from 'styled-components'; + +import { EuiThemeProvider as ThemeProvider } from '@elastic/eui'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { UserProfileService } from '@kbn/core/public'; @@ -67,7 +66,7 @@ export const TestProvidersComponent: React.FC = ({ return ( - ({ eui: euiDarkVars, darkMode: true })}> + Date: Wed, 18 Dec 2024 10:38:49 +0000 Subject: [PATCH 2/2] fix types --- .../impl/assistant/assistant_animated_icon.tsx | 2 +- .../packages/shared/kbn-elastic-assistant/tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx index f569ca1450caf..50d808441d353 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx @@ -44,7 +44,7 @@ const Animation = styled.div` top: 0; left: 0; z-index: 0; - border: 1px solid ${(props) => props.theme.euiTheme.colors.borderBasePlain}; + border: 1px solid ${(props) => props.theme.euiTheme.border.color}; border-radius: inherit; animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing; } 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 eb46156673c2f..e060e8f3bed27 100644 --- a/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json +++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/tsconfig.json @@ -12,7 +12,7 @@ "include": [ "**/*.ts", "**/*.tsx", - "../../../typings/emotion.d.ts" + "../../../../../typings/emotion.d.ts" ], "exclude": [ "target/**/*"