Transformations: Support enum field conversion

[nmarrs]

What is this feature?

This adds an enum config editor to the Convert field type transform so that users can customize + display their enum data in supported panels.

Updated UX

latest.UX.mov

Why do we need this feature?

We added the ability to render enum data a while back but did not uncover any way to actually configure fields into the enum field config format.

Users can convert their field types into an enum field today via the Convert field type transform (implemented via this PR), but have no ability to rearrange / customize the resulting enum configs

Who is this feature for?

All users that want to display enum data in their panels

Which issue(s) does this PR fix?:

Fixes #72073

Created a follow up issue to address issue where user can add multiple overriding conversions for the same field (which breaks enum rendering)

Special notes for your reviewer:

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

[nmarrs]

@leeoniya this is (finally) ready for review 😅

[leeoniya]

works pretty well :)

found some bugs:

1. i think the enum config is not reset when deleting and re-adding the transform? not sure if this is this specific transform or all transforms.
2. the trash icon shifts while dragging (probably needs to be fixed in base component)
3. some wonkiness around clicking out after item editing not always defocusing/saving the edits

enum-no-reset.mp4

you can actually save items in an unfilled state. we should probably prevent adding new items when we have an empty one waiting to be filled, and clean them out before saving?

then things start to get weird, maybe cause using values as react list keys and ending up with dupes?:

enum-snafu.mp4

[oscarkilhed]

you can actually save items in an unfilled state. we should probably prevent adding new items when we have an empty one waiting to be filled, and clean them out before saving?

Maybe when adding a new enum, the edit input field could already be open and focus set to it? If it loses focus with nothing added to it, it could be removed?

[nmarrs]

1. i think the enum config is not reset when deleting and re-adding the transform? not sure if this is this specific transform or all transforms.

Testing this it seems that current behavior is expected (config is drawn from panel JSON and if panel json isn't saved / updated then transform config can persist)

transform.config.mov

2. the trash icon shifts while dragging (probably needs to be fixed in base component)

This one is actually a little tricky 😬 Basically what is happening is when you drag table row it is being taken out of the table and thus the table is re-rendering to match the "new" table state where the column max-width is being updated dynamically (see here for context). The only ways around this is to either:

1. have a static default width for table row value (i.e. 100px or something) Currently this makes longer inputs wrap but that probably should be ok 🤷‍♂️
2. Add more complex state management for figuring out the max width and hard coding that into place (ew)

I'll default to 1) for time being 👍

3. some wonkiness around clicking out after item editing not always defocusing/saving the edits

Fixed this - following suggestion from @oscarkilhed 💯

updated.UX.exp.mov

[leeoniya]

should this be a passed-in prop or can we just directly use the checkIsEnumUniqueValue from https://github.com/grafana/grafana/pull/76410/files#diff-0f946700206cc388640fbe8e8df18c407f2a947e1b8bd5a0acca1b51dc91477aR102-R104?

dunno if you had specific plans for more than one pluggable strategy for uniqueness testing?

[nmarrs]

main reason for checkIsEnumUniqueValue being passed as a prop is wanting to avoid sending the entire enumRows object as a prop to every instance of the EnumMappingRow component

[leeoniya]

some minor nits, but LGTM 👍