[7.x] [SIEM] Start of deprecated lifecycle refactor (#46293)

x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/data_providers.spec.ts

@@ -61,7 +61,7 @@ describe('timeline data providers', () => {
     cy.get(TIMELINE_DATA_PROVIDERS).should(
       'have.css',
       'background',
-      'rgba(125, 226, 209, 0.1) none repeat scroll 0% 0% / auto padding-box border-box'
+      'rgba(1, 125, 115, 0.1) none repeat scroll 0% 0% / auto padding-box border-box'
     );
   });
 
@@ -81,7 +81,7 @@ describe('timeline data providers', () => {
     cy.get(TIMELINE_DATA_PROVIDERS_EMPTY).should(
       'have.css',
       'background',
-      'rgba(125, 226, 209, 0.2) none repeat scroll 0% 0% / auto padding-box border-box'
+      'rgba(1, 125, 115, 0.2) none repeat scroll 0% 0% / auto padding-box border-box'
     );
   });
 
@@ -101,7 +101,7 @@ describe('timeline data providers', () => {
     cy.get(TIMELINE_DATA_PROVIDERS).should(
       'have.css',
       'border',
-      '3.1875px dashed rgb(125, 226, 209)'
+      '3.1875px dashed rgb(1, 125, 115)'
     );
   });
 });

x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/flyout_button.spec.ts

@@ -41,7 +41,7 @@ describe('timeline flyout button', () => {
     cy.get(TIMELINE_NOT_READY_TO_DROP_BUTTON).should(
       'have.css',
       'background',
-      'rgba(125, 226, 209, 0.1) none repeat scroll 0% 0% / auto padding-box border-box'
+      'rgba(1, 125, 115, 0.1) none repeat scroll 0% 0% / auto padding-box border-box'
     );
   });
 });

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

@@ -18,13 +18,8 @@ interface SuggestionItemProps {
   suggestion: AutocompleteSuggestion;
 }
 
-export class SuggestionItem extends React.PureComponent<SuggestionItemProps> {
-  public static defaultProps: Partial<SuggestionItemProps> = {
-    isSelected: false,
-  };
-
-  public render() {
-    const { isSelected, onClick, onMouseEnter, suggestion } = this.props;
+export const SuggestionItem = React.memo<SuggestionItemProps>(
+  ({ isSelected = false, onClick, onMouseEnter, suggestion }) => {
     return (
       <SuggestionItemContainer
         isSelected={isSelected}
@@ -40,7 +35,9 @@ export class SuggestionItem extends React.PureComponent<SuggestionItemProps> {
       </SuggestionItemContainer>
     );
   }
-}
+);
+
+SuggestionItem.displayName = 'SuggestionItem';
 
 const SuggestionItemContainer = euiStyled.div<{
   isSelected?: boolean;

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

@@ -6,7 +6,7 @@
 
 import { defaultTo, noop } from 'lodash/fp';
 import * as React from 'react';
-import { DragDropContext, DropResult, ResponderProvided, DragStart } from 'react-beautiful-dnd';
+import { DragDropContext, DropResult, DragStart } from 'react-beautiful-dnd';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
@@ -57,43 +57,39 @@ const onDragEndHandler = ({
 /**
  * DragDropContextWrapperComponent handles all drag end events
  */
-export class DragDropContextWrapperComponent extends React.Component<Props> {
-  public shouldComponentUpdate = ({ children, dataProviders }: Props) =>
-    children === this.props.children && dataProviders !== this.props.dataProviders // prevent re-renders when data providers are added or removed, but all other props are the same
-      ? false
-      : true;
-
-  public render() {
-    const { children } = this.props;
-
+export const DragDropContextWrapperComponent = React.memo<Props>(
+  ({ browserFields, children, dataProviders, dispatch }) => {
+    function onDragEnd(result: DropResult) {
+      enableScrolling();
+
+      if (dataProviders != null) {
+        onDragEndHandler({
+          browserFields,
+          result,
+          dataProviders,
+          dispatch,
+        });
+      }
+
+      if (!draggableIsField(result)) {
+        document.body.classList.remove(IS_DRAGGING_CLASS_NAME);
+      }
+    }
     return (
-      <DragDropContext onDragEnd={this.onDragEnd} onDragStart={onDragStart}>
+      <DragDropContext onDragEnd={onDragEnd} onDragStart={onDragStart}>
         {children}
       </DragDropContext>
     );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.children === nextProps.children &&
+      prevProps.dataProviders === nextProps.dataProviders
+    ); // prevent re-renders when data providers are added or removed, but all other props are the same
   }
+);
 
-  private onDragEnd: (result: DropResult, provided: ResponderProvided) => void = (
-    result: DropResult
-  ) => {
-    const { browserFields, dataProviders, dispatch } = this.props;
-
-    enableScrolling();
-
-    if (dataProviders != null) {
-      onDragEndHandler({
-        browserFields,
-        result,
-        dataProviders,
-        dispatch,
-      });
-    }
-
-    if (!draggableIsField(result)) {
-      document.body.classList.remove(IS_DRAGGING_CLASS_NAME);
-    }
-  };
-}
+DragDropContextWrapperComponent.displayName = 'DragDropContextWrapperComponent';
 
 const emptyDataProviders: dragAndDropModel.IdToDataProvider = {}; // stable reference
 

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

@@ -5,7 +5,7 @@
  */
 
 import { isEqual } from 'lodash/fp';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import {
   Draggable,
   DraggableProvided,
@@ -161,28 +161,15 @@ type Props = OwnProps & DispatchProps;
  * Wraps a draggable component to handle registration / unregistration of the
  * data provider associated with the item being dropped
  */
-class DraggableWrapperComponent extends React.Component<Props> {
-  public shouldComponentUpdate = ({ dataProvider, render, truncate }: Props) =>
-    isEqual(dataProvider, this.props.dataProvider) &&
-    render !== this.props.render &&
-    truncate === this.props.truncate
-      ? false
-      : true;
-
-  public componentDidMount() {
-    const { dataProvider, registerProvider } = this.props;
-
-    registerProvider!({ provider: dataProvider });
-  }
-
-  public componentWillUnmount() {
-    const { dataProvider, unRegisterProvider } = this.props;
-
-    unRegisterProvider!({ id: dataProvider.id });
-  }
 
-  public render() {
-    const { dataProvider, render, truncate } = this.props;
+const DraggableWrapperComponent = React.memo<Props>(
+  ({ dataProvider, registerProvider, render, truncate, unRegisterProvider }) => {
+    useEffect(() => {
+      registerProvider!({ provider: dataProvider });
+      return () => {
+        unRegisterProvider!({ id: dataProvider.id });
+      };
+    }, []);
 
     return (
       <Wrapper data-test-subj="draggableWrapperDiv">
@@ -223,8 +210,17 @@ class DraggableWrapperComponent extends React.Component<Props> {
         </Droppable>
       </Wrapper>
     );
+  },
+  (prevProps, nextProps) => {
+    return (
+      isEqual(prevProps.dataProvider, nextProps.dataProvider) &&
+      prevProps.render !== nextProps.render &&
+      prevProps.truncate === nextProps.truncate
+    );
   }
-}
+);
+
+DraggableWrapperComponent.displayName = 'DraggableWrapperComponent';
 
 export const DraggableWrapper = connect(
   null,