fabric8-ui / fabric8-ux

Design Links
https://uxd.fabric8.io/
Apache License 2.0
9 stars 9 forks source link

DEV: Hierarchical areas #835

Closed catrobson closed 6 years ago

catrobson commented 6 years ago

Change areas list view to a hierarchical list view that shows parent/child relationships. Ideally add a filter bar that allows me to keyword search the areas. All other elements can stay the same, or you can work with one of the designers for some tidying up of the page if there needs to be discussion on where filter bar, title, and add belong together.

dlabrecq commented 6 years ago

I replaced the list with a tree list, added a toolbar with filter/sort/add controls and set the toggles to expand by default. Unfortunately, the APIs do not provide descriptions, nor any way to delete an area, or change its name.

Full tree tree

I wasn't quite certain how filtering should behave for a tree list, but believe the remaining items should still represent a hierarchy -- minus the items that were filtered-out. The problem is that remaining items may no longer have a direct parent (it was filtered-out), so its closest ancestor is used to represent the hierarchy. This is shown by the screen shots below.

Filter "area" filter-area

Above only items matching "area" are shown. This still represents a hierarchy, but "area1a" is not the parent of "area1c" -- this is its ancestor. That's because items beginning with "test" have been filtered-out.

Below, only items matching "test" are shown. These items don't have any matching children, so they appear at the same level.

Filter "test" fiter-test

dlabrecq commented 6 years ago

Created a PR with changes here: https://github.com/fabric8-ui/fabric8-ui/pull/2638