fix(ui): secret field json diff visibility issue by IgorHorta · Pull Request #5274 · Infisical/infisical

IgorHorta · 2026-01-26T18:20:24Z

Context

Previously, when reviewing secret changes in the approval workflow, users could only see that a secret value had changed, but couldn't easily identify exactly what changed within the value. This made it difficult to review changes, especially for long strings or multiline values.

This PR implements an enhanced diff visualization for secret approvals that provides:

Line-by-line comparison for multiline secret values with visual indicators (+ for additions, - for deletions)
Word-level highlighting within modified lines to pinpoint exactly which words/characters changed
Single-line diff support with inline word highlighting (no +/- indicators for cleaner display)
Auto-scroll to first change to help users quickly find what changed
Enhanced visual design with darker tinted backgrounds (#120808 for old, #081208 for new) for better contrast
Proper text wrapping for long strings to prevent overflow

The implementation uses a word-boundary-aware diff algorithm similar to GitHub's diff view, making it much easier to review and approve secret changes.

Related to: SECRETS-65

Screenshots

Screenshare.-.2026-01-26.4_15_51.PM.mp4

Steps to verify the change

Test Case 1: Single-Line Secret Diff

Navigate to a secret approval request
Find a secret where the value is a single line (no newlines) and has been changed
Expected:
- The changed words/characters are highlighted inline (red for old, green for new)
- No +/- indicators or line containers
- Text wraps if the value is very long

Test Case 2: Multiline Secret Diff

Navigate to a secret approval request
Find a secret where the value contains newlines and has been changed
Expected:
- Changed lines show - (red) for deletions and + (green) for additions
- Modified lines show both old and new versions with word-level highlighting
- Full lines are highlighted with the appropriate background color
- Container automatically scrolls to the first change

Test Case 3: Long String Wrapping

Create or find a secret with a very long value (e.g., a long URL or connection string)
Request an approval with a change to this secret
Expected:
- The text wraps within the container instead of overflowing
- Horizontal scrolling is only needed if absolutely necessary
- Word-level highlighting still works correctly across wrapped lines

Test Case 4: Auto-Scroll Behavior

Navigate to a secret approval request with changes
If the first change is not visible in the viewport
Expected:
- The container automatically scrolls to show the first change
- Only the inner diff container scrolls, not the entire page
- Scrolling is smooth and centers the first change in the viewport

Test Case 5: Visual Design

Navigate to a secret approval request
Observe the diff containers
Expected:
- Previous version container has a darker red-tinted background (#120808)
- New version container has a darker green-tinted background (#081208)
- Colors provide good contrast against the card backgrounds
- Highlighting is clearly visible

Test Case 6: Edge Cases

Test with secrets that have:
- Only whitespace changes
- Special characters and unicode
- Very long single words (no spaces)
- Empty to non-empty or vice versa
Expected: All cases handle gracefully without breaking the UI

Type

Checklist

Title follows the conventional commit format: type(scope): short description (scope is optional, e.g., fix: prevent crash on sync or fix(api): handle null response).
Tested locally
Updated docs (if needed)
Read the contributing guide

…pprovals - Implement multiline diff with line-by-line comparison for secret values - Add word-level highlighting for changed words within modified lines - Support single-line diff with inline word highlighting (no +/- indicators) - Add auto-scroll to first change in diff containers - Apply darker tinted backgrounds (#120808 for old, #081208 for new) to diff containers - Fix text wrapping for long strings using break-words and whitespace-pre-wrap

maidul98 · 2026-01-26T18:21:05Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

greptile-apps · 2026-01-26T18:47:58Z

Greptile Overview

Greptile Summary

This PR adds enhanced diff visualization for secret approval requests using the diff library. The implementation provides line-by-line and word-level highlighting to show exactly what changed in secret values, making it easier to review changes.

Key changes:

Added diff package (v8.0.3) for computing line and word diffs
Implemented renderSingleLineDiffForApproval and renderMultilineDiffForApproval functions to visualize changes
Added auto-scroll functionality to center the first change in view
Applied color-coded backgrounds (#120808 for old, #081208 for new) with inline highlighting

Issue found:

Performance concern: No input size limits before running diff algorithms, which could cause browser freezing with very large secret values (e.g., multi-MB strings)

Confidence Score: 4/5

This PR is generally safe to merge with one performance concern that should be addressed
The implementation is solid and uses a well-established library (diff) for computing changes. The code properly handles edge cases (empty values, single-line vs multiline). However, there's a performance/DoS concern: no size limits before running O(n*m) diff algorithms on potentially very large secret values. This could freeze the browser if a user submits extremely large secrets.
SecretApprovalRequestChangeItem.tsx needs size validation before diff operations

Important Files Changed

Filename	Overview
frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx	implemented word/line-level diff visualization with auto-scroll, uses `diff` library for change detection

greptile-apps

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

...pprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx

victorvhs017 · 2026-01-26T20:22:36Z

If I add a secret with whitespace at the start and the end of a secret value, it shows the change here:

But it doesn't show here

And if I save and merge, it's not there.

It would be good to standardize the behavior:

trim and not commit anything
do not trim and add the whitespace to the value

victorvhs017 · 2026-01-26T20:43:30Z

When we have multiple words changed, it highlights one by one; in this case, it should be the whole block.

victorvhs017 · 2026-01-26T20:58:40Z

When we have multiple words changed, it highlights one by one; in this case, it should be the whole block.

This is another example

What I did here is that I removed something at the end and added something at the end of the text

IgorHorta · 2026-01-26T22:10:53Z

If I add a secret with whitespace at the start and the end of a secret value, it shows the change here:
But it doesn't show here And if I save and merge, it's not there.
It would be good to standardize the behavior:

trim and not commit anything

do not trim and add the whitespace to the value

fixed!

...pprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx

victorvhs017 · 2026-01-26T23:00:27Z

Here, I added a new secret and there's a space splitting the first line from the rest of the value

victorvhs017 · 2026-01-26T23:26:08Z

Here I'm removing the first empty line, and this is the change I'm getting:

backend/src/ee/services/license/license-fns.ts

.../secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx

...pprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx

victorvhs017 · 2026-01-27T01:22:11Z

@greptileai re-review and update your summary

greptile-apps

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

...pprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx

victorvhs017

LGTM

IgorHorta added 3 commits January 26, 2026 15:10

fix: revert license changes

2c41c4d

IgorHorta marked this pull request as ready for review January 26, 2026 18:44

IgorHorta changed the title ~~Igor/secrets 65 secret field json diff visibility issue~~ fix(ui): secret field json diff visibility issue Jan 26, 2026

fix: improving code

345ada0

IgorHorta assigned victorvhs017 Jan 26, 2026

greptile-apps bot reviewed Jan 26, 2026

View reviewed changes

...pprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx Show resolved Hide resolved

IgorHorta added 2 commits January 26, 2026 16:08

fix: lint issues

f6d39cc

fix: final lint issue

b235880

IgorHorta added 2 commits January 26, 2026 18:52

fix: address concerns from code review

862c63b

fix: lint issues

2a539b5

victorvhs017 requested changes Jan 26, 2026

View reviewed changes

fix: license file

36007c8

fix: code review requests

82746ee

IgorHorta requested a review from victorvhs017 January 26, 2026 23:02

victorvhs017 requested changes Jan 27, 2026

View reviewed changes

IgorHorta added 4 commits January 26, 2026 21:22

fix: reverting the commit change fix, will be fixed in another task

f35f933

fix: using library for diff

4d1fd8d

fix: isolating the scroll to first change

010bac3

fix: when theres a single block

a4af436

greptile-apps bot reviewed Jan 27, 2026

View reviewed changes

...pprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx Show resolved Hide resolved

...pprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx Show resolved Hide resolved

fix: addressing greptile comment

0198452

victorvhs017 approved these changes Jan 27, 2026

View reviewed changes

victorvhs017 merged commit 2120716 into main Jan 27, 2026
7 checks passed

Conversation

IgorHorta commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

Screenshots

Steps to verify the change

Test Case 1: Single-Line Secret Diff

Test Case 2: Multiline Secret Diff

Test Case 3: Long String Wrapping

Test Case 4: Auto-Scroll Behavior

Test Case 5: Visual Design

Test Case 6: Edge Cases

Type

Checklist

Uh oh!

maidul98 commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

greptile-apps bot commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Overview

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

victorvhs017 commented Jan 26, 2026

Uh oh!

victorvhs017 commented Jan 26, 2026

Uh oh!

victorvhs017 commented Jan 26, 2026

Uh oh!

IgorHorta commented Jan 26, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

victorvhs017 commented Jan 26, 2026

Uh oh!

victorvhs017 commented Jan 26, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

victorvhs017 commented Jan 27, 2026

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

victorvhs017 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

IgorHorta commented Jan 26, 2026 •

edited

Loading

maidul98 commented Jan 26, 2026 •

edited

Loading

greptile-apps bot commented Jan 26, 2026 •

edited

Loading