Repository navigation
[CSM Portal Microapp] Add Security Center (Security reports + Vulnerabilities) - #1211
Merged
rksk merged 17 commits intoJul 23, 2026
Conversation
Now used by Security Center's vulnerability detail page too, not just Customers — components/customers/MetaRow implied a scope it no longer has.
Security reports are cases of type "security_report_analysis" — ported directly from the Engagements filter/service/sheet infrastructure (State, Work state, Assignee, Project, Product), minus the engagement-type group, which is engagement-only. Read-only for this pass, "New security report" deliberately deferred.
VulnerabilityDto/Vulnerability (GET /products/vulnerabilities/{id} and the
search row share the same shape, like Account) plus the priority label/color
mapping — mirrors the webapp's csm-security-center/utils/vulnerabilities.ts.
Search (infinite scroll) + get by id. Applies a 50-row page limit proactively rather than the spec's 100 — this backend has now shown the same doc-vs-reality lie on four other search endpoints (comments, products, deployments, deployed products).
Search + single-select priority filter, infinite-scrolled — mirrors the webapp's ProductVulnerabilitiesTab/ProductVulnerabilityDetailPage.
Replaces the ComingSoonPage placeholder with Security reports | Vulnerabilities tabs, plus the vulnerability detail route.
created.id was reading the wrapper's top level instead of .case.id, so every case-create redirect (New Case, New Security Report) landed on /cases/undefined and 400ed loading the detail page. Confirmed the real response shape against the webapp's usePostCsmCase.ts, which already unwraps res.case for the same reason — openapi.yaml's postCases 201 response doesn't reflect the envelope.
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThe Security Center now provides security report browsing and creation, product vulnerability browsing and detail views, paginated API services, filter controls, new routes, and shared attachment and metadata component updates. ChangesSecurity Center data contracts and services
Security report browsing
Vulnerability experience
Security report creation
Shared components
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant Operator
participant SecurityCenterPage
participant SecurityReportsTab
participant SecurityReportFiltersSheet
participant securityReports
participant CasesAPI
Operator->>SecurityCenterPage: open Security Center
SecurityCenterPage->>SecurityReportsTab: render reports tab
SecurityReportsTab->>securityReports: request filtered reports
securityReports->>CasesAPI: POST cases search
CasesAPI-->>securityReports: paginated reports
securityReports-->>SecurityReportsTab: report items
Operator->>SecurityReportFiltersSheet: apply filters
SecurityReportFiltersSheet-->>SecurityReportsTab: updated filters
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ 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 |
![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: 2
🧹 Nitpick comments (1)
apps/csm-portal/microapp/src/components/security-center/SecurityReportFiltersSheet.tsx (1)
58-144: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider extracting a shared async multi-select helper.
ProjectMultiSelect,AssigneeMultiSelect, andProductMultiSelectall repeat the same debounce →useQuery→ dedupe-selected-into-options →Autocompletewiring, differing only in the data source and value shape. A small generic wrapper (data source, label getter, equality fn) would reduce duplication and make future filter fields cheaper to add.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/csm-portal/microapp/src/components/security-center/SecurityReportFiltersSheet.tsx` around lines 58 - 144, The three multi-select components duplicate Autocomplete wiring and should be consolidated into a shared generic helper. Extract the common debounce, query, selected-option merging, loading, equality, and change-handling logic from ProjectMultiSelect, AssigneeMultiSelect, and ProductMultiSelect, while allowing each caller to provide its data source and value-shape-specific label, equality, and mapping behavior; preserve their existing labels, search behavior, and selection results.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/csm-portal/microapp/src/components/security-center/VulnerabilitiesTab.tsx`:
- Around line 85-90: Update the debounced search setup in VulnerabilitiesTab to
pass filters.search.trim() into useDebouncedValue, matching SecurityReportsTab.
Keep the existing infiniteQuery call and filter behavior unchanged while
ensuring leading and trailing whitespace is removed before API requests.
In `@apps/csm-portal/microapp/src/pages/NewSecurityReportPage.tsx`:
- Around line 81-90: Update the size calculation in the NewSecurityReportPage
flow to construct the exact payload passed to mutateAsync, measure
TextEncoder().encode(JSON.stringify(payload)).length, and use that same payload
for submission. Replace the attachment-only overLimit logic around
attachmentBytes, nonAttachmentBytes, attachmentsBudget, and overLimit so JSON
syntax, IDs, names, and escaping are included.
---
Nitpick comments:
In
`@apps/csm-portal/microapp/src/components/security-center/SecurityReportFiltersSheet.tsx`:
- Around line 58-144: The three multi-select components duplicate Autocomplete
wiring and should be consolidated into a shared generic helper. Extract the
common debounce, query, selected-option merging, loading, equality, and
change-handling logic from ProjectMultiSelect, AssigneeMultiSelect, and
ProductMultiSelect, while allowing each caller to provide its data source and
value-shape-specific label, equality, and mapping behavior; preserve their
existing labels, search behavior, and selection results.
🪄 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 Plus
Run ID: be497e78-f7dd-4cae-8e3a-9cff93bc06d5
📒 Files selected for processing (23)
apps/csm-portal/microapp/src/App.tsxapps/csm-portal/microapp/src/components/common/MetaRow.tsxapps/csm-portal/microapp/src/components/customers/DeploymentDetailDialog.tsxapps/csm-portal/microapp/src/components/security-center/SecurityReportFiltersSheet.tsxapps/csm-portal/microapp/src/components/security-center/SecurityReportsTab.tsxapps/csm-portal/microapp/src/components/security-center/VulnerabilitiesTab.tsxapps/csm-portal/microapp/src/components/support/AttachmentsField.tsxapps/csm-portal/microapp/src/config/endpoints.tsapps/csm-portal/microapp/src/pages/AccountDetailPage.tsxapps/csm-portal/microapp/src/pages/NewSecurityReportPage.tsxapps/csm-portal/microapp/src/pages/ProjectDetailPage.tsxapps/csm-portal/microapp/src/pages/SecurityCenterPage.tsxapps/csm-portal/microapp/src/pages/VulnerabilityDetailPage.tsxapps/csm-portal/microapp/src/services/cases.tsapps/csm-portal/microapp/src/services/securityReports.tsapps/csm-portal/microapp/src/services/vulnerabilities.tsapps/csm-portal/microapp/src/types/case.dto.tsapps/csm-portal/microapp/src/types/index.tsapps/csm-portal/microapp/src/types/vulnerability.dto.tsapps/csm-portal/microapp/src/types/vulnerability.model.tsapps/csm-portal/microapp/src/utils/attachments.tsapps/csm-portal/microapp/src/utils/securityReports.tsapps/csm-portal/microapp/src/utils/vulnerabilities.ts
…ating The prior check summed subject/description bytes plus a flat 4KB buffer, missing per-attachment JSON overhead (field names, braces, commas, filenames) — a submission with several small attachments could slip past overLimit and still 413 against the backend's real cap. Now measures the actual JSON.stringify'd payload handleSubmit sends.
|
@coderabbitai review |
Contributor
✅ Action performedReview finished.
|
rksk
approved these changes
Jul 23, 2026
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
3 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.
Purpose
Ports the webapp's Security Center (
CsmSecurityCenterPage) to the microapp: cross-customer security reports, product vulnerabilities, and creating a new security report — none of which existed in the microapp yet.Goals
security_report_analysis, search + State/Work state/Assignee/Project/Product filters, infinite-scrolledCreateSecurityReportPageApproach
pages/SecurityCenterPage.tsx— 2-tab shell, mirrors the webapp's tab splitcomponents/security-center/{SecurityReportsTab,VulnerabilitiesTab,SecurityReportFiltersSheet}.tsx,pages/VulnerabilityDetailPage.tsx,services/{securityReports,vulnerabilities}.ts,types/vulnerability.{dto,model}.tspages/NewSecurityReportPage.tsx— reuses the same Project/Deployment/Product cascade pattern asNewCasePage.tsx, but attachments are embedded raw-base64 directly in the create payload (backend requires ≥1 for this case type) rather than uploaded separately afterward, and there's an aggregate 10 MiB body-size budget check matching the backend's actual capPOST /caseswraps its response in a{ message, case }envelope (confirmed against the webapp'susePostCsmCase.ts) — the microapp'scases.createwas reading.idoff the wrapper instead of.case.id, so every case-create redirect (New Case and New Security Report both) landed on/cases/undefined. Fixed once at theservices/cases.tslevel.User stories
As a CSM engineer, I can browse security reports and product vulnerabilities, and file a new security report, from the microapp.
Release note
Added the Security Center feature (security reports, vulnerabilities, new-report creation) to the CSM Portal microapp.
Documentation
N/A — internal CSM portal UI, no external doc surface affected.
Automation tests
npm run lintandnpm run buildpassing locally/cases/undefinedredirect bug) was caught and fixed via live testingSecurity checks
Test environment
npm run lint,npm run buildall passing locallySummary by CodeRabbit