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.

Sign up for GitHub

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

Jump to bottom

[navigation]feat: fix left nav in small screen #7962

Merged
merged 11 commits into from
Sep 10, 2024
Merged

[navigation]feat: fix left nav in small screen #7962

merged 11 commits into from
Sep 10, 2024

Conversation

SuZhou-Joe
Copy link
Member

@SuZhou-Joe SuZhou-Joe commented Sep 2, 2024 •
edited
Loading

Description

The PR mainly optimize the experience of left nav in small screen like mobile device.

Issues Resolved

Screenshot

Collapsed in small screen

image

Expanded in small screen

image

Collapsed in large screen

image

Expanded in large screen

image

Testing the changes

Changelog

  • fix: make left nav compatible with small screen.

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

opensearch-changeset-bot bot added a commit to SuZhou-Joe/OpenSearch-Dashboards that referenced this pull request Sep 2, 2024
@opensearch-changeset-bot
Changeset file for PR opensearch-project#7962 created/updated
34a2f1a
@codecov Codecov
Copy link

codecov bot commented Sep 2, 2024 •
edited
Loading

Codecov Report

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

Project coverage is 60.59%. Comparing base (84d5de3) to head (5ea347e).
Report is 23 commits behind head on main.

Files with missing lines Patch % Lines
src/core/public/chrome/ui/header/header.tsx 90.90% 0 Missing and 1 partial ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #7962      +/-   ##
==========================================
+ Coverage   60.52%   60.59%   +0.07%     
==========================================
  Files        3728     3738      +10     
  Lines       88297    88674     +377     
  Branches    13662    13783     +121     
==========================================
+ Hits        53439    53731     +292     
- Misses      31603    31661      +58     
- Partials     3255     3282      +27
Flag Coverage Δ
Linux_1 28.76% <0.00%> (+0.03%) ⬆️
Linux_2 56.28% <92.85%> (+0.03%) ⬆️
Linux_3 37.51% <0.00%> (+0.10%) ⬆️
Linux_4 29.60% <0.00%> (+<0.01%) ⬆️
Windows_1 28.77% <0.00%> (+0.03%) ⬆️
Windows_2 56.23% <92.85%> (+0.03%) ⬆️
Windows_3 37.51% <0.00%> (+0.10%) ⬆️
Windows_4 29.60% <0.00%> (+<0.01%) ⬆️

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 and others added 6 commits September 3, 2024 17:58
@SuZhou-Joe
feat: fix left nav in small screen
daed635 
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
@opensearch-changeset-bot @SuZhou-Joe
Changeset file for PR opensearch-project#7962 created/updated
3cebef6
@SuZhou-Joe
fix: snapshot update
6996f50 
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
@SuZhou-Joe
feat: optimize style
3d1980c 
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
@SuZhou-Joe
fix: update snapshot
6322397 
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
@SuZhou-Joe
feat: show left nav in small screen
6e5e075 
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
@SuZhou-Joe
feat: update snapshot
9947070 
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
@SuZhou-Joe
feat: merge
ba3fe87 
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
@SuZhou-Joe SuZhou-Joe marked this pull request as ready for review September 5, 2024 07:03
ruanyl
ruanyl previously approved these changes Sep 5, 2024
View reviewed changes
@SuZhou-Joe
Copy link
Member Author

@virajsanghvi @AMoo-Miki Would you mind taking a look?

AMoo-Miki
AMoo-Miki reviewed Sep 6, 2024
View reviewed changes
src/core/public/chrome/ui/header/header.tsx Outdated
return (
<>
{isNavOpen ? null : (
<EuiHideFor sizes={['xs', 's', 'm']}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

EuiHideFor adds a resize listener to window to fake responsiveness and the more we use it, the more sluggish the interface will feel. Can we move this logic to CSS and use media queries instead?

Copy link
Member Author

@SuZhou-Joe SuZhou-Joe Sep 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Thanks for that, updated. But the change can not be applied to the left nav as there are some difference on the functionality.

@SuZhou-Joe
feat: use css to hide
195c95a 
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
@SuZhou-Joe SuZhou-Joe requested a review from huyaboo as a code owner September 9, 2024 07:10
@SuZhou-Joe
fix: cypress test
ac1d505 
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
@SuZhou-Joe
feat: update
5ea347e 
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
@SuZhou-Joe SuZhou-Joe merged commit dc62362 into opensearch-project:main Sep 10, 2024
66 of 67 checks passed
opensearch-trigger-bot bot pushed a commit that referenced this pull request Sep 10, 2024
@github-actions @opensearch-changeset-bot
[navigation]feat: fix left nav in small screen (#7962)
f08a5c0 
* feat: fix left nav in small screen

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* Changeset file for PR #7962 created/updated

* fix: snapshot update

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* feat: optimize style

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* fix: update snapshot

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* feat: show left nav in small screen

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* feat: update snapshot

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* feat: use css to hide

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* fix: cypress test

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* feat: update

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

---------

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
(cherry picked from commit dc62362)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@opensearch-trigger-bot opensearch-trigger-bot bot mentioned this pull request Sep 10, 2024
Merged
opensearch-trigger-bot bot pushed a commit that referenced this pull request Sep 10, 2024
@github-actions @opensearch-changeset-bot
[navigation]feat: fix left nav in small screen (#7962)
c815995 
* feat: fix left nav in small screen

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* Changeset file for PR #7962 created/updated

* fix: snapshot update

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* feat: optimize style

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* fix: update snapshot

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* feat: show left nav in small screen

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* feat: update snapshot

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* feat: use css to hide

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* fix: cypress test

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

* feat: update

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

---------

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
(cherry picked from commit dc62362)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@opensearch-trigger-bot opensearch-trigger-bot bot mentioned this pull request Sep 10, 2024
Merged
ruanyl pushed a commit that referenced this pull request Sep 10, 2024
@opensearch-trigger-bot @github-actions @opensearch-changeset-bot
[navigation]feat: fix left nav in small screen (#7962) (#8092)
3eb2e14 
* feat: fix left nav in small screen



* Changeset file for PR #7962 created/updated

* fix: snapshot update



* feat: optimize style



* fix: update snapshot



* feat: show left nav in small screen



* feat: update snapshot



* feat: use css to hide



* fix: cypress test



* feat: update



---------



(cherry picked from commit dc62362)

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
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>
ruanyl pushed a commit that referenced this pull request Sep 10, 2024
@opensearch-trigger-bot @github-actions @opensearch-changeset-bot
[navigation]feat: fix left nav in small screen (#7962) (#8093)
56f3f48 
* feat: fix left nav in small screen



* Changeset file for PR #7962 created/updated

* fix: snapshot update



* feat: optimize style



* fix: update snapshot



* feat: show left nav in small screen



* feat: update snapshot



* feat: use css to hide



* fix: cypress test



* feat: update



---------



(cherry picked from commit dc62362)

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AMoo-Miki AMoo-Miki AMoo-Miki approved these changes

@ruanyl ruanyl ruanyl approved these changes

@ananzh ananzh Awaiting requested review from ananzh ananzh is a code owner

@kavilla kavilla Awaiting requested review from kavilla kavilla is a code owner

@ashwin-pc ashwin-pc Awaiting requested review from ashwin-pc ashwin-pc is a code owner

@joshuarrrr joshuarrrr Awaiting requested review from joshuarrrr joshuarrrr is a code owner

@abbyhu2000 abbyhu2000 Awaiting requested review from abbyhu2000 abbyhu2000 is a code owner

@zengyan-amazon zengyan-amazon Awaiting requested review from zengyan-amazon zengyan-amazon is a code owner

@zhongnansu zhongnansu Awaiting requested review from zhongnansu zhongnansu is a code owner

@manasvinibs manasvinibs Awaiting requested review from manasvinibs manasvinibs is a code owner

@ZilongX ZilongX Awaiting requested review from ZilongX ZilongX is a code owner

@Flyingliuhub Flyingliuhub Awaiting requested review from Flyingliuhub Flyingliuhub is a code owner

@curq curq Awaiting requested review from curq curq is a code owner

@bandinib-amzn bandinib-amzn Awaiting requested review from bandinib-amzn bandinib-amzn is a code owner

@BionIT BionIT Awaiting requested review from BionIT BionIT is a code owner

@xinruiba xinruiba Awaiting requested review from xinruiba xinruiba is a code owner

@zhyuanqi zhyuanqi Awaiting requested review from zhyuanqi zhyuanqi is a code owner

@mengweieric mengweieric Awaiting requested review from mengweieric mengweieric is a code owner

@LDrago27 LDrago27 Awaiting requested review from LDrago27 LDrago27 is a code owner

@virajsanghvi virajsanghvi Awaiting requested review from virajsanghvi virajsanghvi is a code owner

@sejli sejli Awaiting requested review from sejli sejli is a code owner

@joshuali925 joshuali925 Awaiting requested review from joshuali925 joshuali925 is a code owner

@huyaboo huyaboo Awaiting requested review from huyaboo huyaboo is a code owner

Assignees
No one assigned
Labels
backport 2.x backport 2.17 distinguished-contributor navigation v2.17.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@SuZhou-Joe @ruanyl @AMoo-Miki