fix: pagination active dot visibility [WPB-16183]

src/script/components/calling/Pagination/Pagination.test.tsx

@@ -44,10 +44,9 @@ describe('Pagination', () => {
     expect(getAllByTestId(testIdentifiers.paginationItem)).toHaveLength(5);
   });
 
-  it('should show correct active dot', () => {
-    const {getAllByTestId} = renderPagination({currentPage: 2});
-    const dots = getAllByTestId(testIdentifiers.paginationItem);
-    expect(dots[2]).toHaveAttribute('data-uie-status', 'active');
+  it('should adjust visible dots when total pages is less than default', () => {
+    const {getAllByTestId} = renderPagination({totalPages: 3});
+    expect(getAllByTestId(testIdentifiers.paginationItem)).toHaveLength(3);
   });
 
   it('should disable previous button on first page', () => {
@@ -60,6 +59,12 @@ describe('Pagination', () => {
     expect(getByTestId(testIdentifiers.paginationNext)).toBeDisabled();
   });
 
+  it('should enable both buttons when on middle page', () => {
+    const {getByTestId} = renderPagination({currentPage: 5, totalPages: 10});
+    expect(getByTestId(testIdentifiers.paginationPrevious)).not.toBeDisabled();
+    expect(getByTestId(testIdentifiers.paginationNext)).not.toBeDisabled();
+  });
+
   it('should calls onChangePage when dot is clicked', () => {
     const {getAllByTestId} = renderPagination();
     fireEvent.click(getAllByTestId(testIdentifiers.paginationItem)[2]);
@@ -78,8 +83,39 @@ describe('Pagination', () => {
     expect(onChangePageMock).toHaveBeenCalledWith(3);
   });
 
-  it('should adjusts visible dots for smaller total pages', () => {
-    const {getAllByTestId} = renderPagination({totalPages: 3});
-    expect(getAllByTestId(testIdentifiers.paginationItem)).toHaveLength(3);
+  it('should not call onChangePage when clicking current page dot', () => {
+    const {getAllByTestId} = renderPagination({currentPage: 2});
+    fireEvent.click(getAllByTestId(testIdentifiers.paginationItem)[2]);
+    expect(onChangePageMock).not.toHaveBeenCalled();
+  });
+
+  it('should show correct active dot for current page', () => {
+    const {getAllByTestId} = renderPagination({currentPage: 2});
+    const dots = getAllByTestId(testIdentifiers.paginationItem);
+    expect(dots[2]).toHaveAttribute('data-uie-status', 'active');
+  });
+
+  it('should update active dot when page changes', () => {
+    const {getAllByTestId, rerender} = renderPagination({currentPage: 1});
+    rerender(withTheme(<Pagination totalPages={10} currentPage={2} onChangePage={onChangePageMock} />));
+    const dots = getAllByTestId(testIdentifiers.paginationItem);
+    expect(dots[2]).toHaveAttribute('data-uie-status', 'active');
+  });
+
+  it('should handle single page correctly', () => {
+    const {queryByTestId} = renderPagination({totalPages: 1});
+    expect(queryByTestId(testIdentifiers.paginationNext)).toBeDisabled();
+    expect(queryByTestId(testIdentifiers.paginationPrevious)).toBeDisabled();
+  });
+
+  it('should maintain visible range when navigating to high page numbers', () => {
+    const {getAllByTestId} = renderPagination({currentPage: 8, totalPages: 10});
+    const dots = getAllByTestId(testIdentifiers.paginationItem);
+    expect(dots).toHaveLength(5);
+
+    // Verify that page 8 is active
+    const activeDot = dots.find(dot => dot.getAttribute('data-uie-status') === 'active');
+    expect(activeDot).toBeTruthy();
+    expect(Number(activeDot?.getAttribute('data-page'))).toBe(8);
   });
 });

src/script/components/calling/Pagination/Pagination.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import {useState} from 'react';
+import {useState, useEffect} from 'react';
 
 import {CSSObject} from '@emotion/react';
 
@@ -35,47 +35,38 @@ export interface PaginationProps {
 const DEFAULT_VISIBLE_DOTS = 5;
 
 const Pagination = ({totalPages, currentPage, onChangePage, className}: PaginationProps) => {
-  const [currentStart, setCurrentStart] = useState(0);
   const visibleDots = Math.min(DEFAULT_VISIBLE_DOTS, totalPages);
 
-  const calculateNewStart = (page: number): number =>
-    Math.min(Math.max(0, page - Math.floor(visibleDots / 2)), Math.max(0, totalPages - visibleDots));
+  const calculateStartPosition = (page: number) => {
+    return Math.min(Math.max(0, page - Math.floor(visibleDots / 2)), Math.max(0, totalPages - visibleDots));
+  };
+
+  const [currentStart, setCurrentStart] = useState(() => calculateStartPosition(currentPage));
+
+  useEffect(() => {
+    setCurrentStart(calculateStartPosition(currentPage));
+  }, [currentPage, totalPages, visibleDots]);
 
-  const isPageOutOfVisibleRange = (page: number): boolean => page < currentStart || page >= currentStart + visibleDots;
+  const isFirstPage = currentPage === 0;
+  const isLastPage = currentPage === totalPages - 1;
 
   const handlePageChange = (newPage: number) => {
     if (newPage === currentPage) {
       return;
     }
-
-    if (isPageOutOfVisibleRange(newPage)) {
-      setCurrentStart(calculateNewStart(newPage));
-    }
     onChangePage(newPage);
   };
 
   const handlePreviousPage = () => {
-    if (currentPage === 0) {
-      return;
+    if (!isFirstPage) {
+      handlePageChange(currentPage - 1);
     }
-
-    const previousPage = currentPage - 1;
-    if (previousPage === currentStart && previousPage !== 0) {
-      setCurrentStart(current => current - 1);
-    }
-    onChangePage(previousPage);
   };
 
   const handleNextPage = () => {
-    if (currentPage === totalPages - 1) {
-      return;
-    }
-
-    const nextPage = currentPage + 1;
-    if (nextPage === currentStart + visibleDots - 1 && nextPage !== totalPages - 1) {
-      setCurrentStart(current => current + 1);
+    if (!isLastPage) {
+      handlePageChange(currentPage + 1);
     }
-    onChangePage(nextPage);
   };
 
   const visibleRange = Array.from({length: visibleDots}, (_, index) => currentStart + index);
@@ -84,22 +75,22 @@ const Pagination = ({totalPages, currentPage, onChangePage, className}: Paginati
     <div id="video-pagination" css={[paginationContainerStyles, className]}>
       <PaginationArrow
         onClick={handlePreviousPage}
-        disabled={currentPage === 0}
+        disabled={isFirstPage}
         direction="left"
         data-uie-name="pagination-previous"
       />
 
       <div css={paginationDotsContainerStyles} data-uie-name="pagination-wrapper">
         {visibleRange.map((page, index) => {
-          const isFirstOrLastInTheRange = index === 0 || index === visibleRange.length - 1;
-          const isSmaller = isFirstOrLastInTheRange && !(page === 0 || page === totalPages - 1);
+          const isFirstOrLastInRange = index === 0 || index === visibleDots - 1;
+          const isEndpoint = page === 0 || page === totalPages - 1;
 
           return (
             <PaginationDot
               key={page}
               page={page}
-              isCurrentPage={currentPage === page}
-              isSmaller={isSmaller}
+              isCurrentPage={page === currentPage}
+              isSmaller={isFirstOrLastInRange && !isEndpoint}
               onClick={handlePageChange}
             />
           );
@@ -108,7 +99,7 @@ const Pagination = ({totalPages, currentPage, onChangePage, className}: Paginati
 
       <PaginationArrow
         onClick={handleNextPage}
-        disabled={currentPage === totalPages - 1}
+        disabled={isLastPage}
         direction="right"
         data-uie-name="pagination-next"
       />

src/script/components/calling/Pagination/PaginationDot.tsx

@@ -43,12 +43,12 @@ export const PaginationDot = ({page, isCurrentPage, isSmaller, onClick}: Paginat
         })
       }
       aria-label={t('paginationDotAriaLabel', {page: page + 1})}
+      aria-current={isCurrentPage ? 'page' : undefined}
+      data-page={page}
+      data-uie-name="pagination-item"
+      data-uie-status={isCurrentPage ? 'active' : 'inactive'}
     >
-      <div
-        data-uie-name="pagination-item"
-        data-uie-status={isCurrentPage ? 'active' : 'inactive'}
-        css={dotStyles(isCurrentPage, isSmaller)}
-      />
+      <div css={dotStyles(isCurrentPage, isSmaller)} />
     </button>
   );
 };