[Logs UI] Make column configurations reorderable

[weltenwort]

Summary

At the time of the addition of configurable log columns in #34916, inserting a column in any position but the last was cumbersome. Instead of having to delete the columns after the desired position and adding them again later, there should be an easy way for the user to move a column at any location.

relates to #31463

AC

• Support drag and drop operation on the list items to change the order of columns in the configuration screen. This is intuitive for most users but is limited in its accessibility. See: https://elastic.github.io/eui/#/display/drag-and-drop

Mockups

[elasticmachine]

Pinging @elastic/infrastructure-ui

[jasonrhodes]

Have we considered a library to help with this so that we can do dnd UI in an accessible way? Something like: https://github.com/atlassian/react-beautiful-dnd ?

Alternatively, is @thompsongl working on something for DnD in EUI?

[weltenwort]

EUI already has components that wrap react-beautiful-dnd. I just tried it out and it actually is keyboard accessible 🤯 So we should be fine with option 1.

[jasonrhodes]

Haha you are 6 steps ahead of me, great. 🎉

[thompsongl]

Nice! I'll be continuing to add additional styles and context hooks to EUI DnD to extend what you get from react-beautiful-dnd. Seems like this use case is straightforward enough, but let me know if you find any functional gaps or room for improvement

[jasonrhodes]

I updated the ticket to mention EUI drag and drop explicitly. 👍

[Zacqary]

This could be difficult if we want the entire column (as opposed to just the headers) to be picked up and dragged when the user moves their mouse. Since the headers and the columns themselves are rendered in entirely different root components, just having the headers be the draggable elements would be easier. I'll start with that implementation, and if the UX isn't good enough we can look into the heavier approach.

[Zacqary]

Having some difficulty getting EuiDraggable to play nice with the column headers' flexbox styling. Since it creates a new <div> to wrap them in, it cancels out their ability to flex-grow to the correct width. Unfortunately trying to use styled-components to apply the LogEntryColumn styles directly to EuiDraggable doesn't work because there seems to be a conflict in both EUI and styled-components trying to use context.

I'll look for a workaround.

[simianhacker]

@Zacqary Have you tried just adding style={{ flexGrow: 1 }} to EuiDraggable?

[Zacqary]

@simianhacker That's what I was going for, but it turns out I misinterpreted this ticket and we actually want to just have the column names be draggable in the Config screen, not have the user drag and drop the actual columns themselves.

So that's a simpler task.

[weltenwort]

I added a mockup to the description for clarity. Sorry again for the ambiguity.