Fix filter bar appearing above other elements

[lukasolson]

Fixes #12248.

For some reason when implementing the filter editor I chose a z-index of 20. Having such a high z-index was unnecessary and actually caused other elements (such as the autocomplete in the query bar and link tooltips) be hidden behind the filter bar.

This PR updates the z-index to a lower amount so that the filter editor still shows up above visualize but other elements can show up above it.

[cjcenizal]

Tested in browser, looks good! I had one suggestion. What do you think?

[cjcenizal]

I have a suggestion which is a little bit more work, but it's very straightforward and will help us avoid this problem from popping up again in the future:

1. Let's set this to z-index: @globalDepthFilterBar !important;.
2. On line 158 of styles/base.less let's change > kbn-top-nav { z-index: 3; } to > kbn-top-nav { z-index: @globalDepthLocalNav; }.
3. Let's create styles/variables/depth.less.
4. Let's import this new file into styles/variables.less like so: @import "~ui/styles/variables/depth.less";.
5. Inside this file, we'll assign both of these variables:

/**
 * 1. The local nav contains tooltips which should pop over the filter bar.
 */
@globalDepthFilterBar: 2; /* 1 */
@globalDepthLocalNav: 3; /* 1 */

This way the relationship of these two depths will be really obvious and if someone reintroduces this bug by changing their values, the cause should be readily apparent.

[lukasolson]

👍 b02b452

I added the new file to the variables.less file seeing as how both of those files were already including it... Let me know if you think it'd be better left out.

[cjcenizal]

Fantastic!

[Bargs]

Fix looks good, but I was confused about one thing.

[Bargs]

@cjcenizal I'm a bit confused by the term "global" here. z-index isn't a global setting, it depends on the local stacking context. I'm a little worried these variable names and their location in a single global file could mislead someone about their relationship. For instance, given two variables with the values 40 and 2 in this file, depending on the stacking context of the elements they're applied to the 40 might actually appear below the 2.

[cjcenizal]

Ahhh, shoot you're right. I was thinking they had fixed positioning for some reason.

I think we still need to group these variables together because they make more sense when viewed in the same context. But the names definitely don't make sense.

I think the long-term solution is to:

1. Move the filter_bar directory into the kbn_top_nav directory, because the two are tightly coupled for most of our apps.
2. Import the filter_bar into the kbn_top_nav instead of in autoload/modules.js.
3. Create a kbn_top_nav/kbn_top_nav.less file which contains these variables and the relevant kbn_top_nav styles from base.less.
4. Rename these variables to just be filterBarDepth and localNavDepth.

It's a little bit more work, but it will be an improvement to our module organization.

[Bargs]

Move the filter_bar directory into the kbn_top_nav directory, because the two are tightly coupled for most of our apps.

I don't think this is true, at least from a JS perspective. The filter_bar is a directive that can be used anywhere, not just in the kbn_top_nav. We definitely don't want to couple it to the kbn_top_nav, because each app needs the ability to conditionally render that directive depending on which query language is selected once this PR is merged. The query bar code itself doesn't even live in the kbn_top_nav, it's just in the transclude slot.

[cjcenizal]

Then let's just rename the variables to filterBarDepth and localNavDepth.

[lukasolson]

I've also switched the z-index to 1 instead, because after looking more into it, it just needs to be higher than 0. Should be ready for another quick look.

[cjcenizal]

Sweeeet

[Bargs]

LGTM