diff --git a/src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx b/src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx index 4986079c44fff..4d5cd50fe5db1 100644 --- a/src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx +++ b/src/platform/packages/private/kbn-esql-editor/src/esql_editor.tsx @@ -55,7 +55,7 @@ import { RESIZABLE_CONTAINER_INITIAL_HEIGHT, esqlEditorStyles, } from './esql_editor.styles'; -import type { ESQLEditorProps, ESQLEditorDeps } from './types'; +import type { ESQLEditorProps, ESQLEditorDeps, ControlsContext } from './types'; // for editor width smaller than this value we want to start hiding some text const BREAKPOINT_WIDTH = 540; @@ -66,8 +66,8 @@ const triggerControl = async ( position: monaco.Position | null | undefined, uiActions: ESQLEditorDeps['uiActions'], esqlVariables?: ESQLControlVariable[], - onSaveControl?: ESQLEditorProps['onSaveControl'], - onCancelControl?: ESQLEditorProps['onCancelControl'] + onSaveControl?: ControlsContext['onSaveControl'], + onCancelControl?: ControlsContext['onCancelControl'] ) => { await uiActions.getTrigger('ESQL_CONTROL_TRIGGER').exec({ queryString, @@ -99,9 +99,7 @@ export const ESQLEditor = memo(function ESQLEditor({ hasOutline, displayDocumentationAsFlyout, disableAutoFocus, - onSaveControl, - onCancelControl, - supportsControls, + controlsContext, esqlVariables, }: ESQLEditorProps) { const popoverRef = useRef(null); @@ -221,7 +219,7 @@ export const ESQLEditor = memo(function ESQLEditor({ // Enable the variables service if the feature is supported in the consumer app useEffect(() => { - if (supportsControls) { + if (controlsContext?.supportsControls) { variablesService?.enableSuggestions(); const variables = variablesService?.esqlVariables; @@ -234,7 +232,7 @@ export const ESQLEditor = memo(function ESQLEditor({ } else { variablesService?.disableSuggestions(); } - }, [variablesService, supportsControls, esqlVariables]); + }, [variablesService, controlsContext, esqlVariables]); const toggleHistory = useCallback((status: boolean) => { setIsHistoryOpen(status); @@ -287,8 +285,8 @@ export const ESQLEditor = memo(function ESQLEditor({ position, uiActions, esqlVariables, - onSaveControl, - onCancelControl + controlsContext?.onSaveControl, + controlsContext?.onCancelControl ); }); @@ -300,8 +298,8 @@ export const ESQLEditor = memo(function ESQLEditor({ position, uiActions, esqlVariables, - onSaveControl, - onCancelControl + controlsContext?.onSaveControl, + controlsContext?.onCancelControl ); }); @@ -313,8 +311,8 @@ export const ESQLEditor = memo(function ESQLEditor({ position, uiActions, esqlVariables, - onSaveControl, - onCancelControl + controlsContext?.onSaveControl, + controlsContext?.onCancelControl ); }); @@ -326,8 +324,8 @@ export const ESQLEditor = memo(function ESQLEditor({ position, uiActions, esqlVariables, - onSaveControl, - onCancelControl + controlsContext?.onSaveControl, + controlsContext?.onCancelControl ); }); diff --git a/src/platform/packages/private/kbn-esql-editor/src/types.ts b/src/platform/packages/private/kbn-esql-editor/src/types.ts index d7974a1d9f0e8..19754f2bbf2b3 100644 --- a/src/platform/packages/private/kbn-esql-editor/src/types.ts +++ b/src/platform/packages/private/kbn-esql-editor/src/types.ts @@ -19,6 +19,17 @@ import type { UiActionsStart } from '@kbn/ui-actions-plugin/public'; import type { DataPublicPluginStart } from '@kbn/data-plugin/public'; import type { ESQLControlVariable } from '@kbn/esql-types'; +export interface ControlsContext { + /** The editor supports the creation of controls, + * This flag should be set to true to display the "Create control" suggestion + **/ + supportsControls: boolean; + /** Function to be called after the control creation **/ + onSaveControl: (controlState: Record, updatedQuery: string) => Promise; + /** Function to be called after cancelling the control creation **/ + onCancelControl: () => void; +} + export interface ESQLEditorProps { /** The aggregate type query */ query: AggregateQuery; @@ -56,32 +67,20 @@ export interface ESQLEditorProps { editorIsInline?: boolean; /** Disables the submit query action*/ disableSubmitAction?: boolean; - /** when set to true enables query cancellation **/ allowQueryCancellation?: boolean; - /** hide @timestamp info **/ hideTimeFilterInfo?: boolean; - /** hide query history **/ hideQueryHistory?: boolean; - /** adds border in the editor **/ hasOutline?: boolean; - /** adds a documentation icon in the footer which opens the inline docs as a flyout **/ displayDocumentationAsFlyout?: boolean; - /** The component by default focuses on the editor when it is mounted, this flag disables it**/ disableAutoFocus?: boolean; - /** The editor supports the creation of controls, - * This flag should be set to true to display the "Create control" suggestion - **/ - supportsControls?: boolean; - /** Function to be called after the control creation **/ - onSaveControl?: (controlState: Record, updatedQuery: string) => Promise; - /** Function to be called after cancelling the control creation **/ - onCancelControl?: () => void; + /** Enables the creation of controls from the editor **/ + controlsContext?: ControlsContext; /** The available ESQL variables from the page context this editor was opened in */ esqlVariables?: ESQLControlVariable[]; } diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/esql_editor.tsx b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/esql_editor.tsx index b4a028fcdb56f..8c436e8906eda 100644 --- a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/esql_editor.tsx +++ b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/esql_editor.tsx @@ -312,10 +312,12 @@ function InnerESQLEditor({ isDisabled={false} allowQueryCancellation isLoading={isVisualizationLoading} - supportsControls={parentApi !== undefined} + controlsContext={{ + supportsControls: parentApi !== undefined, + onSaveControl, + onCancelControl, + }} esqlVariables={esqlVariables} - onCancelControl={onCancelControl} - onSaveControl={onSaveControl} /> );