[Canvas] Top menu as links vs icons

[shaunmcgough]

Canvas could benefit from a standardized menu. It would make sense to put this where menus go.

-= Proposed taxonomy =-

File
Edit
View
Insert
History
Help

Phase 1

• Add View, Share, and Options menu links
• Move 'Add element' button to the left; first item in menu link set
• Move remaining icon-only button to right end: editing controls, refresh, fullscreen

Phase 2

• Add an 'Edit' link to the menu that includes: Undo, Redo, Cut, Copy, Paste, Delete, Clone, Order, Save as new element
• Undo, Redo, Paste are always enabled; the others are disabled until an element is selected
• Remove overflow icon-only button from top of side bar
• Remove 'Save as new element' icon-only button from top of side bar
• Remove the Options menu link; move autoplay and refresh settings to the View menu as 4 separate links: Enable/Disable autoplay, Autoplay settings, Enable/Disable refresh, Refresh settings (Enable/Disable toggles so only one word displays; same as Show/Hide controls)
• Autoplay and Refresh settings each opens a secondary/context menu with the existing form (currently seen under Options; but now split into two menu items)
• Remove the icon-only refresh button atop the refresh settings form

[elasticmachine]

Pinging @elastic/kibana-canvas

[ryankeairns]

This would help us consolidate what is currently in the top bar area (above the workpad), perhaps some actions from the bottom bar, and actions that appear atop the side nav when elements/grouped elements are selected.

It's a well-known pattern to organize and display actions when you compare to other presentation style software, and feels like it could simplify things quite a bit.

Once we get to this topic, let's whip up a prototype and see how it feels.

[ryankeairns]

The following prototype demonstrates the familiar top menu UX as described above:
https://marvelapp.com/c0a4aa1/screen/57976863

Note: This prototype was originally put together for the embeddables feature and it also contains an alternative element picker (menu replacing current modal) that needs further discussion and consideration. The top menu changes could be started without the modal change (i.e. keep the modal for element picker), if that becomes the agreed upon path forward.

Also note that the drilldown menu design is not an existing EUI component, so the sub menus would need to be built custom using EuiPanels. Alternatively, we could request and await such an offering from the EUI team.

cc:/ @snide @shaunmcgough @cqliu1 @timductive

[ryankeairns]

In considering menu designs in Kibana more globally, the design team discussed sticking with a traditional all-text-based approach:

[ryankeairns]

@cqliu1 here is the design prototype that we reviewed/discussed. It did not drift materially away from what was discussed originally on this issue (above). I did revert back to relying on the blue button since it has been effective in providing a clear starting point. Further, in the meantime, we are exploring this approach in other apps as well (e.g. Dashboard).

Catherine and I discussed possibly breaking apart what appears under 'Option' (refresh and autoplay settings), but decided it would be better to do that in a subsequent iteration.

Figma prototype

https://www.figma.com/proto/1IYs1bDOmxlacTBH2Q1MOJ/Canvas-Base?node-id=0%3A2168&viewport=169%2C2532%2C0.32376915216445923&scaling=min-zoom

Selected mockups from prototype

[ryankeairns]

@cqliu1 updated the Figma prototype to include an Edit link. This also pulls the Options menu items into View and removes the less discoverable icon buttons from the element sidebar.

Clickable prototype

https://www.figma.com/proto/1IYs1bDOmxlacTBH2Q1MOJ/Canvas-Base?node-id=0%3A2168&viewport=-396%2C2707%2C0.4067838490009308&scaling=min-zoom

Edit menu added

Screenshot from prototype

View menu now includes items from sidebar

Screenshot from prototype

Removed the 'Save as new element' and 'Overflow' icons from top of element sidebar

These were never very discoverable, so instead we've moved them to a more prominent location within the top menu (see screenshot above).