Design of List View layout in Resource Page #9096
Conversation
WalkthroughThe changes introduced in this pull request involve updates to both localization and the user interface of the resource list. A new key for resource status has been added to the English locale JSON file, enhancing localization. Additionally, the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning Rate limit exceeded@AnveshNalimela has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 16 minutes and 37 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
src/components/Resource/ResourceList.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json': Cannot find module '@typescript-eslint/parser'
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (5)
src/components/Resource/ResourceList.tsx (5)
195-195: Remove Unnecessary Empty DivAt line 195, there is an empty
<div>with styling that may not be necessary. Removing it can simplify the layout and reduce unnecessary DOM elements.Apply this diff to remove the empty div:
- <div className="md:px-4"></div>
242-242: Simplify and Verify Translation Key for CategoryThe translation key
{t("LOG_UPDATE_FIELD_LABEL__patient_category")}at line 242 is verbose and may not accurately reflect the resource category. Consider using a more appropriate and concise key, such as{t("resource_category")}, for clarity.
87-87: Simplify Complex Class NamesAt line 87, the class names applied are complex and may reduce readability. Consider simplifying the class names or using utility classes for better maintainability.
209-209: Use Standard Spacing Classes for ConsistencyAt line 209, an arbitrary padding value
py-[11px]is used. To maintain consistency with the design system, consider using standard spacing classes provided by Tailwind CSS, such aspy-3.Apply this diff to use a standard spacing class:
- <ButtonV2 className="py-[11px]" onClick={onBoardViewBtnClick}> + <ButtonV2 className="py-3" onClick={onBoardViewBtnClick}>
210-210: Use Appropriate Icon Instead of RotatingAt line 210, the icon
l-list-ulis rotated by 90 degrees usingclassName="rotate-90". Instead of rotating the icon, consider using an icon that directly represents the desired orientation to improve performance and clarity.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
public/locale/en.json(1 hunks)src/components/Resource/ResourceList.tsx(5 hunks)
🔇 Additional comments (2)
public/locale/en.json (1)
1094-1094: LGTM! The new translation key follows conventions.
The addition of the resource_status key maintains consistent naming conventions, proper capitalization, and alphabetical ordering used throughout the localization file.
src/components/Resource/ResourceList.tsx (1)
102-103: Ensure Text Color Contrast Meets Accessibility Standards
At lines 102-103, the text color text-yellow-500 on a background bg-yellow-200 may not provide sufficient contrast for readability. Please verify that the color combination meets WCAG accessibility guidelines.
…:AnveshNalimela/care_fe into issue/ohcnetwork#9090/listview-resources
|
add readable titles for the PR @AnveshNalimela |
AnveshNalimela
changed the title
|
@rithviknishad Could you check on these PR a |
rithviknishad
added
needs testing
needs review
and removed
question
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
src/components/Resource/ResourceList.tsx (3)
110-110: Update translation key patternThe direct status translation might not handle all cases consistently. Consider using a dedicated translation key pattern for resource statuses.
- text={t(`${resource.status}`)} + text={t(`resource_status__${resource.status.toLowerCase()}`)}
89-89: Improve accessibility attributesThe title attributes are good, but the elements could benefit from additional accessibility improvements:
- Add
aria-labelfor better screen reader support- Ensure color contrast meets WCAG standards
- className="w-3/4 mt-1 h-fit flex h-5 shrink-0 items-center px-2 py-0.5 text-xs font-medium leading-4 overflow-hidden whitespace-nowrap text-ellipsis truncate" + className="w-3/4 mt-1 h-fit flex h-5 shrink-0 items-center px-2 py-0.5 text-xs font-medium leading-4 overflow-hidden whitespace-nowrap text-ellipsis truncate" + aria-label={t("resource_status_label")} + role="status"Also applies to: 101-102
85-85: Simplify responsive classesThe responsive classes are quite complex and could be simplified using Tailwind's responsive modifiers more effectively.
- className="3xl:flex-row mb-2 flex gap-2 sm:flex-row md:flex-row lg:flex-col xl:flex-row 2xl:flex-row " + className="mb-2 flex gap-2 flex-col lg:flex-row"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
public/locale/en.json(4 hunks)src/components/Resource/ResourceList.tsx(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- public/locale/en.json
🧰 Additional context used
📓 Learnings (1)
src/components/Resource/ResourceList.tsx (1)
Learnt from: AnveshNalimela
PR: ohcnetwork/care_fe#9096
File: src/components/Resource/ResourceList.tsx:245-245
Timestamp: 2024-11-13T12:33:52.373Z
Learning: When displaying the resource status in `ResourceList.tsx`, use `{t("consent__status")}` instead of adding a new translation key `{t("resource_status")}`.
🔇 Additional comments (1)
src/components/Resource/ResourceList.tsx (1)
86-118: Verify consistent status handling
Let's verify that the status handling is consistent across the codebase.
✅ Verification successful
Status handling is consistent across the codebase
The verification shows that the status handling in ResourceList.tsx is consistent with the rest of the codebase:
- The statuses "TRANSPORTATION TO BE ARRANGED" and "APPROVED" are properly defined in translation files (
public/locale/en.json) - These statuses are consistently used in constants (
src/common/constants.tsx) - The UI treatment (Chip component styling) is consistent with other status displays in the codebase
- The conditional rendering based on status matches the pattern used in other components
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for all resource status usages
echo "Checking resource status handling patterns..."
rg -l "resource\.status" --type tsx --type ts
# Check for different translation patterns used with status
echo "\nChecking translation patterns for status..."
rg "t\(['\"`].*status.*['\"`]\)" --type tsx --type ts
Length of output: 462
Script:
#!/bin/bash
# Search for all resource status usages with proper file type
echo "Checking resource status handling patterns..."
rg -l "resource\.status" -t typescript -t javascriptreact -t typescriptreact
# Check for different translation patterns used with status
echo -e "\nChecking translation patterns for status..."
rg "t\(['\"].*status.*['\"]\)" -t typescript -t javascriptreact -t typescriptreact
Length of output: 441
Script:
#!/bin/bash
# Search for all resource status usages without file type filters
echo "Checking resource status handling patterns..."
rg "resource\.status.*==="
# Look for status-related string literals and translations
echo -e "\nChecking status-related patterns..."
rg "(TRANSPORTATION TO BE ARRANGED|APPROVED)"
# Look for Chip components with status-related props
echo -e "\nChecking Chip component usage with status..."
rg "status.*===.*['\"]" -A 2 -B 2
Length of output: 21023
|
@nihal467 can u please look into the cypress failure |
|
I Dont Know Why they are failing. HCX claim specs are failing . |
|
LGTM |
|
@AnveshNalimela Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Proposed Changes
-Changed the List View into List format which includes imp deatils of resource card
Before:
After:
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Bug Fixes
Style