Improve compressed EuiPagination

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Converted `EuiFilterSelectItem` to TypeScript ([#2761](https://github.com/elastic/eui/pull/2761))
 - Converted `EuiFieldSearch` to TypeScript ([#2775](https://github.com/elastic/eui/pull/2775))
 - Added `data-test-subj` to the `EuiContextMenuItem` in `EuiTablePagination` ([#2778](https://github.com/elastic/eui/pull/2778))
+- Improved compressed `EuiPagination` by including active and last page numbers ([#2779](https://github.com/elastic/eui/pull/2779))
 
 **Bug fixes**
 

src/components/pagination/pagination.tsx

@@ -5,6 +5,7 @@ import { CommonProps } from '../common';
 import { EuiPaginationButton } from './pagination_button';
 import { EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
+import { EuiText } from '../text';
 
 const MAX_VISIBLE_PAGES = 5;
 const NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5);
@@ -175,9 +176,45 @@ export const EuiPagination: FunctionComponent<Props> = ({
 
   const selectablePages = pages;
   if (compressed) {
+    const firstPageButtonCompressed = (
+      <EuiI18n
+        token="euiPagination.pageOfTotal"
+        default="Page {page} of {total}"
+        values={{ page: activePage + 1, total: pageCount }}>
+        {(pageOfTotal: string) => (
+          <EuiPaginationButton
+            onClick={onPageClick.bind(null, 0)}
+            hideOnMobile
+            isActive={true}
+            aria-label={pageOfTotal}>
+            {activePage + 1}
+          </EuiPaginationButton>
+        )}
+      </EuiI18n>
+    );
+    const lastPageButtonCompressed = (
+      <EuiI18n
+        token="euiPagination.jumpToLastPage"
+        default="Jump to the last page, number {pageCount}"
+        values={{ pageCount }}>
+        {(jumpToLastPage: string) => (
+          <EuiPaginationButton
+            onClick={onPageClick.bind(null, pageCount - 1)}
+            hideOnMobile
+            aria-label={jumpToLastPage}>
+            {pageCount}
+          </EuiPaginationButton>
+        )}
+      </EuiI18n>
+    );
     return (
       <div className={classes} {...rest}>
         {previousButton}
+        {firstPageButtonCompressed}
+        <EuiText size="s">
+          <EuiI18n token="euiPagination.of" default="of" />
+        </EuiText>
+        {lastPageButtonCompressed}
         {nextButton}
       </div>
     );