From 5953e62a726bacd5b49976a3e0863e1d2cb5aa06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez?= Date: Thu, 20 Feb 2020 17:57:00 +0100 Subject: [PATCH] [Logs UI] Fix column reordering in settings page (#58104) * Ensure only one element has scroll Apparently having multiple elements with scroll confuses the `react-beautiful-dnd` mechanism to determine the position of the elements. Adding `overflowY` to the app root fixes it. * Fix upper bound check for log column reordering Co-authored-by: Elastic Machine --- x-pack/plugins/infra/public/apps/start_app.tsx | 1 + .../log_columns_configuration_form_state.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/infra/public/apps/start_app.tsx b/x-pack/plugins/infra/public/apps/start_app.tsx index 300d97d3c45b17..66e699abd22b41 100644 --- a/x-pack/plugins/infra/public/apps/start_app.tsx +++ b/x-pack/plugins/infra/public/apps/start_app.tsx @@ -79,6 +79,7 @@ export async function startApp( // expected. element.style.height = '100%'; element.style.display = 'flex'; + element.style.overflowY = 'hidden'; // Prevent having scroll within a container having scroll. It messes up with drag-n-drop elements element.className += ` ${CONTAINER_CLASSNAME}`; ReactDOM.render(, element); diff --git a/x-pack/plugins/infra/public/components/source_configuration/log_columns_configuration_form_state.tsx b/x-pack/plugins/infra/public/components/source_configuration/log_columns_configuration_form_state.tsx index c5398cf79ef430..0b6a92ed98507f 100644 --- a/x-pack/plugins/infra/public/components/source_configuration/log_columns_configuration_form_state.tsx +++ b/x-pack/plugins/infra/public/components/source_configuration/log_columns_configuration_form_state.tsx @@ -108,7 +108,7 @@ export const useLogColumnsConfigurationFormState = ({ const moveLogColumn = useCallback( (sourceIndex, destinationIndex) => { - if (destinationIndex >= 0 && sourceIndex < formState.logColumns.length - 1) { + if (destinationIndex >= 0 && sourceIndex <= formState.logColumns.length - 1) { const newLogColumns = [...formState.logColumns]; newLogColumns.splice(destinationIndex, 0, newLogColumns.splice(sourceIndex, 1)[0]); setFormStateChanges(changes => ({