[Fleet] Use KibanaThemeProvider (#122385)

* fleet app * integrations app * reinstate EUITHemeProvider * add theme$ to integrations header portal * add theme$ to PackageInstallProvider * add theme$ to UpdateButton Co-authored-by: Kibana Machine <[email protected]>
elastic · Jan 11, 2022 · d3c9a2a · d3c9a2a
1 parent 4fd7ef7
commit d3c9a2a
Show file tree

Hide file tree

Showing 12 changed files with 127 additions and 50 deletions.
diff --git 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/fleet/app.tsx b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
@@ -18,6 +18,8 @@ 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,
@@ -209,10 +211,20 @@ export const FleetAppContext: React.FC<{
   history: AppMountParameters['history'];
   kibanaVersion: string;
   extensions: UIExtensionsStorage;
+  theme$: AppMountParameters['theme$'];
   /** For testing purposes only */
   routerHistory?: History<any>;
 }> = memo(
-  ({ children, startServices, config, history, kibanaVersion, extensions, routerHistory }) => {
+  ({
+    children,
+    startServices,
+    config,
+    history,
+    kibanaVersion,
+    extensions,
+    routerHistory,
+    theme$,
+  }) => {
     const isDarkMode = useObservable<boolean>(startServices.uiSettings.get$('theme:darkMode'));
 
     return (
@@ -222,17 +234,22 @@ export const FleetAppContext: React.FC<{
             <EuiErrorBoundary>
               <ConfigContext.Provider value={config}>
                 <KibanaVersionContext.Provider value={kibanaVersion}>
-                  <EuiThemeProvider darkMode={isDarkMode}>
-                    <UIExtensionsContext.Provider value={extensions}>
-                      <FleetStatusProvider>
-                        <Router history={history}>
-                          <PackageInstallProvider notifications={startServices.notifications}>
-                            {children}
-                          </PackageInstallProvider>
-                        </Router>
-                      </FleetStatusProvider>
-                    </UIExtensionsContext.Provider>
-                  </EuiThemeProvider>
+                  <KibanaThemeProvider theme$={theme$}>
+                    <EuiThemeProvider darkMode={isDarkMode}>
+                      <UIExtensionsContext.Provider value={extensions}>
+                        <FleetStatusProvider>
+                          <Router history={history}>
+                            <PackageInstallProvider
+                              notifications={startServices.notifications}
+                              theme$={theme$}
+                            >
+                              {children}
+                            </PackageInstallProvider>
+                          </Router>
+                        </FleetStatusProvider>
+                      </UIExtensionsContext.Provider>
+                    </EuiThemeProvider>
+                  </KibanaThemeProvider>
                 </KibanaVersionContext.Provider>
               </ConfigContext.Provider>
             </EuiErrorBoundary>

diff --git 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 (
     <FleetAppContext
@@ -56,6 +58,7 @@ const FleetApp = ({
       history={history}
       kibanaVersion={kibanaVersion}
       extensions={extensions}
+      theme$={theme$}
     >
       <WithPermissionsAndSetup>
         <AppRoutes setHeaderActionMenu={setHeaderActionMenu} />
@@ -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/applications/integrations/app.tsx b/x-pack/plugins/fleet/public/applications/integrations/app.tsx
@@ -22,6 +22,8 @@ import {
 } 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 +45,7 @@ export const IntegrationsAppContext: React.FC<{
   kibanaVersion: string;
   extensions: UIExtensionsStorage;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  theme$: AppMountParameters['theme$'];
   /** For testing purposes only */
   routerHistory?: History<any>; // TODO remove
 }> = memo(
@@ -54,6 +57,7 @@ export const IntegrationsAppContext: React.FC<{
     kibanaVersion,
     extensions,
     setHeaderActionMenu,
+    theme$,
   }) => {
     const isDarkMode = useObservable<boolean>(startServices.uiSettings.get$('theme:darkMode'));
 
@@ -64,22 +68,27 @@ export const IntegrationsAppContext: React.FC<{
             <EuiErrorBoundary>
               <ConfigContext.Provider value={config}>
                 <KibanaVersionContext.Provider value={kibanaVersion}>
-                  <EuiThemeProvider darkMode={isDarkMode}>
-                    <UIExtensionsContext.Provider value={extensions}>
-                      <FleetStatusProvider>
-                        <startServices.customIntegrations.ContextProvider>
-                          <Router history={history}>
-                            <AgentPolicyContextProvider>
-                              <PackageInstallProvider notifications={startServices.notifications}>
-                                <IntegrationsHeader {...{ setHeaderActionMenu }} />
-                                {children}
-                              </PackageInstallProvider>
-                            </AgentPolicyContextProvider>
-                          </Router>
-                        </startServices.customIntegrations.ContextProvider>
-                      </FleetStatusProvider>
-                    </UIExtensionsContext.Provider>
-                  </EuiThemeProvider>
+                  <KibanaThemeProvider theme$={theme$}>
+                    <EuiThemeProvider darkMode={isDarkMode}>
+                      <UIExtensionsContext.Provider value={extensions}>
+                        <FleetStatusProvider>
+                          <startServices.customIntegrations.ContextProvider>
+                            <Router history={history}>
+                              <AgentPolicyContextProvider>
+                                <PackageInstallProvider
+                                  notifications={startServices.notifications}
+                                  theme$={theme$}
+                                >
+                                  <IntegrationsHeader {...{ setHeaderActionMenu, theme$ }} />
+                                  {children}
+                                </PackageInstallProvider>
+                              </AgentPolicyContextProvider>
+                            </Router>
+                          </startServices.customIntegrations.ContextProvider>
+                        </FleetStatusProvider>
+                      </UIExtensionsContext.Provider>
+                    </EuiThemeProvider>
+                  </KibanaThemeProvider>
                 </KibanaVersionContext.Provider>
               </ConfigContext.Provider>
             </EuiErrorBoundary>

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
@@ -15,11 +15,13 @@ import { DeploymentDetails } from './deployment_details';
 
 export const IntegrationsHeader = ({
   setHeaderActionMenu,
+  theme$,
 }: {
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  theme$: AppMountParameters['theme$'];
 }) => {
   return (
-    <HeaderPortal {...{ setHeaderActionMenu }}>
+    <HeaderPortal {...{ setHeaderActionMenu, theme$ }}>
       <EuiHeaderSection grow={false}>
         <EuiHeaderSectionItem>
           <EuiHeaderLinks>

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
@@ -14,22 +14,23 @@ import { toMountPoint } from '../../../../../../../../src/plugins/kibana_react/p
 
 export interface Props {
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
+  theme$: AppMountParameters['theme$'];
 }
 
-export const HeaderPortal: FC<Props> = ({ children, setHeaderActionMenu }) => {
+export const HeaderPortal: FC<Props> = ({ children, setHeaderActionMenu, theme$ }) => {
   const portalNode = useMemo(() => createPortalNode(), []);
 
   useEffect(() => {
     setHeaderActionMenu((element) => {
-      const mount = toMountPoint(<OutPortal node={portalNode} />);
+      const mount = toMountPoint(<OutPortal node={portalNode} />, { theme$ });
       return mount(element);
     });
 
     return () => {
       portalNode.unmount();
       setHeaderActionMenu(undefined);
     };
-  }, [portalNode, setHeaderActionMenu]);
+  }, [portalNode, setHeaderActionMenu, theme$]);
 
   return <InPortal node={portalNode}>{children}</InPortal>;
 };
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
@@ -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<PackageInfo, 'name' | 'version' | 'title'> & {
 };
 type SetPackageInstallStatusProps = Pick<PackageInfo, 'name'> & PackageInstallItem;
 
-function usePackageInstall({ notifications }: { notifications: NotificationsStart }) {
+function usePackageInstall({
+  notifications,
+  theme$,
+}: {
+  notifications: NotificationsStart;
+  theme$: Observable<CoreTheme>;
+}) {
   const history = useHistory();
   const { getPath } = useLink();
   const [packages, setPackage] = useState<PackagesInstall>({});
@@ -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(
             <FormattedMessage
               id="xpack.fleet.integrations.packageInstallErrorDescription"
               defaultMessage="Something went wrong while trying to install this package. Please try again later."
-            />
+            />,
+            { 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(
             <FormattedMessage
               id="xpack.fleet.integrations.packageInstallSuccessDescription"
               defaultMessage="Successfully installed {title}"
               values={{ title }}
-            />
+            />,
+            { 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(
             <FormattedMessage
               id="xpack.fleet.integrations.packageUninstallErrorDescription"
               defaultMessage="Something went wrong while trying to uninstall this package. Please try again later."
-            />
+            />,
+            { 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(
             <FormattedMessage
               id="xpack.fleet.integrations.packageUninstallSuccessDescription"
               defaultMessage="Successfully uninstalled {title}"
               values={{ title }}
-            />
+            />,
+            { 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 {

diff --git 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 (
     <IntegrationsAppContext
@@ -57,6 +59,7 @@ const IntegrationsApp = ({
       kibanaVersion={kibanaVersion}
       extensions={extensions}
       setHeaderActionMenu={setHeaderActionMenu}
+      theme$={theme$}
     >
       <AppRoutes />
     </IntegrationsAppContext>
@@ -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$}
       />
     </UsageTracker>,
     element