From 3ef75a5f8dde74b948bbfe3e61fd58575baa7c13 Mon Sep 17 00:00:00 2001
From: sabrina-bongiovanni
 <116291154+sabrina-bongiovanni@users.noreply.github.com>
Date: Fri, 3 Nov 2023 12:47:56 +0100
Subject: [PATCH] feat: added data-element for service-link pagination (#387)

* feat: added data-element for service-link pagination

* chore: updated release.md
---
 RELEASE.md                                          |  4 ++++
 .../ItaliaTheme/Pagination/Pagination.jsx           | 13 +++++++++++--
 .../ItaliaTheme/Pagination/PaginationItem.jsx       | 13 ++++++++++++-
 .../manage/Blocks/Listing/ListingBody.jsx           |  6 ++++++
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/RELEASE.md b/RELEASE.md
index 38e16644c..b1fc8c33e 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -43,6 +43,10 @@
 
 ## Versione 8.8.1 (03/11/2023)
 
+### Novità
+
+- Aggiunto data-element al paginatore per validatore AGID per i blocchi Elenco per i quali viene impostata l'opzione service-link.
+
 ### Fix
 
 - Nei template dei feed RSS ora viene mostrata la sorgente se presente.
diff --git a/src/components/ItaliaTheme/Pagination/Pagination.jsx b/src/components/ItaliaTheme/Pagination/Pagination.jsx
index ad6f745d0..4c0ee86c4 100644
--- a/src/components/ItaliaTheme/Pagination/Pagination.jsx
+++ b/src/components/ItaliaTheme/Pagination/Pagination.jsx
@@ -43,6 +43,9 @@ class Pagination extends Component {
     /** Total number of pages. */
     totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
       .isRequired,
+
+    /** Lighthouse ID to set Agid data-element on pager link for CT Servizio*/
+    isServiceLink: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -69,8 +72,13 @@ class Pagination extends Component {
   };
 
   render() {
-    const { boundaryRange, ellipsisItem, siblingRange, totalPages } =
-      this.props;
+    const {
+      boundaryRange,
+      ellipsisItem,
+      siblingRange,
+      totalPages,
+      isServiceLink,
+    } = this.props;
     const { activePage } = this.state;
 
     const items = createPaginationItems({
@@ -96,6 +104,7 @@ class Pagination extends Component {
                   onClick={this.handleItemClick}
                   type={type}
                   ellipsisItem={ellipsisItem}
+                  isServiceLink={isServiceLink}
                 >
                   {value}
                 </PaginationItem>
diff --git a/src/components/ItaliaTheme/Pagination/PaginationItem.jsx b/src/components/ItaliaTheme/Pagination/PaginationItem.jsx
index b7e2d9de9..861d82870 100644
--- a/src/components/ItaliaTheme/Pagination/PaginationItem.jsx
+++ b/src/components/ItaliaTheme/Pagination/PaginationItem.jsx
@@ -46,6 +46,9 @@ class PaginationItem extends Component {
       'nextItem',
       'lastItem',
     ]),
+
+    /** Lighthouse ID to set Agid data-element on pager link for CT Servizio*/
+    isServiceLink: PropTypes.bool,
   };
 
   handleClick = (e) => {
@@ -59,7 +62,14 @@ class PaginationItem extends Component {
   };
 
   render() {
-    const { active, type, children, intl, ellipsisItem } = this.props;
+    const {
+      active,
+      type,
+      children,
+      intl,
+      ellipsisItem,
+      isServiceLink,
+    } = this.props;
     const disabled = this.props.disabled || type === 'ellipsisItem';
     return (
       <PagerItem disabled={disabled}>
@@ -68,6 +78,7 @@ class PaginationItem extends Component {
           onClick={this.handleClick}
           onKeyDown={this.handleKeyDown}
           aria-current={active ? 'page' : null}
+          data-element={isServiceLink ? 'pager-link' : null}
         >
           {type === 'prevItem' && (
             <>
diff --git a/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx b/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx
index cad27aa3f..f0065bb67 100644
--- a/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx
@@ -93,6 +93,11 @@ const ListingBody = React.memo(
       // Also need to purge title from searchblock schema, it's the name of the listing template used
       const listingBodyProps =
         variation?.['@type'] !== 'search' ? data : { ...variation, title: '' };
+
+      // Need to know if data-element is "service-link"
+      // to add data-element="pager-link" to pagination links
+      const isServiceLink = data.id_lighthouse === 'service-link';
+
       return (
         <div className="public-ui">
           {loadingQuery && (
@@ -123,6 +128,7 @@ const ListingBody = React.memo(
                     activePage={currentPage}
                     totalPages={totalPages}
                     onPageChange={onPaginationChange}
+                    isServiceLink={isServiceLink}
                   />
                 </div>
               )}