[Docs] ES|QL in Kibana updates (#215409)

Includes:

- ES|QL dashboard controls
- Support for LOOKUP JOIN with autocomplete suggestions
- KQL/Lucene query carried over when switching to ES|QL mode
- ES|QL viz customization options

Rel: https://github.com/elastic/platform-docs-team/issues/614

Carried to 9.0+ docs with
https://github.com/elastic/docs-content/pull/857

docs/discover/get-started-discover.asciidoc

@@ -299,6 +299,8 @@ you don't have to select a data view. It's your query that determines the data t
 
 You can switch to the ES|QL mode of Discover from the application menu bar.
 
+TIP: If you've entered a KQL or Lucene query in the default mode of Discover, it automatically converts to {esql}.
+
 Note that in ES|QL mode, the **Documents** tab is named **Results**.
 
 Learn more about how to use ES|QL queries in <<try-esql, Using ES|QL>>.

docs/discover/try-esql.asciidoc

@@ -3,7 +3,7 @@
 
 The Elasticsearch Query Language, {esql}, makes it easier to explore your data without leaving Discover. 
 
-In this tutorial we'll use the {kib} sample web logs in Discover and Lens to explore the data and create visualizations. 
+The examples on this page use the {kib} sample web logs in Discover and Lens to explore the data and create visualizations. To install the sample data, check <<gs-get-data-into-kibana,Install the web logs sample data>>. 
 
 [TIP]
 ====
@@ -21,11 +21,10 @@ To view the {esql} option in **Discover**, the `enableESQL` setting must be enab
 [[tutorial-try-esql]]
 === Use {esql}
 
-To load the sample data:
-
-. <<gs-get-data-into-kibana,Install the web logs sample data>>.
 . Go to *Discover*.
 . Select *Try {esql}* from the application menu bar.
++
+TIP: If you've entered a KQL or Lucene query in the default mode of Discover, it automatically converts to {esql}.
 
 Let's say we want to find out what operating system users have and how much RAM is on their machine.  
 
@@ -127,7 +126,10 @@ FROM kibana_sample_data_ecommerce
 image::images/esql-custom-time-series.png[ESQL query with a custom time field enabled]
 
 
+[float]
+==== ES|QL and LOOKUP JOINs
 
+The ES|QL editor supports {ref}/esql-commands.html#esql-lookup-join[`LOOKUP JOIN`] commands and suggests lookup mode indices and join condition fields.
 
-
+image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte43a30a93241d650/67c23670045f5839e5bfd1e4/lookup-join-demo.gif[Using the LOOKUP JOIN command to autocomplete an ES|QL query]
 

docs/user/dashboard/create-visualizations.asciidoc

@@ -216,8 +216,24 @@ TIP: Check the link:{ref}/esql-language.html[ES|QL reference] to get familiar wi
 . When editing your query or its configuration, run the query to update the preview of the visualization.
 +
 image:https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt69dcceb4f1e12bc1/66c752d6aff77d384dc44209/edit-esql-visualization.gif[Previewing an ESQL visualization]
+. You can bind controls to your ES|QL visualizations in dashboards by creating <<esql-controls,ES|QL controls>>.
 . Select **Apply and close** to save the visualization to the dashboard.
 
+[float]
+=== Customize the appearance of your {esql} visualization
+
+When editing an {esql} visualization, you can customize the appearance of the chart. To do that:
+
+. Click one of the fields representing an axis of the chart to open its details. +
++
+image::images/esql-visualization-customize-axis.png[Click on the axis field to open its details]
+
+. Define the appearance of your choice from the available options. +
++
+image::images/esql-visualization-customization-options.png[Appearance customization options for ESQL charts]
+
+. Return to the previous menu, then **Apply and close** the configuration to save your changes.
+
 [[maps-visualizations]]
 == Maps
 

docs/user/dashboard/dashboard-controls.asciidoc

@@ -134,6 +134,62 @@ Change the settings for the Options list and Range slider controls.
 
 . On the *Edit control* flyout, change the options, then click *Save and close*.
 
+[float]
+[[esql-controls]]
+==== Add controls from your {esql} visualization's query
+
+preview:[]
+
+You can bind controls to your ES|QL visualizations in dashboards. When creating an {esql} visualization, the autocomplete suggestions prompt control insertion for field values, field names, function configuration, and function names (function names are currently available for Elastic Cloud Serverless only). This enables controls that only apply to a specific panel, and exposes visualization configuration such as date histogram interval controls to dashboard users.
+
+NOTE: Currently, only **Options lists** with static values are supported for {esql}-based controls.
+
+. While editing your {esql} visualization's query, the autocomplete menu suggests adding a control +
++
+image::images/esql-visualization-control-suggestion.png[ESQL query prompting to add a control]
+
+. A menu opens to let you configure the control. This is where you can specify:
+
+** The name of the control. That is the name that will appear in your {esql} query, prefixed with a `?` symbol.
+** Values available to select for users with this control. You can add multiple values from suggested fields, or type in custom values.
+** The label of the control. This is the label displayed for users viewing the dashboard for that control.
+** The width of the control. +
++
+image::images/esql-visualization-control-settings.png[ESQL control settings, width="50%"]
+
+
+**Examples**
+
+* Integrate filtering into your ES|QL experience
+
+[source,esql]
+-------------------
+| WHERE field == ?value
+-------------------
+
+* Fields in controls for dynamic group by
+
+[source,esql]
+-------------------
+| STATS count=COUNT(*) BY ?field
+-------------------
+
+* Variable time ranges? Bind function configuration settings to a control
+
+[source,esql]
+-------------------
+| BUCKET(@timestamp, ?interval),
+-------------------
+
+* Make the function itself dynamic (Currently available for Elastic Cloud Serverless only)
+
+[source,esql]
+-------------------
+| STATS metric = ?function
+-------------------
+
+image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte42dfaa404bfc2d6/67d2e31e2e4dc59da190d78f/dashboard-esql-controls.gif[Editing ES|QL controls from a dashboard]
+
 [float]
 [[remove-controls]]
 ==== Remove controls

docs/user/whats-new.asciidoc

@@ -51,7 +51,9 @@ image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt6e2ccb4a2
 [discrete]
 ==== Dashboard ES|QL controls
 
-You can now bind controls to your ES|QL visualizations in dashboards. When creating a visualization, the ES|QL autocomplete will prompt control insertion for field values, field names, function configuration, and function names. This enables controls that only apply to a specific panel, and exposes visualization configuration such as date histogram interval controls to dashboard users.
+preview:[]
+
+You can now bind controls to your ES|QL visualizations in dashboards. When creating a visualization, the ES|QL autocomplete will prompt control insertion for field values, field names, and function configuration. This enables controls that only apply to a specific panel, and exposes visualization configuration such as date histogram interval controls to dashboard users.
 
 Check out the following examples:
 
@@ -76,13 +78,6 @@ Check out the following examples:
 | BUCKET(@timestamp, ?interval),
 -------------------
 
-* …or make the function itself dynamic
-
-[source,esql]
--------------------
-| STATS metric = ?function
--------------------
-
 image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte42dfaa404bfc2d6/67d2e31e2e4dc59da190d78f/dashboard-esql-controls.gif[Editing ES|QL controls from a dashboard]
 
 [discrete]