Skip to content

feat(preprod): Show original filename tooltip on renamed snapshots#111325

Merged
NicoHinderling merged 3 commits intomasterfrom
nicolashinderling/feat/snapshot-renamed-tooltip
Mar 23, 2026
Merged

feat(preprod): Show original filename tooltip on renamed snapshots#111325
NicoHinderling merged 3 commits intomasterfrom
nicolashinderling/feat/snapshot-renamed-tooltip

Conversation

@NicoHinderling
Copy link
Contributor

@NicoHinderling NicoHinderling commented Mar 23, 2026

Show the previous filename when hovering over a renamed snapshot image's filename.

When images are renamed between builds, the UI now shows a tooltip with the rename
transition (old_name → new_name) on hover. Renamed filenames use the accent
InlineCode variant (purple tint) as a visual hint that additional info is available.

Changes:

  • Add previous_image_file_name to the SnapshotImage TypeScript interface
  • Wrap renamed image filenames in a Tooltip showing the before → after names
  • Use accent InlineCode inside the tooltip for consistent styling

Closes EME-961

Regular snapshot title UI:
image

Renamed snapshot title:
image

tooltip if you hover the title:
image

@linear-code
Copy link

linear-code bot commented Mar 23, 2026

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Mar 23, 2026
@NicoHinderling NicoHinderling marked this pull request as ready for review March 23, 2026 18:22
@NicoHinderling NicoHinderling requested a review from a team as a code owner March 23, 2026 18:22
<InlineCode>{currentImage.image_file_name}</InlineCode>
</span>
}
maxWidth={2000}
Copy link
Member

Choose a reason for hiding this comment

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

What's the 2000 here? Seems oddly specific

Copy link
Contributor Author

Choose a reason for hiding this comment

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

it's the max width, i just don't want the tooltip wrap unless it really needs to. really any big number here i guess lol

@NicoHinderling NicoHinderling force-pushed the nicolashinderling/feat/snapshot-renamed-tooltip branch from f980cce to 9857c17 Compare March 23, 2026 19:05
Copy link
Contributor Author

NicoHinderling commented Mar 23, 2026

<Layout.Title>
{/* TODO: Replace with app-id/version when available */}
<Heading as="h2">{t('Snapshots')}</Heading>
{t('Snapshots')}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

technically unrelated to this change, but noticed this simple console error I wanted to fix too

Copy link
Contributor

@cursor cursor bot left a comment

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

Bugbot Autofix prepared a fix for the issue found in the latest run.

  • ✅ Fixed: Removed empty filename guard renders empty InlineCode element
    • Added a truthiness guard in ImageFileName so empty filenames now render nothing instead of an empty InlineCode badge.

Create PR

Or push these changes by commenting:

@cursor push bb23dfbf76
Preview (bb23dfbf76)
diff --git a/static/app/views/preprod/snapshots/main/snapshotMainContent.tsx b/static/app/views/preprod/snapshots/main/snapshotMainContent.tsx
--- a/static/app/views/preprod/snapshots/main/snapshotMainContent.tsx
+++ b/static/app/views/preprod/snapshots/main/snapshotMainContent.tsx
@@ -286,6 +286,10 @@
   fileName: string;
   previousFileName?: string;
 }) {
+  if (!fileName) {
+    return null;
+  }
+
   if (previousFileName) {
     return (
       <Tooltip

This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.

NicoHinderling and others added 3 commits March 23, 2026 12:16
Add previous_image_file_name to SnapshotImage type and display a
tooltip on renamed image filenames showing the rename transition
(old name → new name). Renamed filenames use the accent InlineCode
variant as a visual hint that they are hoverable.

Refs EME-961
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Changed and renamed types shared one union variant which prevented
TypeScript from narrowing the discriminant after type guards.
@NicoHinderling NicoHinderling force-pushed the nicolashinderling/feat/snapshot-renamed-tooltip branch from 9857c17 to b1f224b Compare March 23, 2026 19:17
@NicoHinderling NicoHinderling merged commit 266fce8 into master Mar 23, 2026
70 of 71 checks passed
@NicoHinderling NicoHinderling deleted the nicolashinderling/feat/snapshot-renamed-tooltip branch March 23, 2026 20:18
NicoHinderling added a commit that referenced this pull request Mar 23, 2026
…#111332)

## Summary

Follow-up to #111325 — refactors renamed snapshot items to use
`SnapshotDiffPair` instead of a flat `SnapshotImageResponse` with a
`previous_image_file_name` field.

A rename is conceptually a diff from old image → new image, so the pair
structure naturally models this:
- `base_image` = old filename (looked up by `previous_image_file_name`)
- `head_image` = new filename
- `diff` / `diff_image_key` remain `None` (no visual diff for renames)

### Changes

- **`SnapshotImageResponse`**: Remove `previous_image_file_name` field
(no longer needed in API response)
- **`SnapshotDetailsApiResponse`**: Change `renamed` from
`list[SnapshotImageResponse]` to `list[SnapshotDiffPair]`
- **`CategorizedComparison`**: Same type change for `renamed`
- **`categorize_comparison_images`**: Build `SnapshotDiffPair` for
renamed items by looking up base image by old filename from
`base_images_by_file_name`

Note: `previous_image_file_name` is kept on `ComparisonImageResult` in
`manifest.py` — that's internal transport from tasks → categorizer, not
part of the API response.

## Test plan

- [ ] Existing backend snapshot tests pass
- [ ] Frontend PR (#111325) updated to consume renamed as
`SnapshotDiffPair[]`
- [ ] Manual: renamed items show tooltip with old → new filename

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants