[Customer Portal][FE][web] Refactor: related case naming + code block parsing improvements + UI enhancements - #504
Merged
cloby99 merged 7 commits intoApr 17, 2026
Conversation
Improve handling of [code] blocks by normalizing backslash-escaped and case-variant tags (e.g. [\code], [\/code], [CODE]) and inserting newlines between adjacent tags. Updates convertCodeTagsToHtml to convert normalized [code]...[/code] into <code> blocks and to strip any remaining code tags into newlines. Updates stripAllCodeBlocks to normalize tags and remove code wrappers while preserving inner content and adding newlines where appropriate. These changes make parsing more robust against various tag formats.
Add unit tests covering edge cases for convertCodeTagsToHtml and stripAllCodeBlocks: handling escaped closing/opening markers (e.g. "[\/code][code]"), dropping orphan markers while preserving blank-line separators, and ensuring blank lines/trailing newlines are preserved when stripping multiple code blocks. Also adjust an existing expectation to include blank-line separators and trailing newlines.
Update ChatMessageCard styles to improve code block layout and background handling. Change width from 100% to max-content with a minWidth of 100% for the content and pre elements, add boxSizing, and set pre background to action.disabledBackground so code blocks don't stretch full width and scroll correctly. Also ensure nested code has a transparent background to avoid double backgrounds.
Rename navigation state property from parentCaseId to relatedCaseId when creating a related case to match expected payload. Update CallRequestCard to support multiple preferred times: formatPreferredTimes now returns an array of formatted time strings (or ["--"]) and the component renders them as a bulleted list, falling back to "--" when no times are available. Adds preferredTimeLines local variable and adjusts markup/styling for list rendering.
Rename parentCase -> relatedCase across support types and page to standardize related-case naming. Updates: - CreateCasePage: use relatedCase?.relatedCaseId when building the create request payload. - types/cases.ts: CaseDetails.parentCase -> relatedCase; CreateCaseRequest.parentCaseId -> relatedCaseId. - types/createCasePage.ts: RelatedCaseState.parentCaseId -> relatedCaseId. This aligns frontend state and request payload keys for creating related cases; adjust any backend expectations or consumers accordingly.
Replace occurrences of parentCase/parentCaseId with relatedCase/relatedCaseId to keep naming consistent. Updated mock data in two test files and adjusted the CaseDetailsPage navigate payload to use relatedCaseId when creating a related case.
Update mockCaseDetails in CaseDetailsContent.test.tsx to use the relatedCase property instead of parentCase. This aligns the test fixture with the updated data model property name; no other logic changes were made.
Contributor
📝 WalkthroughWalkthroughThis PR systematically renames the case linkage field from Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
dileepapeiris
changed the title
dileepapeiris
added
Type/Improvement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/customer-portal/webapp/src/features/support/utils/support.ts (1)
1133-1141: Optional: drop the redundant case-sensitive escape regexes.
/\[\\\/code\]/gialready matches[\/CODE](and any casing) due to theiflag, which makes the subsequent/\[\\\/CODE\]/ga no-op. Same for the[\\code]/[\\CODE]pair. Collapsing the duplicate chains is clearer and slightly cheaper. The same applies instripAllCodeBlocks.♻️ Suggested cleanup (apply to both functions)
const normalized = content - .replace(/\[\\\/code\]/gi, "[/code]") - .replace(/\[\\\/CODE\]/g, "[/code]") - .replace(/\[\\code\]/gi, "[code]") - .replace(/\[\\CODE\]/g, "[code]") - .replace( - /\[\/code\]\s*\[code\]/gi, - "[/code]\n[code]", - ); + .replace(/\[\\\/code\]/gi, "[/code]") + .replace(/\[\\code\]/gi, "[code]") + .replace(/\[\/code\]\s*\[code\]/gi, "[/code]\n[code]");Also applies to: 1156-1161
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/customer-portal/webapp/src/features/support/utils/support.ts` around lines 1133 - 1141, The regex chain normalizing escaped code tags contains redundant case-specific variants; simplify the replacements in the normalized assignment (and the analogous block in stripAllCodeBlocks) by removing the duplicate `/\[\\\/CODE\]/g` and `/\[\\CODE\]/g` entries and rely on the case-insensitive `/i` flag (e.g., keep `/\[\\\/code\]/gi` and `/\[\\code\]/gi`). Update the replacement sequence around the `normalized` const and the corresponding logic in `stripAllCodeBlocks` to use only the case-insensitive regexes and preserve the final `/\[\/code\]\s*\[code\]/gi` replacement so behavior stays identical but simpler and slightly more efficient.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@apps/customer-portal/webapp/src/features/support/components/case-details/calls-tab/CallRequestCard.tsx`:
- Around line 274-278: The list items in CallRequestCard use key={timeValue}
which can produce duplicate React keys when two preferred times format to the
same string; update the map over preferredTimeLines in CallRequestCard to use a
unique key per item (e.g., include the map index or a compound key like
`${timeValue}-${index}`) by changing the map callback signature to (timeValue,
index) => ... and setting the key to the index or compound value so the list is
stable and avoids duplicate keys during reconciliation.
---
Nitpick comments:
In `@apps/customer-portal/webapp/src/features/support/utils/support.ts`:
- Around line 1133-1141: The regex chain normalizing escaped code tags contains
redundant case-specific variants; simplify the replacements in the normalized
assignment (and the analogous block in stripAllCodeBlocks) by removing the
duplicate `/\[\\\/CODE\]/g` and `/\[\\CODE\]/g` entries and rely on the
case-insensitive `/i` flag (e.g., keep `/\[\\\/code\]/gi` and `/\[\\code\]/gi`).
Update the replacement sequence around the `normalized` const and the
corresponding logic in `stripAllCodeBlocks` to use only the case-insensitive
regexes and preserve the final `/\[\/code\]\s*\[code\]/gi` replacement so
behavior stays identical but simpler and slightly more efficient.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: f56a24df-b61c-4a19-9e7d-be983c8cde50
📒 Files selected for processing (12)
apps/customer-portal/webapp/src/features/operations/pages/ServiceRequestDetailsPage.tsxapps/customer-portal/webapp/src/features/support/components/case-details/activity-tab/ChatMessageCard.tsxapps/customer-portal/webapp/src/features/support/components/case-details/calls-tab/CallRequestCard.tsxapps/customer-portal/webapp/src/features/support/components/case-details/details-tab/__tests__/CaseDetailsContent.test.tsxapps/customer-portal/webapp/src/features/support/components/case-details/details-tab/__tests__/CaseDetailsDetailsPanel.test.tsxapps/customer-portal/webapp/src/features/support/components/case-details/header/__tests__/CaseDetailsTabPanels.test.tsxapps/customer-portal/webapp/src/features/support/pages/CaseDetailsPage.tsxapps/customer-portal/webapp/src/features/support/pages/CreateCasePage.tsxapps/customer-portal/webapp/src/features/support/types/cases.tsapps/customer-portal/webapp/src/features/support/types/createCasePage.tsapps/customer-portal/webapp/src/features/support/utils/__tests__/support.test.tsapps/customer-portal/webapp/src/features/support/utils/support.ts
cloby99
approved these changes
Apr 17, 2026
cloby99
merged commit Apr 17, 2026
efaade1
into
wso2-open-operations:dev-app-customer-portal
1 check passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This pull request introduces several improvements and refactors across the support case details and related features, focusing on consistent naming, improved code block handling in messages, and better display of preferred call times. The most significant changes are grouped below:
Refactor and Consistency in Related Case Naming:
parentCase/parentCaseIdtorelatedCase/relatedCaseIdin types, navigation state, and API requests for clarity and consistency. This affects types likeCaseDetails,CreateCaseRequest,RelatedCaseState, and related components and tests. [1] [2] [3] [4] [5] [6] [7] [8] [9]Enhanced Code Block Handling in Support Messages:
convertCodeTagsToHtmlandstripAllCodeBlocksutility functions to normalize and correctly handle escaped or orphaned[code]tags, ensuring cleaner rendering and text extraction. [1] [2]UI Improvements for Message and Call Time Display:
CallRequestCardto present them as a list when multiple times are provided and improved the formatting logic for clarity. [1] [2] [3]These changes collectively improve code maintainability, user experience, and the robustness of message parsing and display.
Summary by CodeRabbit
Release Notes
Bug Fixes
Style
UI Improvements