Nested tabs with routing

[tbrisker]

@ezr-ondrej

#... should be id of element to be selected, if it is not, I’d rather have any other solution than having custom hybrid that only works if our custom JS takes care of it, but looks like standartized solution

My suggestion is to use #tab-subtab as the id of the subtab to be selected if we’re concerned about name conflicts, not to break it down to parts in our code and select them. Finding the parent tab of the tab to display should be easy to do in case there is one and shouldn’t rely on having the #tab part correctly set.

@ezr-ondrej

After discussing with UX enthusiast friend of mine, the Host page is not really having sub-tabs, but it has sub-menu (first level of tabs) that should be in url, and only the sub tabs are real tabs.

I disagree, some of the tabs don’t have subtabs, and in any case the data is loaded when the whole page is loaded, even if it isn’t displayed directly.

@ezr-ondrej

Though I liked that opinion and so I quite strongly incline to /<tab(host-menu-item)>#<subtab(real tab)> in Host detail page usecase.

This would require front end routing to know which paths are for tabs and what are for subactions (think about endpoints like /hosts/4/externalNodes or /hosts/4/clone which are endpoints vs. /hosts/4/ansible or /hosts/4/details which may be tab names).
It would also make our code for finding the right tab name more complex, since If we stick with only using the fragment, finding what tab to display is a simple uri.fragment(), no need to combine tab = uri.path().split('/')[-1]; subtab = uri.fragment() and handle all edge cases of mismatches. Just find the tab with the right id, display it, and if it has a parent, display that as well.