[Meta][Discuss] Deprecation of Markdown Components

rshen91 commented 2 years ago

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 https://github.com/elastic/kibana/issues/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:

Use_context_app_fetch.tsx - used as a callout/toast to display errors
View_alert_utils.tsx - used to display error messages like a toast
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:

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

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

Unified search sql_documentation_sections.tsx Used for documentation with internationalization

Example:

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

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

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

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} />
```
@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>

@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.

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

@elastic/kibana-operations in discover_plugins.ts

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

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

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

send_email.ts within stack_connectors plugin

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

teresaalvarezsoler commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 4 months ago

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

elastic / kibana