Skip to content

feat(ai-model): reorganize AIModelDetails into tabbed layout#1097

Closed
ikanias wants to merge 1 commit into
mainfrom
TC-4795
Closed

feat(ai-model): reorganize AIModelDetails into tabbed layout#1097
ikanias wants to merge 1 commit into
mainfrom
TC-4795

Conversation

@ikanias

@ikanias ikanias commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Reorganize AIModelDetails component from a vertical card stack into 3 horizontal PatternFly tabs: Overview, SBOM Metadata, and References
  • Add rendering for limitation (text block) and safetyRiskAssessment (warning Alert) fields on the Overview tab, absorbing TC-4520 scope
  • Add SafetyRisk type and parseSafetyRisks helper to handle both string and structured array formats from the backend

Implements TC-4795

Test plan

  • Manual UI test: open model drawer from Models list → verify 3 tabs render with correct content distribution
  • Manual UI test: open model drawer from SBOM details Models tab → verify same 3-tab layout
  • Manual UI test: verify limitation and safetyRiskAssessment render on Overview tab when present in model data
  • Manual UI test: verify absent optional fields are hidden (no empty placeholders)
  • Manual UI test: verify tab switching works without drawer close (state persists)

🤖 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:

  • Introduce a PatternFly tabbed layout for AI model details with Overview, SBOM Metadata, and References sections.
  • Render safety risk assessments and model limitations in the Overview tab when present in model properties.
  • Support structured safety risk metadata through a new SafetyRisk type and parsing helper for mixed backend formats.

Enhancements:

  • Preserve AI model download and external reference actions within the new References tab layout.

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>
@sourcery-ai

sourcery-ai Bot commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

Reviewer's Guide

Reorganizes 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

Change Details Files
Refactor AIModelDetails layout from stacked cards to PatternFly tabs and redistribute existing content.
  • Replace top-level Stack of Cards with a Tabs component containing three Tab panes: overview, metadata, and references.
  • Move identity/purpose fields into the Overview tab using a padded Stack and compact 2-column DescriptionList.
  • Move SBOM metadata fields into the SBOM Metadata tab while preserving existing DescriptionList structure.
  • Move external references and download button into the References tab, still conditionally rendered based on available data.
  • Introduce local state to track the active tab via activeTabKey and onSelect handler.
client/src/app/components/AIModelDetails/AIModelDetails.tsx
Add rendering of safety risk assessment and limitation fields on the Overview tab.
  • Parse safetyRiskAssessment from model properties and render as an inline warning Alert when any risks are present.
  • Within the Alert, iterate over safety risks and display each risk name and optional mitigation strategy using Stack/Content components.
  • Render a Limitations section with heading and paragraph only when the limitation property is present.
client/src/app/components/AIModelDetails/AIModelDetails.tsx
Extend model property typing and add helper to normalize safety risk data from the backend.
  • Introduce SafetyRisk interface describing a risk name and optional mitigationStrategy.
  • Allow ModelProperties.safetyRiskAssessment to be either a string or an array of SafetyRisk objects.
  • Add parseSafetyRisks utility that returns an empty array for falsy input, passes through SafetyRisk arrays, and wraps string values as a single SafetyRisk item.
  • Use parseSafetyRisks in AIModelDetails to feed the Overview tab’s safety risk rendering.
client/src/app/components/AIModelDetails/utils.ts
client/src/app/components/AIModelDetails/AIModelDetails.tsx

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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, 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.
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>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
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}>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

codecov Bot commented Jun 12, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 5.26316% with 18 lines in your changes missing coverage. Please review.
✅ Project coverage is 51.64%. Comparing base (1920772) to head (3c8d9a9).

Files with missing lines Patch % Lines
...c/app/components/AIModelDetails/AIModelDetails.tsx 0.00% 14 Missing ⚠️
client/src/app/components/AIModelDetails/utils.ts 20.00% 4 Missing ⚠️
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     
Flag Coverage Δ
e2e 69.72% <7.69%> (+0.21%) ⬆️
unit 2.81% <0.00%> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@carlosthe19916

Copy link
Copy Markdown
Collaborator

Closing this PR as per internal discussions there is no need to change the current status of the main branch and https://redhat.atlassian.net/browse/TC-4795 was meant to be a test and not an actual request

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants