Upgrade to Bootstrap v4

[dstaley]

This PR upgrades the site to the latest release of Bootstrap. It's mostly some class changes and HTML-structure changes to accommodate the new BS4 components. There were also a handful of test changes to account for the new markup.

[dstaley]

@leplatrem I'm gonna keep this one open a few days because I'd love to get your thoughts! To make it easy I've deployed it here. Mainly just looking to hear if there's anything that's obviously broken.

[leplatrem]

This is amazing, Dylan 🤩 💯 you rock!

The UI look is great!
Let me play with it using our production servers, I want to double check rsjf mainly...

[leplatrem]

Apparence of schema fields in attributes of in readonly collection

before

after

Apparence of permissions form

We lost the 2 columns view

before

after

Broken attachment form

No way to attach files anymore ?

Signoff plugin popup windows broken

I would have to investigate this one myself, since there's no easy way to reproduce without a remote-settings instance.

[leplatrem]

Dylan, this is what I could find after a first round ;) But it looks fantastic! This work has remained as TODO for sooo long!!

[dstaley]

@leplatrem After digging into the issues you pointed out, I realized that the majority of them stem from the switch to @rjsf/bootstrap-4, which is a Bootstrap 4 version of the react-jsonschema-form library. After reviewing the updates to the library, I discovered a substantial number of instances where functionality was lost or broken in the upgrade process. I read through some of the issues that popped up around the release of the v2 version, and came to the conclusion that the new framework-agnostic theme system isn't really a great fit for us since it requires reimplementing each form element type (a task that is quite difficult given the complexity of some of the elements). There's a lot of complexity there, and I'd rather just focus on delivering a modern version of the current admin experience rather than try to find all the ways the new library doesn't work, especially since I can't predict how the new library will break for people who are using custom schemas and such.

With that in mind, I think the best path forward is to fork react-jsonschema-form from the last release (v1.8.1) prior to the introduction of Bootstrap 4, upgrade to the latest versions of React and related tools, and swap out the Bootstrap 3 components for their Bootstrap 4 versions. I've gotten the first bit done already, so all that's left is upgrading the Bootstrap version. I plan on releasing a new package, kinto-admin-form, which we can then consume in kinto-admin. (Once I finish up some other changes in kinto-admin, I'll probably absorb kinto-admin-form into the library to make it a bit easier, but I'd rather wait until we get rid of Flow.)

[dstaley]

Note to self: The permissions form uses custom classes, .field-principal and .field-permissions to create the columns.

[epicfaace]

and swap out the Bootstrap 3 components for their Bootstrap 4 versions

Isn't this essentially the same as "reimplementing each form element type" (which is what @rjsf/bootstrap-4 does and what you were trying to avoid)?

[dstaley]

Isn't this essentially the same as "reimplementing each form element type" (which is what @rjsf/bootstrap-4 does and what you were trying to avoid)?

Great point! I'm not so much against a reimplementation so much as I'm against the specific reimplementation choices made by the Bootstrap 4 theme. By making the modifications myself to the Bootstrap 3 widgets, it's my hope that I can (at the very minimum) output the same HTML structure for the majority of the components, and make specific, minimal changes to support the Bootstrap 4 theme. As it stands, the Bootstrap 4 theme offered by @rjsf/bootstrap-4 manages to omit some of the smaller details (and some of the larger ones like valid input types), and it doesn't give me a lot of confidence that every widget will work when used.

That being said, I'm certainly not opposed to switching back to @rjsf/bootstrap-4 (or some theoretical future version that makes themes behave more consistently) in the future should its implementation become consistent with the implementation of the core widgets.

[dstaley]

@leplatrem Okay, I think it's ready for another look! It's deployed here.

[leplatrem]

This looks great!

Tiny detail: lack of margin on the checkbox labels

Then I think there's something to improve for the collection deletion panel:

And the rest looks great!
If you allow me, I'd say that we could improve the apparence of the fields description:

🎉
Thank you Dylan, this is amazing!

[dstaley]

@leplatrem Alright, unless you see anything wrong with this deploy, I'll merge this in! 🎉

One thing I want to note: it looks like your default browser font is a bit bolder than what's intended. My guess is that it's because Bootstrap v4 switches to a system-default font-stack. For reference, here's what the changes look like on Windows:

[leplatrem]

You're a champion! Thank you!!