[ML] Transforms: Use KibanaThemeProvider in transform plugin (#120933)

* [ML] Use KibanaThemeProvider in transform plugin * [ML] Add missing mock Co-authored-by: Kibana Machine <[email protected]>
elastic · Dec 13, 2021 · 1e159f2 · 1e159f2
1 parent c4e8cb3
commit 1e159f2
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 30 deletions.
diff --git a/x-pack/plugins/transform/public/app/__mocks__/app_dependencies.tsx b/x-pack/plugins/transform/public/app/__mocks__/app_dependencies.tsx
@@ -9,7 +9,7 @@ import { useContext } from 'react';
 
 import type { ScopedHistory } from 'kibana/public';
 
-import { coreMock } from '../../../../../../src/core/public/mocks';
+import { coreMock, themeServiceMock } from '../../../../../../src/core/public/mocks';
 import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks';
 import { savedObjectsPluginMock } from '../../../../../../src/plugins/saved_objects/public/mocks';
 import { SharePluginStart } from '../../../../../../src/plugins/share/public';
@@ -39,6 +39,7 @@ const appDependencies: AppDependencies = {
   savedObjects: coreStart.savedObjects,
   storage: { get: jest.fn() } as unknown as Storage,
   overlays: coreStart.overlays,
+  theme: themeServiceMock.createStartContract(),
   http: coreSetup.http,
   history: {} as ScopedHistory,
   savedObjectsPlugin: savedObjectsPluginMock.createStartContract(),

diff --git a/x-pack/plugins/transform/public/app/app.tsx b/x-pack/plugins/transform/public/app/app.tsx
@@ -14,7 +14,10 @@ import { EuiErrorBoundary } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
+import {
+  KibanaContextProvider,
+  KibanaThemeProvider,
+} from '../../../../../src/plugins/kibana_react/public';
 
 import { API_BASE_PATH } from '../../common/constants';
 
@@ -65,13 +68,15 @@ export const renderApp = (element: HTMLElement, appDependencies: AppDependencies
 
   render(
     <EuiErrorBoundary>
-      <KibanaContextProvider services={appDependencies}>
-        <AuthorizationProvider privilegesEndpoint={`${API_BASE_PATH}privileges`}>
-          <I18nContext>
-            <App history={appDependencies.history} />
-          </I18nContext>
-        </AuthorizationProvider>
-      </KibanaContextProvider>
+      <KibanaThemeProvider theme$={appDependencies.theme.theme$}>
+        <KibanaContextProvider services={appDependencies}>
+          <AuthorizationProvider privilegesEndpoint={`${API_BASE_PATH}privileges`}>
+            <I18nContext>
+              <App history={appDependencies.history} />
+            </I18nContext>
+          </AuthorizationProvider>
+        </KibanaContextProvider>
+      </KibanaThemeProvider>
     </EuiErrorBoundary>,
     element
   );

diff --git a/x-pack/plugins/transform/public/app/app_dependencies.tsx b/x-pack/plugins/transform/public/app/app_dependencies.tsx
@@ -30,6 +30,7 @@ export interface AppDependencies {
   savedObjects: CoreStart['savedObjects'];
   storage: Storage;
   overlays: CoreStart['overlays'];
+  theme: CoreStart['theme'];
   history: ScopedHistory;
   savedObjectsPlugin: SavedObjectsStart;
   share: SharePluginStart;

diff --git a/x-pack/plugins/transform/public/app/components/toast_notification_text.test.tsx b/x-pack/plugins/transform/public/app/components/toast_notification_text.test.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { CoreStart } from 'src/core/public';
+import { themeServiceMock } from 'src/core/public/mocks';
 
 import { ToastNotificationText } from './toast_notification_text';
 
@@ -20,6 +21,7 @@ describe('ToastNotificationText', () => {
     const props = {
       overlays: {} as CoreStart['overlays'],
       text: 'a short text message',
+      theme: themeServiceMock.createStartContract(),
     };
     const { container } = render(<ToastNotificationText {...props} />);
     expect(container.textContent).toBe('a short text message');
@@ -29,6 +31,7 @@ describe('ToastNotificationText', () => {
     const props = {
       overlays: {} as CoreStart['overlays'],
       text: 'a text message that is longer than 140 characters. a text message that is longer than 140 characters. a text message that is longer than 140 characters. ',
+      theme: themeServiceMock.createStartContract(),
     };
     const { container } = render(<ToastNotificationText {...props} />);
     expect(container.textContent).toBe(

diff --git a/x-pack/plugins/transform/public/app/components/toast_notification_text.tsx b/x-pack/plugins/transform/public/app/components/toast_notification_text.tsx
@@ -29,13 +29,15 @@ const MAX_SIMPLE_MESSAGE_LENGTH = 140;
 // That's why we need to pass in `overlays` as a prop cannot get it via context.
 interface ToastNotificationTextProps {
   overlays: CoreStart['overlays'];
+  theme: CoreStart['theme'];
   text: any;
   previewTextLength?: number;
 }
 
 export const ToastNotificationText: FC<ToastNotificationTextProps> = ({
   overlays,
   text,
+  theme,
   previewTextLength,
 }) => {
   if (typeof text === 'string' && text.length <= MAX_SIMPLE_MESSAGE_LENGTH) {
@@ -80,7 +82,8 @@ export const ToastNotificationText: FC<ToastNotificationTextProps> = ({
               })}
             </EuiButtonEmpty>
           </EuiModalFooter>
-        </EuiModal>
+        </EuiModal>,
+        { theme$: theme.theme$ }
       )
     );
   };

diff --git a/x-pack/plugins/transform/public/app/hooks/use_delete_transform.tsx b/x-pack/plugins/transform/public/app/hooks/use_delete_transform.tsx
@@ -120,7 +120,7 @@ export const useDeleteIndexAndTargetIndex = (items: TransformListRow[]) => {
 type SuccessCountField = keyof Omit<DeleteTransformStatus, 'destinationIndex'>;
 
 export const useDeleteTransforms = () => {
-  const { overlays } = useAppDependencies();
+  const { overlays, theme } = useAppDependencies();
   const toastNotifications = useToastNotifications();
   const api = useApi();
 
@@ -136,8 +136,10 @@ export const useDeleteTransforms = () => {
           <ToastNotificationText
             previewTextLength={50}
             overlays={overlays}
+            theme={theme}
             text={getErrorMessage(results)}
-          />
+          />,
+          { theme$: theme.theme$ }
         ),
       });
       return;
@@ -203,7 +205,13 @@ export const useDeleteTransforms = () => {
               values: { transformId },
             }),
             text: toMountPoint(
-              <ToastNotificationText previewTextLength={50} overlays={overlays} text={error} />
+              <ToastNotificationText
+                previewTextLength={50}
+                overlays={overlays}
+                theme={theme}
+                text={error}
+              />,
+              { theme$: theme.theme$ }
             ),
           });
         }
@@ -219,7 +227,13 @@ export const useDeleteTransforms = () => {
               }
             ),
             text: toMountPoint(
-              <ToastNotificationText previewTextLength={50} overlays={overlays} text={error} />
+              <ToastNotificationText
+                previewTextLength={50}
+                overlays={overlays}
+                theme={theme}
+                text={error}
+              />,
+              { theme$: theme.theme$ }
             ),
           });
         }
@@ -235,7 +249,13 @@ export const useDeleteTransforms = () => {
               }
             ),
             text: toMountPoint(
-              <ToastNotificationText previewTextLength={50} overlays={overlays} text={error} />
+              <ToastNotificationText
+                previewTextLength={50}
+                overlays={overlays}
+                theme={theme}
+                text={error}
+              />,
+              { theme$: theme.theme$ }
             ),
           });
         }

diff --git a/x-pack/plugins/transform/public/app/hooks/use_start_transform.tsx b/x-pack/plugins/transform/public/app/hooks/use_start_transform.tsx
@@ -23,7 +23,7 @@ import { ToastNotificationText } from '../components';
 import { useApi } from './use_api';
 
 export const useStartTransforms = () => {
-  const deps = useAppDependencies();
+  const { overlays, theme } = useAppDependencies();
   const toastNotifications = useToastNotifications();
   const api = useApi();
 
@@ -39,7 +39,12 @@ export const useStartTransforms = () => {
           }
         ),
         text: toMountPoint(
-          <ToastNotificationText overlays={deps.overlays} text={getErrorMessage(results)} />
+          <ToastNotificationText
+            overlays={overlays}
+            theme={theme}
+            text={getErrorMessage(results)}
+          />,
+          { theme$: theme.theme$ }
         ),
       });
       return;

diff --git a/x-pack/plugins/transform/public/app/hooks/use_stop_transform.tsx b/x-pack/plugins/transform/public/app/hooks/use_stop_transform.tsx
@@ -23,7 +23,7 @@ import { ToastNotificationText } from '../components';
 import { useApi } from './use_api';
 
 export const useStopTransforms = () => {
-  const deps = useAppDependencies();
+  const { overlays, theme } = useAppDependencies();
   const toastNotifications = useToastNotifications();
   const api = useApi();
 
@@ -39,7 +39,12 @@ export const useStopTransforms = () => {
           }
         ),
         text: toMountPoint(
-          <ToastNotificationText overlays={deps.overlays} text={getErrorMessage(results)} />
+          <ToastNotificationText
+            overlays={overlays}
+            theme={theme}
+            text={getErrorMessage(results)}
+          />,
+          { theme$: theme.theme$ }
         ),
       });
       return;

diff --git a/x-pack/plugins/transform/public/app/mount_management_section.ts b/x-pack/plugins/transform/public/app/mount_management_section.ts
@@ -28,7 +28,7 @@ export async function mountManagementSection(
   const { http, notifications, getStartServices } = coreSetup;
   const startServices = await getStartServices();
   const [core, plugins] = startServices;
-  const { application, chrome, docLinks, i18n, overlays, savedObjects, uiSettings } = core;
+  const { application, chrome, docLinks, i18n, overlays, theme, savedObjects, uiSettings } = core;
   const { data, share, spaces, triggersActionsUi } = plugins;
   const { docTitle } = chrome;
 
@@ -47,6 +47,7 @@ export async function mountManagementSection(
     i18n,
     notifications,
     overlays,
+    theme,
     savedObjects,
     storage: localStorage,
     uiSettings,

diff --git a/...ransform/public/app/sections/create_transform/components/step_create/step_create_form.tsx b/...ransform/public/app/sections/create_transform/components/step_create/step_create_form.tsx
@@ -136,6 +136,7 @@ export const StepCreateForm: FC<StepCreateFormProps> = React.memo(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [created, started, indexPatternId]);
 
+    const { overlays, theme } = useAppDependencies();
     const api = useApi();
 
     async function createTransform() {
@@ -160,9 +161,11 @@ export const StepCreateForm: FC<StepCreateFormProps> = React.memo(
           }),
           text: toMountPoint(
             <ToastNotificationText
-              overlays={deps.overlays}
+              overlays={overlays}
+              theme={theme}
               text={getErrorMessage(isPutTransformsResponseSchema(resp) ? respErrors : resp)}
-            />
+            />,
+            { theme$: theme.theme$ }
           ),
         });
         setCreated(false);
@@ -214,7 +217,12 @@ export const StepCreateForm: FC<StepCreateFormProps> = React.memo(
           values: { transformId },
         }),
         text: toMountPoint(
-          <ToastNotificationText overlays={deps.overlays} text={getErrorMessage(errorMessage)} />
+          <ToastNotificationText
+            overlays={overlays}
+            theme={theme}
+            text={getErrorMessage(errorMessage)}
+          />,
+          { theme$: theme.theme$ }
         ),
       });
       setStarted(false);
@@ -275,7 +283,8 @@ export const StepCreateForm: FC<StepCreateFormProps> = React.memo(
               values: { dataViewName },
             }),
             text: toMountPoint(
-              <ToastNotificationText overlays={deps.overlays} text={getErrorMessage(e)} />
+              <ToastNotificationText overlays={overlays} theme={theme} text={getErrorMessage(e)} />,
+              { theme$: theme.theme$ }
             ),
           });
           setLoading(false);
@@ -321,7 +330,12 @@ export const StepCreateForm: FC<StepCreateFormProps> = React.memo(
                 defaultMessage: 'An error occurred getting the progress percentage:',
               }),
               text: toMountPoint(
-                <ToastNotificationText overlays={deps.overlays} text={getErrorMessage(stats)} />
+                <ToastNotificationText
+                  overlays={overlays}
+                  theme={theme}
+                  text={getErrorMessage(stats)}
+                />,
+                { theme$: theme.theme$ }
               ),
             });
             clearInterval(interval);

diff --git a/...nsform/public/app/sections/create_transform/components/step_details/step_details_form.tsx b/...nsform/public/app/sections/create_transform/components/step_details/step_details_form.tsx
@@ -118,6 +118,7 @@ export const StepDetailsForm: FC<StepDetailsFormProps> = React.memo(
       [setIndexPatternTimeField, indexPatternAvailableTimeFields]
     );
 
+    const { overlays, theme } = useAppDependencies();
     const api = useApi();
 
     // fetch existing transform IDs and indices once for form validation
@@ -150,9 +151,11 @@ export const StepDetailsForm: FC<StepDetailsFormProps> = React.memo(
             }),
             text: toMountPoint(
               <ToastNotificationText
-                overlays={deps.overlays}
+                overlays={overlays}
+                theme={theme}
                 text={getErrorMessage(transformPreview)}
-              />
+              />,
+              { theme$: theme.theme$ }
             ),
           });
         }
@@ -165,7 +168,12 @@ export const StepDetailsForm: FC<StepDetailsFormProps> = React.memo(
               defaultMessage: 'An error occurred getting the existing transform IDs:',
             }),
             text: toMountPoint(
-              <ToastNotificationText overlays={deps.overlays} text={getErrorMessage(resp)} />
+              <ToastNotificationText
+                overlays={overlays}
+                theme={theme}
+                text={getErrorMessage(resp)}
+              />,
+              { theme$: theme.theme$ }
             ),
           });
         } else {
@@ -182,7 +190,12 @@ export const StepDetailsForm: FC<StepDetailsFormProps> = React.memo(
               defaultMessage: 'An error occurred getting the existing index names:',
             }),
             text: toMountPoint(
-              <ToastNotificationText overlays={deps.overlays} text={getErrorMessage(indices)} />
+              <ToastNotificationText
+                overlays={overlays}
+                theme={theme}
+                text={getErrorMessage(indices)}
+              />,
+              { theme$: theme.theme$ }
             ),
           });
         }
@@ -195,7 +208,8 @@ export const StepDetailsForm: FC<StepDetailsFormProps> = React.memo(
               defaultMessage: 'An error occurred getting the existing data view titles:',
             }),
             text: toMountPoint(
-              <ToastNotificationText overlays={deps.overlays} text={getErrorMessage(e)} />
+              <ToastNotificationText overlays={overlays} theme={theme} text={getErrorMessage(e)} />,
+              { theme$: theme.theme$ }
             ),
           });
         }