opensearch-project / dashboards-observability

Visualize and explore your logs, traces and metrics data in OpenSearch Dashboards
https://opensearch.org/docs/latest/observability-plugin/index/
Apache License 2.0
16 stars 55 forks source link

[Look&Feel] Notebooks Density and Consistency Improvements #2073

Closed danieldong51 closed 2 months ago

danieldong51 commented 3 months ago

Description

This PR applies the Look & Feel density and consistency changes to Notebooks:

  1. Use small context menus
  2. Use small tabs
  3. Standardize paragraph size (15.75px next theme / 14px V7 theme)
  4. Use semantic headers (H1s on main pages, H2s on modals/flyouts)
  5. Modal/Flyout Typography
  6. Buttons for actions, only using primary buttons for primary calls to action
  7. Use small padding on popovers

Screenshots

Small context Menu

Scope Before After
Notebook: Header Reporting Notebook Header Reporting Before Notebook Header Reporting Post
Notebook: Header Paragraph Notebook Header Paragraph Before Notebook Header Paragraph Post
Notebook: Header Notebook Notebook Header Notebook HeaderActions Before Notebook Header Notebook HeaderActions Post
Notebook: Add Notebook Add Paragraph Before Notebook Add Paragraph Post
Notebook: Paragraph Notebook Paragraph Options Before Notebook Paragraph Options Post
Notebook: Listing Notebooks Listing Before Notebooks Listing Post

Paragraph size

Scope Before After
Notebooks: Empty overview Notebooks Empty Before Notebooks Empty Post
Notebooks: Empty notebook Notebook Empty Before Notebook Empty Post
Notebooks: Timestamp Notebook Output Timestamp Before Notebook Output Timestamp Post
Notebooks: Created Notebook Created Before Notebook Created Post
Notebooks: Quickstart Notebook OutputMD Before Notebook OutputMD Post

Semantic Headers

Scope Before After
Notebooks: Overview Notebooks Listing Before Notebooks Listing Post
Notebooks: Title Notebook before Notebook post

Modals

Scope Before After
Notebooks: Browse Vis Notebooks Browse Before Notebooks Browse Post
Notebooks: Duplicate Notebooks Custom Input Modal Before Notebooks Custom Input Modal Post
Notebooks: Delete Delete Notebook Before Delete Notebook Post
Delete All Paragraphs Delete All Paragraphs Before Delete All Paragraphs Post
Delete Header Delete NotebookHeader Before Delete NotebookHeader Post
Sample Sample Notebooks Add Before 2 Sample Notebooks Add Post 2

Buttons

Scope Before After
Refresh Notebook Refresh Before Notebook Refresh Post

Check List

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license. For more information on following Developer Certificate of Origin and signing off your commits, please check here.

codecov[bot] commented 3 months ago

Codecov Report

Attention: Patch coverage is 83.33333% with 1 line in your changes missing coverage. Please review.

Project coverage is 54.75%. Comparing base (c3ab50f) to head (1b698e9). Report is 56 commits behind head on main.

Files Patch % Lines
...oks/components/paragraph_components/para_input.tsx 0.00% 1 Missing :warning:
Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #2073 +/- ## ========================================== - Coverage 57.85% 54.75% -3.10% ========================================== Files 372 394 +22 Lines 14081 15244 +1163 Branches 3712 4124 +412 ========================================== + Hits 8146 8347 +201 - Misses 5871 6816 +945 - Partials 64 81 +17 ``` | [Flag](https://app.codecov.io/gh/opensearch-project/dashboards-observability/pull/2073/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opensearch-project) | Coverage Δ | | |---|---|---| | [dashboards-observability](https://app.codecov.io/gh/opensearch-project/dashboards-observability/pull/2073/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opensearch-project) | `54.75% <83.33%> (-3.10%)` | :arrow_down: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=opensearch-project#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.