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

ryankeairns commented 3 months ago

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

CleanShot 2024-07-22 at 16 32 26@2x

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.

CleanShot 2024-07-23 at 11 50 33@2x

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 <https://github.com/elastic/kibana/pull/182083>
- [ ] Add Try ES|QL button to current default view
- [ ] Update the data view picker to further differentiate between ES|QL and data views
- [ ] Remove compressed version; default to expanded
- [ ] Consolidate 'meta' information and features into the footer (aka info bar)
- [ ] Remove 'chrome' styles (margin, border, etc.)
- [ ] Add new file menu (v1) - in the editor - that contains a 'Swtich to classic' link

### Related enhancements for informational purposes
- [ ] https://github.com/elastic/kibana/issues/188991
- [ ] https://github.com/elastic/kibana/issues/188992

elasticmachine commented 3 months ago

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

stratoula commented 3 months ago

@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 commented 3 months ago

@ryankeairns which is the difference from this issue https://github.com/elastic/kibana/issues/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 commented 3 months ago

@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 commented 3 months ago

Sounds fantastic!

ryankeairns commented 3 months ago

@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 commented 2 months ago

@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 commented 2 months ago

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

CleanShot 2024-06-13 at 14 52 14@2x

stratoula commented 2 months ago

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 commented 1 month ago

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

elastic / kibana