[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

@@ -45,3 +45,5 @@ export const AndOrBadge = pure<{ type: AndOr }>(({ type }) => {
     </RoundedBadge>
   );
 });
+
+AndOrBadge.displayName = 'AndOrBadge';

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

@@ -24,3 +24,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/certificate_fingerprint/index.tsx

@@ -63,3 +63,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/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/droppable_wrapper.tsx

@@ -93,3 +93,5 @@ export const DroppableWrapper = pure<Props>(
     </Droppable>
   )
 );
+
+DroppableWrapper.displayName = 'DroppableWrapper';

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

@@ -47,3 +47,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;
@@ -174,3 +178,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/empty_page/index.tsx

@@ -74,3 +74,5 @@ export const EmptyPage = pure<EmptyPageProps>(
     />
   )
 );
+
+EmptyPage.displayName = 'EmptyPage';

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

@@ -70,3 +70,5 @@ export const EventDetails = pure<Props>(
     );
   }
 );
+
+EventDetails.displayName = 'EventDetails';

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

@@ -55,3 +55,5 @@ export const EventFieldsBrowser = pure<Props>(
     );
   }
 );
+
+EventFieldsBrowser.displayName = 'EventFieldsBrowser';

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

@@ -40,5 +40,7 @@ export const JsonView = pure<Props>(({ data }) => (
   </JsonEditor>
 ));
 
+JsonView.displayName = 'JsonView';
+
 export const buildJsonView = (data: DetailItem[]) =>
   data.reduce((accumulator, item) => set(item.field, item.originalValue, accumulator), {});

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

@@ -40,3 +40,5 @@ export const ExternalLinkIcon = pure<{
     <LinkIcon color={color} data-test-subj="external-link-icon" size={iconSize} type={iconType} />
   )
 );
+
+ExternalLinkIcon.displayName = 'ExternalLinkIcon';

x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.tsx

@@ -182,6 +182,8 @@ export const DefaultFieldRenderer = pure<DefaultFieldRendererProps>(
   }
 );
 
+DefaultFieldRenderer.displayName = 'DefaultFieldRenderer';
+
 interface DefaultFieldRendererOverflowProps {
   rowItems: string[];
   idPrefix: string;
@@ -237,3 +239,5 @@ export const DefaultFieldRendererOverflow = pure<DefaultFieldRendererOverflowPro
     );
   }
 );
+
+DefaultFieldRendererOverflow.displayName = 'DefaultFieldRendererOverflow';

x-pack/legacy/plugins/siem/public/components/fields_browser/categories_pane.tsx

@@ -89,3 +89,5 @@ export const CategoriesPane = pure<Props>(
     </>
   )
 );
+
+CategoriesPane.displayName = 'CategoriesPane';

x-pack/legacy/plugins/siem/public/components/fields_browser/category.tsx

@@ -51,3 +51,5 @@ export const Category = pure<Props>(
     </>
   )
 );
+
+Category.displayName = 'Category';

x-pack/legacy/plugins/siem/public/components/fields_browser/category_buttons.tsx

@@ -38,3 +38,5 @@ export const DefaultCategoryButton = pure<{
     </EuiButton>
   </EuiToolTip>
 ));
+
+DefaultCategoryButton.displayName = 'DefaultCategoryButton';

x-pack/legacy/plugins/siem/public/components/fields_browser/category_title.tsx

@@ -52,3 +52,5 @@ export const CategoryTitle = pure<Props>(({ filteredBrowserFields, categoryId, t
     </EuiFlexItem>
   </EuiFlexGroup>
 ));
+
+CategoryTitle.displayName = 'CategoryTitle';

x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx

@@ -107,3 +107,5 @@ export const FieldName = pure<{
     )}
   />
 ));
+
+FieldName.displayName = 'FieldName';

x-pack/legacy/plugins/siem/public/components/fields_browser/fields_pane.tsx

@@ -104,3 +104,5 @@ export const FieldsPane = pure<Props>(
     </>
   )
 );
+
+FieldsPane.displayName = 'FieldsPane';

x-pack/legacy/plugins/siem/public/components/fields_browser/header.tsx

@@ -81,6 +81,8 @@ const CountRow = pure<Pick<Props, 'filteredBrowserFields'>>(({ filteredBrowserFi
   </CountsFlexGroup>
 ));
 
+CountRow.displayName = 'CountRow';
+
 const TitleRow = pure<{ onOutsideClick: () => void; onUpdateColumns: OnUpdateColumns }>(
   ({ onOutsideClick, onUpdateColumns }) => (
     <EuiFlexGroup
@@ -109,6 +111,8 @@ const TitleRow = pure<{ onOutsideClick: () => void; onUpdateColumns: OnUpdateCol
   )
 );
 
+TitleRow.displayName = 'TitleRow';
+
 export const Header = pure<Props>(
   ({
     isSearching,
@@ -134,3 +138,5 @@ export const Header = pure<Props>(
     </HeaderContainer>
   )
 );
+
+Header.displayName = 'Header';

x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx

@@ -70,3 +70,5 @@ export const FiltersGlobal = pure<FiltersGlobalProps>(({ children }) => (
     )}
   </Sticky>
 ));
+
+FiltersGlobal.displayName = 'FiltersGlobal';

x-pack/legacy/plugins/siem/public/components/flow_controls/flow_direction_select.tsx

@@ -37,3 +37,5 @@ export const FlowDirectionSelect = pure<Props>(({ onChangeDirection, selectedDir
     </EuiFilterButton>
   </EuiFilterGroup>
 ));
+
+FlowDirectionSelect.displayName = 'FlowDirectionSelect';

x-pack/legacy/plugins/siem/public/components/flow_controls/flow_target_select.tsx

@@ -83,3 +83,5 @@ export const FlowTargetSelect = pure<FlowTargetSelectProps>(
     />
   )
 );
+
+FlowTargetSelect.displayName = 'FlowTargetSelect';