New tree view integration

[brumik]

What: Added the react-wooden-tree to the storybook and initialized with a basic setup.
react-wooden-tree is a new tree view component, which should be integrated to the patternfly.

It is a modern and fast tree view component built for Red Hat as my bachelors thesis. It can be used as a navigation as well. It implements checkboxes, selects (in all form) and totally customizable trough classes.

The TreeView was built with performance in mind, with the help of benchmarks.

Additional issues:

The tree does not have design yet. Therefore this PR was created to to make the tree for other developers visible the integration to be able to help with the design.

@Hyperkid123
@skateman

[priley86]

hi @brumik - thanks for very much for the contribution and excellent work here! I for one would love a detailed analysis of the improvements from the existing Treeview. Do you mind providing a quick write up on this or sharing your thesis? i.e. enhancements for lazy loading, efficient node rendering, etc.

[brumik]

Hello, @priley86 I am happy that you are interested in my work. I did not compared the performance of the two tree view (yet), but made bunch of benchmarks when developing the new one and tried to reduce loading times as much as possible (like not using <ul> elements for nested lists).

I gladly provide you my bachelors thesis but as theses go it's not perfect and I found some mistakes in flowcharts afterwards. (Really, please do not look at the flowcharts :)
Modern Tree View Component - Bc Thesis.pdf

[Hyperkid123]

@priley86 i can give some basic insight on this.

The reason why this exists, is to replace current tree "components" in cloudforms. They are old, slow, hard to control, not written in React and so on... But they are used almost everywhere. From navigation to just displaying data. Also tree component in cloudforms can modify some parts of the ui, but other parts can modify the tree.

Apart from performance increase, this tree component also provides data lazy-loading, styling customization(in cloudforms that is required), it allows selection of the nodes (single or multi), some options like disable/enable re-selection of nodes and simple interface to modify the tree. This component was designed for ManageIQ and is not supposed to replace the patternfly tree component (that is why we don't want it inside pf-core), but enhancing the existing component would probably bring more issues than benefits (also by the time this was created, there was no pf tree component).

We will have to use it anyway because we simply need it, we just thought it is good idea to share it via patternfly with other teams, that might have similar requirements. Also we wanted it to follow PF design guidelines to have it consistent with other UI.

If you want more detailed description the you should probably check the thesis.

[Hyperkid123]

@brumik can you please provide storybook link or some screenshots?

[priley86]

thanks for providing context on this @Hyperkid123 - it helps a lot! I read thru the thesis and was very impressed with the detailed metrics provided. It may prove very useful to save away the benchmarking tools for future efforts.

I believe some detailed design and accessibility review has taken place in the existing PF React Treeview, so it would be nice to compare and contrast with the Treeview here to further improve the implementation overall. thanks again!

[brumik]

@Hyperkid123 the url looks like this:
http://localhost:6006/?knob-Highlight%20on%20select=true&knob-Highlight%20on%20hover=true&selectedKind=patternfly-tree-view%2FTree%20view&selectedStory=Tree%20view&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs -- on localhost:6006

And the component yet:

Unfortunately I was not able to proceed further without design.

[Hyperkid123]

@priley86 i think there is some online storybook for pull request (at least for pf4), do you know if/how we can access it?

[Hyperkid123]

@priley86 we had some issues after rebase from master. Specifically tests.

  ● Test suite failed to run

    TypeError: environment.teardown is not a function

      at node_modules/jest-runner/build/run_test.js:191:25

Do you know what is the cause? Or is this the first time you are hearing about this? Might be tied to this: jestjs/jest#6393

[priley86]

discussing this further w/ @dgutride @janwright73 @michaelkro @jeff-phillips-18 the other day, it seems like this would be a great candidate to split out into a separate package for PF3 as we continue to iterate. Do you feel comfortable taking a stab at this @brumik ? There are existing examples in patternfly-react-extensions and react-console.