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

…ins (#43029)

## Summary

* Upgrades react-redux so we can use React.memo with hooks and connected components.
* Adds displayName to all the components that are React.memo as well as all components that are `pure` components.

Using React Profiler you can see that when doing something as innocuous as dragging the divider bar of the Timeline you will get updates of the different tables:

<img width="1547" alt="Screen Shot 2019-08-08 at 1 25 22 PM" src="https://user-images.githubusercontent.com/1151048/62789872-19efad80-ba87-11e9-92b5-eb9666c7c07a.png">

This is a result of redux making changes based on the location of the timeline. As this occurs, the UrlState begins updating its self and all children which is not what we want.

You will see differences now in the snapshots such as this which adds naming to it:
<img width="1582" alt="Screen Shot 2019-08-09 at 2 34 06 PM" src="https://user-images.githubusercontent.com/1151048/62808504-7a95df00-bab5-11e9-89c1-910b3908c705.png">

For the rest of us profiling we will have friendly names in our profiling tools to be able to trace what is going on very quickly

Before where a name didn't exist and it just showed `Memo` or `pure`:
<img width="221" alt="Screen Shot 2019-08-09 at 11 55 08 AM" src="https://user-images.githubusercontent.com/1151048/62809192-79fe4800-bab7-11e9-993b-2e7abadbb691.png">

Now that a name exists you can trace to the code quickly to the component name:
<img width="1570" alt="Screen Shot 2019-08-09 at 3 08 42 PM" src="https://user-images.githubusercontent.com/1151048/62809235-9a2e0700-bab7-11e9-8711-bae7d263d487.png">


### Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

~~- [ ] This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility)~~

~~- [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)~~

~~- [ ] [Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials~~

~~- [ ] [Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios~~

~~- [ ] This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)~~

### For maintainers

~~- [ ] This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~~

~~- [ ] This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~~

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

@@ -111,6 +111,8 @@ export const AreaChartBaseComponent = React.memo<{
   ) : null;
 });
 
+AreaChartBaseComponent.displayName = 'AreaChartBaseComponent';
+
 export const AreaChartWithCustomPrompt = React.memo<{
   data: ChartConfigsData[] | null | undefined;
   height: number | null | undefined;
@@ -131,6 +133,8 @@ export const AreaChartWithCustomPrompt = React.memo<{
   );
 });
 
+AreaChartWithCustomPrompt.displayName = 'AreaChartWithCustomPrompt';
+
 export const AreaChart = React.memo<{
   areaChart: ChartConfigsData[] | null | undefined;
   configs?: ChartSeriesConfigs | undefined;
@@ -148,3 +152,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

@@ -30,6 +30,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 = () => (
@@ -89,6 +92,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,