feat(native-app): Problem and No data UX related component #14828
Conversation
WalkthroughThe recent changes encompass the addition of a new Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (6)
- apps/native/app/src/hooks/use-translate.ts (1 hunks)
- apps/native/app/src/messages/en.ts (1 hunks)
- apps/native/app/src/messages/is.ts (1 hunks)
- apps/native/app/src/screens/document-detail/document-detail.tsx (2 hunks)
- apps/native/app/src/ui/lib/problem/problem-template.tsx (1 hunks)
- apps/native/app/src/ui/lib/problem/problem.tsx (1 hunks)
Files not reviewed due to errors (1)
- apps/native/app/src/messages/is.ts (no review received)
Files skipped from review due to trivial changes (2)
- apps/native/app/src/hooks/use-translate.ts
- apps/native/app/src/messages/en.ts
Additional Context Used
Path-based Instructions (4)
apps/native/app/src/ui/lib/problem/problem.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/ui/lib/problem/problem-template.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/document-detail/document-detail.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/messages/is.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
Additional comments not posted (9)
apps/native/app/src/ui/lib/problem/problem.tsx (2)
1-9: Imports and enum declaration look good.
84-117: Offline handling and switch case logic look good.apps/native/app/src/ui/lib/problem/problem-template.tsx (4)
1-25: Imports and type declarations look good.
37-66:getColorsByVariantfunction looks good.
68-105: Styled components look good.
107-137:ProblemTemplatecomponent looks good.apps/native/app/src/screens/document-detail/document-detail.tsx (3)
Line range hint
1-41: Imports and styled components look good.
Line range hint
43-61:getRightButtonsfunction looks good.
Line range hint
63-101:PdfViewercomponent looks good.
Datadog ReportAll test runs ✅ 39 Total Test Services: 0 Failed, 38 Passed Test ServicesThis report shows up to 10 services
🔻 Code Coverage Decreases vs Default Branch (1)
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #14828 +/- ##
==========================================
- Coverage 36.97% 36.93% -0.05%
==========================================
Files 6327 6322 -5
Lines 128999 128778 -221
Branches 36815 36757 -58
==========================================
- Hits 47700 47558 -142
+ Misses 81299 81220 -79 Flags with carried forward coverage won't be shown. Click here to find out more. see 86 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
rename to error Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
snaerseljan
added
the
deprecated:automerge
There was a problem hiding this comment.
Actionable comments posted: 0
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- apps/native/app/src/ui/lib/problem/problem.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- apps/native/app/src/ui/lib/problem/problem.tsx
There was a problem hiding this comment.
Actionable comments posted: 0
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- apps/native/app/src/screens/document-detail/document-detail.tsx (2 hunks)
- apps/native/app/src/ui/lib/problem/problem-template.tsx (1 hunks)
- apps/native/app/src/ui/lib/problem/problem.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (3)
- apps/native/app/src/screens/document-detail/document-detail.tsx
- apps/native/app/src/ui/lib/problem/problem-template.tsx
- apps/native/app/src/ui/lib/problem/problem.tsx
Problem and No data UX component
What
This PR adds new Problem component that can be used to display service error, no data or offline connection.
The usage is simple to get a general message
The component will self detect if offline and the default to offline UI.
Why
Generalize errors in app
Screenshots / Gifs
Checklist:
Summary by CodeRabbit
New Features
Problemcomponent for handling and displaying various problem scenarios such as errors and no data situations.useTranslatehook to simplify translations within the app.ProblemTemplatecomponent for customizable problem displays.Enhancements
Bug Fixes