DEP Upgrade bootstrap and reactstrap

.eslintrc.js

@@ -1 +1,8 @@
-module.exports = require('@silverstripe/eslint-config/.eslintrc');
+module.exports = {
+  extends: '@silverstripe/eslint-config',
+  settings: {
+    react: {
+      version: '18'
+    }
+  }
+};

client/src/components/GalleryItem/GalleryItem.js

@@ -482,6 +482,7 @@ class GalleryItem extends Component {
     };
     const inputLabelClasses = [
       'gallery-item__checkbox-label',
+      'form-label',
       actionIcon,
     ];
     if (!this.canBatchSelect()) {

client/src/components/ProportionConstraintField/ImageSizePresetList.js

@@ -28,7 +28,7 @@ const PresetButton = ({ onSelect, currentWidth, originalWidth, width, text }) =>
     onClick={() => onSelect(width || originalWidth)}
     disabled={(originalWidth < width) || currentWidth === (width || originalWidth)}
   >
-    <span className="sr-only">{srText(text)}</span>
+    <span className="visually-hidden">{srText(text)}</span>
     <span aria-hidden="true">{text}</span>
   </Button>
 );

client/src/components/ProportionConstraintField/tests/ImageSizePresetList-test.js

@@ -23,11 +23,11 @@ test('ImageSizePresetList render() presets are displayed', () => {
     <ImageSizePresetList {...makeProps()}/>
   );
   const buttons = container.querySelectorAll('button');
-  expect(buttons[0].querySelector('span.sr-only').textContent).toBe('Set image size to "default"');
+  expect(buttons[0].querySelector('span.visually-hidden').textContent).toBe('Set image size to "default"');
   expect(buttons[0].querySelector('span[aria-hidden="true"]').textContent).toBe('default');
-  expect(buttons[1].querySelector('span.sr-only').textContent).toBe('Set image size to "super large"');
+  expect(buttons[1].querySelector('span.visually-hidden').textContent).toBe('Set image size to "super large"');
   expect(buttons[1].querySelector('span[aria-hidden="true"]').textContent).toBe('super large');
-  expect(buttons[2].querySelector('span.sr-only').textContent).toBe('Set image size to "super small"');
+  expect(buttons[2].querySelector('span.visually-hidden').textContent).toBe('Set image size to "super small"');
   expect(buttons[2].querySelector('span[aria-hidden="true"]').textContent).toBe('super small');
 });
 

client/src/containers/Editor/Editor.scss

@@ -175,7 +175,7 @@
   text-align: center;
 }
 
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down(lg) {
   .editor__heading,
   .editor__specs {
     text-align: center;

client/src/containers/Editor/EditorHeader.scss

@@ -13,7 +13,7 @@
     &--md-below {
       display: none;
 
-      @include media-breakpoint-down(md) {
+      @include media-breakpoint-down(lg) {
         display: block;
         margin-left: 0;
       }

client/src/containers/Gallery/Gallery.scss

@@ -31,7 +31,7 @@
   position: relative; //testing
 
   &.gallery__main--has-opened-item {
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(lg) {
       display: none;
     }
   }
@@ -87,7 +87,7 @@
 
 
 // leave space at bottom for bulk-actions on smaller screens
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down(lg) {
   .gallery__files {
     margin-bottom: $toolbar-total-height;
   }
@@ -120,7 +120,7 @@
 
   // Override chosen inline width to fit to icon
   .chosen-container {
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       width: auto !important;
     }
   }
@@ -138,7 +138,7 @@
       text-align: right;
       color: inherit;
 
-      @include media-breakpoint-down(sm) {
+      @include media-breakpoint-down(md) {
         font-size: 0;
       }
     }
@@ -152,7 +152,7 @@
       top: 1px;
       font-size: $font-size-sm;
 
-      @include media-breakpoint-down(sm) {
+      @include media-breakpoint-down(md) {
         font-size: $font-size-lg;
       }
     }

client/src/containers/InsertMediaModal/InsertMediaModal.js

@@ -102,12 +102,10 @@ class InsertMediaModal extends Component {
     return (
       <button
         type="button"
-        className="close modal__close-button insert-media-modal__close-button"
+        className="close btn-close modal__close-button insert-media-modal__close-button"
         onClick={this.props.onClosed}
         aria-label={i18n._t('FormBuilderModal.CLOSE', 'Close')}
-      >
-        <span aria-hidden="true">×</span>
-      </button>
+      />
     );
   }
 

client/src/containers/InsertMediaModal/InsertMediaModal.scss

@@ -30,7 +30,7 @@
 
   // If the editor is in the dialog
   .editor__details {
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(xl) {
       height: 100%;
     }
   }
@@ -60,7 +60,7 @@
     }
   }
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     .asset-admin--multi-select [name="action_insert"] {
       display: block;
     }
@@ -76,6 +76,9 @@
   float: right;
   height: 32px;
   margin: 10px -10px 10px 0;
+  // Replace .btn-close background, which renders the wrong
+  // button icon since it's not in .modal-header
+  --bs-btn-close-bg: none;
 
   &:before {
     top: 0;

client/src/containers/TableView/TableView.scss

@@ -42,7 +42,7 @@ th.sort--disabled>span:after {
     padding-bottom: $table-cell-padding-lg;
 
     // hide details for smaller screens
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       &:nth-child(n+4) {
         display: none;
       }
@@ -61,7 +61,7 @@ th.sort--disabled>span:after {
       }
 
       // hide details for smaller screens
-      @include media-breakpoint-down(sm) {
+      @include media-breakpoint-down(md) {
         &:nth-child(n+4) {
           display: none;
         }

code/Forms/AssetFormFactory.php

@@ -430,17 +430,14 @@ public function getRequiredContext()
      */
     protected function buildFileStatusIcon(string $title, string $fontClass): string
     {
-        // https://getbootstrap.com/docs/4.4/components/tooltips/
-        // Specifying data-delay as an html attribute means that show and hide must be the same value unfortunately
-        // Cannot data-delay="{show: 300, hide: 0}" as it will be interpreted as a string, not (number|object)
         return <<<EOT
             <div class="file-status-icon">
                 <span title="$title"
                       class="icon file-status-icon__icon $fontClass"
-                      data-toggle="tooltip"
-                      data-placement="top"
-                      data-delay="150"
-                      data-animation="false">
+                      data-bs-toggle="tooltip"
+                      data-bs-placement="top"
+                      data-bs-delay="150"
+                      data-bs-animation="false">
                 </span>
             </div>
 EOT;

code/Forms/FileHistoryFormFactory.php

@@ -27,7 +27,7 @@ protected function getSpecsMarkup($record)
         }
 
         $versionTag = sprintf(
-            '<span class="badge badge-info">v.%s</span>',
+            '<span class="badge badge-info bg-info">v.%s</span>',
             $record->Version
         );
         $agoTag = sprintf(

package.json

@@ -68,7 +68,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@popperjs/core": "^2.11.6",
-    "bootstrap": "^4.6.2",
+    "bootstrap": "^5.2.0",
     "classnames": "^2.3.2",
     "core-js": "^3.26.0",
     "create-react-class": "^15.7.0",
@@ -79,12 +79,11 @@
     "modernizr": "^3.12.0",
     "prop-types": "^15.8.1",
     "qs": "^6.11.0",
-    "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^6.4.3",
     "react-selectable": "^2.1.1",
-    "reactstrap": "^8.9.0",
+    "reactstrap": "^9.2.0",
     "redux": "^5.0.1",
     "redux-form": "^8.3.10",
     "redux-logger": "^3.0.6",

tests/behat/features/manage-files.feature

@@ -120,7 +120,7 @@ Feature: Manage files
     When I press the "Other actions" button
       And I press the "Delete" button
     Then I should see a modal titled "Confirm deletion"
-      And I click on the ".modal-header .close" element
+      And I click on the ".modal-header .btn-close" element
       And I wait for 1 second
     Then I should not see a modal titled "Confirm deletion"
       And I should see the file named "file1" in the gallery