Kibana: EUIficate visualize editor frame

[timroes]

As part of the EUIfication of Kibana App, we want to give the existing vis editor a slight polish, to make it look more fitting in the new design. @cchaos created the following screenshot as a mock for how that could look:

A couple of notes on the changes:

• We must check if it makes sense to move the Save and Share button to the bottom right now, since they are currently in the central kbn-top-nav component. This depends a bit on how much change we need, since that new design should still go into 7.0, so we shouldn't make too many larger changes there anymore.
• The Inspect button (which is currently in the bottom left of the chart) will also need to live in the bottom bar, since that area (including that legend toggle button) is currently part of the chart area and not the editor area. We could for the future think about making a "legend toggle" not part of the chart, but as a generic "action" on a chart, that way we could decouple that button from the chart, and might have more flexibility of placements of buttons.
• As Caroline showed in that mock, we can get rid of the Refresh button. We have that now in the query/timefilter bar, so no need to have a separate button in the vis editor anymore.

The following tasks need to be done:

• [ ] EUIficate vis-editor-vis-options
• [ ] EUIficate vis-editor-sidebar

[elasticmachine]

Pinging @elastic/kibana-app

[timroes]

@cchaos Since this came up in another PR (https://github.com/elastic/kibana/pull/40262), we have that "Linked to saved Search" info with a button (the only one you need to double click right now :D) to Unlink it from the saved search, which currently will simply be shown on top above the menu.

While redoing the editor frame I would like to move this and would appreciate some input from you. My current suggestion would be: Instead of the Index pattern name, show the name of the saved search if the visualization is linked to one, with some icon before or after it, and you can see a tooltip (on hover or click) showing you information that it's linked to the saved search, and that toolip could also have a button to unlink the saved search?

[cchaos]

@timroes I like that approach. I'd suggest adding an icon next to the index pattern / saved search to help indicate the source type. Then in the linked popover, we can add some text describing what a linked search is and how it works. I took the copy from our docs, but could use a final set of eyes from a writer as it might be too long for this popover. But something like:

[lizozom]

@cchaos If we're moving controls outside of the TopNav component, can we plan this across apps?
I think consistency should be kind here.

[cchaos]

Absolutely, but it has to be on an app by app basis.

[myasonik]

Would also like to fix headings on these. Currently, many of these pages have no headings, while others have a somewhat random mix throughout the panel.

I think, a sensible start would be h1 for the panel header ("Kibana_sample_data_ecomerce" in screenshot here) and h2s for all of the sub sections of the panel.

[sulemanof]

Hey @cchaos @timroes !
I've started working on the sidebar panel of the editor:

The main question is about an actual layout: should I use the layout attached above ?
My concern is I can't implement it fully right now and it's possible only move Discard changes and Update chart because of current code structure:

Do you have any updates here?

[cchaos]

@sulemanof Yes, you can still use this layout even though you're only moving the Discard and Update buttons to this bottom bar.