[ES|QL] Increase discoverability of ES|QL (aka switcher)

[ryankeairns]

This meta issue provides an overview of the next version of the ES|QL editor. It coincides with a new "switcher" button that will draw more users into using ES|QL.

Design <> Development handoff

→ Annotated Figma file
→ Prototype showing switching interaction

Proposed end state

1. Add new 'Try ES|QL' button in current default mode

(see next image)

2. Make the data view picker more clearly about data views

...and remove the current 'Language: ES|QL' button from the data view picker

3. Drop compressed editor

• Remove the compressed ES|QL leaving only - what is today referred to as - the expanded editor and the inline editor used in Dashboard.

4. Make the expanded editor more editor-like

5. Introduce V1 of new 'file menu'

• ES|QL reference link opens the existing in-product docs panel. This is meant to make it more discoverable and communicates the associated shortcut. I don't know how much work is involved in adding a shortcut... this is a nice-to-have.
• About ES|QL opens the ES|QL page on our external docs site (https://www.elastic.co/guide/en/elasticsearch/reference/current/esql.html). I suppose this may need to be version specific like https://www.elastic.co/guide/en/elasticsearch/reference/8.13/esql.html ?
• Switch to classic does just that. This essentially replaces the blue button seen atop the editor today.

What else will be in this menu?
Next up will likely be New and Save capabilities.
Over time, several other items could be added as demonstrated below (for example only; not to be taken too literally)

TODOs

Switcher + editor changes #182083

Beta Give feedback

1. Add Try ES|QL button to current default view
2. Update the data view picker to further differentiate between ES|QL and data views
3. Remove compressed version; default to expanded
4. Consolidate 'meta' information and features into the footer (aka info bar)
5. Remove 'chrome' styles (margin, border, etc.)
6. Add new file menu (v1) - in the editor - that contains a 'Swtich to classic' link

Related enhancements for informational purposes

Beta Give feedback

1. [ES|QL] Add indicator of current LIMIT to info bar #188991
   Feature:ES|QL Team:ESQL enhancement +3
2. [ES|QL] Add result of last run #188992
   Feature:ES|QL Team:ESQL enhancement +3

[elasticmachine]

Pinging @elastic/kibana-esql (Team:ESQL)

[stratoula]

@ryankeairns this is cool but I dont understand how it will look in Discover that has already the time picker and the Run button in the navigation 🤔 . Can you please share a screenshot on this integrated in various places such as Discover or inline editing of an ES|QL chart?

Update: I guess it will look like this?

[stratoula]

@ryankeairns which is the difference from this issue #182083 I am trying to keep our backlog clean and I dont want to have duplicated content but if you feel that we need both is also ok. 👍

[ryankeairns]

@ryankeairns which is the difference from this issue #182083 I am trying to keep our backlog clean and I dont want to have duplicated content but if you feel that we need both is also ok. 👍

Ah yes, that one was specific to just the switching mechanism even though it shows the other editor changes. I'll convert this issue to a meta, break it down into workable chunks, and create a small set of issues (e.g. fixes, moving buttons around, adding the switcher). This way, it will become more clear what can be worked on now (fixes) and if/when the other items are approved.

Sound good @stratoula ?

[stratoula]

Sounds fantastic!

[ryankeairns]

@ryankeairns this is cool but I dont understand how it will look in Discover that has already the time picker and the Run button in the navigation 🤔 . Can you please share a screenshot on this integrated in various places such as Discover or inline editing of an ES|QL chart?

Update: I guess it will look like this?

Right, like that. I will add that since writing up this issue, I have put together some additional ideas that utilize the existing bar/space above the editor (spoiler alert: it has to do with controls). We will review them tomorrow during our sync!

[ryankeairns]

@stratoula hold off on this one, please. I want to review some new designs with you/the team before we proceed. I have some things in mind for the possibility of controls and search that could leverage the space in the top bar.

[ryankeairns]

We'll need to talk about this, of course, but an image helps illustrate an idea:

[stratoula]

So we are not moving the time picker and run button in the editor but we are filling the gap with controls? Yes, I would love to discuss it in person 👍

[ryankeairns]

@stratoula I went ahead and split the two new additions to the info bar (aka footer) into separate issues

• Display LIMIT
• Display last run result