[Canvas][tech-debt] Kill Recompose:Pure - Part 1 (#73303)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/canvas/public/components/arg_add/arg_add.js → x-pack/plugins/canvas/public/components/arg_add/arg_add.tsx

@@ -4,15 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FC, ReactEventHandler } from 'react';
 import PropTypes from 'prop-types';
 import {
   EuiDescriptionList,
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
 } from '@elastic/eui';
 
-export const ArgAdd = ({ onValueAdd, displayName, help }) => {
+interface Props {
+  displayName: string;
+  help: string;
+  onValueAdd?: ReactEventHandler;
+}
+
+export const ArgAdd: FC<Props> = ({ onValueAdd = () => {}, displayName, help }) => {
   return (
     <button className="canvasArg__add" onClick={onValueAdd}>
       <EuiDescriptionList compressed>
@@ -26,7 +32,7 @@ export const ArgAdd = ({ onValueAdd, displayName, help }) => {
 };
 
 ArgAdd.propTypes = {
-  displayName: PropTypes.string,
-  help: PropTypes.string,
+  displayName: PropTypes.string.isRequired,
+  help: PropTypes.string.isRequired,
   onValueAdd: PropTypes.func,
 };

x-pack/plugins/canvas/public/components/arg_add/index.js → x-pack/plugins/canvas/public/components/arg_add/index.ts

@@ -4,8 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-
-import { ArgAdd as Component } from './arg_add';
-
-export const ArgAdd = pure(Component);
+export { ArgAdd } from './arg_add';

x-pack/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx

@@ -4,12 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { MouseEventHandler, FC } from 'react';
 import PropTypes from 'prop-types';
 import { EuiButtonIcon } from '@elastic/eui';
 // @ts-expect-error untyped local
 import { Popover, PopoverChildrenProps } from '../popover';
-// @ts-expect-error untyped local
 import { ArgAdd } from '../arg_add';
 // @ts-expect-error untyped local
 import { Arg } from '../../expression_types/arg';
@@ -27,8 +26,8 @@ interface Props {
   options: ArgOptions[];
 }
 
-export const ArgAddPopover = ({ options }: Props) => {
-  const button = (handleClick: React.MouseEventHandler<HTMLButtonElement>) => (
+export const ArgAddPopover: FC<Props> = ({ options }) => {
+  const button = (handleClick: MouseEventHandler<HTMLButtonElement>) => (
     <EuiButtonIcon
       iconType="plusInCircle"
       aria-label={strings.getAddAriaLabel()}

x-pack/plugins/canvas/public/components/arg_add_popover/index.ts

@@ -4,7 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-import { ArgAddPopover as Component } from './arg_add_popover';
-
-export const ArgAddPopover = pure(Component);
+export { ArgAddPopover } from './arg_add_popover';