improvement(frontend): enhance secret diff view and commit handling by victorvhs017 · Pull Request #5364 · Infisical/infisical

victorvhs017 · 2026-02-04T03:23:58Z

Context

This PR introduces reusable diff components for secret version comparison and improves the commit handling experience. The changes:

Add a new SecretDiffView component with dedicated renderers for single-line, multi-line, tags, and metadata diffs
Refactor SecretVersionDiffView to use the new SecretDiffView for secrets while maintaining JSON diff for folders
Fix commit form to always show full old/new secret state (not just changed fields) for better diff clarity
Auto-commit folder-only changes without requiring modal confirmation

Screenshots

Steps to verify the change

Navigate to the Secret Dashboard
Make changes to a secret (update key, value, tags, comment, metadata)
Click "Save Changes" and verify the diff view shows old vs new values with proper highlighting
Create/update/delete secrets and confirm the commit modal displays correctly
Make folder-only changes and verify they commit directly without the modal
Navigate to Commit Details page and verify diff view renders correctly
Navigate to the Approvals tab and check if the Change Requests diff view renders correctly

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

- Introduced `DiffContainer` for styled diff display with scroll-to-first-change functionality. - Implemented `FieldDiffRenderers` for inline text, tags, and metadata diff rendering. - Added `MultiLineDiff` and `SingleLineDiff` components for handling multi-line and single-line differences. - Created `SecretDiffView` to encapsulate the diff view logic for secret versions. - Enhanced utility functions for computing line and word diffs.

- Added logic to handle folder-only changes in the commit process, allowing immediate saves without approval. - Updated `SecretDiffView` to include a new `CommentRenderer` for improved comment diff display. - Enhanced `SingleLineDiff` and `MultiLineDiff` components for better text highlighting and rendering. - Refactored tag handling in `SecretDetailSidebar` to ensure color attributes are preserved. - Improved styling for diff components to enhance user experience.

…ntification - Modified key generation logic in the `InlineTextDiff` component to use the index of changes instead of the change value, ensuring unique keys for each change item.

maidul98 · 2026-02-04T03:24:44Z

✅ 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-02-04T03:27:45Z

Greptile Overview

Greptile Summary

This PR introduces a well-structured refactoring of secret diff visualization with new reusable components. The changes add SecretDiffView and related diff renderers (FieldDiffRenderers, MultiLineDiff, SingleLineDiff) that provide granular, side-by-side comparison for secrets including values, tags, metadata, and comments.

Key improvements:

Refactored SecretVersionDiffView to use the new SecretDiffView for secrets while maintaining JSON diff for folders
Fixed React key generation in InlineTextDiff to use index instead of change value, preventing duplicate key warnings
Enhanced commit form to show full old/new secret state (not just changed fields) for better diff clarity
Added auto-commit for folder-only changes without requiring modal confirmation
Backend support for committing folder changes immediately even when approval policies exist (folders bypass approval workflow)

The implementation uses the diff library for text comparison and includes proper scroll-to-first-change behavior. The diff components handle single-line and multi-line values appropriately with word-level and line-level highlighting.

Confidence Score: 4/5

This PR is safe to merge with minor considerations about the folder commit behavior in approval workflows
The code is well-structured with proper component separation and the React key generation fix is correct. The backend logic for auto-committing folders while secrets await approval is intentional. Score is 4 (not 5) because the mixed folder+secret approval behavior should be carefully tested to ensure folders commit properly when secrets are pending approval.
backend/src/ee/services/pit/pit-service.ts should be tested with mixed folder and secret changes to verify transaction handling works correctly

Important Files Changed

Filename	Overview
backend/src/ee/services/pit/pit-service.ts	Added auto-commit logic for folder changes when approval policy exists, commits folder changes immediately while secrets go through approval
frontend/src/components/secrets/diff/FieldDiffRenderers.tsx	New component with inline text, tags, and metadata diff renderers; fixed key generation using index instead of value
frontend/src/components/secrets/diff/SecretDiffView.tsx	New comprehensive secret comparison component with side-by-side views for all secret fields including values, tags, and metadata
frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx	Enhanced to show full old/new secret state in diffs and auto-commit folder-only changes without modal

greptile-apps

_{4 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

backend/src/ee/services/pit/pit-service.ts

…RequestChangeItem - Updated the tag mapping logic in `SecretApprovalRequestChangeItem` to provide a default empty string for color attributes when they are undefined, ensuring consistent rendering of tags.

…ffView - Refactored the metadata assignment in `SecretVersionDiffView` to use a unified variable, improving code clarity and ensuring consistent handling of secret metadata.

linear · 2026-02-04T04:05:52Z

SECRETS-95 Extend word-level diff visualization to commit preview page

- Updated the logic for assigning the secret value in the `CommitForm` component to streamline the retrieval process, ensuring that the original value is prioritized while maintaining compatibility with existing values.

scott-ray-wilson

This is great! some thoughts / comments

frontend/src/components/secrets/diff/FieldDiffRenderers.tsx

…diff display - Introduced a new `KeyRenderer` component to handle the rendering of secret keys in the `SecretDiffView`, enhancing the clarity of changes by distinguishing between added and removed keys. - Replaced the previous inline text diff logic with the new component for better code organization and maintainability.

- Updated `DiffContainer` to allow an optional `variant` prop for better background color handling. - Introduced `FolderDiffView` component to display differences in folder versions, including name and description changes. - Refactored `FieldDiffRenderers` to include new `SingleLineTextDiffRenderer` and `MultiLineTextDiffRenderer` for improved text diff rendering. - Enhanced `SecretDiffView` to utilize new renderers and support encrypted metadata display. - Updated `CommitForm` and `SecretListView` to accommodate new properties in secret changes, including tags and comments.

- Removed scroll-to-first-change behavior from `DiffContainer` for a cleaner implementation. - Updated `SecretValueRenderer` to handle visibility toggling and scrolling to the first change when revealing multi-line content. - Improved rendering of secret values and comments for better readability and consistency.

…questChangeItem - Updated the type definition for skipMultilineEncoding to allow null values. - Ensured that skipMultilineEncoding defaults to undefined when both change and secret values are not provided, improving data handling consistency.

…Item - Updated form handling to fetch and incorporate secret values when saving, ensuring the commit diff modal displays accurate data. - Added logic to reset form fields when switching between secrets, improving user experience. - Refactored save operations in both SecretDetailSidebar and SecretItem components to manage fetched values more effectively.

…iffView - Replaced setTimeout with requestAnimationFrame for smoother scrolling to the first change in SecretValueRenderer. - Updated metadata handling in SecretDiffView to ensure only new version metadata is passed, enhancing clarity and performance.

…iew and CommitForm - Added support for revealing old and new secret values with loading states in SecretDiffView and SecretVersionDiffView. - Updated CommitForm to manage loading states when fetching secret values, ensuring accurate display in the commit diff modal. - Refactored related components to improve handling of secret value visibility and loading indicators.

…deletions - Improved logic in SecretMainPage.store to handle updates and deletions of secrets, ensuring correct value assignment based on action type. - Updated CommitForm and SecretListView to manage secret value visibility and loading states more effectively, allowing for better user experience during secret operations. - Refactored fetching logic in ResourceChange to accommodate both update and delete actions, ensuring accurate display of secret values in the UI.

Victor Santos added 3 commits February 3, 2026 22:06

fix(frontend): update key generation in InlineTextDiff for unique ide…

6df67f3

…ntification - Modified key generation logic in the `InlineTextDiff` component to use the index of changes instead of the change value, ensuring unique keys for each change item.

greptile-apps bot reviewed Feb 4, 2026

View reviewed changes

backend/src/ee/services/pit/pit-service.ts Show resolved Hide resolved

fix(frontend): ensure default color for secret tags in SecretApproval…

e5b6a7d

…RequestChangeItem - Updated the tag mapping logic in `SecretApprovalRequestChangeItem` to provide a default empty string for color attributes when they are undefined, ensuring consistent rendering of tags.

victorvhs017 requested a review from scott-ray-wilson February 4, 2026 04:03

fix(frontend): streamline secret metadata handling in SecretVersionDi…

40a98a3

…ffView - Refactored the metadata assignment in `SecretVersionDiffView` to use a unified variable, improving code clarity and ensuring consistent handling of secret metadata.

scott-ray-wilson requested changes Feb 5, 2026

View reviewed changes

Victor Santos added 5 commits February 5, 2026 16:17

Merge branch 'main' into enhancement/update-commit-diff-view

485a08e

victorvhs017 requested a review from scott-ray-wilson February 6, 2026 00:30

Victor Santos added 4 commits February 6, 2026 17:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

improvement(frontend): enhance secret diff view and commit handling#5364

improvement(frontend): enhance secret diff view and commit handling#5364
victorvhs017 wants to merge 15 commits intomainfrom
enhancement/update-commit-diff-view

victorvhs017 commented Feb 4, 2026

Uh oh!

maidul98 commented Feb 4, 2026 •

edited

Loading

Uh oh!

greptile-apps bot commented Feb 4, 2026

Uh oh!

greptile-apps bot left a comment

Uh oh!

Uh oh!

linear bot commented Feb 4, 2026

Uh oh!

scott-ray-wilson left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

victorvhs017 commented Feb 4, 2026

Context

Screenshots

Steps to verify the change

Type

Checklist

Uh oh!

maidul98 commented Feb 4, 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 Feb 4, 2026

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!

linear bot commented Feb 4, 2026

Uh oh!

scott-ray-wilson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

maidul98 commented Feb 4, 2026 •

edited

Loading