feat(advisory): add CSAF type detection and conditional 5-tab layout#1064
Draft
CryptoRodeo wants to merge 2 commits into
Draft
feat(advisory): add CSAF type detection and conditional 5-tab layout#1064CryptoRodeo wants to merge 2 commits into
CryptoRodeo wants to merge 2 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
Contributor
Reviewer's GuideImplements CSAF-aware advisory details by detecting CSAF advisories, routing them to a new 5-tab CSAF-specific view backed by a new CSAF document query hook and type definitions, while preserving the existing 2-tab layout for non-CSAF advisories and adding CSAF-related dependencies. Sequence diagram for CSAF-aware advisory details renderingsequenceDiagram
actor User
participant AdvisoryDetails
participant CsafAdvisoryDetails
participant useFetchAdvisoryCsafById
participant downloadAdvisory
User->>AdvisoryDetails: navigate to AdvisoryDetails
AdvisoryDetails->>AdvisoryDetails: useFetchAdvisoryById(advisoryId)
AdvisoryDetails->>AdvisoryDetails: isCsaf = advisory.labels.type === csaf
alt CSAF advisory
AdvisoryDetails->>CsafAdvisoryDetails: render(advisoryId)
CsafAdvisoryDetails->>useFetchAdvisoryCsafById: useFetchAdvisoryCsafById(advisoryId)
useFetchAdvisoryCsafById->>downloadAdvisory: downloadAdvisory(path.key = advisoryId)
downloadAdvisory-->>useFetchAdvisoryCsafById: Blob
useFetchAdvisoryCsafById->>useFetchAdvisoryCsafById: JSON.parse(text) as CsafDocument
useFetchAdvisoryCsafById-->>CsafAdvisoryDetails: csafDocument
CsafAdvisoryDetails->>CsafAdvisoryDetails: useTabControls(tabKeys = [overview, vulnerabilities, product-tree, relationship-tree, source])
CsafAdvisoryDetails-->>User: 5-tab CSAF layout
else non-CSAF advisory
AdvisoryDetails->>AdvisoryDetails: useTabControls(tabKeys = [info, vulnerabilities])
AdvisoryDetails-->>User: 2-tab Info/Vulnerabilities layout
end
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 recreates them on every render; consider switching touseRefso the same ref instances are preserved across renders. - In
useFetchAdvisoryCsafById,JSON.parse(text)can throw if the advisory content is not valid CSAF JSON; it may be worth wrapping this in a try/catch and surfacing a clearer error state to the UI. - The new
echartsandecharts-for-reactdependencies are added but not yet used anywhere; consider deferring their inclusion until the corresponding visualization tabs are implemented to avoid unnecessary bundle growth for now.
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 recreates them on every render; consider switching to `useRef` so the same ref instances are preserved across renders.
- In `useFetchAdvisoryCsafById`, `JSON.parse(text)` can throw if the advisory content is not valid CSAF JSON; it may be worth wrapping this in a try/catch and surfacing a clearer error state to the UI.
- The new `echarts` and `echarts-for-react` dependencies are added but not yet used anywhere; consider deferring their inclusion until the corresponding visualization tabs are implemented to avoid unnecessary bundle growth for now.
## Individual Comments
### Comment 1
<location path="client/src/app/pages/advisory-details/csaf-advisory-details.tsx" line_range="56-60" />
<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 (bug_risk):** Using React.createRef inside a function component recreates refs on every render and can break tab content linkage.
Since this is a function component, `React.createRef` will create new refs on every render, so the `tabContentRef` values passed into `Tab`/`TabContent` won’t stay stable. This can cause subtle focus and tab-behavior bugs. Use `useRef<HTMLElement | null>()` instead so the refs persist across renders, e.g.:
```ts
const overviewTabRef = React.useRef<HTMLElement | null>(null);
const vulnerabilitiesTabRef = React.useRef<HTMLElement | null>(null);
const productTreeTabRef = React.useRef<HTMLElement | null>(null);
const relationshipTreeTabRef = React.useRef<HTMLElement | null>(null);
const sourceTabRef = React.useRef<HTMLElement | null>(null);
```
Then continue passing the ref objects (e.g. `overviewTabRef`) into `tabContentRef`/`ref`.
</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 #1064 +/- ##
==========================================
- Coverage 49.17% 48.94% -0.23%
==========================================
Files 253 254 +1
Lines 5499 5522 +23
Branches 1660 1662 +2
==========================================
- Hits 2704 2703 -1
- Misses 2519 2544 +25
+ 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:
|
Collaborator
Author
Verification Report for TC-4619 (commit 4db37d1)
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
labels.type === "csaf"and conditionally render 5-tab CSAF visualizer layoutCsafAdvisoryDetailscomponent with tabs: Overview, Vulnerabilities, Product Tree, Relationship Tree, SourceTest plan
npm run build -w client)Implements TC-4619
Assisted-by: Claude Code
Summary by Sourcery
Introduce CSAF-specific advisory details view with a 5-tab layout while preserving the existing layout for non-CSAF advisories.
New Features:
Enhancements:
Build: