Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Kibana React] Markdown component sunset punchlist #174290

Closed
13 tasks done
vadimkibana opened this issue Jan 4, 2024 · 6 comments · Fixed by #176478
Closed
13 tasks done

[Kibana React] Markdown component sunset punchlist #174290

vadimkibana opened this issue Jan 4, 2024 · 6 comments · Fixed by #176478
Assignees
Labels
Team:APM All issues that need APM UI Team support Team:DataDiscovery Discover App Team (Document Explorer, Saved Search, Surrounding documents, Graph) Team:DataVis Team label for DataVis Team Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) Team:Visualizations Visualization editors, elastic-charts and infrastructure technical debt Improvement of the software architecture and operational architecture

Comments

@vadimkibana
Copy link
Contributor

vadimkibana commented Jan 4, 2024

The legacy React <Markdown> and <SimpleMarkdown> components, in kibana_react, have been deprecated a while ago. Now as part of removing technical debt and un-bundling the kibana_react plugin we are aiming at removing those components.

The legacy Markdown components shoud be replaced by the latest EUI Markdown React components, which are exposed in Kibana through SharedUX Markdown package, imported like so:

import * as md from '@kbn/shared-ux-markdown';

Punchlist of places where the legacy Markdown components should be removed:

  • kbn-text-based-editor package:
    • packages/kbn-text-based-editor/src/esql_documentation_sections.tsx
    • packages/kbn-text-based-editor/src/sql_documentation_sections.tsx
  • controls plugin:
    • src/plugins/controls/public/control_group/component/control_error_component.tsx
  • discover plugin:
    • src/plugins/discover/public/application/context/hooks/use_context_app_fetch.tsx
    • src/plugins/discover/public/application/view_alert/view_alert_utils.tsx
  • embeddable plugin:
    • src/plugins/embeddable/public/embeddable_panel/embeddable_panel_error.tsx
    • src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx
  • expression_error plugin:
    • src/plugins/expression_error/public/components/error/error.tsx
  • vis_type_markdown plugin:
    • src/plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx
    • src/plugins/vis_type_markdown/public/markdown_vis_controller.tsx
    • src/plugins/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
  • vis_types plugin:
    • src/plugins/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
  • visualisations plugin:
    • src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.tsx
  • apm plugin:
    • x-pack/plugins/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx
  • banners plugin:
    • x-pack/plugins/banners/public/components/banner.tsx
  • canvas plugin:
    • x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
  • lens plugin:
    • x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_help.tsx
  • kibana_react plugin:
    • SharedUX to remove the old components
@botelastic botelastic bot added the needs-team Issues missing a team label label Jan 4, 2024
@vadimkibana vadimkibana closed this as not planned Won't fix, can't repro, duplicate, stale Jan 4, 2024
@vadimkibana vadimkibana reopened this Jan 4, 2024
@vadimkibana vadimkibana changed the title [Kibana React] Markdown component sunset [Kibana React] Markdown component sunset punchlist Jan 4, 2024
@vadimkibana vadimkibana added Team:APM All issues that need APM UI Team support Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas Team:Visualizations Visualization editors, elastic-charts and infrastructure Team:DataVis Team label for DataVis Team Team:DataDiscovery Discover App Team (Document Explorer, Saved Search, Surrounding documents, Graph) Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) and removed needs-team Issues missing a team label labels Jan 4, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-visualizations (Team:Visualizations)

@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

@elasticmachine
Copy link
Contributor

Pinging @elastic/apm-ui (Team:APM)

@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

@elasticmachine
Copy link
Contributor

Pinging @elastic/appex-sharedux (Team:SharedUX)

@vadimkibana vadimkibana added the technical debt Improvement of the software architecture and operational architecture label Jan 4, 2024
@stratoula
Copy link
Contributor

@vadimkibana although I really prefer the new Markdown component, mostly because it has the copy capability, replacing it in the ES|QL documentation sections comes with a latency.

Here is the old Markdown, you can see that when I click the button, the popover instantly opens
old_markdown

Here is the new Markdown, you can see that the popover opens after some time
new_markdown

I just replaced the old component with the new component. Not sure why this latency is added, but maybe you have a clue?

Here is the PR if you want to play with it https://github.com/elastic/kibana/pull/174320/files

@eokoneyo eokoneyo linked a pull request Feb 8, 2024 that will close this issue
stratoula added a commit that referenced this issue Feb 12, 2024
## Summary

Part of #174290
Part of #173495

This PR:

- uses the shared ux markdown component for ES|QL reference
- this comes with a nice addition, the code block has a copy button
- removes the sql documentation file, I plan to remove all the SQL
related code in 8.14. As this transition to the new markdown needs some
manual work I didn't want to do it for SQL as we removed it from the UI
and we are going to remove it soonish from the code too

<img width="1031" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/038c6ba6-143c-41d9-8186-3e91a2fb4c1d">

---------

Co-authored-by: kibanamachine <[email protected]>
eokoneyo added a commit that referenced this issue Feb 13, 2024
## Summary

Closes #174290

*Breaking Changes*
- Markdown document will only render valid markdown markup, this implies
that previous behaviour where html tags would render as text is no
longer supported and such html tag will be stripped out.

<!-- ### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to
identify risks that should be tested prior to the change/feature
release.

When forming the risk matrix, consider some of the following examples
and how they may potentially impact the change:

| Risk | Probability | Severity | Mitigation/Notes |

|---------------------------|-------------|----------|-------------------------|
| Multiple Spaces&mdash;unexpected behavior in non-default Kibana Space.
| Low | High | Integration tests will verify that all features are still
supported in non-default Kibana Space and when user switches between
spaces. |
| Multiple nodes&mdash;Elasticsearch polling might have race conditions
when multiple Kibana nodes are polling for the same tasks. | High | Low
| Tasks are idempotent, so executing them multiple times will not result
in logical error, but will degrade performance. To test for this case we
add plenty of unit tests around this logic and document manual testing
procedure. |
| Code should gracefully handle cases when feature X or plugin Y are
disabled. | Medium | High | Unit tests will verify that any feature flag
or plugin combination still results in our service operational. |
| [See more potential risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) |


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
-->
CoenWarmer pushed a commit to CoenWarmer/kibana that referenced this issue Feb 15, 2024
## Summary

Part of elastic#174290
Part of elastic#173495

This PR:

- uses the shared ux markdown component for ES|QL reference
- this comes with a nice addition, the code block has a copy button
- removes the sql documentation file, I plan to remove all the SQL
related code in 8.14. As this transition to the new markdown needs some
manual work I didn't want to do it for SQL as we removed it from the UI
and we are going to remove it soonish from the code too

<img width="1031" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/038c6ba6-143c-41d9-8186-3e91a2fb4c1d">

---------

Co-authored-by: kibanamachine <[email protected]>
CoenWarmer pushed a commit to CoenWarmer/kibana that referenced this issue Feb 15, 2024
## Summary

Closes elastic#174290

*Breaking Changes*
- Markdown document will only render valid markdown markup, this implies
that previous behaviour where html tags would render as text is no
longer supported and such html tag will be stripped out.

<!-- ### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to
identify risks that should be tested prior to the change/feature
release.

When forming the risk matrix, consider some of the following examples
and how they may potentially impact the change:

| Risk | Probability | Severity | Mitigation/Notes |

|---------------------------|-------------|----------|-------------------------|
| Multiple Spaces&mdash;unexpected behavior in non-default Kibana Space.
| Low | High | Integration tests will verify that all features are still
supported in non-default Kibana Space and when user switches between
spaces. |
| Multiple nodes&mdash;Elasticsearch polling might have race conditions
when multiple Kibana nodes are polling for the same tasks. | High | Low
| Tasks are idempotent, so executing them multiple times will not result
in logical error, but will degrade performance. To test for this case we
add plenty of unit tests around this logic and document manual testing
procedure. |
| Code should gracefully handle cases when feature X or plugin Y are
disabled. | Medium | High | Unit tests will verify that any feature flag
or plugin combination still results in our service operational. |
| [See more potential risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) |


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
-->
CoenWarmer pushed a commit to CoenWarmer/kibana that referenced this issue Feb 15, 2024
## Summary

Part of elastic#174290
Part of elastic#173495

This PR:

- uses the shared ux markdown component for ES|QL reference
- this comes with a nice addition, the code block has a copy button
- removes the sql documentation file, I plan to remove all the SQL
related code in 8.14. As this transition to the new markdown needs some
manual work I didn't want to do it for SQL as we removed it from the UI
and we are going to remove it soonish from the code too

<img width="1031" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/038c6ba6-143c-41d9-8186-3e91a2fb4c1d">

---------

Co-authored-by: kibanamachine <[email protected]>
CoenWarmer pushed a commit to CoenWarmer/kibana that referenced this issue Feb 15, 2024
## Summary

Closes elastic#174290

*Breaking Changes*
- Markdown document will only render valid markdown markup, this implies
that previous behaviour where html tags would render as text is no
longer supported and such html tag will be stripped out.

<!-- ### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to
identify risks that should be tested prior to the change/feature
release.

When forming the risk matrix, consider some of the following examples
and how they may potentially impact the change:

| Risk | Probability | Severity | Mitigation/Notes |

|---------------------------|-------------|----------|-------------------------|
| Multiple Spaces&mdash;unexpected behavior in non-default Kibana Space.
| Low | High | Integration tests will verify that all features are still
supported in non-default Kibana Space and when user switches between
spaces. |
| Multiple nodes&mdash;Elasticsearch polling might have race conditions
when multiple Kibana nodes are polling for the same tasks. | High | Low
| Tasks are idempotent, so executing them multiple times will not result
in logical error, but will degrade performance. To test for this case we
add plenty of unit tests around this logic and document manual testing
procedure. |
| Code should gracefully handle cases when feature X or plugin Y are
disabled. | Medium | High | Unit tests will verify that any feature flag
or plugin combination still results in our service operational. |
| [See more potential risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) |


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
-->
fkanout pushed a commit to fkanout/kibana that referenced this issue Mar 4, 2024
## Summary

Part of elastic#174290
Part of elastic#173495

This PR:

- uses the shared ux markdown component for ES|QL reference
- this comes with a nice addition, the code block has a copy button
- removes the sql documentation file, I plan to remove all the SQL
related code in 8.14. As this transition to the new markdown needs some
manual work I didn't want to do it for SQL as we removed it from the UI
and we are going to remove it soonish from the code too

<img width="1031" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/038c6ba6-143c-41d9-8186-3e91a2fb4c1d">

---------

Co-authored-by: kibanamachine <[email protected]>
fkanout pushed a commit to fkanout/kibana that referenced this issue Mar 4, 2024
## Summary

Closes elastic#174290

*Breaking Changes*
- Markdown document will only render valid markdown markup, this implies
that previous behaviour where html tags would render as text is no
longer supported and such html tag will be stripped out.

<!-- ### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to
identify risks that should be tested prior to the change/feature
release.

When forming the risk matrix, consider some of the following examples
and how they may potentially impact the change:

| Risk | Probability | Severity | Mitigation/Notes |

|---------------------------|-------------|----------|-------------------------|
| Multiple Spaces&mdash;unexpected behavior in non-default Kibana Space.
| Low | High | Integration tests will verify that all features are still
supported in non-default Kibana Space and when user switches between
spaces. |
| Multiple nodes&mdash;Elasticsearch polling might have race conditions
when multiple Kibana nodes are polling for the same tasks. | High | Low
| Tasks are idempotent, so executing them multiple times will not result
in logical error, but will degrade performance. To test for this case we
add plenty of unit tests around this logic and document manual testing
procedure. |
| Code should gracefully handle cases when feature X or plugin Y are
disabled. | Medium | High | Unit tests will verify that any feature flag
or plugin combination still results in our service operational. |
| [See more potential risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) |


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Team:APM All issues that need APM UI Team support Team:DataDiscovery Discover App Team (Document Explorer, Saved Search, Surrounding documents, Graph) Team:DataVis Team label for DataVis Team Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) Team:Visualizations Visualization editors, elastic-charts and infrastructure technical debt Improvement of the software architecture and operational architecture
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants