Skip to content

Preview first record of a collection#4619

Merged
midigofrank merged 8 commits intomainfrom
4528-frank-preview-collections
Apr 16, 2026
Merged

Preview first record of a collection#4619
midigofrank merged 8 commits intomainfrom
4528-frank-preview-collections

Conversation

@lmac-1
Copy link
Copy Markdown
Collaborator

@lmac-1 lmac-1 commented Apr 13, 2026 •
edited
Loading

Description

This PR adds a collection preview modal to project settings. Each collection row gets an eye icon button that opens a modal showing the first record as formatted JSON, so users can quickly check what's in a collection without downloading it.

image image

Built on @midigofrank's initial implementation in 4528-frank-preview-collections, with changes on top.

Closes #4528

  • Extracted shared CodeViewer component (read-only Monaco editor + copy button) from DataclipViewer
  • Eye icon button on each collection row, opening a preview modal
  • LiveView handler fetches first item, wraps in download format [{key, value, created, updated}]
  • Frontend recursively parses JSON value strings for readable display — without this, values show as escaped strings ("{"amount":19.59...}")
  • 140-char string truncation on display; copy button always gives full original data
  • Non-JSON values fall back to plaintext
  • key displayed first for readability
  • Preview scoped to current project with flash error fallback
  • Empty collection state
  • Modal with title, subtitle linking to CLI docs, close button
  • LiveView integration tests and React component tests

Validation steps

  1. Click eye icon on a collection with JSON values → formatted, readable JSON
  2. Empty collection → "This collection is empty."
  3. Non-JSON value → displayed as plaintext
  4. Copy button gives full original data, not truncated version
  5. Modal closes and reopens correctly
  6. DataclipViewer in step editor still works

Additional notes for the reviewer

  1. @midigofrank mentioned displaying values as-is with no formatting — I found this quite hard to read in practice, especially when values contain JSON:
image So I've added a step that parses JSON value strings and formats them for display. Values are capped at 1MB so performance should be fine, but would appreciate your opinion @midigofrank
  1. Items within a collection can have completely different structures, so showing one arbitrary record only tells you so much. I think the natural next step is a collection inspector where users can search by key pattern and click to inspect. Could be a separate follow-up issue/epic/one-pager.

AI Usage

Please disclose whether you've used AI anywhere in this PR (it's cool, we just
want to know!):

  • I have used Claude Code
  • I have used another model
  • I have not used AI

You can read more details in our
Responsible AI Policy

Pre-submission checklist

  • I have performed an AI review of my code (we recommend using /review
    with Claude Code)
  • I have implemented and tested all related authorization policies.
    (e.g., :owner, :admin, :editor, :viewer)
  • I have updated the changelog.
  • I have ticked a box in "AI usage" in this PR

midigofrank and others added 4 commits April 13, 2026 10:11
@midigofrank
feat: add collection preview with first-item modal and JSON viewer
e822ed2 
- Extract shared JsonViewer component (Monaco + copy button) from DataclipViewer
- Add CollectionPreviewViewer with string truncation for long values
- Wire up preview button and modal in CollectionsComponent showing the first item
- Register CollectionPreviewViewer as an esbuild entry point
- Add LiveView and frontend tests
@lmac-1
Renames JsonViewer to CodeViewer
acc109d
@lmac-1
Parse nested JSON value strings in collection preview for readable di…
40a8c0c 
…splay

Collection values are stored as raw strings in the DB. When wrapped in
the download format ([{key, value, created, updated}]), JSON values get
double-encoded into unreadable escaped strings. This recursively parses
value fields that contain valid JSON so truncateStrings can walk into
the real structure. Also reorders keys so key appears first.
@lmac-1
fixes alignment
cfb0845
@github-project-automation github-project-automation bot moved this to New Issues in Core Apr 13, 2026
@codecov
Copy link
Copy Markdown

codecov bot commented Apr 13, 2026 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.61%. Comparing base (920b8c2) to head (14e8602).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #4619      +/-   ##
==========================================
+ Coverage   89.51%   89.61%   +0.09%     
==========================================
  Files         444      444              
  Lines       21505    21558      +53     
==========================================
+ Hits        19250    19319      +69     
+ Misses       2255     2239      -16

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@lmac-1 lmac-1 marked this pull request as ready for review April 13, 2026 16:57
@lmac-1 lmac-1 requested a review from midigofrank April 13, 2026 16:57
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 13, 2026

Security Review

⚠️ Automated security review did not complete.

Claude hit the max-turns limit or encountered an error before posting findings.
A manual review of S0 (project-scoped data access), S1 (authorization policies),
and S2 (audit trail coverage) is recommended for this PR.

See the workflow run for details.

@theroinaochieng theroinaochieng self-requested a review April 14, 2026 15:36
@midigofrank
Copy link
Copy Markdown
Collaborator

midigofrank commented Apr 15, 2026

This might need an update after #4613

@midigofrank
feat: add authorization to collection preview and cross-project guards
93ef3f4 
- Gate preview on Bodyguard Collections policy (access_collection) via
  can_access_collection/2, consistent with the REST controller
- Pass current_user into CollectionsComponent so the policy can be evaluated
- Apply the same can_access_collection guard to edit and delete actions
- Extract MAX_PARSE_DEPTH constant in CollectionPreviewViewer
- Add tests: all project members can preview, cross-project preview/edit/delete
  are blocked
@midigofrank
Merge branch 'main' of github.com:OpenFn/lightning into 4528-frank-pr…
14e8602 
…eview-collections
midigofrank
midigofrank approved these changes Apr 16, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@midigofrank midigofrank left a comment

Choose a reason for hiding this comment

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

Nicely done @lmac-1 . I have capped the MAX_DEPTH of the parseValues function to 5, this way we don't need to worry about ungodly depths.

@midigofrank midigofrank merged commit 3ab0f63 into main Apr 16, 2026
8 checks passed
@midigofrank midigofrank deleted the 4528-frank-preview-collections branch April 16, 2026 05:38
@github-project-automation github-project-automation bot moved this from New Issues to Done in Core Apr 16, 2026
@lmac-1
Copy link
Copy Markdown
Collaborator Author

lmac-1 commented Apr 16, 2026

Thanks @midigofrank for your help with this one 🙏🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@midigofrank midigofrank midigofrank approved these changes

@theroinaochieng theroinaochieng Awaiting requested review from theroinaochieng

Assignees

No one assigned

Labels

None yet

Projects

Core
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Preview Collection JSON

2 participants

@lmac-1 @midigofrank