[Page Header]Implement new page header for admin data sources page

[weiwang118]

Description

Implement new page header and Look&Feel UI changes for Admin->Data Sources page.

• In data sources home page, change connection type tabs to button groups, and mount it on the top controls.
• Mount create data source button and other action buttons on the top.
• Remove duplicate head titles.
• For connect s3 and connect prometheus page, change to one step page instead of previous two steps(Configure/Review) pages.
• Make search bar, button, title to use small or compressed property.

Issues Resolved

Screenshot

New Page

Testing the changes

Changelog

• skip

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[github-actions]

❌ Changelog Entry Missing Hyphen

Changelog entries must begin with a hyphen (-).

[github-actions]

❌ Changelog Entry Missing Hyphen

Changelog entries must begin with a hyphen (-).

[github-actions]

❌ Invalid Prefix For Manual Changeset Creation

Invalid description prefix. Found "refactor". Only "skip" entry option is permitted for manual commit of changeset files.

If you were trying to skip the changelog entry, please use the "skip" entry option in the ##Changelog section of your PR description.

[codecov]

Codecov Report

Attention: Patch coverage is 58.97436% with 16 lines in your changes missing coverage. Please review.

Project coverage is 64.17%. Comparing base (452b65d) to head (32b0f5f).
Report is 12 commits behind head on main.

Files	Patch %	Lines
.../data_source_home_panel/data_source_home_panel.tsx	50.00%	3 Missing and 2 partials ⚠️
...source_management/public/components/breadcrumbs.ts	0.00%	0 Missing and 3 partials ⚠️
...tion/amazon_s3/configure_amazon_s3_data_source.tsx	50.00%	0 Missing and 3 partials ⚠️
...components/create_form/create_data_source_form.tsx	50.00%	0 Missing and 1 partial ⚠️
...source_creation_panel/create_data_source_panel.tsx	66.66%	0 Missing and 1 partial ⚠️
...figuration/configure_direct_query_data_sources.tsx	66.66%	1 Missing ⚠️
...on/prometheus/configure_prometheus_data_source.tsx	66.66%	0 Missing and 1 partial ⚠️
...ents/edit_data_source/components/header/header.tsx	75.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7833      +/-   ##
==========================================
+ Coverage   63.83%   64.17%   +0.34%     
==========================================
  Files        3661     3659       -2     
  Lines       81347    80811     -536     
  Branches    12978    12879      -99     
==========================================
- Hits        51926    51862      -64     
+ Misses      26235    25763     -472     
  Partials     3186     3186              

Flag	Coverage Δ
Linux_1	30.30% <ø> (+0.15%)	⬆️
Linux_2	55.89% <ø> (+0.02%)	⬆️
Linux_3	40.69% <58.97%> (+0.30%)	⬆️
Linux_4	31.46% <ø> (+0.12%)	⬆️
Windows_1	30.32% <ø> (+0.15%)	⬆️
Windows_2	55.85% <ø> (+0.02%)	⬆️
Windows_3	40.69% <58.97%> (+0.30%)	⬆️
Windows_4	31.46% <ø> (+0.12%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kamingleung]

@weiwang118 Thank you for your updates, a few follow-up items:

1. For the connection type tabs, can we use the compressed button groups like in the mockups?

2. The top padding on the container should be the same length as the left, right padding.
   

3. For the Connect OpenSearch Cluster page, should we rename the action button to "Connect to OpenSearch cluster"? This will make it consistent with other create pages.
   

cc: @kgcreative @virajsanghvi

[weiwang118]

Already updated the pr to address your comments. Thanks!!! @kamingleung

[zhongnansu]

left 1 comment. Could you also check the failed CIs?

[zhongnansu]

Should this be h2?

[weiwang118]

Hi, we intentionally use h3 to better align with the other datasources pages. And also we don't want it too big since it's just a section title. For the failed test, it's a flaky test that doesn't relate to my code change.

Summary of all failing tests
 FAIL  src/plugins/console/public/application/components/import_flyout.test.tsx
  ● ImportFlyout Component › should handle import process with default import mode

[zhongnansu]

This is by requirements of fit and finish. It applies to all plugins. If you think there are other pages that violates this, let's fix those too. I'll share with you the fit and finish guidance offline

[weiwang118]

Change section title to h2 in new commit. kindly request approval. Thanks!!!

[zhongnansu]

Approve, assuming the CI can pass, be sure to also check the codecov CI to make sure we don't decrease the code coverage.

[BionIT]

Looks like failed coverage check