From aaa8c07b551be12f201a1c7ee507f68eb9d37f5a Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Wed, 5 Jan 2022 11:50:15 +0000 Subject: [PATCH 1/6] fleet app --- .../fleet/public/applications/fleet/app.tsx | 22 +++++++++++++------ .../fleet/public/applications/fleet/index.tsx | 6 ++++- .../public/mock/create_test_renderer.tsx | 4 +++- 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/fleet/app.tsx b/x-pack/plugins/fleet/public/applications/fleet/app.tsx index c9ccd797b2eec..b319432eef11f 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/app.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/app.tsx @@ -14,16 +14,16 @@ import { Router, Redirect, Route, Switch, useRouteMatch } from 'react-router-dom import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; import styled from 'styled-components'; -import useObservable from 'react-use/lib/useObservable'; import type { TopNavMenuData } from 'src/plugins/navigation/public'; +import { KibanaThemeProvider } from '../../../../../../src/plugins/kibana_react/public'; + import type { FleetConfigType, FleetStartServices } from '../../plugin'; import { KibanaContextProvider, RedirectAppLinks, } from '../../../../../../src/plugins/kibana_react/public'; -import { EuiThemeProvider } from '../../../../../../src/plugins/kibana_react/common'; import { PackageInstallProvider } from '../integrations/hooks'; @@ -209,12 +209,20 @@ export const FleetAppContext: React.FC<{ history: AppMountParameters['history']; kibanaVersion: string; extensions: UIExtensionsStorage; + theme$: AppMountParameters['theme$']; /** For testing purposes only */ routerHistory?: History; }> = memo( - ({ children, startServices, config, history, kibanaVersion, extensions, routerHistory }) => { - const isDarkMode = useObservable(startServices.uiSettings.get$('theme:darkMode')); - + ({ + children, + startServices, + config, + history, + kibanaVersion, + extensions, + routerHistory, + theme$, + }) => { return ( @@ -222,7 +230,7 @@ export const FleetAppContext: React.FC<{ - + @@ -232,7 +240,7 @@ export const FleetAppContext: React.FC<{ - + diff --git a/x-pack/plugins/fleet/public/applications/fleet/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/index.tsx index 8942c13a0a69d..9c6319a92b2ee 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/index.tsx @@ -38,6 +38,7 @@ interface FleetAppProps { kibanaVersion: string; extensions: UIExtensionsStorage; setHeaderActionMenu: AppMountParameters['setHeaderActionMenu']; + theme$: AppMountParameters['theme$']; } const FleetApp = ({ basepath, @@ -47,6 +48,7 @@ const FleetApp = ({ kibanaVersion, extensions, setHeaderActionMenu, + theme$, }: FleetAppProps) => { return ( @@ -66,7 +69,7 @@ const FleetApp = ({ export function renderApp( startServices: FleetStartServices, - { element, appBasePath, history, setHeaderActionMenu }: AppMountParameters, + { element, appBasePath, history, setHeaderActionMenu, theme$ }: AppMountParameters, config: FleetConfigType, kibanaVersion: string, extensions: UIExtensionsStorage @@ -80,6 +83,7 @@ export function renderApp( kibanaVersion={kibanaVersion} extensions={extensions} setHeaderActionMenu={setHeaderActionMenu} + theme$={theme$} />, element ); diff --git a/x-pack/plugins/fleet/public/mock/create_test_renderer.tsx b/x-pack/plugins/fleet/public/mock/create_test_renderer.tsx index ad07e020eadd9..aed9f4b802bdf 100644 --- a/x-pack/plugins/fleet/public/mock/create_test_renderer.tsx +++ b/x-pack/plugins/fleet/public/mock/create_test_renderer.tsx @@ -13,6 +13,8 @@ import { render as reactRender, act } from '@testing-library/react'; import { renderHook } from '@testing-library/react-hooks'; import type { RenderHookResult } from '@testing-library/react-hooks'; +import { themeServiceMock } from 'src/core/public/mocks'; + import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public'; import { ScopedHistory } from '../../../../../src/core/public'; import { FleetAppContext } from '../applications/fleet/app'; @@ -24,7 +26,6 @@ import { createConfigurationMock } from './plugin_configuration'; import { createStartMock } from './plugin_interfaces'; import { createStartServices } from './fleet_start_services'; import type { MockedFleetStart, MockedFleetStartServices } from './types'; - type UiRender = (ui: React.ReactElement, options?: RenderOptions) => RenderResult; /** @@ -83,6 +84,7 @@ export const createFleetTestRendererMock = (): TestRenderer => { kibanaVersion={testRendererMocks.kibanaVersion} extensions={extensions} routerHistory={testRendererMocks.history} + theme$={themeServiceMock.createTheme$()} > {children} From a3cc495ae1c295459623c429d87fa1bee63bfe24 Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Wed, 5 Jan 2022 13:49:13 +0000 Subject: [PATCH 2/6] integrations app --- x-pack/plugins/fleet/.storybook/context/index.tsx | 2 ++ .../fleet/public/applications/integrations/app.tsx | 11 +++++------ .../fleet/public/applications/integrations/index.tsx | 6 +++++- .../fleet/public/mock/create_test_renderer.tsx | 1 + 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/fleet/.storybook/context/index.tsx b/x-pack/plugins/fleet/.storybook/context/index.tsx index 5fdf7011e97ae..68348a4d8d07a 100644 --- a/x-pack/plugins/fleet/.storybook/context/index.tsx +++ b/x-pack/plugins/fleet/.storybook/context/index.tsx @@ -116,6 +116,7 @@ export const StorybookContext: React.FC<{ storyContext?: StoryContext }> = ({ } as unknown as FleetConfigType; const extensions = {}; + const theme$ = EMPTY; const kibanaVersion = '1.2.3'; const setHeaderActionMenu = useCallback(() => {}, []); @@ -129,6 +130,7 @@ export const StorybookContext: React.FC<{ storyContext?: StoryContext }> = ({ startServices, extensions, setHeaderActionMenu, + theme$, }} > {storyChildren} diff --git a/x-pack/plugins/fleet/public/applications/integrations/app.tsx b/x-pack/plugins/fleet/public/applications/integrations/app.tsx index eca2c0c0612c7..39ffabac3adcd 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/app.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/app.tsx @@ -10,7 +10,6 @@ import type { AppMountParameters } from 'kibana/public'; import { EuiErrorBoundary } from '@elastic/eui'; import type { History } from 'history'; import { Router, Redirect, Route, Switch } from 'react-router-dom'; -import useObservable from 'react-use/lib/useObservable'; import { ConfigContext, FleetStatusProvider, KibanaVersionContext } from '../../hooks'; @@ -20,7 +19,7 @@ import { KibanaContextProvider, RedirectAppLinks, } from '../../../../../../src/plugins/kibana_react/public'; -import { EuiThemeProvider } from '../../../../../../src/plugins/kibana_react/common'; +import { KibanaThemeProvider } from '../../../../../../src/plugins/kibana_react/public'; import { AgentPolicyContextProvider } from './hooks'; import { INTEGRATIONS_ROUTING_PATHS, pagePathGetters } from './constants'; @@ -43,6 +42,7 @@ export const IntegrationsAppContext: React.FC<{ kibanaVersion: string; extensions: UIExtensionsStorage; setHeaderActionMenu: AppMountParameters['setHeaderActionMenu']; + theme$: AppMountParameters['theme$']; /** For testing purposes only */ routerHistory?: History; // TODO remove }> = memo( @@ -54,9 +54,8 @@ export const IntegrationsAppContext: React.FC<{ kibanaVersion, extensions, setHeaderActionMenu, + theme$, }) => { - const isDarkMode = useObservable(startServices.uiSettings.get$('theme:darkMode')); - return ( @@ -64,7 +63,7 @@ export const IntegrationsAppContext: React.FC<{ - + @@ -79,7 +78,7 @@ export const IntegrationsAppContext: React.FC<{ - + diff --git a/x-pack/plugins/fleet/public/applications/integrations/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/index.tsx index 620cf83fd762d..1edf5775e3df3 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/index.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/index.tsx @@ -38,6 +38,7 @@ interface IntegrationsAppProps { kibanaVersion: string; extensions: UIExtensionsStorage; setHeaderActionMenu: AppMountParameters['setHeaderActionMenu']; + theme$: AppMountParameters['theme$']; } const IntegrationsApp = ({ basepath, @@ -47,6 +48,7 @@ const IntegrationsApp = ({ kibanaVersion, extensions, setHeaderActionMenu, + theme$, }: IntegrationsAppProps) => { return ( @@ -65,7 +68,7 @@ const IntegrationsApp = ({ export function renderApp( startServices: FleetStartServices, - { element, appBasePath, history, setHeaderActionMenu }: AppMountParameters, + { element, appBasePath, history, setHeaderActionMenu, theme$ }: AppMountParameters, config: FleetConfigType, kibanaVersion: string, extensions: UIExtensionsStorage, @@ -81,6 +84,7 @@ export function renderApp( kibanaVersion={kibanaVersion} extensions={extensions} setHeaderActionMenu={setHeaderActionMenu} + theme$={theme$} /> , element diff --git a/x-pack/plugins/fleet/public/mock/create_test_renderer.tsx b/x-pack/plugins/fleet/public/mock/create_test_renderer.tsx index aed9f4b802bdf..22b58c14fb072 100644 --- a/x-pack/plugins/fleet/public/mock/create_test_renderer.tsx +++ b/x-pack/plugins/fleet/public/mock/create_test_renderer.tsx @@ -140,6 +140,7 @@ export const createIntegrationsTestRendererMock = (): TestRenderer => { kibanaVersion={testRendererMocks.kibanaVersion} extensions={extensions} routerHistory={testRendererMocks.history} + theme$={themeServiceMock.createTheme$()} setHeaderActionMenu={() => {}} > {children} From 265a031c8da511cb8e8a8573fceba0660118c3d9 Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Wed, 5 Jan 2022 15:27:04 +0000 Subject: [PATCH 3/6] reinstate EUITHemeProvider --- .../fleet/public/applications/fleet/app.tsx | 24 ++++++++----- .../public/applications/integrations/app.tsx | 35 +++++++++++-------- 2 files changed, 36 insertions(+), 23 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/fleet/app.tsx b/x-pack/plugins/fleet/public/applications/fleet/app.tsx index b319432eef11f..56ec4761c4545 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/app.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/app.tsx @@ -14,6 +14,7 @@ import { Router, Redirect, Route, Switch, useRouteMatch } from 'react-router-dom import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; import styled from 'styled-components'; +import useObservable from 'react-use/lib/useObservable'; import type { TopNavMenuData } from 'src/plugins/navigation/public'; @@ -24,6 +25,7 @@ import { KibanaContextProvider, RedirectAppLinks, } from '../../../../../../src/plugins/kibana_react/public'; +import { EuiThemeProvider } from '../../../../../../src/plugins/kibana_react/common'; import { PackageInstallProvider } from '../integrations/hooks'; @@ -223,6 +225,8 @@ export const FleetAppContext: React.FC<{ routerHistory, theme$, }) => { + const isDarkMode = useObservable(startServices.uiSettings.get$('theme:darkMode')); + return ( @@ -231,15 +235,17 @@ export const FleetAppContext: React.FC<{ - - - - - {children} - - - - + + + + + + {children} + + + + + diff --git a/x-pack/plugins/fleet/public/applications/integrations/app.tsx b/x-pack/plugins/fleet/public/applications/integrations/app.tsx index 39ffabac3adcd..172b066443948 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/app.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/app.tsx @@ -10,6 +10,7 @@ import type { AppMountParameters } from 'kibana/public'; import { EuiErrorBoundary } from '@elastic/eui'; import type { History } from 'history'; import { Router, Redirect, Route, Switch } from 'react-router-dom'; +import useObservable from 'react-use/lib/useObservable'; import { ConfigContext, FleetStatusProvider, KibanaVersionContext } from '../../hooks'; @@ -19,6 +20,8 @@ import { KibanaContextProvider, RedirectAppLinks, } from '../../../../../../src/plugins/kibana_react/public'; +import { EuiThemeProvider } from '../../../../../../src/plugins/kibana_react/common'; + import { KibanaThemeProvider } from '../../../../../../src/plugins/kibana_react/public'; import { AgentPolicyContextProvider } from './hooks'; @@ -56,6 +59,8 @@ export const IntegrationsAppContext: React.FC<{ setHeaderActionMenu, theme$, }) => { + const isDarkMode = useObservable(startServices.uiSettings.get$('theme:darkMode')); + return ( @@ -64,20 +69,22 @@ export const IntegrationsAppContext: React.FC<{ - - - - - - - - {children} - - - - - - + + + + + + + + + {children} + + + + + + + From ef6686783142d11277053d9783a51596478167d3 Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Wed, 5 Jan 2022 15:34:04 +0000 Subject: [PATCH 4/6] add theme$ to integrations header portal --- .../plugins/fleet/public/applications/integrations/app.tsx | 2 +- .../applications/integrations/components/header/header.tsx | 4 +++- .../integrations/components/header/header_portal.tsx | 7 ++++--- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/integrations/app.tsx b/x-pack/plugins/fleet/public/applications/integrations/app.tsx index 172b066443948..40bf59ed86e90 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/app.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/app.tsx @@ -76,7 +76,7 @@ export const IntegrationsAppContext: React.FC<{ - + {children} diff --git a/x-pack/plugins/fleet/public/applications/integrations/components/header/header.tsx b/x-pack/plugins/fleet/public/applications/integrations/components/header/header.tsx index e87c63e98ef28..b594171a7bae0 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/components/header/header.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/components/header/header.tsx @@ -15,11 +15,13 @@ import { DeploymentDetails } from './deployment_details'; export const IntegrationsHeader = ({ setHeaderActionMenu, + theme$, }: { setHeaderActionMenu: AppMountParameters['setHeaderActionMenu']; + theme$: AppMountParameters['theme$']; }) => { return ( - + diff --git a/x-pack/plugins/fleet/public/applications/integrations/components/header/header_portal.tsx b/x-pack/plugins/fleet/public/applications/integrations/components/header/header_portal.tsx index d3dbbcf9628ec..ed6a94ff077dc 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/components/header/header_portal.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/components/header/header_portal.tsx @@ -14,14 +14,15 @@ import { toMountPoint } from '../../../../../../../../src/plugins/kibana_react/p export interface Props { setHeaderActionMenu: AppMountParameters['setHeaderActionMenu']; + theme$: AppMountParameters['theme$']; } -export const HeaderPortal: FC = ({ children, setHeaderActionMenu }) => { +export const HeaderPortal: FC = ({ children, setHeaderActionMenu, theme$ }) => { const portalNode = useMemo(() => createPortalNode(), []); useEffect(() => { setHeaderActionMenu((element) => { - const mount = toMountPoint(); + const mount = toMountPoint(, { theme$ }); return mount(element); }); @@ -29,7 +30,7 @@ export const HeaderPortal: FC = ({ children, setHeaderActionMenu }) => { portalNode.unmount(); setHeaderActionMenu(undefined); }; - }, [portalNode, setHeaderActionMenu]); + }, [portalNode, setHeaderActionMenu, theme$]); return {children}; }; From 5d8746298565a49e052b91084fa85d33604f02d7 Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Wed, 5 Jan 2022 16:06:19 +0000 Subject: [PATCH 5/6] add theme$ to PackageInstallProvider --- .../fleet/public/applications/fleet/app.tsx | 5 ++- .../public/applications/integrations/app.tsx | 5 ++- .../hooks/use_package_install.tsx | 45 ++++++++++++++----- 3 files changed, 42 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/fleet/app.tsx b/x-pack/plugins/fleet/public/applications/fleet/app.tsx index 56ec4761c4545..9bf481ecf094a 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/app.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/app.tsx @@ -239,7 +239,10 @@ export const FleetAppContext: React.FC<{ - + {children} diff --git a/x-pack/plugins/fleet/public/applications/integrations/app.tsx b/x-pack/plugins/fleet/public/applications/integrations/app.tsx index 40bf59ed86e90..e4724ca13b411 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/app.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/app.tsx @@ -75,7 +75,10 @@ export const IntegrationsAppContext: React.FC<{ - + {children} diff --git a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_package_install.tsx b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_package_install.tsx index 90a2231da40c6..832397cbc93fd 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_package_install.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_package_install.tsx @@ -10,6 +10,8 @@ import React, { useCallback, useState } from 'react'; import { useHistory } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n-react'; import type { NotificationsStart } from 'src/core/public'; +import type { Observable } from 'rxjs'; +import type { CoreTheme } from 'kibana/public'; import { toMountPoint } from '../../../../../../../src/plugins/kibana_react/public'; import type { PackageInfo } from '../../../types'; @@ -30,7 +32,13 @@ type InstallPackageProps = Pick & { }; type SetPackageInstallStatusProps = Pick & PackageInstallItem; -function usePackageInstall({ notifications }: { notifications: NotificationsStart }) { +function usePackageInstall({ + notifications, + theme$, +}: { + notifications: NotificationsStart; + theme$: Observable; +}) { const history = useHistory(); const { getPath } = useLink(); const [packages, setPackage] = useState({}); @@ -77,13 +85,15 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar id="xpack.fleet.integrations.packageInstallErrorTitle" defaultMessage="Failed to install {title} package" values={{ title }} - /> + />, + { theme$ } ), text: toMountPoint( + />, + { theme$ } ), iconType: 'alert', }); @@ -102,19 +112,28 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar id="xpack.fleet.integrations.packageInstallSuccessTitle" defaultMessage="Installed {title}" values={{ title }} - /> + />, + { theme$ } ), text: toMountPoint( + />, + { theme$ } ), }); } }, - [getPackageInstallStatus, notifications.toasts, setPackageInstallStatus, getPath, history] + [ + getPackageInstallStatus, + notifications.toasts, + setPackageInstallStatus, + getPath, + history, + theme$, + ] ); const uninstallPackage = useCallback( @@ -135,13 +154,15 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar id="xpack.fleet.integrations.packageUninstallErrorTitle" defaultMessage="Failed to uninstall {title} package" values={{ title }} - /> + />, + { theme$ } ), text: toMountPoint( + />, + { theme$ } ), iconType: 'alert', }); @@ -154,14 +175,16 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar id="xpack.fleet.integrations.packageUninstallSuccessTitle" defaultMessage="Uninstalled {title}" values={{ title }} - /> + />, + { theme$ } ), text: toMountPoint( + />, + { theme$ } ), }); if (redirectToVersion !== version) { @@ -172,7 +195,7 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar } } }, - [notifications.toasts, setPackageInstallStatus, getPath, history] + [notifications.toasts, setPackageInstallStatus, getPath, history, theme$] ); return { From f3cc956d5ffc31ae38f0cfa5f56e480076179ae6 Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Wed, 5 Jan 2022 16:33:05 +0000 Subject: [PATCH 6/6] add theme$ to UpdateButton --- .../sections/epm/screens/detail/index.tsx | 2 +- .../sections/epm/screens/detail/settings/settings.tsx | 7 ++++++- .../epm/screens/detail/settings/update_button.tsx | 11 +++++++++-- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx index bc6958e9b4a4f..98d73bcb70920 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx @@ -596,7 +596,7 @@ export function Detail() { - + diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/settings/settings.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/settings/settings.tsx index a28f63c3f9163..09db4208f40fc 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/settings/settings.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/settings/settings.tsx @@ -22,6 +22,9 @@ import { import { i18n } from '@kbn/i18n'; +import type { Observable } from 'rxjs'; +import type { CoreTheme } from 'kibana/public'; + import type { PackageInfo, UpgradePackagePolicyDryRunResponse } from '../../../../../types'; import { InstallStatus } from '../../../../../types'; import { @@ -90,9 +93,10 @@ const LatestVersionLink = ({ name, version }: { name: string; version: string }) interface Props { packageInfo: PackageInfo; + theme$: Observable; } -export const SettingsPage: React.FC = memo(({ packageInfo }: Props) => { +export const SettingsPage: React.FC = memo(({ packageInfo, theme$ }: Props) => { const { name, title, removable, latestVersion, version, keepPoliciesUpToDate } = packageInfo; const [dryRunData, setDryRunData] = useState(); const [isUpgradingPackagePolicies, setIsUpgradingPackagePolicies] = useState(false); @@ -291,6 +295,7 @@ export const SettingsPage: React.FC = memo(({ packageInfo }: Props) => { dryRunData={dryRunData} isUpgradingPackagePolicies={isUpgradingPackagePolicies} setIsUpgradingPackagePolicies={setIsUpgradingPackagePolicies} + theme$={theme$} />

diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/settings/update_button.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/settings/update_button.tsx index 0ade85354bdd7..2bab9286a9b17 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/settings/update_button.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/settings/update_button.tsx @@ -18,6 +18,8 @@ import { EuiConfirmModal, EuiSpacer, } from '@elastic/eui'; +import type { Observable } from 'rxjs'; +import type { CoreTheme } from 'kibana/public'; import type { GetAgentPoliciesResponse, @@ -43,6 +45,7 @@ interface UpdateButtonProps extends Pick>; + theme$: Observable; } /* @@ -73,6 +76,7 @@ export const UpdateButton: React.FunctionComponent = ({ setIsUpgradingPackagePolicies = () => {}, title, version, + theme$, }) => { const history = useHistory(); const { getPath } = useLink(); @@ -174,14 +178,16 @@ export const UpdateButton: React.FunctionComponent = ({ id="xpack.fleet.integrations.packageUpdateSuccessTitle" defaultMessage="Updated {title} and upgraded policies" values={{ title }} - /> + />, + { theme$ } ), text: toMountPoint( + />, + { theme$ } ), }); @@ -197,6 +203,7 @@ export const UpdateButton: React.FunctionComponent = ({ setIsUpgradingPackagePolicies, title, version, + theme$, ]); const updateModal = (