[Synthetics] Fix breadcrumbs in serverless

[justinkambic]

Summary

Resolves https://github.com/elastic/synthetics-dev/issues/289.

The Synthetics plugin now consumes the Serverless breadcrumbs API when Kibana is running in Serverless mode.

This patch will re-use all the Synthetics plugin's existing breadcrumb logic, with some minor modifications. At plugin start time, Synthetics will detect if Kibana is stateful or stateless, and either assign the serverless.setBreadcrumbs or core.chrome.setBreadcrumbs function to the props that get propagated to the SyntheticsSettingsContext. The breadcrumb hooks in the React code will now reference this field, rather than directly pulling chrome.setBreadrumbs from the Kibana services object as it did before.

This patch also introduces a new deep link for the Settings page, and adds an associated object to the Observability project nav tree.

One other thing to note is that this patch will also require Synthetics to add the serverless plugin as a dependency in its kibana.json file.

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
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• Flaky Test Runner was used on any tests changed
• 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)
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

Risk	Probability	Severity	Mitigation/Notes
Multiple Spaces—unexpected behavior in non-default Kibana Space.	Low	High	Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces.
Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks.	High	Low	Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure.
Code should gracefully handle cases when feature X or plugin Y are disabled.	Medium	High	Unit tests will verify that any feature flag or plugin combination still results in our service operational.
See more potential risk examples

For maintainers

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

[apmmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• /oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[tonyghiani]

Code review only, deeplinks-observability changes LGTM.

[elasticmachine]

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

[cauemarcondes]

@crespocarlos I liked what @justinkambic is doing here. He's abstracting the setBreadcrumbs during kibana start to be either serverless or stateful kibana.

Clients don't care where they are, they just know how to add its value to the breadcrumbs.

I see the exact same code being written in different ways all over our plugins. Maybe this is a good thing to export to a common place.

[crespocarlos]

Yeah, this is very nice and more interesting than the other approaches I saw in the codebase.

At first, I thought about following a similar path, but I didn't want to change the useBreadcrumbs in the observabilty_shared at this moment.

Especially because by doing that, we're overriding the default serverless breadcrumbs feature, which observes the navigation tree config in the serverless-* plugins and sets the breadcrumbs automatically. If we do the same in the observability_shared we need to make sure everything that depends on it still works as expected

[justinkambic]

In the case of Synthetics there is a good deal of custom-rolled breadcrumb logic and my motivation was to avoid touching that as much as possible.

This was nice because the API is very similar between chrome.setBreadcrumbs and the Serverless plugin's version; in the case of Synthetics it was a simple drop-in replacement.

[shahzad31]

Obs UX Changes LGTM !!

[cauemarcondes]

LGTM

[justinkambic]

Hi 👋 Sorry if you were unnecessarily pinged. 🔔

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 3c18b20

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
synthetics	844.3KB	844.5KB	+201.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
serverlessObservability	26.4KB	26.6KB	+195.0B
synthetics	19.7KB	19.7KB	+42.0B
total			+237.0B

History

• 💔 Build #195368 failed 3ed490b542733578d46940a797fa3e728e8fb583
• 💔 Build #195117 failed 2442dadd670ae5f9a05c4454e02dfdcbfdb1c004
• 💔 Build #195098 failed 2dba34e4d13ec6a407eb7801000fdc4d6c0ec8b3
• 💔 Build #195015 failed e62ffa4d002b3719600e29cdb0a3484c5721e3c1

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

cc @justinkambic