[Meta][Discuss] Deprecation of Markdown Components

[rshen91]

Summary

Markdown, MarkdownSimple, Markdown-it etc. are used in various parts of Kibana. These implementations of Markdown will be deprecated and condensed into one implementation for a future Shared UX component. Please see #140207 for more information. This component will use the EuiMarkdownFormat component (currently in beta). In migrating to this new Markdown component, we will be able to provide feedback to @elastic/eui-design before their GA of the component.

The purpose of this PR is to track the implementations of markdown currently in Kibana and alert teams of the deprecation and then migration to a new component.

Please feel free to add any comments/clarifications on requirements you would expect from the future Markdown component. Thank you!

---

MarkdownSimple from kibana-react

@elastic/kibana-data-discovery currently is using MarkdownSimple component in the following places:

1. Use_context_app_fetch.tsx - used as a callout/toast to display errors
2. View_alert_utils.tsx - used to display error messages like a toast
3. Use_visualize_app_state.tsx - show error messages

From what I understand, the MarkdownSimple is used similarly to a callout but with Markdown formatting. No special props implemented.

---

Markdown from kibana-react

A more complex use of Markdown accepting props, such as markdown, openLinksInNewTab. Implemented in the following places:

1. Expressions error in error.tsx owned by @elastic/kibana-expressions

<Markdown markdown={message} openLinksInNewTab={true} />

2. Unified search sql_documentation_sections.tsx
   Used for documentation with internationalization

Example:

<Markdown
    markdown={i18n.translate(
...

3. @elastic/kibana-vis-editors markdown_vis_controller.tsx:

 <Markdown
  data-test-subj="markdownBody"
  markdown={markdown}
  openLinksInNewTab={openLinksInNewTab}
/>

4. banner.tsx @elastic/kibana-expressions is this relevant to your team? Please feel free to edit and tag the appropriate team thank you

 <Markdown markdown={textContent} openLinksInNewTab={true} />

5. @elastic/kibana-presentation uses markdown in the canvas plugin. In the index.tsx file:

<KibanaThemeProvider theme$={theme$}>
          <Markdown
            className="canvasMarkdown"
            style={fontStyle as CSSProperties}
            markdown={config.content}
            openLinksInNewTab={config.openLinksInNewTab}
          />
</KibanaThemeProvider>

6. @elastic/kibana-vis-editors Markdown is being used in formula_help.tsx:

 <Markdown
            markdown={i18n.translate(
              'xpack.lens.formulaDocumentation.weekOverWeekDescription.markdown',
              {
...

Similar to the second implementation listed, this component is used alongside internationalization of text.

7. src/plugins/vis_types/timeseries/public uses Markdown from vis.js in the TimeseriesVisTypes constant

export const TimeseriesVisTypes: Record<string, React.ComponentType<TimeseriesVisProps>> = {
  timeseries,
  metric,
  top_n: topN,
  table,
  gauge,
  markdown,
};

---

MarkdownIt from markdown-it

1. @elastic/kibana-operations in discover_plugins.ts

   const md = new MarkdownIt();
   const parsed = md.render(Fs.readFileSync(readmePath, 'utf8'));

2. service_settings.ts within @elastic/kibana-vis-editors (vega)

    const markdownIt = new MarkdownIt({
      html: false,
      linkify: true,
    });

3. send_email.ts within stack_connectors plugin

const md = MarkdownIt({
      linkify: true,
    });

[teresaalvarezsoler]

@rshen91 I have information about how users use Markdown in Dashboards. I would like to better understand the impact of this change and I can share a list of requirements for Dashboards. Should we schedule a call?

[pgayvallet]

@elastic/kibana-data-discovery @elastic/kibana-core in discover_plugins.ts

Looking at the snippet, the exact file is packages/kbn-dev-utils/src/plugin_list/discover_plugins.ts, right?

In that case, this package is owned by @elastic/kibana-operations, not either of the two other teams you listed here 😄

[stratoula]

A note on the ownerships noted above:
The vis_type_markdown is owned by the @elastic/kibana-presentation team and not from the @elastic/kibana-vis-editors team :)

Also I don't see this on the list but Markdown from react-plugin is used from vis_types_timeseries plugin too. (TSVB)

[chandlerprall]

@rshen91 thanks for taking this on! If you find anything the EUI team can assist with please let us know (slack message or github issue are likely best), and we welcome any feedback you develop.

[spalger]

@rshen91 the usage described in packages/kbn-dev-utils/src/plugin_list/discover_plugins.ts is for node scripts/build_plugin_list_docs.js which is a CLI that updates this docs page.

I think this means it's exempt from this change, right? Or is there also going to be a shared-ux API for parsing markdown in node?

[rshen91]

I believe this is a duplicate of the work done by @eokoneyo