[SIEM] Upgrades react-redux and utilize React.memo for performance gains

package.json

@@ -215,7 +215,7 @@
     "react-hooks-testing-library": "^0.5.0",
     "react-input-range": "^1.3.0",
     "react-markdown": "^3.4.1",
-    "react-redux": "^5.0.7",
+    "react-redux": "^5.1.1",
     "react-router-dom": "^4.3.1",
     "react-sizeme": "^2.3.6",
     "reactcss": "1.2.3",

x-pack/legacy/plugins/siem/public/components/and_or_badge/index.tsx

@@ -33,6 +33,8 @@ const RoundedBadge = styled(EuiBadge)`
   }
 `;
 
+RoundedBadge.displayName = 'RoundedBadge';
+
 export type AndOr = 'and' | 'or';
 
 /** Displays AND / OR in a round badge */
@@ -45,3 +47,5 @@ export const AndOrBadge = pure<{ type: AndOr }>(({ type }) => {
     </RoundedBadge>
   );
 });
+
+AndOrBadge.displayName = 'AndOrBadge';

x-pack/legacy/plugins/siem/public/components/arrows/index.tsx

@@ -16,6 +16,8 @@ export const ArrowBody = styled.span<{ height: number }>`
   width: 25px;
 `;
 
+ArrowBody.displayName = 'ArrowBody';
+
 export type ArrowDirection = 'arrowLeft' | 'arrowRight';
 
 /** Renders the head of an arrow */
@@ -24,3 +26,5 @@ export const ArrowHead = pure<{
 }>(({ direction }) => (
   <EuiIcon color="subdued" data-test-subj="arrow-icon" size="s" type={direction} />
 ));
+
+ArrowHead.displayName = 'ArrowHead';

x-pack/legacy/plugins/siem/public/components/autocomplete_field/index.tsx

@@ -311,6 +311,8 @@ const AutocompleteContainer = euiStyled.div`
   position: relative;
 `;
 
+AutocompleteContainer.displayName = 'AutocompleteContainer';
+
 const SuggestionsPanel = euiStyled(EuiPanel).attrs({
   paddingSize: 'none',
   hasShadow: true,
@@ -321,3 +323,5 @@ const SuggestionsPanel = euiStyled(EuiPanel).attrs({
   overflow: hidden;
   z-index: ${props => props.theme.eui.euiZLevel1};
 `;
+
+SuggestionsPanel.displayName = 'SuggestionsPanel';

x-pack/legacy/plugins/siem/public/components/autocomplete_field/suggestion_item.tsx

@@ -25,7 +25,6 @@ export class SuggestionItem extends React.PureComponent<SuggestionItemProps> {
 
   public render() {
     const { isSelected, onClick, onMouseEnter, suggestion } = this.props;
-
     return (
       <SuggestionItemContainer
         isSelected={isSelected}
@@ -55,6 +54,8 @@ const SuggestionItemContainer = euiStyled.div<{
     props.isSelected ? props.theme.eui.euiColorLightestShade : 'transparent'};
 `;
 
+SuggestionItemContainer.displayName = 'SuggestionItemContainer';
+
 const SuggestionItemField = euiStyled.div`
   align-items: center;
   cursor: pointer;
@@ -64,6 +65,8 @@ const SuggestionItemField = euiStyled.div`
   padding: ${props => props.theme.eui.euiSizeXS};
 `;
 
+SuggestionItemField.displayName = 'SuggestionItemField';
+
 const SuggestionItemIconField = styled(SuggestionItemField)<{ suggestionType: string }>`
   background-color: ${props =>
     transparentize(0.9, getEuiIconColor(props.theme, props.suggestionType))};
@@ -73,11 +76,15 @@ const SuggestionItemIconField = styled(SuggestionItemField)<{ suggestionType: st
   width: ${props => props.theme.eui.euiSizeXL};
 `;
 
+SuggestionItemIconField.displayName = 'SuggestionItemIconField';
+
 const SuggestionItemTextField = styled(SuggestionItemField)`
   flex: 2 0 0;
   font-family: ${props => props.theme.eui.euiCodeFontFamily};
 `;
 
+SuggestionItemTextField.displayName = 'SuggestionItemTextField';
+
 const SuggestionItemDescriptionField = styled(SuggestionItemField)`
   flex: 3 0 0;
 
@@ -90,6 +97,8 @@ const SuggestionItemDescriptionField = styled(SuggestionItemField)`
   }
 `;
 
+SuggestionItemDescriptionField.displayName = 'SuggestionItemDescriptionField';
+
 const getEuiIconType = (suggestionType: string) => {
   switch (suggestionType) {
     case 'field':

x-pack/legacy/plugins/siem/public/components/certificate_fingerprint/index.tsx

@@ -26,6 +26,8 @@ const FingerprintLabel = styled.span`
   margin-right: 5px;
 `;
 
+FingerprintLabel.displayName = 'FingerprintLabel';
+
 /**
  * Represents a field containing a certificate fingerprint (e.g. a sha1), with
  * a link to an external site, which in-turn compares the fingerprint against a
@@ -63,3 +65,5 @@ export const CertificateFingerprint = pure<{
     </DraggableBadge>
   );
 });
+
+CertificateFingerprint.displayName = 'CertificateFingerprint';

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

@@ -119,6 +119,8 @@ export const AreaChartBaseComponent = React.memo<{
   ) : null;
 });
 
+AreaChartBaseComponent.displayName = 'AreaChartBaseComponent';
+
 export const AreaChartWithCustomPrompt = React.memo<{
   data: ChartConfigsData[] | null | undefined;
   height: number | null | undefined;
@@ -139,6 +141,8 @@ export const AreaChartWithCustomPrompt = React.memo<{
   );
 });
 
+AreaChartWithCustomPrompt.displayName = 'AreaChartWithCustomPrompt';
+
 export const AreaChart = React.memo<{
   areaChart: ChartConfigsData[] | null | undefined;
   configs?: ChartSeriesConfigs | undefined;
@@ -156,3 +160,5 @@ export const AreaChart = React.memo<{
     )}
   </AutoSizer>
 ));
+
+AreaChart.displayName = 'AreaChart';

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

@@ -83,6 +83,8 @@ export const BarChartBaseComponent = React.memo<{
   ) : null;
 });
 
+BarChartBaseComponent.displayName = 'BarChartBaseComponent';
+
 export const BarChartWithCustomPrompt = React.memo<{
   data: ChartConfigsData[] | null | undefined;
   height: number | null | undefined;
@@ -101,6 +103,8 @@ export const BarChartWithCustomPrompt = React.memo<{
   );
 });
 
+BarChartWithCustomPrompt.displayName = 'BarChartWithCustomPrompt';
+
 export const BarChart = React.memo<{
   barChart: ChartConfigsData[] | null | undefined;
   configs?: ChartSeriesConfigs | undefined;
@@ -113,3 +117,5 @@ export const BarChart = React.memo<{
     )}
   </AutoSizer>
 ));
+
+BarChart.displayName = 'BarChart';

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

@@ -28,6 +28,9 @@ const chartDefaultRendering: Rendering = 'canvas';
 const FlexGroup = styled(EuiFlexGroup)`
   height: 100%;
 `;
+
+FlexGroup.displayName = 'FlexGroup';
+
 export type UpdateDateRange = (min: number, max: number) => void;
 
 export const ChartHolder = () => (
@@ -87,6 +90,8 @@ export const WrappedByAutoSizer = styled.div`
   }
 `;
 
+WrappedByAutoSizer.displayName = 'WrappedByAutoSizer';
+
 export enum SeriesType {
   BAR = 'bar',
   AREA = 'area',

x-pack/legacy/plugins/siem/public/components/direction/index.tsx

@@ -70,3 +70,5 @@ export const DirectionBadge = pure<{
     value={direction}
   />
 ));
+
+DirectionBadge.displayName = 'DirectionBadge';

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

@@ -26,13 +26,17 @@ import { getDraggableId, getDroppableId } from './helpers';
 // As right now, we do not know what we want there, we will keep it as a placeholder
 export const DragEffects = styled.div``;
 
+DragEffects.displayName = 'DragEffects';
+
 const ProviderContainer = styled.div`
   &:hover {
     transition: background-color 0.7s ease;
     background-color: ${props => props.theme.eui.euiColorLightShade};
   }
 `;
 
+ProviderContainer.displayName = 'ProviderContainer';
+
 interface OwnProps {
   dataProvider: DataProvider;
   render: (

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

@@ -71,6 +71,8 @@ const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string
   }
 `;
 
+ReactDndDropTarget.displayName = 'ReactDndDropTarget';
+
 export const DroppableWrapper = pure<Props>(
   ({ children, droppableId, height = '100%', isDropDisabled = false, type }) => (
     <Droppable
@@ -93,3 +95,5 @@ export const DroppableWrapper = pure<Props>(
     </Droppable>
   )
 );
+
+DroppableWrapper.displayName = 'DroppableWrapper';

x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx

@@ -19,10 +19,14 @@ const FieldBadgeFlexGroup = styled(EuiFlexGroup)`
   height: 38px;
 `;
 
+FieldBadgeFlexGroup.displayName = 'FieldBadgeFlexGroup';
+
 const FieldBadgeFlexItem = styled(EuiFlexItem)`
   font-weight: bold;
 `;
 
+FieldBadgeFlexItem.displayName = 'FieldBadgeFlexItem';
+
 /**
  * The name of a (draggable) field
  */
@@ -35,6 +39,8 @@ export const FieldNameContainer = styled.div`
   }
 `;
 
+FieldNameContainer.displayName = 'FieldNameContainer';
+
 /**
  * Renders a field (e.g. `event.action`) as a draggable badge
  */
@@ -47,3 +53,5 @@ export const DraggableFieldBadge = pure<{ fieldId: string }>(({ fieldId }) => (
     </FieldBadgeFlexGroup>
   </EuiBadge>
 ));
+
+DraggableFieldBadge.displayName = 'DraggableFieldBadge';

x-pack/legacy/plugins/siem/public/components/draggables/index.tsx

@@ -68,6 +68,8 @@ const Content = pure<{
   )
 );
 
+Content.displayName = 'Content';
+
 /**
  * Draggable text (or an arbitrary visualization specified by `children`)
  * that's only displayed when the specified value is non-`null`.
@@ -116,6 +118,8 @@ export const DefaultDraggable = pure<DefaultDraggableType>(
     ) : null
 );
 
+DefaultDraggable.displayName = 'DefaultDraggable';
+
 // Ref: https://github.com/elastic/eui/issues/1655
 // const Badge = styled(EuiBadge)`
 //   vertical-align: top;
@@ -124,6 +128,8 @@ export const Badge = (props: EuiBadgeProps) => (
   <EuiBadge {...props} style={{ verticalAlign: 'top' }} />
 );
 
+Badge.displayName = 'Badge';
+
 export type BadgeDraggableType = Omit<DefaultDraggableType, 'id'> & {
   contextId: string;
   eventId: string;
@@ -174,3 +180,5 @@ export const DraggableBadge = pure<BadgeDraggableType>(
       </DefaultDraggable>
     ) : null
 );
+
+DraggableBadge.displayName = 'DraggableBadge';

x-pack/legacy/plugins/siem/public/components/duration/index.tsx

@@ -32,3 +32,5 @@ export const Duration = pure<{
     <FormattedDuration maybeDurationNanoseconds={value} tooltipTitle={fieldName} />
   </DefaultDraggable>
 ));
+
+Duration.displayName = 'Duration';

x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx

@@ -44,6 +44,8 @@ export const HeaderContainer = styled.div`
   width: ${EDIT_DATA_PROVIDER_WIDTH};
 `;
 
+HeaderContainer.displayName = 'HeaderContainer';
+
 // SIDE EFFECT: the following `injectGlobal` overrides the default styling
 // of euiComboBoxOptionsList because it's implemented as a popover, so it's
 // not selectable as a child of the styled component

x-pack/legacy/plugins/siem/public/components/empty_page/index.tsx

@@ -13,6 +13,8 @@ const EmptyPrompt = styled(EuiEmptyPrompt)`
   align-self: center; // Corrects horizontal centering in IE11
 `;
 
+EmptyPrompt.displayName = 'EmptyPrompt';
+
 interface EmptyPageProps {
   actionPrimaryIcon?: IconType;
   actionPrimaryLabel: string;
@@ -74,3 +76,5 @@ export const EmptyPage = pure<EmptyPageProps>(
     />
   )
 );
+
+EmptyPage.displayName = 'EmptyPage';

x-pack/legacy/plugins/siem/public/components/empty_value/index.tsx

@@ -18,6 +18,8 @@ const EmptyString = styled.span`
   }) => euiColorMediumShade};
 `;
 
+EmptyString.displayName = 'EmptyString';
+
 export const getEmptyValue = () => '--';
 export const getEmptyString = () => `(${i18n.EMPTY_STRING})`;
 

x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx

@@ -42,11 +42,15 @@ const HoverActionsContainer = styled(EuiPanel)`
   width: 30px;
 `;
 
+HoverActionsContainer.displayName = 'HoverActionsContainer';
+
 const FieldTypeIcon = styled(EuiIcon)`
   position: relative;
   top: -2px;
 `;
 
+FieldTypeIcon.displayName = 'FieldTypeIcon';
+
 export const getColumns = ({
   browserFields,
   eventId,