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

feature: Not connected alert banner in React #2492

Merged
merged 1 commit into from
Jul 1, 2024

Conversation

yomybaby
Copy link
Member

@yomybaby yomybaby commented Jun 25, 2024

TL;DR

Added a network status banner to the main layout component.

before after
image.png image.png

What changed?

  • Introduced NetworkStatusBanner component.
    • Displays when the user is offline
  • Updated translations for the offline message in multiple languages.
  • Removed old snackbar-based offline indicator.

How to test?

  1. Go offline and verify that the new banner appears with the appropriate message.

Why make this change?

Enhances user experience by providing clearer visual feedback on network status directly within the main layout.


Checklist: (if applicable)

  • Mention to the original issue
  • Documentation
  • Minium required manager version
  • Specific setting for review (eg., KB link, endpoint or how to setup)
  • Minimum requirements to check during review
  • Test case(s) to demonstrate the difference of before/after

Copy link

graphite-app bot commented Jun 25, 2024

Your org requires the Graphite merge queue for merging into main

Add the label “flow:merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “flow:hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

@github-actions github-actions bot added area:ux UI / UX issue. area:i18n Localization labels Jun 25, 2024
Copy link
Member Author

yomybaby commented Jun 25, 2024

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @yomybaby and the rest of your teammates on Graphite Graphite

@github-actions github-actions bot added the size:L 100~500 LoC label Jun 25, 2024

const { styles } = useStyles();

const [softTimeout, setSoftTimeout] = useAtom(networkSoftTimeoutAtom);
Copy link
Member Author

Choose a reason for hiding this comment

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

FYI, softTimeot feature is handled by #2493 .

@yomybaby yomybaby marked this pull request as ready for review June 25, 2024 08:02
Copy link

github-actions bot commented Jun 25, 2024

Coverage report for ./react

St.
Category Percentage Covered / Total
🔴 Statements 2.74% 140/5107
🔴 Branches 2.96% 101/3409
🔴 Functions 1.59% 27/1696
🔴 Lines 2.61% 131/5010

Test suite run success

51 tests passing in 5 suites.

Report generated by 🧪jest coverage report action from db62f9a

Copy link
Contributor

@ironAiken2 ironAiken2 left a comment

Choose a reason for hiding this comment

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

After the network is reconnected, the notifiaction shows output of network shutdown statement. How about removing that wording, or modifying it to appear at the same time as the banner?

image.png

Copy link
Member Author

yomybaby commented Jul 1, 2024

@ironAiken2 I created a new stack to improve notifications. Please check that #2502 PR and resolve a current PR.

@yomybaby yomybaby requested a review from ironAiken2 July 1, 2024 00:25
Copy link
Contributor

@ironAiken2 ironAiken2 left a comment

Choose a reason for hiding this comment

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

LGTM!

Copy link

graphite-app bot commented Jul 1, 2024

Merge activity

### TL;DR
Added a network status banner to the main layout component.

| before | after |
| -- | -- |
| ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/2bef7928-f35c-45b9-b050-4bbadba4721e.png) |  ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/ebb01c92-29d8-46db-aed6-da473d39b63f.png) |

### What changed?
- Introduced `NetworkStatusBanner` component.
  - Displays when the user is offline
- Updated translations for the offline message in multiple languages.
- Removed old snackbar-based offline indicator.

### How to test?
1. Go offline and verify that the new banner appears with the appropriate message.

### Why make this change?
Enhances user experience by providing clearer visual feedback on network status directly within the main layout.

---

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

**Checklist:** (if applicable)

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after
@graphite-app graphite-app bot merged commit db62f9a into main Jul 1, 2024
5 checks passed
@graphite-app graphite-app bot deleted the feature/no-network-banner branch July 1, 2024 02:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:i18n Localization area:ux UI / UX issue. size:L 100~500 LoC
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants