Segment condition value text input is too small #3920
Labels
front-end
Issue related to the React Front End Dashboard
good first issue
Good for newcomers
improvement
Is your feature request related to a problem? Please describe.
Per https://docs.flagsmith.com/basic-features/segments?operators=in#limits, the maximum size of a segment condition is 1000 bytes. The current segment condition editor has a textbox that is way too small to handle values that size. For example, this is what it looks like trying to view or edit a full 1000-byte value:
long-segment-condition.mov
This is even annoying when using much smaller values such as UUIDs, which are just 36 bytes long:
uuid-condition.mov
Another annoyance is that it's not possible to tell at a glance that a condition value is actually longer than the input field shows. For example, the top condition here is just
abcdefghijklmn
and the second one is 1000 bytes long, but they look identical (being able to reproduce this or not depends on the exact browser/font/OS/etc):It's also not easy while editing a value to tell that it begins or ends with whitespace. For example, the top value here is
a
and the bottom one isa
:While we're at it, we might want to show trait names and values in a fixed-width font to avoid ambiguous characters, especially since both trait names and values will most often be used from applications and need to be precise. Example, this condition says
Il
and is hard to read:The only real workarounds are to use the "Show JSON references" option and view the full segment conditions there, or to copy/paste the values somewhere else. Neither is a good option.
Describe the solution you'd like.
I don't have a concrete UX in mind, but here are some ways this could be improved:
alt
values forimg
elementsDescribe alternatives you've considered
The closest good UX I know for a similar use case is Vercel's environment variable editor. I really like how they highlight all whitespace, especially leading and trailing, during editing:
They also show the full value on hover, with a click-to-copy option:
The creating and editing fields also auto expand for long values:
Additional context
You can generate 1000-byte strings with this command:
The text was updated successfully, but these errors were encountered: