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

De-angularize DocViewer #42116

Merged
merged 36 commits into from
Aug 20, 2019
Merged

De-angularize DocViewer #42116

merged 36 commits into from
Aug 20, 2019

Conversation

kertal
Copy link
Member

@kertal kertal commented Jul 29, 2019

Summary

DocViewer is currently used bydiscover and doc. It provides a detailed view about the currently selected Elasticsearch doc. Out of the box it provides 2 tabs, a table view and a JSON view. It's is extendable by the DocViewsRegistry. While the goal is to remove Angular completely, it has to be considered, that 3rd party plugins still use Angular.

Bildschirmfoto 2019-07-31 um 09 21 18

Here are some 3rd party plugins
https://github.com/sw-jung/kibana_markdown_doc_view
https://github.com/AntonPalyok/LA-Message-View

Existing angular plugins are auto converted to using a render function.

Old plugin structure

{
  title: "your title"
  directive: {
    controller: (scope) => { /* function to extend the scope */}
    template: "<your-angular-template></your-angular-template>"
 }
  order: 10
}

New plugin structure 1, providing a component

{
  title: "your title"
  component: <Your-React-Component/>
  order: 10
}

New plugin structure 2, using a render function

{
  title: "your title"
  render: (domNode, docViewProps) => { /** rendering the way you want */ }
  order: 10
}

Part of #38646
Fixes #19827 (as a side effect)

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

For maintainers

@kertal kertal self-assigned this Jul 29, 2019
@elastic elastic deleted a comment from elasticmachine Aug 1, 2019
@elastic elastic deleted a comment from elasticmachine Aug 1, 2019
@elastic elastic deleted a comment from elasticmachine Aug 1, 2019
@elastic elastic deleted a comment from elasticmachine Aug 1, 2019
@elastic elastic deleted a comment from elasticmachine Aug 1, 2019
@kertal kertal added Feature:Discover Discover Application Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Aug 1, 2019
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@kertal kertal added the review label Aug 14, 2019
@kertal kertal requested review from a team August 14, 2019 16:20
@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Copy link
Contributor

@streamich streamich left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, tested on Mac/Chrome.

You might want to try useLayoutEffect, otherwise just minor nits.

@elasticmachine
Copy link
Contributor

💔 Build Failed

- instead of Component & FunctionComponent
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@kertal kertal merged commit dd26316 into elastic:master Aug 20, 2019
@kertal
Copy link
Member Author

kertal commented Aug 20, 2019

ℹ️ I'll merge this into 7.x when #43240 is ready

@streamich streamich mentioned this pull request Aug 21, 2019
kertal added a commit to kertal/kibana that referenced this pull request Aug 27, 2019
* Migrate doc-viewer directive to use React/TypeScript

* Refactor DocViewsRegistryProvider

* Add compatibility for 3rd party plugins still using angular

* Add tests

Angular rendering for usage in React component:

Co-authored-by: spalger <[email protected]>
kertal added a commit that referenced this pull request Aug 27, 2019
* Migrate doc-viewer directive to use React/TypeScript

* Refactor DocViewsRegistryProvider

* Add compatibility for 3rd party plugins still using angular

* Add tests

Angular rendering for usage in React component:

Co-authored-by: spalger <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Discover Discover Application release_note:skip Skip the PR/issue when compiling release notes review Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.4.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DocViewer always renders first tab ignoring shouldShow
3 participants