Render multi line text in Questionnaire Response #10216
Conversation
WalkthroughThe pull request introduces a consistent whitespace handling approach in two React components: 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. |
…m/rajku-dev/care_fe into issue/10215/newline-questionnaire
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/Facility/ConsultationDetails/ObservationsList.tsx (1)
100-102: LGTM! Consider extracting the class name to a constant.The addition of
whitespace-pre-wrapcorrectly addresses the multi-line text rendering requirement. This is particularly important for medical observations that may contain formatted text or line breaks.Consider extracting commonly used class combinations into constants or utility classes for better maintainability:
+const TEXT_BLOCK_CLASSES = "mt-1 font-medium whitespace-pre-wrap"; + // Later in the code -<div className="mt-1 font-medium whitespace-pre-wrap"> +<div className={TEXT_BLOCK_CLASSES}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/Facility/ConsultationDetails/ObservationsList.tsx(1 hunks)src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx(1 hunks)
🔇 Additional comments (1)
src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx (1)
53-53: LGTM! Consider adding a test case for multi-line text.The addition of
whitespace-pre-wrapcorrectly implements the multi-line text rendering requirement, maintaining consistency with the ObservationsList component.To ensure the feature works as expected, consider adding a test case with multi-line text input. Here's a suggested test case structure:
test('renders multi-line text with preserved formatting', () => { const multiLineQuestion = { id: '1', text: 'Description', type: 'text' }; const multiLineResponse = { question_id: '1', values: [{ value: 'Line 1\nLine 2\n Indented Line' }] }; render( <QuestionResponseValue question={multiLineQuestion} response={multiLineResponse} /> ); // Verify that line breaks and indentation are preserved const responseText = screen.getByText('Line 1\nLine 2\n Indented Line'); expect(responseText).toHaveClass('whitespace-pre-wrap'); });✅ Verification successful
Styling change is consistent with codebase patterns
The addition of
whitespace-pre-wrapto preserve formatting in questionnaire responses follows established patterns across the codebase, where this style is consistently used for multi-line text display in similar components like ObservationsList and ResourceDetails.🏁 Scripts executed
The following scripts were executed for the analysis:
Error: No shell scripts found
Script:
#!/bin/bash # Search for similar whitespace handling patterns echo "=== Searching for whitespace-pre-wrap usage ===" rg "whitespace-pre-wrap" -B 2 -A 2 echo -e "\n=== Looking for related test files ===" fd "QuestionnaireResponsesList.test" -e tsx -e ts echo -e "\n=== Finding similar text formatting components ===" rg "className=\".*text-sm.*\"" -B 2 -A 2Length of output: 121379
|
@rajku-dev 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
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
ObservationsListandQuestionnaireResponsesListcomponents to preserve whitespace and improve text wrappingwhitespace-pre-wrapclass to enhance text formatting and readability