Skip to content

Implement code export modal for collections#825

Closed
furelid wants to merge 1 commit into
SonicJs-Org:mainfrom
furelid:feature/collection-export
Closed

Implement code export modal for collections#825
furelid wants to merge 1 commit into
SonicJs-Org:mainfrom
furelid:feature/collection-export

Conversation

@furelid
Copy link
Copy Markdown
Contributor

@furelid furelid commented May 8, 2026

Description

This pull request adds an export feature to the collection admin form, enabling users to export the configuration of config-managed collections as JSON via a modal dialog. The main changes involve UI enhancements and the addition of client-side logic to fetch and display collection data for export.

Changes

  • Added an "Export" button to the collection form header, allowing users to initiate the export process for a collection.
  • Implemented a modal dialog (code-export-modal) that displays the exported collection configuration as JSON, includes a copy-to-clipboard button, and provides user feedback when copying.
  • Added JavaScript to handle opening/closing the export modal, fetching collection data from the API, populating the modal's textarea with formatted JSON, and managing copy feedback and modal state.
  • Included keyboard and backdrop click handlers for improved modal accessibility and usability.…with modal

Testing

Manually tested, small batch of frontend code only - shouldn't be a need but can take it on when I have more free time
I included a short video testing different dimensions, using linux with chromium

Unit Tests

  • Added/updated unit tests
  • All unit tests passing

E2E Tests

  • Added/updated E2E tests
  • All E2E tests passing

Screenshots/Videos

589252068-b6869dd1-f15a-4134-b5f5-3c97a2b96e20.webm

Checklist

  • Code follows project conventions
  • Tests added/updated and passing
  • Type checking passes
  • No console errors or warnings
  • Documentation updated (if needed)

Generated with Claude Code in Conductor

Added a modal for exporting collection code, including a button to trigger the modal and functionality to copy export options to the clipboard.
@lane711
Copy link
Copy Markdown
Collaborator

lane711 commented May 8, 2026

nice! checking this out now

@lane711
Copy link
Copy Markdown
Collaborator

lane711 commented May 9, 2026

Thanks @furelid! Closing in favor of #831, which mirrors your commit (preserving authorship) onto an internal branch so CI could run without the fork-authorization gate, plus a small follow-up commit addressing some review items:

  • Render export button + modal only on edit (need a name to fetch)
  • currentColor on the export icon (was invisible on the light-mode button)
  • JSON.stringify the embedded collection name to avoid breaking the script on a '
  • Escape display_name in modal HTML
  • Prefer navigator.clipboard.writeText with execCommand fallback
  • Drop id from the snake→camel result so it actually satisfies CollectionConfig
  • encodeURIComponent the collection name in the fetch URL
  • Wrap the script in an IIFE to avoid leaking helpers onto window

Appreciate the contribution!

@lane711
Copy link
Copy Markdown
Collaborator

lane711 commented May 9, 2026

Superseded by #831 (mirrored + follow-up fixes).

@lane711 lane711 closed this May 9, 2026
lane711 added a commit that referenced this pull request May 9, 2026
* Implement code export modal for collections

Added a modal for exporting collection code, including a button to trigger the modal and functionality to copy export options to the clipboard.

* fix(admin): harden code-export modal review feedback

- Render export button + modal only on edit (need a name to fetch)
- Use currentColor on export icon (was invisible on light-mode button)
- JSON-stringify the embedded collection name to avoid breaking the script on quotes
- Escape display_name in the modal HTML
- Prefer navigator.clipboard.writeText with execCommand fallback
- Drop id from the exported snake→camel result so it satisfies CollectionConfig
- encodeURIComponent the collection name in the fetch URL
- Wrap script in IIFE to avoid leaking helpers to window

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

---------

Co-authored-by: Johan Furelid <8422426+furelid@users.noreply.github.com>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
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.

2 participants