updating datepicker component

elastic · Aug 22, 2023 · 9b8e1e6 · 9b8e1e6
1 parent 10d2422
commit 9b8e1e6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 37 deletions.
diff --git a/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.tsx b/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.tsx
@@ -25,6 +25,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { TimeHistoryContract } from '@kbn/data-plugin/public';
 import { useUrlState } from '@kbn/ml-url-state';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 
 import { useRefreshIntervalUpdates, useTimeRangeUpdates } from '../hooks/use_timefilter';
 import { useDatePickerContext } from '../hooks/use_date_picker_context';
@@ -103,11 +104,10 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
   const {
     data,
     notifications: { toasts },
-    theme: { theme$ },
     uiSettings: config,
     uiSettingsKeys,
-    wrapWithTheme,
-    toMountPoint,
+    theme,
+    i18n: i18nStart,
   } = useDatePickerContext();
 
   const isWithinLBreakpoint = useIsWithinMaxBreakpoint('l');
@@ -184,23 +184,21 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
                   'The refresh interval in Advanced Settings is shorter than the minimum supported interval.',
               }),
           text: toMountPoint(
-            wrapWithTheme(
-              <EuiButton
-                onClick={setRefreshInterval.bind(null, {
-                  pause: refreshInterval.pause,
-                  value: DEFAULT_REFRESH_INTERVAL_MS,
-                })}
-              >
-                <FormattedMessage
-                  id="xpack.ml.datePicker.pageRefreshResetButton"
-                  defaultMessage="Set to {defaultInterval}"
-                  values={{
-                    defaultInterval: `${DEFAULT_REFRESH_INTERVAL_MS / 1000}s`,
-                  }}
-                />
-              </EuiButton>,
-              theme$
-            )
+            <EuiButton
+              onClick={setRefreshInterval.bind(null, {
+                pause: refreshInterval.pause,
+                value: DEFAULT_REFRESH_INTERVAL_MS,
+              })}
+            >
+              <FormattedMessage
+                id="xpack.ml.datePicker.pageRefreshResetButton"
+                defaultMessage="Set to {defaultInterval}"
+                values={{
+                  defaultInterval: `${DEFAULT_REFRESH_INTERVAL_MS / 1000}s`,
+                }}
+              />
+            </EuiButton>,
+            { theme, i18n: i18nStart }
           ),
         },
         { toastLifeTimeMs: 30000 }

diff --git a/x-pack/packages/ml/date_picker/src/hooks/use_date_picker_context.tsx b/x-pack/packages/ml/date_picker/src/hooks/use_date_picker_context.tsx
@@ -9,9 +9,8 @@ import React, { createContext, useContext, type FC } from 'react';
 
 import type { UI_SETTINGS } from '@kbn/data-plugin/common';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
-import type { CoreSetup, IUiSettingsClient, ThemeServiceStart } from '@kbn/core/public';
+import type { CoreSetup, I18nStart, IUiSettingsClient, ThemeServiceStart } from '@kbn/core/public';
 import type { HttpStart } from '@kbn/core/public';
-import type { toMountPoint, wrapWithTheme } from '@kbn/kibana-react-plugin/public';
 
 /**
  * Date Picker Dependencies to be passed on via `DatePickerContextProvider`.
@@ -42,13 +41,9 @@ export interface DatePickerDependencies {
    */
   uiSettingsKeys: typeof UI_SETTINGS;
   /**
-   * helper to be used with notifications.
+   * Tnternationalisation service
    */
-  wrapWithTheme: typeof wrapWithTheme;
-  /**
-   * helper to be used with notifications.
-   */
-  toMountPoint: typeof toMountPoint;
+  i18n: I18nStart;
 }
 
 /**

diff --git a/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx b/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx
@@ -12,15 +12,11 @@ import { pick } from 'lodash';
 import type { CoreStart } from '@kbn/core/public';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 
-import {
-  toMountPoint as toMountPointDeprecated,
-  wrapWithTheme,
-  KibanaContextProvider,
-} from '@kbn/kibana-react-plugin/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 import type { DataViewField, DataView } from '@kbn/data-views-plugin/common';
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
-import { DatePickerContextProvider } from '@kbn/ml-date-picker';
+import { DatePickerContextProvider, type DatePickerDependencies } from '@kbn/ml-date-picker';
 import { StorageContextProvider } from '@kbn/ml-local-storage';
 import type { AiopsPluginStartDeps } from '../../types';
 import { AiopsAppContext } from '../../hooks/use_aiops_app_context';
@@ -52,10 +48,9 @@ export async function showCategorizeFlyout(
         application,
         ...plugins,
       };
-      const datePickerDeps = {
+      const datePickerDeps: DatePickerDependencies = {
         ...pick(appDependencies, ['data', 'http', 'notifications', 'theme', 'uiSettings']),
-        toMountPoint: toMountPointDeprecated,
-        wrapWithTheme,
+        i18n,
         uiSettingsKeys: UI_SETTINGS,
       };