[7.x] [SIEM] Fix Timeline drag and drop behavior (#51558)

package.json

@@ -84,7 +84,10 @@
  "**/graphql-toolkit/lodash": "^4.17.13",
  "**/isomorphic-git/**/base64-js": "^1.2.1",
  "**/image-diff/gm/debug": "^2.6.9",
- "**/deepmerge": "^4.2.2"
+ "**/deepmerge": "^4.2.2",
+ "**/react": "16.8.6",
+ "**/react-dom": "16.8.6",
+ "**/react-test-renderer": "16.8.6"
  },
  "workspaces": {
  "packages": [
@@ -211,10 +214,10 @@
  "pug": "^2.0.3",
  "querystring-browser": "1.0.4",
  "raw-loader": "3.1.0",
- "react": "^16.8.0",
+ "react": "^16.8.6",
  "react-addons-shallow-compare": "15.6.2",
  "react-color": "^2.13.8",
- "react-dom": "^16.8.0",
+ "react-dom": "^16.8.6",
  "react-grid-layout": "^0.16.2",
  "react-hooks-testing-library": "^0.5.0",
  "react-input-range": "^1.3.0",

packages/kbn-i18n/package.json

@@ -28,7 +28,7 @@
  "intl-messageformat": "^2.2.0",
  "intl-relativeformat": "^2.1.0",
  "prop-types": "^15.6.2",
- "react": "^16.8.0",
+ "react": "^16.8.6",
  "react-intl": "^2.8.0"
  }
 }

packages/kbn-ui-framework/package.json

@@ -19,7 +19,7 @@
  "focus-trap-react": "^3.1.1",
  "lodash": "npm:@elastic/[email protected]",
  "prop-types": "15.6.0",
- "react": "^16.8.0",
+ "react": "^16.8.6",
  "react-ace": "^5.9.0",
  "react-color": "^2.13.8",
  "tabbable": "1.1.3",
@@ -57,7 +57,7 @@
  "postcss": "^7.0.5",
  "postcss-loader": "^3.0.0",
  "raw-loader": "^3.1.0",
- "react-dom": "^16.8.0",
+ "react-dom": "^16.8.6",
  "react-redux": "^5.0.6",
  "react-router": "^3.2.0",
  "react-router-redux": "^4.0.8",

test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json

@@ -8,7 +8,7 @@
  "license": "Apache-2.0",
  "dependencies": {
  "@elastic/eui": "16.0.0",
- "react": "^16.8.0",
- "react-dom": "^16.8.0"
+ "react": "^16.8.6",
+ "react-dom": "^16.8.6"
  }
 }

test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json

@@ -8,6 +8,6 @@
  "license": "Apache-2.0",
  "dependencies": {
  "@elastic/eui": "16.0.0",
- "react": "^16.8.0"
+ "react": "^16.8.6"
  }
 }

test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json

@@ -9,7 +9,7 @@
  "license": "Apache-2.0",
  "dependencies": {
  "@elastic/eui": "16.0.0",
- "react": "^16.8.0"
+ "react": "^16.8.6"
  },
  "scripts": {
  "kbn": "node ../../../../scripts/kbn.js",

test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json

@@ -9,7 +9,7 @@
  "license": "Apache-2.0",
  "dependencies": {
  "@elastic/eui": "16.0.0",
- "react": "^16.8.0"
+ "react": "^16.8.6"
  },
  "scripts": {
  "kbn": "node ../../../../scripts/kbn.js",

x-pack/legacy/plugins/siem/package.json

@@ -12,11 +12,11 @@
  "devDependencies": {
  "@types/lodash": "^4.14.110",
  "@types/js-yaml": "^3.12.1",
- "@types/react-beautiful-dnd": "^10.0.1"
+ "@types/react-beautiful-dnd": "^11.0.3"
  },
  "dependencies": {
  "lodash": "^4.17.15",
- "react-beautiful-dnd": "^10.0.1",
+ "react-beautiful-dnd": "^12.1.1",
  "react-markdown": "^4.0.6"
  }
 }

x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context.tsx

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// https:/DefinitelyTyped/DefinitelyTyped/pull/40309
+
+import { MovementMode, DraggableId } from 'react-beautiful-dnd';
+
+export interface BeforeCapture {
+ draggableId: DraggableId;
+ mode: MovementMode;
+}

x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.tsx

@@ -6,10 +6,11 @@
 
 import { defaultTo, noop } from 'lodash/fp';
 import React, { useCallback } from 'react';
-import { DragDropContext, DropResult, DragStart } from 'react-beautiful-dnd';
+import { DropResult, DragDropContext } from 'react-beautiful-dnd';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
+import { BeforeCapture } from './drag_drop_context';
 import { BrowserFields } from '../../containers/source';
 import { dragAndDropModel, dragAndDropSelectors } from '../../store';
 import { IdToDataProvider } from '../../store/drag_and_drop/model';
@@ -20,6 +21,7 @@ import {
  addProviderToTimeline,
  fieldWasDroppedOnTimelineColumns,
  IS_DRAGGING_CLASS_NAME,
+ IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME,
  providerWasDroppedOnTimeline,
  providerWasDroppedOnTimelineButton,
  draggableIsField,
@@ -75,11 +77,16 @@ export const DragDropContextWrapperComponent = React.memo<Props>(
  if (!draggableIsField(result)) {
  document.body.classList.remove(IS_DRAGGING_CLASS_NAME);
  }
+
+ if (draggableIsField(result)) {
+ document.body.classList.remove(IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME);
+ }
  },
  [browserFields, dataProviders]
  );
  return (
- <DragDropContext onDragEnd={onDragEnd} onDragStart={onDragStart}>
+ // @ts-ignore
+ <DragDropContext onDragEnd={onDragEnd} onBeforeCapture={onBeforeCapture}>
  {children}
  </DragDropContext>
  );
@@ -107,7 +114,7 @@ const mapStateToProps = (state: State) => {
 
 export const DragDropContextWrapper = connect(mapStateToProps)(DragDropContextWrapperComponent);
 
-const onDragStart = (initial: DragStart) => {
+const onBeforeCapture = (before: BeforeCapture) => {
  const x =
  window.pageXOffset !== undefined
  ? window.pageXOffset
@@ -120,9 +127,13 @@ const onDragStart = (initial: DragStart) => {
 
  window.onscroll = () => window.scrollTo(x, y);
 
- if (!draggableIsField(initial)) {
+ if (!draggableIsField(before)) {
  document.body.classList.add(IS_DRAGGING_CLASS_NAME);
  }
+
+ if (draggableIsField(before)) {
+ document.body.classList.add(IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME);
+ }
 };
 
 const enableScrolling = () => (window.onscroll = () => noop);

x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx

@@ -34,6 +34,10 @@ export const useDraggablePortalContext = () => useContext(DraggablePortalContext
 const Wrapper = styled.div`
  display: inline-block;
  max-width: 100%;
+
+ [data-rbd-placeholder-context-id] {
+ display: none !important;
+ }
 `;
 
 Wrapper.displayName = 'Wrapper';

x-pack/legacy/plugins/siem/public/components/drag_and_drop/helpers.test.ts

@@ -116,7 +116,7 @@ describe('helpers', () => {
  test('it returns false when the draggable is NOT content', () => {
  expect(
  draggableIsContent({
- destination: null,
+ destination: undefined,
  draggableId: `${draggableIdPrefix}.timeline.timeline.dataProvider.685260508808089`,
  reason: 'DROP',
  source: {
@@ -230,10 +230,10 @@ describe('helpers', () => {
  ).toEqual(true);
  });
 
- test('it returns false when the destination is null', () => {
+ test('it returns false when the destination is undefined', () => {
  expect(
  destinationIsTimelineProviders({
- destination: null,
+ destination: undefined,
  draggableId: getDraggableId('685260508808089'),
  reason: 'DROP',
  source: {
@@ -286,10 +286,10 @@ describe('helpers', () => {
  ).toEqual(true);
  });
 
- test('it returns returns false when the destination is null', () => {
+ test('it returns returns false when the destination is undefined', () => {
  expect(
  destinationIsTimelineColumns({
- destination: null,
+ destination: undefined,
  draggableId: getDraggableFieldId({ contextId: 'test', fieldId: 'event.action' }),
  reason: 'DROP',
  source: {
@@ -342,10 +342,10 @@ describe('helpers', () => {
  ).toEqual(true);
  });
 
- test('it returns false when the destination is null', () => {
+ test('it returns false when the destination is undefined', () => {
  expect(
  destinationIsTimelineButton({
- destination: null,
+ destination: undefined,
  draggableId: getDraggableId('685260508808089'),
  reason: 'DROP',
  source: {
@@ -436,10 +436,10 @@ describe('helpers', () => {
  ).toEqual('timeline');
  });
 
- test('it returns returns an empty string when the destination is null', () => {
+ test('it returns returns an empty string when the destination is undefined', () => {
  expect(
  getTimelineIdFromDestination({
- destination: null,
+ destination: undefined,
  draggableId: `${draggableIdPrefix}.timeline.timeline.dataProvider.685260508808089`,
  reason: 'DROP',
  source: {
@@ -558,7 +558,7 @@ describe('helpers', () => {
  test('it returns false when the draggable is NOT content', () => {
  expect(
  providerWasDroppedOnTimeline({
- destination: null,
+ destination: undefined,
  draggableId: `${draggableIdPrefix}.timeline.timeline.dataProvider.685260508808089`,
  reason: 'DROP',
  source: {

x-pack/legacy/plugins/siem/public/components/drag_and_drop/helpers.ts

@@ -224,3 +224,6 @@ export const DRAG_TYPE_FIELD = 'drag-type-field';
 
 /** This class is added to the document body while dragging */
 export const IS_DRAGGING_CLASS_NAME = 'is-dragging';
+
+/** This class is added to the document body while timeline field dragging */
+export const IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME = 'is-timeline-field-dragging';

x-pack/legacy/plugins/siem/public/components/error_toast_dispatcher/index.test.tsx

@@ -30,7 +30,7 @@ describe('Error Toast Dispatcher', () => {
  <ErrorToastDispatcher toastLifeTimeMs={9999999999} />
  </Provider>
  );
- expect(toJson(wrapper)).toMatchSnapshot();
+ expect(toJson(wrapper.find('Connect(ErrorToastDispatcherComponent)'))).toMatchSnapshot();
  });
  });
 });

x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.test.tsx

@@ -49,7 +49,7 @@ describe('Authentication Table Component', () => {
  </ReduxStoreProvider>
  );
 
- expect(toJson(wrapper)).toMatchSnapshot();
+ expect(toJson(wrapper.find('Connect(AuthenticationTableComponent)'))).toMatchSnapshot();
  });
  });
 

x-pack/legacy/plugins/siem/public/components/page/index.tsx

@@ -19,7 +19,6 @@ import styled, { createGlobalStyle } from 'styled-components';
  SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly
  and `EuiPopover`, `EuiToolTip` global styles
 */
-
 export const AppGlobalStyle = createGlobalStyle`
  div.app-wrapper {
  background-color: rgba(0,0,0,0);

x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.test.tsx

@@ -42,7 +42,7 @@ describe('KpiNetwork Component', () => {
  </ReduxStoreProvider>
  );
 
- expect(toJson(wrapper)).toMatchSnapshot();
+ expect(toJson(wrapper.find('KpiNetworkComponent'))).toMatchSnapshot();
  });
 
  test('it renders the default widget', () => {
@@ -59,7 +59,7 @@ describe('KpiNetwork Component', () => {
  </ReduxStoreProvider>
  );
 
- expect(toJson(wrapper)).toMatchSnapshot();
+ expect(toJson(wrapper.find('KpiNetworkComponent'))).toMatchSnapshot();
  });
  });
 });

x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/index.test.tsx

@@ -51,7 +51,7 @@ describe('NetworkTopNFlow Table Component', () => {
  </ReduxStoreProvider>
  );
 
- expect(toJson(wrapper)).toMatchSnapshot();
+ expect(toJson(wrapper.find('Connect(NetworkDnsTableComponent)'))).toMatchSnapshot();
  });
  });
 

x-pack/legacy/plugins/siem/public/components/page/network/network_http_table/index.test.tsx

@@ -51,7 +51,7 @@ describe('NetworkHttp Table Component', () => {
  </ReduxStoreProvider>
  );
 
- expect(toJson(wrapper)).toMatchSnapshot();
+ expect(toJson(wrapper.find('Connect(NetworkHttpTableComponent)'))).toMatchSnapshot();
  });
  });
 

x-pack/legacy/plugins/siem/public/components/page/network/network_top_countries_table/index.test.tsx

@@ -57,7 +57,7 @@ describe('NetworkTopCountries Table Component', () => {
  </ReduxStoreProvider>
  );
 
- expect(toJson(wrapper)).toMatchSnapshot();
+ expect(toJson(wrapper.find('Connect(NetworkTopCountriesTableComponent)'))).toMatchSnapshot();
  });
  test('it renders the IP Details NetworkTopCountries table', () => {
  const wrapper = shallow(
@@ -82,7 +82,7 @@ describe('NetworkTopCountries Table Component', () => {
  </ReduxStoreProvider>
  );
 
- expect(toJson(wrapper)).toMatchSnapshot();
+ expect(toJson(wrapper.find('Connect(NetworkTopCountriesTableComponent)'))).toMatchSnapshot();
  });
  });
 

x-pack/legacy/plugins/siem/public/components/page/network/network_top_n_flow_table/index.test.tsx

@@ -57,7 +57,7 @@ describe('NetworkTopNFlow Table Component', () => {
  </ReduxStoreProvider>
  );
 
- expect(toJson(wrapper)).toMatchSnapshot();
+ expect(toJson(wrapper.find('Connect(NetworkTopNFlowTableComponent)'))).toMatchSnapshot();
  });
 
  test('it renders the default NetworkTopNFlow table on the IP Details page', () => {
@@ -83,7 +83,7 @@ describe('NetworkTopNFlow Table Component', () => {
  </ReduxStoreProvider>
  );
 
- expect(toJson(wrapper)).toMatchSnapshot();
+ expect(toJson(wrapper.find('Connect(NetworkTopNFlowTableComponent)'))).toMatchSnapshot();
  });
  });
 

x-pack/legacy/plugins/siem/public/components/page/network/tls_table/index.test.tsx

@@ -47,7 +47,7 @@ describe('Tls Table Component', () => {
  </ReduxStoreProvider>
  );
 
- expect(toJson(wrapper)).toMatchSnapshot();
+ expect(toJson(wrapper.find('Connect(TlsTableComponent)'))).toMatchSnapshot();
  });
  });
 

x-pack/legacy/plugins/siem/public/components/page/network/users_table/index.test.tsx

@@ -55,7 +55,7 @@ describe('Users Table Component', () => {
  </ReduxStoreProvider>
  );
 
- expect(toJson(wrapper)).toMatchSnapshot();
+ expect(toJson(wrapper.find('Connect(UsersTableComponent)'))).toMatchSnapshot();
  });
  });