[Serverless] Show project name in the header

[Dosant]

Important

I plan to merge this as an intermediate state. The next step is changing the breadcrumbs component and make the project name as part of it #166593

Summary

close #166182
Shows project name in the Kibana header.
To test locally add to the config/serverless.yml:

xpack.cloud.serverless.project_id: "random"
xpack.cloud.serverless.project_name: "My Search Project"

I hardcoded 320px max-width to enable truncation for longer titles:

In general, the header is not very flexible and has issues on smaller screen, but this needs to be fixed separately.

The link still leads to the /projects page of the cloud UI

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[tsullivan]

LGTM

Reviewed the code changes and found them to be straightforward, not complex.

There's a TODO comment about the max-width, I think this is for the Product/Design groups to discuss.

[Dosant]

@elasticmachine merge upstream

[Dosant]

@elasticmachine merge upstream

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 002f33d

Failed CI Steps

• FTR Configs #19

Test Failures

• [job] [logs] FTR Configs #19 / serverless search UI navigation navigate search sidenav & breadcrumbs

Metrics [docs]

Page load bundle

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

id	before	after	diff
core	365.4KB	365.8KB	+352.0B
serverless	5.4KB	5.5KB	+81.0B
total			+433.0B

History

• 💔 Build #159445 failed 579be42
• 💔 Build #159083 failed b649dfb
• 💔 Build #159055 failed c935337

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