Log of changes for upgrade to Bootstrap5

[JimKerslake]

Collation of template changes to support moving up to BS5 (many issues apply across all of the cs repositories)

[JimKerslake]

Note that copies of bootstrap.css and bootstrap.bundle.js are present in each of the 20-ish shared themes in the template.
I have re-generated all these themes from the bootswatch site, to make them BS5 versions.

[JimKerslake]

For our default custom1 theme, however, the bootstrap CSS comes in via npm:
"bootstrap": "^5.1.3", in package.json

Then in scss I replaced the _bs4 file with _bs5, and updated all the imports to the updated set delivered from the node modules.
This all gets built up into style.css from the gulp task.

[JimKerslake]

Each of the 20+ shared themes has its own _Layout.cshtml, as does the custom1 theme, and an overall non-themed default one.
Each of these (and indeed every .chstml view in general) needs attention - with the major changes being:

pl and pr become ps and pe
ml and mr become ms and me
(so Nav Bar ml-auto for the _Loginpartial becomes ms_auto - and plenty of others)

data-toggle becomes data-bs-toggle
data-dismiss becomes data-bs-dismiss
data-ajax becomes data-bs-ajax
(and others similar)

Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable

[JimKerslake]

Cloudscribe.Web.Navigation - will now exist at v.5.0.1 with a complete set of new nav components:
"Bs5NavigationNodeChildTreePartial" (etc. etc.)
and the _Layout pages in the template will use those (hence assuming the dependency on 5.0.1 above is correct).

Minimal changes to how they function.

For future consideration:
can we perhaps lose the dependency on bs4.smartmenus.min.js for handling sub-menu dropdowns?
There seems to be no bs5 equivalent of that.
So the dependency still exists for now.

[JimKerslake]

cloudscribe.Web.Pagination: doing nothing here for the moment because I think the pager tag helpers (even the bootstrap one) don't do anything that needs to change. The use of multiple data- attributes such as data-ajax-success seem entirely related to the jquery.unobtrusive-ajax.js dependency, which I'm not changing... so don't need to change to data-bs-ajax-success

[JimKerslake]

cloudscribe.Core.CompiledViews.Bootstrap5 new Nuget at v5.0.0 contains fixes to the main breaking BS classes.
But this will need another pass through if we want to rectify various layout imperfections in the forms, because BS5 has deprecated .form-group, .form-row, and .form-inline. : these need to be re-implemented.
"Use our grid and utilities instead" (whichever ones they mean by that.)

[JimKerslake]

cloudscribe.FileManager.Web up to 5.0.1
Lots of tab-toggling and modals in here.

Chain up through cloudscribe.FileManager.CoreIntegration up to 5.0.2
Chain up through cloudscribe.Core.Web up to 5.0.2

[JimKerslake]

cloudscribe.IdentityServerIntegration.CompiledViews.Bootstrap5 new Nuget at v5.0.0 - full of views as previously.
Same comment as above about needing to re-visit to re-work forms if these old classes are used anywhere:
.form-group, .form-row, and .form-inline

[JimKerslake]

cloudscribe.Web.Common up to 5.0.1
means that cloudscribe.Core.Web up to 5.0.2 needs a rebuild...

[JimKerslake]

There is no BS5 version of bootstrap4-datetimepicker.min.js
Looks like we just move to using an HTML5 date input instead..?
https://www.codeply.com/p/zU0EWDmIfn

[JimKerslake]

File Manager broken under BS5
the cropper on the 3rd tab
relies on deprecated 3rd party Cropper v3.0.0-alpha.1
May need JS re-work.

[JimKerslake]

cloudscribe.DynamicPolicy.Web.Views.Bootstrap5 new NuGet at 5.0.0

[JimKerslake]

cloudscribe.Logging.Web up to 5.0.1 (just one view)

[JimKerslake]

cloudscribe.SimpleContactForm up to 5.0.1 (views)

[JimKerslake]

cloudscribe.Core.SimpleContent.CompiledViews.Bootstrap5 new NuGet at 5.5.0 (note 5.5)

[JimKerslake]

cloudscribe.SimpleContent.CompiledViews.Bootstrap5 new NuGet at 5.5.0 (note 5.5)
This is the biggie: over 100 views in here

[JimKerslake]

cloudscribe.SimpleContent.ContentTemplates.Bootstrap5 new NuGet at 5.5.0 (note 5.5)

[JimKerslake]

There is technical debt with cloudscribe.SimpleContent.ContentTemplates.Bootstrap5 because the project contains views but also a bunch of c# classes, controllers etc. Should be factored out into separate projects, with one containing just the views. That'll be a separate undertaking / issue.

[JimKerslake]

cloudscribe.SimpleContent.ContentTemplates.Bootstrap5 required quite a bit of intervention to controllers, JS, and c# template definitions, due to coupling between (template) views and the version of BS.

[JimKerslake]

cloudscribe.SimpleContent.Web up to v5.5.2 (JS changes)

[JimKerslake]

cloudscribe.Email.Templating.Web to v 5.0.1 (views)

Needs a reference up through cloudscribe.EmailList.Web.Mvc to v. 5.0.2

[JimKerslake]

cloudscribe.EmailList.Views.Bootstrap5 new NuGet at 5.0.0 - about 25 views

[JimKerslake]

cloudscribe.Forms.Bootstrap5 new NuGet at 5.0.0 - about 20 views

[JimKerslake]

cloudscribe.Forms.ContentTemplate.Bootstrap5 new NuGet at 5.0.0

[JimKerslake]

Potential point of breakage:
In cloudscribe.Forms.ContentTemplate.Bootstrap5
I'm going to retain the dependency on
/cr/js/cloudscribe-modaldialog-bootstrap4.min.js
(which is in CS core)
at least until/unless it causes breakage in the form builder, if it turns out that BS5 does modals differently from 4.

[JimKerslake]

NuGet reference chain problems.
References to cloudscribe.Web.Navigation : new 501 not getting picked up
cloudscribe.SimpleContent.Web at v5.5.2 needs a re-build to up its reference to cloudscribe.Web.Navigation 5.0.1
cloudscribe.Core.Web at v5.5.2 needs a re-build to up its reference to cloudscribe.Web.Navigation 5.0.1

No that won't do - I need a new cloudscribe.Web.SiteMap.FromNavigation at 501 that refs cloudscribe.Web.Navigation at 501

[JimKerslake]

Modals are broken: CS's use of a custom attribute bs-modal-link="true"
is handled by a custom taghelper BootstrapModalAnchorTagHelper.cs
which says:

this taghelper detects the bs-modal-link attribute and if found (value doesn't matter)
it decorates the link with the data-ajax- attributes needed to wire up the bootstrap modal
depends on jquery-ajax-unobtrusive and depends on cloudscribe-modaldialog-bootstrap.js

Although a set of data-attributes does indeed get attached to the DOM, e.g.:
data-ajax-success="openModalDialog('b9484c70-289c-41ff-98f6-5a41eaff4a47')
the subsequent handling by either the cloudscribe-modaldialog-bootstrap4.js or /cr/js/jquery.unobtrusive-ajax.min.js doesn't do anything.
No console errors.

[JimKerslake]

Thanks @StewartBellamy - there seems to be an undocumented change in modal behaviour from BS4 to BS5, such that (when initialised from javascript) you no longer have the option to show like this:
div.modal({ show: true, backdrop: true });

Instead you have to

div.modal({ backdrop: true });
div.modal('show');

Requires a new
cloudscribe-modaldialog-bootstrap5.js
over in the static files library (cs core repo)
and re-wiring of references in a bunch of places to being in that version of the js modal handler instead.

Same change also required in cloudscribe-role-selector.js

The whole system above provides an abstracted mechanism of opening a modal by retrieving a partial view from a controller endpoint via AJAX and appending that into the modal content. However the usages (out in the peripheral projects) are dependent on these js handler files (and the taghelper) back in the CS core Web.Staticfiles... and also depend on jquery ajax unobtrusive.

[JimKerslake]

cloudscribe.Web.StaticFiles up to 5.0.1 to deal with above

[JimKerslake]

cloudscribe.Core.CompiledViews.Bootstrap5 re-build at 5.0.0 to include revised references to above js

[JimKerslake]

cloudscribe.Forms.ContentTemplate.Bootstrap5 re-build at 5.0.0 to include revised references to above js in ContentTemplateProvider.cs

[JimKerslake]

cloudscribe.Forms.Web - up to 5.0.1

Note the vulnerability here -
lots of obfuscated js files which seem to derive from original copies in the dev webapp - and the survey runner ko script contains a 'bootstrap' theme itself:

formrender.js
Survey.StylesManager.applyTheme("bootstrap");
ends up in fr.js

builderPreview.js
Survey.StylesManager.applyTheme("bootstrap");
ends up in bp.js

survey.ko.js
if (["bootstrap", "bootstrapmaterial"].indexOf(themeName) !== -1) {
actually implements the theme - and ends up in (???)
fs.js

so I have to assume that
fsbuilder.bundle.js
ends up in
fsb.js

Will scan through all js and attempt to remedy any deprecated BS4 attributes

[JimKerslake]

cloudscribe.Membership.StripeIntegration.Bootstrap5 new NuGet at 5.0.0 - 3 Views

[JimKerslake]

cloudscribe.Membership.Views.Bootstrap5 new NuGet at 5.0.0
another 42 views

[JimKerslake]

cloudscribe.StripeIntegration.Mvc.Bootstrap5 new NuGet at 5.0.0
another 17 views

[JimKerslake]

sts.Licensing.Web.Bootstrap5 new NuGet at 5.0.0
another 30 views

[JimKerslake]

cloudscribe.TalkAbout.Forum.Web.Bootstrap5 new NuGet at 5.0.0
another 30 views

[JimKerslake]

cloudscribe.TalkAbout.Web contains bs4 css that is referenced from the two views projects - so need an update of this to 5.0.1

[JimKerslake]

Actually just renaming above bootstrap4 css to bootstrap.css since it contains only minimal stuff.
Ah but watch out for the reference to ~/cr/js/cloudscribe-modaldialog-bootstrap5.min.js from cloudscribe.TalkAbout.Forum.Web.Bootstrap5 !

[JimKerslake]

cloudscribe.TalkAbout.Web.Bootstrap5 new NuGet at 5.0.0
another 6 views

[JimKerslake]

cloudscribe.TalkAbout.Forum.Web contains bs4 css that is referenced from views project - so need an update of this to 5.0.1

[JimKerslake]

CommentStylePartial.cshtml included with the template: (why?) has bs4 reference

[JimKerslake]

Rebuild cloudscribe.TalkAbout.Web at 5.0.1 to accommodate changes to the javascript helpers that do modal things (again the breaking change in modal handling)

[JimKerslake]

Likewise rebuild cloudscribe.TalkAbout.Forum.Web at 5.0.1 - same modals issue

[JimKerslake]

cloudscribe.Web.StaticFiles - rebuild 5.0.1 to get a revised copy of jquery.smartmenus.bootstrap-4.min

[JimKerslake]

cloudscribe.Core.CompiledViews.Bootstrap5 - rebuild 5.0.0 to remove form-group and sort out modal close buttons

[JimKerslake]

cloudscribe.IdentityServerIntegration.CompiledViews.Bootstrap5 - rebuild 5.0.0 to remove form-group and sort out modal close buttons

[JimKerslake]

cloudscribe.Core.SimpleContent.CompiledViews.Bootstrap5 - rebuild 5.0.0 to remove form-group

[JimKerslake]

cloudscribe.simplecontent.contenttemplates.bootstrap5 - rebuild 5.0.0 to remove form-group

[JimKerslake]

cloudscribe.FileManager.Web re-build at 5.0.1
Re-work a bunch of modal close buttons (including in JS) and form-group

[JimKerslake]

cloudscribe.DynamicPolicy.Web.Views.Bootstrap5 - rebuild NuGet at 5.0.0 with changes to views:
modal close buttons and form-group

[JimKerslake]

cloudscribe.Forms.ContentTemplate.Bootstrap5
cloudscribe.Forms.Bootstrap5
rebuild NuGets at 5.0.0 with changes to views: modal close buttons and form-group

[JimKerslake]

Breakage in the file manager UI (particularly the image crop tab)
Needs tweaks to modal-handling in the js
(not sure why some raw JQuery seems broken)

Rebuild cloudscribe.FileManager.Web at v 5.0.1

[JimKerslake]

cloudscribe.web.common AlertSuccess needs attention: alert dismiss buttons broken

[JimKerslake]

cloudscribe.TalkAbout.Forum.Web.Bootstrap5 - rebuild at 5.0.0
lots of layout problems, modal close buttons etc.

and same with cloudscribe.TalkAbout.Web.Bootstrap5

[JimKerslake]

cloudscribe.Web.Common up to 5.0.2 for alert dismiss stuff

[JimKerslake]

Collated set up updated packages to implement BS5
(so far as I am aware - hopefully didn't miss any)

cloudscribe.Web.Navigation 5.0.1

cloudscribe.Web.SiteMap.FromNavigation 5.0.1

cloudscribe.Core.CompiledViews.Bootstrap5 5.0.0

cloudscribe.Core.Web 5.0.2

cloudscribe.FileManager.CoreIntegration 5.0.2

cloudscribe.FileManager.Web 5.0.1

cloudscribe.IdentityServerIntegration.CompiledViews.Bootstrap5 5.0.0

cloudscribe.Web.Common 5.0.2

cloudscribe.Web.StaticFiles 5.0.1

cloudscribe.DynamicPolicy.Web.Views.Bootstrap5 5.0.0

cloudscribe.Logging.Web 5.0.1

cloudscribe.SimpleContactForm 5.0.1

cloudscribe.SimpleContactForm.CoreIntegration 5.0.1

cloudscribe.Core.SimpleContent.CompiledViews.Bootstrap5 5.5.0

cloudscribe.SimpleContent.CompiledViews.Bootstrap5 5.5.0

cloudscribe.SimpleContent.ContentTemplates.Bootstrap5 5.5.0

cloudscribe.SimpleContent.Web 5.5.2

cloudscribe.Email.Templating.Web 5.0.1

cloudscribe.EmailList.Views.Bootstrap5 5.0.0

cloudscribe.EmailList.Web.Mvc 5.0.2

cloudscribe.Forms.Bootstrap5 5.0.0

cloudscribe.Forms.ContentTemplate.Bootstrap5 5.0.0

cloudscribe.Forms.Web 5.0.1

cloudscribe.Membership.StripeIntegration.Bootstrap5 5.0.0

cloudscribe.Membership.Views.Bootstrap5 5.0.0

cloudscribe.StripeIntegration.Mvc.Bootstrap5 5.0.0

cloudscribe.TalkAbout.Forum.Web 5.0.1

cloudscribe.TalkAbout.Forum.Web.Bootstrap5 5.0.0

cloudscribe.TalkAbout.Web 5.0.1

cloudscribe.TalkAbout.Web.Bootstrap5 5.0.0