Replaced dynatree with a modified version of bootstrap-treeview

[skateman]

• Implement necessary functionalities into bootstrap-treeview
• Create a JSON-to-JSON tree structure converter for seamless integration
• Remove unnecessary parameters from locals_for_render hashes
• Convert trees that are not using layouts/shared/tree and TreeBuilder
• Convert JavaScript onClick, onCheck, onExpand event handlers
• Remove support for onDblClick and onHover events (see Dynatree features that maybe aren't necessary #10431)
• Remove unnecessary logic for highlighting nodes with unsaved changes (see Dynatree features that maybe aren't necessary #10431)
• Remove dynatree from our codebase
• Convert or remove ldap_ous_tree
• Refactor the styling of nodes with dynatree-title and cfme-opacity-node CSS classes
• Remove unnecessary CSS classes
• Fix word-wrapping for long node texts
• Fix tooltips
• Remove cursor pointer from non-clickable nodes
• Update patternfly to a version where the new bootstrap-treeview is present

These tasks will be done in a separate PR:

• Change the tree generation logic permanently and remove the converter
• Rename miqDynatree to miqTree in JS function names and filenames Rename functions, methods, files and routes containing the word dynatree #11050

[skateman]

@martinpovolny we had a discussion with @ZitaNemeckova about the coordination of this and her work with TreeBuilders. I think the remaining 2 tasks should be solved in a separate PR. Both of them are mass find-and-replace tasks and would cause a lot of merge conflicts in Zita's PRs.

[skateman]

@martinpovolny @h-kataria @epwinchell @himdel ready for review ✨

[martinpovolny]

So the plan is to merge this while carrying on reviewing and merging @ZitaNemeckova 's TreeBuilder PRs and then do the mass changes in a separate PR.

[martinpovolny]

TODO?

[skateman]

sorry, forgot to remove ;)

[martinpovolny]

@skateman : this PR in a single commit and having it rebased and then review the review feedback etc..... That illustrates it should not be done this way.

[skateman]

@martinpovolny tests are now green

[dclarizio]

@skateman Clicking on a VM in the right side list properly opens the tree and selects that node:

Clicking on the root node shows the proper items on the right, but for some reason, resets the tree to only show the first level nodes below the root:

[dclarizio]

@skateman the tree node images are a bit smaller with the new trees, can that be adjusted?

Old:

New:

[dclarizio]

@skateman in automate explorer, clicking on a tree node or on the same item in the list on the right fails to expand the tree node to show the child nodes in the tree, tho the right cell is updated properly. May happen elsewhere, but I have only seen it in automate tree:

[dclarizio]

@skateman clicking on nodes in the Optimize / Utilization or Bottlenecks trees, they do not expand unless they had been expanded before. They used to.

Another point to note here is that when first entering the Optimize / Utilization screen, no node was selected. In this branch, the root node is already selected.

Old:

New:

[dclarizio]

@skateman on compare screen (screenshot is from Hosts), even tho a subset of a tree node's children are checked, a full check is shown on the parent initially. This corrects itself if child nodes are checked/unchecked:

[dclarizio]

@skateman I just noticed this:

To review this PR, you need to do a manual bower update and select the #patternfly version of bootstrap-treeview, updating with bin/update is not enough!

I'm not sure how exactly to select the proper version, would need clearer instructions. Hopefully my above findings are not skewed, but let me know and I can retest.

[skateman]

@dclarizio sorry, I forgot to tell that the new PF is released and now there is no need for the bower update magic.

@skateman the tree node images are a bit smaller with the new trees, can that be adjusted?

The icon size is defined in patternfly by the patternfly guys, so I guess @serenamarie125 or @priley86 can tell if they can be enlarged.

@skateman on compare screen (screenshot is from Hosts), even tho a subset of a tree node's children are checked, a full check is shown on the parent initially. This corrects itself if child nodes are checked/unchecked:

It's a known issue and this PR fixes it.

Clicking on the root node shows the proper items on the right, but for some reason, resets the tree to only show the first level nodes below the root:

This is a bug in bootstrap-treeview, the fix is on the way.

@skateman in automate explorer, clicking on a tree node or on the same item in the list on the right fails to expand the tree node to show the child nodes in the tree, tho the right cell is updated properly. May happen elsewhere, but I have only seen it in automate tree.

This is caused by a lazy-loading bug in bootstrap-treeview, I created a fix for that.

@skateman clicking on nodes in the Optimize / Utilization or Bottlenecks trees, they do not expand unless they had been expanded before. They used to.

The same lazy-loading bug ...

Another point to note here is that when first entering the Optimize / Utilization screen, no node was selected. In this branch, the root node is already selected.

In the current master with a clean session, the root node gets selected as in my branch.

[miq-bot]

<pr_mergeability_checker />This pull request is not mergeable. Please rebase and repush.

[martinpovolny]

@dclarizio: do you think that this has enough quality so that we ca merge it and then track the remaining issues?

[miq-bot]

Checked commit skateman@973a1dd with ruby 2.2.5, rubocop 0.37.2, and haml-lint 0.16.1
125 files checked, 20 offenses detected

app/controllers/application_controller/tree_support.rb

• ❕ - Line 82, Col 121 - Metrics/LineLength - Line is too long. [132/120]

app/controllers/miq_policy_controller/miq_actions.rb

• ❕ - Line 313, Col 121 - Metrics/LineLength - Line is too long. [128/120]

app/controllers/ops_controller/rbac_tree.rb

• ❗ - Line 102, Col 7 - Style/ConditionalAssignment - Use the return of the conditional for variable assignment and comparison.
• ❗ - Line 53, Col 7 - Style/ConditionalAssignment - Use the return of the conditional for variable assignment and comparison.

app/controllers/ops_controller/settings/cap_and_u.rb

• ❕ - Line 218, Col 21 - Metrics/BlockNesting - Avoid more than 3 levels of block nesting.

app/controllers/report_controller/menus.rb

• ❕ - Line 25, Col 121 - Metrics/LineLength - Line is too long. [172/120]

app/helpers/automate_tree_helper.rb

• ❕ - Line 102, Col 121 - Metrics/LineLength - Line is too long. [121/120]

app/presenters/tree_builder.rb

• ❕ - Line 183, Col 3 - Metrics/AbcSize - Assignment Branch Condition size for convert_bs_tree is too high. [43.39/20]
• ❕ - Line 183, Col 3 - Metrics/CyclomaticComplexity - Cyclomatic complexity for convert_bs_tree is too high. [16/6]
• ❕ - Line 183, Col 3 - Metrics/PerceivedComplexity - Perceived complexity for convert_bs_tree is too high. [16/7]

app/presenters/tree_builder_sections.rb

• ❗ - Line 49, Col 7 - Style/ConditionalAssignment - Use the return of the conditional for variable assignment and comparison.

app/presenters/tree_node_builder.rb

• ❗ - Line 480, Col 17 - Style/MultilineTernaryOperator - Avoid multi-line ?: (the ternary operator); use if/unless instead.

spec/models/automate_import_json_serializer_spec.rb

• ❕ - Line 59, Col 121 - Metrics/LineLength - Line is too long. [132/120]
• ❕ - Line 60, Col 121 - Metrics/LineLength - Line is too long. [132/120]
• ❕ - Line 68, Col 121 - Metrics/LineLength - Line is too long. [122/120]
• ❕ - Line 71, Col 121 - Metrics/LineLength - Line is too long. [133/120]
• ❕ - Line 78, Col 121 - Metrics/LineLength - Line is too long. [129/120]

spec/presenters/tree_builder_roles_by_server_spec.rb

• ❗ - Line 73, Col 17 - Style/AlignHash - Align the elements of a hash literal if they span more than one line.

spec/presenters/tree_builder_servers_by_role_spec.rb

• ❕ - Line 63, Col 121 - Metrics/LineLength - Line is too long. [138/120]
• ❕ - Line 68, Col 121 - Metrics/LineLength - Line is too long. [137/120]

[epwinchell]

@martinpovolny @dclarizio @skateman LGTM Any minor styling tweaks we can address later.

[dclarizio]

Merging this as most other issues are forthcoming from other PRs (mostly PF).

The icon size is defined in patternfly by the patternfly guys, so I guess @serenamarie125 or @priley86 can tell if they can be enlarged.

Bump ^^^ can either of you let us know if we can alter the tree node icon sizes as they can appear quite small depending on screen pixel density and they were already small prior to switching to these new trees? Thx, Dan

[skateman]

✨ ✨ 🎉 🎉 🎉 🍷 🍰 🏆

[serenamarie125]

Icons look too small @dclarizio, I agree. I'm talking with one of our Visual Designers now ... I'll get back to you soon. Checking with PF as well. It seems like the node expansion icons are incorrect, the font color is incorrect, and I'm still unclear if the icon size is what is being suggested by PatternFly or not ;). Stay tuned @skateman