Make the pagination button size and position consistent (#7332)

* Bug 1743523 - Always show 5 pages in pagination.

* Bug 1743520 - Part 1: Always show pagination arrows

* Bug 1743520 - Part 2: Make the pagination button size consistent.

ui/css/perf.css

@@ -459,6 +459,21 @@ li.pagination-active.active > button {
   color: black !important;
 }
 
+.page-item.disabled {
+  cursor: not-allowed;
+}
+
+.page-item.disabled .page-link {
+  color: lightgray !important;
+}
+
+/* Make the size of pagination link consistent */
+.page-link {
+  min-width: 2.5rem;
+  padding-left: 0;
+  padding-right: 0;
+}
+
 /* graph colors */
 .orange {
   border-left-color: #ffb851;

ui/perfherder/alerts/AlertsView.jsx

@@ -179,6 +179,9 @@ class AlertsView extends React.Component {
     if (totalPages.length === 5 || !totalPages.length) {
       return totalPages;
     }
+    if (page + 4 > totalPages.length) {
+      return totalPages.slice(-5);
+    }
     return totalPages.slice(page - 1, page + 4);
   };
 

ui/perfherder/compare/CompareTableControls.jsx

@@ -217,6 +217,9 @@ export default class CompareTableControls extends React.Component {
     if (totalPagesList.length <= 5 || !totalPagesList.length) {
       return totalPagesList;
     }
+    if (page + 4 > totalPagesList.length) {
+      return totalPagesList.slice(-5);
+    }
     return totalPagesList.slice(page - 1, page + 4);
   };
 

ui/perfherder/shared/Pagination.jsx

@@ -15,29 +15,30 @@ class PaginationGroup extends React.Component {
     const firstViewablePage = viewablePageNums[0];
     const lastViewablePage = viewablePageNums[viewablePageNums.length - 1];
 
+    const firstButtonAvailable = firstViewablePage > 1;
+    const prevButtonAvailable = currentPage > 1;
+    const nextButtonAvailable = currentPage < count;
+    const lastButtonAvailable = lastViewablePage < count;
+
     return (
       /* The first and last pagination navigation links
          aren't working correctly (icons aren't visible)
          so they haven't been added */
       <Pagination aria-label={`Page ${currentPage}`}>
-        {firstViewablePage > 1 && (
-          <PaginationItem className="text-info">
-            <PaginationLink
-              className="text-info"
-              first
-              onClick={() => this.navigatePage(1)}
-            />
-          </PaginationItem>
-        )}
-        {currentPage > 1 && (
-          <PaginationItem>
-            <PaginationLink
-              className="text-info"
-              previous
-              onClick={() => this.navigatePage(currentPage - 1)}
-            />
-          </PaginationItem>
-        )}
+        <PaginationItem className="text-info" disabled={!firstButtonAvailable}>
+          <PaginationLink
+            className="text-info"
+            first
+            onClick={() => this.navigatePage(1)}
+          />
+        </PaginationItem>
+        <PaginationItem disabled={!prevButtonAvailable}>
+          <PaginationLink
+            className="text-info"
+            previous
+            onClick={() => this.navigatePage(currentPage - 1)}
+          />
+        </PaginationItem>
         {viewablePageNums.map((num) => (
           <PaginationItem
             key={num}
@@ -53,24 +54,20 @@ class PaginationGroup extends React.Component {
             </PaginationLink>
           </PaginationItem>
         ))}
-        {currentPage < count && (
-          <PaginationItem>
-            <PaginationLink
-              className="text-info"
-              next
-              onClick={() => this.navigatePage(currentPage + 1)}
-            />
-          </PaginationItem>
-        )}
-        {lastViewablePage < count && (
-          <PaginationItem className="text-info">
-            <PaginationLink
-              className="text-info"
-              last
-              onClick={() => this.navigatePage(count)}
-            />
-          </PaginationItem>
-        )}
+        <PaginationItem disabled={!nextButtonAvailable}>
+          <PaginationLink
+            className="text-info"
+            next
+            onClick={() => this.navigatePage(currentPage + 1)}
+          />
+        </PaginationItem>
+        <PaginationItem className="text-info" disabled={!lastButtonAvailable}>
+          <PaginationLink
+            className="text-info"
+            last
+            onClick={() => this.navigatePage(count)}
+          />
+        </PaginationItem>
       </Pagination>
     );
   }