Bootstrap v5

[smithdc1]

Fixes #7327

This is a WIP patch to upgrade the templates to Bootstrap v5. I've tried to chunk the commits up to help review, this will change as this will quite a number of files and lines of code.

I feel like I've made good progress so far. Only major issue I've found so far is tooltips on the dropdown button. The solution on bootstrap 4 (which I've used here) no longer works on bootstrap 5. Another alpha release is due of bootstrap 5 shortly, if it is not fixed in that I can try approaching the issue tracker.

To do (there is much more than this, but here are things I've changed but need to go back and look at):

• Fix tooltip on split dropdown button
• Change the js file to the bundled version (can then drop link to popper.js)

[carltongibson]

Hi @smithdc1. Thanks for this! Super start.

[smithdc1]

Thanks 😄

It's coming along well, currently wrangling with the collapse menu in the docs.

Got my eye on the upcoming releases, seems like they made good progress on alpha 2 in the last few days. I can already see some breaking changes in the next release but they should be incremental changes to the current changes. (e.g. rename of sr-only)

[smithdc1]

So I'm fairly pleased with where I've got this to. It's a bit of a waiting game now to see the new releases come out and see if there are any more breaking changes, and to see if the drop-down tool-tip gets fixed. Can also review the remaining css in bootstrap-tweaks and default to see if any further rationalisation can take place here.

One question I do have is for the filter form. The filter form looks a bit odd, it looks like a template from django-filter, what's going on here? (I think I know where this is headed... 😄 )

[carltongibson]

One question I do have is for the filter form. The filter form looks a bit odd, it looks like a template from django-filter, what's going on here? (I think I know where this is headed... 😄 )

Chuckle. 😀

Erm... the form is generated by django-filter but is it rendered with crispy forms? (A while since I looked in here...) If you throw up a few links to exact places I'm sure I can get the relevant grey-cells lined up again. 😝

[smithdc1]

Ok - let's leave it some time and I'll dig deeper at some point in the coming months. There is going to be plenty of time before Bootstrap 5 reaches a stable release.

There may be a crispy-bootstrap-5 template pack by then (template work is done, I need to find the effort to put it into a package, write docs, setup c/i etc)

[smithdc1]

Note (to self really).

#30170 on bootstrap 5 changes feedback messages. Html layout and CSS classes will need to be changed.

Currently this ticket is on the inbox for v5 alpha 2.

[joshjung]

Looking forward to this!

[smithdc1]

Looking forward to this!

Thanks -- It's coming but bootstrap 5 development itself is steadily paced. For your need I'm not sure I have a good answer, maybe you could have your own fork with this work, noting it is un-reviewed (but if you're in the market to have a look 😉 ) I'm not sure an alpha version is better than an old one from a security perspective 🤷 .

[smithdc1]

Bootstrap5 beta 1 is now out. I'll be looking to test my memory by revisiting this soon ™️.

[auvipy]

as this is staled, should we try a smaller incremental version with bootstrap v4 instead?

[baseplate-admin]

as this is staled, should we try a smaller incremental version with bootstrap v4 instead?

or maybe we should have our own CSS like django-admin 👀

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[auvipy]

we can revamp it with newer https://blog.getbootstrap.com/2023/05/30/bootstrap-5-3-0/ which has new colors and many improvements.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[baseplate-admin]

Hi, can this be rebased?

[luanfonceca]

Hi, @smithdc1

I want to help you finish this PR. I have extensive experience with Django templates and Bootstrap 5 (I just did a similar migration on a client from v3 to v5.3).

I plan to pull your branch, update this to Bootstrap v5.3, and keep going page by page, ensuring everything works seamlessly.
In the best scenario, we would do this incrementally, keeping the existing Bootstrap v3 stylesheets, js, and jQuery in use while we're updating each piece, but as this is an open-source library, I don't think we could do this.

Are you available for a quick async talk on the IRC channel, or do you prefer to discuss the next steps here?

[smithdc1]

Hi @luanfonceca -- I'm afraid I don't have time to work on this patch right now. It's been ~3 years since I've looked at this so I'd be starting from scratch to pick this up again. I think it would be amazing if you have capacity to update and address the review comments!

[luanfonceca]

Yeah, there's no need to worry about it.
I had that in mind already.

Thanks

[luanfonceca]

Hi @auvipy, I can take over this migration, I saw some conversation about migrating to v4 before trying the v5, do you know how that's going?

Last week did some attempts and can share where I'm at with you.

[luanfonceca]

Here's a short video showing how far I got with this last week; I had a couple of issues, and the layout still needs some improvements.

I can open a new issue up for discussion, along with my ideas about this, as there were several attempts related to this migration. I think we need time to decide what we want to do and how, as well as the impact of this migration on third-party apps that use the DRF browseable API page.

Screen.Recording.2023-12-16.at.12.06.34.PM.mov

[martinberoiz]

Could this maybe be released as some alpha version for some future release? Or is it too risky? I'm interested in BS5 too

[rmiyazaki6499]

Any update on this?

We recently had a pen test done and they told us that we need to upgrade Bootstrap due to security vulnerabilities

It seems this has been on the back burner for a while, any plans on updating? @luanfonceca

[luanfonceca]

Hey @rmiyazaki6499, sorry about that.

I tried to migrate that and got it in a really good state, but it is not production-ready.

The major problem I faced was that both the Docs and the user-facing (the front-end bundle that's pip installed) share the same front-end codebase, so to make the whole migration (DRF browseable API and docs), it needs to be done together.

I can get back to this if we are open to starting with just the user-facing first and migrating it separately. I'd ask that for two reasons:

1. It's probably where the vulnerabilities are more critical to get fixed
2. It's less work that could be better reviewed and launched.

[rmiyazaki6499]

Hi @luanfonceca
Thanks for the quick response, I appreciate it.

All good, thanks for the update
Fortunately the vulnerability seems to be relatively low, but as an engineer that is working on an app that heavily relies on DRF it would be nice to have this resolved sometime soon

[samanthagoodhue]

Thanks for trying to get this fixed @luanfonceca. In the same situation as @rmiyazaki6499 with pentest findings. Again relatively low risk, but would be great if you were able to fix 🙏

[anthonyrom]

Hi @luanfonceca thanks for your work on this. I'd be happy to try and pick up where you've left off if you don't have the time to work on this in the near term.

[auvipy]

you can take this and fix the merge conflicts first and make it working again

[luanfonceca]

Hi @luanfonceca thanks for your work on this. I'd be happy to try and pick up where you've left off if you don't have the time to work on this in the near term.

Go for it!

It was really hard to upgrade to Bootstrap v5, mainly because the same Base templates used in the User-facing API are also used in the Docs. Instead of upgrading just one template and a few components, I got caught up in the whole Docs website codebase, which was time-consuming and brought up several bugs and broken pieces of UI.

Creating a new base template for the user-facing API and upgrading only the HTML used there will make this migration easier.

[anthonyrom]

It looks like Bootstrap v5 upgrades will not be accepted for the Docs. Is this dead in the water until the "unified doc style" gets implemented (i.e. and the Docs site + user-facing API no longer use the same base templates)? Probably a question for @tomchristie