adapt calls by using reactMount

elastic · Oct 28, 2019 · d45da3e · d45da3e
1 parent 772a304
commit d45da3e
Show file tree

Hide file tree

Showing 19 changed files with 52 additions and 41 deletions.
diff --git a/...ashboard_embeddable_container/public/np_ready/public/lib/actions/replace_panel_flyout.tsx b/...ashboard_embeddable_container/public/np_ready/public/lib/actions/replace_panel_flyout.tsx
@@ -20,16 +20,10 @@
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 
-import { NotificationsStart } from 'src/core/public';
+import { NotificationsStart, Toast } from 'src/core/public';
 import { DashboardPanelState } from 'src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public';
 
-import {
-  EuiFlyout,
-  EuiFlyoutBody,
-  EuiFlyoutHeader,
-  EuiTitle,
-  EuiGlobalToastListToast as Toast,
-} from '@elastic/eui';
+import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
 
 import { IContainer } from '../../../../../../embeddable_api/public/np_ready/public';
 import {

diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.tsx
@@ -36,7 +36,7 @@ import { EuiSuperUpdateButton, OnRefreshProps } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import { Toast } from 'src/core/public';
 import { TimeRange } from 'src/plugins/data/public';
-import { useKibana } from '../../../../../../../plugins/kibana_react/public';
+import { useKibana, reactMount } from '../../../../../../../plugins/kibana_react/public';
 
 import { IndexPattern } from '../../../index_patterns';
 import { QueryBarInput } from './query_bar_input';
@@ -301,7 +301,7 @@ function QueryBarTopRowUI(props: Props) {
           id: 'data.query.queryBar.luceneSyntaxWarningTitle',
           defaultMessage: 'Lucene syntax warning',
         }),
-        text: (
+        text: reactMount(
           <div>
             <p>
               <FormattedMessage

diff --git a/src/legacy/ui/public/legacy_compat/angular_config.tsx b/src/legacy/ui/public/legacy_compat/angular_config.tsx
@@ -39,6 +39,7 @@ import { fatalError } from 'ui/notify';
 import { capabilities } from 'ui/capabilities';
 // @ts-ignore
 import { modifyUrl } from 'ui/url';
+import { reactMount } from '../../../../plugins/kibana_react/public';
 // @ts-ignore
 import { UrlOverflowService } from '../error_url_overflow';
 import { npStart } from '../new_platform';
@@ -305,7 +306,7 @@ const $setupUrlOverflowHandling = (newPlatform: CoreStart) => (
           title: i18n.translate('common.ui.chrome.bigUrlWarningNotificationTitle', {
             defaultMessage: 'The URL is big and Kibana might stop working',
           }),
-          text: (
+          text: reactMount(
             <Fragment>
               <FormattedMessage
                 id="common.ui.chrome.bigUrlWarningNotificationMessage"

diff --git a/src/plugins/kibana_react/public/notifications/create_notifications.tsx b/src/plugins/kibana_react/public/notifications/create_notifications.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { KibanaServices } from '../context/types';
 import { KibanaReactNotifications } from './types';
+import { reactMount } from '../util';
 
 export const createNotifications = (services: KibanaServices): KibanaReactNotifications => {
   const show: KibanaReactNotifications['toasts']['show'] = ({
@@ -34,8 +35,8 @@ export const createNotifications = (services: KibanaServices): KibanaReactNotifi
       throw new TypeError('Could not show notification as notifications service is not available.');
     }
     services.notifications!.toasts.add({
-      title,
-      text: <>{body || null}</>,
+      title: reactMount(title),
+      text: reactMount(<>{body || null}</>),
       color,
       iconType,
       toastLifeTimeMs,

diff --git a/.../public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx b/.../public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx
@@ -6,6 +6,7 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { Component } from 'react';
+import { reactMount } from '../../../../../../../../../../src/plugins/kibana_react/public';
 import { startMLJob } from '../../../../../services/rest/ml';
 import { IUrlParams } from '../../../../../context/UrlParamsContext/types';
 import { MLJobLink } from '../../../../shared/Links/MachineLearningLinks/MLJobLink';
@@ -71,7 +72,7 @@ export class MachineLearningFlyout extends Component<Props, State> {
           defaultMessage: 'Job creation failed'
         }
       ),
-      text: (
+      text: reactMount(
         <p>
           {i18n.translate(
             'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreationFailedNotificationText',
@@ -105,7 +106,7 @@ export class MachineLearningFlyout extends Component<Props, State> {
           defaultMessage: 'Job successfully created'
         }
       ),
-      text: (
+      text: reactMount(
         <p>
           {i18n.translate(
             'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationText',

diff --git a/...cy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx b/...cy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx
@@ -30,6 +30,7 @@ import { padLeft, range } from 'lodash';
 import moment from 'moment-timezone';
 import React, { Component } from 'react';
 import styled from 'styled-components';
+import { reactMount } from '../../../../../../../../../src/plugins/kibana_react/public';
 import { KibanaCoreContext } from '../../../../../../observability/public';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
 import { KibanaLink } from '../../../shared/Links/KibanaLink';
@@ -219,7 +220,7 @@ export class WatcherFlyout extends Component<
           defaultMessage: 'Watch creation failed'
         }
       ),
-      text: (
+      text: reactMount(
         <p>
           {i18n.translate(
             'xpack.apm.serviceDetails.enableErrorReportsPanel.watchCreationFailedNotificationText',
@@ -243,7 +244,7 @@ export class WatcherFlyout extends Component<
           defaultMessage: 'New watch created!'
         }
       ),
-      text: (
+      text: reactMount(
         <p>
           {i18n.translate(
             'xpack.apm.serviceDetails.enableErrorReportsPanel.watchCreatedNotificationText',

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/index.tsx
@@ -9,6 +9,7 @@ import { EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useMemo } from 'react';
 import url from 'url';
+import { reactMount } from '../../../../../../../../src/plugins/kibana_react/public';
 import { useFetcher } from '../../../hooks/useFetcher';
 import { NoServicesMessage } from './NoServicesMessage';
 import { ServiceList } from './ServiceList';
@@ -55,7 +56,7 @@ export function ServiceOverview() {
           defaultMessage:
             'Legacy data was detected within the selected time range'
         }),
-        text: (
+        text: reactMount(
           <p>
             {i18n.translate('xpack.apm.serviceOverview.toastText', {
               defaultMessage:

diff --git a/x-pack/legacy/plugins/apm/public/hooks/useFetcher.tsx b/x-pack/legacy/plugins/apm/public/hooks/useFetcher.tsx
@@ -8,6 +8,7 @@ import React, { useContext, useEffect, useState, useMemo } from 'react';
 import { idx } from '@kbn/elastic-idx';
 import { i18n } from '@kbn/i18n';
 import { IHttpFetchError } from 'src/core/public';
+import { reactMount } from '../../../../../../src/plugins/kibana_react/public';
 import { LoadingIndicatorContext } from '../context/LoadingIndicatorContext';
 import { useComponentId } from './useComponentId';
 import { useKibanaCore } from '../../../observability/public';
@@ -92,7 +93,7 @@ export function useFetcher<TReturn>(
             title: i18n.translate('xpack.apm.fetcher.error.title', {
               defaultMessage: `Error while fetching resource`
             }),
-            text: (
+            text: reactMount(
               <div>
                 <h5>
                   {i18n.translate('xpack.apm.fetcher.error.status', {

diff --git a/x-pack/legacy/plugins/infra/public/hooks/use_http_request.tsx b/x-pack/legacy/plugins/infra/public/hooks/use_http_request.tsx
@@ -10,6 +10,7 @@ import { toastNotifications } from 'ui/notify';
 import { i18n } from '@kbn/i18n';
 import { idx } from '@kbn/elastic-idx/target';
 import { KFetchError } from 'ui/kfetch/kfetch_error';
+import { reactMount } from '../../../../../../src/plugins/kibana_react/public';
 import { useTrackedPromise } from '../utils/use_tracked_promise';
 export function useHTTPRequest<Response>(
   pathname: string,
@@ -36,7 +37,7 @@ export function useHTTPRequest<Response>(
           title: i18n.translate('xpack.infra.useHTTPRequest.error.title', {
             defaultMessage: `Error while fetching resource`,
           }),
-          text: (
+          text: reactMount(
             <div>
               <h5>
                 {i18n.translate('xpack.infra.useHTTPRequest.error.status', {

diff --git a/x-pack/legacy/plugins/reporting/public/components/reporting_panel_content.tsx b/x-pack/legacy/plugins/reporting/public/components/reporting_panel_content.tsx
@@ -10,6 +10,7 @@ import React, { Component, ReactElement } from 'react';
 import { KFetchError } from 'ui/kfetch/kfetch_error';
 import { toastNotifications } from 'ui/notify';
 import url from 'url';
+import { reactMount } from '../../../../../../src/plugins/kibana_react/public';
 import { reportingClient } from '../lib/reporting_client';
 
 interface Props {
@@ -209,7 +210,7 @@ class ReportingPanelContentUi extends Component<Props, State> {
             },
             { objectType: this.props.objectType }
           ),
-          text: (
+          text: reactMount(
             <FormattedMessage
               id="xpack.reporting.panelContent.successfullyQueuedReportNotificationDescription"
               defaultMessage="Track its progress in Management"
@@ -229,7 +230,7 @@ class ReportingPanelContentUi extends Component<Props, State> {
               },
               { objectType: this.props.objectType }
             ),
-            text: (
+            text: reactMount(
               <FormattedMessage
                 id="xpack.reporting.panelContent.whatCanBeExportedWarningDescription"
                 defaultMessage="Please save your work first"
@@ -256,7 +257,7 @@ class ReportingPanelContentUi extends Component<Props, State> {
             id: 'xpack.reporting.panelContent.notification.reportingErrorTitle',
             defaultMessage: 'Reporting error',
           }),
-          text: kfetchError.message || defaultMessage,
+          text: reactMount(kfetchError.message || defaultMessage),
           'data-test-subj': 'queueReportError',
         });
       });

diff --git a/x-pack/legacy/plugins/transform/public/app/hooks/use_delete_transform.tsx b/x-pack/legacy/plugins/transform/public/app/hooks/use_delete_transform.tsx
@@ -8,6 +8,7 @@ import React from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { toastNotifications } from 'ui/notify';
+import { reactMount } from '../../../../../../../src/plugins/kibana_react/public';
 
 import { TransformListRow, refreshTransformList$, REFRESH_TRANSFORM_LIST_STATE } from '../common';
 import { ToastNotificationText } from '../components';
@@ -53,7 +54,7 @@ export const useDeleteTransforms = () => {
         title: i18n.translate('xpack.transform.transformList.deleteTransformGenericErrorMessage', {
           defaultMessage: 'An error occurred calling the API endpoint to delete transforms.',
         }),
-        text: <ToastNotificationText text={e} />,
+        text: reactMount(<ToastNotificationText text={e} />),
       });
     }
   };

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
@@ -29,6 +29,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 
+import { reactMount } from '../../../../../../../../../../src/plugins/kibana_react/public';
 import { ToastNotificationText } from '../../../../components';
 import { useApi } from '../../../../hooks/use_api';
 import { isKibanaContextInitialized, KibanaContext } from '../../../../lib/kibana';
@@ -112,7 +113,7 @@ export const StepCreateForm: SFC<Props> = React.memo(
             defaultMessage: 'An error occurred creating the transform {transformId}:',
             values: { transformId },
           }),
-          text: <ToastNotificationText text={e} />,
+          text: reactMount(<ToastNotificationText text={e} />),
         });
         return false;
       }
@@ -142,7 +143,7 @@ export const StepCreateForm: SFC<Props> = React.memo(
             defaultMessage: 'An error occurred starting the transform {transformId}:',
             values: { transformId },
           }),
-          text: <ToastNotificationText text={e} />,
+          text: reactMount(<ToastNotificationText text={e} />),
         });
       }
     }
@@ -201,7 +202,7 @@ export const StepCreateForm: SFC<Props> = React.memo(
               'An error occurred creating the Kibana index pattern {indexPatternName}:',
             values: { indexPatternName },
           }),
-          text: <ToastNotificationText text={e} />,
+          text: reactMount(<ToastNotificationText text={e} />),
         });
         return false;
       }
@@ -232,7 +233,7 @@ export const StepCreateForm: SFC<Props> = React.memo(
               title: i18n.translate('xpack.transform.stepCreateForm.progressErrorMessage', {
                 defaultMessage: 'An error occurred getting the progress percentage:',
               }),
-              text: <ToastNotificationText text={e} />,
+              text: reactMount(<ToastNotificationText text={e} />),
             });
             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
@@ -12,6 +12,7 @@ import { toastNotifications } from 'ui/notify';
 
 import { EuiLink, EuiSwitch, EuiFieldText, EuiForm, EuiFormRow, EuiSelect } from '@elastic/eui';
 
+import { reactMount } from '../../../../../../../../../../src/plugins/kibana_react/public';
 import { isKibanaContextInitialized, KibanaContext } from '../../../../lib/kibana';
 import { isValidIndexName } from '../../../../../../common/utils/es_utils';
 
@@ -91,7 +92,7 @@ export const StepDetailsForm: SFC<Props> = React.memo(({ overrides = {}, onChang
             title: i18n.translate('xpack.transform.stepDetailsForm.errorGettingTransformList', {
               defaultMessage: 'An error occurred getting the existing transform IDs:',
             }),
-            text: <ToastNotificationText text={e} />,
+            text: reactMount(<ToastNotificationText text={e} />),
           });
         }
 
@@ -102,7 +103,7 @@ export const StepDetailsForm: SFC<Props> = React.memo(({ overrides = {}, onChang
             title: i18n.translate('xpack.transform.stepDetailsForm.errorGettingIndexNames', {
               defaultMessage: 'An error occurred getting the existing index names:',
             }),
-            text: <ToastNotificationText text={e} />,
+            text: reactMount(<ToastNotificationText text={e} />),
           });
         }
 
@@ -116,7 +117,7 @@ export const StepDetailsForm: SFC<Props> = React.memo(({ overrides = {}, onChang
                 defaultMessage: 'An error occurred getting the existing index pattern titles:',
               }
             ),
-            text: <ToastNotificationText text={e} />,
+            text: reactMount(<ToastNotificationText text={e} />),
           });
         }
       }

diff --git a/x-pack/plugins/reporting/public/components/general_error.tsx b/x-pack/plugins/reporting/public/components/general_error.tsx
@@ -8,9 +8,10 @@ import React, { Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { ToastInput } from '../../../../../src/core/public';
+import { reactMount } from '../../../../../src/plugins/kibana_react/public';
 
 export const getGeneralErrorToast = (errorText: string, err: Error): ToastInput => ({
-  text: (
+  text: reactMount(
     <Fragment>
       <EuiCallOut title={errorText} color="danger" iconType="alert">
         {err.toString()}

diff --git a/x-pack/plugins/reporting/public/components/job_failure.tsx b/x-pack/plugins/reporting/public/components/job_failure.tsx
@@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { ToastInput } from '../../../../../src/core/public';
+import { reactMount } from '../../../../../src/plugins/kibana_react/public';
 import { JobSummary, ManagementLinkFn } from '../../index.d';
 
 export const getFailureToast = (
@@ -17,14 +18,14 @@ export const getFailureToast = (
   getManagmenetLink: ManagementLinkFn
 ): ToastInput => {
   return {
-    title: (
+    title: reactMount(
       <FormattedMessage
         id="xpack.reporting.publicNotifier.error.couldNotCreateReportTitle"
         defaultMessage="Could not create report for {reportObjectType} '{reportObjectTitle}'."
         values={{ reportObjectType: job.type, reportObjectTitle: job.title }}
       />
     ),
-    text: (
+    text: reactMount(
       <Fragment>
         <EuiCallOut
           size="m"

diff --git a/x-pack/plugins/reporting/public/components/job_success.tsx b/x-pack/plugins/reporting/public/components/job_success.tsx
@@ -7,6 +7,7 @@
 import React, { Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { ToastInput } from '../../../../../src/core/public';
+import { reactMount } from '../../../../../src/plugins/kibana_react/public';
 import { JobId, JobSummary } from '../../index.d';
 import { ReportLink } from './report_link';
 import { DownloadButton } from './download_button';
@@ -16,15 +17,15 @@ export const getSuccessToast = (
   getReportLink: () => string,
   getDownloadLink: (jobId: JobId) => string
 ): ToastInput => ({
-  title: (
+  title: reactMount(
     <FormattedMessage
       id="xpack.reporting.publicNotifier.successfullyCreatedReportNotificationTitle"
       defaultMessage="Created report for {reportObjectType} '{reportObjectTitle}'"
       values={{ reportObjectType: job.type, reportObjectTitle: job.title }}
     />
   ),
   color: 'success',
-  text: (
+  text: reactMount(
     <Fragment>
       <p>
         <ReportLink getUrl={getReportLink} />

diff --git a/x-pack/plugins/reporting/public/components/job_warning_formulas.tsx b/x-pack/plugins/reporting/public/components/job_warning_formulas.tsx
@@ -7,6 +7,7 @@
 import React, { Fragment } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { ToastInput } from '../../../../../src/core/public';
+import { reactMount } from '../../../../../src/plugins/kibana_react/public';
 import { JobId, JobSummary } from '../../index.d';
 import { ReportLink } from './report_link';
 import { DownloadButton } from './download_button';
@@ -16,14 +17,14 @@ export const getWarningFormulasToast = (
   getReportLink: () => string,
   getDownloadLink: (jobId: JobId) => string
 ): ToastInput => ({
-  title: (
+  title: reactMount(
     <FormattedMessage
       id="xpack.reporting.publicNotifier.csvContainsFormulas.formulaReportTitle"
       defaultMessage="Report may contain formulas {reportObjectType} '{reportObjectTitle}'"
       values={{ reportObjectType: job.type, reportObjectTitle: job.title }}
     />
   ),
-  text: (
+  text: reactMount(
     <Fragment>
       <p>
         <FormattedMessage