diff --git a/packages/compass-crud/src/components/crud-toolbar.tsx b/packages/compass-crud/src/components/crud-toolbar.tsx index 3481581b3b7..8cf56e0f3ba 100644 --- 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[] = [ { 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 = ({ 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 = ({ {start} – {end}{' '} - {displayedDocumentCount && `of ${displayedDocumentCount}`} + {!loadingCount && ( + + {'of '} + {count ?? ( + N/A + } + > + {COUNT_UNAVAILABLE_TOOLTIP} + + )} + + )} {loadingCount && (
diff --git a/packages/compass-crud/src/stores/crud-store.ts b/packages/compass-crud/src/stores/crud-store.ts index 02ab3ee5e56..176f8f701cb 100644 --- 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