From fdd3849abdb08f1568f68de1414d2f9c76b86a93 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Tue, 28 Jan 2025 16:30:07 +0100
Subject: [PATCH] [ES|QL][Dashboard] Clear overlays on save / close control
 flyout (#208485)

## Summary

Fixes the bug when you:

- Have created an ES|QL control already
- You click to edit a visualization
- You click edit a control (without closing the inline editing)
- You save / cancel the control editing

We need to make sure to close all overlays otherwise you are stuck

Before:
![image
(80)](https://github.com/user-attachments/assets/94b6a772-456a-4615-8fde-159ae231ca75)

Now:
<img width="920" alt="image"
src="https://github.com/user-attachments/assets/f5e4787c-06ca-471d-bdb9-aceb2199b1d0"
/>


It follows the behavior of the rest controls
---
 .../controls/esql_control/get_esql_control_factory.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/platform/plugins/shared/controls/public/controls/esql_control/get_esql_control_factory.tsx b/src/platform/plugins/shared/controls/public/controls/esql_control/get_esql_control_factory.tsx
index 22fd8ccdb9c43..982b34fc5dd75 100644
--- a/src/platform/plugins/shared/controls/public/controls/esql_control/get_esql_control_factory.tsx
+++ b/src/platform/plugins/shared/controls/public/controls/esql_control/get_esql_control_factory.tsx
@@ -13,7 +13,8 @@ import { BehaviorSubject } from 'rxjs';
 import { css } from '@emotion/react';
 import { EuiComboBox } from '@elastic/eui';
 import { apiPublishesESQLVariables } from '@kbn/esql-variables-types';
-import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
+import { useBatchedPublishingSubjects, apiHasParentApi } from '@kbn/presentation-publishing';
+import { tracksOverlays } from '@kbn/presentation-containers';
 import type { ESQLControlState } from '@kbn/esql/public';
 import { ESQL_CONTROL } from '../../../common';
 import type { ESQLControlApi } from './types';
@@ -36,11 +37,17 @@ export const getESQLControlFactory = (): ControlFactory<ESQLControlState, ESQLCo
       const defaultControl = initializeDefaultControlApi(initialState);
       const selections = initializeESQLControlSelections(initialState);
 
+      const closeOverlay = () => {
+        if (apiHasParentApi(controlGroupApi) && tracksOverlays(controlGroupApi.parentApi)) {
+          controlGroupApi.parentApi.clearOverlays();
+        }
+      };
       const onSaveControl = (updatedState: ESQLControlState) => {
         controlGroupApi?.replacePanel(uuid, {
           panelType: 'esqlControl',
           initialState: updatedState,
         });
+        closeOverlay();
       };
 
       const api = buildApi(
@@ -65,6 +72,7 @@ export const getESQLControlFactory = (): ControlFactory<ESQLControlState, ESQLCo
                 controlType: initialState.controlType,
                 esqlVariables: variablesInParent,
                 onSaveControl,
+                onCancelControl: closeOverlay,
                 initialState: state,
               });
             } catch (e) {