[Logs UI] Drag and drop column reordering doesn't always work

[Kerry350]

In the source configuration (/settings) of the Logs UI the reordering of columns via drag and drop doesn't always work. Sometimes the columns reorder, and sometimes they snap back to where they were. Sometimes no columns at all can be reordered.

This is an example from master:

[weltenwort]

As an observation, dragging something from top to bottom seems to work reliably, but not the other way around.

[elasticmachine]

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

[afgomez]

Hi! I'm digging into this and for me it seems to work completely differently (it doesn't work at all)

@kerry, @weltenwort, what's your output for yarn why react-beautiful-dnd

% yarn why react-beautiful-dnd
# ...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#@elastic#eui" depends on it
   - Hoisted from "_project_#@elastic#eui#react-beautiful-dnd"
info Disk size without dependencies: "8.12MB"
info Disk size with unique dependencies: "18.25MB"
info Disk size with transitive dependencies: "32.66MB"
info Number of shared dependencies: 29
=> Found "siem#[email protected]"
info This module exists because "_project_#siem" depends on it.
=> Found "x-pack#[email protected]"
info This module exists because "_project_#x-pack" depends on it.
✨  Done in 2.14s.

[Kerry350]

We've spoken on Slack, but for visibility:

My output:

yarn why react-beautiful-dnd                                                                      2.71 L
yarn why v1.21.1
[1/4] 🤔  Why do we have the module "react-beautiful-dnd"...?
[2/4] 🚚  Initialising dependency graph...
warning Resolution field "@types/[email protected]" is incompatible with requested version "@types/[email protected]"
warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"
warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"
warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"
warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"
warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"
warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"
warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"
warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"
warning Resolution field "@types/[email protected]" is incompatible with requested version "@types/node@^12.0.2"
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#@elastic#eui" depends on it
   - Hoisted from "_project_#@elastic#eui#react-beautiful-dnd"
info Disk size without dependencies: "8.12MB"
info Disk size with unique dependencies: "18.25MB"
info Disk size with transitive dependencies: "32.66MB"
info Number of shared dependencies: 29
=> Found "siem#[email protected]"
info This module exists because "_project_#siem" depends on it.
=> Found "x-pack#[email protected]"
info This module exists because "_project_#x-pack" depends on it.
✨  Done in 2.62s.

And the behaviour is the same as @afgomez for me now in that nothing reorders.

[afgomez]

Alright, in 7.6 it behaves like in @Kerry350's original video. The problem only occurs when you try to move the last element to an earlier position because a check that uses < should use <=

kibana/x-pack/legacy/plugins/infra/public/components/source_configuration/log_columns_configuration_form_state.tsx

Line 111 in 2f31e58

if (destinationIndex >= 0 && sourceIndex < formState.logColumns.length - 1) {

In current master I don't know yet why it behaves differently. I'm going to do a git bisect and see what I find

[afgomez]

I pinpointed the faulty commit in 0a6c748. I do get a new message in the console with that commit, related to having two versions of styled-components, so maybe there's something there.