[Meta] [Panel Toolbar] Shared UI for adding content

[ryankeairns]

Related to #84561

As part of the Time to Visualize (TTV) project, the panel toolbar enables Dashboard users to create and add content in a variety of ways. This meta issue outlines and tracks the proposed evolution of this feature for Dashboard and other implementations (e.g. Canvas).

The goal is to provide a shared, universal UI for managing content - whether that be creating new content in editing apps, adding existing content from the library, working with future embeddables, or adding content that is native to the host application.

Future state

The proposed design has several notable characteristics:

1. Lens as the default editor, reached by clicking on the primary call-to-action button
2. Single-click, native elements* (we may want to limit the number allowed, e.g. 5 max)
3. Scalable menu of secondary editors* which leverage the by-value model (order needs to be solidified; likely Lens is always first, aggregation-based/Visualize last; may also want to set a max and limit to menu item 1 per editor at top level)
4. Button to view and add items from the global, shared library (opens flyout; should match content of 'Visualize library' app home page)

*As determined by the host application (e.g. Dashboard or Canvas)

Note regarding 3.: Editor applications would 'register' their availability to the global toolbar where each host application determines whether to ultimately display/provide this option, thus the importance for a scalable design.

💻 Figma mockups

https://www.figma.com/proto/YA02RZlZQ6IQWlyzyiFzZx/Dashboard-Canvas?node-id=1771%3A2316&viewport=1761%2C1316%2C0.25&scaling=min-zoom

Following are the proposed phases for the toolbar including guidelines for future editors to plug into the feature.

Phased approach

Phase 1 - TTV: V1 Toolbar for Dashboard

Initially, the toolbar provides:

1. Host-app defined primary call-to-action (editor) and
2. Button to view and add items from the global, shared library

• Create a shared component that displays two buttons: a host-app defined primary call-to-action and a global Add from library button
  • Initially, the primary CTA will open the existing viz type modal in Dashboard (see the next phase for the Canvas CTA).
  • The Add from library button will open the existing 'Add panel' flyout (the 'Create new' button remains for now; more on that later)
  • The top menu links in dashboard will align on terminology ('Create new' --> 'Create panel' and 'Add' --> 'Library')

• Update top menu links
  • Remove Add and Create new from the top menu
  • Make Save the secondary/bordered button (EuiButton default)
  • Add Save as option

Phase 2 - Canvas alignment

Similar to Dashboard, Canvas workpads can display embeddable content from other sources. This phase focuses on gaining initial menu/UX alignment between Dashboard and Canvas.

• Add the shared toolbar to Canvas
  • The existing 'Add element' button is used as the primary CTA in the toolbar, retaining its current functionality (displaying a context menu)
  • Add from library opens the existing flyout (Canvas already hides the 'Create new' button here)

• Move existing menu links to the top header
  • Utilize the TopNavMenu component to push (most of) the existing menu into the header (Options, Share, Edit)
  • Re-name 'View' --> 'Options'

Phase 3 - Lens as default; Scalable for all embeddables

Provide a scalable design for current and future editors.

Dashboard

Update: Dashboard currently provides direct links to Text and Controls via the existing modal experience, so we could add those two and keep the current UX

Canvas

Since Canvas already has native elements, they could be converted at this stage. We would need to get creative with the sheer number of element types which are currently grouped in the 'Add element' menu.

• Set Lens as the primary CTA, by default.

  • At least for Dashboard; Canvas may not be ready for this just yet (see handling of native elements in next phase)
  • Clicking this button goes straight to Lens (might need to select an index); no more viz type selection modal

• Add an 'All editors' button that opens a context menu (similar to the Canvas 'Add element' UI) which replaces the current viz modal.

  • The driver for this is that we need a scalable solution. As new editors (embeddables) come online, they simply appear in the list. The current modal is already large, excludes ML, and is not very scalable.
  • The shared component should be flexible, allowing implementors to include and exclude applicable editors (e.g. one may work with Dashboard but not Canvas)

• Fix the flyout; remove the 'Create new' button

  • Remove the 'Create new' button from the flyout
  • Add an 'All editors' button to the toolbar (for Dashboard; not applicable to Canvas). The button opens a context menu/popover with two items: Visualizations and Machine Learning <-- we may have to do this temporarily, but it might be worth skipping this iteration and working toward a better solution (see below)

Phase 4 - Add Native controls for Dashboard

Presuming Dashboard native controls come later, in phases, they 'come online' as they are built.

---

FAQs

What does it look like for a 'host' app to use this shared toolbar component?

Add the shared component to your application and pass the following items:

• Does your app support Lens content? If yes, then the primary CTA appears
• Does your app have native controls? If yes, supply them to the toolbar component; max 5 will appear; >5 will produce an overflow menu
• Does your app support additional editors beyond Lens? 'Enable' them via the toolbar component props and the 'All editors' button will display with the additional editors appearing in the context menu (+ Lens in the first position)
• Does your app support embeddables? If yes, then the 'Library' button will display and open a flyout for selecting shared content.

How do you plug your 'editor' app into the shared toolbar component?

• Register your application/plugin as a provider; provide the title, etc.
• Once registered, your application will appear in the 'All editors' menu if supported by the 'host' application.
• (Add your content to the Visualize app as a new type? We need to make sure all old/existing/shared stuff is in the library flyout)
• (Likewise, any objects in the library (of your type) will appear in the library flyout)

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[ThomThomson]

I'm wondering if we should include the top menu in these designs - or if this would be an appropriate place to discuss plans for the dashboard top nav.

I am of the opinion that the controls library / add and create new / create panel should be removed from the top nav and kept only in the new toolbar to better align with other apps, and create a separation of concerns between actions which affect the dashboard itself (save, cancel, options, share) and actions which affect the dashboard's content (all of the toolbar actions).

If that were the case, I imagine the top nav could look something like this:

Notice the shortcut save button so that saving a dashboard doesn't always have to go through the save modal. This also provides more alignment with the editors like maps, visualize, and lens, which all have this functionality.

[ryankeairns]

Great catch @ThomThomson , that was a missed item on my part. I agree those should be removed from the top nav.

In a separate discussion, Alona noted that we could keep it, for now, but with the full set of proposed changes in view - it makes sense to no longer do so.

[ryankeairns]

Chatting further, we may want to change the order of Phases 2 & 3 - opting to flesh out the Dashboard toolbar (add the 'All editors' button; switch to Lens as default; fix up the flyout/add ML to main toolbar) and then coming back to Canvas. This would allow us to keep momentum for the TTV project and buy us more time to address the outstanding work to support more embeddable types in Canvas (e.g. handling the complexities of filters, etc.).

cc:/ @cqliu1