[Look&Feel] Use semantic headers for page, modal, & flyouts across the board #7616

danieldong51 · 2024-08-02T20:22:37Z

Description

This PR updates headers to be within small OuiText in pages, modals, and flyouts across OSD experiences.

Screenshot

Index Patterns

Scope	Before (Inspect)	After (Inspect)	After
Create
Page
Table

Data Sources

Scope	Before (Inspect)	After (Inspect)	After
Accelerate
Connection
Connection: Create
Create Data Source
Direct
Home
S3
Prometheus: Configure
Prometheus: Review

Saved Objects

Scope	Before (Inspect)	After (Inspect)	After
Import
Export
Flyout

Other

Scope	Before (Inspect)	After (Inspect)	After
Overview
Settings
Sample Data

Changelog

Refactor: [Look&Feel] Use semantic headers for page, modal, & flyouts across the board

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

Signed-off-by: Dan Dong <[email protected]>

github-actions · 2024-08-02T20:23:09Z

❌ 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.

github-actions · 2024-08-02T20:23:37Z

❌ 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-08-02T20:39:37Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 63.66%. Comparing base (352d2e9) to head (56a91ee).
Report is 225 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7616   +/-   ##
=======================================
  Coverage   63.65%   63.66%           
=======================================
  Files        3632     3632           
  Lines       80060    80060           
  Branches    12683    12683           
=======================================
+ Hits        50965    50969    +4     
+ Misses      25990    25986    -4     
  Partials     3105     3105

Flag	Coverage Δ
Linux_1	`30.55% <ø> (ø)`
Linux_2	`55.58% <ø> (ø)`
Linux_3	`40.56% <ø> (ø)`
Linux_4	`31.30% <ø> (ø)`
Windows_1	`30.57% <ø> (ø)`
Windows_2	`55.53% <ø> (ø)`
Windows_3	`40.57% <ø> (+0.01%)`	⬆️
Windows_4	`31.30% <ø> (ø)`

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-08-02T23:29:09Z

❌ 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.

github-actions · 2024-08-02T23:30:05Z

❌ 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.

Signed-off-by: Dan Dong <[email protected]>

github-actions · 2024-08-03T00:16:20Z

❌ 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.

Signed-off-by: Dan Dong <[email protected]>

virajsanghvi

Think all my comments were basically validating that increasing sizes were because they were page headers but we weren't using h1s.

Also, if this is a page header, why is it an h2?

virajsanghvi · 2024-08-05T20:57:44Z

..._management/public/components/data_source_creation_panel/create_data_source_panel_header.tsx

-        <EuiTitle>
-          <h2>
+        <EuiText size="s">
+          <h1>


why did this change to an h1? is this the title of the page?

Yes, it's the create data source page :

virajsanghvi · 2024-08-05T20:58:18Z

.../data_source_management/public/components/data_source_home_panel/data_source_page_header.tsx

-        <EuiTitle>
-          <h2>
+        <EuiText size="s">
+          <h1>


same for this one (assuming its just the page title)

Yeah, also the title of Data Sources page

virajsanghvi · 2024-08-05T21:34:12Z

...nents/direct_query_data_source_configuration/prometheus/configure_prometheus_data_source.tsx

-          <h4>{`Configure Prometheus data source`}</h4>
-        </EuiTitle>
+        <EuiText size="s">
+          <h1>{`Configure Prometheus data source`}</h1>


is this a page title?

It's the title of this page for creating a Prometheus data source:

Signed-off-by: Dan Dong <[email protected]>

danieldong51 · 2024-08-05T21:58:31Z

Think all my comments were basically validating that increasing sizes were because they were page headers but we weren't using h1s.

Also, if this is a page header, why is it an h2?

My bad, that was the old screenshot before I started updating the header tags. Updated with the correct screenshot now:

Signed-off-by: Dan Dong <[email protected]>

…e board (#7616) --------- Signed-off-by: Dan Dong <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 873c79e) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

…e board (#7616) (#7665) --------- (cherry picked from commit 873c79e) Signed-off-by: Dan Dong <[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>

Updated semantic headers

b20f2ee

Signed-off-by: Dan Dong <[email protected]>

github-actions bot added the valued-contributor label Aug 2, 2024

github-actions bot added the failed changeset label Aug 2, 2024

Updated semantic header for data sources: create connection

b192a08

Signed-off-by: Dan Dong <[email protected]>

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

d319774

github-actions bot removed the failed changeset label Aug 3, 2024

danieldong51 added 3 commits August 5, 2024 09:36

Updated semantic headers

9ad2c34

Signed-off-by: Dan Dong <[email protected]>

Fixed data_source_page_header.test.tsx

87a17e8

Signed-off-by: Dan Dong <[email protected]>

Updated snapshot testing

11933d1

Signed-off-by: Dan Dong <[email protected]>

danieldong51 marked this pull request as ready for review August 5, 2024 19:12

danieldong51 requested review from ananzh, kavilla, AMoo-Miki, ashwin-pc, joshuarrrr, abbyhu2000, zengyan-amazon, zhongnansu, manasvinibs, ZilongX, Flyingliuhub, curq, bandinib-amzn and SuZhou-Joe as code owners August 5, 2024 19:12

danieldong51 requested review from ruanyl, BionIT, xinruiba, zhyuanqi, mengweieric, LDrago27, virajsanghvi, sejli and joshuali925 as code owners August 5, 2024 19:12

virajsanghvi reviewed Aug 5, 2024

View reviewed changes

Updated S3 page header

a520c29

Signed-off-by: Dan Dong <[email protected]>

Updated console headers

56a91ee

Signed-off-by: Dan Dong <[email protected]>

zhongnansu approved these changes Aug 6, 2024

View reviewed changes

virajsanghvi added backport 2.x v2.17.0 look & feel Look and Feel Improvements labels Aug 8, 2024

virajsanghvi approved these changes Aug 8, 2024

View reviewed changes

virajsanghvi merged commit 873c79e into opensearch-project:main Aug 8, 2024
73 checks passed

opensearch-trigger-bot bot mentioned this pull request Aug 8, 2024

[Backport 2.x] [Look&Feel] Use semantic headers for page, modal, & flyouts across the board #7665

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] Use semantic headers for page, modal, & flyouts across the board #7616

[Look&Feel] Use semantic headers for page, modal, & flyouts across the board #7616

danieldong51 commented Aug 2, 2024 •

edited

Loading

github-actions bot commented Aug 2, 2024

github-actions bot commented Aug 2, 2024

codecov bot commented Aug 2, 2024 •

edited

Loading

github-actions bot commented Aug 2, 2024

github-actions bot commented Aug 2, 2024

github-actions bot commented Aug 3, 2024

virajsanghvi left a comment

virajsanghvi Aug 5, 2024

danieldong51 Aug 5, 2024

virajsanghvi Aug 5, 2024

danieldong51 Aug 5, 2024

virajsanghvi Aug 5, 2024

danieldong51 Aug 5, 2024

danieldong51 commented Aug 5, 2024

[Look&Feel] Use semantic headers for page, modal, & flyouts across the board #7616

[Look&Feel] Use semantic headers for page, modal, & flyouts across the board #7616

Conversation

danieldong51 commented Aug 2, 2024 • edited Loading

Description

Screenshot

Index Patterns

Data Sources

Saved Objects

Other

Changelog

Check List

github-actions bot commented Aug 2, 2024

❌ Empty Changelog Section

github-actions bot commented Aug 2, 2024

❌ Empty Changelog Section

codecov bot commented Aug 2, 2024 • edited Loading

Codecov Report

github-actions bot commented Aug 2, 2024

❌ Empty Changelog Section

github-actions bot commented Aug 2, 2024

❌ Empty Changelog Section

github-actions bot commented Aug 3, 2024

❌ Empty Changelog Section

virajsanghvi left a comment

Choose a reason for hiding this comment

virajsanghvi Aug 5, 2024

Choose a reason for hiding this comment

danieldong51 Aug 5, 2024

Choose a reason for hiding this comment

virajsanghvi Aug 5, 2024

Choose a reason for hiding this comment

danieldong51 Aug 5, 2024

Choose a reason for hiding this comment

virajsanghvi Aug 5, 2024

Choose a reason for hiding this comment

danieldong51 Aug 5, 2024

Choose a reason for hiding this comment

danieldong51 commented Aug 5, 2024

danieldong51 commented Aug 2, 2024 •

edited

Loading

codecov bot commented Aug 2, 2024 •

edited

Loading