Frontend Upgrade

[jordisala1991]

Feature Request

After integrating with Webpack Encore and moving all our dependencies from Bower to NPM, we can start thinking on upgrading some dependencies. This will probably we against 5.0 of SonataAdmin since we already have a lot of things from 3.x to 4.0.

Here is an initial list of things to consider upgrade.

• Update jQuery to v3
• Replace icheck for https://github.com/bantikyan/icheck-bootstrap

Upgrade to Admin-lte v3

• Remove x-editable (or make it compatible with boostrap 4 or implement own solution)
• Upgrade bootstrap to v4
• Upgrade admin lte to v3 (check sandbox branch and older prs on sonata admin)

[eerison]

if we're going to upgrade bootstrap, why not bootstrap 5?

[jordisala1991]

We need to follow admin-lte route here. If admin-lte 3 is only compatible with bootstrap 4, we have to use version 4. If they release version 4 of admin-lte and it is compatible with bootstrap 5 and we want to jump 2 versions, we could do it. But that version is not there.

Note that we are on admin-lte 2 compatible with bootstrap 3, maybe jumping 2 majors is a huge amount of work or maybe not, I do not know yet.

[sarim]

AdminLTE v4 (in develop it seems) is using bootstrap 5. ColorlibHQ/AdminLTE#3692
Given that sonata admin v4 isn't released yet, its safe to assume AdminLTE v4 would be released in time for Sonata Admin v5 to use it.

[VincentLanglet]

@jordisala1991 We use

SonataAdminBundle/package.json

Line 17 in 5c5550a

"select2-bootstrap-theme": "^0.1.0-beta.10",

which only work for bootstrap 3.

If we move to boostrap 4 or 5, according to the readme of https://github.com/select2/select2, we'll have to use
https://github.com/ttskch/select2-bootstrap4-theme or https://github.com/apalfrey/select2-bootstrap-5-theme

[jordisala1991]

Yes! But at the moment the major blocker is the x editable library.

We dont want to remove the feature, but that library wont be updated anymore. So at the end we will have to remove the feature unless we want to be stuck forever. 🤷🏻‍♂️ wdyt?

[sarim]

maybe the code for inline editing can be rewritten inside sonata admin based on bootstrap "popovers" component?

[VincentLanglet]

We dont want to remove the feature, but that library wont be updated anymore. So at the end we will have to remove the feature unless we want to be stuck forever. 🤷🏻‍♂️ wdyt?

I personally never used this feature so I'm not against the removing it.
Just discovered there is a recent fork: https://github.com/skycyclone/x-editable ; but doesn't seems to be a perfect solution.

We don't have a tons of maintainers so we cannot keep everything without help. So we might use the same strategy as we're using for BlockBundle and cache, we remove it in the next major, and if wanted/possible we add a similar feature back. If someone wants to contribute in order to provide the feature without the x-editable dependency, he's more than welcomed ; but we shouldn't be blocked by this if none of the maintainers use it and we don't have contributors and only "users".

But I think @willemverspyck is using it a lot, maybe he could help us on it ?

[core23]

We don't have a tons of maintainers so we cannot keep everything without help. So we might use the same strategy as we're using for BlockBundle and cache, we remove it in the next major, and if wanted/possible we add a similar feature back. If someone wants to contribute in order to provide the feature without the x-editable dependency, he's more than welcomed ; but we shouldn't be blocked by this

👍

if none of the maintainers use it and we don't have contributors and only "users".

I'm using this feature, but it's not critical to me. After the migration to bootstrap 4 / 5, I'll have a look at this.

[sarim]

Did the work on porting to bootstrap v4 began?
AdminLTE v4 - based on bootstrap 5 seems to be in development, Is there any plan to consider it? I know its not complete, but sonata admin doesn't use all components of AdminLTE, maybe the basic components sonata uses are already done?

Sorry to butt in in a inside discussion, but as porting editable feature without any dependencies wouldn't be much work. Most of the work is actually done by sonata admin twig templates, rest of the work in frontend (which x-editable does now) is just submitting the value via ajax/fetch and show green or red mark depending on the result, which can be written with js based on bootstrap "popovers" component without any other dependencies.

If a bootstrap v4 port of sonata admin starts, and maintainers don't have time to port editable, I hope to able to make it.

For now, the frontend (npm) dependency can be just removed, then after porting to bs4 it wouldn't be much work to reintroduce the js part.

[VincentLanglet]

I would say it's always easier to move to bootstrap 4 first, and then eventually consider bootstrap 5 in a second time. So we should first consider bootstrap 4.

@sarim we'll be more than happy if you find time to provide the editable feature without the x editable library

[willemverspyck]

I agree. Don't rely on too many packages. I'm using the editable function on some admins, but maybe we can make it easier with a Bootstrap "popover" or something like that.

[jordisala1991]

The date picker script will be moved and updated on the form extensions library, so it will be removed from the list here.

[eerison]

just to point out that I'm following the AdminLTE version 4 comments, and I see that it doesn't get any answer, and the last commit in master was 6 May, it looks, there isn't any active maintenance into de project.

[jordisala1991]

Im looking into using bootstrap 5 directly without admin lte, it just will take some time to get it right.

[sarim]

Im looking into using bootstrap 5 directly without admin lte, it just will take some time to get it right.

That will be the wisest choice actually. If the form / design etc.. is plain simple bootstrap 5, it'll be easier to maintain for sonata team, And also easier for users of sonataadmin to customize according to their need.

[creatiombe]

Dare i say tailwind? Would also be a nice addition. I would like to make an effort in this part. Utility first components would be easier to maintain i believe. What is your opinion?

[core23]

Dare i say tailwind? Would also be a nice addition. I would like to make an effort in this part. Utility first components would be easier to maintain i believe. What is your opinion?

IMHO tailwind is the worst if you want to maintain an open source project. For me the only real purpose for tw is prototyping a marketing page.

We also rely on AdminLTE which us using bootstrap.

[eerison]

Dare i say tailwind? Would also be a nice addition. I would like to make an effort in this part. Utility first components would be easier to maintain i believe. What is your opinion?

I like the tw too 😄 , But as core23 said, for opensource bootstrap is better, and we have too much things already created in AdminLTE

But I guess you could create an external repository with tailwind layout and change this in configuration.
and if there is something really strict in bootstrap, you could support some PR to be more flexible with external layout!

[jordisala1991]

Tailwind is not that bad IMHO, the real problem is that is only an utility first framework. With tailwind, we will need some designer to redo Sonata from scratch and someone to do the frontend part. Tailwind will only give you the ability to not write that css directly but use some classes for it, nothing else.

That's why we stick with bootstrap, because it provides the design itself. Maybe in the future we can provide a custom design, but again, then creating custom things inside Sonata will require our users to have designers or provide building blocks here to ease that custom thing creation.

For now the idea is migrate to bootstrap 5 with Sonata 5.

[eerison]

Hey @jordisala1991

How is going with this issue, the changes that we have worked on admin lte 3 was merged? or do are you thinking in other approach?

[VincentLanglet]

I would say that 100% of the time of jordisala is on SonataPage atm

[eerison]

Hey @jordisala1991
Have you considered to use : https://tabler.io/ as a template base for sonata?

cc @VincentLanglet

[eerison]

Hey @jordisala1991 Have you considered to use : https://tabler.io/ as a template base for sonata?

cc @VincentLanglet

it was an alternative to replace admin lte without need to maintain more code that could be maintained for other repository!
and as it's on top of bootstrap I guess it's a good replace for sonata!

[eerison]

I just so that Nicolas from symfony forked an awsome-symfony repositoy with a list of symfony's repositories, and the https://github.com/kevinpapst/TablerBundle was there, we could use it maybe 👀

[toooni]

Hi everyone
I am following the progress of AdminLTE and am pretty sure that it does not make sense to wait for a future release. After checking out tabler because of @eerison, it seems to me like it is a very viable replacement. It's open source and has 32.4k stars on GitHub! It looks actively maintained and has a LOT of components available. Since we have a lot of custom stuff and I have always checked AdminLTE first for a fitting template, I am sure backend devs will love that!

I am at a point where bootstrap 3 is holding us back. And I also think it is holding back sonata admin. While it does not have to be tabler, it could be any boostrap 5 template (AdminKit looks nice too for example: https://github.com/adminkit/adminkit), I am sure that progress is needed regarding the design framework.

I am willing to contribute and would be able to free up some time, but won't be able to do it on my own. Alternatively, my company is also willing to support this financially. We could support this change with €2k for sure.

[VincentLanglet]

Hi,

@jordisala1991 started some front-end improvement:

• while working on form-extension v2, he tried to add stimulus on SonataAdmin Add Stimulus #7838
• he also started a PR to bump adminLTE on SonataAdmin Upgrade adminLTE to v3 #7740

I would say we're opened to all solutions, bumping AdminLTE, using something else or doing everything with native bootstrap. We just lack of important contributions/contributors.

I personally used this library for 3 years and that's why I worked a lot on it to make the 4.0 major version. But now I changed of work and don't use it anymore ; even if I can still contribute for small changes and doing code review/issue triage/release/etc... I won't be able to work on the whole front rework.

I think @jordisala1991 is still using this library but he was really busy recently.

[multifinger]

@toooni this is really good news, that companies are willing to support open-source. I'm using sonata project solutions in every new project since crusial breakchange during symfony 1.4=>2 (when symfony 1.4 CRUD admin generator was deprecated and sonata project came on the stage to replace this missing feature), and I'm always talking to the employers about the nessecarity of supporting open-source projects. However, they don't understand why they should pay for things which are free.
I'm ready to work on popularization of funding open-source project, thanks to github new funding feature this can eventually become a game changer, but it's not popular yet. This market is really incomprehensible for most people. I think we can start from preparing a team which will maintain some solutions. I can suggest myself as a developer & product manager for improving sonata proejct to a set of popular bundles for most commont admin-dashboard solutions.

[multifinger]

The questions which are not clear to me yet:

1. Is there a core-team of sonata-admin and how do you communicate?
   (for example if I'd like to contribute and submit a PR for certain feature - I want to ensure before that the PR would be reviewed, that the feature submitted is nessecary and usefull and that nobody else isn't working on it right now.

2. Can the core team offer a deal for users to guarantee maintaining in exchange for project funding?
   That would help a lot to explain to project owner the benefits of the Sonata bundles instead of self-written solutions and why funding a $100..$1000 per month is better that paying $3000..$5000 to the company's developer to maintain self-written sollution.

[multifinger]

Back to the main issue of Bootstrap upgrade, I want to share my thoughts:

Using 3rd party libraries (ichecck, x-editable, adminLTE) +/- (advantages and disadvantages)

• You can suggest more powerfull features

• Harder to maintain and upgrade (risk of 3rd party lib deprecation)
  The question about to use or not to use 3rd part lib should be answered for each lib independently concidering adv. and disadv. or each certain lib.

So, the bootsrap in my opinion is the must to be used as a core dependency, but bootstrap themes like AdminLTE and alternatives is not a must, you can make it as a possible extension for core SonataAdmin and it can be maintained by comminity independently, so the dependency would be like this:
Symfony => SonataAdminBundle => SomeSonataAdminThemeBundle

The core team can choose which ThemeBundle is good enought and include it in the core build.
The x-editable feature can be moved out from the core the same way - the people who use it and ready to maintain it - can make an extension bundle to bring this feature available, but most people who don't use that - can enjoy up-to-date and well maintained SonataAdmin core bundle.

The main disadvantage of current sonata admin is a big delay from updates. I want to use Sonata, but it's still on Bootstrap3, so less people would consider using SonataAdmin to start their project (in comparison EasyAdmin is good looking but has a pure features and strange routing solution). So I'd prefer to use SonataAdmin, but I can't explain to the Employer why we should use the bundle with outdated Bootstrap3 inside.

[jordisala1991]

The development of Sonata for v4 was focused on code quality, removal of deprecated code, testing, bug fixing, modernise a bit the frontend stack (introduce npm, webpack, etc...), but we couldnt afford doing that and also upgrade the frontend visuals (also because we were stuck with the x-editable).

For now I am waiting for bootstrap 5.3 to become stable. I think we need few dependencies on the frontend and only use the ones that are almost guarantee to not disapear. Using admin-lte in the past has been a problem because they are also stuck in a situation where they do not release new upgrades.

Currently there are 2 contributors active: me and @VincentLanglet. We also have @franmomu and @phansys doing some reviews on specific bundles.

Upgrading to Bootstrap 5.3 wont be an easy task and will probably require another major release of the admin-bundle, because we cant afford maintaining multiple layouts.

That being said, we can talk about economical support if you want. That could definitely
help doing such upgrade on free time (we all work for free here plus our paid jobs).

[VincentLanglet]

I can suggest myself as a developer & product manager for improving sonata project to a set of popular bundles for most commont admin-dashboard solutions.

Hi, @multifinger, if you want to help sonata you can already

• Sponsoring the main contributors/maintainers
• Contributing to the repo

And don't need to wait for someone else proposing money ;)

Is there a core-team of sonata-admin and how do you communicate?

There is a core team, which decreases over time. Currently, the more active/recent maintainers are @jordisala1991 and I.
Jordi is still using sonata, but I don't ; so I'm still doing review/release/small bugfix, but won't work on big feature like the bootstrap migration. Also I prefer to popularize contributors-contributions, rather than all-on-the-core strategy.

We essentially communicate with issues and PR, so everything is free to access for everyone.

Can the core team offer a deal for users to guarantee maintaining in exchange for project funding?

I have trouble with the "guarantee" verb.
Project funding will help core team supporting more Sonata and is welcomed but won't never guarantee anything.
I see sponsoring as a "Thank you" and not like a job.

[krzyc]

@VincentLanglet @jordisala1991 Hi, I use Sonata Admin on regular basis and I think I can make some contributions. But at the moment there is a lot of work in progress PRs and I see most of them are closed without merge. Can you put some update on current priorities and plans? What work should be done next to be included in next release?
For example there is open PR Add Stimulus #7838 - what is needed to merge it? It will probably affect most of frontend changes.
Sorry if it is inappropriate to start this kind of discussion under issue (but it already turned into broader discussion). Thanks for your great work.

[jordisala1991]

PR for Stimulus is already merged (not released yet) , and its first usage for next major of form-extensions is ready: sonata-project/form-extensions#427

This should be the foundation of future majors.

[wbloszyk]

I need to make sonata-admin frontend more customizable for webpack. Now I have to copy assets and override @SonataProject\standard_layout.html.twig. We also have problem with 3rd party libraries. I agree with this comment so I will try to help with that by: #8107

[haivala]

how about using: https://tabler.io/

[eerison]

Hey @jordisala1991 Have you considered to use : https://tabler.io/ as a template base for sonata?

cc @VincentLanglet

@haivala

[core23]

Choosing the next admin frontend framework should not be our biggest issue. The migration to the AdminLTE is quite easy (in theory).

The biggest problem we're facing at the moment are the 3rd party libraries that are not maintained anymore (e.g. x-editable) and we haven't found any easy solution to keep it or to remove it at the moment.

[wbloszyk]

Choosing the next admin frontend framework should not be our biggest issue. The migration to the AdminLTE is quite easy (in theory).

Agree

The biggest problem we're facing at the moment are the 3rd party libraries that are not maintained anymore (e.g. x-editable) and we haven't found any easy solution to keep it or to remove it at the moment.

Do not agree. Look at #8117. We can just ignore 3rd party libraries.

[martinbroos]

I would suggest to drop iCheck and replace it with native checkbox styling. I disabled it in the latest admin implementation because I was having problems with the custom events iCheck requires.

This css makes sure the native checkbox/radio buttons have the same size as the label next to it.
And with accent-color you can have some basic color styling which should be fine for an admin environment.

body:not(.sonata-icheck) {
    .checkbox,
    .checkbox-inline,
    .radio,
    .radio-inline {
        label {
            display: grid;
            grid-template-columns: 1em auto;
            gap: 0.5em;
            padding-left: 0;
            font-size: 1em;
        }

        .control-label__text {
            font-weight: 400;
        }

        input {
            position: unset;
            margin: unset;
            accent-color: #0095e2;
        }
    }
}

From:

To:

If we really want to have a more custom look this can also be achieved with a bit more css and still be able to drop the js dependency. For more info look at: https://moderncss.dev/pure-css-custom-checkbox-style/
But I would suggest to keep it as native as possible.

My guess is that the same goes for the datepicker library, native date input fields are fine for most usecases in an admin environment. If a user requires a special input with disabled dates the can add it themself. Now these old jQuery libs are holding us back.

[bobemoe]

I have a project that is pure admin area so no other frontend or asset managers other than what comes with Sonata.

I am trying to include another JQuery UI component (popup-menu). I have found this: https://docs.sonata-project.org/projects/SonataAdminBundle/en/4.x/cookbook/recipe_jquery_ui/ but I have no webpack.config.js or assets folders.

I just went to install Encore but the symfony docs are now suggesting AssetMapper is the future? https://symfony.com/doc/current/frontend.html : recommended for new projects. Since I have no asset manager, yarn or npm yet and this is fairly new project I think I would prefer to use it.

So my question here is, are there any intentions to migrate to AssetMapper? How compatible would it be to use in my project or do I need to choose Encore to work with Sonata?

From the OP it looks like you've not long finished migrating to Webpack Encore, and given limited resources and the fact Encore still looks well supported I'd doubting it will be any time soon.

I came here searching for "AssetMapper" but this is the closest issue I found. Just thought this would be the right place to throw the proverbial spanner for consideration with the Frontend Upgrade.

[eerison]

suddenly adminLTE released a v4 beta version 👀
https://github.com/ColorlibHQ/AdminLTE/releases/tag/v4.0.0-beta1