mongodb-js · mabaasit · Apr 27, 2022 · Apr 21, 2022 · Apr 21, 2022 · Apr 21, 2022
@@ -0,0 +1,48 @@
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import userEvent from '@testing-library/user-event';
+
+import { PipelinePaginationCount } from './pipeline-pagination-count';
+
+describe('PipelinePagination', function () {
+  it('renders count button by default', function () {
+    render(
+      <PipelinePaginationCount
+        loading={false}
+        count={undefined}
+        onCount={() => {}}
+      />
+    );
+
+    const container = screen.getByTestId('pipeline-pagination-count');
+    expect(within(container).getByTestId('pipeline-pagination-count-action')).to
+      .exist;
+  });
+  it('calls onCount when clicked', function () {
+    const onCountSpy = spy();
+    render(
+      <PipelinePaginationCount
+        loading={false}
+        count={undefined}
+        onCount={onCountSpy}
+      />
+    );
+
+    expect(onCountSpy.calledOnce).to.be.false;
+    const container = screen.getByTestId('pipeline-pagination-count');
+    userEvent.click(
+      within(container).getByTestId('pipeline-pagination-count-action')
+    );
+    expect(onCountSpy.calledOnce).to.be.true;
+  });
+  it('renders count of results', function () {
+    render(
+      <PipelinePaginationCount loading={false} count={20} onCount={() => {}} />
+    );
+
+    const container = screen.getByTestId('pipeline-pagination-count');
+    expect(within(container).getByText('of 20')).to.exist;
+  });
+});
@@ -0,0 +1,91 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import {
+  css,
+  spacing,
+  Body,
+  Link,
+  uiColors,
+  Tooltip,
+  SpinLoader,
+} from '@mongodb-js/compass-components';
+
+import type { RootState } from '../../modules';
+import { countDocuments } from '../../modules/count-documents';
+
+type PipelinePaginationCountProps = {
+  loading: boolean;
+  count?: number;
+  onCount: () => void;
+};
+
+const countButtonStyles = css({
+  backgroundColor: 'transparent',
+  border: 'none',
+  display: 'inline',
+  height: spacing[4] + spacing[1],
+  ':focus': {
+    outline: `${spacing[1]}px auto ${uiColors.focus}`,
+  },
+});
+
+export const PipelinePaginationCount: React.FunctionComponent<PipelinePaginationCountProps> =
+  ({ loading, count, onCount }) => {
+    const countDefinition = `
+      In order to have the final count of documents we need to run the
+      aggregation again. This will be the equivalent of adding a
+      $count as the last stage of the pipeline.
+    `;
+
+    const testId = 'pipeline-pagination-count';
+
+    if (loading) {
+      return (
+        <div data-testid={testId}>
+          <SpinLoader />
+        </div>
+      );
+    }
+
+    if (count !== undefined) {
+      return (
+        <div data-testid={testId}>
+          <Body>of {count}</Body>
+        </div>
+      );
+    }
+
+    return (
+      <div data-testid={testId}>
+        <Tooltip
+          trigger={({ children, ...props }) => (
+            <Link
+              {...props}
+              aria-label={'count results'}
+              as="button"
+              data-testid="pipeline-pagination-count-action"
+              hideExternalIcon={true}
+              className={countButtonStyles}
+              onClick={() => onCount()}
+            >
+              {children}
+              count results
+            </Link>
+          )}
+        >
+          <Body>{countDefinition}</Body>
+        </Tooltip>
+      </div>
+    );
+  };
+
+const mapState = ({ countDocuments: { loading, count } }: RootState) => ({
+  loading,
+  count,
+});
+
+const mapDispatch = {
+  onCount: countDocuments,
+};
+
+export default connect(mapState, mapDispatch)(PipelinePaginationCount);
@@ -3,6 +3,9 @@ import { render, screen, within } from '@testing-library/react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
+
+import configureStore from '../../stores/store';
 
 import {
   PipelinePagination,
@@ -12,16 +15,18 @@ import {
 
 const renderPipelinePagination = (props: Record<string, unknown> = {}) => {
   render(
-    <PipelinePagination
-      showingFrom={1}
-      showingTo={20}
-      isCountDisabled={false}
-      isPrevDisabled={false}
-      isNextDisabled={false}
-      onPrev={() => {}}
-      onNext={() => {}}
-      {...props}
-    />
+    <Provider store={configureStore()}>
+      <PipelinePagination
+        showingFrom={1}
+        showingTo={20}
+        isCountDisabled={false}
+        isPrevDisabled={false}
+        isNextDisabled={false}
+        onPrev={() => {}}
+        onNext={() => {}}
+        {...props}
+      />
+    </Provider>
   );
 };
 
@@ -33,6 +38,8 @@ describe('PipelinePagination', function () {
       expect(
         within(container).getByTestId('pipeline-pagination-desc').textContent
       ).to.equal('Showing 1 – 20');
+      expect(within(container).getByTestId('pipeline-pagination-count')).to
+        .exist;
       expect(within(container).getByTestId('pipeline-pagination-prev-action'))
         .to.exist;
       expect(within(container).getByTestId('pipeline-pagination-next-action'))

@@ -11,6 +11,8 @@ import {
 import type { RootState } from '../../modules';
 import { fetchNextPage, fetchPrevPage } from '../../modules/aggregation';
 
+import PipelinePaginationCount from './pipeline-pagination-count';
+
 type PipelinePaginationProps = {
   showingFrom: number;
   showingTo: number;
@@ -27,6 +29,12 @@ const containerStyles = css({
   gap: spacing[2],
 });
 
+const paginationStyles = css({
+  display: 'flex',
+  gap: spacing[1],
+  alignItems: 'center',
+});
+
 export const PipelinePagination: React.FunctionComponent<PipelinePaginationProps> =
   ({
     showingFrom,
@@ -40,9 +48,12 @@ export const PipelinePagination: React.FunctionComponent<PipelinePaginationProps
     return (
       <div className={containerStyles} data-testid="pipeline-pagination">
         {!isCountDisabled && (
-          <Body data-testid="pipeline-pagination-desc">
-            Showing {showingFrom} – {showingTo}
-          </Body>
+          <div className={paginationStyles}>
+            <Body data-testid="pipeline-pagination-desc">
+              Showing {showingFrom} – {showingTo}
+            </Body>
+            <PipelinePaginationCount />
+          </div>
         )}
         <div>
           <IconButton
@@ -85,17 +96,22 @@ export const calculateShowingTo = ({
 
 const mapState = ({
   aggregation: { documents, isLast, page, limit, loading, error },
-}: RootState) => ({
-  showingFrom: calculateShowingFrom({ limit, page }),
-  showingTo: calculateShowingTo({
+  countDocuments: { count },
+}: RootState) => {
+  const showingFrom = calculateShowingFrom({ limit, page });
+  const showingTo = calculateShowingTo({
     limit,
     page,
     documentCount: documents.length,
-  }),
-  isCountDisabled: Boolean(error),
-  isPrevDisabled: page <= 1 || loading || Boolean(error),
-  isNextDisabled: isLast || loading || Boolean(error),
-});
+  });
+  return {
+    showingFrom,
+    showingTo,
+    isCountDisabled: Boolean(error),
+    isPrevDisabled: page <= 1 || loading || Boolean(error),
+    isNextDisabled: isLast || loading || Boolean(error) || count === showingTo,
+  };
+};
 
 const mapDispatch = {
   onPrev: fetchPrevPage,

@@ -97,6 +97,7 @@ describe('aggregation module', function () {
       loading: false,
       error: undefined,
       abortController: undefined,
+      previousPageData: undefined,
     });
   });
 
@@ -152,6 +153,7 @@ describe('aggregation module', function () {
       loading: false,
       error: undefined,
       abortController: undefined,
+      previousPageData: undefined,
     });
   });
 
@@ -205,6 +207,7 @@ describe('aggregation module', function () {
         loading: false,
         error: undefined,
         abortController: undefined,
+        previousPageData: undefined,
       });
     });
     it('nextPage -> on last page', async function () {
@@ -277,6 +280,7 @@ describe('aggregation module', function () {
         loading: false,
         error: undefined,
         abortController: undefined,
+        previousPageData: undefined,
       });
     });
     it('prevPage -> on first page', async function () {