Skip to content

Commit

Permalink
Merge branch 'master' into autocompleteOptions
Browse files Browse the repository at this point in the history
  • Loading branch information
@elasticmachine
elasticmachine committed Feb 28, 2020
2 parents cd52dd9 + facae44 commit 61b56f0
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 91 deletions.
3 changes: 2 additions & 1 deletion test/functional/apps/context/_size.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`,
Expand Down
31 changes: 1 addition & 30 deletions x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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(
<ConditionalPortal {...props} isDragging={false}>
<div />
</ConditionalPortal>
);

expect(props.registerProvider.mock.calls.length).toEqual(0);
});

it('calls registerProvider when isDragging', () => {
mount(
<ConditionalPortal {...props}>
<div />
</ConditionalPortal>
);

expect(props.registerProvider.mock.calls.length).toEqual(1);
});
});
99 changes: 39 additions & 60 deletions x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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<Props>(
({ dataProvider, render, truncate }) => {
const [providerRegistered, setProviderRegistered] = useState(false);
const dispatch = useDispatch();
const DraggableWrapperComponent = React.memo<Props>(
({ 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 (
<Wrapper data-test-subj="draggableWrapperDiv">
Expand All @@ -103,18 +87,13 @@ export const DraggableWrapper = React.memo<Props>(
key={getDraggableId(dataProvider.id)}
>
{(provided, snapshot) => (
<ConditionalPortal
isDragging={snapshot.isDragging}
registerProvider={registerProvider}
usePortal={snapshot.isDragging && usePortal}
>
<ConditionalPortal usePortal={snapshot.isDragging && usePortal}>
<ProviderContainer
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
data-test-subj="providerContainer"
isDragging={snapshot.isDragging}
registerProvider={registerProvider}
style={{
...provided.draggableProps.style,
}}
Expand All @@ -141,12 +120,28 @@ export const DraggableWrapper = React.memo<Props>(
</Wrapper>
);
},
(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<typeof connector>;

export const DraggableWrapper = connector(DraggableWrapperComponent);

DraggableWrapper.displayName = 'DraggableWrapper';

/**
Expand All @@ -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<ConditionalPortalProps>(
({ children, usePortal, registerProvider, isDragging }) => {
useEffect(() => {
if (isDragging) {
registerProvider();
}
}, [isDragging, registerProvider]);

return usePortal ? <EuiPortal>{children}</EuiPortal> : <>{children}</>;
}
const ConditionalPortal = React.memo<{ children: React.ReactNode; usePortal: boolean }>(
({ children, usePortal }) => (usePortal ? <EuiPortal>{children}</EuiPortal> : <>{children}</>)
);

ConditionalPortal.displayName = 'ConditionalPortal';

0 comments on commit 61b56f0

Please sign in to comment.