[ES|QL] Merges the controls props

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<HTMLDivElement>(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
     );
   });
 

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<string, unknown>, updatedQuery: string) => Promise<void>;
+  /** 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<string, unknown>, updatedQuery: string) => Promise<void>;
-  /** 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[];
 }

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}
       />
     </EuiFlexItem>
   );