[Observability Onboarding] Add customizable header for quickstart flows

[justinkambic]

Summary

Resolves #186397.

Adds a new customizable header for onboarding quickstart flows.

To add a new header, one must specify a logo type or EuiIconType, along with headlineCopy and descriptionCopy, and put a new entry in the headerContent record, and a corresponding case in the customHeaderProps helper function I have defined. When routes that require custom headers are defined, the function will pick up the necessary props and return them to the HeaderSection component where they're used to render a CustomHeaderSection. Otherwise, the component will render the default header.

If the consuming code specifies a SupportedLogo type, it's rendered as an EuiIcon. Otherwise, if an EuiIconType is specified, it renders as an avatar, per the design.

Code is WIP.

Adds new headers for quickstart flows

Kubernetes

OpenTelemetry

Autodetect

[obltmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

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

[elasticmachine]

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

[flash1293]

Just tested and this doesn't work when answering the first question, then clicking the tile - I think it's because it's checking the path for kubernetes, not kubernetes/?category=infra.

In general, it's not explicitly stated in the issue (sorry for that), but by my understanding the idea was to have that header for all the flows, is that right @sileschristian ?

[justinkambic]

this doesn't work when answering the first question, then clicking the tile

Sorry I overlooked this. I should've marked this as a draft, I am adding some unit tests that have not been pushed yet. I was hoping to have that available by now but I am doing SDH for infra services this week so I am delayed on everything else I was doing. Thanks for uncovering the issue, I will address it and re-ping when it's ready.

[sileschristian]

In general, it's not explicitly stated in the issue (sorry for that), but by my understanding the idea was to have that header for all the flows, is that right @sileschristian ?

Yes. To be consistent that was the idea. Since we were working on the K8s, I opened just an issue for this one. But this should be for the rest (Otel, Firehose, Auto-detect, etc)

[justinkambic]

But this should be for the rest (Otel, Firehose, Auto-detect, etc)

Ok, let's merge this as a first step and then I will follow up and refactor this header to be general. Do we have copy for the other flows? Or should it keep the generic description text and just change the "Setting up {FLOW}", and have the logo update for whichever flow is covered?

[elasticmachine]

⏳ Build in-progress

• Buildkite Build
• Commit: 5f45981
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-188340-5f459815cadf
• Observability Deployment

History

• 💛 Build #222447 was flaky e37f192

cc @justinkambic

[flash1293]

Hi @justinkambic , the header is way too high for me, is there something missing?

Also @sileschristian confirmed this should be done for all flows, are you planning to roll it out to the others on separate PRs? Mostly asking as it might make things easier to not have a special case for it.

[justinkambic]

the header is way too high for me, is there something missing?

This is quite strange, I have screenshots I saved while developing this that do not show the header doing this, but now I am seeing it as well. I will fix it 👍

this should be done for all flows, are you planning to roll it out to the others on separate PRs? Mostly asking as it might make things easier to not have a special case for it.

My plan was to go ahead and merge this and then do a separate refactor to update it. I am fine with doing all of the work on this branch though, if that's preferred. As I understand it, we need a separate codepath for this header regardless as we are overriding the existing default header for all of these cases. The way the app is structured, the header was previously independent of the routes and thus we need to override it for routes like /kubernetes that require a specialized header.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 3a0c019
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-188340-3a0c0197db74
• Observability Deployment

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
observabilityOnboarding	225	228	+3

Async chunks

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

id	before	after	diff
observabilityOnboarding	243.5KB	246.3KB	+2.8KB

History

• 💛 Build #223284 was flaky 3a9ee5f
• 💛 Build #222938 was flaky ac14b5f

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

cc @justinkambic