Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Logs UI] Make column configurations reorderable #35736

Open
weltenwort opened this issue Apr 29, 2019 · 11 comments

Comments

Projects
None yet
8 participants
@weltenwort
Copy link
Contributor

commented Apr 29, 2019

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

Mockups

image

@elasticmachine

This comment has been minimized.

Copy link
Collaborator

commented Apr 29, 2019

Pinging @elastic/infrastructure-ui

@jasonrhodes

This comment has been minimized.

Copy link
Member

commented May 21, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented May 21, 2019

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

This comment has been minimized.

Copy link
Member

commented May 21, 2019

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

@thompsongl

This comment has been minimized.

Copy link
Contributor

commented May 21, 2019

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

This comment has been minimized.

Copy link
Member

commented Jun 24, 2019

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

@Zacqary

This comment has been minimized.

Copy link
Contributor

commented Jul 11, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Jul 11, 2019

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

This comment has been minimized.

Copy link
Member

commented Jul 11, 2019

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

@Zacqary

This comment has been minimized.

Copy link
Contributor

commented Jul 11, 2019

@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

This comment has been minimized.

Copy link
Contributor Author

commented Jul 12, 2019

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

@Zacqary Zacqary referenced a pull request that will close this issue Jul 12, 2019

Open

[Logs UI] Make column configurations reorderable #41035

2 of 4 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.