[chore] Migrate from unmaintained react-json-view to @microlink/react-json-view#14380
[chore] Migrate from unmaintained react-json-view to @microlink/react-json-view#14380lukasmasuch merged 7 commits intodevelopfrom
react-json-view to @microlink/react-json-view#14380Conversation
Co-Authored-By: Claude Opus 4.6 <[email protected]>
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
✅ PR preview is ready!
|
There was a problem hiding this comment.
Pull request overview
This PR replaces the deprecated/old react-json-view dependency with the maintained fork @microlink/react-json-view in Streamlit’s frontend JSON rendering components, updating dependency metadata and license notices accordingly.
Changes:
- Swap
react-json-view→@microlink/react-json-viewin the frontend library dependencies and all relevant imports. - Update
frontend/yarn.lockto reflect the new dependency graph (including updated transitive packages). - Refresh
NOTICESentries to add/remove licenses consistent with the dependency changes.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| NOTICES | Adds/removes third-party notices to match the updated dependency set (notably @microlink/react-json-view and new transitive deps). |
| frontend/yarn.lock | Locks @microlink/[email protected] and updates transitive dependencies after removing react-json-view. |
| frontend/lib/src/components/widgets/DataFrame/columns/cells/JsonViewer.tsx | Updates JSON viewer import to use @microlink/react-json-view. |
| frontend/lib/src/components/elements/Json/useJsonTooltip.ts | Updates OnSelectProps import to @microlink/react-json-view. |
| frontend/lib/src/components/elements/Json/Json.tsx | Updates JSON element import to @microlink/react-json-view. |
| frontend/lib/package.json | Replaces react-json-view dependency with @microlink/react-json-view. |
Co-Authored-By: Claude Opus 4.6 <[email protected]>
react-json-view to @microlink/react-json-view
Co-Authored-By: Claude Opus 4.6 <[email protected]>
## Describe your changes Automated snapshot updates for #14380 created via the snapshot autofix CI workflow. This workflow was triggered by adding the `update-snapshots` label to a PR after Playwright E2E tests failed with snapshot mismatches. **Updated snapshots:** 12 file(s)⚠️ **Please review the snapshot changes carefully** - they could mask visual bugs if accepted blindly. This PR targets a feature branch and can be merged without review approval. Co-authored-by: Streamlit Bot <[email protected]>
The @microlink/react-json-view library hides copy buttons via inline display:none until hover. Updated the test to make the copy container visible via JS before clicking. Also updated the expected value since individual copy buttons copy their specific value, not the whole array. Co-Authored-By: Claude Opus 4.6 <[email protected]>
SummaryThis PR migrates the JSON viewer component from the unmaintained Key motivations:
Code QualityThe implementation changes are clean and minimal. All three reviewers agreed on this.
Issue — E2E test DOM manipulation (all three reviewers flagged this): In Assessment: This is a legitimate concern but a non-blocking one. The test's purpose is to verify that copy-to-clipboard works within dialogs, and it still validates that. The DOM manipulation is a pragmatic workaround for a third-party component's hover-reveal behavior that is difficult to trigger reliably in Playwright. This is a minor quality issue, not a correctness bug. The comment at line 463 ("The react-json-view has a copy button") could also be updated for consistency. Test Coverage
Backwards CompatibilityNo breaking changes for Streamlit users:
Security & RiskNo security concerns identified:
External test recommendation
AccessibilityNo accessibility impact. No new interactive elements introduced. The JSON viewer component's DOM structure and ARIA attributes are maintained by the fork. The Reviewer Agreement & DisagreementsAgreement (all three reviewers)
Disagreement: Severity of E2E test issue
ResolutionThe E2E test DOM manipulation is a pragmatic workaround, not a correctness bug. The test still validates its core purpose (clipboard integration in dialogs). The third-party component's hover-reveal mechanism may not reliably respond to Playwright's Recommendations
VerdictAPPROVED: Clean, low-risk dependency migration from an unmaintained package to its actively maintained fork. The changes properly update license attributions, refresh E2E snapshots, and maintain API compatibility. The E2E test DOM manipulation is a minor quality concern but does not represent a correctness or regression risk. This is a consolidated AI review by 📋 Review by `gemini-3.1-pro`SummaryMigrates the JSON viewer component from the unmaintained Code QualityThe code changes are clean and straightforward. The use of However, there is a minor issue in the E2E test (
Test CoverageThe changes are well covered by existing unit tests and updated E2E snapshot tests. The E2E test for the dialog copy button was updated to reflect the new component's behavior. Backwards CompatibilityThis is a drop-in replacement. Setting Security & RiskReplacing an unmaintained dependency with an actively maintained fork is a positive change for security and maintainability. No new security risks or regression risks are identified. External test recommendation
AccessibilityNo significant accessibility changes. The new component behaves similarly to the old one. Recommendations
VerdictCHANGES REQUESTED: Please update the E2E test to use a natural hover interaction instead of modifying the DOM's style attribute directly. This is an automated AI review by 📋 Review by `gpt-5.3-codex-high`SummaryThis PR migrates the frontend JSON viewer from Code QualityThe migration in implementation files is generally clean and minimal ( Issue found:
Test Coverage
Backwards Compatibility
Security & Risk
External test recommendation
Accessibility
Recommendations
VerdictCHANGES REQUESTED: The implementation migration is mostly solid, but the modified dialog copy E2E test bypasses user behavior and may hide copy-semantic regressions, so this is not merge-ready yet. This is an automated AI review by 📋 Review by `opus-4.6-thinking`SummaryThis PR migrates the JSON viewer component from the unmaintained Key improvements:
Code QualityThe code changes are clean and minimal:
Test Coverage
Overall, test coverage is adequate for this dependency migration. Backwards CompatibilityNo breaking changes for Streamlit users:
Security & RiskNo security concerns identified:
Risk assessment:
External test recommendation
AccessibilityNo accessibility impact:
Recommendations
VerdictAPPROVED: Clean, low-risk dependency migration from an unmaintained package to its actively maintained fork, with proper license updates, snapshot refreshes, and test adaptations. The changes improve React 18 compatibility and reduce the dependency footprint. This is an automated AI review by |
Use hover-based interaction instead of DOM style manipulation to reveal the copy button, following E2E best practices. Co-Authored-By: Claude Opus 4.6 <[email protected]>
SummaryThis PR migrates the JSON viewer component from the unmaintained
The old library had a stale peer dependency on React ≤17, while Streamlit uses React 18. The fork ( Reviewer ConsensusAll three reviewers (gemini-3.1-pro, gpt-5.3-codex-high, opus-4.6-thinking) unanimously approved this PR. No reviewer raised blocking issues. There were no disagreements on any aspect of the review. Code Quality[Full agreement] All reviewers found the code changes clean, minimal, and well-executed:
[Unique observation — opus-4.6-thinking] CSS selector stability concern: Both Test Coverage[Full agreement] Coverage is adequate for a dependency swap:
[Unique observation — opus-4.6-thinking] The E2E test behavioral change in Backwards Compatibility[Full agreement] No breaking Streamlit API changes. The User-visible deltas are cosmetic:
Security & Risk[Full agreement] Low risk. No security concerns identified:
External test recommendation
Accessibility[Full agreement] No accessibility regressions identified. The fork maintains the same interactive structure (keyboard-navigable JSON tree, copy buttons). [Unique observation — opus-4.6-thinking] The fork's copy buttons should ideally have Consolidated Recommendations
None of these recommendations are blocking. VerdictAPPROVED: Unanimous approval across all three reviewers. This is a clean, low-risk dependency migration from the unmaintained This is a consolidated AI review by All 3 of 3 expected reviewers completed their reviews successfully. 📋 Review by `gemini-3.1-pro`SummaryThis PR migrates the JSON viewer component from the unmaintained Code QualityThe code changes are clean, minimal, and well-executed:
Test CoverageTest coverage is adequate. Existing frontend unit tests remain valid as the component behaves identically. The E2E snapshots have been updated to reflect the visual changes (removal of trailing commas). The dialog copy-button E2E test has been successfully adapted to target the new Backwards CompatibilityThere are no breaking changes. The component acts as a drop-in replacement. The visual appearance is slightly cleaner due to the removal of trailing commas, and the interactive features (expand/collapse, copy-to-clipboard) remain fully functional. Security & RiskNo security concerns identified. This is a frontend dependency swap that introduces no new external network calls, no unsafe JS execution, and no backend changes. It also removes several heavy transitive dependencies, reducing the overall dependency footprint. External test recommendation
AccessibilityNo accessibility impact. The JSON viewer component's DOM structure and ARIA attributes are maintained by the fork, and the RecommendationsNone. The implementation is solid and the previous feedback regarding the E2E test interaction has been addressed. VerdictAPPROVED: Clean and low-risk dependency migration to an actively maintained fork, with proper test adaptations and license updates. This is an automated AI review by 📋 Review by `gpt-5.3-codex-high`SummaryThis PR cleanly migrates JSON rendering from Code QualityThe implementation is intentionally small and focused:
No blocking code-quality issues found. Test CoverageCoverage is solid for this scope:
No testing gaps that should block merge. Backwards CompatibilityNo API-level breaking change is introduced. This is a frontend dependency migration with behavior parity goals. Security & RiskNo security-sensitive backend/runtime surfaces were modified (no auth/session/websocket/server endpoint changes). External test recommendation
AccessibilityNo new custom interactive controls were introduced; interactions remain provided by the JSON viewer component. Recommendations
VerdictAPPROVED: The migration is focused, low-risk, adequately covered by existing and updated tests, and appears ready to merge. This is an automated AI review by 📋 Review by `opus-4.6-thinking`SummaryThis PR migrates the JSON viewer component from the unmaintained
The old library had a stale peer dependency on React ≤17, while Streamlit uses React 18. The fork ( Code QualityThe code changes are clean and well-structured.
Test CoverageUnit tests (unchanged, covering the swap):
E2E tests:
E2E test behavioral change ( Coverage is adequate for a dependency swap. The existing test suites validate that the component behaves identically in rendering and interaction. Backwards Compatibility
No breaking changes for existing users. Security & Risk
Low risk overall. The dependency swap actually improves the security posture by removing unmaintained dependencies. External test recommendation
AccessibilityNo accessibility regressions identified. The One minor note: The fork's copy buttons should ideally have Recommendations
VerdictAPPROVED: Clean dependency migration from unmaintained This is an automated AI review by |
The compat shim was created for the old react-json-view CommonJS module with Vite 8 interop issues. Since @microlink/react-json-view is actively maintained and direct imports work correctly, the shim is no longer needed. Co-Authored-By: Claude Opus 4.6 <[email protected]>
## Describe your changes Restores the `reactJsonViewCompat.ts` compatibility shim that was removed in #14380. The direct import from `@microlink/react-json-view` works in CI builds but fails when running locally with the dev server (e.g., `make debug` or `make frontend-dev`). **Changes:** - Restored `frontend/lib/src/util/reactJsonViewCompat.ts` with updated imports for `@microlink/react-json-view` - Updated `Json.tsx`, `useJsonTooltip.ts`, and `JsonViewer.tsx` to import through the compat shim **Why this is needed:** - `@microlink/react-json-view` is published as CommonJS - Vite 8 interop can yield different runtime module shapes (`module`, `module.default`, `module.default.default`) depending on the optimization path - Without normalization, Json components fail with "Element type is invalid" errors in local dev ## GitHub Issue Link (if applicable) - Related to #14380 ## Testing Plan - [x] Unit Tests (existing tests pass) - [x] Manual testing with `make debug` to verify Json elements render correctly --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license. <!-- agent-metrics-start --> <details> <summary>Agent metrics</summary> | Type | Name | Count | |------|------|------:| | subagent | fixing-pr | 1 | | subagent | general-purpose | 1 | </details> <!-- agent-metrics-end --> --------- Co-authored-by: Claude Opus 4.6 <[email protected]>
Describe your changes
Migrates JSON viewer component from the unmaintained
react-json-viewto@microlink/react-json-view(v1.31.8), its actively maintained fork.showComma={false}for cleaner display (removes trailing commas)reactJsonViewCompat.tsshim (no longer needed with the maintained fork)GitHub Issue Link (if applicable)
N/A
Testing Plan
lib/src/components/elements/Json/Json.test.tsx— JSON rendering and theme testslib/src/components/elements/Json/useJsonTooltip.test.ts— Tooltip functionality testslib/src/components/widgets/DataFrame/columns/cells/JsonViewer.test.tsx— DataFrame JSON cell testsst_dialog_test.py::test_dialog_copy_buttons_work— Dialog copy button validationContribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.