Kibana: Provide a text embeddable for dashboards

[timroes]

We should add a text embeddable that allows users to add text to a dashboard directly (this could be a longer term replacement of the regular Markdown visualization).

The user should be able to create this from the dashboard and edit the following parameters:

• Markdown
• Text/Background color
• Font size
• Open links in new tab
• Text rotation (0°, 90°, 180°, ...)

Open questions:

• How can we edit a placed embeddeble without requiring to write a custom edit panel action per embeddable? Should there be a embeddable wide concept for this (like we have with edit via URL)? Already started discussing that with @stacey-gammon

[elasticmachine]

Pinging @elastic/kibana-app

[elasticmachine]

Pinging @elastic/kibana-design (Team:Design)

[timroes]

Note for design

This will be a new embeddable, so the way the flow is initialized by the user is by selecting an option (like the following sample "Create new text panel") from the "Add" panel:

That will initialize a modal similar to the one you get when selecting "Customize time range" in a visualization panels context menu on a dashboard, but we're free in the complete design/size/etc. of that modal. That modal will also be reshown when the user wants to edit the text again. I am currently thinking about the parameters listed above in the description to be configurable, but if you think there should be more (or some of them shouldn't be user configurable), please just adjust the design to whatever you think makes the most sense.

[ryankeairns]

Tracking Markdown enhancement on the EUI side: https://github.com/elastic/eui/pull/2597

[ryankeairns]

I read the suggestion of using the 'Create new' button in the flyout, so following that path I've provided a modal mockup which would complete that flow:

Modal appears after clicking 'Create new text panel' in the flyout

---

In the event we are not limited to the flyout → modal flow, I have also created some design alternatives that may simplify the UX a bit:

Adding popover menu to 'Add'

Regardless of the two approaches listed above, we might also consider a more inline experience that avoids the use of a modal:

Inline Markdown editor

We've also explored idea of using a more traditional icon-based toolbar, however this has a couple of drawbacks: 1) icon-only menus have inherent usability problems and 2) it likely eats up another row atop the UI. That said, we might reconsider this style of toolbar if/when we refine global UI elements such as the date range picker, query input, and filter pinning... presuming they regain some space.

Future toolbar combined with global UI changes

Note: this is admittedly quite long term and exploratory, but seemed worth a quick mockup

cc:/ @AlonaNadler @majagrubic

[timroes]

@stacey-gammon Can we achieve something like the Inline Markdown editing with the embeddable system? If not, how large do you think the changes would be to the embeddable system so we could achieve it? I'd assume we need to be able to render editors in panels directly, and change the menu potentially to a "save/discard" menu temporarily for that.

[stacey-gammon]

Before I talk about technical feasibility, I want to be sure we want to use this UX. It requires the panels to be large to work, but sometimes panels are small. The user would have to expand it to edit, then make it smaller again. We've decided against this design in the past because of that.

If we want to do it anyway, embeddables get passed "view mode" which can be edit or view. Maybe if this variable is "edit", it renders itself with the inline editing controls. This would mean a dashboard in edit mode automatically allows you to edit these markdown controls inline, without needing a secondary step.

[streamich]

+1 for considering to put editor into flyout or modal instead of in-line in the panel.

[ryankeairns]

Ah, good catch @stacey-gammon !
This would be very difficult, if not impossible, to do in a small space. The modal (or flyout) provides a more reliable space to do this type of editing.

[AlonaNadler]

@ryankeairns @timroes when users are on edit mode why not provide like a toolbar which is visible by default and allow them to add input control, markdown, existing object and in the future image, navigation panel etc..
I think having it visible by default it will better than hiding everything under generic add

[ryankeairns]

I tried that out as well, but the top section gets quite crowded and we'd likely be using an entire row of the UI for a small tool bar (at least initially). Perhaps there is a way this could be added without using a new row, but my understanding is it may be technically a bit complicated right now.

These options are also not necessarily mutually exclusive. We could do the popover menu first, then add the toolbar later once we have a) more features for a toolbar and/or b) tightened up the search bar design. Regarding the latter, there are some early thoughts I've seen shared that could save us some space up top.

We can talk about all of these when we meet next, but here is a quick screenshot of how a toolbar would look if nothing else were to change vs how it might look accompanied by the search bar clean up.

[ryankeairns]

Updated with feedback from @AlonaNadler .

The preference is to go with the toolbar solution as it keeps the controls always visible and provides a single-click approach (full prototype link below screenshot). We'll likely only have Text, Controls, Add panel, initially, with Image and URL/Link to follow.

Mockup

Click the '7.x - Dashboard controls' button

https://www.figma.com/proto/EwodWYRUIjbNvYoi9G4Hnh/Lensboard?node-id=731%3A4368&viewport=-2830%2C-4701%2C0.5423611402511597&scaling=min-zoom

[mbd-dbc-dk]

Can I vote for this feature? Our Kibana installation seems to have no way to provide helpful information about a dashboard, as it is now, and no way to access the description information.

[flash1293]

@mbd-dbc-dk There is a workaround to achieve a very similar result - create a Markdown visualization in "Visualize", then add this one to the dashboard.

[mbd-dbc-dk]

@flash1293 Thanks a lot! Exactly what I needed actually. My apologies for my ignorance.

[timroes]

@mbd-dbc-dk We're always happy to help you out whenever we can. Also always feel free to drop with any question you're having into our forums.

Cheers
Tim

[rayafratkina]

A community user asked about adding time variable to the title of the dashboard

Is there a way to show the time range in markdown to use as a dashboard title? For example if I set the time filter, I'd like to have a title that says "Report Week Beginning <>"

As a later phase, we should consider having a way to reference global date and filter constraints in this embedable to support use cases like this.