Skip to content

feat(ui): refactor secret dependency tree view#5502

Merged
varonix0 merged 5 commits intomainfrom
daniel/improve-secrets-view
Feb 17, 2026
Merged

feat(ui): refactor secret dependency tree view#5502
varonix0 merged 5 commits intomainfrom
daniel/improve-secrets-view

Conversation

@varonix0
Copy link
Member

Context

Refactored the secret dependency tree view. It's now much more intuitive and requires less background knowladge to understand.

CleanShot 2026-02-17 at 05 41 13

Type

  • Fix
  • Feature
  • Improvement
  • Breaking
  • Docs
  • Chore

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

@maidul98
Copy link
Collaborator

maidul98 commented Feb 17, 2026

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
Copy link
Contributor

greptile-apps bot commented Feb 17, 2026

Greptile Summary

Refactors the secret dependency tree view from a react-complex-tree-based list into an interactive @xyflow/react (ReactFlow) node graph with automatic dagre layout. The tree inversion logic is preserved and moved to utils/convertToFlowElements.ts, with new custom node (SecretNode) and edge (SecretReferenceEdge) components for visual styling. Modal widths across three consumer pages are expanded to max-w-3xl to accommodate the wider graph.

  • The SecretNode component contains dead code: iconBadgeRef is created and used in a useEffect but never attached to any DOM element, so the effect body never executes. The useEffect also lacks a dependency array.
  • SecretNodeData type is duplicated in both SecretNode.tsx and convertToFlowElements.ts — should be shared to prevent divergence.

Confidence Score: 3/5

  • Frontend-only UI refactor with no API or security surface changes; the dead code in SecretNode.tsx should be cleaned up before merge.
  • The PR is a well-structured UI refactor that correctly preserves the existing tree inversion logic while migrating to ReactFlow. However, the iconBadgeRef dead code and missing dependency array in useEffect indicate incomplete cleanup that could confuse future maintainers. The duplicate type definition is a minor maintainability concern. No security, API, or backend changes are involved.
  • Pay close attention to frontend/src/components/secrets/SecretReferenceDetails/nodes/SecretNode.tsx — it contains dead code (unused ref + effect) that needs to either be connected to the intended element or removed.

Important Files Changed

Filename Overview
frontend/src/components/secrets/SecretReferenceDetails/SecretReferenceDetails.tsx Major refactor replacing react-complex-tree dependency tree with ReactFlow graph. Clean integration, proper memoization, and correct error handling. Removed old tree inversion/rendering code and delegated to new utility modules.
frontend/src/components/secrets/SecretReferenceDetails/nodes/SecretNode.tsx New ReactFlow node component. Contains dead code: iconBadgeRef is never attached to any DOM element, and its associated useEffect (missing dependency array) will never execute. Also duplicates SecretNodeData type from convertToFlowElements.ts.
frontend/src/components/secrets/SecretReferenceDetails/edges/SecretReferenceEdge.tsx Simple custom edge component with smooth step paths and circular reference styling. Clean implementation.
frontend/src/components/secrets/SecretReferenceDetails/utils/convertToFlowElements.ts Migrated tree-inversion and conversion logic from SecretReferenceDetails.tsx. Correctly handles circular references, builds ReactFlow nodes/edges, and delegates positioning to dagre. Logic preserved from previous implementation.
frontend/src/components/secrets/SecretReferenceDetails/utils/positionElements.ts Dagre-based layout utility. Follows the same pattern as the existing AccessTree positionElements, simplified for this use case. Clean implementation.

Last reviewed commit: 94143a8

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

8 files reviewed, 2 comments

Edit Code Review Agent Settings | Greptile

Copy link
Contributor

@scott-ray-wilson scott-ray-wilson left a comment

Choose a reason for hiding this comment

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

Looks great, minor comments / thoughts

@varonix0 varonix0 force-pushed the daniel/improve-secrets-view branch from 518822b to 0defe13 Compare February 17, 2026 18:15
@scott-ray-wilson scott-ray-wilson self-requested a review February 17, 2026 20:44
Copy link
Contributor

@scott-ray-wilson scott-ray-wilson left a comment

Choose a reason for hiding this comment

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

looks great 🚀

@varonix0 varonix0 merged commit 78e0e06 into main Feb 17, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants