[Security Solution] Refactor react-beautiful-dnd render props (#78128)

elastic · Oct 2, 2020 · bd9a9a7 · bd9a9a7
1 parent 4ddcd1d
commit bd9a9a7
Show file tree

Hide file tree

Showing 45 changed files with 3,039 additions and 2,135 deletions.
diff --git a/x-pack/plugins/security_solution/common/search_strategy/timeline/events/all/index.ts b/x-pack/plugins/security_solution/common/search_strategy/timeline/events/all/index.ts
@@ -6,7 +6,7 @@
 
 import { IEsSearchResponse } from '../../../../../../../../src/plugins/data/common';
 import { Ecs } from '../../../../ecs';
-import { CursorType, Inspect, Maybe } from '../../../common';
+import { CursorType, Inspect, Maybe, PageInfoPaginated } from '../../../common';
 import { TimelineRequestOptionsPaginated } from '../..';
 
 export interface TimelineEdges {
@@ -29,10 +29,7 @@ export interface TimelineNonEcsData {
 export interface TimelineEventsAllStrategyResponse extends IEsSearchResponse {
   edges: TimelineEdges[];
   totalCount: number;
-  pageInfo: {
-    activePage: number;
-    totalPages: number;
-  };
+  pageInfo: PageInfoPaginated;
   inspect?: Maybe<Inspect>;
 }
 

diff --git a/x-pack/plugins/security_solution/common/search_strategy/timeline/index.ts b/x-pack/plugins/security_solution/common/search_strategy/timeline/index.ts
@@ -14,7 +14,13 @@ import {
   TimelineEventsLastEventTimeRequestOptions,
   TimelineEventsLastEventTimeStrategyResponse,
 } from './events';
-import { DocValueFields, TimerangeInput, SortField } from '../common';
+import {
+  DocValueFields,
+  PaginationInput,
+  PaginationInputPaginated,
+  TimerangeInput,
+  SortField,
+} from '../common';
 
 export * from './events';
 
@@ -29,19 +35,13 @@ export interface TimelineRequestBasicOptions extends IEsSearchRequest {
 }
 
 export interface TimelineRequestOptions<Field = string> extends TimelineRequestBasicOptions {
-  pagination: {
-    activePage: number;
-    querySize: number;
-  };
+  pagination: PaginationInput;
   sort: SortField<Field>;
 }
 
 export interface TimelineRequestOptionsPaginated<Field = string>
   extends TimelineRequestBasicOptions {
-  pagination: {
-    activePage: number;
-    querySize: number;
-  };
+  pagination: PaginationInputPaginated;
   sort: SortField<Field>;
 }
 

diff --git a/...gins/security_solution/public/common/components/add_filter_to_global_search_bar/index.tsx b/...gins/security_solution/public/common/components/add_filter_to_global_search_bar/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { Filter } from '../../../../../../../src/plugins/data/public';
 import { WithHoverActions } from '../with_hover_actions';
@@ -47,34 +47,36 @@ export const AddFilterToGlobalSearchBar = React.memo<OwnProps>(
       }
     }, [filterManager, filter, onFilterAdded]);
 
-    return (
-      <WithHoverActions
-        hoverContent={
-          <div data-test-subj="hover-actions-container">
-            <EuiToolTip content={i18n.FILTER_FOR_VALUE}>
-              <EuiButtonIcon
-                aria-label={i18n.FILTER_FOR_VALUE}
-                color="text"
-                data-test-subj="add-to-filter"
-                iconType="magnifyWithPlus"
-                onClick={filterForValue}
-              />
-            </EuiToolTip>
+    const HoverContent = useMemo(
+      () => (
+        <div data-test-subj="hover-actions-container">
+          <EuiToolTip content={i18n.FILTER_FOR_VALUE}>
+            <EuiButtonIcon
+              aria-label={i18n.FILTER_FOR_VALUE}
+              color="text"
+              data-test-subj="add-to-filter"
+              iconType="magnifyWithPlus"
+              onClick={filterForValue}
+            />
+          </EuiToolTip>
 
-            <EuiToolTip content={i18n.FILTER_OUT_VALUE}>
-              <EuiButtonIcon
-                aria-label={i18n.FILTER_OUT_VALUE}
-                color="text"
-                data-test-subj="filter-out-value"
-                iconType="magnifyWithMinus"
-                onClick={filterOutValue}
-              />
-            </EuiToolTip>
-          </div>
-        }
-        render={() => children}
-      />
+          <EuiToolTip content={i18n.FILTER_OUT_VALUE}>
+            <EuiButtonIcon
+              aria-label={i18n.FILTER_OUT_VALUE}
+              color="text"
+              data-test-subj="filter-out-value"
+              iconType="magnifyWithMinus"
+              onClick={filterOutValue}
+            />
+          </EuiToolTip>
+        </div>
+      ),
+      [filterForValue, filterOutValue]
     );
+
+    const render = useCallback(() => children, [children]);
+
+    return <WithHoverActions hoverContent={HoverContent} render={render} />;
   }
 );
 

diff --git a/...ns/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx b/...ns/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx
@@ -9,6 +9,7 @@ import React, { useCallback } from 'react';
 import { DropResult, DragDropContext } from 'react-beautiful-dnd';
 import { connect, ConnectedProps } from 'react-redux';
 import { Dispatch } from 'redux';
+import deepEqual from 'fast-deep-equal';
 
 import { BeforeCapture } from './drag_drop_context';
 import { BrowserFields } from '../../containers/source';
@@ -134,13 +135,11 @@ export const DragDropContextWrapperComponent = React.memo<Props & PropsFromRedux
       </DragDropContext>
     );
   },
-  (prevProps, nextProps) => {
-    return (
-      prevProps.children === nextProps.children &&
-      prevProps.dataProviders === nextProps.dataProviders &&
-      prevProps.activeTimelineDataProviders === nextProps.activeTimelineDataProviders
-    ); // prevent re-renders when data providers are added or removed, but all other props are the same
-  }
+  // prevent re-renders when data providers are added or removed, but all other props are the same
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children &&
+    deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
+    prevProps.activeTimelineDataProviders === nextProps.activeTimelineDataProviders
 );
 
 DragDropContextWrapperComponent.displayName = 'DragDropContextWrapperComponent';

diff --git a/...ck/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx b/...ck/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx
@@ -196,76 +196,93 @@ const DraggableWrapperComponent: React.FC<Props> = ({
     ]
   );
 
-  const renderContent = useCallback(
+  const RenderClone = useCallback(
+    (provided, snapshot) => (
+      <ConditionalPortal registerProvider={registerProvider}>
+        <div
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          style={getStyle(provided.draggableProps.style, snapshot)}
+          ref={provided.innerRef}
+          data-test-subj="providerContainer"
+        >
+          <ProviderContentWrapper
+            data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}
+          >
+            {render(dataProvider, provided, snapshot)}
+          </ProviderContentWrapper>
+        </div>
+      </ConditionalPortal>
+    ),
+    [dataProvider, registerProvider, render]
+  );
+
+  const DraggableContent = useCallback(
+    (provided, snapshot) => (
+      <ProviderContainer
+        {...provided.draggableProps}
+        {...provided.dragHandleProps}
+        ref={(e: HTMLDivElement) => {
+          provided.innerRef(e);
+          draggableRef.current = e;
+        }}
+        data-test-subj="providerContainer"
+        isDragging={snapshot.isDragging}
+        registerProvider={registerProvider}
+      >
+        {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>
+    ),
+    [dataProvider, registerProvider, render, truncate]
+  );
+
+  const DroppableContent = useCallback(
+    (droppableProvided) => (
+      <div ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
+        <Draggable
+          draggableId={getDraggableId(dataProvider.id)}
+          index={0}
+          key={getDraggableId(dataProvider.id)}
+          isDragDisabled={isDisabled}
+        >
+          {DraggableContent}
+        </Draggable>
+        {droppableProvided.placeholder}
+      </div>
+    ),
+    [DraggableContent, dataProvider.id, isDisabled]
+  );
+
+  const content = useMemo(
     () => (
       <Wrapper data-test-subj="draggableWrapperDiv" disabled={isDisabled}>
         <DragDropErrorBoundary>
           <Droppable
             isDropDisabled={true}
             droppableId={getDroppableId(dataProvider.id)}
-            renderClone={(provided, snapshot) => (
-              <ConditionalPortal registerProvider={registerProvider}>
-                <div
-                  {...provided.draggableProps}
-                  {...provided.dragHandleProps}
-                  style={getStyle(provided.draggableProps.style, snapshot)}
-                  ref={provided.innerRef}
-                  data-test-subj="providerContainer"
-                >
-                  <ProviderContentWrapper
-                    data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}
-                  >
-                    {render(dataProvider, provided, snapshot)}
-                  </ProviderContentWrapper>
-                </div>
-              </ConditionalPortal>
-            )}
+            renderClone={RenderClone}
           >
-            {(droppableProvided) => (
-              <div ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
-                <Draggable
-                  draggableId={getDraggableId(dataProvider.id)}
-                  index={0}
-                  key={getDraggableId(dataProvider.id)}
-                  isDragDisabled={isDisabled}
-                >
-                  {(provided, snapshot) => (
-                    <ProviderContainer
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                      ref={(e: HTMLDivElement) => {
-                        provided.innerRef(e);
-                        draggableRef.current = e;
-                      }}
-                      data-test-subj="providerContainer"
-                      isDragging={snapshot.isDragging}
-                      registerProvider={registerProvider}
-                    >
-                      {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}
-              </div>
-            )}
+            {DroppableContent}
           </Droppable>
         </DragDropErrorBoundary>
       </Wrapper>
     ),
-    [dataProvider, registerProvider, render, isDisabled, truncate]
+    [DroppableContent, RenderClone, dataProvider.id, isDisabled]
   );
 
-  if (isDisabled) return <>{renderContent()}</>;
+  const renderContent = useCallback(() => content, [content]);
+
+  if (isDisabled) return <>{content}</>;
 
   return (
     <WithHoverActions

diff --git a/...ck/plugins/security_solution/public/common/components/drag_and_drop/droppable_wrapper.tsx b/...ck/plugins/security_solution/public/common/components/drag_and_drop/droppable_wrapper.tsx
@@ -5,7 +5,7 @@
  */
 
 import { rgba } from 'polished';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Droppable, DraggableChildrenFn } from 'react-beautiful-dnd';
 import styled from 'styled-components';
 
@@ -96,15 +96,9 @@ export const DroppableWrapper = React.memo<Props>(
     type,
     render = null,
     renderClone,
-  }) => (
-    <Droppable
-      isDropDisabled={isDropDisabled}
-      droppableId={droppableId}
-      direction={'horizontal'}
-      type={type}
-      renderClone={renderClone}
-    >
-      {(provided, snapshot) => (
+  }) => {
+    const DroppableContent = useCallback(
+      (provided, snapshot) => (
         <ReactDndDropTarget
           height={height}
           ref={provided.innerRef}
@@ -114,8 +108,21 @@ export const DroppableWrapper = React.memo<Props>(
           {render == null ? children : render({ isDraggingOver: snapshot.isDraggingOver })}
           {provided.placeholder}
         </ReactDndDropTarget>
-      )}
-    </Droppable>
-  )
+      ),
+      [children, height, render]
+    );
+
+    return (
+      <Droppable
+        isDropDisabled={isDropDisabled}
+        droppableId={droppableId}
+        direction={'horizontal'}
+        type={type}
+        renderClone={renderClone}
+      >
+        {DroppableContent}
+      </Droppable>
+    );
+  }
 );
 DroppableWrapper.displayName = 'DroppableWrapper';
diff --git a/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx b/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx
@@ -135,7 +135,7 @@ DefaultDraggable.displayName = 'DefaultDraggable';
 
 export const Badge = styled(EuiBadge)`
   vertical-align: top;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+`;
 
 Badge.displayName = 'Badge';