Deprecate recompose part 1 (#50806) (#52436)

x-pack/legacy/plugins/infra/public/pages/link_to/redirect_to_node_logs.test.tsx

@@ -34,11 +34,11 @@ describe('RedirectToNodeLogs component', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-<Redirect
-  push={false}
-  to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&sourceId=default"
-/>
-`);
+      <Redirect
+        push={false}
+        to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&sourceId=default"
+      />
+    `);
   });
 
   it('renders a redirect with the correct container filter', () => {
@@ -47,11 +47,11 @@ describe('RedirectToNodeLogs component', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-<Redirect
-  push={false}
-  to="/logs?logFilter=(expression:'CONTAINER_FIELD:%20CONTAINER_ID',kind:kuery)&sourceId=default"
-/>
-`);
+      <Redirect
+        push={false}
+        to="/logs?logFilter=(expression:'CONTAINER_FIELD:%20CONTAINER_ID',kind:kuery)&sourceId=default"
+      />
+    `);
   });
 
   it('renders a redirect with the correct pod filter', () => {
@@ -60,11 +60,11 @@ describe('RedirectToNodeLogs component', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-<Redirect
-  push={false}
-  to="/logs?logFilter=(expression:'POD_FIELD:%20POD_ID',kind:kuery)&sourceId=default"
-/>
-`);
+      <Redirect
+        push={false}
+        to="/logs?logFilter=(expression:'POD_FIELD:%20POD_ID',kind:kuery)&sourceId=default"
+      />
+    `);
   });
 
   it('renders a redirect with the correct position', () => {
@@ -75,11 +75,11 @@ describe('RedirectToNodeLogs component', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-<Redirect
-  push={false}
-  to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
-/>
-`);
+      <Redirect
+        push={false}
+        to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
+      />
+    `);
   });
 
   it('renders a redirect with the correct user-defined filter', () => {
@@ -92,11 +92,11 @@ describe('RedirectToNodeLogs component', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-<Redirect
-  push={false}
-  to="/logs?logFilter=(expression:'(HOST_FIELD:%20HOST_NAME)%20and%20(FILTER_FIELD:FILTER_VALUE)',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
-/>
-`);
+      <Redirect
+        push={false}
+        to="/logs?logFilter=(expression:'(HOST_FIELD:%20HOST_NAME)%20and%20(FILTER_FIELD:FILTER_VALUE)',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
+      />
+    `);
   });
 
   it('renders a redirect with the correct custom source id', () => {
@@ -107,11 +107,11 @@ describe('RedirectToNodeLogs component', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-<Redirect
-  push={false}
-  to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&sourceId=SOME-OTHER-SOURCE"
-/>
-`);
+      <Redirect
+        push={false}
+        to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&sourceId=SOME-OTHER-SOURCE"
+      />
+    `);
   });
 });
 

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

@@ -6,7 +6,6 @@
 
 import { EuiBadge } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import * as i18n from './translations';
@@ -39,7 +38,7 @@ export type AndOr = 'and' | 'or';
 
 /** Displays AND / OR in a round badge */
 // Ref: https://github.com/elastic/eui/issues/1655
-export const AndOrBadge = pure<{ type: AndOr }>(({ type }) => {
+export const AndOrBadge = React.memo<{ type: AndOr }>(({ type }) => {
   return (
     <RoundedBadge data-test-subj="and-or-badge" color="hollow">
       {type === 'and' ? i18n.AND : i18n.OR}

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
@@ -15,12 +15,12 @@ import { ArrowBody, ArrowHead } from '.';
 describe('arrows', () => {
   describe('ArrowBody', () => {
     test('renders correctly against snapshot', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <TestProviders>
           <ArrowBody height={3} />
         </TestProviders>
       );
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('ArrowBody'))).toMatchSnapshot();
     });
   });
 

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

@@ -6,7 +6,6 @@
 
 import { EuiIcon } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 /** Renders the body (non-pointy part) of an arrow */
@@ -21,7 +20,7 @@ ArrowBody.displayName = 'ArrowBody';
 export type ArrowDirection = 'arrowLeft' | 'arrowRight';
 
 /** Renders the head of an arrow */
-export const ArrowHead = pure<{
+export const ArrowHead = React.memo<{
   direction: ArrowDirection;
 }>(({ direction }) => (
   <EuiIcon color="subdued" data-test-subj="arrow-icon" size="s" type={direction} />

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

@@ -6,7 +6,6 @@
 
 import { EuiText } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { DraggableBadge } from '../draggables';
@@ -36,7 +35,7 @@ FingerprintLabel.displayName = 'FingerprintLabel';
  * 'tls.client_certificate.fingerprint.sha1'
  * 'tls.server_certificate.fingerprint.sha1'
  */
-export const CertificateFingerprint = pure<{
+export const CertificateFingerprint = React.memo<{
   eventId: string;
   certificateType: CertificateType;
   contextId: string;

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

@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-
 import {
   Chart,
   BarSeries,
@@ -63,6 +62,7 @@ export const BarChartBaseComponent = ({
     ...chartDefaultSettings,
     ...get('configs.settings', chartConfigs),
   };
+
   return chartConfigs.width && chartConfigs.height ? (
     <Chart>
       <Settings {...settings} />
@@ -116,6 +116,7 @@ export const BarChartComponent = ({
 }) => {
   const customHeight = get('customHeight', configs);
   const customWidth = get('customWidth', configs);
+
   return checkIfAnyValidSeriesExist(barChart) ? (
     <AutoSizer detectAnyWindowResize={false} content>
       {({ measureRef, content: { height, width } }) => (

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx

@@ -47,7 +47,7 @@ describe('UtilityBar', () => {
       </TestProviders>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(wrapper.find('UtilityBar'))).toMatchSnapshot();
   });
 
   test('it applies border styles when border is true', () => {

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.tsx

@@ -8,11 +8,12 @@ import React from 'react';
 
 import { Bar, BarProps } from './styles';
 
-export interface UtilityBarProps extends BarProps {
+interface UtilityBarProps extends BarProps {
   children: React.ReactNode;
 }
 
 export const UtilityBar = React.memo<UtilityBarProps>(({ border, children }) => (
   <Bar border={border}>{children}</Bar>
 ));
+
 UtilityBar.displayName = 'UtilityBar';

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.test.tsx

@@ -22,7 +22,7 @@ describe('UtilityBarAction', () => {
       </TestProviders>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(wrapper.find('UtilityBarAction'))).toMatchSnapshot();
   });
 
   test('it renders a popover', () => {

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.tsx

@@ -37,6 +37,7 @@ const Popover = React.memo<UtilityBarActionProps>(
     );
   }
 );
+
 Popover.displayName = 'Popover';
 
 export interface UtilityBarActionProps extends LinkIconProps {
@@ -71,4 +72,5 @@ export const UtilityBarAction = React.memo<UtilityBarActionProps>(
     </BarAction>
   )
 );
+
 UtilityBarAction.displayName = 'UtilityBarAction';