feat(advisory): implement CSAF Source tab with raw JSON and advisory link#1065
Draft
CryptoRodeo wants to merge 4 commits into
Draft
feat(advisory): implement CSAF Source tab with raw JSON and advisory link#1065CryptoRodeo wants to merge 4 commits into
CryptoRodeo wants to merge 4 commits into
Conversation
Define TypeScript interfaces for the full CSAF 2.0 VEX document structure (CsafDocument, CsafVulnerability, CsafProductTree, etc.) and add useFetchAdvisoryCsafById query hook that fetches raw CSAF JSON via the downloadAdvisory endpoint and parses the Blob into typed data. Also add echarts and echarts-for-react dependencies for upcoming tree visualization components. Implements TC-4618 Assisted-by: Claude Code
When advisory labels.type === "csaf", render a CSAF-specific 5-tab layout (Overview, Vulnerabilities, Product Tree, Relationship Tree, Source) instead of the default 2-tab Info/Vulnerabilities view. The CsafAdvisoryDetails component fetches the parsed CSAF document via useFetchAdvisoryCsafById and provides placeholder content for each tab that subsequent tasks will replace with real implementations. Implements TC-4619 Assisted-by: Claude Code
…link Add CsafSource component that displays the full CSAF JSON document in a PatternFly CodeBlock with copy-to-clipboard, and extracts the "self" reference URL to provide a link to the original advisory. Wire the Source tab in csaf-advisory-details.tsx to render CsafSource instead of the placeholder EmptyState. Implements TC-4624 Assisted-by: Claude Code
Contributor
Reviewer's GuideImplements a CSAF-specific advisory details view with a new Source tab that renders the raw CSAF JSON and an optional external advisory link, switching the advisory details layout to this CSAF view when the advisory type is CSAF and adding a typed CSAF model plus a dedicated React Query hook to fetch and parse the CSAF document. Sequence diagram for CSAF advisory Source tab renderingsequenceDiagram
actor User
participant AdvisoryDetails
participant CsafAdvisoryDetails
participant useFetchAdvisoryCsafById
participant downloadAdvisory
participant CsafSource
User->>AdvisoryDetails: open CSAF advisory
AdvisoryDetails->>AdvisoryDetails: check advisory.labels.type
AdvisoryDetails-->>CsafAdvisoryDetails: render CsafAdvisoryDetails(advisoryId)
CsafAdvisoryDetails->>useFetchAdvisoryCsafById: useFetchAdvisoryCsafById(advisoryId)
useFetchAdvisoryCsafById->>downloadAdvisory: downloadAdvisory({ client, path: { key: id } })
downloadAdvisory-->>useFetchAdvisoryCsafById: Blob response
useFetchAdvisoryCsafById->>useFetchAdvisoryCsafById: blob.text() and JSON.parse
useFetchAdvisoryCsafById-->>CsafAdvisoryDetails: csafDocument
CsafAdvisoryDetails->>CsafSource: render CsafSource(csafDocument)
alt [csafDocument.document.references has category self]
CsafSource->>CsafSource: find selfRef
CsafSource-->>User: render advisory link (Button href=selfRef.url)
else [no self reference]
CsafSource-->>User: omit advisory link
end
CsafSource-->>User: render JSON in CodeBlockCode(JSON.stringify(csafDocument, null, 2))
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- In
CsafAdvisoryDetails, the tab content refs are created withReact.createRef()inside the component body, which creates new ref instances on every render; consider switching these touseRefso the refs remain stable across renders. - The new dependencies
echartsandecharts-for-reactare added toclient/package.jsonbut are not used anywhere in this diff; if they aren't needed yet, it would be better to add them in the PR where they are first used to avoid unused dependencies.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `CsafAdvisoryDetails`, the tab content refs are created with `React.createRef()` inside the component body, which creates new ref instances on every render; consider switching these to `useRef` so the refs remain stable across renders.
- The new dependencies `echarts` and `echarts-for-react` are added to `client/package.json` but are not used anywhere in this diff; if they aren't needed yet, it would be better to add them in the PR where they are first used to avoid unused dependencies.
## Individual Comments
### Comment 1
<location path="client/src/app/pages/advisory-details/csaf-advisory-details.tsx" line_range="58-62" />
<code_context>
+ ],
+ });
+
+ const overviewTabRef = React.createRef<HTMLElement>();
+ const vulnerabilitiesTabRef = React.createRef<HTMLElement>();
+ const productTreeTabRef = React.createRef<HTMLElement>();
+ const relationshipTreeTabRef = React.createRef<HTMLElement>();
+ const sourceTabRef = React.createRef<HTMLElement>();
+
+ return (
</code_context>
<issue_to_address>
**issue:** Use `useRef` instead of `React.createRef` for tab content refs to avoid creating new ref objects on every render.
Because this is a function component, these `createRef` calls produce new ref objects on every render, which can interfere with `Tabs`/`TabContent` focus or scroll behavior and undermines refs’ stability. Using `useRef<HTMLElement | null>(null)` for each tab will keep the ref objects stable across renders and match standard function-component patterns.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #1065 +/- ##
==========================================
- Coverage 49.17% 48.86% -0.32%
==========================================
Files 253 255 +2
Lines 5499 5532 +33
Branches 1660 1666 +6
==========================================
- Hits 2704 2703 -1
- Misses 2519 2554 +35
+ Partials 276 275 -1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Wrap JSON.stringify(csafDocument, null, 2) in React.useMemo to avoid re-serializing potentially large CSAF documents on every render. Implements TC-4624 Assisted-by: Claude Code
Collaborator
Author
Verification Report for TC-4624 (commit e1ac462)
Overall: PASSThis comment was AI-generated by sdlc-workflow/verify-pr v0.9.1. |
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
1 participant
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.
Summary
CsafSourcecomponent displaying full CSAF JSON in PatternFlyCodeBlockwith copy-to-clipboardcsaf-advisory-details.tsxto render real component instead of placeholderTest plan
npm run build -w client)Implements TC-4624
Assisted-by: Claude Code
Summary by Sourcery
Add a CSAF-specific advisory details view with a dedicated tabbed layout and a Source tab for viewing raw CSAF documents.
New Features:
Enhancements:
Build: