[APM] Error thrown when creating watcher

[sorenlouv]

When creating a watch an error is thrown. The watch is successfully created but the success toast is never displayed.

Why the error occurs
The error occurs because the success toast contains KibanaLink. KibanaLink contains a hook (useKibanaCore) that relies on context. Since the content inside a toast is moved outside the root of the APM React app (using portals) the component doesn't have access to expected context, and the error is thrown

Reproduce:

1. Select any service
2. Click "Integrations"
3. Click "Enable watcher error reports"
4. Enable "Send email" and click "Create watch"

Expected result: A success toast is displayed with a link to the created watch
Actual result: No toast is displayed

Suggested solution

Make it possible to pass core as a prop to KibanaLink:

interface Props extends EuiLinkAnchorProps {
  path?: string;
  core?: LegacyCoreStart;
  children?: React.ReactNode;
}

export function KibanaLink({ path, core, ...rest }: Props) {
  const coreFromHook = useKibanaCore();
  const href = url.format({
    pathname: (core || coreFromHook).http.basePath.prepend('/app/kibana'),
    hash: path
  });
  return <EuiLink {...rest} href={href} />;
}

pass core to KibanaLink in WatcherFlyout

<KibanaLink
  core={this.context}
  path={`/management/elasticsearch/watcher/watches/watch/${id}`}
>

Error details:

Uncaught TypeError: Cannot read property 'basePath' of undefined
    at KibanaLink (KibanaLink.tsx:31)
    at renderWithHooks (react-dom.development.js:12839)
    at mountIndeterminateComponent (react-dom.development.js:14814)
    at beginWork (react-dom.development.js:15419)
    at performUnitOfWork (react-dom.development.js:19106)
    at workLoop (react-dom.development.js:19146)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:18372)

The above error occurred in the <KibanaLink> component:
    in KibanaLink
    in p
    in div (created by EuiText)
    in EuiText (created by EuiToast)
    in div (created by EuiToast)
    in EuiToast (created by EuiGlobalToastList)
    in EuiGlobalToastListItem (created by EuiGlobalToastList)
    in div (created by EuiGlobalToastList)
    in EuiGlobalToastList (created by GlobalToastList)
    in GlobalToastList
    in EuiContext (created by I18nContext)
    in PseudoLocaleWrapper (created by I18nProvider)
    in IntlProvider (created by I18nProvider)
    in I18nProvider (created by I18nContext)
    in I18nContext

Related

• This was previously fixed in Fixes rare cases where KibanaLink is loaded outside of React context #24705
• This is most likely also a problem when creating an ML job, since it contains a link that relies on context too:
  

  kibana/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx

  Lines 116 to 126 in 2b866be

  	<MLJobLink
  	serviceName={serviceName}
  	transactionType={transactionType}
  	>
  	{i18n.translate(
  	'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationText.viewJobLinkText',
  	{
  	defaultMessage: 'View job'
  	}
  	)}
  	</MLJobLink>

[elasticmachine]

Pinging @elastic/apm-ui