[ES|QL] Create control flyout close button bug (#243365)

## Summary

resolves: #243456

The flyout for 'create control' from the esql editor is not closing when
clicking on the 'X' button. This PR address that bug and also
incorporates this button to the telemetry tracking as a property when
cancelling the creation of a control.

EDIT: as an extra fix this pr addresses a small bug around telemetry
when we click on save for a control on edit mode.

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...

---------

Co-authored-by: Stratou <[email protected]>

Author: momovdg

src/platform/packages/shared/kbn-esql-types/src/esql_telemetry_types.ts

@@ -28,8 +28,10 @@ export interface TelemetryQuerySubmittedProps {
 export enum ControlTriggerSource {
   SMART_SUGGESTION = 'smart_suggestion',
   QUESTION_MARK = 'question_mark',
+  ADD_CONTROL_BTN = 'add_control_btn',
 }
 
 export enum TelemetryControlCancelledReason {
   CANCEL_BUTTON = 'cancel_button',
+  CLOSE_BUTTON = 'close_button',
 }

src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/add_menu/show_add_menu.tsx

@@ -20,7 +20,12 @@ import {
 import type { CoreStart } from '@kbn/core/public';
 import { TIME_SLIDER_CONTROL } from '@kbn/controls-constants';
 import type { DefaultControlApi } from '@kbn/controls-plugin/public';
-import { ESQLVariableType, EsqlControlType, apiPublishesESQLVariables } from '@kbn/esql-types';
+import {
+  ControlTriggerSource,
+  ESQLVariableType,
+  EsqlControlType,
+  apiPublishesESQLVariables,
+} from '@kbn/esql-types';
 import { i18n } from '@kbn/i18n';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { apiHasType, useStateFromPublishingSubject } from '@kbn/presentation-publishing';
@@ -211,6 +216,7 @@ export const AddMenu = ({ dashboardApi, anchorElement, coreServices }: AddMenuPr
                   closePopover();
                 },
                 onCancelControl: closePopover,
+                triggerSource: ControlTriggerSource.ADD_CONTROL_BTN,
               });
             } catch (e) {
               // eslint-disable-next-line no-console

src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/identifier_control_form.test.tsx

@@ -17,12 +17,14 @@ import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import type { ESQLControlState } from '@kbn/esql-types';
 import { ControlTriggerSource, ESQLVariableType, EsqlControlType } from '@kbn/esql-types';
 import { ESQLControlsFlyout } from '.';
+import { ESQLEditorTelemetryService } from '@kbn/esql-editor';
 
 jest.mock('@kbn/esql-utils', () => ({
   getESQLQueryColumnsRaw: jest.fn().mockResolvedValue([{ name: 'column1' }, { name: 'column2' }]),
   getValuesFromQueryField: jest.fn().mockReturnValue('field'),
 }));
 
+const core = coreMock.createStart();
 const defaultProps = {
   initialVariableType: ESQLVariableType.FIELDS,
   queryString: 'FROM foo | WHERE field ==',
@@ -34,6 +36,7 @@ const defaultProps = {
   esqlVariables: [],
   ariaLabelledBy: 'esqlControlFlyoutTitle',
   telemetryTriggerSource: ControlTriggerSource.QUESTION_MARK,
+  telemetryService: new ESQLEditorTelemetryService(core.analytics),
 };
 
 const services = {

src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/index.tsx

@@ -7,9 +7,9 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import { EuiFlyoutBody } from '@elastic/eui';
-import { ESQLEditorTelemetryService } from '@kbn/esql-editor';
+import type { ESQLEditorTelemetryService } from '@kbn/esql-editor';
 import type { TimeRange } from '@kbn/es-query';
 import {
   ESQLVariableType,
@@ -23,7 +23,6 @@ import {
 import { getValuesFromQueryField } from '@kbn/esql-utils';
 import type { ISearchGeneric } from '@kbn/search-types';
 import type { monaco } from '@kbn/monaco';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ValueControlForm } from './value_control_form';
 import { Header, ControlType, VariableName, Footer } from './shared_form_components';
 import { IdentifierControlForm } from './identifier_control_form';
@@ -38,7 +37,6 @@ import {
   getVariableNamePrefix,
   checkVariableExistence,
 } from './helpers';
-import type { ServiceDeps } from '../../../kibana_services';
 
 interface ESQLControlsFlyoutProps {
   search: ISearchGeneric;
@@ -53,7 +51,8 @@ interface ESQLControlsFlyoutProps {
   closeFlyout: () => void;
   ariaLabelledBy: string;
   currentApp?: string;
-  telemetryTriggerSource: ControlTriggerSource;
+  telemetryTriggerSource?: ControlTriggerSource;
+  telemetryService: ESQLEditorTelemetryService;
 }
 
 export function ESQLControlsFlyout({
@@ -70,6 +69,7 @@ export function ESQLControlsFlyout({
   ariaLabelledBy,
   currentApp,
   telemetryTriggerSource,
+  telemetryService,
 }: ESQLControlsFlyoutProps) {
   // ?? or ?
   const [variableNamePrefix, setVariableNamePrefix] = useState(
@@ -127,11 +127,6 @@ export function ESQLControlsFlyout({
       : true;
   }, [variableType, controlState?.availableOptions]);
 
-  const kibana = useKibana<ServiceDeps>();
-  const { core } = kibana.services;
-
-  const telemetryServiceRef = useRef(new ESQLEditorTelemetryService(core.analytics));
-
   const onVariableNameChange = useCallback(
     (e: { target: { value: React.SetStateAction<string> } }) => {
       const text = validateVariableName(String(e.target.value), variableNamePrefix);
@@ -184,7 +179,12 @@ export function ESQLControlsFlyout({
       } else {
         await onSaveControl?.(controlState, '');
       }
-      telemetryServiceRef.current.trackEsqlControlConfigSaved(variableType, telemetryTriggerSource);
+      if (!isControlInEditMode) {
+        telemetryService.trackEsqlControlConfigSaved(
+          variableType,
+          telemetryTriggerSource as ControlTriggerSource
+        );
+      }
     }
     closeFlyout();
   }, [
@@ -197,15 +197,16 @@ export function ESQLControlsFlyout({
     onSaveControl,
     variableType,
     telemetryTriggerSource,
+    telemetryService,
   ]);
 
   const onCloseFlyout = useCallback(() => {
-    telemetryServiceRef.current.trackEsqlControlConfigCancelled(
+    telemetryService.trackEsqlControlConfigCancelled(
       initialVariableType,
       TelemetryControlCancelledReason.CANCEL_BUTTON
     );
     closeFlyout();
-  }, [closeFlyout, initialVariableType]);
+  }, [closeFlyout, initialVariableType, telemetryService]);
 
   const formBody =
     variableNamePrefix === VariableNamePrefix.VALUE ? (

src/platform/plugins/shared/esql/public/triggers/esql_controls/control_flyout/value_control_form.test.tsx

@@ -19,6 +19,7 @@ import { getESQLResults } from '@kbn/esql-utils';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { ESQLControlsFlyout } from '.';
+import { ESQLEditorTelemetryService } from '@kbn/esql-editor';
 
 jest.mock('@kbn/esql-utils', () => {
   return {
@@ -71,6 +72,7 @@ describe('ValueControlForm', () => {
     esqlVariables: [],
     ariaLabelledBy: 'esqlControlsFlyoutTitle',
     telemetryTriggerSource: ControlTriggerSource.QUESTION_MARK,
+    telemetryService: new ESQLEditorTelemetryService(services.core.analytics),
   };
 
   describe('Interval type', () => {

src/platform/plugins/shared/esql/public/triggers/esql_controls/esql_control_action.ts

@@ -10,19 +10,21 @@
 import { i18n } from '@kbn/i18n';
 import { IncompatibleActionError, type Action } from '@kbn/ui-actions-plugin/public';
 import { firstValueFrom, of } from 'rxjs';
-import type { CoreStart } from '@kbn/core/public';
+import type { CoreStart, OverlayRef } from '@kbn/core/public';
 import type { TimefilterContract } from '@kbn/data-plugin/public';
 import type { ISearchGeneric } from '@kbn/search-types';
 import {
   ESQLVariableType,
   type ESQLControlVariable,
   type ESQLControlState,
   type ControlTriggerSource,
+  TelemetryControlCancelledReason,
 } from '@kbn/esql-types';
 import type { monaco } from '@kbn/monaco';
 import { ENABLE_ESQL } from '@kbn/esql-utils';
 import { dismissAllFlyoutsExceptFor, DiscoverFlyouts } from '@kbn/discover-utils';
 import { openLazyFlyout } from '@kbn/presentation-util';
+import { ESQLEditorTelemetryService } from '@kbn/esql-editor';
 import { ACTION_CREATE_ESQL_CONTROL } from '../constants';
 
 function isESQLVariableType(value: string): value is ESQLVariableType {
@@ -42,7 +44,7 @@ interface Context {
   cursorPosition?: monaco.Position;
   initialState?: ESQLControlState;
   parentApi?: unknown;
-  triggerSource: ControlTriggerSource;
+  triggerSource?: ControlTriggerSource;
 }
 
 export class CreateESQLControlAction implements Action<Context> {
@@ -94,6 +96,17 @@ export class CreateESQLControlAction implements Action<Context> {
       // Flyouts don't exist or couldn't be closed, continue with opening the new flyout
     }
 
+    const telemetryService = new ESQLEditorTelemetryService(this.core.analytics);
+
+    const onClose = (flyoutRef: OverlayRef) => {
+      onCancelControl?.();
+      flyoutRef.close();
+      telemetryService.trackEsqlControlConfigCancelled(
+        variableType,
+        TelemetryControlCancelledReason.CLOSE_BUTTON
+      );
+    };
+
     openLazyFlyout({
       core: this.core,
       parentApi,
@@ -114,6 +127,7 @@ export class CreateESQLControlAction implements Action<Context> {
           closeFlyout,
           currentApp,
           triggerSource,
+          telemetryService,
         });
       },
       flyoutProps: {
@@ -122,9 +136,9 @@ export class CreateESQLControlAction implements Action<Context> {
         maxWidth: 800,
         triggerId: 'dashboard-controls-menu-button',
         // When queryString is present (i.e. flyout opened from the ES|QL editor),
-        // use onCancelControl as the onClose handler to ensure proper nested flyout closing behavior.
+        // use the local onClose as the onClose handler to ensure proper nested flyout closing behavior.
         // In other scenarios (opened directly from the dashboard), we keep the default close behavior.
-        ...(queryString && { onClose: onCancelControl }),
+        ...(queryString && { onClose }),
       },
     });
   }

src/platform/plugins/shared/esql/public/triggers/esql_controls/esql_control_helpers.tsx

@@ -19,6 +19,7 @@ import {
   type ControlTriggerSource,
 } from '@kbn/esql-types';
 import type { monaco } from '@kbn/monaco';
+import type { ESQLEditorTelemetryService } from '@kbn/esql-editor';
 import { untilPluginStartServicesReady } from '../../kibana_services';
 import { ESQLControlsFlyout } from './control_flyout';
 
@@ -36,7 +37,8 @@ interface Context {
   closeFlyout?: () => void;
   ariaLabelledBy: string;
   currentApp?: string;
-  triggerSource: ControlTriggerSource;
+  triggerSource?: ControlTriggerSource;
+  telemetryService: ESQLEditorTelemetryService;
 }
 
 export async function loadESQLControlFlyout({
@@ -54,6 +56,7 @@ export async function loadESQLControlFlyout({
   ariaLabelledBy,
   currentApp,
   triggerSource,
+  telemetryService,
 }: Context) {
   const timeRange = timefilter.getTime();
   const deps = await untilPluginStartServicesReady();
@@ -79,6 +82,7 @@ export async function loadESQLControlFlyout({
           timeRange={timeRange}
           currentApp={currentApp}
           telemetryTriggerSource={triggerSource}
+          telemetryService={telemetryService}
         />
       </KibanaContextProvider>
     </KibanaRenderContextProvider>