Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat (home): Add new theme dashboard screenshots #4906

Merged

Conversation

joshuarrrr
Copy link
Member

Description

  • Add next theme variant screenshots of sample dashboards with _new suffix
  • Add chromed screenshots of flights dashboard to use as the images in the new theme modal and replace placeholders
  • Tweak gutter size in new theme modal
  • Add hasNewThemeImages optional boolean to sample dataset registry interface
  • Update sample data cards image path logic to fetch themed images if available via hasNewThemeImages prop

The approach to the sample dataset registry was a bit lazy; but I didn't want to introduce any more props than necessary, while also not breaking any other sample dataset registrations that won't have themed variants.

Issues Resolved

Fixes #4673
Completes TODOs from #4715

Screenshot

Screenshot 2023-09-01 at 17-28-22 Home - OpenSearch Dashboards
Screenshot 2023-09-01 at 17-29-11 Home - OpenSearch Dashboards
Screenshot 2023-09-01 at 17-29-37 Home - OpenSearch Dashboards
Screenshot 2023-09-01 at 17-30-04 Home - OpenSearch Dashboards
Screenshot 2023-09-01 at 17-31-17 Home - OpenSearch Dashboards
Screenshot 2023-09-01 at 17-31-39 Home - OpenSearch Dashboards

Testing the changes

Check List

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

- Add `next` theme variant screenshots of sample dashboards with `_new` suffix
- Add chromed screenshots of flights dashboard to use as the images in the new theme modal and replace placeholders
- Tweak gutter size in new theme modal
- Add `hasNewThemeImages` optional boolean to sample dataset registry interface
- Update sample data cards image path logic to fetch themed images if available via `hasNewThemeImages` prop

Signed-off-by: Josh Romero <[email protected]>
Signed-off-by: Josh Romero <[email protected]>
@codecov
Copy link

codecov bot commented Sep 2, 2023

Codecov Report

Merging #4906 (3c794f2) into main (c886b00) will decrease coverage by 0.01%.
Report is 4 commits behind head on main.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main    #4906      +/-   ##
==========================================
- Coverage   66.39%   66.39%   -0.01%     
==========================================
  Files        3397     3397              
  Lines       64805    64807       +2     
  Branches    10360    10361       +1     
==========================================
- Hits        43028    43027       -1     
- Misses      19217    19225       +8     
+ Partials     2560     2555       -5     
Flag Coverage Δ
Linux_1 34.84% <ø> (-0.01%) ⬇️
Linux_2 55.15% <ø> (ø)
Linux_3 44.24% <ø> (ø)
Linux_4 34.92% <ø> (-0.01%) ⬇️
Windows_1 34.86% <ø> (-0.01%) ⬇️
Windows_2 55.12% <ø> (ø)
Windows_3 44.24% <ø> (ø)
Windows_4 34.92% <ø> (-0.01%) ⬇️

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

Files Changed Coverage Δ
.../public/application/components/new_theme_modal.tsx 33.33% <ø> (ø)
.../services/sample_data/data_sets/ecommerce/index.ts 75.00% <ø> (ø)
...er/services/sample_data/data_sets/flights/index.ts 100.00% <ø> (ø)
...erver/services/sample_data/data_sets/logs/index.ts 75.00% <ø> (ø)
...ns/home/server/services/sample_data/routes/list.ts 59.45% <ø> (ø)

... and 8 files with indirect coverage changes

kavilla
kavilla previously approved these changes Sep 5, 2023
Copy link
Member

@kavilla kavilla left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice. Thanks!

@AMoo-Miki
Copy link
Collaborator

Josh thanks for this. I minified the updated images.

@joshuarrrr
Copy link
Member Author

Josh thanks for this. I minified the updated images.

Can you document the procedure for doing this?

@AMoo-Miki
Copy link
Collaborator

AMoo-Miki commented Sep 5, 2023

Josh thanks for this. I minified the updated images.

Can you document the procedure for doing this?

I usually use pngquant with pngcrush. However, these were made with TinyPNG.

@kgcreative
Copy link
Member

Looks so good!

@joshuarrrr joshuarrrr merged commit f9d3c34 into opensearch-project:main Sep 5, 2023
@joshuarrrr joshuarrrr deleted the feat/add-next-theme-screenshots branch September 5, 2023 20:41
opensearch-trigger-bot bot pushed a commit that referenced this pull request Sep 5, 2023
* Feat (home): Add new theme dashboard screenshots

- Add `next` theme variant screenshots of sample dashboards with `_new` suffix
- Add chromed screenshots of flights dashboard to use as the images in the new theme modal and replace placeholders
- Tweak gutter size in new theme modal
- Add `hasNewThemeImages` optional boolean to sample dataset registry interface
- Update sample data cards image path logic to fetch themed images if available via `hasNewThemeImages` prop

Signed-off-by: Josh Romero <[email protected]>

* update changelog

Signed-off-by: Josh Romero <[email protected]>

* Minified new theme dashboard screenshots

Signed-off-by: Miki <[email protected]>

---------

Signed-off-by: Josh Romero <[email protected]>
Signed-off-by: Miki <[email protected]>
Co-authored-by: Miki <[email protected]>
(cherry picked from commit f9d3c34)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md
ashwin-pc pushed a commit that referenced this pull request Sep 5, 2023
* Feat (home): Add new theme dashboard screenshots

- Add `next` theme variant screenshots of sample dashboards with `_new` suffix
- Add chromed screenshots of flights dashboard to use as the images in the new theme modal and replace placeholders
- Tweak gutter size in new theme modal
- Add `hasNewThemeImages` optional boolean to sample dataset registry interface
- Update sample data cards image path logic to fetch themed images if available via `hasNewThemeImages` prop

Signed-off-by: Josh Romero <[email protected]>

* update changelog

Signed-off-by: Josh Romero <[email protected]>

* Minified new theme dashboard screenshots

Signed-off-by: Miki <[email protected]>

---------

Signed-off-by: Josh Romero <[email protected]>
Signed-off-by: Miki <[email protected]>
Co-authored-by: Miki <[email protected]>
(cherry picked from commit f9d3c34)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

(OUI Next Theme) Tutorial Directory
4 participants