From 467280232abf822d258aef5459e91e0375124485 Mon Sep 17 00:00:00 2001 From: spalger Date: Thu, 27 Feb 2020 17:19:35 -0700 Subject: [PATCH 1/2] Revert "[SIEM] Fix Timeline registerProvider to be called only when it's needed (#58051)" This reverts commit 2a03dffdad6c1dbeaf9a541c4ea0fb84183a8ca8. --- .../drag_and_drop/draggable_wrapper.test.tsx | 31 +----- .../drag_and_drop/draggable_wrapper.tsx | 99 ++++++++----------- 2 files changed, 40 insertions(+), 90 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx index d34f4cce9fea4..92adc1a9adb7a 100644 --- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx @@ -12,7 +12,7 @@ import { mockBrowserFields, mocksSource } from '../../containers/source/mock'; import { TestProviders } from '../../mock'; import { mockDataProviders } from '../timeline/data_providers/mock/mock_data_providers'; import { DragDropContextWrapper } from './drag_drop_context_wrapper'; -import { DraggableWrapper, ConditionalPortal } from './draggable_wrapper'; +import { DraggableWrapper } from './draggable_wrapper'; import { useMountAppended } from '../../utils/use_mount_appended'; describe('DraggableWrapper', () => { @@ -84,32 +84,3 @@ describe('DraggableWrapper', () => { }); }); }); - -describe('ConditionalPortal', () => { - const mount = useMountAppended(); - const props = { - usePortal: false, - registerProvider: jest.fn(), - isDragging: true, - }; - - it(`doesn't call registerProvider is NOT isDragging`, () => { - mount( - -
- - ); - - expect(props.registerProvider.mock.calls.length).toEqual(0); - }); - - it('calls registerProvider when isDragging', () => { - mount( - -
- - ); - - expect(props.registerProvider.mock.calls.length).toEqual(1); - }); -}); diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx index 4b80b9fff2740..7d84403b87f8d 100644 --- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx +++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx @@ -4,14 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'; +import React, { createContext, useContext, useEffect } from 'react'; import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable, } from 'react-beautiful-dnd'; -import { useDispatch } from 'react-redux'; +import { connect, ConnectedProps } from 'react-redux'; import styled from 'styled-components'; import deepEqual from 'fast-deep-equal'; @@ -47,50 +47,34 @@ const ProviderContentWrapper = styled.span` } `; -type RenderFunctionProp = ( - props: DataProvider, - provided: DraggableProvided, - state: DraggableStateSnapshot -) => React.ReactNode; - interface OwnProps { dataProvider: DataProvider; inline?: boolean; - render: RenderFunctionProp; + render: ( + props: DataProvider, + provided: DraggableProvided, + state: DraggableStateSnapshot + ) => React.ReactNode; truncate?: boolean; } -type Props = OwnProps; +type Props = OwnProps & PropsFromRedux; /** * Wraps a draggable component to handle registration / unregistration of the * data provider associated with the item being dropped */ -export const DraggableWrapper = React.memo( - ({ dataProvider, render, truncate }) => { - const [providerRegistered, setProviderRegistered] = useState(false); - const dispatch = useDispatch(); +const DraggableWrapperComponent = React.memo( + ({ dataProvider, registerProvider, render, truncate, unRegisterProvider }) => { const usePortal = useDraggablePortalContext(); - const registerProvider = useCallback(() => { - if (!providerRegistered) { - dispatch(dragAndDropActions.registerProvider({ provider: dataProvider })); - setProviderRegistered(true); - } - }, [dispatch, providerRegistered, dataProvider]); - - const unRegisterProvider = useCallback( - () => dispatch(dragAndDropActions.unRegisterProvider({ id: dataProvider.id })), - [dispatch, dataProvider] - ); - - useEffect( - () => () => { - unRegisterProvider(); - }, - [] - ); + useEffect(() => { + registerProvider!({ provider: dataProvider }); + return () => { + unRegisterProvider!({ id: dataProvider.id }); + }; + }, []); return ( @@ -103,18 +87,13 @@ export const DraggableWrapper = React.memo( key={getDraggableId(dataProvider.id)} > {(provided, snapshot) => ( - + ( ); }, - (prevProps, nextProps) => - deepEqual(prevProps.dataProvider, nextProps.dataProvider) && - prevProps.render !== nextProps.render && - prevProps.truncate === nextProps.truncate + (prevProps, nextProps) => { + return ( + deepEqual(prevProps.dataProvider, nextProps.dataProvider) && + prevProps.render !== nextProps.render && + prevProps.truncate === nextProps.truncate + ); + } ); +DraggableWrapperComponent.displayName = 'DraggableWrapperComponent'; + +const mapDispatchToProps = { + registerProvider: dragAndDropActions.registerProvider, + unRegisterProvider: dragAndDropActions.unRegisterProvider, +}; + +const connector = connect(null, mapDispatchToProps); + +type PropsFromRedux = ConnectedProps; + +export const DraggableWrapper = connector(DraggableWrapperComponent); + DraggableWrapper.displayName = 'DraggableWrapper'; /** @@ -155,24 +150,8 @@ DraggableWrapper.displayName = 'DraggableWrapper'; * * See: https://github.com/atlassian/react-beautiful-dnd/issues/499 */ - -interface ConditionalPortalProps { - children: React.ReactNode; - usePortal: boolean; - isDragging: boolean; - registerProvider: () => void; -} - -export const ConditionalPortal = React.memo( - ({ children, usePortal, registerProvider, isDragging }) => { - useEffect(() => { - if (isDragging) { - registerProvider(); - } - }, [isDragging, registerProvider]); - - return usePortal ? {children} : <>{children}; - } +const ConditionalPortal = React.memo<{ children: React.ReactNode; usePortal: boolean }>( + ({ children, usePortal }) => (usePortal ? {children} : <>{children}) ); ConditionalPortal.displayName = 'ConditionalPortal'; From facae44f5b17481cf450e5b310b33a16239feff0 Mon Sep 17 00:00:00 2001 From: spalger Date: Thu, 27 Feb 2020 18:03:04 -0700 Subject: [PATCH 2/2] skip flaky suite (#53888) --- test/functional/apps/context/_size.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/functional/apps/context/_size.js b/test/functional/apps/context/_size.js index 5f3d1ebe40974..ea9b2c8cf1819 100644 --- a/test/functional/apps/context/_size.js +++ b/test/functional/apps/context/_size.js @@ -30,7 +30,8 @@ export default function({ getService, getPageObjects }) { const docTable = getService('docTable'); const PageObjects = getPageObjects(['context']); - describe('context size', function contextSize() { + // FLAKY: https://github.com/elastic/kibana/issues/53888 + describe.skip('context size', function contextSize() { before(async function() { await kibanaServer.uiSettings.update({ 'context:defaultSize': `${TEST_DEFAULT_CONTEXT_SIZE}`,