[Time to Visualize] Library Notification Popover

[ThomThomson]

Summary

in the Time to VIsualize project, it's important to provide many obvious ways for the user to enter into the new flow. The library notification added in #76122 can act as a good entry point/call to action by prompting the user to unlink the panel from the library.

TODO:

• finalize design of the popover - @ryankeairns, do you have any feedback or ideas for this popover?
• finalize copy. It currently shows the same copy as the tooltip did before. Maybe an explanation of what the unlink button does may help? Would a title in the popover be good?

How to test this?

This is just one part of a much larger change, so all changes in this PR are hidden behind a configuration value.

1. you'll need to set the allowByValueEmbeddables config value to true:
   

   kibana/src/plugins/dashboard/config.ts

   Line 23 in 5b64a4c

   allowByValueEmbeddables: schema.boolean({ defaultValue: false }),

2. Open a dashboard, and use the add panels functionality to add an embeddable from the library. You should see the new notification show up on the right side.

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[ryankeairns]

Hey, yeah, I’ll give it some thought.

One initial reaction is - how do we indicate the library status within the editing application? That feels like the point in the flow with the greatest chance for 'breaking' things.

My guess is that people will continue on with the ‘Edit this panel’ action from the Dashboard 'gear' menu at which point there is increased potential of updating a library item inadvertently. We've kept that 'Save and return' flow purposefully streamlined (single click), so how can we indicate the potential for broader impact without adding another hurdle (i.e. modal), for example. Perhaps it's something as simple as an icon alongside the Save and return? I'll give this more thought as well.

[ThomThomson]

This is certainly another important consideration. Right now the only difference is the wording on the 'save as' button.

By Value

By Reference

A subtle indicator with a warning on hover could certainly help differentiate the two modes of the editor.

A more drastic approach could be to add a button that is the opposite of the 'save to library' button. The 'save to library' button acts as an escape hatch away from by value, but maybe we also need an escape hatch button into by value. The only problem I can think of is the copy for that button... 'save to dashboard' doesn't really work... 'embed' sounds like it's doing something else...

[ryankeairns]

Ah right, I hadn't thought that all the way through. This feels like it could slip into something messier than I'd initially imagined. The existing buttons (Save to library and Save as) seem sufficient for now.

Perhaps we could do some sort of in-page indicator similar to the badge on the panel. Hold on that for now and I'll do some more tinkering.

[ryankeairns]

To the point, I like the popover and have only a couple of minor feedback items:

1. Let's have @gchaps take a look at the wording. One suggestion is to just have the button label read 'Unlink from library' (drop the item)
2. I poked around other apps and found a couple of similar popover use cases. In short, aligning the button to the right and using the primary fill would match these other cases:

---

In addition (beyond this PR), we should consider similar changes elsewhere. For example, we could likewise indicate when an item is in the library from within an editing app (e.g. Viz/Lens). We'd have to think through the conditions of when to display this badge, but having a similar UX at this level would likely be helpful as its closer to the point of potentially affecting multiple dashboards.

[ryankeairns]

Forgot one other thing... a toast confirmation would be helpful to confirm once an item has been added to/removed from the library.

[ThomThomson]

Thanks for the design input!

I've added a couple toasts to the 'add to library' and 'unlink from library' actions:

I have also reworked the design of the popover to be more in line with other similar popovers, and changed the library notification icon from a badge to an icon button to make it even more inconspicuous - as well as allowing me to add a title to the popover.

[ryankeairns]

@ThomThomson thanks for making these changes. I just gave it a run through and it both looks and works well!

[elasticmachine]

Pinging @elastic/kibana-canvas (Team:Canvas)

[majagrubic]

I'm having a hard time running this, so can't verify if it works. Code changes look good.
One question though - can we return the previous "Libary" badge look?

[ryankeairns]

I'm having a hard time running this, so can't verify if it works. Code changes look good.
One question though - can we return the previous "Libary" badge look?

While the previous badge looked ok on its own, we're having to consider it in the context of several other new/upcoming panel elements. For that reason, we've opted to go with this more minimal approach and will look at a larger redesign of the edit state as described here: #79916

[ThomThomson]

@majagrubic, you're right that the previous design was nicer looking. I changed this to an EuiIconButton for three reasons:

1. There may be a lot of them on a dashboard, so it's important that it's super subtle.
2. It's now a clickable button that opens a popover which gives plenty of other opportunities to show the required text, and it would be redundant to have the 'library' text show up both in the popover, and on the button itself.
3. We are eventually going to move in a direction where many of the actions on the top bar are icons only. See [Dashboard] Improve the panel layout in edit mode #79916 for some preliminary designs.

Oh, @ryankeairns beat me to it!

[ThomThomson]

@elasticmachine merge upstream

[Dosant]

Code LGTM, didn't test

[majagrubic]

Managed to get it running 🎉 Tested in Chrome 85 on Mac OSX. Looks great. Unlinking / linking works as expected.
One minor thing I notice, which is probably unrelated to this PR, but putting it here so it doesn't get lost:

1. Add a panel by value
2. Add it to a library - give it title
3. Choose "Hide title"
4. Unlink from library -> after unlinking the title is shown (whereas I would expect it to stay hidden)

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 76046e6

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
dashboard	168	169	+1

page load bundle size

id	before	after	diff
dashboard	340.0KB	344.4KB	+4.4KB
embeddable	301.4KB	301.5KB	+76.0B
total			+4.5KB

History

• 💚 Build #81396 succeeded a9a92a9
• 💔 Build #81389 failed 5520c64
• 💚 Build #80789 succeeded aa267a6
• 💔 Build #80762 failed b877b80
• 💚 Build #80544 succeeded ebc9a9d

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream