Refactor: update page header for settings, objects and index pattern page

[raintygao]

Description

update page header for settings, objects and index pattern page

Screenshot

Settings

before

after

Assets

before

after

Index patterns

before

after

before

after

before

after

before

after

before

after

Testing the changes

Go to settings page, enable/disable useNewHomePage and visit settings, objects and index pattern page to test header.

Changelog

• refactor: update page header for settings, objects and index pattern page

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

[codecov]

Codecov Report

Attention: Patch coverage is 74.19355% with 8 lines in your changes missing coverage. Please review.

Project coverage is 63.83%. Comparing base (ae7cfa6) to head (1a3ba3c).
Report is 189 commits behind head on main.

Files with missing lines	Patch %	Lines
...dex_pattern_wizard/create_index_pattern_wizard.tsx	66.66%	2 Missing and 2 partials ⚠️
...gement/public/management_section/mount_section.tsx	0.00%	2 Missing ⚠️
...c/plugins/index_pattern_management/public/mocks.ts	0.00%	1 Missing ⚠️
...gement_section/objects_table/components/header.tsx	83.33%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7744   +/-   ##
=======================================
  Coverage   63.82%   63.83%           
=======================================
  Files        3650     3652    +2     
  Lines       80966    81012   +46     
  Branches    12894    12904   +10     
=======================================
+ Hits        51673    51710   +37     
- Misses      26126    26131    +5     
- Partials     3167     3171    +4     

Flag	Coverage Δ
Linux_1	30.07% <0.00%> (+0.03%)	⬆️
Linux_2	55.89% <ø> (+0.03%)	⬆️
Linux_3	40.44% <35.29%> (+0.02%)	⬆️
Linux_4	31.32% <68.00%> (+0.03%)	⬆️
Windows_1	30.08% <0.00%> (+0.03%)	⬆️
Windows_2	55.85% <ø> (+0.03%)	⬆️
Windows_3	40.44% <35.29%> (+0.03%)	⬆️
Windows_4	31.32% <68.00%> (+0.03%)	⬆️

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.

[SuZhou-Joe]

Suggested change

	{showTagsSection && renderBadges()}
	{renderDescription()}
	{conflictedFields.length > 0 && (
	<>
	<EuiSpacer />
	<EuiCallOut title={mappingConflictHeader} color="warning" iconType="alert">
	<p>{mappingConflictLabel}</p>
	</EuiCallOut>
	</>
	)}
	<Tabs
	indexPattern={indexPattern}
	saveIndexPattern={data.indexPatterns.updateSavedObject.bind(data.indexPatterns)}
	fields={fields}
	history={history}
	location={location}
	/>
	const content = (
	<>
	{showTagsSection && renderBadges()}
	{renderDescription()}
	{conflictedFields.length > 0 && (
	<>
	<EuiSpacer />
	<EuiCallOut title={mappingConflictHeader} color="warning" iconType="alert">
	<p>{mappingConflictLabel}</p>
	</EuiCallOut>
	</>
	)}
	<Tabs
	indexPattern={indexPattern}
	saveIndexPattern={data.indexPatterns.updateSavedObject.bind(data.indexPatterns)}
	fields={fields}
	history={history}
	location={location}
	/>
	</>
	)

Nit: What about we change it like this? the content part should be the same no matter the toggle is on or off.

[raintygao]

Yes, i tried to extract but fount it may be hard to maintain because there are three different spacers between two contents.

[SuZhou-Joe]

Perhaps you can move the spacer into the renderDescription and renderBadges method. Then in that case the content will be exactly the same.

[raintygao]

Yes, but the spacer between Tabs and EuiCallOut maybe hard to contain.

[SuZhou-Joe]

LGTM, thanks for the amazing changes. Now it looks consistent across multiple pages and steps.

[opensearch-trigger-bot]

The backport to 2.x failed:

The process '/usr/bin/git' failed with exit code 128

To backport manually, run these commands in your terminal:

# Navigate to the root of your repository
cd $(git rev-parse --show-toplevel)
# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add ../.worktrees/OpenSearch-Dashboards/backport-2.x 2.x
# Navigate to the new working tree
pushd ../.worktrees/OpenSearch-Dashboards/backport-2.x
# Create a new branch
git switch --create backport/backport-7744-to-2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 e490b6b3e458a19daa849d529f80d8a2f588f4eb
# Push it to GitHub
git push --set-upstream origin backport/backport-7744-to-2.x
# Go back to the original working tree
popd
# Delete the working tree
git worktree remove ../.worktrees/OpenSearch-Dashboards/backport-2.x

Then, create a pull request where the base branch is 2.x and the compare/head branch is backport/backport-7744-to-2.x.

[opensearch-trigger-bot]

The backport to 2.x failed:

The process '/usr/bin/git' failed with exit code 128

To backport manually, run these commands in your terminal:

# Navigate to the root of your repository
cd $(git rev-parse --show-toplevel)
# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add ../.worktrees/OpenSearch-Dashboards/backport-2.x 2.x
# Navigate to the new working tree
pushd ../.worktrees/OpenSearch-Dashboards/backport-2.x
# Create a new branch
git switch --create backport/backport-7744-to-2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 e490b6b3e458a19daa849d529f80d8a2f588f4eb
# Push it to GitHub
git push --set-upstream origin backport/backport-7744-to-2.x
# Go back to the original working tree
popd
# Delete the working tree
git worktree remove ../.worktrees/OpenSearch-Dashboards/backport-2.x

Then, create a pull request where the base branch is 2.x and the compare/head branch is backport/backport-7744-to-2.x.