From a1c32a677869ec9792e36dde8e7927f73e8ac29b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?= Date: Thu, 20 Feb 2020 11:32:24 +0100 Subject: [PATCH 1/2] 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. --- x-pack/plugins/infra/public/apps/start_app.tsx | 1 + 1 file changed, 1 insertion(+) 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); From a4eb08d6c1e11338fc4a7c58dde4a31ef592999a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?= Date: Thu, 20 Feb 2020 11:37:02 +0100 Subject: [PATCH 2/2] Fix upper bound check for log column reordering --- .../log_columns_configuration_form_state.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 => ({