[SIEM] Fix Timeline footer styling (#59587) (#60362)

Author: patrykkopycinski

x-pack/legacy/plugins/siem/cypress/integration/timeline_data_providers.spec.ts

@@ -49,7 +49,7 @@ describe('timeline data providers', () => {
           .first()
           .invoke('text')
           .should(hostname => {
-            expect(dataProviderText).to.eq(`host.name: "${hostname}"`);
+            expect(dataProviderText).to.eq(hostname);
           });
       });
   });

x-pack/legacy/plugins/siem/cypress/integration/timeline_flyout_button.spec.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { TIMELINE_FLYOUT_BODY, TIMELINE_NOT_READY_TO_DROP_BUTTON } from '../screens/timeline';
+import { TIMELINE_FLYOUT_HEADER, TIMELINE_NOT_READY_TO_DROP_BUTTON } from '../screens/timeline';
 
 import { dragFirstHostToTimeline, waitForAllHostsToBeLoaded } from '../tasks/hosts/all_hosts';
 import { loginAndWaitForPage } from '../tasks/login';
@@ -26,7 +26,7 @@ describe('timeline flyout button', () => {
 
   it('toggles open the timeline', () => {
     openTimeline();
-    cy.get(TIMELINE_FLYOUT_BODY).should('have.css', 'visibility', 'visible');
+    cy.get(TIMELINE_FLYOUT_HEADER).should('have.css', 'visibility', 'visible');
   });
 
   // FLAKY: https://github.com/elastic/kibana/issues/60369

x-pack/legacy/plugins/siem/cypress/screens/timeline.ts

@@ -31,6 +31,8 @@ export const TIMELINE_DROPPED_DATA_PROVIDERS = '[data-test-subj="providerContain
 export const TIMELINE_FIELDS_BUTTON =
   '[data-test-subj="timeline"] [data-test-subj="show-field-browser"]';
 
+export const TIMELINE_FLYOUT_HEADER = '[data-test-subj="eui-flyout-header"]';
+
 export const TIMELINE_FLYOUT_BODY = '[data-test-subj="eui-flyout-body"]';
 
 export const TIMELINE_INSPECT_BUTTON = '[data-test-subj="inspect-empty-button"]';

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

@@ -14,7 +14,7 @@
   "devDependencies": {
     "@types/lodash": "^4.14.110",
     "@types/js-yaml": "^3.12.1",
-    "@types/react-beautiful-dnd": "^11.0.4"
+    "@types/react-beautiful-dnd": "^12.1.1"
   },
   "dependencies": {
     "lodash": "^4.17.15",

x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx

@@ -16,8 +16,8 @@ import {
   RecursivePartial,
 } from '@elastic/charts';
 import { getOr, get, isNull, isNumber } from 'lodash/fp';
-import useResizeObserver from 'use-resize-observer/polyfilled';
 
+import { useThrottledResizeObserver } from '../utils';
 import { ChartPlaceHolder } from './chart_place_holder';
 import { useTimeZone } from '../../lib/kibana';
 import {
@@ -131,7 +131,7 @@ interface AreaChartComponentProps {
 }
 
 export const AreaChartComponent: React.FC<AreaChartComponentProps> = ({ areaChart, configs }) => {
-  const { ref: measureRef, width, height } = useResizeObserver<HTMLDivElement>({});
+  const { ref: measureRef, width, height } = useThrottledResizeObserver();
   const customHeight = get('customHeight', configs);
   const customWidth = get('customWidth', configs);
   const chartHeight = getChartHeight(customHeight, height);

x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx

@@ -8,8 +8,8 @@ import React from 'react';
 import { Chart, BarSeries, Axis, Position, ScaleType, Settings } from '@elastic/charts';
 import { getOr, get, isNumber } from 'lodash/fp';
 import deepmerge from 'deepmerge';
-import useResizeObserver from 'use-resize-observer/polyfilled';
 
+import { useThrottledResizeObserver } from '../utils';
 import { useTimeZone } from '../../lib/kibana';
 import { ChartPlaceHolder } from './chart_place_holder';
 import {
@@ -105,7 +105,7 @@ interface BarChartComponentProps {
 }
 
 export const BarChartComponent: React.FC<BarChartComponentProps> = ({ barChart, configs }) => {
-  const { ref: measureRef, width, height } = useResizeObserver<HTMLDivElement>({});
+  const { ref: measureRef, width, height } = useThrottledResizeObserver();
   const customHeight = get('customHeight', configs);
   const customWidth = get('customWidth', configs);
   const chartHeight = getChartHeight(customHeight, height);

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { defaultTo, noop } from 'lodash/fp';
+import { noop } from 'lodash/fp';
 import React, { useCallback } from 'react';
 import { DropResult, DragDropContext } from 'react-beautiful-dnd';
 import { connect, ConnectedProps } from 'react-redux';
@@ -103,10 +103,7 @@ DragDropContextWrapperComponent.displayName = 'DragDropContextWrapperComponent';
 const emptyDataProviders: dragAndDropModel.IdToDataProvider = {}; // stable reference
 
 const mapStateToProps = (state: State) => {
-  const dataProviders = defaultTo(
-    emptyDataProviders,
-    dragAndDropSelectors.dataProvidersSelector(state)
-  );
+  const dataProviders = dragAndDropSelectors.dataProvidersSelector(state) ?? emptyDataProviders;
 
   return { dataProviders };
 };

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

@@ -88,21 +88,9 @@ 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}>

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Draggable,
   DraggableProvided,
@@ -15,7 +15,6 @@ import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
 
-import { EuiPortal } from '@elastic/eui';
 import { dragAndDropActions } from '../../store/drag_and_drop';
 import { DataProvider } from '../timeline/data_providers/data_provider';
 import { TruncatableText } from '../truncatable_text';
@@ -27,9 +26,6 @@ export const DragEffects = styled.div``;
 
 DragEffects.displayName = 'DragEffects';
 
-export const DraggablePortalContext = createContext<boolean>(false);
-export const useDraggablePortalContext = () => useContext(DraggablePortalContext);
-
 /**
  * Wraps the `react-beautiful-dnd` error boundary. See also:
  * https://github.com/atlassian/react-beautiful-dnd/blob/v12.0.0/docs/guides/setup-problem-detection-and-error-recovery.md
@@ -89,7 +85,6 @@ export const DraggableWrapper = React.memo<Props>(
   ({ dataProvider, render, truncate }) => {
     const [providerRegistered, setProviderRegistered] = useState(false);
     const dispatch = useDispatch();
-    const usePortal = useDraggablePortalContext();
 
     const registerProvider = useCallback(() => {
       if (!providerRegistered) {
@@ -113,7 +108,26 @@ export const DraggableWrapper = React.memo<Props>(
     return (
       <Wrapper data-test-subj="draggableWrapperDiv">
         <DragDropErrorBoundary>
-          <Droppable isDropDisabled={true} droppableId={getDroppableId(dataProvider.id)}>
+          <Droppable
+            isDropDisabled={true}
+            droppableId={getDroppableId(dataProvider.id)}
+            renderClone={(provided, snapshot) => (
+              <ConditionalPortal registerProvider={registerProvider}>
+                <div
+                  {...provided.draggableProps}
+                  {...provided.dragHandleProps}
+                  ref={provided.innerRef}
+                  data-test-subj="providerContainer"
+                >
+                  <ProviderContentWrapper
+                    data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}
+                  >
+                    {render(dataProvider, provided, snapshot)}
+                  </ProviderContentWrapper>
+                </div>
+              </ConditionalPortal>
+            )}
+          >
             {droppableProvided => (
               <div ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
                 <Draggable
@@ -122,35 +136,26 @@ export const DraggableWrapper = React.memo<Props>(
                   key={getDraggableId(dataProvider.id)}
                 >
                   {(provided, snapshot) => (
-                    <ConditionalPortal
+                    <ProviderContainer
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      ref={provided.innerRef}
+                      data-test-subj="providerContainer"
                       isDragging={snapshot.isDragging}
                       registerProvider={registerProvider}
-                      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,
-                        }}
-                      >
-                        {truncate && !snapshot.isDragging ? (
-                          <TruncatableText data-test-subj="draggable-truncatable-content">
-                            {render(dataProvider, provided, snapshot)}
-                          </TruncatableText>
-                        ) : (
-                          <ProviderContentWrapper
-                            data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}
-                          >
-                            {render(dataProvider, provided, snapshot)}
-                          </ProviderContentWrapper>
-                        )}
-                      </ProviderContainer>
-                    </ConditionalPortal>
+                      {truncate && !snapshot.isDragging ? (
+                        <TruncatableText data-test-subj="draggable-truncatable-content">
+                          {render(dataProvider, provided, snapshot)}
+                        </TruncatableText>
+                      ) : (
+                        <ProviderContentWrapper
+                          data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}
+                        >
+                          {render(dataProvider, provided, snapshot)}
+                        </ProviderContentWrapper>
+                      )}
+                    </ProviderContainer>
                   )}
                 </Draggable>
                 {droppableProvided.placeholder}
@@ -178,20 +183,16 @@ DraggableWrapper.displayName = 'DraggableWrapper';
 
 interface ConditionalPortalProps {
   children: React.ReactNode;
-  usePortal: boolean;
-  isDragging: boolean;
   registerProvider: () => void;
 }
 
 export const ConditionalPortal = React.memo<ConditionalPortalProps>(
-  ({ children, usePortal, registerProvider, isDragging }) => {
+  ({ children, registerProvider }) => {
     useEffect(() => {
-      if (isDragging) {
-        registerProvider();
-      }
-    }, [isDragging, registerProvider]);
+      registerProvider();
+    }, [registerProvider]);
 
-    return usePortal ? <EuiPortal>{children}</EuiPortal> : <>{children}</>;
+    return <>{children}</>;
   }
 );
 

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

@@ -6,7 +6,7 @@
 
 import { rgba } from 'polished';
 import React from 'react';
-import { Droppable } from 'react-beautiful-dnd';
+import { Droppable, DraggableChildrenFn } from 'react-beautiful-dnd';
 import styled from 'styled-components';
 
 interface Props {
@@ -16,6 +16,7 @@ interface Props {
   isDropDisabled?: boolean;
   type?: string;
   render?: ({ isDraggingOver }: { isDraggingOver: boolean }) => React.ReactNode;
+  renderClone?: DraggableChildrenFn;
 }
 
 const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string }>`
@@ -94,12 +95,14 @@ export const DroppableWrapper = React.memo<Props>(
     isDropDisabled = false,
     type,
     render = null,
+    renderClone,
   }) => (
     <Droppable
       isDropDisabled={isDropDisabled}
       droppableId={droppableId}
       direction={'horizontal'}
       type={type}
+      renderClone={renderClone}
     >
       {(provided, snapshot) => (
         <ReactDndDropTarget