feat(crud): add tooltip for N/A count

Anemy · Anemy · commit 2f9436f7798b · 2025-11-14T14:18:14.000-08:00
diff --git a/packages/compass-crud/src/components/crud-toolbar.tsx b/packages/compass-crud/src/components/crud-toolbar.tsx
@@ -21,10 +21,11 @@ import {
   useContextMenuGroups,
   usePersistedState,
   AtlasSkillsBanner,
+  Tooltip,
 } from '@mongodb-js/compass-components';
 import type { MenuAction, Signal } from '@mongodb-js/compass-components';
 import { ViewSwitcher } from './view-switcher';
-import type { DocumentView } from '../stores/crud-store';
+import { COUNT_MAX_TIME_MS_CAP, type DocumentView } from '../stores/crud-store';
 import { AddDataMenu } from './add-data-menu';
 import { usePreference } from 'compass-preferences-model/provider';
 import UpdateMenu from './update-data-menu';
@@ -87,6 +88,12 @@ const loaderContainerStyles = css({
   paddingRight: spacing[200],
 });
 
+const countUnavailableTextStyles = css({
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textUnderlineOffset: '3px',
+});
+
 type ExportDataOption = 'export-query' | 'export-full-collection';
 const exportDataActions: MenuAction<ExportDataOption>[] = [
   { action: 'export-query', label: 'Export query results' },
@@ -109,6 +116,8 @@ const ERROR_CODE_OPERATION_TIMED_OUT = 50;
 const INCREASE_MAX_TIME_MS_HINT =
   'Operation exceeded time limit. Please try increasing the maxTimeMS for the query in the expanded filter options.';
 
+const COUNT_UNAVAILABLE_TOOLTIP = `The count is not available for this query. This can happen when the count operation fails or exceeds the maxTimeMS of ${COUNT_MAX_TIME_MS_CAP}.`;
+
 type ErrorWithPossibleCode = Error & {
   code?: {
     value: number;
@@ -198,11 +207,6 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
     SkillsBannerContextEnum.Documents
   );
 
-  const displayedDocumentCount = useMemo(
-    () => (loadingCount ? '' : `${count ?? 'N/A'}`),
-    [loadingCount, count]
-  );
-
   const onClickRefreshDocuments = useCallback(() => {
     track('Query Results Refreshed', {}, connectionInfoRef.current);
     refreshDocuments();
@@ -416,7 +420,20 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
           </Select>
           <Body data-testid="crud-document-count-display">
             {start} – {end}{' '}
-            {displayedDocumentCount && `of ${displayedDocumentCount}`}
+            {!loadingCount && (
+              <span>
+                {'of '}
+                {count ?? (
+                  <Tooltip
+                    trigger={
+                      <span className={countUnavailableTextStyles}>N/A</span>
+                    }
+                  >
+                    <Body>{COUNT_UNAVAILABLE_TOOLTIP}</Body>
+                  </Tooltip>
+                )}
+              </span>
+            )}
           </Body>
           {loadingCount && (
             <div className={loaderContainerStyles}>
diff --git a/packages/compass-crud/src/stores/crud-store.ts b/packages/compass-crud/src/stores/crud-store.ts
@@ -253,7 +253,7 @@ const DEFAULT_INITIAL_MAX_TIME_MS = 60000;
  * We want to make sure `count` does not hold back the query results for too
  * long after docs are returned.
  */
-const COUNT_MAX_TIME_MS_CAP = 5000;
+export const COUNT_MAX_TIME_MS_CAP = 5000;
 
 /**
  * The key we use to persist the user selected maximum documents per page for
