fix: just hide the total count rather than displaying N/A VSCODE-765 (#1276)

Author: lerouxb

src/test/suite/views/data-browsing-app/preview-page.test.tsx

@@ -382,6 +382,72 @@ describe('PreviewApp test suite', function () {
       expect(screen.getByText('1-10 of 50')).to.exist;
     });
 
+    it('should omit total count when count is unavailable', function () {
+      renderWithProvider(<PreviewApp />);
+
+      const documents = Array.from({ length: 10 }, (_, i) => ({
+        _id: String(i + 1),
+        name: `Doc${i + 1}`,
+      }));
+
+      act(() => {
+        window.dispatchEvent(
+          new MessageEvent('message', {
+            data: {
+              command: PreviewMessageType.loadPage,
+              documents,
+            },
+          }),
+        );
+        window.dispatchEvent(
+          new MessageEvent('message', {
+            data: {
+              command: PreviewMessageType.updateTotalCount,
+              totalCount: null,
+            },
+          }),
+        );
+      });
+
+      const paginationText = screen.getByText('1-10');
+      expect(paginationText).to.exist;
+      expect(paginationText.textContent).to.equal('1-10');
+      expect(screen.queryByText('1-10 of N/A')).to.be.null;
+    });
+
+    it('should display count error when total count retrieval fails', function () {
+      renderWithProvider(<PreviewApp />);
+
+      const documents = Array.from({ length: 10 }, (_, i) => ({
+        _id: String(i + 1),
+        name: `Doc${i + 1}`,
+      }));
+      const errorMessage = 'Count request failed';
+
+      act(() => {
+        window.dispatchEvent(
+          new MessageEvent('message', {
+            data: {
+              command: PreviewMessageType.loadPage,
+              documents,
+            },
+          }),
+        );
+        window.dispatchEvent(
+          new MessageEvent('message', {
+            data: {
+              command: PreviewMessageType.updateTotalCountError,
+              error: errorMessage,
+            },
+          }),
+        );
+      });
+
+      const countError = screen.getByText('Error');
+      expect(countError).to.exist;
+      expect(countError.getAttribute('title')).to.equal(errorMessage);
+    });
+
     it('should not navigate when pagination buttons clicked while loading', function () {
       renderWithProvider(<PreviewApp />);
 

src/views/data-browsing-app/preview-page.tsx

@@ -152,6 +152,53 @@ const insertDocumentButtonStyles = css({
   },
 });
 
+const Pagination: React.FC<{
+  startItem: number;
+  endItem: number;
+  totalCountForQuery: number | null;
+  hasReceivedCount: boolean;
+  getTotalCountError: string | null;
+}> = ({
+  startItem,
+  endItem,
+  totalCountForQuery,
+  hasReceivedCount,
+  getTotalCountError,
+}) => {
+  // If for some reason we couldn't determine the count, don't mention the total
+  // at all. If the count is still loading or there's an error, then we'll
+  // display a loading indicator or the error in place of the total.
+  if (hasReceivedCount && !getTotalCountError && totalCountForQuery === null) {
+    return (
+      <span className={paginationInfoStyles}>
+        {startItem}-{endItem}
+      </span>
+    );
+  }
+
+  return (
+    <span className={paginationInfoStyles}>
+      {startItem}-{endItem} of{' '}
+      {!hasReceivedCount ? (
+        <VscodeProgressRing
+          style={{
+            width: 14,
+            height: 14,
+            display: 'inline-block',
+            verticalAlign: 'middle',
+          }}
+        />
+      ) : getTotalCountError ? (
+        <span className={countErrorStyles} title={getTotalCountError}>
+          Error
+        </span>
+      ) : (
+        totalCountForQuery
+      )}
+    </span>
+  );
+};
+
 const PreviewApp: React.FC = () => {
   const dispatch = useAppDispatch();
 
@@ -297,31 +344,13 @@ const PreviewApp: React.FC = () => {
           </VscodeSingleSelect>
 
           {/* Pagination info */}
-          <span className={paginationInfoStyles}>
-            {startItem}-{endItem} of{' '}
-            {!hasReceivedCount ? (
-              <VscodeProgressRing
-                style={{
-                  width: 14,
-                  height: 14,
-                  display: 'inline-block',
-                  verticalAlign: 'middle',
-                }}
-              />
-            ) : getTotalCountError ? (
-              <span className={countErrorStyles} title={getTotalCountError}>
-                Error
-              </span>
-            ) : viewType === 'cursor' ? (
-              <span title="We don't know the total count">N/A</span>
-            ) : totalCountForQuery === null ? (
-              <span title="We don't run a count for time series and views">
-                N/A
-              </span>
-            ) : (
-              totalCountForQuery
-            )}
-          </span>
+          <Pagination
+            startItem={startItem}
+            endItem={endItem}
+            totalCountForQuery={totalCountForQuery}
+            hasReceivedCount={hasReceivedCount}
+            getTotalCountError={getTotalCountError}
+          />
 
           {/* Page navigation arrows */}
           <div className={paginationArrowsStyles}>