Bootstrap upgrade from v4 to v5

.github/workflows/cypress_tests.yaml

@@ -48,8 +48,9 @@ jobs:
                     npm run build
                     sudo chmod -R 777 config/ public/files/ public/theme/ public/thumbs/ var/
                     # prepare web server for e2e tests
-                    ./bin/console doctrine:database:create
-                    ./bin/console doctrine:schema:create
+                    ./bin/console doctrine:schema:create -q
+                    ./bin/console doctrine:migrations:sync-metadata-storage -q
+                    ./bin/console doctrine:migrations:version --add --all -n -q
                     ./bin/console doctrine:fixtures:load --group=without-images -n
                     ./bin/console server:start 127.0.0.1:8088
                     # test if web server works

.gitignore

@@ -19,8 +19,7 @@ webpack_stats.json
 ### Behat / Cypress / Front-end testing files
 bin/chromedriver*
 bin/selenium-server-standalone*
-tests/cypress/screenshots/
-tests/cypress/videos/
+tests/cypress/evidence
 
 ### File-system cruft and temporary files
 __*

assets/js/app/ajax-save.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import { patience_virtue, renable } from './patience-is-a-virtue';
+import { Toast } from 'bootstrap';
 
 let form = $('#editcontent');
 let record_id = form.data('record');
@@ -44,10 +45,15 @@ $(document).ready(function() {
         $('#toastBody').append(toastMessage);
 
         $(document).ready(function() {
-            $('.toast').toast('show');
-        });
+            let toastElList = [].slice.call(document.querySelectorAll('.toast'));
+            let toastList = toastElList.map(function(toastEl) {
+                return new Toast(toastEl, []);
+            });
 
-        setTimeout($('.toast').toast('hide'), 5000);
+            toastList.forEach(function(toast) {
+                toast.show();
+            });
+        });
     }
     this.href = window.location.pathname;
 

assets/js/app/common.js

@@ -1,5 +1,8 @@
 import $ from 'jquery';
 import { DateTime } from 'luxon';
+import { Popover } from 'bootstrap';
+import { Tab } from 'bootstrap';
+import { resetModalContent } from './modal';
 
 import { version } from '../version';
 window.assetsVersion = version;
@@ -37,15 +40,16 @@ $(document).ready(function() {
     let url = location.href.replace(/\/$/, '');
     if (location.hash) {
         const hash = url.split('#');
-        $('a[href="#' + hash[1] + '"]').tab('show');
+        let triggerEl = document.querySelector('a[href="#' + hash[1] + '"]');
+        Tab.getOrCreateInstance(triggerEl).show(); // Select tab by name
         url = location.href.replace(/\/#/, '#');
         history.replaceState(null, null, url);
         setTimeout(() => {
             $(window).scrollTop(0);
         }, 50);
     }
 
-    $('a[data-toggle="pill"]').on('click', function() {
+    $('a[data-bs-toggle="pill"]').on('click', function() {
         let newUrl;
         const hash = $(this).attr('href');
         newUrl = url.split('#')[0] + hash;
@@ -62,19 +66,24 @@ $(document).ready(function() {
     /*
      ** Initialise all popover elements
      */
-    $('[data-toggle="popover"]').popover();
+    let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+    popoverTriggerList.map(function(popoverTriggerEl) {
+        return new Popover(popoverTriggerEl);
+    });
 
     /*
      ** When a field from another group is invalid, show it.
      */
     $('#editor button[type="submit"]').click(function() {
         $('input:invalid').each(function() {
             // Find the tab-pane that this element is inside, and get the id
-            var $closest = $(this).closest('.tab-pane');
-            var id = $closest.attr('id');
-
-            // Find the link that corresponds to the pane and have it show
-            $('.nav a[href="#' + id + '"]').tab('show');
+            let $closest = $(this).closest('.tab-pane');
+            let id = $closest.attr('id');
+            if (id != null) {
+                // Find the link that corresponds to the pane and have it show
+                let triggerEl = document.querySelector('.nav a[href="#' + id + '"]');
+                Tab.getOrCreateInstance(triggerEl).show(); // Select tab by name
+            }
 
             // Only want to do it once
             return false;
@@ -143,7 +152,7 @@ $(document).ready(function() {
     $('[data-copy-to-clipboard]').on('click', function(e) {
         const target = $(e.target);
 
-        var input = document.createElement('input');
+        let input = document.createElement('input');
         input.setAttribute('id', 'copy');
 
         target.parent().append(input);
@@ -157,4 +166,52 @@ $(document).ready(function() {
             .remove();
     });
     /* End of copy text to clipboard */
+
+    /*
+     ** Modals content
+     */
+
+    // Reset the content of a modal to it's default
+
+    $('[data-bs-toggle="modal"]').on('click', function(event) {
+        let resourcesModal = document.getElementById('resourcesModal');
+
+        let saveButton = document.getElementById('modalButtonAccept');
+
+        let title = event.target.getAttribute('data-modal-title');
+        let modalTitle = resourcesModal.querySelector('.modal-title');
+
+        let modalBody = resourcesModal.querySelector('.modal-body');
+        let body = event.target.getAttribute('data-modal-body');
+
+        let targetURL = event.target.getAttribute('href');
+
+        modalTitle.innerHTML = title;
+        modalBody.innerHTML = body;
+
+        if (targetURL != null && modalBody != null) {
+            modalBody.remove();
+        }
+
+        saveButton.addEventListener(
+            'click',
+            () => {
+                // When the modal is accepted navigate to the URL of the target element
+                if (targetURL) {
+                    window.location.href = targetURL;
+                }
+            },
+            { once: true },
+        );
+
+        resourcesModal.addEventListener(
+            'hidden.bs.modal',
+            () => {
+                // Reset modal body content when the modal is closed
+                resetModalContent('');
+            },
+            { once: true },
+        );
+    });
+    /* End of Modals content */
 });

assets/js/app/editor/Components/Checkbox.vue

@@ -1,16 +1,16 @@
 <template>
     <div>
-        <div :class="['custom-control', 'custom-' + mode]">
+        <div :class="['custom-control', 'form-' + mode, 'form-check', mode == 'switch' ? 'form-switch' : '']">
             <input
                 :id="id"
-                class="custom-control-input"
+                class="form-check-input"
                 :name="name"
                 :checked="value"
                 type="checkbox"
                 :readonly="readonly"
                 @change="liveValue = $event.target.checked"
             />
-            <label class="custom-control-label" :for="name">{{ label }}</label>
+            <label class="custom-control-label form-label" :for="name">{{ label }}</label>
 
             <!-- This hidden input is actually what gets submitted. It submits "true" when checked, and "false" when not checked -->
             <!-- It exists because we need an "unchecked" value submitted. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox -->

assets/js/app/editor/Components/Collection.vue

@@ -25,7 +25,7 @@
                 <div class="card-header d-flex align-items-center">
                     <!-- Initial title. This is replaced by dynamic title in JS below. -->
                     <i class="card-marker-caret fa fa-caret-right"></i>
-                    <span class="badge badge-secondary inline" :title="element.label">
+                    <span class="badge bg-secondary inline" :title="element.label">
                         <i :class="[element.icon, 'fas']"></i>
                     </span>
                     <div class="collection-item-title" :data-label="element.label">
@@ -50,7 +50,7 @@
                         :disabled="!allowMore"
                         class="btn btn-secondary dropdown-toggle"
                         type="button"
-                        data-toggle="dropdown"
+                        data-bs-toggle="dropdown"
                         aria-haspopup="true"
                         aria-expanded="false"
                     >

assets/js/app/editor/Components/Date.vue

@@ -12,34 +12,32 @@
                 :data-errormessage="errormessage"
             >
             </flat-pickr>
-            <div class="input-group-append">
-                <button
-                    class="btn btn-tertiary"
-                    :class="{ 'btn-outline-secondary': readonly }"
-                    type="button"
-                    :disabled="readonly"
-                    data-toggle
-                    aria-label="Date picker"
-                    onclick="this.blur()"
-                >
-                    <i class="fa fa-calendar">
-                        <span class="sr-only" aria-hidden="true">{{ labels.toggle }}</span>
-                    </i>
-                </button>
-                <button
-                    class="btn btn-tertiary"
-                    :class="{ 'btn-outline-secondary': readonly }"
-                    type="button"
-                    :disabled="readonly"
-                    data-clear
-                    aria-label="Reset date"
-                    onclick="this.blur()"
-                >
-                    <i class="fa fa-times">
-                        <span class="sr-only" aria-hidden="true">{{ labels.clear }}</span>
-                    </i>
-                </button>
-            </div>
+            <button
+                class="btn btn-tertiary"
+                :class="{ 'btn-outline-secondary': readonly }"
+                type="button"
+                :disabled="readonly"
+                data-toggle
+                aria-label="Date picker"
+                onclick="this.blur()"
+            >
+                <i class="fa fa-calendar">
+                    <span class="sr-only" aria-hidden="true">{{ labels.toggle }}</span>
+                </i>
+            </button>
+            <button
+                class="btn btn-tertiary"
+                :class="{ 'btn-outline-secondary': readonly }"
+                type="button"
+                :disabled="readonly"
+                data-clear
+                aria-label="Reset date"
+                onclick="this.blur()"
+            >
+                <i class="fa fa-times">
+                    <span class="sr-only" aria-hidden="true">{{ labels.clear }}</span>
+                </i>
+            </button>
         </div>
     </div>
 </template>

assets/js/app/editor/Components/Email.vue

@@ -1,9 +1,7 @@
 <template>
     <div>
         <div class="input-group mb-2">
-            <div class="input-group-prepend">
-                <div class="input-group-text"><i class="far fa-envelope mr-0"></i></div>
-            </div>
+            <i class="input-group-text far fa-envelope me-0"></i>
             <input
                 :id="id"
                 class="form-control"

assets/js/app/editor/Components/Embed.vue

@@ -4,8 +4,8 @@
         <div :id="name" class="editor__embed" :name="name">
             <div class="row">
                 <div class="col-8">
-                    <div class="form-group">
-                        <label for="embed-url">{{ labels.content_url }}</label>
+                    <div class="mb-4">
+                        <label class="form-label" for="embed-url">{{ labels.content_url }}</label>
                         <div class="input-group">
                             <input
                                 v-model="urlData"
@@ -27,7 +27,7 @@
                                     :aria-label="labels.refresh"
                                     @click="updateEmbed"
                                 >
-                                    <i :class="(loading ? 'fa-spin' : '') + ' fas fa-sync mr-0'"></i>
+                                    <i :class="(loading ? 'fa-spin' : '') + ' fas fa-sync me-0'"></i>
                                 </button>
 
                                 <button
@@ -36,15 +36,15 @@
                                     :aria-label="labels.delete"
                                     @click="clearEmbed"
                                 >
-                                    <i class="fas fa-trash mr-0"></i>
+                                    <i class="fas fa-trash me-0"></i>
                                 </button>
                             </span>
                         </div>
                     </div>
-                    <div class="form-group form-inline">
-                        <label for="embed-width-size">{{ labels.label_size }}</label>
+                    <div class="mb-4 d-flex align-items-center">
+                        <label class="form-label" for="embed-width-size">{{ labels.label_size }}</label>
                         <input
-                            class="form-control col-2 offset-1"
+                            class="form-control w-auto col-2 offset-1"
                             :name="name + '[width]'"
                             type="number"
                             :value="widthData"
@@ -54,7 +54,7 @@
                         ×
                         <label for="embed-height-size" class="sr-only">{{ labels.label_height }}</label>
                         <input
-                            class="form-control col-2"
+                            class="form-control w-auto col-2"
                             :name="name + '[height]'"
                             type="number"
                             :value="heightData"
@@ -63,8 +63,8 @@
                         />
                         <label>{{ labels.label_pixel }}</label>
                     </div>
-                    <div class="form-group">
-                        <label>{{ labels.label_matched_embed }}</label>
+                    <div class="mb-4">
+                        <label class="form-label">{{ labels.label_matched_embed }}</label>
                         <input
                             class="form-control title"
                             :name="name + '[title]'"
@@ -92,7 +92,7 @@
                     </div>
                 </div>
                 <div class="col-4">
-                    <label>{{ labels.label_preview }}</label>
+                    <label class="form-label">{{ labels.label_preview }}</label>
                     <div class="editor__image--preview">
                         <a
                             v-if="previewImage !== null && previewImage !== ''"