From c60f956337a03109d660d34a32b9d755954915f2 Mon Sep 17 00:00:00 2001 From: Kenneth Kreindler Date: Fri, 29 Nov 2024 13:50:45 +0000 Subject: [PATCH 1/9] fix border color of icon animation inside of the security AI assistant side panel --- .../impl/assistant/assistant_animated_icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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..096fd6d36b0ad 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 @@ -45,7 +45,7 @@ const Animation = styled.div` top: 0; left: 0; z-index: 0; - border: 1px solid ${euiThemeVars.euiColorPrimary}; + border: 1px solid ${euiThemeVars.euiBorderColor}; border-radius: inherit; animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing; } From e094345cb23524630039f5f826e242c06d23c860 Mon Sep 17 00:00:00 2001 From: Kenneth Kreindler Date: Mon, 2 Dec 2024 11:50:58 +0000 Subject: [PATCH 2/9] with support for borealis --- .../assistant/assistant_animated_icon.tsx | 196 ++++++++++-------- .../kbn-elastic-assistant/tsconfig.json | 3 +- 2 files changed, 109 insertions(+), 90 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 096fd6d36b0ad..463e41f0677b4 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 @@ -5,101 +5,119 @@ * 2.0. */ -import React from 'react'; +import React, { PropsWithChildren } from 'react'; import styled from '@emotion/styled'; -import { euiThemeVars } from '@kbn/ui-theme'; +import { css } from '@emotion/react'; +import { useEuiTheme } from '@elastic/eui'; import { AssistantAvatar } from './assistant_avatar/assistant_avatar'; -const Container = styled.div` - display: inline-block; - position: relative; - width: 56px; - height: 56px; - display: flex; - justify-content: center; - align-items: center; - margin-top: ${euiThemeVars.euiSizeXXL}; - margin-bottom: ${euiThemeVars.euiSizeL}; +const Container = ({ children }: PropsWithChildren) => { + const { euiTheme } = useEuiTheme(); + return ( +
+ {children} +
+ ); +}; -const Animation = styled.div` - width: 99%; - height: 99%; - border-radius: 50px; - z-index: 1; - position: relative; +const Animation = () => { + const { euiTheme } = useEuiTheme(); - &:before, - &:after { - content: ''; - position: absolute; - width: 100%; - height: 100%; - border: inherit; - top: 0; - left: 0; - z-index: 0; - border: 1px solid ${euiThemeVars.euiBorderColor}; - border-radius: inherit; - animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing; - } - &:after { - animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing1; - } + return ( +
+ ); +}; const AvatarWrapper = styled.span` width: 100%; @@ -130,4 +148,4 @@ export const AssistantAnimatedIcon = React.memo(() => ( )); -AssistantAnimatedIcon.displayName = 'AssistantAnimatedIcon'; +AssistantAnimatedIcon.displayName = 'AssistantAnimatedIcon'; \ No newline at end of file diff --git a/x-pack/packages/kbn-elastic-assistant/tsconfig.json b/x-pack/packages/kbn-elastic-assistant/tsconfig.json index 15009c7f702a5..b7370eb00efbd 100644 --- a/x-pack/packages/kbn-elastic-assistant/tsconfig.json +++ b/x-pack/packages/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": [ From 133f5bf860c5bc0e90b9c1274d318c53e9f85416 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 2 Dec 2024 13:35:10 +0000 Subject: [PATCH 3/9] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- .../impl/assistant/assistant_animated_icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 463e41f0677b4..7076a4b85269c 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 @@ -148,4 +148,4 @@ export const AssistantAnimatedIcon = React.memo(() => ( )); -AssistantAnimatedIcon.displayName = 'AssistantAnimatedIcon'; \ No newline at end of file +AssistantAnimatedIcon.displayName = 'AssistantAnimatedIcon'; From 772dc6f5499cde86597b834be0c021a2c4a72497 Mon Sep 17 00:00:00 2001 From: Kenneth Kreindler Date: Mon, 9 Dec 2024 10:02:28 +0000 Subject: [PATCH 4/9] use string template for new styles --- .../kbn-elastic-assistant/emotion.d.ts | 14 ++ .../assistant/assistant_animated_icon.tsx | 193 ++++++++---------- .../kbn-elastic-assistant/tsconfig.json | 3 +- 3 files changed, 102 insertions(+), 108 deletions(-) create mode 100644 x-pack/packages/kbn-elastic-assistant/emotion.d.ts diff --git a/x-pack/packages/kbn-elastic-assistant/emotion.d.ts b/x-pack/packages/kbn-elastic-assistant/emotion.d.ts new file mode 100644 index 0000000000000..213178080e536 --- /dev/null +++ b/x-pack/packages/kbn-elastic-assistant/emotion.d.ts @@ -0,0 +1,14 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import '@emotion/react'; +import type { UseEuiTheme } from '@elastic/eui'; + +declare module '@emotion/react' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + export interface Theme extends UseEuiTheme {} +} 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 7076a4b85269c..f66844f22816d 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 @@ -5,119 +5,100 @@ * 2.0. */ -import React, { PropsWithChildren } from 'react'; +import React from 'react'; import styled from '@emotion/styled'; -import { css } from '@emotion/react'; -import { useEuiTheme } from '@elastic/eui'; import { AssistantAvatar } from './assistant_avatar/assistant_avatar'; -const Container = ({ children }: PropsWithChildren) => { - const { euiTheme } = useEuiTheme(); - return ( -
- {children} -
- ); -}; +const Container = styled.div` + display: inline-block; + position: relative; + width: 56px; + height: 56px; + display: flex; + justify-content: center; + align-items: center; + margin-top: ${props => props.theme.euiTheme.size.xxl}; + margin-bottom: ${props => props.theme.euiTheme.size.l}; -const Animation = () => { - const { euiTheme } = useEuiTheme(); + :before, + :after { + content: ''; + position: absolute; + } +`; - return ( -
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; + } + &:after { + animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing1; + } - @keyframes pulsing { - 0% { - opacity: 1; - transform: scaleY(1) scaleX(1); - } - 20% { - opacity: 0.5; - } - 70% { - opacity: 0.2; - transform: scaleY(2) scaleX(2); - } - 80% { - opacity: 0; - transform: scaleY(2) scaleX(2); - } - 90% { - opacity: 0; - transform: scaleY(1) scaleX(1); - } - } - @keyframes pulsing1 { - 0% { - opacity: 1; - transform: scaleY(1) scaleX(1); - } - 15% { - opacity: 1; - transform: scaleY(1) scaleX(1); - } - 40% { - opacity: 0.5; - } - 70% { - opacity: 0.2; - transform: scaleY(1.5) scaleX(1.5); - } - 80% { - opacity: 0; - transform: scaleY(1.5) scaleX(1.5); - } - 90% { - opacity: 0; - transform: scaleY(1) scaleX(1); - } - } - `} - /> - ); -}; + @keyframes pulsing { + 0% { + opacity: 1; + transform: scaleY(1) scaleX(1); + } + 20% { + opacity: 0.5; + } + 70% { + opacity: 0.2; + transform: scaleY(2) scaleX(2); + } + 80% { + opacity: 0; + transform: scaleY(2) scaleX(2); + } + 90% { + opacity: 0; + transform: scaleY(1) scaleX(1); + } + } + @keyframes pulsing1 { + 0% { + opacity: 1; + transform: scaleY(1) scaleX(1); + } + 15% { + opacity: 1; + transform: scaleY(1) scaleX(1); + } + 40% { + opacity: 0.5; + } + 70% { + opacity: 0.2; + transform: scaleY(1.5) scaleX(1.5); + } + 80% { + opacity: 0; + transform: scaleY(1.5) scaleX(1.5); + } + 90% { + opacity: 0; + transform: scaleY(1) scaleX(1); + } + } +`; const AvatarWrapper = styled.span` width: 100%; diff --git a/x-pack/packages/kbn-elastic-assistant/tsconfig.json b/x-pack/packages/kbn-elastic-assistant/tsconfig.json index b7370eb00efbd..15009c7f702a5 100644 --- a/x-pack/packages/kbn-elastic-assistant/tsconfig.json +++ b/x-pack/packages/kbn-elastic-assistant/tsconfig.json @@ -6,8 +6,7 @@ "jest", "node", "react", - "@kbn/ambient-ui-types", - "@emotion/react/types/css-prop" + "@kbn/ambient-ui-types" ] }, "include": [ From 67f024d1f01f505ebd284a5c8cc3a6d2fac858f2 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 9 Dec 2024 10:26:59 +0000 Subject: [PATCH 5/9] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- .../impl/assistant/assistant_animated_icon.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 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 f66844f22816d..50520e29d39a3 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 @@ -17,8 +17,8 @@ const Container = styled.div` display: flex; justify-content: center; align-items: center; - margin-top: ${props => props.theme.euiTheme.size.xxl}; - margin-bottom: ${props => props.theme.euiTheme.size.l}; + margin-top: ${(props) => props.theme.euiTheme.size.xxl}; + margin-bottom: ${(props) => props.theme.euiTheme.size.l}; :before, :after { @@ -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.colors.borderBasePlain}; border-radius: inherit; animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing; } From d25fc15d594e04abbc06da645ede4c71cdc3bf06 Mon Sep 17 00:00:00 2001 From: Kenneth Kreindler Date: Mon, 9 Dec 2024 16:16:54 +0000 Subject: [PATCH 6/9] use global emotion theme type --- x-pack/packages/kbn-elastic-assistant/emotion.d.ts | 14 -------------- .../packages/kbn-elastic-assistant/tsconfig.json | 1 + 2 files changed, 1 insertion(+), 14 deletions(-) delete mode 100644 x-pack/packages/kbn-elastic-assistant/emotion.d.ts diff --git a/x-pack/packages/kbn-elastic-assistant/emotion.d.ts b/x-pack/packages/kbn-elastic-assistant/emotion.d.ts deleted file mode 100644 index 213178080e536..0000000000000 --- a/x-pack/packages/kbn-elastic-assistant/emotion.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import '@emotion/react'; -import type { UseEuiTheme } from '@elastic/eui'; - -declare module '@emotion/react' { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface Theme extends UseEuiTheme {} -} diff --git a/x-pack/packages/kbn-elastic-assistant/tsconfig.json b/x-pack/packages/kbn-elastic-assistant/tsconfig.json index 15009c7f702a5..1a23097b2271e 100644 --- a/x-pack/packages/kbn-elastic-assistant/tsconfig.json +++ b/x-pack/packages/kbn-elastic-assistant/tsconfig.json @@ -12,6 +12,7 @@ "include": [ "**/*.ts", "**/*.tsx", + "../../../typings/emotion.d.ts" ], "exclude": [ "target/**/*" From 41912c5bdcbdf3e63933db12df899e155c971ba2 Mon Sep 17 00:00:00 2001 From: Kenneth Kreindler Date: Tue, 10 Dec 2024 09:49:41 +0000 Subject: [PATCH 7/9] fix failing tests --- .../impl/assistant/assistant_animated_icon.tsx | 4 ++-- .../impl/data_anonymization_editor/stats/index.tsx | 4 ++-- .../impl/mock/test_providers/test_providers.tsx | 5 ++--- 3 files changed, 6 insertions(+), 7 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 50520e29d39a3..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 @@ -17,8 +17,8 @@ const Container = styled.div` display: flex; justify-content: center; align-items: center; - margin-top: ${(props) => props.theme.euiTheme.size.xxl}; - margin-bottom: ${(props) => props.theme.euiTheme.size.l}; + margin-top: ${({ theme }) => theme.euiTheme.size.xxl}; + margin-bottom: ${({ theme }) => theme.euiTheme.size.l}; :before, :after { 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..0d2fe52b2aab0 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 @@ -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'; // 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..6db8dfef47b7f 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: Tue, 10 Dec 2024 11:42:50 +0000 Subject: [PATCH 8/9] lint --- .../impl/mock/test_providers/test_providers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 6db8dfef47b7f..cb8b7c7631769 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 @@ -60,7 +60,7 @@ export const TestProvidersComponent: React.FC = ({ logger: { log: console.log, warn: console.warn, - error: () => {}, + error: () => { }, }, }); From 6c18ec6f42ffeffc199f6a4f00fbf0fb0d77e544 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 10 Dec 2024 12:04:10 +0000 Subject: [PATCH 9/9] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- .../impl/data_anonymization_editor/stats/index.tsx | 2 +- .../impl/mock/test_providers/test_providers.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) 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 0d2fe52b2aab0..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,7 +9,7 @@ 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 '@emotion/styled'; import { AllowedStat } from './allowed_stat'; 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 cb8b7c7631769..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 @@ -9,7 +9,7 @@ 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 React from 'react'; -// eslint-disable-next-line @kbn/eslint/module_migration + import { EuiThemeProvider as ThemeProvider } from '@elastic/eui'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; @@ -60,7 +60,7 @@ export const TestProvidersComponent: React.FC = ({ logger: { log: console.log, warn: console.warn, - error: () => { }, + error: () => {}, }, });