Bootstrap5 support by stephencmorton · Pull Request #973 · mistic100/jQuery-QueryBuilder

stephencmorton · 2023-06-22T22:02:12Z

I started to work to make jQuery-QueryBuilder work with Boootstrap 5.
I believe I've done >80% of the "Bootstrap" work, I just need to verify that the popovers/tooltips work. (I do not think they do but I do suspect that the fix is very simple.)

So far it is pretty easy.

What is hard for me is the "npm" stuff. "packages.json" etc, making all the versions work together. I'm a professional programmer but I do not work in nodejs so all this npm build stuff is foreign to me. I imagine that what an experienced person in this area could finish in 20 minutes I could work on for hours and still fail. I'm hoping that somebody else can pick up that part and quickly do it.

Merge request checklist

I read the guidelines for contributing
I created my branch from dev and I am issuing the PR to dev
I didn't pushed the dist directory
If it's a new feature, I added the necessary unit tests

mistic100 · 2023-06-24T09:12:32Z

If you finish the migration I will publish it.

If you are professional programmer I am sure you can follow the build guide :)
https://github.com/mistic100/jQuery-QueryBuilder#build

stephencmorton · 2023-06-27T14:52:44Z

Great, I'll finish the work then. Thanks.

Building is difficult because this uses nodejs-legacy and no amount of coercing will get it to build in a modern Ubuntu environment. I'll try in a legacy nodejs container. (And if you build it with non-legacy nodejs, it results in a sea of errors.)

mistic100 · 2023-06-27T15:47:33Z

Okay I didn't realize the stack was so outdated.

Unfortunately I have no will to spend time working on this. If the changes are simple enough I will hack into to dist files directly, otherwise....

stephencmorton · 2023-07-01T22:26:51Z

I can get it to build (npm install; grunt) in a container with an older node version (using node10 or node12 e.g. circleci/node:erbium-bullseye-browsers-legacy from dockerhub) but I cannot yet pass the unit tests grunt test --force on the pristine-without-my-changes dev or master branches. I will keep trying.

(Re-posting same comment as before that I accidentally posted from the wrong account.)

mistic100 · 2023-07-02T07:44:58Z

Don't try too long, the unit tests are broken since years.

mistic100 · 2023-07-02T09:55:22Z

I spend this morning reworking the dev tools, not more outdated dev dependencies and it works on Node 16 (probably higher)

mistic100 · 2023-07-02T10:31:19Z

Beware I removed doT.js dependencie and modified the templates.

stephencmorton · 2023-07-05T14:14:53Z

I was just rebasing on the latest. This is not 100% yet.

abeverley · 2023-09-02T14:48:54Z

Hi @stephencmorton - I just wondered how this is going - would some sponsorship help to get it over the line?

stephencmorton · 2023-09-02T16:32:49Z

Summer holidays and family things mostly. I'll see if I can get back to this.
Sponsorship other than getting my job to give me more holiday, or my kids to be less work, is not needed. But thanks.

Something to do with the way JS packages are installed. I'm not sure if it's the right solution or not, but the error goes away if I do this. - } else if (typeof exports === 'object') { + } else if (typeof module === 'object') { // Node, CommonJS-like module.exports = factory(require('jquery'));

stephencmorton · 2023-09-03T00:33:44Z

I've got it working. I submit it for approval/inclusion.

I did have to comment out the bootbox support. It's a NPM/Javascript issue that I assume is simple for somebody who knows more about this area than I do. "module" is not defined .

It's all a bit thorny with all the NPM inclusions and a lot of other modules are still working on their Bootstrap5 support too.

liamkeily · 2023-09-25T15:37:16Z

examples/index.html

  $('.set-filters').on('click', function() {
    $(this).prop('disabled', true);
-    $(this).tooltip('hide');
+    // $(this).tooltip('hide');


is this still needed?

the following may work if you were looking to convert bootstrap.Tooltip.getInstance($(this)).hide();

weshooper · 2023-09-29T06:18:09Z

Thanks for your efforts on this @stephencmorton (and @mistic100!), much appreciated. Also happy to sponsor if there's an option to do so ❤️

abeverley · 2023-09-29T07:42:24Z

Thanks again for this @stephencmorton - great work.

I'm just working out what (ideally) needs to be done before this is merged (and I may have someone who can help if needed):

Fix the bootbox problem
Make it continue to work with older Bootstrap versions for backwards compatibility (or enable building for both)?
Anything else?

stephencmorton · 2023-09-29T13:42:49Z

Hi @abeverley,

I think that's about it, other than a general "give it all a good code review and test and fix/improve anything you find". (One definite area too look at is JS packaging: I don't really understand the implications of different packaging methods like commonjs/module/ES6.)

To be honest, I do not see any point in offering backwards compatibility beyond adding to the documentation a section about Bootstrap 3 support being available by using release 2.7.0 and below.

I believe I've taken this as far as my experience/skills will allow so I'd love it if you or @mistic100 could finish any remaining 5% to get it published.

I carefully made separate commits for each "major area" of change, so for instance, if somebody decided that the way I changed the icons was not the desired way forward, it would be easy to redo just that one commit.

mistic100 · 2023-09-29T13:52:31Z

I agree backward compatibility is not needed. I can publish as V3 but I cannot test it.
Do any of you want to be maintainer of the project to be autonomous on the BT5 support ?

liamkeily · 2023-09-29T16:09:07Z

I have tested this using yarn and yarn run serve

Before

Kapture.2023-09-29.at.17.04.15.mp4

After

Kapture.2023-09-29.at.17.03.37.mp4

Issues

When i first cloned this branch i had trouble with yarn. I think the yarn.lock file is messed up. git checkout dev yarn.lock and yarn sorts it. The fixed file needs committing to this branch.
The default theme looks a bit broken / not central compared to before
Checkboxes have broken icons (Still using Glyphicons here https://github.com/stephencmorton/jQuery-QueryBuilder/blob/81175dd6fe7e1ada7e69cabd44268932629c5fd7/src/plugins/bt-checkbox/plugin.scss#L3)
Checkboxes no longer inline
Field select boxes are not being populated when clicking the set data buttons

stephencmorton · 2023-09-29T16:13:28Z

I'm not sure if it works with yarn anymore. I believe Damien suggested I run npm run build and npm run serve.

(The documentation in this fork was updated to reflect that. https://github.com/stephencmorton/jQuery-QueryBuilder/tree/dev-bootstrap-5#developement )

liamkeily · 2023-09-29T16:14:54Z

@stephencmorton ah ok, in that case perhaps we need to get rid of yarn.lock and commit a package-lock.json

mistic100 · 2023-09-29T16:15:51Z

There should not be any difference, NPM and Yarn install there dependencies the same way in the same location. and "npm run" and "yarn run" are strictly identical

but a major dependencies upgrade it might be useful to remove the lock file and recreate it for good

stephencmorton · 2023-09-29T16:15:56Z

That could very well be. As I've confessed, npm/js is not my area of expertise.

stephencmorton · 2023-09-29T16:34:54Z

I had pointed out that it was not possible to build and Damien updated some of it to work with a newer Node version. He'd tested to Node 16, I believe so I never tried building on anything higher than 16 either. (Built in a docker.)

stephencmorton · 2023-10-11T18:35:50Z

I have tested this using yarn and yarn run serve

Issues

* [ ]  When i first cloned this branch i had trouble with `yarn`. I think the `yarn.lock` file is messed up. `git checkout dev yarn.lock` and `yarn` sorts it. The fixed file needs committing to this branch.

* [ ]  The default theme looks a bit broken / not central compared to before

* [ ]  Checkboxes have broken icons  (Still using Glyphicons here https://github.com/stephencmorton/jQuery-QueryBuilder/blob/81175dd6fe7e1ada7e69cabd44268932629c5fd7/src/plugins/bt-checkbox/plugin.scss#L3)

* [ ]  Checkboxes no longer inline

* [ ]  Field select boxes are not being populated when clicking the set data buttons

There are two possible types of errors here

The example index.html file (and its css) needs updating.
There is a bug in the jQuery-QueryBuilder code.

These are quite different types of problem/seriousness.

stephencmorton · 2023-10-11T18:37:54Z

I welcome anybody to do some last fixes/polishing on this MR. I've done the "heavy lifting" and if anybody has the motivation/energy/skills to find any issues that they feel are blocking and then fix those issues, that would be fantastic. (I would not take it as an insult to my "ownership" of this MR, quite the opposite. I welcome collaboration/help.)

dethell · 2024-01-09T11:43:41Z

@stephencmorton I started with your branch and have so far added a few changes to fix the checkbox rendering to correctly be inline and using BS5 classes: #988
It still looks a bit off, visually, where instead of rendering the SVG checkbox I just get a white square. I'll keep working at this PR and see if I can't address the remaining concerns. I was hoping to contribute my changes to your PR so yours is the one that gets merged and you get the credit for the work.

abeverley · 2024-01-09T19:35:33Z

Hi @stephencmorton and @dethell - thanks for your work on this, it's much appreciated. Just to mention that I have someone in my team that I should be able to put onto this to help finish things off. Would you like to let me know if/when you need him to jump in?

Also, I was thinking about the backwards compatibility. Whilst I can see that different versions could be used with different versions of Bootstrap, I think it would be useful for the latest version (i.e. with this patch) to still work with Bootstrap 4. That version of Bootstrap is still widely deployed (including by my company) and it would be good to be able to use the latest version of QB to with it. I'm not sure what this would involve but I'd be happy to look at it.

dethell · 2024-01-09T19:53:15Z

Hi @stephencmorton and @dethell - thanks for your work on this, it's much appreciated. Just to mention that I have someone in my team that I should be able to put onto this to help finish things off. Would you like to let me know if/when you need him to jump in?

Also, I was thinking about the backwards compatibility. Whilst I can see that different versions could be used with different versions of Bootstrap, I think it would be useful for the latest version (i.e. with this patch) to still work with Bootstrap 4. That version of Bootstrap is still widely deployed (including by my company) and it would be good to be able to use the latest version of QB to with it. I'm not sure what this would involve but I'd be happy to look at it.

I'm happy for any help. I don't use Bootstrap 4 anymore, but I could see it being useful. I guess we'd need to evaluate how different it would be to support both.

stephencmorton · 2024-01-09T20:13:22Z

Thank you both. Yes, I'd appreciate any help.
I was imagining that there would be a clean break and 2.7.0 (or 2.7.2 or .4 or whatever) would be the last Bootstrap4 release and then subsequent releases would be Bootstrap5 only. Alternately, I can imagine that @mistic100 could number the first Bootstrap5 release 3.0.0 and then if there were improvements/fixes that needed back-porting to bootstrap4, they could be done in a different feature development branch and releases from that branch could continue with the 2.x.y numbering. Whether or not that actually happens, it does seem to me to make the most sense to have a new release be 3.x.y for that reason and because for semantic versioning this is API-breaking in that it needs a new bootstrap release.

dethell · 2024-01-11T11:35:27Z

I spent a bit more time today trying to discern why the title in the button associated with each filter select input is not updating with the filter label. I can't see anything in your changes that would cause this so it must be a bug in the interaction between QueryBuilder and Bootstrap 5.

dethell · 2024-01-12T11:14:31Z

@stephencmorton can you check out the last push I made to my PR based on yours? I removed the use of the bt-selectpicker plugin which causing the select input problem. Now it just defaults to the standard Bootstrap 5 select markup and everything works well. I'm not sure there are any issues remaining except the checkbox icon.

liamkeily · 2024-01-16T12:50:28Z

I have resolved the checkbox icon in #990

stephencmorton · 2024-01-16T13:58:07Z

Fantastic. Sorry, I meant to test this weekend as promised, but didn't find time. I'll get right on that.

liamkeily · 2024-01-16T17:57:01Z

I've figured out why Dark mode is messed up in this branch. If you see https://github.com/mistic100/jQuery-QueryBuilder/pull/973/files#diff-a11faa5810ac713931e63304028150455c6e34d4aef559c6ab0b6c7219153ffaR47 when you switch to dark mode it loads in another version of bootstrap from boot-swatch. The version it switches to is Bootstrap 3.

Instead what i think we need to do is load in the same bootstrap 5 file, but set <html data-bs-theme="dark"/> as well as the style overrides from dark.scss.

I'm working on putting together another branch which fixes this and other things mentioned above.

liamkeily · 2024-01-17T12:49:35Z

Continued at #992

liamkeily · 2024-01-22T11:52:51Z

Closing in favour of #992 - thanks for starting this @stephencmorton

stephencmorton force-pushed the dev-bootstrap-5 branch 2 times, most recently from 42b16f9 to 18961ff Compare July 5, 2023 14:13

stephencmorton and others added 5 commits September 2, 2023 20:23

Bootstrap 5 - package.json

e882c76

Bootstrap 5 - Classes updated for Bootstrap 3-5 differences

11246d0

Bootstrap 5 - Popover library conversion

60e5e81

Bootstrap 5 - Bootstrap Icons replace Glyphicons

624cca7

stephencmorton force-pushed the dev-bootstrap-5 branch from 18961ff to a124bdd Compare September 3, 2023 00:29

stephencmorton changed the title ~~Bootstrap5 support - WIP~~ Bootstrap5 support Sep 3, 2023

Merge remote-tracking branch 'mistic100/dev' into dev-bootstrap-5

96755cc

liamkeily reviewed Sep 25, 2023

View reviewed changes

liamkeily mentioned this pull request Jan 16, 2024

Replace Glyphicons with Bootstrap Icons #990

Closed

5 tasks

liamkeily mentioned this pull request Jan 17, 2024

Bootstrap 5 Further Progress #992

Merged

5 tasks

liamkeily closed this Jan 22, 2024

Conversation

stephencmorton commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mistic100 commented Jun 24, 2023

Uh oh!

stephencmorton commented Jun 27, 2023

Uh oh!

mistic100 commented Jun 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stephencmorton commented Jul 1, 2023

Uh oh!

mistic100 commented Jul 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mistic100 commented Jul 2, 2023

Uh oh!

mistic100 commented Jul 2, 2023

Uh oh!

stephencmorton commented Jul 5, 2023

Uh oh!

abeverley commented Sep 2, 2023

Uh oh!

stephencmorton commented Sep 2, 2023

Uh oh!

stephencmorton commented Sep 3, 2023

Uh oh!

liamkeily Sep 25, 2023

Choose a reason for hiding this comment

Uh oh!

weshooper commented Sep 29, 2023

Uh oh!

abeverley commented Sep 29, 2023

Uh oh!

stephencmorton commented Sep 29, 2023

Uh oh!

mistic100 commented Sep 29, 2023

Uh oh!

liamkeily commented Sep 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Issues

Uh oh!

stephencmorton commented Sep 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

liamkeily commented Sep 29, 2023

Uh oh!

mistic100 commented Sep 29, 2023

Uh oh!

stephencmorton commented Sep 29, 2023

Uh oh!

stephencmorton commented Sep 29, 2023

Uh oh!

stephencmorton commented Oct 11, 2023

Issues

Uh oh!

stephencmorton commented Oct 11, 2023

Uh oh!

dethell commented Jan 9, 2024

Uh oh!

abeverley commented Jan 9, 2024

Uh oh!

dethell commented Jan 9, 2024

Uh oh!

stephencmorton commented Jan 9, 2024

Uh oh!

dethell commented Jan 11, 2024

Uh oh!

dethell commented Jan 12, 2024

Uh oh!

liamkeily commented Jan 16, 2024

Uh oh!

stephencmorton commented Jan 16, 2024

Uh oh!

liamkeily commented Jan 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stephencmorton commented Jun 22, 2023 •

edited

Loading

mistic100 commented Jun 27, 2023 •

edited

Loading

mistic100 commented Jul 2, 2023 •

edited

Loading

liamkeily commented Sep 29, 2023 •

edited

Loading

stephencmorton commented Sep 29, 2023 •

edited

Loading

liamkeily commented Jan 16, 2024 •

edited

Loading

liamkeily commented Jan 22, 2024 •

edited

Loading