[Look&Feel] Refactor to use semantic headers for page, modal & flyout #7192

zhongnansu · 2024-07-08T19:50:18Z

Description

Refactor to use semantic headers for page, modal & flyout

Issues Resolved

Screenshot

Testing the changes

Changelog

refactor: [Look&Feel] Refactor to use semantic headers for page, modal & flyout

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 · 2024-07-08T19:50:55Z

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

codecov · 2024-07-08T20:07:58Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 67.55%. Comparing base (87627af) to head (829e83c).
Report is 339 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7192   +/-   ##
=======================================
  Coverage   67.55%   67.55%           
=======================================
  Files        3469     3469           
  Lines       68479    68479           
  Branches    11130    11130           
=======================================
  Hits        46264    46264           
  Misses      19512    19512           
  Partials     2703     2703

Flag	Coverage Δ
Linux_1	`33.13% <ø> (ø)`
Linux_2	`55.26% <ø> (ø)`
Linux_3	`45.30% <ø> (ø)`
Linux_4	`34.71% <ø> (ø)`
Windows_1	`33.15% <ø> (ø)`
Windows_2	`55.21% <ø> (ø)`
Windows_3	`45.32% <ø> (ø)`
Windows_4	`34.71% <ø> (ø)`

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.

github-actions · 2024-07-08T21:42:23Z

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

virajsanghvi

Clarifications on guidance after going through these:

Let's only make changes to page content headers or modal/flyout headers - other h1/h2 tags, let's ignore as they may not be being used correctly or are there for accessibility purposes.
Let's swap out EuiTitle for EuiText size='s' (or wrap when not present)
If its using a small or xs EuiTitle, let's probably not change as they're intentionally small.

Also, I think you will want to search for all modals/flyouts to adjust their headers. I don't think they all use header tags today so may not be coming up in your search.

src/plugins/dashboard/public/application/utils/get_no_items_message.tsx

src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx

src/plugins/inspector/public/ui/inspector_panel.tsx

src/plugins/opensearch_dashboards_overview/public/components/add_data/add_data.tsx

src/plugins/dashboard/public/application/utils/get_no_items_message.tsx

src/plugins/vis_default_editor/public/components/sidebar/sidebar_title.tsx

src/plugins/vis_type_markdown/public/markdown_options.tsx

src/plugins/visualizations/public/wizard/type_selection/type_selection.tsx

virajsanghvi · 2024-07-09T17:07:28Z

src/plugins/visualizations/public/wizard/type_selection/vis_help_text.tsx

@@ -42,7 +42,7 @@ interface VisHelpTextProps {
 export const VisHelpText = ({ name, title, description, highlightMsg }: VisHelpTextProps) => {
  return (
    <React.Fragment>
-      <EuiTitle size="s">
+      <EuiTitle size="m">


Is this in a visualization? If so, let's not change - given its intentionally small, not sure if we should change either way. If you can point of screenshot, would help me give feedback

this is a header in the select vis type modal, but it's not the major header. I agree we can leave it as small.

virajsanghvi · 2024-07-09T17:08:50Z

src/plugins/visualize/public/application/utils/get_table_columns.tsx

+        <h1 id="visualizeListingHeading">
+          <FormattedMessage
+            id="visualize.listing.createNew.title"
+            defaultMessage="Create your first visualization"


Let's leave this as is because its in the visualization

this is the page content header for create visualization. Given the requirement, I think we should wrap it with EuiText

zhongnansu · 2024-07-09T20:22:34Z

Clarifications on guidance after going through these:

Let's only make changes to page content headers or modal/flyout headers - other h1/h2 tags, let's ignore as they may not be being used correctly or are there for accessibility purposes.

Let's swap out EuiTitle for EuiText size='s' (or wrap when not present)

If its using a small or xs EuiTitle, let's probably not change as they're intentionally small.

Also, I think you will want to search for all modals/flyouts to adjust their headers. I don't think they all use header tags today so may not be coming up in your search.

Updated the PR to use EuiText accordingly and refactored missing modals/flyouts to use semantic headers.

virajsanghvi · 2024-07-09T23:10:54Z

Given this isn't a flyout but a pane, let's not make this change:

Signed-off-by: Zhongnan Su <[email protected]>

zhongnansu · 2024-07-10T00:04:32Z

Given this isn't a flyout but a pane, let's not make this change:

@virajsanghvi This is actually being reverted and will remain "xs". I will correct the screenshot

opensearch-trigger-bot · 2024-07-10T22:07:58Z

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-7192-to-2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 96fb9d629e6539db4dacd922df3fff6809fdb407
# Push it to GitHub
git push --set-upstream origin backport/backport-7192-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-7192-to-2.x.

…#7192) * [Look&Feel] refactor to use semantic header for page, modal and flygout Signed-off-by: Zhongnan Su <[email protected]> * Changeset file for PR #7192 created/updated --------- Signed-off-by: Zhongnan Su <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 96fb9d6) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

…#7192) (#7223) * [Look&Feel] refactor to use semantic header for page, modal and flygout * Changeset file for PR #7192 created/updated --------- (cherry picked from commit 96fb9d6) Signed-off-by: Zhongnan Su <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

github-actions bot added the distinguished-contributor label Jul 8, 2024

github-actions bot added the failed changeset label Jul 8, 2024

zhongnansu force-pushed the lookfeel-semantic-header branch from ce3d66d to 3d64d00 Compare July 8, 2024 21:56

zhongnansu marked this pull request as ready for review July 8, 2024 21:56

zhongnansu requested review from ananzh, kavilla, AMoo-Miki, ashwin-pc, joshuarrrr, abbyhu2000, zengyan-amazon, manasvinibs, ZilongX, Flyingliuhub, curq, bandinib-amzn, SuZhou-Joe, ruanyl, BionIT, xinruiba, zhyuanqi, mengweieric and LDrago27 as code owners July 8, 2024 21:56

opensearch-changeset-bot bot added a commit to zhongnansu/OpenSearch-Dashboards that referenced this pull request Jul 8, 2024

Changeset file for PR opensearch-project#7192 created/updated

05954a4

github-actions bot removed the failed changeset label Jul 8, 2024

zhongnansu changed the title ~~[Look&Feel] Update semantic header to use correct size~~ [Look&Feel] Update to use semantic headers Jul 8, 2024

opensearch-changeset-bot bot added a commit to zhongnansu/OpenSearch-Dashboards that referenced this pull request Jul 8, 2024

Changeset file for PR opensearch-project#7192 created/updated

8cedb84

virajsanghvi reviewed Jul 9, 2024

View reviewed changes

zhongnansu force-pushed the lookfeel-semantic-header branch from 8cedb84 to 60d41e4 Compare July 9, 2024 19:37

zhongnansu changed the title ~~[Look&Feel] Update to use semantic headers~~ [Look&Feel] Refactor to use semantic headers for page, modal & flyout Jul 9, 2024

opensearch-changeset-bot bot added a commit to zhongnansu/OpenSearch-Dashboards that referenced this pull request Jul 9, 2024

Changeset file for PR opensearch-project#7192 created/updated

a3f7c80

zhongnansu requested review from virajsanghvi July 9, 2024 20:32

zhongnansu force-pushed the lookfeel-semantic-header branch from a3f7c80 to cc9dc8b Compare July 9, 2024 23:58

[Look&Feel] refactor to use semantic header for page, modal and flygout

1de9642

Signed-off-by: Zhongnan Su <[email protected]>

zhongnansu force-pushed the lookfeel-semantic-header branch from cc9dc8b to 1de9642 Compare July 10, 2024 00:03

Changeset file for PR opensearch-project#7192 created/updated

829e83c

virajsanghvi approved these changes Jul 10, 2024

View reviewed changes

virajsanghvi added the look & feel Look and Feel Improvements label Jul 10, 2024

zhongnansu added ux / ui Improvements or additions to user experience, flows, components, UI elements backport 2.x v2.16.0 labels Jul 10, 2024

virajsanghvi approved these changes Jul 10, 2024

View reviewed changes

BionIT approved these changes Jul 10, 2024

View reviewed changes

zhongnansu merged commit 96fb9d6 into opensearch-project:main Jul 10, 2024
75 checks passed

opensearch-trigger-bot bot added the failed backport label Jul 10, 2024

zhongnansu added backport 2.x and removed backport 2.x failed backport labels Jul 11, 2024

opensearch-trigger-bot bot mentioned this pull request Jul 11, 2024

[Backport 2.x] [Look&Feel] Refactor to use semantic headers for page, modal & flyout #7223

Merged

AMoo-Miki added the in-next label Sep 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Look&Feel] Refactor to use semantic headers for page, modal & flyout #7192

[Look&Feel] Refactor to use semantic headers for page, modal & flyout #7192

zhongnansu commented Jul 8, 2024 •

edited

Loading

github-actions bot commented Jul 8, 2024

codecov bot commented Jul 8, 2024 •

edited

Loading

github-actions bot commented Jul 8, 2024

virajsanghvi left a comment

virajsanghvi Jul 9, 2024

zhongnansu Jul 9, 2024

virajsanghvi Jul 9, 2024

zhongnansu Jul 9, 2024

zhongnansu commented Jul 9, 2024

virajsanghvi commented Jul 9, 2024

zhongnansu commented Jul 10, 2024

opensearch-trigger-bot bot commented Jul 10, 2024

[Look&Feel] Refactor to use semantic headers for page, modal & flyout #7192

[Look&Feel] Refactor to use semantic headers for page, modal & flyout #7192

Conversation

zhongnansu commented Jul 8, 2024 • edited Loading

Description

Issues Resolved

Screenshot

Testing the changes

Changelog

Check List

github-actions bot commented Jul 8, 2024

❌ Empty Changelog Section

codecov bot commented Jul 8, 2024 • edited Loading

Codecov Report

github-actions bot commented Jul 8, 2024

❌ Empty Changelog Section

virajsanghvi left a comment

Choose a reason for hiding this comment

virajsanghvi Jul 9, 2024

Choose a reason for hiding this comment

zhongnansu Jul 9, 2024

Choose a reason for hiding this comment

virajsanghvi Jul 9, 2024

Choose a reason for hiding this comment

zhongnansu Jul 9, 2024

Choose a reason for hiding this comment

zhongnansu commented Jul 9, 2024

virajsanghvi commented Jul 9, 2024

zhongnansu commented Jul 10, 2024

opensearch-trigger-bot bot commented Jul 10, 2024

zhongnansu commented Jul 8, 2024 •

edited

Loading

codecov bot commented Jul 8, 2024 •

edited

Loading