From 7bcc2aef6a840303f9a79cf20ebb67eb10ced782 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 18 Dec 2024 23:22:01 +1100
Subject: [PATCH] [8.x] [Security Assistant] Fix animation border color of
 security AI assistant (#202319) (#203583)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Assistant] Fix animation border color of security AI
assistant (#202319)](https://github.com/elastic/kibana/pull/202319)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Kenneth
Kreindler","email":"42113355+KDKHD@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-12-10T13:43:13Z","message":"[Security
Assistant] Fix animation border color of security AI assistant
(#202319)\n\n## Summary\r\n\r\n**Resolves:
https://github.com/elastic/kibana/issues/186135**\r\n\r\nChanges:\r\n-
Update border color of animated border of the security AI
assistance\r\nicon from `euiColorPrimary` to
`euiBorderColor`.\r\n\r\nOld border color:\r\n<img width=\"182\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a41a7859-3f9a-488c-bd4f-2ed25a52a481\">\r\n\r\nNew
border color:\r\n<img width=\"169\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/c7e1fa13-adb0-4014-950f-ae643e4e1d6d\">\r\n<img
width=\"347\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/8fba05e2-2a5b-48b2-b367-a58162cdaa9e\">\r\n\r\nNew
animated:\r\n![Nov-29-2024\r\n13-58-11](https://github.com/user-attachments/assets/2eaaf5a0-9bc2-4d84-9625-11ed7902c2c8)\r\n\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [x] The PR description includes the appropriate Release
Notes section,\r\nand the correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nDoes this PR introduce any risks? For example,
consider risks like hard\r\nto test bugs, performance regression,
potential of data loss.\r\n\r\nNo\r\n\r\nDescribe the risk, its
severity, and mitigation for each identified\r\nrisk. Invite
stakeholders and evaluate how to proceed before merging.\r\n\r\n- [X]
[See some
risk\r\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"2818a7cc5a94880964017e9ff80dcd546f5357f7","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","v9.0.0","backport:prev-major","Feature:Security
Assistant","Team:Security Generative AI","v8.18.0"],"title":"[Security
Assistant] Fix animation border color of security AI
assistant","number":202319,"url":"https://github.com/elastic/kibana/pull/202319","mergeCommit":{"message":"[Security
Assistant] Fix animation border color of security AI assistant
(#202319)\n\n## Summary\r\n\r\n**Resolves:
https://github.com/elastic/kibana/issues/186135**\r\n\r\nChanges:\r\n-
Update border color of animated border of the security AI
assistance\r\nicon from `euiColorPrimary` to
`euiBorderColor`.\r\n\r\nOld border color:\r\n<img width=\"182\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a41a7859-3f9a-488c-bd4f-2ed25a52a481\">\r\n\r\nNew
border color:\r\n<img width=\"169\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/c7e1fa13-adb0-4014-950f-ae643e4e1d6d\">\r\n<img
width=\"347\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/8fba05e2-2a5b-48b2-b367-a58162cdaa9e\">\r\n\r\nNew
animated:\r\n![Nov-29-2024\r\n13-58-11](https://github.com/user-attachments/assets/2eaaf5a0-9bc2-4d84-9625-11ed7902c2c8)\r\n\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [x] The PR description includes the appropriate Release
Notes section,\r\nand the correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nDoes this PR introduce any risks? For example,
consider risks like hard\r\nto test bugs, performance regression,
potential of data loss.\r\n\r\nNo\r\n\r\nDescribe the risk, its
severity, and mitigation for each identified\r\nrisk. Invite
stakeholders and evaluate how to proceed before merging.\r\n\r\n- [X]
[See some
risk\r\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"2818a7cc5a94880964017e9ff80dcd546f5357f7"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202319","number":202319,"mergeCommit":{"message":"[Security
Assistant] Fix animation border color of security AI assistant
(#202319)\n\n## Summary\r\n\r\n**Resolves:
https://github.com/elastic/kibana/issues/186135**\r\n\r\nChanges:\r\n-
Update border color of animated border of the security AI
assistance\r\nicon from `euiColorPrimary` to
`euiBorderColor`.\r\n\r\nOld border color:\r\n<img width=\"182\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a41a7859-3f9a-488c-bd4f-2ed25a52a481\">\r\n\r\nNew
border color:\r\n<img width=\"169\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/c7e1fa13-adb0-4014-950f-ae643e4e1d6d\">\r\n<img
width=\"347\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/8fba05e2-2a5b-48b2-b367-a58162cdaa9e\">\r\n\r\nNew
animated:\r\n![Nov-29-2024\r\n13-58-11](https://github.com/user-attachments/assets/2eaaf5a0-9bc2-4d84-9625-11ed7902c2c8)\r\n\r\n\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [x] The PR description includes the appropriate Release
Notes section,\r\nand the correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nDoes this PR introduce any risks? For example,
consider risks like hard\r\nto test bugs, performance regression,
potential of data loss.\r\n\r\nNo\r\n\r\nDescribe the risk, its
severity, and mitigation for each identified\r\nrisk. Invite
stakeholders and evaluate how to proceed before merging.\r\n\r\n- [X]
[See some
risk\r\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"2818a7cc5a94880964017e9ff80dcd546f5357f7"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Kenneth Kreindler <42113355+KDKHD@users.noreply.github.com>
---
 .../impl/assistant/assistant_animated_icon.tsx             | 7 +++----
 .../impl/data_anonymization_editor/stats/index.tsx         | 4 ++--
 .../impl/mock/test_providers/test_providers.tsx            | 5 ++---
 .../packages/shared/kbn-elastic-assistant/tsconfig.json    | 1 +
 4 files changed, 8 insertions(+), 9 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 eeb6e83368acd..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
@@ -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.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/impl/data_anonymization_editor/stats/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx
index 39112cb3acf51..180933409aafd 100644
--- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx
+++ b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx
@@ -10,7 +10,7 @@ import { AnonymizationFieldResponse } from '@kbn/elastic-assistant-common/impl/s
 import { Replacements } from '@kbn/elastic-assistant-common';
 import React, { useMemo } from 'react';
 
-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/platform/packages/shared/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx
index 9eddca98a6993..d19dd7ff70890 100644
--- a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx
+++ b/x-pack/platform/packages/shared/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';
 
-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<Props> = ({
 
   return (
     <I18nProvider>
-      <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
+      <ThemeProvider>
         <QueryClientProvider client={queryClient}>
           <AssistantProvider
             actionTypeRegistry={actionTypeRegistry}
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 15ea078143a81..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,6 +12,7 @@
   "include": [
     "**/*.ts",
     "**/*.tsx",
+    "../../../../../typings/emotion.d.ts"
   ],
   "exclude": [
     "target/**/*"