Conversation
Replace vertical card stack with 3 horizontal tabs (Overview, SBOM Metadata, References) and add rendering for limitation and safetyRiskAssessment fields. Implements TC-4795 Assisted-by: Claude Code Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
Reviewer's GuideReorganizes the AIModelDetails UI into a three-tab layout (Overview, SBOM Metadata, References), introduces parsing/rendering for safety risk assessment and limitation fields, and adds a helper and type to normalize safety risk data from the backend. 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:
- The inline
style={{ paddingTop: 16 }}is repeated across tabs; consider extracting this to a shared className or wrapping component to keep styling consistent and easier to maintain. - In the
safetyRisks.map, usingindexas the React key can cause unstable rendering; if possible, switch to a stable identifier such asrisk.nameor a composite key. - Double‑check the accessibility attributes on
Tabs(e.g.,role="region"on the Tabs container) to align with PatternFly’s recommended tab/tabpanel semantics rather than overriding roles manually.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The inline `style={{ paddingTop: 16 }}` is repeated across tabs; consider extracting this to a shared className or wrapping component to keep styling consistent and easier to maintain.
- In the `safetyRisks.map`, using `index` as the React key can cause unstable rendering; if possible, switch to a stable identifier such as `risk.name` or a composite key.
- Double‑check the accessibility attributes on `Tabs` (e.g., `role="region"` on the Tabs container) to align with PatternFly’s recommended tab/tabpanel semantics rather than overriding roles manually.
## Individual Comments
### Comment 1
<location path="client/src/app/components/AIModelDetails/AIModelDetails.tsx" line_range="100-101" />
<code_context>
+ <StackItem>
+ <Alert variant="warning" isInline title="Safety Risk Assessment">
+ <Stack hasGutter>
+ {safetyRisks.map((risk, index) => (
+ <StackItem key={index}>
+ <strong>{risk.name}</strong>
+ {risk.mitigationStrategy && (
</code_context>
<issue_to_address>
**suggestion (bug_risk):** Avoid using the array index as the React key for safety risks.
Using the array index as a key can cause incorrect component reuse when items are reordered, inserted, or removed. Prefer a stable unique key such as `risk.name`, or a composite like `${risk.name}-${index}` if needed for uniqueness.
```suggestion
{safetyRisks.map((risk, index) => (
<StackItem key={`${risk.name}-${index}`}>
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+100
to
+101
| {safetyRisks.map((risk, index) => ( | ||
| <StackItem key={index}> |
Contributor
There was a problem hiding this comment.
suggestion (bug_risk): Avoid using the array index as the React key for safety risks.
Using the array index as a key can cause incorrect component reuse when items are reordered, inserted, or removed. Prefer a stable unique key such as risk.name, or a composite like ${risk.name}-${index} if needed for uniqueness.
Suggested change
| {safetyRisks.map((risk, index) => ( | |
| <StackItem key={index}> | |
| {safetyRisks.map((risk, index) => ( | |
| <StackItem key={`${risk.name}-${index}`}> |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #1097 +/- ##
==========================================
+ Coverage 51.48% 51.64% +0.15%
==========================================
Files 275 275
Lines 5988 6003 +15
Branches 1853 1861 +8
==========================================
+ Hits 3083 3100 +17
+ Misses 2592 2584 -8
- Partials 313 319 +6
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
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
AIModelDetailscomponent from a vertical card stack into 3 horizontal PatternFly tabs: Overview, SBOM Metadata, and Referenceslimitation(text block) andsafetyRiskAssessment(warning Alert) fields on the Overview tab, absorbing TC-4520 scopeSafetyRisktype andparseSafetyRiskshelper to handle both string and structured array formats from the backendImplements TC-4795
Test plan
🤖 Generated with Claude Code
Summary by Sourcery
Reorganize the AI model details drawer into a tabbed layout separating overview, SBOM metadata, and references, while supporting richer safety risk metadata.
New Features:
Enhancements: