Add a bridge for a Joli Media Sylius Admin#96
Conversation
3bcbb01 to
cac316f
Compare
| @@ -0,0 +1,20 @@ | |||
| # Full configuration reference: https://symfony.com/bundles/ux-icons/current/index.html#configuration | |||
| ux_icons: | |||
There was a problem hiding this comment.
Question innocente, c'est une dépendance de Sylius, ou de notre bridge ?
There was a problem hiding this comment.
Le sylius/bootstrap-admin-ui tire cette dépendance et elle est géniale 👯
There was a problem hiding this comment.
FYI, the admin bundle from Sylius E-Commerce also uses the Symfony UX icon packages.
88b22db to
ea10bb0
Compare
f678ab3 to
4157579
Compare
cf47f53 to
ac4c74e
Compare
# Conflicts: # demo/application/composer.json # demo/application/composer.lock # Conflicts: # demo/application/config/reference.php
8000adc to
136492a
Compare
67206bd to
53c4fcc
Compare
| element.addEventListener('click', (event) => { | ||
| event.preventDefault(); | ||
| const button = event.currentTarget; | ||
| const label = button.querySelector('.btn-label'); |
There was a problem hiding this comment.
💭 thought: Maybe we should not rely on UI classes for JS behavior.
| const configureDirectoryCreate = () => { | ||
| const createDirectoryForm = document.querySelector('[data-component="directory-create-form"]'); | ||
| const createDirectoryInput = createDirectoryForm?.querySelector('.directory-create-input'); | ||
| const createDirectoryCancelBtn = createDirectoryForm?.querySelector('.directory-create-cancel-btn'); |
There was a problem hiding this comment.
Same here - CSS classes not clearly made for the JS are a weak way to select DOM elements.
There was a problem hiding this comment.
I've open an issue :)
| use Twig\Environment; | ||
|
|
||
| #[Route(name: 'joli_media_sylius_admin_')] | ||
| class MediaAdminController extends AbstractController |
There was a problem hiding this comment.
💭 thought: I wonder how much of this can be shared between all the admin controllers via a Trait 👍 Maybe for a refacto some day.
| use Symfony\Component\Form\DataTransformerInterface; | ||
| use Symfony\Component\Form\Exception\TransformationFailedException; | ||
|
|
||
| readonly class MediaTransformer implements DataTransformerInterface |
There was a problem hiding this comment.
Are we sure this belong to the bridge and not some common namespace? (possible refacto)
There was a problem hiding this comment.
Same for a lot of PHP Classes actually.
There was a problem hiding this comment.
Yes, the MediaTransformer is duplicated three times!
There was a problem hiding this comment.
Pull request overview
This pull request introduces a new Sylius Admin bridge for JoliMediaBundle, adding Sylius-compatible media library pages (index/show/choose), grids, form types, assets, translations, and a demo/test application integration.
Changes:
- Add a new
JoliMediaSyliusBundle(Symfony AbstractBundle) with configurable pagination/upload/visibility options and Sylius Grid integration. - Add Sylius Admin UI templates (Twig hooks) and frontend assets (Dropzone, clipboard, tabs state, rename/move actions).
- Integrate the bridge into the demo app and test app, including new tests and Sylius-related configuration/routes.
Reviewed changes
Copilot reviewed 158 out of 165 changed files in this pull request and generated 20 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.js | Adds a new Encore build for the Sylius bridge assets. |
| tests/src/Bridge/EasyAdmin/Controller/MediaAdminControllerTest.php | Updates EasyAdmin bridge assertions for new item counts. |
| tests/src/Application/src/Kernel.php | Registers Sylius-related bundles in the test application kernel. |
| tests/src/Application/src/Form/PageType.php | Adds a test form using the Sylius MediaChoiceType. |
| tests/src/Application/src/Entity/Page.php | Converts test entity to a Sylius Resource and updates nullability. |
| tests/src/Application/config/routes.php | Adds Sylius Admin + resource loader routes and Sylius media bridge routes. |
| tests/src/Application/config/packages/sylius_resource.php | Adds Sylius ResourceBundle mapping config for the test app. |
| tests/src/Application/config/packages/sylius_bootstrap_admin_ui.php | Imports Sylius Bootstrap Admin UI app config in test app. |
| tests/src/Application/config/packages/joli_media_sylius_admin_ui.php | Imports Sylius bridge config into the test app. |
| tests/Bridge/SyliusAdmin/Symfony/DependencyInjection/ConfigurationTest.php | Adds tests for the Sylius bridge configuration defaults/overrides. |
| tests/Bridge/SyliusAdmin/Config/ConfigTest.php | Adds unit tests for the Sylius bridge Config helper. |
| src/Bridge/Sylius/translations/JoliMediaSyliusBundle.fr.yaml | Adds French translations for the Sylius bridge UI. |
| src/Bridge/Sylius/translations/JoliMediaSyliusBundle.en.yaml | Adds English translations for the Sylius bridge UI. |
| src/Bridge/Sylius/templates/uploaded_file_preview.html.twig | Adds Dropzone preview template for uploads. |
| src/Bridge/Sylius/templates/admin/shared/layout/base/styles.html.twig | Injects Sylius bridge stylesheet into Sylius Admin base layout. |
| src/Bridge/Sylius/templates/admin/shared/layout/base/scripts.html.twig | Injects Sylius bridge script into Sylius Admin base layout. |
| src/Bridge/Sylius/templates/admin/shared/helper/product_image.html.twig | Adds product image helper macro using JoliMedia image component. |
| src/Bridge/Sylius/templates/admin/shared/helper/move_media_modal.html.twig | Adds move-media modal macro (folder chooser UI). |
| src/Bridge/Sylius/templates/admin/media/show/modal/move_media_modal.html.twig | Wires the move-media modal into the media show page. |
| src/Bridge/Sylius/templates/admin/media/show/content/header/title_block/title.html.twig | Adds editable media title (rename UI) on show page. |
| src/Bridge/Sylius/templates/admin/media/show/content/header/title_block/actions/rename_media.html.twig | Adds “rename media” action button. |
| src/Bridge/Sylius/templates/admin/media/show/content/header/title_block/actions/move_media.html.twig | Adds “move media” action button and hidden move form. |
| src/Bridge/Sylius/templates/admin/media/show/content/header/title_block/actions/delete_media.html.twig | Adds “delete media” action via Sylius delete modal component. |
| src/Bridge/Sylius/templates/admin/media/show/content/header/title_block/actions.html.twig | Adds actions container hook area. |
| src/Bridge/Sylius/templates/admin/media/show/content/header/title_block/.DS_Store | (Accidentally) adds macOS metadata file to repo. |
| src/Bridge/Sylius/templates/admin/media/show/content/header/breadcrumbs.html.twig | Adds breadcrumbs for media show page. |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/header/variations.html.twig | Adds variations tab header (conditional). |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/header/general.html.twig | Adds general tab header (conditional). |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/header.html.twig | Adds tab header wrapper (conditional). |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/content/variations/table.html.twig | Adds variations table on show page. |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/content/variations.html.twig | Adds variations tab pane wrapper. |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/content/general/url.html.twig | Adds URL + clipboard copy block on show page. |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/content/general/preview.html.twig | Adds media preview section on show page. |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/content/general/markdown.html.twig | Adds markdown embed code section (conditional). |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/content/general/html.html.twig | Adds HTML embed code section (conditional). |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/content/general/file_type.html.twig | Adds file type row on show page. |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/content/general/file_size.html.twig | Adds file size row on show page. |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/content/general/dimensions.html.twig | Adds image dimensions row on show page. |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/content/general.html.twig | Adds general tab pane wrapper. |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs/content.html.twig | Adds conditional tab-content wrapper. |
| src/Bridge/Sylius/templates/admin/media/show/content/body/tabs.html.twig | Adds card wrapper for show page tabs. |
| src/Bridge/Sylius/templates/admin/media/show/content/body.html.twig | Adds show page body container. |
| src/Bridge/Sylius/templates/admin/media/show.html.twig | Adds Sylius Admin “show media” page template using hooks. |
| src/Bridge/Sylius/templates/admin/media/index/content/header/title_block/title.html.twig | Adds header title rendering for index page. |
| src/Bridge/Sylius/templates/admin/media/index/content/header/title_block/actions/back.html.twig | Adds back button to parent directory for index page. |
| src/Bridge/Sylius/templates/admin/media/index/content/header/rename_directory.html.twig | Adds header-level directory rename form. |
| src/Bridge/Sylius/templates/admin/media/index/content/header/dropzone.html.twig | Adds dropzone upload form in header. |
| src/Bridge/Sylius/templates/admin/media/index/content/header/create_directory.html.twig | Adds directory creation form in header. |
| src/Bridge/Sylius/templates/admin/media/index/content/header/breadcrumbs.html.twig | Adds breadcrumbs for index page. |
| src/Bridge/Sylius/templates/admin/media/index/content/header.html.twig | Adds index page header wrapper. |
| src/Bridge/Sylius/templates/admin/media/index/content/grid/no_results/title.html.twig | Reuses Sylius no-results title template. |
| src/Bridge/Sylius/templates/admin/media/index/content/grid/no_results/subtitle.html.twig | Reuses Sylius no-results subtitle template. |
| src/Bridge/Sylius/templates/admin/media/index/content/grid/no_results/image.html.twig | Reuses Sylius no-results image template. |
| src/Bridge/Sylius/templates/admin/media/index/content/grid/no_results/action.html.twig | Reuses Sylius no-results action template. |
| src/Bridge/Sylius/templates/admin/media/index/content/grid/no_results.html.twig | Shows no-results block only when no directories exist. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/header/list_view.html.twig | Adds list-view tab header. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/header/grid_view.html.twig | Adds grid-view tab header. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/header.html.twig | Adds tabs header wrapper for index page. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/content/list_view/data_table/header.html.twig | Renders table headers via Sylius table helper. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/content/list_view/data_table/body/rows.html.twig | Renders media rows via Sylius table helper. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/content/list_view/data_table/body/directories.html.twig | Adds directory rows + inline rename/delete actions. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/content/list_view/data_table/body.html.twig | Adds table body wrapper with data-component hooks. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/content/list_view/data_table.html.twig | Adds list view card + pagination + bulk actions. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/content/list_view.html.twig | Adds list-view tab pane wrapper. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/content/grid_view/content.html.twig | Adds grid view for directories and files + pagination. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/content/grid_view.html.twig | Adds grid-view tab pane wrapper. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/content/dropzone.html.twig | Adds dropzone form in tabs content. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs/content.html.twig | Adds tabs content wrapper. |
| src/Bridge/Sylius/templates/admin/media/index/content/body/tabs.html.twig | Adds card wrapper for index page tabs. |
| src/Bridge/Sylius/templates/admin/media/index/content/body.html.twig | Adds index page body wrapper and current-key meta. |
| src/Bridge/Sylius/templates/admin/media/index.html.twig | Adds Sylius Admin “index media” page template using hooks. |
| src/Bridge/Sylius/templates/admin/media/grid/field/path.html.twig | Adds “rename media” inline form for grid path field. |
| src/Bridge/Sylius/templates/admin/media/grid/field/image.html.twig | Adds media image badge/preview field. |
| src/Bridge/Sylius/templates/admin/media/grid/field/file_type.html.twig | Adds file-type badge rendering. |
| src/Bridge/Sylius/templates/admin/media/grid/field/file_size.html.twig | Adds readable filesize field rendering. |
| src/Bridge/Sylius/templates/admin/media/grid/field/dimensions.html.twig | Adds dimensions rendering. |
| src/Bridge/Sylius/templates/admin/media/grid/action/update.html.twig | Adds rename action button for grid. |
| src/Bridge/Sylius/templates/admin/media/grid/action/show.html.twig | Adds show action link for grid. |
| src/Bridge/Sylius/templates/admin/media/grid/action/rename_directory.html.twig | Adds header-level directory rename action. |
| src/Bridge/Sylius/templates/admin/media/grid/action/delete_directory.html.twig | Adds header-level directory delete action. |
| src/Bridge/Sylius/templates/admin/media/grid/action/delete.html.twig | Adds media delete action via Sylius delete modal component. |
| src/Bridge/Sylius/templates/admin/media/grid/action/create_directory.html.twig | Adds “create directory” action. |
| src/Bridge/Sylius/templates/admin/media/grid/action/add_media.html.twig | Adds “add media” action. |
| src/Bridge/Sylius/templates/admin/media/choose_directory.html.twig | Adds directory chooser partial for move modal. |
| src/Bridge/Sylius/templates/admin/media/choose.html.twig | Adds media chooser modal/page content (upload + pagination). |
| src/Bridge/Sylius/templates/admin/form/null_label.html.twig | Adds “no media selected” label template. |
| src/Bridge/Sylius/templates/admin/form/form_theme.html.twig | Adds form theme for Sylius MediaChoiceType. |
| src/Bridge/Sylius/templates/_preview.html.twig | Adds generic media preview renderer. |
| src/Bridge/Sylius/templates/_as_markdown.html.twig | Adds markdown embed renderer. |
| src/Bridge/Sylius/templates/_as_image.html.twig | Adds image/icon renderer for media items. |
| src/Bridge/Sylius/templates/_as_html.html.twig | Adds HTML embed renderer. |
| src/Bridge/Sylius/src/JoliMediaSyliusBundle.php | Adds Sylius bridge bundle, config, and prepended defaults. |
| src/Bridge/Sylius/src/Config/Config.php | Adds Sylius bridge config helper (visibility/upload/pagination). |
| src/Bridge/Sylius/src/Admin/Grid/Provider/MediaGridProvider.php | Adds Sylius Grid data provider using paginated storage listing. |
| src/Bridge/Sylius/src/Admin/Grid/MediaGrid.php | Adds Sylius grid definition for media listing. |
| src/Bridge/Sylius/src/Admin/Grid/GridPageResolver.php | Adds helper for resolving per-page limits from grid parameters. |
| src/Bridge/Sylius/src/Admin/Form/Type/UploadType.php | Adds upload form type for Sylius bridge. |
| src/Bridge/Sylius/src/Admin/Form/Type/MediaChoiceType.php | Adds media choice form type for Sylius bridge. |
| src/Bridge/Sylius/src/Admin/Form/DataTransformer/MediaTransformer.php | Adds model transformer for form/media mapping. |
| src/Bridge/Sylius/public/manifest.json | Adds manifest mapping for versioned assets. |
| src/Bridge/Sylius/public/joli-media-sylius-admin.2f351929.css | Adds compiled Sylius bridge CSS. |
| src/Bridge/Sylius/public/entrypoints.json | Adds entrypoints description for Sylius bridge build. |
| src/Bridge/Sylius/config/services.php | Adds service wiring for Sylius bridge controller/grid/forms/config. |
| src/Bridge/Sylius/config/app/twig_hooks/media/show.php | Registers Twig hooks for Sylius media show page. |
| src/Bridge/Sylius/config/app/twig_hooks/media/index.php | Registers Twig hooks for Sylius media index page. |
| src/Bridge/Sylius/config/app/twig_hooks/base.php | Registers Twig hooks to inject Sylius bridge assets. |
| src/Bridge/Sylius/config/app.php | Imports all Sylius bridge app configuration fragments. |
| src/Bridge/Sylius/assets/styles/media-show.css | Adds source CSS for the show page UI. |
| src/Bridge/Sylius/assets/styles/media-preview.css | Adds source CSS for media preview rendering. |
| src/Bridge/Sylius/assets/styles/media-choice.css | Adds source CSS for the media choice widget. |
| src/Bridge/Sylius/assets/styles/gallery.css | Adds source CSS for list/grid gallery UI. |
| src/Bridge/Sylius/assets/styles/dropzone.css | Adds source CSS overrides for Dropzone. |
| src/Bridge/Sylius/assets/styles/clipboard.css | Adds source CSS for clipboard UX. |
| src/Bridge/Sylius/assets/styles/box.css | Adds source CSS for UI “box” blocks. |
| src/Bridge/Sylius/assets/styles/base.css | Adds base variables/layout styles for the bridge. |
| src/Bridge/Sylius/assets/js/joli-media-sylius-admin.js | Adds Sylius bridge JS entrypoint for UI behavior. |
| src/Bridge/Sylius/assets/js/components/tabsState.js | Persists active tab selection via localStorage. |
| src/Bridge/Sylius/assets/js/components/mediaSelector.js | Implements media chooser modal behavior for forms. |
| src/Bridge/Sylius/assets/js/components/mediaRename.js | Adds inline media rename behaviors (grid/show). |
| src/Bridge/Sylius/assets/js/components/folderSelector.js | Adds folder move modal behavior. |
| src/Bridge/Sylius/assets/js/components/dropzone.js | Adds Dropzone upload integration + emitted events. |
| src/Bridge/Sylius/assets/js/components/directoryRename.js | Adds directory rename behaviors. |
| src/Bridge/Sylius/assets/js/components/directoryCreate.js | Adds directory create behaviors. |
| src/Bridge/Sylius/assets/js/components/clipboard.js | Adds copy-to-clipboard behavior with feedback UI. |
| phpstan.neon | Updates PHPStan exclusions. |
| doc/bridges/sylius.rst | Adds documentation for the Sylius integration. |
| doc/bridges/sonata-admin.rst | Documents additional visibility configuration keys. |
| doc/bridges/easy-admin.rst | Documents additional visibility configuration keys + fixes heading typo. |
| demo/application/translations/messages.en.yaml | Adds app translation keys for Sylius demo grids/forms. |
| demo/application/templates/user/grid/field/profile_picture.html.twig | Adds Sylius demo grid field rendering for profile picture media. |
| demo/application/templates/post/grid/field/cover_media.html.twig | Adds Sylius demo grid field rendering for post cover media. |
| demo/application/templates/base.html.twig | Adds Sylius Admin link to demo base navigation. |
| demo/application/symfony.lock | Adds Sylius/UX/Pagerfanta packages to demo lockfile. |
| demo/application/src/Twig/Component/PostFormComponent.php | Adds LiveComponent wrapper for Sylius admin CRUD forms in demo. |
| demo/application/src/Menu/Admin/MenuBuilder.php | Adds Sylius Admin menu entries including media library in demo. |
| demo/application/src/Grid/UserGrid.php | Adds Sylius grid definition for demo User resource. |
| demo/application/src/Grid/PostGrid.php | Adds Sylius grid definition for demo Post resource. |
| demo/application/src/Form/UserType.php | Adds Sylius demo form using Sylius MediaChoiceType. |
| demo/application/src/Form/PostType.php | Adds Sylius demo form using Sylius MediaChoiceType + LiveCollection. |
| demo/application/src/Form/PostMediaType.php | Adds Sylius demo embedded form using Sylius MediaChoiceType. |
| demo/application/src/Entity/User.php | Converts demo User entity into a Sylius Resource and adds media fields. |
| demo/application/src/Entity/Post.php | Converts demo Post entity into a Sylius Resource and adds routing behavior. |
| demo/application/config/sylius/twig_hooks/talk.yaml | Adds demo hooks using a LiveComponent form in Sylius admin CRUD. |
| demo/application/config/routes/ux_live_component.yaml | Adds LiveComponent routing to the demo app. |
| demo/application/config/routes/ux_autocomplete.yaml | Adds UX Autocomplete routing to the demo app. |
| demo/application/config/routes/sylius_resource.yaml | Adds Sylius resource loader route to the demo app. |
| demo/application/config/routes/sylius_admin_ui.yaml | Adds Sylius Admin UI routes to the demo app. |
| demo/application/config/routes/joli_media.yaml | Adds Sylius media bridge routes to the demo app. |
| demo/application/config/packages/ux_icons.yaml | Adds UX Icons configuration for demo app. |
| demo/application/config/packages/sylius_resource.yaml | Adds Sylius resource mapping config for demo app. |
| demo/application/config/packages/sylius_bootstrap_admin_ui.yaml | Imports Sylius Bootstrap Admin UI config + demo twig hooks. |
| demo/application/config/packages/joli_media_sylius.yaml | Adds Sylius bridge configuration for demo app. |
| demo/application/config/bundles.php | Registers Sylius + UX bundles in the demo app. |
| demo/application/composer.json | Adds Sylius packages and Pagerfanta ORM adapter to demo dependencies. |
| demo/application/.gitignore | Ignores reference config file. |
| composer.json | Adds Sylius packages + conflicts and PSR-4 autoload for Sylius bridge. |
| .php-cs-fixer.dist.php | Updates excluded paths for code style tooling. |
| .castor/qa.php | Fixes phpunit command concatenation spacing. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1 @@ | |||
| <link rel="stylesheet" href="{{ asset('bundles/jolimediasylius/joli-media-sylius-admin.2f351929.css') }}"> | |||
There was a problem hiding this comment.
These templates hardcode a versioned (hashed) asset filename. Since webpack versioning is enabled and hashes change on each build, this will break unless the Twig file is updated every time. Prefer resolving the real filename via manifest.json (e.g. a Symfony Asset Package with JsonManifestVersionStrategy, like the EasyAdmin/Sonata bridges) and call asset('joli-media-sylius-admin.css', '<package>') instead of hardcoding the hash.
43123d4 to
cf9ff1f
Compare
cf9ff1f to
ff2bdb6
Compare
_as_image.html.twig