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

package.json

@@ -86,7 +86,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": [
@@ -213,10 +216,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://github.com/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();
     });
   });