diff --git a/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/add_processor_button.tsx b/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/add_processor_button.tsx index 138299637e5e3..f21239d6a3d5a 100644 --- a/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/add_processor_button.tsx +++ b/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/add_processor_button.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { FunctionComponent } from 'react'; +import React, { forwardRef } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiButtonEmpty, EuiButton } from '@elastic/eui'; import { css } from '@emotion/react'; @@ -30,7 +30,7 @@ const styles = { `, }; -export const AddProcessorButton: FunctionComponent = (props) => { +export const AddProcessorButton = forwardRef((props, ref) => { const { onClick, renderButtonAsLink } = props; const { state: { editor }, @@ -44,6 +44,7 @@ export const AddProcessorButton: FunctionComponent = (props) => { iconSide="left" iconType="plusInCircle" onClick={onClick} + buttonRef={ref} > {addProcessorButtonLabel} @@ -56,8 +57,9 @@ export const AddProcessorButton: FunctionComponent = (props) => { css={styles.button} disabled={editor.mode.id !== 'idle'} onClick={onClick} + buttonRef={ref} > {addProcessorButtonLabel} ); -}; +}); diff --git a/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/pipeline_processors_editor_item/context_menu.tsx b/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/pipeline_processors_editor_item/context_menu.tsx index 1166e40db3864..a25a23ca4f038 100644 --- a/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/pipeline_processors_editor_item/context_menu.tsx +++ b/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/pipeline_processors_editor_item/context_menu.tsx @@ -5,8 +5,7 @@ * 2.0. */ -import type { FunctionComponent } from 'react'; -import React, { useState } from 'react'; +import React, { useState, forwardRef } from 'react'; import { css } from '@emotion/react'; import { EuiContextMenuItem, EuiContextMenuPanel, EuiPopover, EuiButtonIcon } from '@elastic/eui'; @@ -31,7 +30,7 @@ const getStyles = ({ hidden }: { hidden?: boolean }) => ({ : undefined, }); -export const ContextMenu: FunctionComponent = (props) => { +export const ContextMenu = forwardRef((props, ref) => { const { showAddOnFailure, onDuplicate, onAddOnFailure, onDelete, disabled, hidden } = props; const styles = getStyles({ hidden }); const [isOpen, setIsOpen] = useState(false); @@ -85,6 +84,7 @@ export const ContextMenu: FunctionComponent = (props) => { closePopover={() => setIsOpen(false)} button={ setIsOpen((v) => !v)} @@ -97,4 +97,4 @@ export const ContextMenu: FunctionComponent = (props) => { ); -}; +}); diff --git a/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx b/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx index b702b6e38ae78..28bb17a05a0d7 100644 --- a/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx +++ b/x-pack/platform/plugins/shared/ingest_pipelines/public/application/components/pipeline_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx @@ -6,7 +6,7 @@ */ import type { FunctionComponent } from 'react'; -import React, { memo, useCallback } from 'react'; +import React, { memo, useCallback, useRef } from 'react'; import { EuiButtonIcon, EuiFlexGroup, @@ -116,6 +116,8 @@ export const PipelineProcessorsEditorItem: FunctionComponent = memo( editor, processorsDispatch, }) { + const editButtonRef = useRef(null); + const contextMenuButtonRef = useRef(null); const isEditorNotInIdleMode = editor.mode.id !== 'idle'; const isInMoveMode = Boolean(movingProcessor); const isMovingThisProcessor = processor.id === movingProcessor?.id; @@ -240,12 +242,13 @@ export const PipelineProcessorsEditorItem: FunctionComponent = memo( { editor.setMode({ id: 'managingProcessor', - arg: { processor, selector }, + arg: { processor, selector, buttonRef: editButtonRef }, }); }} data-test-subj="manageItemButton" @@ -275,12 +278,16 @@ export const PipelineProcessorsEditorItem: FunctionComponent = memo(