chg: [bootstrap] Moved more files to support bootstrap v5

plugins/Tags/src/View/Helper/TagHelper.php

@@ -107,7 +107,7 @@ class TagHelper extends Helper
             $deleteButton = $this->Bootstrap->button([
                 'size' => 'sm',
                 'icon' => 'times',
-                'class' => ['ml-1', 'border-0', "text-${textColour}"],
+                'class' => ['ms-1', 'border-0', "text-${textColour}"],
                 'variant' => 'text',
                 'title' => __('Delete tag'),
                 'params' => [

plugins/Tags/webroot/js/tagging.js

@@ -7,13 +7,13 @@ function createTagPicker(clicked) {
 
     function getEditableButtons($select, $container) {
         const $saveButton = $('<button></button>').addClass(['btn btn-primary btn-sm', 'align-self-start']).attr('type', 'button')
-        .append($('<span></span>').text('Save').addClass('text-nowrap').prepend($('<i></i>').addClass('fa fa-save mr-1')))
+        .append($('<span></span>').text('Save').addClass('text-nowrap').prepend($('<i></i>').addClass('fa fa-save me-1')))
         .click(function() {
             const tags = $select.select2('data').map(tag => tag.text)
             addTags($select.data('url'), tags, $(this))
         })
         const $cancelButton = $('<button></button>').addClass(['btn btn-secondary btn-sm', 'align-self-start']).attr('type', 'button')
-            .append($('<span></span>').text('Cancel').addClass('text-nowrap').prepend($('<i></i>').addClass('fa fa-times mr-1')))
+            .append($('<span></span>').text('Cancel').addClass('text-nowrap').prepend($('<i></i>').addClass('fa fa-times me-1')))
             .click(function() {
                 closePicker($select, $container)
             })
@@ -55,7 +55,7 @@ function deleteTag(url, tags, clicked) {
             title: apiResult.message,
             bodyHtml: $('<div/>').append(
                 $('<span/>').text('Cancel untag operation.'),
-                $('<button/>').addClass(['btn', 'btn-primary', 'btn-sm', 'ml-3']).text('Restore tag').click(function() {
+                $('<button/>').addClass(['btn', 'btn-primary', 'btn-sm', 'ms-3']).text('Restore tag').click(function() {
                     const split = url.split('/')
                     const controllerName = split[1]
                     const id = split[3]

src/View/Helper/BootstrapHelper.php

@@ -904,7 +904,7 @@ class BoostrapButton extends BootstrapGeneric {
     private function genIcon()
     {
         $bsIcon = new BoostrapIcon($this->options['icon'], [
-            'class' => ['me-1']
+            'class' => [(!empty($this->options['title']) ? 'me-1' : '')]
         ]);
         return $bsIcon->icon();
     }
@@ -1627,7 +1627,7 @@ class BootstrapListGroup extends BootstrapGeneric
             return '';
         }
         return $this->genNode('span', [
-            'class' => ['badge badge-pill', (!empty($item['badge-variant']) ? "badge-{$item['badge-variant']}" : 'badge-primary')],
+            'class' => ['badge rounded-pill', (!empty($item['badge-variant']) ? "bg-{$item['badge-variant']}" : 'bg-primary')],
         ], h($item['badge']));
     }
 

templates/Instance/settings.php

@@ -83,7 +83,7 @@ function genContentForNav($sectionSettings, $appView)
     $mainPanelHeight = 'calc(100vh - 42px - 1rem - 56px - 38px - 1rem)';
     $container =  '<div class="d-flex">';
     $container .=   "<div class=\"\" style=\"flex: 0 0 10em;\">{$scrollspyNav}</div>";
-    $container .=   "<div data-spy=\"scroll\" data-target=\"#navbar-scrollspy-setting\" data-offset=\"25\" style=\"height: {$mainPanelHeight}\" class=\"p-3 overflow-auto position-relative flex-grow-1\">{$contentHtml}</div>";
+    $container .=   "<div data-bs-spy=\"scroll\" data-bs-target=\"#navbar-scrollspy-setting\" data-bs-offset=\"25\" style=\"height: {$mainPanelHeight}\" class=\"p-3 overflow-auto position-relative flex-grow-1\">{$contentHtml}</div>";
     $container .= '</div>';
     return $container;
 }
@@ -137,19 +137,19 @@ function getResolvableID($sectionName, $panelName=false)
 
 <script>
     $(document).ready(function() {
-        $('.depends-on-icon').tooltip({
+        new bootstrap.Tooltip('.depends-on-icon', {
             placement: 'right',
         })
         $('select.custom-select[multiple]').select2()
 
-        $('.settings-tabs a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
-            $('[data-spy="scroll"]').trigger('scroll.bs.scrollspy')
+        $('.settings-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
+            $('[data-bs-spy="scroll"]').trigger('scroll.bs.scrollspy')
         })
 
         $('.tab-content input, .tab-content select').on('input', function() {
             if ($(this).attr('type') == 'checkbox') {
                 const $input = $(this)
-                const $inputGroup = $(this).closest('.form-group')
+                const $inputGroup = $(this).closest('.setting-group')
                 const settingName = $(this).data('setting-name')
                 const settingValue = $(this).is(':checked') ? 1 : 0
                 saveSetting($inputGroup[0], $input, settingName, settingValue)
@@ -274,7 +274,7 @@ function getResolvableID($sectionName, $panelName=false)
             .on('shown.bs.tab.after-redirect', () => {
                 $settingToFocus[0].scrollIntoView()
                 const inputID = $settingToFocus.parent().attr('for')
-                $settingToFocus.closest('.form-group').find(`#${inputID}`).focus()
+                $settingToFocus.closest('.setting-group').find(`#${inputID}`).focus()
                 $navController.off('shown.bs.tab.after-redirect')
             })
             .tab('show')

templates/element/Settings/field.php

@@ -7,7 +7,7 @@
                 [
                     'class' => [
                         'form-control',
-                        'pr-4',
+                        'pe-4',
                         (!empty($setting['error']) ? 'is-invalid' : ''),
                         (!empty($setting['error']) ? "border-{$appView->get('variantFromSeverity')[$setting['severity']]}" : ''),
                         (!empty($setting['error']) ? $appView->get('variantFromSeverity')[$setting['severity']] : ''),
@@ -46,7 +46,7 @@
             $container = $appView->Bootstrap->genNode('div', [
                 'class' => [
                     'custom-control',
-                    'custom-switch',
+                    'form-switch',
                 ],
             ], implode('', [$switch, $label]));
             return $container;
@@ -90,8 +90,8 @@
             $options = implode('', $options);
             return $appView->Bootstrap->genNode('select', [
                 'class' => [
-                    'custom-select',
-                    'pr-4',
+                    'form-select',
+                    'pe-4',
                     (!empty($setting['error']) ? 'is-invalid' : ''),
                     (!empty($setting['error']) ? "border-{$appView->get('variantFromSeverity')[$setting['severity']]}" : ''),
                     (!empty($setting['error']) ? $appView->get('variantFromSeverity')[$setting['severity']] : ''),

templates/element/Settings/fieldGroup.php

@@ -5,7 +5,7 @@
     if (!empty($setting['dependsOn'])) {
         $dependsOnHtml = $this->Bootstrap->genNode('span', [
             'class' => [
-                'ml-1',
+                'ms-1',
                 'd-inline-block',
                 'depends-on-icon'
             ],
@@ -16,7 +16,7 @@
         ]));
     }
     $label = $this->Bootstrap->genNode('label', [
-        'class' => ['font-weight-bolder', 'mb-0'],
+        'class' => ['form-label', 'fw-bolder', 'mb-0'],
         'for' => $settingId
     ], sprintf('<a id="lb-%s" href="#lb-%s" class="text-reset text-decoration-none">%s</a>', h($settingId), h($settingId), h($setting['name'])) . $dependsOnHtml);
 
@@ -57,7 +57,7 @@
     ], implode('', [$input, $inputGroupSave]));
 
     $container = $this->Bootstrap->genNode('div', [
-        'class' => ['form-group', 'mb-2']
+        'class' => ['setting-group', 'row', 'mb-2']
     ], implode('', [$label, $inputGroup, $description, $validationError]));
     
     echo $container;

templates/element/Settings/panel.php

@@ -13,7 +13,7 @@ if (isLeaf($panelSettings)) {
     $panelHTML .= sprintf('<h4 id="%s"><a class="text-reset text-decoration-none" href="#%s">%s%s</a></h4>',
         $panelID,
         $panelID,
-        !empty($panelSettings['_icon']) ? $this->Bootstrap->icon($panelSettings['_icon'], ['class' => 'mr-1']) : '',
+        !empty($panelSettings['_icon']) ? $this->Bootstrap->icon($panelSettings['_icon'], ['class' => 'me-1']) : '',
         h($panelName)
     );
     if (!empty($panelSettings['_description'])) {
@@ -32,7 +32,7 @@ if (isLeaf($panelSettings)) {
             'settingName' => $singleSettingName,
             'setting' => $singleSetting,
         ]);
-        $panelHTML .= sprintf('<div class="ml-3">%s</div>', $singleSettingHTML);
+        $panelHTML .= sprintf('<div class="ms-3">%s</div>', $singleSettingHTML);
         if (!empty($singleSetting['error'])) {
             $settingVariant = $this->get('variantFromSeverity')[$singleSetting['severity']];
             if ($groupIssueSeverity != 'danger') {

templates/element/Settings/scrollspyNav.php

@@ -4,7 +4,7 @@
             <a class="nav-link main-group text-reset p-1" href="#<?= getResolvableID($group) ?>"><?= h($group) ?></a>
                 <nav class="nav nav-pills sub-group collapse flex-column" data-maingroup="<?= getResolvableID($group) ?>">
                     <?php foreach ($sections as $section): ?>
-                        <a class="nav-link nav-link-group text-reset ml-3 my-1 p-1" href="#<?= getResolvableID($group, $section) ?>"><?= h($section) ?></a>
+                        <a class="nav-link nav-link-group text-reset ms-3 my-1 p-1" href="#<?= getResolvableID($group, $section) ?>"><?= h($section) ?></a>
                     <?php endforeach; ?>
                 </nav>
             </a>
@@ -14,7 +14,7 @@
 
 <script>
     $(document).ready(function() {
-        $('[data-spy="scroll"]').on('activate.bs.scrollspy', function(evt, {relatedTarget}) {
+        $('[data-bs-spy="scroll"]').on('activate.bs.scrollspy', function(evt, {relatedTarget}) {
             const $associatedLink = $(`#navbar-scrollspy-setting nav.nav-pills .nav-link[href="${relatedTarget}"]`)
             let $associatedNav
             if ($associatedLink.hasClass('main-group')) {

templates/element/Settings/search.php

@@ -100,10 +100,10 @@
         const $state = $('<div/>').append(
             $('<div/>').addClass('d-flex justify-content-between')
                 .append(
-                    $('<span/>').addClass('font-weight-bold').text(state.text),
-                    $('<span/>').addClass('font-weight-light').text(state.setting['setting-path'].replaceAll('.', ' ▸ '))
+                    $('<span/>').addClass('fw-bold').text(state.text),
+                    $('<span/>').addClass('fw-light').text(state.setting['setting-path'].replaceAll('.', ' ▸ '))
                 ),
-            $('<div/>').addClass('font-italic font-weight-light ml-3').text(state.setting['description'])
+            $('<div/>').addClass('font-italic fw-light ms-3').text(state.setting['description'])
         )
         return $state
     }

templates/element/genericElements/Form/Fields/tagsField.php

@@ -5,7 +5,7 @@
         'editable' => true,
     ]);
 ?>
-<div class="form-group row">
+<div class="row mb-3">
     <div class="col-sm-2 col-form-label"><?= __('Tags') ?></div>
     <div class="col-sm-10">
         <?= $tagsHtml ?>

templates/element/genericElements/Form/formInfo.php

@@ -23,7 +23,7 @@
 ?>
 <script type="text/javascript">
     $(document).ready(function() {
-        $('#<?php echo h($field['field']); ?>InfoPopover').popover({
+        new bootstrap.Popover('#<?php echo h($field['field']); ?>InfoPopover', {
             html: true,
             content: function() {
                 var tempSelector = '#<?php echo h($modelForForm . \Cake\Utility\Inflector::camelize($field['field'])); ?>';

templates/element/genericElements/ListTopBar/group_search.php

@@ -81,9 +81,10 @@
             }
         ?>
         var randomValue = '<?= h($tableRandomValue) ?>';
-        $(`#quickFilterField-${randomValue}`).popover({
+        new bootstrap.Popover(`#quickFilterField-${randomValue}`, {
             title: '<?= __('Searcheable fields') ?>',
             content: function() { return buildPopoverQuickFilterBody(quickFilter) },
+            placement: 'left',
             html: true,
             sanitize: false,
             trigger: 'manual',
@@ -97,9 +98,9 @@
                 doFilter($button)
             }
         }).on('focus', (e) => {
-            $(`#quickFilterField-${randomValue}`).popover('show')
+            bootstrap.Popover.getInstance(`#quickFilterField-${randomValue}`).show()
         }).on('focusout', (e) => {
-            $(`#quickFilterField-${randomValue}`).popover('hide')
+            bootstrap.Popover.getInstance(`#quickFilterField-${randomValue}`).hide()
         });
 
         $(`#toggleFilterButton-${randomValue}`)
@@ -111,7 +112,7 @@
             })
 
         function doFilter($button) {
-            $(`#quickFilterField-${randomValue}`).popover('hide')
+            bootstrap.Popover.getInstance(`#quickFilterField-${randomValue}`).hide()
             const encodedFilters = encodeURIComponent($(`#quickFilterField-${randomValue}`).val())
             const url = `/${controller}/${action}${additionalUrlParams}?quickFilter=${encodedFilters}`
             UI.reload(url, $(`#table-container-${randomValue}`), $(`#table-container-${randomValue} table.table`), [{

templates/element/widgets/highlight-panel.php

@@ -11,7 +11,7 @@ if ($variation == 0) {
     $variationClass = 'text-danger';
 }
 
-$variationHtml = sprintf('<div class="%s"><span class="%s mr-2"></span>%s</div>',
+$variationHtml = sprintf('<div class="%s"><span class="%s me-2"></span>%s</div>',
     $variationClass,
     $this->FontAwesome->getClass($variationIcon),
     !empty($variation) ? h($variation) : ''

templates/genericTemplates/filters.php

@@ -25,7 +25,7 @@ $filteringForm = $this->Bootstrap->table(
 
 if ($taggingEnabled) {
     $helpText = $this->Bootstrap->genNode('sup', [
-        'class' => ['ml-1 fa fa-info'],
+        'class' => ['ms-1 fa fa-info'],
         'title' => __('Supports negation matches (with the `!` character) and LIKE matches (with the `%` character).
Example: `!exportable`, `%able`'),
     ]);
     $filteringTags = $this->Bootstrap->genNode('h5', [], __('Tags') . $helpText);

webroot/js/main.js

@@ -52,7 +52,7 @@ function attachTestConnectionResultHtml(result, $container) {
     $container.find('div.tester-result').remove()
     $testResultDiv = $('<div class="tester-result"></div>');
     if (typeof result !== 'object') {
-        $testResultDiv.append(getKVHtml('Internal error', result, ['text-danger font-weight-bold']))
+        $testResultDiv.append(getKVHtml('Internal error', result, ['text-danger fw-bold']))
     } else {
         if (result['error']) {
             $testResultDiv.append(
@@ -128,7 +128,7 @@ function performGlobalSearch(evt) {
         return;
     }
     if (value.length < 3 && evt.keyCode != 13) {
-        $('#dropdownMenuSearchAll').dropdown('hide')
+        bootstrap.Popover.getInstance('#dropdownMenuSearchAll').hide()
         return;
     }
     const endpoint = '/instance/searchAll'
@@ -138,7 +138,7 @@ function performGlobalSearch(evt) {
         statusNode: $resultContainer
     }
 
-    $('#dropdownMenuSearchAll').dropdown('show')
+    bootstrap.Popover.getInstance('#dropdownMenuSearchAll').show()
     AJAXApi.quickFetchURL(url, options).then((theHTML) => {
         $resultContainer.html(theHTML)
     })