[Dashboard First] Add to Library Action

[ThomThomson]

Summary

Counterpart / Opposite of #74905

Adds an embeddable panel action to add by value embeddables to the library, turning them into by reference embeddables. This action should work with any embeddable that implements the ReferenceOrValueEmbeddable interface from #74302.

The action has an implementation in attribute_service that comes with a saved object save modal and title duplication detection.

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. In order for the 'by value' workflow to be made default, some architectural changes need to be completed including #67931, #71499, and #61663

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. There are no production ready embeddables that implement the ReferenceOrValueEmbeddable yet so you will have to start the developer examples. yarn start --run-examples

3. Open a dashboard, and use the add panels functionality to add a Book embeddable. You should be able to then unlink it from its library item. using the 'unlink book from library item' action menu item.

4. Use the 'Add to Library' action, being sure to save the embeddable with a unique name.

Checklist

• Unit or functional tests were updated or added to match the most common scenarios

For maintainers

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

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[majagrubic]

Tested in Chrome on Mac OS X on a book embeddable example. Works as expected 👍

[Dosant]

Got following error:

1. Add a book by value
2. Add to library
3. change title in a popup
4. Press save

There is error in console:

add_to_library_action.tsx:90 Uncaught (in promise) undefined

Looks like original error is swallowed:

kibana/src/plugins/dashboard/public/attribute_service/attribute_service.tsx

Line 178 in 0a0b8f2

reject();

And it is:

TypeError: Cannot assign to read only property 'title' of object '#<Object>'
    at onSave (attribute_service.tsx:78)
    at async Object.onSaveConfirmed [as onSave] (show_saved_object_save_modal.tsx:37)
    at async SavedObjectSaveModal.saveSavedObject (saved_object_save_modal.tsx:87)

Which means that object that belongs to dashboard state container directly mutated

1. To not bump into this error, we could create shallow copies of objects instead of mutating in place
2. If possible, let's make sure that error is not swallowed

[ThomThomson]

Thanks for finding this Anton! Seems like I was focusing on testing only embeddables that had previously been in the library, not brand new ones. I've forwarded the error and used a shallow copy as suggested.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: f171553

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
dashboard	176	+1	175

page load bundle size

id	value	diff	baseline
dashboard	702.2KB	+7.4KB	694.8KB

History

• 💔 Build #69119 failed 4f8c41dfb32459cbf52819ec512971d4a8711f0a
• 💚 Build #68795 succeeded 0a0b8f2
• 💔 Build #68775 failed 08634a7
• 💚 Build #68607 succeeded 703985e
• 💔 Build #68532 failed eb93219

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

[Dosant]

LGTM, tested on a dashboard using book embeddable.