Truncate long field names in filter editor

[lukasolson]

Fixes #13365.

This PR adds an additional class to the field selector in the filter editor that properly truncates (with an ellipsis) it when it is too long.

Before:

After:

[lukasolson]

@cjcenizal It looks like, although this fixes the error, we now don't have the benefit of having the params field/text input expanding to fill up space unused by the field select. Can you think of some way to get the best of both worlds?

[cjcenizal]

@lukasolson What's the params field/text input? What do you mean by "space unused by the field select"?

[lukasolson]

@cjcenizal Sorry for the confusion. Looking at the screenshots in the description, there are three inputs. From left to right, they are the "field" input, "operator" input, and "params" input.

I'm not sure if you remember, but you suggested that we add some styles so that the params input could expand to fill up any extra space that wasn't being used by the field and operator inputs.

The problem now is that if the value for the field input is really big, the operator and params inputs flow outside the container.

This PR updates these styles such that, even if the field input is really big, they don't overflow off outside the container. However, it has the downside that both the field input and params input have the kuiFieldGroupSection--wide class applied, so they both try to take up as much space as they can... which means that in cases that the field name isn't very long, it will take up more space than it needs.

Here are some screenshots of what I'm talking about...

Before this PR:

After this PR:

I'm wondering if there is some way we can get the best of both worlds, where we wouldn't expect to see any overflow (even if both the field and params input were extremely long) but such that the params inputs get as much space as possible. Thoughts?

[cjcenizal]

@lukasolson Ahhh, I see! I think you can solve this problem by removing kuiFieldGroupSection--wide from the "field" input and creating a custom class for it instead:

.filterEditorFieldInput {
  flex: 0 1 auto;
}

This will cause it to shrink and expand to fit its content, instead of expanding to try to take up as much space as possible.

On a separate note, I found a weird bug when the "operator" input is set to "is one of", where the "params" input gets squished:

You can solve this with another custom class:

.fieldEditorOperatorInput {
  min-width: 100px;
}

You might need to remove .filterEditor__wideField from this element to avoid conflicts. The end result should be this:

[lukasolson]

@cjcenizal Thanks! I've made the updates.

[cjcenizal]

⛸ LGTM!

[stacey-gammon]

LGTM!

[lukasolson]

6.x (6.1.0): b677bea
6.0 (6.0.0): b6e7604
5.6 (5.6.0): 2d10c2b
5.5 (5.5.2): b86f7a9