Status messages styling broken with big pipe after 10.3 drupal core update

includes/page_attachments.inc

@@ -41,4 +41,6 @@ function oe_bootstrap_theme_page_attachments_alter(array &$attachments) {
     'bootstrapIe11',
   ];
 
+  // Add the icon path to drupalSettings.
+  $attachments['#attached']['drupalSettings']['bcl_icon_path'] = _oe_bootstrap_theme_get_icon_path();
 }

oe_bootstrap_theme.info.yml

@@ -18,6 +18,8 @@ libraries-override:
 libraries-extend:
   core/drupal.progress:
     - oe_bootstrap_theme/drupal.progress
+  core/drupal.message:
+    - oe_bootstrap_theme/messages
 
 ckeditor_stylesheets:
   - assets/css/oe-bcl-default.min.css

oe_bootstrap_theme.libraries.yml

@@ -21,3 +21,7 @@ drupal.progress:
 inpage_navigation:
   js:
     resources/js/inpage_navigation.js: {}
+
+messages:
+  js:
+    resources/js/messages.js: {}

oe_bootstrap_theme.theme

@@ -7,6 +7,7 @@
 
 declare(strict_types=1);
 
+use Drupal\Component\Utility\Html;
 use Drupal\Core\Template\Attribute;
 
 // Include all files from the includes directory.
@@ -61,6 +62,51 @@ function oe_bootstrap_theme_theme_suggestions_views_view_table_alter(array &$sug
  * Implements hook_preprocess().
  */
 function oe_bootstrap_theme_preprocess(&$variables) {
+  // Construct the full URL for the BCL icons.
+  $variables['bcl_icon_path'] = _oe_bootstrap_theme_get_icon_path();
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for table--bootstrap--responsive.html.twig.
+ */
+function oe_bootstrap_theme_preprocess_table__bootstrap__responsive(&$variables) {
+  _oe_bootstrap_theme_bootstrap_responsive_table($variables);
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for views-view-table--bootstrap--responsive.html.twig.
+ */
+function oe_bootstrap_theme_preprocess_views_view_table__bootstrap__responsive(&$variables) {
+  _oe_bootstrap_theme_bootstrap_responsive_table($variables);
+}
+
+/**
+ * Function that applies responsiveness to Bootstrap tables.
+ *
+ * @param array $variables
+ *   The variables to process.
+ */
+function _oe_bootstrap_theme_bootstrap_responsive_table(array &$variables): void {
+  $class = 'table-responsive';
+  $breakpoint = theme_get_setting('bootstrap_tables.responsive');
+  if ($breakpoint !== 'always') {
+    $class .= '-' . $breakpoint;
+  }
+
+  $variables['wrapper_attributes'] = new Attribute(['class' => $class]);
+}
+
+/**
+ * Function to generate the BCL icon path.
+ *
+ * @return string
+ *   The full URL for the BCL icons.
+ */
+function _oe_bootstrap_theme_get_icon_path(): string {
+  $path = &drupal_static(__FUNCTION__);
+  if (isset($path)) {
+    return $path;
+  }
   // Get the active theme.
   $theme = \Drupal::theme()->getActiveTheme();
 
@@ -78,7 +124,7 @@ function oe_bootstrap_theme_preprocess(&$variables) {
 
     // Check if the BCL icon path is set in the current theme.
     if (!empty($theme_info['openeuropa']['bootstrap_component_library']['icon_path'])) {
-      $bcl_icon_path = $theme_info['openeuropa']['bootstrap_component_library']['icon_path'];
+      $bcl_icon_path = Html::escape($theme_info['openeuropa']['bootstrap_component_library']['icon_path']);
       $theme_path = $theme_handler->getTheme($theme_name)->getPath();
       break;
     }
@@ -94,37 +140,5 @@ function oe_bootstrap_theme_preprocess(&$variables) {
     $bcl_icon_path = 'assets/icons/bcl-default-icons.svg';
     $theme_path = $oe_bootstrap_theme->getPath();
   }
-
-  // Construct the full URL for the BCL icons.
-  $variables['bcl_icon_path'] = base_path() . $theme_path . '/' . $bcl_icon_path;
-}
-
-/**
- * Implements hook_preprocess_HOOK() for table--bootstrap--responsive.html.twig.
- */
-function oe_bootstrap_theme_preprocess_table__bootstrap__responsive(&$variables) {
-  _oe_bootstrap_theme_bootstrap_responsive_table($variables);
-}
-
-/**
- * Implements hook_preprocess_HOOK() for views-view-table--bootstrap--responsive.html.twig.
- */
-function oe_bootstrap_theme_preprocess_views_view_table__bootstrap__responsive(&$variables) {
-  _oe_bootstrap_theme_bootstrap_responsive_table($variables);
-}
-
-/**
- * Function that applies responsiveness to Bootstrap tables.
- *
- * @param array $variables
- *   The variables to process.
- */
-function _oe_bootstrap_theme_bootstrap_responsive_table(array &$variables): void {
-  $class = 'table-responsive';
-  $breakpoint = theme_get_setting('bootstrap_tables.responsive');
-  if ($breakpoint !== 'always') {
-    $class .= '-' . $breakpoint;
-  }
-
-  $variables['wrapper_attributes'] = new Attribute(['class' => $class]);
+  return  base_path() . $theme_path . '/' . $bcl_icon_path;
 }

resources/js/messages.js

@@ -0,0 +1,111 @@
+/**
+ * @file
+ * Message API.
+ */
+((Drupal, drupalSettings) => {
+  /**
+   * Overrides message theme function.
+   *
+   * @param {object} message
+   *   The message object.
+   * @param {string} message.text
+   *   The message text.
+   * @param {string} [message.heading]
+   *   The optional heading for the message.
+   * @param {object} options
+   *   The message context.
+   * @param {string} [options.type]
+   *   The message type.
+   * @param {string} [options.id]
+   *   ID of the message, for reference.
+   * @param {boolean} [options.dismissible=true]
+   *   Whether the message can be dismissed by the user.
+   * @param {boolean} [options.animatedDismiss=true]
+   *   Whether to apply animation when the message is dismissed.
+   * @param {string} [options.iconName]
+   *   The icon name.
+   * @param {object} [options.attributes={}]
+   *   Additional attributes to apply to the message element.
+   *
+   * @return {HTMLElement}
+   *   A DOM element containing the message.
+   */
+  Drupal.theme.message = ({ text, heading = "" }, { type = "", id, dismissible = true, animatedDismiss = true, iconName = "", attributes = {} }) => {
+    const messagesTypes = {
+      status: "success",
+      warning: "warning",
+      error: "danger"
+    };
+
+    const iconNames = {
+      success: "check-circle-fill",
+      warning: "exclamation-triangle-fill",
+      danger: "dash-circle-fill",
+      light: "info-circle-fill",
+      info: "info-circle-fill",
+      dark: "info-circle-fill"
+    };
+
+    const iconPath = drupalSettings.bcl_icon_path;
+    const variant = messagesTypes[type] || type;
+
+    // Classes for the alert container
+    const messageClasses = ["alert", `alert-${variant}`, "d-flex", "align-items-center", "text-dark", dismissible && "alert-dismissible", animatedDismiss && "fade show"].filter(
+      Boolean
+    );
+
+    // Classes for the icon
+    const iconClasses = ["flex-shrink-0", "me-3", "mt-1", "align-self-start", "bi", "icon--s", variant !== "light" ? `text-${variant}` : ""].filter(Boolean);
+
+    // Create the main alert div
+    const messageWrapper = document.createElement("div");
+    messageWrapper.className = messageClasses.join(" ");
+
+    messageWrapper.setAttribute("role", type === "error" || type === "warning" ? "alert" : "status");
+    messageWrapper.setAttribute("aria-labelledby", `${id}-title`);
+    messageWrapper.setAttribute("data-drupal-message-id", id);
+    messageWrapper.setAttribute("data-drupal-message-type", type);
+    if (attributes) {
+      Object.keys(attributes).forEach(key => {
+        messageWrapper.setAttribute(key, attributes[key]);
+      });
+    }
+
+    if (iconPath) {
+      const finalIconName = iconName || iconNames[variant];
+      const svgIconHtml = `
+            <svg class="${iconClasses.join(" ")}">
+             <use xlink:href="${iconPath}#${finalIconName}"></use>
+            </svg>
+           `;
+      messageWrapper.innerHTML += svgIconHtml;
+    }
+
+    const messageContent = document.createElement("div");
+    messageContent.className = "alert-content flex-grow-1";
+    messageContent.innerHTML = text;
+    messageWrapper.appendChild(messageContent);
+
+    if (heading) {
+      const messageHeader = document.createElement("div");
+      messageHeader.className = "alert-heading h4";
+      messageHeader.innerHTML = heading;
+      messageContent.appendChild(messageHeader);
+    }
+
+    if (dismissible) {
+      const closeButton = document.createElement("button");
+      closeButton.type = "button";
+      closeButton.className = "btn-close";
+      closeButton.setAttribute("data-bs-dismiss", "alert");
+      closeButton.setAttribute("aria-label", Drupal.t("Close message"));
+
+      closeButton.addEventListener("click", () => {
+        messageWrapper.classList.add("hidden");
+      });
+      messageWrapper.appendChild(closeButton);
+    }
+
+    return messageWrapper;
+  };
+})(Drupal, drupalSettings);