FIX : Formatting of Approval Letter #9327
Conversation
Fix approval letter formatting to resolve issue #9324
WalkthroughThe changes in this pull request involve the removal of the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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. |
Rajasimhareddybolla
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
src/components/Resource/ResourceDetails.tsx (2)
200-202: Add aria-label to print buttonConsider adding an aria-label to improve accessibility for screen readers.
-<ButtonV2 onClick={() => window.print()}> +<ButtonV2 onClick={() => window.print()} aria-label="Print approval letter">🧰 Tools
🪛 eslint
[error] 200-200: Insert
··(prettier/prettier)
[error] 201-201: Replace
············<CareIcon·icon="l-print"·className="mr-2·text-lg"·/>·Printwith··············<CareIcon·icon="l-print"·className="mr-2·text-lg"·/>·Print⏎·············(prettier/prettier)
[error] 202-202: Insert
··(prettier/prettier)
197-369: Run prettier to fix formattingMultiple indentation issues were detected. Consider running prettier to automatically fix these formatting issues.
🧰 Tools
🪛 eslint
[error] 197-197: Insert
··(prettier/prettier)
[error] 198-198: Insert
··(prettier/prettier)
[error] 199-199: Insert
··(prettier/prettier)
[error] 200-200: Insert
··(prettier/prettier)
[error] 201-201: Replace
············<CareIcon·icon="l-print"·className="mr-2·text-lg"·/>·Printwith··············<CareIcon·icon="l-print"·className="mr-2·text-lg"·/>·Print⏎·············(prettier/prettier)
[error] 202-202: Insert
··(prettier/prettier)
[error] 203-203: Insert
··(prettier/prettier)
[error] 204-204: Insert
··(prettier/prettier)
[error] 205-205: Insert
··(prettier/prettier)
[error] 206-206: Insert
··(prettier/prettier)
[error] 207-207: Replace
········<PrintPreview·title={("Approval·Letter")with··········<PrintPreview·title={"Approval·Letter"(prettier/prettier)
[error] 208-208: Insert
··(prettier/prettier)
[error] 209-209: Insert
··(prettier/prettier)
[error] 210-210: Insert
····(prettier/prettier)
[error] 211-211: Insert
··(prettier/prettier)
[error] 212-212: Insert
····(prettier/prettier)
[error] 213-213: Insert
····(prettier/prettier)
[error] 214-214: Insert
····(prettier/prettier)
[error] 215-215: Replace
<CareIcon·icon="l-file-alt"·className="mr-2·text-lg"·/>·Approvalwith····<CareIcon·icon="l-file-alt"·className="mr-2·text-lg"·/>·Approval⏎·············(prettier/prettier)
[error] 216-216: Insert
····(prettier/prettier)
[error] 217-217: Replace
······with··········(prettier/prettier)
[error] 218-218: Insert
····(prettier/prettier)
[error] 219-219: Delete
··(prettier/prettier)
[error] 220-220: Delete
··(prettier/prettier)
[error] 221-221: Replace
··················with················(prettier/prettier)
[error] 222-222: Delete
··(prettier/prettier)
[error] 223-223: Delete
··(prettier/prettier)
[error] 224-224: Replace
························with······················(prettier/prettier)
[error] 225-225: Delete
··(prettier/prettier)
[error] 226-226: Delete
··(prettier/prettier)
[error] 227-227: Replace
····················with··················(prettier/prettier)
[error] 228-228: Delete
··(prettier/prettier)
[error] 229-229: Delete
··(prettier/prettier)
[error] 230-230: Replace
··············with············(prettier/prettier)
[error] 231-231: Delete
··(prettier/prettier)
[error] 232-232: Delete
··(prettier/prettier)
[error] 233-233: Replace
··············with············(prettier/prettier)
[error] 234-234: Delete
··(prettier/prettier)
[error] 235-235: Delete
··(prettier/prettier)
[error] 236-236: Replace
··················with················(prettier/prettier)
[error] 237-237: Delete
··(prettier/prettier)
[error] 238-238: Delete
··(prettier/prettier)
[error] 239-239: Replace
················with··············(prettier/prettier)
[error] 240-240: Delete
··(prettier/prettier)
[error] 241-241: Delete
··(prettier/prettier)
[error] 242-242: Replace
··············with············(prettier/prettier)
[error] 244-244: Delete
··(prettier/prettier)
[error] 245-245: Delete
··(prettier/prettier)
[error] 246-246: Replace
··················with················(prettier/prettier)
[error] 247-247: Delete
··(prettier/prettier)
[error] 248-248: Delete
··(prettier/prettier)
[error] 249-249: Replace
··················with················(prettier/prettier)
[error] 250-250: Delete
··(prettier/prettier)
[error] 251-251: Delete
··(prettier/prettier)
[error] 252-252: Replace
··················with················(prettier/prettier)
[error] 253-253: Delete
··(prettier/prettier)
[error] 254-254: Delete
··(prettier/prettier)
[error] 255-255: Replace
··················with················(prettier/prettier)
[error] 256-256: Delete
··(prettier/prettier)
[error] 257-257: Delete
··(prettier/prettier)
[error] 258-258: Replace
··················with················(prettier/prettier)
[error] 259-259: Delete
··(prettier/prettier)
[error] 260-260: Delete
··(prettier/prettier)
[error] 261-261: Replace
··················with················(prettier/prettier)
[error] 262-262: Delete
··(prettier/prettier)
[error] 263-263: Delete
··(prettier/prettier)
[error] 264-264: Replace
··················with················(prettier/prettier)
[error] 265-265: Delete
··(prettier/prettier)
[error] 266-266: Delete
··(prettier/prettier)
[error] 267-267: Replace
··················with················(prettier/prettier)
[error] 268-268: Delete
··(prettier/prettier)
[error] 269-269: Delete
··(prettier/prettier)
[error] 270-270: Delete
··(prettier/prettier)
[error] 271-271: Delete
··(prettier/prettier)
[error] 272-272: Delete
··(prettier/prettier)
[error] 273-273: Delete
··(prettier/prettier)
[error] 274-274: Delete
··(prettier/prettier)
[error] 275-275: Delete
··(prettier/prettier)
[error] 276-276: Delete
··(prettier/prettier)
[error] 277-277: Delete
··(prettier/prettier)
[error] 278-278: Delete
··(prettier/prettier)
[error] 279-279: Delete
··(prettier/prettier)
[error] 280-280: Delete
··(prettier/prettier)
[error] 281-281: Delete
··(prettier/prettier)
[error] 282-282: Delete
··(prettier/prettier)
[error] 283-283: Delete
··(prettier/prettier)
[error] 284-284: Delete
··(prettier/prettier)
[error] 285-285: Delete
··(prettier/prettier)
[error] 286-286: Delete
··(prettier/prettier)
[error] 287-287: Delete
··(prettier/prettier)
[error] 288-288: Delete
··(prettier/prettier)
[error] 289-289: Delete
··(prettier/prettier)
[error] 290-290: Delete
··(prettier/prettier)
[error] 291-291: Delete
··(prettier/prettier)
[error] 292-292: Delete
··(prettier/prettier)
[error] 293-293: Delete
··(prettier/prettier)
[error] 294-294: Delete
··(prettier/prettier)
[error] 295-295: Delete
··(prettier/prettier)
[error] 296-296: Delete
··(prettier/prettier)
[error] 297-297: Delete
··(prettier/prettier)
[error] 298-298: Delete
··(prettier/prettier)
[error] 299-299: Delete
··(prettier/prettier)
[error] 300-300: Delete
··(prettier/prettier)
[error] 301-301: Delete
··(prettier/prettier)
[error] 302-302: Delete
··(prettier/prettier)
[error] 304-304: Delete
··(prettier/prettier)
[error] 305-305: Delete
··(prettier/prettier)
[error] 306-306: Delete
··(prettier/prettier)
[error] 307-307: Delete
··(prettier/prettier)
[error] 308-308: Delete
··(prettier/prettier)
[error] 309-309: Replace
············with··········(prettier/prettier)
[error] 310-310: Delete
··(prettier/prettier)
[error] 312-312: Delete
··(prettier/prettier)
[error] 313-313: Delete
··(prettier/prettier)
[error] 314-314: Delete
··(prettier/prettier)
[error] 315-315: Delete
··(prettier/prettier)
[error] 316-316: Delete
··(prettier/prettier)
[error] 317-317: Delete
··(prettier/prettier)
[error] 318-318: Delete
··(prettier/prettier)
[error] 319-319: Replace
····················with··················(prettier/prettier)
[error] 320-320: Delete
··(prettier/prettier)
[error] 321-321: Delete
··(prettier/prettier)
[error] 322-322: Replace
····················with··················(prettier/prettier)
[error] 323-323: Delete
··(prettier/prettier)
[error] 324-324: Delete
··(prettier/prettier)
[error] 325-325: Replace
··············with············(prettier/prettier)
[error] 326-326: Delete
··(prettier/prettier)
[error] 327-327: Delete
··(prettier/prettier)
[error] 328-328: Replace
··················with················(prettier/prettier)
[error] 329-329: Delete
··(prettier/prettier)
[error] 330-330: Delete
··(prettier/prettier)
[error] 331-331: Replace
··················with················(prettier/prettier)
[error] 332-332: Delete
··(prettier/prettier)
[error] 333-333: Delete
··(prettier/prettier)
[error] 334-334: Replace
··················with················(prettier/prettier)
[error] 335-335: Delete
··(prettier/prettier)
[error] 336-336: Delete
··(prettier/prettier)
[error] 337-337: Replace
················with··············(prettier/prettier)
[error] 338-338: Delete
··(prettier/prettier)
[error] 339-339: Delete
··(prettier/prettier)
[error] 340-340: Replace
············with··········(prettier/prettier)
[error] 341-341: Delete
··(prettier/prettier)
[error] 342-342: Delete
··(prettier/prettier)
[error] 343-343: Replace
················with··············(prettier/prettier)
[error] 344-344: Delete
··(prettier/prettier)
[error] 345-345: Delete
··(prettier/prettier)
[error] 346-346: Replace
··············with············(prettier/prettier)
[error] 347-347: Delete
··(prettier/prettier)
[error] 348-348: Delete
··(prettier/prettier)
[error] 349-349: Replace
················with··············(prettier/prettier)
[error] 351-351: Delete
··(prettier/prettier)
[error] 352-352: Delete
··(prettier/prettier)
[error] 353-353: Replace
··············with············(prettier/prettier)
[error] 354-354: Delete
··(prettier/prettier)
[error] 356-356: Delete
··(prettier/prettier)
[error] 357-357: Replace
··············with············(prettier/prettier)
[error] 358-358: Delete
··(prettier/prettier)
[error] 359-359: Delete
··(prettier/prettier)
[error] 360-360: Replace
··················with················(prettier/prettier)
[error] 362-362: Delete
··(prettier/prettier)
[error] 363-363: Delete
··(prettier/prettier)
[error] 364-364: Replace
··············with············(prettier/prettier)
[error] 365-365: Delete
··(prettier/prettier)
[error] 366-366: Delete
··(prettier/prettier)
[error] 367-367: Replace
··············with············(prettier/prettier)
[error] 368-368: Delete
··(prettier/prettier)
[error] 369-369: Delete
··(prettier/prettier)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/components/Resource/ResourceDetails.tsx(2 hunks)
🧰 Additional context used
🪛 eslint
src/components/Resource/ResourceDetails.tsx
[error] 197-197: Insert ··
(prettier/prettier)
[error] 198-198: Insert ··
(prettier/prettier)
[error] 199-199: Insert ··
(prettier/prettier)
[error] 200-200: Insert ··
(prettier/prettier)
[error] 201-201: Replace ············<CareIcon·icon="l-print"·className="mr-2·text-lg"·/>·Print with ··············<CareIcon·icon="l-print"·className="mr-2·text-lg"·/>·Print⏎·············
(prettier/prettier)
[error] 202-202: Insert ··
(prettier/prettier)
[error] 203-203: Insert ··
(prettier/prettier)
[error] 204-204: Insert ··
(prettier/prettier)
[error] 205-205: Insert ··
(prettier/prettier)
[error] 206-206: Insert ··
(prettier/prettier)
[error] 207-207: Replace ········<PrintPreview·title={("Approval·Letter") with ··········<PrintPreview·title={"Approval·Letter"
(prettier/prettier)
[error] 208-208: Insert ··
(prettier/prettier)
[error] 209-209: Insert ··
(prettier/prettier)
[error] 210-210: Insert ····
(prettier/prettier)
[error] 211-211: Insert ··
(prettier/prettier)
[error] 212-212: Insert ····
(prettier/prettier)
[error] 213-213: Insert ····
(prettier/prettier)
[error] 214-214: Insert ····
(prettier/prettier)
[error] 215-215: Replace <CareIcon·icon="l-file-alt"·className="mr-2·text-lg"·/>·Approval with ····<CareIcon·icon="l-file-alt"·className="mr-2·text-lg"·/>·Approval⏎·············
(prettier/prettier)
[error] 216-216: Insert ····
(prettier/prettier)
[error] 217-217: Replace ······ with ··········
(prettier/prettier)
[error] 218-218: Insert ····
(prettier/prettier)
[error] 219-219: Delete ··
(prettier/prettier)
[error] 220-220: Delete ··
(prettier/prettier)
[error] 221-221: Replace ·················· with ················
(prettier/prettier)
[error] 222-222: Delete ··
(prettier/prettier)
[error] 223-223: Delete ··
(prettier/prettier)
[error] 224-224: Replace ························ with ······················
(prettier/prettier)
[error] 225-225: Delete ··
(prettier/prettier)
[error] 226-226: Delete ··
(prettier/prettier)
[error] 227-227: Replace ···················· with ··················
(prettier/prettier)
[error] 228-228: Delete ··
(prettier/prettier)
[error] 229-229: Delete ··
(prettier/prettier)
[error] 230-230: Replace ·············· with ············
(prettier/prettier)
[error] 231-231: Delete ··
(prettier/prettier)
[error] 232-232: Delete ··
(prettier/prettier)
[error] 233-233: Replace ·············· with ············
(prettier/prettier)
[error] 234-234: Delete ··
(prettier/prettier)
[error] 235-235: Delete ··
(prettier/prettier)
[error] 236-236: Replace ·················· with ················
(prettier/prettier)
[error] 237-237: Delete ··
(prettier/prettier)
[error] 238-238: Delete ··
(prettier/prettier)
[error] 239-239: Replace ················ with ··············
(prettier/prettier)
[error] 240-240: Delete ··
(prettier/prettier)
[error] 241-241: Delete ··
(prettier/prettier)
[error] 242-242: Replace ·············· with ············
(prettier/prettier)
[error] 244-244: Delete ··
(prettier/prettier)
[error] 245-245: Delete ··
(prettier/prettier)
[error] 246-246: Replace ·················· with ················
(prettier/prettier)
[error] 247-247: Delete ··
(prettier/prettier)
[error] 248-248: Delete ··
(prettier/prettier)
[error] 249-249: Replace ·················· with ················
(prettier/prettier)
[error] 250-250: Delete ··
(prettier/prettier)
[error] 251-251: Delete ··
(prettier/prettier)
[error] 252-252: Replace ·················· with ················
(prettier/prettier)
[error] 253-253: Delete ··
(prettier/prettier)
[error] 254-254: Delete ··
(prettier/prettier)
[error] 255-255: Replace ·················· with ················
(prettier/prettier)
[error] 256-256: Delete ··
(prettier/prettier)
[error] 257-257: Delete ··
(prettier/prettier)
[error] 258-258: Replace ·················· with ················
(prettier/prettier)
[error] 259-259: Delete ··
(prettier/prettier)
[error] 260-260: Delete ··
(prettier/prettier)
[error] 261-261: Replace ·················· with ················
(prettier/prettier)
[error] 262-262: Delete ··
(prettier/prettier)
[error] 263-263: Delete ··
(prettier/prettier)
[error] 264-264: Replace ·················· with ················
(prettier/prettier)
[error] 265-265: Delete ··
(prettier/prettier)
[error] 266-266: Delete ··
(prettier/prettier)
[error] 267-267: Replace ·················· with ················
(prettier/prettier)
[error] 268-268: Delete ··
(prettier/prettier)
[error] 269-269: Delete ··
(prettier/prettier)
[error] 270-270: Delete ··
(prettier/prettier)
[error] 271-271: Delete ··
(prettier/prettier)
[error] 272-272: Delete ··
(prettier/prettier)
[error] 273-273: Delete ··
(prettier/prettier)
[error] 274-274: Delete ··
(prettier/prettier)
[error] 275-275: Delete ··
(prettier/prettier)
[error] 276-276: Delete ··
(prettier/prettier)
[error] 277-277: Delete ··
(prettier/prettier)
[error] 278-278: Delete ··
(prettier/prettier)
[error] 279-279: Delete ··
(prettier/prettier)
[error] 280-280: Delete ··
(prettier/prettier)
[error] 281-281: Delete ··
(prettier/prettier)
[error] 282-282: Delete ··
(prettier/prettier)
[error] 283-283: Delete ··
(prettier/prettier)
[error] 284-284: Delete ··
(prettier/prettier)
[error] 285-285: Delete ··
(prettier/prettier)
[error] 286-286: Delete ··
(prettier/prettier)
[error] 287-287: Delete ··
(prettier/prettier)
[error] 288-288: Delete ··
(prettier/prettier)
[error] 289-289: Delete ··
(prettier/prettier)
[error] 290-290: Delete ··
(prettier/prettier)
[error] 291-291: Delete ··
(prettier/prettier)
[error] 292-292: Delete ··
(prettier/prettier)
[error] 293-293: Delete ··
(prettier/prettier)
[error] 294-294: Delete ··
(prettier/prettier)
[error] 295-295: Delete ··
(prettier/prettier)
[error] 296-296: Delete ··
(prettier/prettier)
[error] 297-297: Delete ··
(prettier/prettier)
[error] 298-298: Delete ··
(prettier/prettier)
[error] 299-299: Delete ··
(prettier/prettier)
[error] 300-300: Delete ··
(prettier/prettier)
[error] 301-301: Delete ··
(prettier/prettier)
[error] 302-302: Delete ··
(prettier/prettier)
[error] 304-304: Delete ··
(prettier/prettier)
[error] 305-305: Delete ··
(prettier/prettier)
[error] 306-306: Delete ··
(prettier/prettier)
[error] 307-307: Delete ··
(prettier/prettier)
[error] 308-308: Delete ··
(prettier/prettier)
[error] 309-309: Replace ············ with ··········
(prettier/prettier)
[error] 310-310: Delete ··
(prettier/prettier)
[error] 312-312: Delete ··
(prettier/prettier)
[error] 313-313: Delete ··
(prettier/prettier)
[error] 314-314: Delete ··
(prettier/prettier)
[error] 315-315: Delete ··
(prettier/prettier)
[error] 316-316: Delete ··
(prettier/prettier)
[error] 317-317: Delete ··
(prettier/prettier)
[error] 318-318: Delete ··
(prettier/prettier)
[error] 319-319: Replace ···················· with ··················
(prettier/prettier)
[error] 320-320: Delete ··
(prettier/prettier)
[error] 321-321: Delete ··
(prettier/prettier)
[error] 322-322: Replace ···················· with ··················
(prettier/prettier)
[error] 323-323: Delete ··
(prettier/prettier)
[error] 324-324: Delete ··
(prettier/prettier)
[error] 325-325: Replace ·············· with ············
(prettier/prettier)
[error] 326-326: Delete ··
(prettier/prettier)
[error] 327-327: Delete ··
(prettier/prettier)
[error] 328-328: Replace ·················· with ················
(prettier/prettier)
[error] 329-329: Delete ··
(prettier/prettier)
[error] 330-330: Delete ··
(prettier/prettier)
[error] 331-331: Replace ·················· with ················
(prettier/prettier)
[error] 332-332: Delete ··
(prettier/prettier)
[error] 333-333: Delete ··
(prettier/prettier)
[error] 334-334: Replace ·················· with ················
(prettier/prettier)
[error] 335-335: Delete ··
(prettier/prettier)
[error] 336-336: Delete ··
(prettier/prettier)
[error] 337-337: Replace ················ with ··············
(prettier/prettier)
[error] 338-338: Delete ··
(prettier/prettier)
[error] 339-339: Delete ··
(prettier/prettier)
[error] 340-340: Replace ············ with ··········
(prettier/prettier)
[error] 341-341: Delete ··
(prettier/prettier)
[error] 342-342: Delete ··
(prettier/prettier)
[error] 343-343: Replace ················ with ··············
(prettier/prettier)
[error] 344-344: Delete ··
(prettier/prettier)
[error] 345-345: Delete ··
(prettier/prettier)
[error] 346-346: Replace ·············· with ············
(prettier/prettier)
[error] 347-347: Delete ··
(prettier/prettier)
[error] 348-348: Delete ··
(prettier/prettier)
[error] 349-349: Replace ················ with ··············
(prettier/prettier)
[error] 351-351: Delete ··
(prettier/prettier)
[error] 352-352: Delete ··
(prettier/prettier)
[error] 353-353: Replace ·············· with ············
(prettier/prettier)
[error] 354-354: Delete ··
(prettier/prettier)
[error] 356-356: Delete ··
(prettier/prettier)
[error] 357-357: Replace ·············· with ············
(prettier/prettier)
[error] 358-358: Delete ··
(prettier/prettier)
[error] 359-359: Delete ··
(prettier/prettier)
[error] 360-360: Replace ·················· with ················
(prettier/prettier)
[error] 362-362: Delete ··
(prettier/prettier)
[error] 363-363: Delete ··
(prettier/prettier)
[error] 364-364: Replace ·············· with ············
(prettier/prettier)
[error] 365-365: Delete ··
(prettier/prettier)
[error] 366-366: Delete ··
(prettier/prettier)
[error] 367-367: Replace ·············· with ············
(prettier/prettier)
[error] 368-368: Delete ··
(prettier/prettier)
[error] 369-369: Delete ··
(prettier/prettier)
🔇 Additional comments (2)
src/components/Resource/ResourceDetails.tsx (2)
5-5: LGTM: Import added correctly
The PrintPreview component import is properly placed and follows project conventions.
197-210: LGTM: Print preview implementation matches requirements
The implementation successfully addresses the formatting issue by:
- Adding proper print mode controls
- Wrapping ApprovalLetter with PrintPreview component as required in issue The APPROVAL LETTER is not wrapped with the <PrintPreview> component #9324
🧰 Tools
🪛 eslint
[error] 197-197: Insert ··
(prettier/prettier)
[error] 198-198: Insert ··
(prettier/prettier)
[error] 199-199: Insert ··
(prettier/prettier)
[error] 200-200: Insert ··
(prettier/prettier)
[error] 201-201: Replace ············<CareIcon·icon="l-print"·className="mr-2·text-lg"·/>·Print with ··············<CareIcon·icon="l-print"·className="mr-2·text-lg"·/>·Print⏎·············
(prettier/prettier)
[error] 202-202: Insert ··
(prettier/prettier)
[error] 203-203: Insert ··
(prettier/prettier)
[error] 204-204: Insert ··
(prettier/prettier)
[error] 205-205: Insert ··
(prettier/prettier)
[error] 206-206: Insert ··
(prettier/prettier)
[error] 207-207: Replace ········<PrintPreview·title={("Approval·Letter") with ··········<PrintPreview·title={"Approval·Letter"
(prettier/prettier)
[error] 208-208: Insert ··
(prettier/prettier)
[error] 209-209: Insert ··
(prettier/prettier)
[error] 210-210: Insert ····
(prettier/prettier)
|
Hi @rithviknishad, Thanks for your quick feedback!
Here’s the updated outcome:
Please let me know if any further changes are required. |
added printPreview mode for approvalLetter
Rajasimhareddybolla
deleted the
issues/#9324/approval-letter-formatting
branch
Rajasimhareddybolla
restored the
issues/#9324/approval-letter-formatting
branch
Rajasimhareddybolla
deleted the
issues/#9324/approval-letter-formatting
branch
Rajasimhareddybolla
restored the
issues/#9324/approval-letter-formatting
branch
Rajasimhareddybolla
force-pushed
the
issues/#9324/approval-letter-formatting
branch
from
4560f81 to
ba3677a
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/CAREUI/misc/PrintPreview.tsx (1)
31-40: Consider extracting print button to a shared componentThe current implementation solves the duplicate print button issue through the
hideControlsprop. For future maintainability, consider extracting the print button into a shared component that can be reused across different contexts.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/CAREUI/misc/PrintPreview.tsx(1 hunks)src/components/Resource/ResourceDetails.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/Resource/ResourceDetails.tsx
🔇 Additional comments (3)
src/CAREUI/misc/PrintPreview.tsx (3)
24-24: LGTM! Well-typed optional prop addition
The hideControls prop is well-named and properly typed as an optional boolean, following React prop naming conventions.
55-58: LGTM! Clean conditional rendering implementation
The conditional rendering logic is well-implemented, providing flexibility to either show the content directly or wrapped in a Page component.
31-53: Verify print functionality and consider responsive design improvements
The content structure looks good, but there are a few considerations:
- The print function usage needs verification
- The hardcoded width of 50rem might cause issues on smaller screens
Let's verify the print function implementation:
Consider making these improvements:
- Use responsive width classes instead of hardcoded width
- Add aria-label to the print button for better accessibility
-<div className="mx-auto my-8 w-[50rem]">
+<div className="mx-auto my-8 w-full max-w-[50rem]">
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (1)
src/CAREUI/misc/PrintPreview.tsx (1)
33-33: Consider improving mobile responsiveness.The print button's positioning with
xl:absolutemight cause layout issues on mobile devices. Consider using a more responsive approach.- className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end" + className="sticky top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 md:static md:justify-end"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/CAREUI/misc/PrintPreview.tsx(1 hunks)src/components/Resource/ResourceDetails.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/Resource/ResourceDetails.tsx
🔇 Additional comments (3)
src/CAREUI/misc/PrintPreview.tsx (3)
24-24: LGTM! The hideControls prop addition is well-designed.
The new optional prop follows React conventions and effectively addresses the duplicate print button issue mentioned in the PR comments.
54-57: LGTM! Clean conditional rendering implementation.
The conditional Page wrapper implementation is clean and effectively handles the hideControls prop.
31-52: Verify integration with ApprovalLetter component.
Let's ensure this component is properly integrated with the ApprovalLetter component as mentioned in the PR objectives.
✅ Verification successful
PrintPreview component is correctly integrated with ApprovalLetter
The verification shows that the PrintPreview component is properly integrated with ApprovalLetter in src/components/Resource/ResourceDetails.tsx:
<PrintPreview title="Approval Letter" hideControls>
{ApprovalLetter(data)}
</PrintPreview>The component is also successfully used across multiple other features in the application, including prescriptions, investigations, and treatment summaries, demonstrating its reliability as a reusable print wrapper component.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for ApprovalLetter component usage
rg -l "ApprovalLetter" | xargs rg "PrintPreview.*ApprovalLetter" -A 5
Length of output: 69
Script:
#!/bin/bash
# Let's first find files containing ApprovalLetter
rg -l "ApprovalLetter"
Length of output: 66
Script:
#!/bin/bash
# Let's also search for PrintPreview usage
rg -l "PrintPreview"
Length of output: 374
Script:
#!/bin/bash
# Search for any imports or usage of PrintPreview in the codebase
rg "PrintPreview" -A 3
Length of output: 8365
src/CAREUI/misc/PrintPreview.tsx
Outdated
| const content = ( | ||
| <div className="mx-auto my-8 w-[50rem]"> | ||
| <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end"> | ||
| <Button variant="primary" disabled={props.disabled} onClick={print}> |
There was a problem hiding this comment.
Define the missing print function.
The print function is used but not defined, which could cause runtime errors.
Add the following implementation before the return statement:
+ const print = () => {
+ window.print();
+ };📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Button variant="primary" disabled={props.disabled} onClick={print}> | |
| const print = () => { | |
| window.print(); | |
| }; | |
| <Button variant="primary" disabled={props.disabled} onClick={print}> |
src/CAREUI/misc/PrintPreview.tsx
Outdated
| const content = ( | ||
| <div className="mx-auto my-8 w-[50rem]"> | ||
| <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end"> | ||
| <Button variant="primary" disabled={props.disabled} onClick={print}> | ||
| <CareIcon icon="l-print" className="text-lg" /> | ||
| {t("print")} | ||
| </Button> | ||
| </div> |
There was a problem hiding this comment.
Fix inconsistent control hiding behavior.
The print button is always rendered even when hideControls is true, which contradicts the prop's purpose. This could lead to duplicate print buttons in some cases.
Apply this diff to fix the inconsistency:
- <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end">
- <Button variant="primary" disabled={props.disabled} onClick={print}>
- <CareIcon icon="l-print" className="text-lg" />
- {t("print")}
- </Button>
- </div>
+ {!props.hideControls && (
+ <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end">
+ <Button variant="primary" disabled={props.disabled} onClick={print}>
+ <CareIcon icon="l-print" className="text-lg" />
+ {t("print")}
+ </Button>
+ </div>
+ )}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const content = ( | |
| <div className="mx-auto my-8 w-[50rem]"> | |
| <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end"> | |
| <Button variant="primary" disabled={props.disabled} onClick={print}> | |
| <CareIcon icon="l-print" className="text-lg" /> | |
| {t("print")} | |
| </Button> | |
| </div> | |
| const content = ( | |
| <div className="mx-auto my-8 w-[50rem]"> | |
| {!props.hideControls && ( | |
| <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end"> | |
| <Button variant="primary" disabled={props.disabled} onClick={print}> | |
| <CareIcon icon="l-print" className="text-lg" /> | |
| {t("print")} | |
| </Button> | |
| </div> | |
| )} |
|
Without adding the hideControls prop, the breadcrumb navigation bar appears duplicated. If it's fine, we can remove the 'Resource Details' navigation and use the 'PrintPreview' one instead. Let me know your thoughts! |
|
@modamaan I believe we can't remove the duplicate breadcrumb without adding an additional prop because the Page component is creating both the title and breadcrumb. Since the Page component is used to render both 'Resource Details' and 'Approval Letter', we might need to either add a prop to control this behavior or create an entirely new component specifically for PrintPreview to avoid duplication. Please check this . |
|
Don't want to remove it, try like this. |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (1)
src/components/Resource/ResourceDetails.tsx (1)
145-152: Clean up whitespace in emergency status displayRemove unnecessary empty space characters and improve readability.
- <span className="font-semibold leading-relaxed"> - {" "} - Is emergency:{" "} - </span> - <span className="badge badge-pill badge-danger px-2 py-1"> - {" "} - {data.emergency ? "yes" : "no"} - </span> + <span className="font-semibold leading-relaxed"> + Is emergency: + </span> + <span className="badge badge-pill badge-danger px-2 py-1"> + {data.emergency ? "yes" : "no"} + </span>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/CAREUI/misc/PrintPreview.tsx(2 hunks)src/Routers/routes/ResourceRoutes.tsx(2 hunks)src/components/Resource/ResourceDetails.tsx(1 hunks)src/components/Resource/ResourcePrintPreview.tsx(1 hunks)
🔇 Additional comments (10)
src/CAREUI/misc/PrintPreview.tsx (2)
Line range hint 42-46: Fix inconsistent control hiding behavior.
The print button is always rendered even when hideControls is true, which contradicts the prop's purpose.
Add the hideControls prop and wrap the print button:
type Props = {
children: ReactNode;
disabled?: boolean;
className?: string;
title: string;
backUrl?: string;
crumbsReplacements?: Record<string, { name?: string; uri?: string; style?: string }>;
+ hideControls?: boolean;
};- <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end">
- <Button variant="primary" disabled={props.disabled} onClick={print}>
- <CareIcon icon="l-print" className="text-lg" />
- {t("print")}
- </Button>
- </div>
+ {!props.hideControls && (
+ <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end">
+ <Button variant="primary" disabled={props.disabled} onClick={print}>
+ <CareIcon icon="l-print" className="text-lg" />
+ {t("print")}
+ </Button>
+ </div>
+ )}31-31:
Define the missing print function.
The print function is used but not defined, which could cause runtime errors.
Add the following implementation before the return statement:
const PrintPreview: React.FC<Props> = (props) => {
const normalScale = useBreakpoints({ default: 0.44, md: 1 });
const { t } = useTranslation();
+ const print = () => {
+ window.print();
+ };
return (Also applies to: 64-64
src/components/Resource/ResourcePrintPreview.tsx (1)
158-164: LGTM: PrintPreview integration looks good.
The PrintPreview component is properly integrated with correct props and navigation.
src/Routers/routes/ResourceRoutes.tsx (1)
7-7: LGTM: Route addition is clean and well-integrated.
The new print route is properly added and follows the existing routing pattern.
Also applies to: 20-20
src/components/Resource/ResourceDetails.tsx (6)
54-56: LGTM: Clean loading state handling
The loading state implementation is clean and follows best practices.
71-84: LGTM: Well-structured assignment info display
The assignment information section is well-structured with proper conditional rendering and semantic HTML.
161-190: LGTM: Clean audit log implementation
The audit log section is well-structured with proper formatting utilities.
191-213: LGTM: Well-structured facility cards section
The facility cards section uses proper conditional rendering and grid layout adaptation.
215-218: LGTM: Clean comments section integration
The comments section is properly integrated with the CommentSection component.
66-69: Verify PrintPreview implementation in the print route
The print functionality has been moved to a separate route. Let's verify that the PrintPreview component is properly implemented in the new route.
✅ Verification successful
PrintPreview component is properly integrated in the print route
The verification confirms that:
ResourcePrintPreviewcomponent is correctly implemented atsrc/components/Resource/ResourcePrintPreview.tsx- It's properly registered in the router at
src/Routers/routes/ResourceRoutes.tsxfor the/resource/:id/printroute - The component correctly imports and uses the
PrintPreviewcomponent from@/CAREUI/misc/PrintPreview - The implementation follows the same pattern as other print preview implementations in the codebase (e.g., ShiftDetails, Investigations, TreatmentSummary)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify PrintPreview implementation in the print route
# Check for the print route implementation
echo "Checking print route implementation..."
rg -l "ResourcePrintPreview" src/
# Check for PrintPreview usage in the new component
echo "Checking PrintPreview usage..."
rg -A 5 "PrintPreview" src/
Length of output: 13590
| <ButtonV2 href={`/resource/${props.id}/print`}> | ||
| <CareIcon icon="l-file-alt" className="mr-2 text-lg" /> Approval | ||
| Letter | ||
| </ButtonV2> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Switch to primary Button variant as discussed
As per the PR comments discussion with reviewer rithviknishad, this should use the primary Button variant from the UI directory instead of ButtonV2.
-<ButtonV2 href={`/resource/${props.id}/print`}>
+<Button href={`/resource/${props.id}/print`} variant="primary">
<CareIcon icon="l-file-alt" className="mr-2 text-lg" /> Approval
Letter
-</ButtonV2>
+</Button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <ButtonV2 href={`/resource/${props.id}/print`}> | |
| <CareIcon icon="l-file-alt" className="mr-2 text-lg" /> Approval | |
| Letter | |
| </ButtonV2> | |
| <Button href={`/resource/${props.id}/print`} variant="primary"> | |
| <CareIcon icon="l-file-alt" className="mr-2 text-lg" /> Approval | |
| Letter | |
| </Button> |
There was a problem hiding this comment.
Switch out the button as coderabbit suggested.
There was a problem hiding this comment.
@Jacobjeevan, thank you for making the change!
If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!
| <ButtonV2 | ||
| data-testid="update-status" | ||
| className="mt-4 sm:mt-2" | ||
| href={`/resource/${data.id}/update`} | ||
| > | ||
| Update Status/Details | ||
| </ButtonV2> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Maintain consistency: Switch to primary Button variant
For consistency with the previous button change, this should also use the primary Button variant.
-<ButtonV2
+<Button
data-testid="update-status"
className="mt-4 sm:mt-2"
href={`/resource/${data.id}/update`}
+ variant="primary"
->
+>
Update Status/Details
-</ButtonV2>
+</Button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <ButtonV2 | |
| data-testid="update-status" | |
| className="mt-4 sm:mt-2" | |
| href={`/resource/${data.id}/update`} | |
| > | |
| Update Status/Details | |
| </ButtonV2> | |
| <Button | |
| data-testid="update-status" | |
| className="mt-4 sm:mt-2" | |
| href={`/resource/${data.id}/update`} | |
| variant="primary" | |
| > | |
| Update Status/Details | |
| </Button> |
There was a problem hiding this comment.
Switch out the button here as well.
There was a problem hiding this comment.
@Jacobjeevan, absolutely! Let's switch out the ButtonV2 component here with the primary Button variant as well for consistency.
<Button
href={`/resource/${props.id}/print`}
variant="primary"
>
<CareIcon icon="l-file-alt" className="mr-2 text-lg" /> Approval Letter
</Button>✏️ Learnings added
Learnt from: Jacobjeevan
PR: ohcnetwork/care_fe#9327
File: src/components/Resource/ResourceDetails.tsx:88-94
Timestamp: 2024-12-12T19:27:20.237Z
Learning: Prefer using the primary `Button` component with the `variant="primary"` prop instead of `ButtonV2` for consistency across the application.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
|
@rithviknishad, as you mentioned, I have created a new route for the PrintPreview such that: The back button now navigates to the Resource Details page instead of the Resources List page. |
|
@rithviknishad can you look into it |
|
👋 Hi, @Rajasimhareddybolla, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
| <div className="pr-16 sm:px-16 sm:text-center"> | ||
| <p className="font-bold text-primary-800"> | ||
| <span className="inline"> | ||
| Assigned to: {formatName(data.assigned_to_object)} -{" "} |
There was a problem hiding this comment.
Let's add translations for all these.
Search for existing key-value pairs in en.json, if not add them, and then use useTranslation hook.
| <ButtonV2 | ||
| data-testid="update-status" | ||
| className="mt-4 sm:mt-2" | ||
| href={`/resource/${data.id}/update`} | ||
| > | ||
| Update Status/Details | ||
| </ButtonV2> |
There was a problem hiding this comment.
Switch out the button here as well.
| data.status === "ON HOLD" ? ( | ||
| <div className="mt-4"> | ||
| <span className="leading-relaxed"> | ||
| The request for resource (details below) placed by yourself is{" "} |
There was a problem hiding this comment.
Let's get translations added for all these as well.
| </span> | ||
| {data.reason || "--"} | ||
| </div> | ||
| <div className="mt-4"> |
There was a problem hiding this comment.
Since these styles are reoccurring, let's create a common fn that renders them.
|
@Rajasimhareddybolla what's the status of the PR |
Fix approval letter formatting to resolve issue #9324
Proposed Changes
The updated Approval Letter formatting looks like this:
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
ResourcePrintPreviewcomponent for displaying a print preview of resource details.ResourceDetailscomponent with improved layout and loading state handling.Bug Fixes