Always show row actions for the fields list in the Mappings Editor

[cjcenizal]

Closes #53012

In this PR:

• We always shows the row actions instead of revealing them on hover. The background color of the row still changes on hover, to make it easier to identify which row you're acting on.
• I moved the "Add field" and "Add multi-field" buttons to the right so now all actions are grouped together.
• I converted all of the buttons from text to icons to declutter the UI. I used the "submodule" icon for the "Add multi-field" button because that seemed the most analogous among the EUI icons.
• I also adjusted the spacing in the field list so that field names would align with icons on other rows.

@mdefazio WDYT?

Simple example

Example with a lot of rows

[elasticmachine]

Pinging @elastic/es-ui (Team:Elasticsearch UI)

[mdefazio]

Hi CJ, I will work up a prototype to try some things out as I think there's perhaps a couple ways to tackle the concerns you're addressing in this PR.
One thought off-hand is that all root level text should line up, whether it has an arrow or not. I think we had this in an earlier iteration—without it there's a confusion in the relationship between root items that are next to each other if one has an arrow.

Grouping all the actions next to and converting it to only icons makes sense, apart from the multi-field. I wonder how many people will know what that does without a text description? The edit/remove icons are pretty standard so I understand that.

I do think there could be more space between the icons as well so the hit area is a bit more forgiving.

Again, i'm not sold yet on removing the hover effect for the actions. Perhaps we only show the 'add' on hover (and maybe dim back the 'edit/remove' unless hovering). However, let me mockup some ideas to give clearer direction.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 83ff0299e919f0ff399733844ce62773f576ddbe

History

• 💔 Build #17022 failed f3724c468f3cecab592c504d61faa00c31def018

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[sebelga]

There was also a concern that @pcsanwald mentioned at one of our syncs. The big gap between the field name and the actions on the right, especially on big screens.

I might throw a dumb idea here, but what if we had somehow a tooltip with actions that follows the mouse when hovering each field? So you hover and right there you can act on the field. Just an idea 😊

[cjcenizal]

@sebelga I'm going to narrow the purpose of this PR down to just resolving our keyboard-accessibility problems, so for now I'm going to defer new interaction methods like your tooltip idea. Here's where I ended up:

I chose an icon for the "Add multi-field" button that I think is a little clearer (multiple documents):

I also experimented with putting the actions on the right, but I think putting them closer to the node name as @mdefazio suggested makes it way easier to associate an action with the node that's affected. I did find myself afraid of accidentally clicking on the delete button because in some situations it doesn't show the confirmation modal, so I tweaked the delete provider logic so that the confirmation modal will show up for all nodes, not just those with children, aliases, or multi-fields.

Here are the icons on the right:

And on the left (this is what I settled on):

I think this gets us in a good place accessibility-wise, and I think the UX is a step forward from what we currently have, too. I think we can continue to improve this based on @mdefazio's guidance after feature freeze. Do you think this is an acceptable step forward, or do you see any major issues?

In order to mirror these changes, I think we will have to adapt the UI of your search results in the following ways:

• Reveal-on-hover behavior would be removed
• Switching from text buttons to icons with tooltips
• Possibly moving the actions to the left

[cjcenizal]

@mdefazio Re your comment from earlier:

One thought off-hand is that all root level text should line up, whether it has an arrow or not. I think we had this in an earlier iteration—without it there's a confusion in the relationship between root items that are next to each other if one has an arrow.

I'll try to update the PR with this, thanks for pointing it out!

[sebelga]

@cjcenizal I think we are making progress! Thanks for making those changes. I like to have the button near the field name. For the DeleteProvider, I understand why you did it. It makes me think of something I wanted to work on: a toast system with undo embedded (like gmail has).

This would free us from those confirmation modal and let a user quickly delete 3 fields without having a modal popping up each time when he knows he wants to delete them.

I also liked the blue background behind the icons from @mdefazio design with the hover emphasis, do you think it would be possible to add those? (From our conversation about Phases II, I am afraid the "I think we can continue to improve this based on @mdefazio's guidance after feature freeze." would never happen).

I personally don't like having the actions visible at all times as it clutters the UI. I think we should understand how EUI makes it work and reproduce it here in the mappings editor.

As an example, a EUI table

Hover a table row:

Could you explain the difficulty to do the same in the mappings editor?

[cjcenizal]

@elasticmachine merge upstream

[sebelga]

Ok, let's give this UX a try! 👍

[cjcenizal]

I brought back the original spacing and use of row icons per @mdefazio's suggestions, except I changed the multi-field row icon to be "documents".

[cjcenizal]

Search results are now consistent with this approach:

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 9cae00e

History

• 💔 Build #20291 failed 610d3af
• 💚 Build #20010 succeeded 8cbdd710b79a2a44fa6fc323dffb90c0d28ba427
• 💚 Build #19991 succeeded cca28d46d027034ef7a8bd8781618084245ba89f
• 💔 Build #19985 failed 982c20ad31d3b5ad403a0eb4abfae4a6be58e5fe
• 💔 Build #19515 failed 190856ca39e5cab68efd5dc01e0a889c2af0c8da

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream