[ES|QL][Discover] Supports controls (elastic#229598)

## Summary

Part of elastic#225948

Enables controls in Discover from the editor.

<img width="1252" height="122" alt="image"
src="https://github.com/user-attachments/assets/76792f2e-abd0-406b-8a9f-84c53a06dfc4"
/>

The users can save the charts with variables in a dashboard but the
controls are not been transferred. We will deal with it on a follow up
PR. The same behavior is on dashboards too so there is a consistency
there 😄.


Flaky tests runner
elastic#229598 (comment)

Note: The Expand width to fit available space is not working but I will
hide it for Discover only in a follow up PR

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] 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)
- [x]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [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
- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Hannah Mudge <hannah.wright@elastic.co>
Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
Co-authored-by: Lukas Olson <lukas@elastic.co>

Author: 5 people

packages/kbn-optimizer/limits.yml

@@ -175,7 +175,7 @@ pageLoadAssetSize:
   uiActions: 24712
   uiActionsEnhanced: 20189
   unifiedDocViewer: 14513
-  unifiedSearch: 23000
+  unifiedSearch: 24000
   upgradeAssistant: 6898
   uptime: 48184
   urlDrilldown: 21563

src/core/server/integration_tests/ci_checks/saved_objects/check_registered_types.test.ts

@@ -162,7 +162,7 @@ describe('checking migration metadata changes on all registered SO types', () =>
         "risk-engine-configuration": "533a0a3f2dbef1c95129146ec4d5714de305be1a",
         "rules-settings": "53f94e5ce61f5e75d55ab8adbc1fb3d0937d2e0b",
         "sample-data-telemetry": "c38daf1a49ed24f2a4fb091e6e1e833fccf19935",
-        "search": "5078b5f3bc5ed31cd8c16317f17100637734ea2b",
+        "search": "c0e733a8dca9f8d6bca139d29f0eeb084e2963c6",
         "search-session": "fae0dfc63274d6a3b90ca583802c48cab8760637",
         "search-telemetry": "1bbaf2db531b97fa04399440fa52d46e86d54dd8",
         "search_playground": "3eba7e7c4563f03f76aea02f5dd3a7a739bf51a3",
@@ -1006,6 +1006,7 @@ describe('checking migration metadata changes on all registered SO types', () =>
         "search|global: ce649a79d99c5ff5eb68d544635428ef87946d84",
         "search|mappings: 432d4dfdb5a33ce29d00ccdcfcda70d7c5f94b52",
         "search|schemas: 8d6477e08dfdf20335752a69994646f9da90741f",
+        "search|10.8.0: e9b8e7a06ce8c93bc1480859d82a018a29a85ff4",
         "search|10.7.0: 5d15a12f9c024d225ccff3d77a8116b43fc8d8b0",
         "search|10.6.0: 6ffb6b8b9bf540ea70d22447182eea0f3725afc7",
         "search|10.5.0: 08da62a471e520af9d201342ff275e1d20513175",
@@ -1336,7 +1337,7 @@ describe('checking migration metadata changes on all registered SO types', () =>
         "risk-engine-configuration": "10.2.0",
         "rules-settings": "10.1.0",
         "sample-data-telemetry": "10.0.0",
-        "search": "10.7.0",
+        "search": "10.8.0",
         "search-session": "10.0.0",
         "search-telemetry": "10.0.0",
         "search_playground": "10.1.0",
@@ -1483,7 +1484,7 @@ describe('checking migration metadata changes on all registered SO types', () =>
         "risk-engine-configuration": "10.2.0",
         "rules-settings": "10.1.0",
         "sample-data-telemetry": "0.0.0",
-        "search": "10.7.0",
+        "search": "10.8.0",
         "search-session": "8.6.0",
         "search-telemetry": "7.12.0",
         "search_playground": "10.1.0",

src/platform/packages/shared/kbn-unified-histogram/components/chart/chart.tsx

@@ -28,6 +28,7 @@ import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import type { TimeRange } from '@kbn/es-query';
 import type { PublishingSubject } from '@kbn/presentation-publishing';
 import type { RequestStatus } from '@kbn/inspector-plugin/public';
+import type { ESQLControlVariable } from '@kbn/esql-types';
 import type { IKibanaSearchResponse } from '@kbn/search-types';
 import type { estypes } from '@elastic/elasticsearch';
 import { Histogram } from './histogram';
@@ -90,6 +91,7 @@ export interface UnifiedHistogramChartProps {
   onBrushEnd?: LensEmbeddableInput['onBrushEnd'];
   withDefaultActions?: EmbeddableComponentProps['withDefaultActions'];
   columns?: DatatableColumn[];
+  esqlVariables?: ESQLControlVariable[];
 }
 
 const RequestStatusError: typeof RequestStatus.ERROR = 2;

src/platform/packages/shared/kbn-unified-histogram/components/chart/histogram.tsx

@@ -12,6 +12,7 @@ import { css } from '@emotion/react';
 import React from 'react';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { TimeRange } from '@kbn/es-query';
+import type { ESQLControlVariable } from '@kbn/esql-types';
 import type { EmbeddableComponentProps, LensEmbeddableInput } from '@kbn/lens-plugin/public';
 import type {
   UnifiedHistogramBucketInterval,
@@ -38,6 +39,7 @@ export interface HistogramProps {
   onFilter?: LensEmbeddableInput['onFilter'];
   onBrushEnd?: LensEmbeddableInput['onBrushEnd'];
   withDefaultActions?: EmbeddableComponentProps['withDefaultActions'];
+  esqlVariables?: ESQLControlVariable[];
 }
 
 export function Histogram({
@@ -56,6 +58,7 @@ export function Histogram({
   onBrushEnd,
   withDefaultActions,
   abortController,
+  esqlVariables,
 }: HistogramProps) {
   const { timeRangeText, timeRangeDisplay } = useTimeRange({
     uiSettings,
@@ -98,7 +101,6 @@ export function Histogram({
       transform: translate(-50%, -50%);
     }
   `;
-
   return (
     <>
       <div
@@ -119,6 +121,7 @@ export function Histogram({
           onFilter={onFilter}
           onBrushEnd={onBrushEnd}
           withDefaultActions={withDefaultActions}
+          esqlVariables={esqlVariables}
         />
       </div>
       {timeRangeDisplay}

src/platform/packages/shared/kbn-unified-histogram/hooks/use_unified_histogram.test.tsx

@@ -8,6 +8,7 @@
  */
 
 import { RequestAdapter } from '@kbn/inspector-plugin/common';
+import type { ESQLControlVariable } from '@kbn/esql-types';
 import { act } from 'react-dom/test-utils';
 import { dataViewWithTimefieldMock } from '../__mocks__/data_view_with_timefield';
 import { unifiedHistogramServicesMock } from '../__mocks__/services';
@@ -26,6 +27,13 @@ describe('useUnifiedHistogram', () => {
         requestAdapter: new RequestAdapter(),
         searchSessionId: '123',
         timeRange: { from: 'now-15m', to: 'now' },
+        esqlVariables: [
+          {
+            key: 'agent_keyword',
+            value: 'Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1',
+            type: 'values',
+          },
+        ] as ESQLControlVariable[],
       })
     );
     expect(hook.result.current.isInitialized).toBe(false);
@@ -37,6 +45,13 @@ describe('useUnifiedHistogram', () => {
     });
     expect(hook.result.current.api).toBeDefined();
     expect(hook.result.current.chartProps?.chart?.timeInterval).toBe('42s');
+    expect(hook.result.current.chartProps?.esqlVariables).toEqual([
+      {
+        key: 'agent_keyword',
+        value: 'Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1',
+        type: 'values',
+      },
+    ]);
     expect(hook.result.current.layoutProps).toBeDefined();
   });
 

src/platform/packages/shared/kbn-unified-histogram/hooks/use_unified_histogram.ts

@@ -18,6 +18,7 @@ import { useEffect, useMemo, useState } from 'react';
 import type { Observable } from 'rxjs';
 import { of } from 'rxjs';
 import useMount from 'react-use/lib/useMount';
+import type { ESQLControlVariable } from '@kbn/esql-types';
 import { cloneDeep } from 'lodash';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import useObservable from 'react-use/lib/useObservable';
@@ -73,6 +74,10 @@ export type UseUnifiedHistogramProps = Omit<UnifiedHistogramStateOptions, 'servi
    * The current breakdown field
    */
   breakdownField?: string;
+  /**
+   * The ES|QL variables to use for the chart
+   */
+  esqlVariables?: ESQLControlVariable[];
   /**
    * The external custom Lens vis
    */
@@ -172,8 +177,16 @@ export const useUnifiedHistogram = (props: UseUnifiedHistogramProps): UseUnified
     setLensVisService(new LensVisService({ services, lensSuggestionsApi: apiHelper.suggestions }));
   });
 
-  const { services, dataView, columns, isChartLoading, timeRange, table, externalVisContext } =
-    props;
+  const {
+    services,
+    dataView,
+    columns,
+    isChartLoading,
+    timeRange,
+    table,
+    externalVisContext,
+    esqlVariables,
+  } = props;
 
   const columnsMap = useMemo(() => {
     return columns?.reduce<Record<string, DatatableColumn>>((acc, column) => {
@@ -246,14 +259,24 @@ export const useUnifiedHistogram = (props: UseUnifiedHistogramProps): UseUnified
       ? {
           ...props,
           ...stateProps,
+          esqlVariables,
           input$,
           chart,
           isChartAvailable,
           requestParams,
           lensVisService,
         }
       : undefined;
-  }, [chart, input$, isChartAvailable, lensVisService, props, requestParams, stateProps]);
+  }, [
+    chart,
+    input$,
+    isChartAvailable,
+    lensVisService,
+    props,
+    requestParams,
+    stateProps,
+    esqlVariables,
+  ]);
   const layoutProps = useMemo<UnifiedHistogramPartialLayoutProps>(
     () => ({
       chart,

src/platform/packages/shared/kbn-unified-histogram/tsconfig.json

@@ -34,6 +34,7 @@
     "@kbn/visualizations-plugin",
     "@kbn/kibana-utils-plugin",
     "@kbn/lens-embeddable-utils",
+    "@kbn/esql-types",
     "@kbn/data-views-plugin"
   ]
 }

src/platform/plugins/shared/controls/public/control_group/components/floating_actions.tsx

@@ -133,6 +133,7 @@ export const FloatingActions: FC<FloatingActionsProps> = ({
           }`}
           className={classNames(
             'presentationUtil__floatingActions',
+            'controlFrameFloatingActions',
             `controlFrameFloatingActions--${isTwoLine ? 'twoLine' : 'oneLine'}`,
             className
           )}

src/platform/plugins/shared/discover/kibana.jsonc

@@ -57,7 +57,8 @@
       "kibanaUtils",
       "kibanaReact",
       "unifiedSearch",
-      "savedObjects"
+      "savedObjects",
+      "controls",
     ],
     "extraPublicDirs": [
       "common"

src/platform/plugins/shared/discover/public/__mocks__/esql_controls.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { ControlPanelsState } from '@kbn/controls-plugin/public';
+import type { ESQLControlState, ESQLVariableType, EsqlControlType } from '@kbn/esql-types';
+
+export const mockControlState: ControlPanelsState<ESQLControlState> = {
+  panel1: {
+    type: 'esqlControl',
+    availableOptions: ['bar', 'baz'],
+    variableType: 'values' as ESQLVariableType,
+    variableName: 'foo',
+    title: 'Panel 1',
+    selectedOptions: ['bar'],
+    esqlQuery: '',
+    controlType: 'STATIC_VALUES' as EsqlControlType,
+    order: 0,
+  },
+};