Delete legacy markdown components

packages/kbn-text-based-editor/src/esql_documentation_sections.tsx

@@ -7,7 +7,14 @@
  */
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import * as md from '@kbn/shared-ux-markdown';
+
+const Markdown: React.FC<{ markdown: string; openLinksInNewTab?: boolean }> = ({
+  markdown,
+  openLinksInNewTab,
+}) => {
+  return <md.Markdown markdownContent={markdown} openLinksInNewTab={openLinksInNewTab} readOnly />;
+};
 
 export const initialSection = (
   <Markdown

packages/kbn-text-based-editor/src/sql_documentation_sections.tsx

@@ -7,7 +7,11 @@
  */
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import * as md from '@kbn/shared-ux-markdown';
+
+const Markdown: React.FC<{ markdown: string }> = ({ markdown }) => {
+  return <md.Markdown markdownContent={markdown} readOnly />;
+};
 
 export const initialSection = (
   <Markdown

packages/kbn-text-based-editor/tsconfig.json

@@ -23,7 +23,8 @@
     "@kbn/data-plugin",
     "@kbn/expressions-plugin",
     "@kbn/data-views-plugin",
-    "@kbn/index-management-plugin"
+    "@kbn/index-management-plugin",
+    "@kbn/shared-ux-markdown"
   ],
   "exclude": [
     "target/**/*",

packages/shared-ux/markdown/impl/index.ts

@@ -7,3 +7,4 @@
  */
 
 export { Markdown } from './markdown';
+export { MarkdownSimple, type MarkdownSimpleProps } from './markdown_simple';

packages/shared-ux/markdown/impl/markdown.tsx

@@ -51,7 +51,7 @@ export const Markdown = ({
 
   // Render EuiMarkdownFormat when readOnly set to true
   if (readOnly) {
-    if (!children && !markdownContent) {
+    if (!children && typeof markdownContent !== 'string') {
       throw new Error('Markdown content is required in [readOnly] mode');
     }
     return (

packages/shared-ux/markdown/impl/markdown_simple.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { EuiMarkdownFormat } from '@elastic/eui';
+
+export interface MarkdownSimpleProps {
+  src: string;
+}
+
+export const MarkdownSimple: React.FC<MarkdownSimpleProps> = ({ src }) => (
+  <EuiMarkdownFormat aria-label={'markdown component'} children={src} />
+);

src/plugins/controls/public/control_group/component/control_error_component.tsx

@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 
 import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import * as md from '@kbn/shared-ux-markdown';
 
 interface ControlErrorProps {
   error: Error | string;
@@ -46,8 +46,9 @@ export const ControlError = ({ error }: ControlErrorProps) => {
         anchorClassName="errorEmbeddableCompact__popoverAnchor"
         closePopover={() => setPopoverOpen(false)}
       >
-        <Markdown
-          markdown={errorMessage}
+        <md.Markdown
+          readOnly
+          markdownContent={errorMessage}
           openLinksInNewTab={true}
           data-test-subj="errorMessageMarkdown"
         />

src/plugins/controls/tsconfig.json

@@ -36,6 +36,7 @@
     "@kbn/safer-lodash-set",
     "@kbn/ui-actions-plugin",
     "@kbn/core-mount-utils-browser",
+    "@kbn/shared-ux-markdown",
   ],
   "exclude": [
     "target/**/*",

src/plugins/discover/public/application/context/hooks/use_context_app_fetch.tsx

@@ -8,7 +8,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { toMountPoint } from '@kbn/react-kibana-mount';
-import { MarkdownSimple } from '@kbn/kibana-react-plugin/public';
+import * as md from '@kbn/shared-ux-markdown';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { SortDirection } from '@kbn/data-plugin/public';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
@@ -105,7 +105,7 @@ export function useContextAppFetch({
       setState(createError('anchorStatus', FailureReason.UNKNOWN, error));
       toastNotifications.addDanger({
         title: errorTitle,
-        text: toMountPoint(<MarkdownSimple>{error.message}</MarkdownSimple>, {
+        text: toMountPoint(<md.MarkdownSimple src={String(error.message)} />, {
           theme: services.core.theme,
           i18n: services.core.i18n,
         }),
@@ -160,7 +160,7 @@ export function useContextAppFetch({
         setState(createError(statusKey, FailureReason.UNKNOWN, error));
         toastNotifications.addDanger({
           title: errorTitle,
-          text: toMountPoint(<MarkdownSimple>{error.message}</MarkdownSimple>, {
+          text: toMountPoint(<md.MarkdownSimple src={String(error.message)} />, {
             theme: services.core.theme,
             i18n: services.core.i18n,
           }),

src/plugins/discover/public/application/view_alert/view_alert_utils.tsx

@@ -15,7 +15,7 @@ import type { Rule } from '@kbn/alerting-plugin/common';
 import type { RuleTypeParams } from '@kbn/alerting-plugin/common';
 import { ISearchSource, SerializedSearchSourceFields, getTime } from '@kbn/data-plugin/common';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
-import { MarkdownSimple } from '@kbn/kibana-react-plugin/public';
+import * as md from '@kbn/shared-ux-markdown';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 import { Filter } from '@kbn/es-query';
 import { DiscoverAppLocatorParams } from '../../../common/locator';
@@ -83,7 +83,7 @@ export const getAlertUtils = (
       });
       toastNotifications.addDanger({
         title: errorTitle,
-        text: toMountPoint(<MarkdownSimple>{error.message}</MarkdownSimple>, {
+        text: toMountPoint(<md.MarkdownSimple src={String(error.message)} />, {
           theme: core.theme,
           i18n: core.i18n,
         }),
@@ -106,7 +106,7 @@ export const getAlertUtils = (
       });
       toastNotifications.addDanger({
         title: errorTitle,
-        text: toMountPoint(<MarkdownSimple>{error.message}</MarkdownSimple>, {
+        text: toMountPoint(<md.MarkdownSimple src={String(error.message)} />, {
           theme: core.theme,
           i18n: core.i18n,
         }),

src/plugins/discover/tsconfig.json

@@ -74,6 +74,7 @@
     "@kbn/rule-data-utils",
     "@kbn/global-search-plugin",
     "@kbn/resizable-layout",
+    "@kbn/shared-ux-markdown",
     "@kbn/core-chrome-browser"
   ],
   "exclude": [

src/plugins/embeddable/public/embeddable_panel/embeddable_panel_error.tsx

@@ -12,7 +12,7 @@ import React, { ReactNode, useEffect, useMemo, useState } from 'react';
 import { EuiButtonEmpty, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 
 import type { MaybePromise } from '@kbn/utility-types';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import * as md from '@kbn/shared-ux-markdown';
 import { ErrorLike } from '@kbn/expressions-plugin/common';
 
 import { EditPanelAction } from './panel_actions';
@@ -65,12 +65,8 @@ export function EmbeddablePanelError({
   return (
     <EuiEmptyPrompt
       body={
-        <EuiText size="s">
-          <Markdown
-            markdown={error.message}
-            openLinksInNewTab={true}
-            data-test-subj="errorMessageMarkdown"
-          />
+        <EuiText size="s" data-test-subj="errorMessageMarkdown">
+          <md.Markdown readOnly markdownContent={error.message} openLinksInNewTab={true} />
         </EuiText>
       }
       data-test-subj="embeddableStackError"

src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx

@@ -29,11 +29,23 @@ test('ErrorEmbeddable renders an embeddable with markdown message', async () =>
   await waitFor(() => getByTestId('errorMessageMarkdown')); // wait for lazy markdown component
   expect(getByText(/some link/i)).toMatchInlineSnapshot(`
     <a
+      class="euiLink emotion-euiLink-primary"
       href="http://localhost:5601/takeMeThere"
       rel="noopener noreferrer"
       target="_blank"
     >
       some link
+      <span
+        class="emotion-euiLink__externalIcon"
+        data-euiicon-type="popout"
+      >
+        External link
+      </span>
+      <span
+        class="emotion-euiScreenReaderOnly-euiLink__screenReaderText"
+      >
+        (opens in a new tab or window)
+      </span>
     </a>
   `);
 });

src/plugins/embeddable/tsconfig.json

@@ -34,6 +34,7 @@
     "@kbn/react-kibana-mount",
     "@kbn/unified-search-plugin",
     "@kbn/data-views-plugin",
+    "@kbn/shared-ux-markdown",
   ],
   "exclude": ["target/**/*"]
 }

src/plugins/expression_error/public/components/error/error.tsx

@@ -9,7 +9,7 @@
 import React, { FC } from 'react';
 import { EuiButtonIcon, EuiCallOut } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import * as md from '@kbn/shared-ux-markdown';
 import { ShowDebugging } from './show_debugging';
 
 export interface Props {
@@ -47,7 +47,7 @@ export const Error: FC<Props> = ({ payload, onClose }) => {
       <p>{message ? strings.getDescription() : ''}</p>
       {message && (
         <p style={{ padding: '0 16px' }}>
-          <Markdown markdown={message} openLinksInNewTab={true} />
+          <md.Markdown readOnly markdownContent={message} openLinksInNewTab={true} />
         </p>
       )}
       <ShowDebugging payload={payload} />

src/plugins/expression_error/tsconfig.json

@@ -16,6 +16,7 @@
     "@kbn/i18n",
     "@kbn/kibana-react-plugin",
     "@kbn/i18n-react",
+    "@kbn/shared-ux-markdown",
   ],
   "exclude": [
     "target/**/*",

src/plugins/kibana_react/public/index.ts

@@ -70,10 +70,14 @@ export { ValidatedDualRange } from './validated_range';
 export type { ToastInput, KibanaReactNotifications } from './notifications';
 export { createNotifications } from './notifications';
 
+export { toMountPoint } from './util';
+
 /** @deprecated use `Markdown` from `@kbn/shared-ux-markdown` */
-export { Markdown, MarkdownSimple } from './markdown';
+export {
+  MarkdownButThisComponentIsDEPRECATED,
+  MarkdownSimpleButThisComponentIsDEPRECATED,
+} from './markdown';
 
-export { toMountPoint } from './util';
 export type { ToMountPointOptions } from './util';
 
 /** @deprecated Use `RedirectAppLinks` from `@kbn/shared-ux-link-redirect-app` */

src/plugins/kibana_react/public/markdown/index.tsx

@@ -19,15 +19,15 @@ const Fallback = () => (
 
 /** @deprecated use `Markdown` from `@kbn/shared-ux-markdown` */
 const LazyMarkdownSimple = React.lazy(() => import('./markdown_simple'));
-export const MarkdownSimple = (props: MarkdownSimpleProps) => (
+export const MarkdownSimpleButThisComponentIsDEPRECATED = (props: MarkdownSimpleProps) => (
   <React.Suspense fallback={<Fallback />}>
     <LazyMarkdownSimple {...props} />
   </React.Suspense>
 );
 
 /** @deprecated use `Markdown` from `@kbn/shared-ux-markdown` */
 const LazyMarkdown = React.lazy(() => import('./markdown'));
-export const Markdown = (props: MarkdownProps) => (
+export const MarkdownButThisComponentIsDEPRECATED = (props: MarkdownProps) => (
   <React.Suspense fallback={<Fallback />}>
     <LazyMarkdown {...props} />
   </React.Suspense>

src/plugins/vis_type_markdown/kibana.jsonc

@@ -13,7 +13,6 @@
     ],
     "requiredBundles": [
       "expressions",
-      "kibanaReact",
       "visDefaultEditor",
       "visualizations"
     ]

src/plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx

@@ -29,7 +29,9 @@ describe('markdown vis controller', () => {
 
     expect(getByText('markdown')).toMatchInlineSnapshot(`
       <a
+        class="euiLink emotion-euiLink-primary"
         href="http://daringfireball.net/projects/markdown"
+        rel="noreferrer"
       >
         markdown
       </a>
@@ -53,7 +55,8 @@ describe('markdown vis controller', () => {
 
     expect(getByText(/testing/i)).toMatchInlineSnapshot(`
       <p>
-        Testing &lt;a&gt;html&lt;/a&gt;
+        Testing 
+        html
       </p>
     `);
   });

src/plugins/vis_type_markdown/public/markdown_vis_controller.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useEffect } from 'react';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
+import * as md from '@kbn/shared-ux-markdown';
 import { MarkdownVisParams } from './types';
 
 import './markdown_vis.scss';
@@ -25,12 +25,8 @@ const MarkdownVisComponent = ({
   useEffect(renderComplete); // renderComplete will be called after each render to signal, that we are done with rendering.
 
   return (
-    <div className="mkdVis" style={{ fontSize: `${fontSize}pt` }}>
-      <Markdown
-        data-test-subj="markdownBody"
-        markdown={markdown}
-        openLinksInNewTab={openLinksInNewTab}
-      />
+    <div className="mkdVis" style={{ fontSize: `${fontSize}pt` }} data-test-subj="markdownBody">
+      <md.Markdown readOnly markdownContent={markdown} openLinksInNewTab={openLinksInNewTab} />
     </div>
   );
 };

src/plugins/vis_type_markdown/tsconfig.json

@@ -12,11 +12,11 @@
     "@kbn/core",
     "@kbn/expressions-plugin",
     "@kbn/visualizations-plugin",
-    "@kbn/kibana-react-plugin",
     "@kbn/vis-default-editor-plugin",
     "@kbn/i18n",
     "@kbn/i18n-react",
     "@kbn/config-schema",
+    "@kbn/shared-ux-markdown",
   ],
   "exclude": [
     "target/**/*",

src/plugins/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js

@@ -11,8 +11,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { ClassNames } from '@emotion/react';
-import { Markdown } from '@kbn/kibana-react-plugin/public';
-
+import { MarkdownButThisComponentIsDEPRECATED } from '@kbn/kibana-react-plugin/public';
 import { ErrorComponent } from '../../error';
 import { replaceVars } from '../../lib/replace_vars';
 import { convertSeriesToVars } from '../../lib/convert_series_to_vars';
@@ -77,7 +76,7 @@ function MarkdownVisualization(props) {
             >
               <div>
                 {!markdownError && (
-                  <Markdown
+                  <MarkdownButThisComponentIsDEPRECATED
                     onRender={initialRender}
                     markdown={markdownSource}
                     openLinksInNewTab={model.markdown_openLinksInNewTab}

src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.tsx

@@ -13,7 +13,8 @@ import { EventEmitter } from 'events';
 import { i18n } from '@kbn/i18n';
 import { FilterStateStore } from '@kbn/es-query';
 
-import { KibanaThemeProvider, MarkdownSimple, toMountPoint } from '@kbn/kibana-react-plugin/public';
+import { KibanaThemeProvider, toMountPoint } from '@kbn/kibana-react-plugin/public';
+import * as md from '@kbn/shared-ux-markdown';
 import { connectToQueryState } from '@kbn/data-plugin/public';
 import { migrateLegacyQuery } from '../migrate_legacy_query';
 import {
@@ -129,7 +130,7 @@ export const useVisualizeAppState = (
               }),
               text: toMountPoint(
                 <KibanaThemeProvider theme$={services.theme.theme$}>
-                  <MarkdownSimple>{error.message}</MarkdownSimple>
+                  <md.Markdown readOnly markdownContent={error.message} />
                 </KibanaThemeProvider>
               ),
             });

src/plugins/visualizations/tsconfig.json

@@ -64,7 +64,8 @@
     "@kbn/serverless",
     "@kbn/no-data-page-plugin",
     "@kbn/search-response-warnings",
-    "@kbn/logging"
+    "@kbn/logging",
+    "@kbn/shared-ux-markdown"
   ],
   "exclude": [
     "target/**/*",