From a3072c6822a262be66c58ef92caa7cc82989a23d Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 13 Jun 2024 13:15:43 +0200
Subject: [PATCH 1/2] wc: Limit the number of displayed warning events and
 allow to expand to display more #TASK-6337

---
 src/webcomponents/commons/grid-commons.js | 42 ++++++++++++++++++++---
 1 file changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/webcomponents/commons/grid-commons.js b/src/webcomponents/commons/grid-commons.js
index 9ac28b0b3..1725b0598 100644
--- a/src/webcomponents/commons/grid-commons.js
+++ b/src/webcomponents/commons/grid-commons.js
@@ -324,13 +324,12 @@ export default class GridCommons {
         return columns;
     }
 
-    displayResponseWarningEvents(response) {
+    displayResponseWarningEvents(response, maxVisibleEvents = 3) {
         const eventsContainer = this.context.querySelector(`div#${this.gridId}WarningEvents`);
         if (eventsContainer && (response?.events?.length > 0 || response?.responses?.[0]?.events?.length > 0)) {
             const events = [...(response?.events || []), ...(response?.responses?.[0]?.events || [])]
-                .filter(event => event && event.type === "WARNING" && !!event.message);
-            if (events.length > 0) {
-                const eventsMessages = events.map(event => {
+                .filter(event => event && event.type === "WARNING" && !!event.message)
+                .map(event => {
                     return `
                         <div class="alert alert-warning" style="margin-bottom:8px;">
                             <i class="fas fa-exclamation-triangle icon-padding"></i>
@@ -338,7 +337,40 @@ export default class GridCommons {
                         </div>
                     `;
                 });
-                eventsContainer.replaceChildren(UtilsNew.renderHTML(eventsMessages.join("")));
+            if (events.length > 0) {
+                const defaultVisibleEvents = events.length > maxVisibleEvents ? events.slice(0, maxVisibleEvents) : events;
+                const defaultHiddenEvents = events.length > maxVisibleEvents ? events.slice(maxVisibleEvents) : [];
+                const eventsMessages = UtilsNew.renderHTML(`
+                    <div>
+                        ${defaultVisibleEvents.join("")}
+                        ${defaultHiddenEvents.length > 0 ? `
+                            <div data-role="hidden-events" style="display:none;">${defaultHiddenEvents.join("")}</div>
+                            <div class="text-muted">
+                                <div data-role="show-more-events" style="display:inline-block;cursor:pointer;">
+                                    <small><i class="fas fa-chevron-down" style="padding-right:6px;"></i>Show more warning events (<b>${defaultHiddenEvents.length}</b>)</small>
+                                </div>
+                                <div data-role="show-less-events" style="display:none;cursor:pointer;">
+                                    <small><i class="fas fa-chevron-up" style="padding-right:6px;"></i>Show less warning events</small>
+                                </div>
+                            </div>
+                        ` : ""}
+                    </div>
+                `).querySelector("div");
+                eventsContainer.replaceChildren(eventsMessages);
+                if (defaultHiddenEvents.length > 0) {
+                    // Show more events click
+                    eventsMessages.querySelector(`div[data-role="show-more-events"]`).addEventListener("click", () => {
+                        eventsMessages.querySelector(`div[data-role="hidden-events"]`).style.display = "block";
+                        eventsMessages.querySelector(`div[data-role="show-less-events"]`).style.display = "inline-block";
+                        eventsMessages.querySelector(`div[data-role="show-more-events"]`).style.display = "none";
+                    });
+                    // Show less events click
+                    eventsMessages.querySelector(`div[data-role="show-less-events"]`).addEventListener("click", () => {
+                        eventsMessages.querySelector(`div[data-role="hidden-events"]`).style.display = "none";
+                        eventsMessages.querySelector(`div[data-role="show-less-events"]`).style.display = "none";
+                        eventsMessages.querySelector(`div[data-role="show-more-events"]`).style.display = "inline-block";
+                    });
+                }
             }
         }
     }

From 4b46e390572b12f2570b188d1d8da20837be48eb Mon Sep 17 00:00:00 2001
From: Josemi <josemijuanes@gmail.com>
Date: Thu, 13 Jun 2024 13:18:58 +0200
Subject: [PATCH 2/2] wc: Refactor assigning events to expand/collapse warning
 events #TASK-6337

---
 src/webcomponents/commons/grid-commons.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/webcomponents/commons/grid-commons.js b/src/webcomponents/commons/grid-commons.js
index 1725b0598..51ade758f 100644
--- a/src/webcomponents/commons/grid-commons.js
+++ b/src/webcomponents/commons/grid-commons.js
@@ -358,17 +358,20 @@ export default class GridCommons {
                 `).querySelector("div");
                 eventsContainer.replaceChildren(eventsMessages);
                 if (defaultHiddenEvents.length > 0) {
+                    const hiddenEventsElement = eventsMessages.querySelector(`div[data-role="hidden-events"]`);
+                    const showMoreEventsElement = eventsMessages.querySelector(`div[data-role="show-more-events"]`);
+                    const showLessEventsElement = eventsMessages.querySelector(`div[data-role="show-less-events"]`);
                     // Show more events click
-                    eventsMessages.querySelector(`div[data-role="show-more-events"]`).addEventListener("click", () => {
-                        eventsMessages.querySelector(`div[data-role="hidden-events"]`).style.display = "block";
-                        eventsMessages.querySelector(`div[data-role="show-less-events"]`).style.display = "inline-block";
-                        eventsMessages.querySelector(`div[data-role="show-more-events"]`).style.display = "none";
+                    showMoreEventsElement.addEventListener("click", () => {
+                        hiddenEventsElement.style.display = "block";
+                        showLessEventsElement.style.display = "inline-block";
+                        showMoreEventsElement.style.display = "none";
                     });
                     // Show less events click
-                    eventsMessages.querySelector(`div[data-role="show-less-events"]`).addEventListener("click", () => {
-                        eventsMessages.querySelector(`div[data-role="hidden-events"]`).style.display = "none";
-                        eventsMessages.querySelector(`div[data-role="show-less-events"]`).style.display = "none";
-                        eventsMessages.querySelector(`div[data-role="show-more-events"]`).style.display = "inline-block";
+                    showLessEventsElement.addEventListener("click", () => {
+                        hiddenEventsElement.style.display = "none";
+                        showLessEventsElement.style.display = "none";
+                        showMoreEventsElement.style.display = "inline-block";
                     });
                 }
             }