@open-mercato/ui 0.6.8-develop.6977.1.5041da373e → 0.6.8-develop.6981.1.5c7cff2f3b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.8-develop.6977.1.5041da373e",
+  "version": "0.6.8-develop.6981.1.5c7cff2f3b",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,14 +155,14 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.8-develop.6977.1.5041da373e",
+    "@open-mercato/shared": "0.6.8-develop.6981.1.5c7cff2f3b",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.4",
-    "@open-mercato/shared": "0.6.8-develop.6977.1.5041da373e",
+    "@open-mercato/shared": "0.6.8-develop.6981.1.5c7cff2f3b",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.1",

package/src/backend/DataTable.tsx

@@ -295,6 +295,8 @@ export type DataTableProps<T extends RowData> = {
   sorting?: SortingState
   onSortingChange?: (s: SortingState) => void
   pagination?: PaginationProps
+  /** Render the query duration in the pagination footer. Set to false for a count-only footer. */
+  showQueryTime?: boolean
   isLoading?: boolean
   emptyState?: React.ReactNode
   error?: React.ReactNode | string | null
@@ -1206,6 +1208,7 @@ export function DataTable<T extends RowData>({
   sorting: sortingProp,
   onSortingChange,
   pagination,
+  showQueryTime = true,
   isLoading,
   emptyState,
   error,
@@ -2615,7 +2618,7 @@ export function DataTable<T extends RowData>({
     const effectiveDuration = (typeof durationMs === 'number' && Number.isFinite(durationMs) && durationMs >= 0)
       ? durationMs
       : measuredDurationMs ?? undefined
-    const durationLabel = formatDurationLabel(effectiveDuration)
+    const durationLabel = showQueryTime ? formatDurationLabel(effectiveDuration) : ''
     const normalizedCacheStatus = cacheStatus === 'hit' || cacheStatus === 'miss' ? cacheStatus : null
     const cacheBadge = normalizedCacheStatus ? (
       <span
@@ -2669,7 +2672,7 @@ export function DataTable<T extends RowData>({
         />
       </div>
     )
-  }, [pagination, measuredDurationMs, scrollTableIntoView, t])
+  }, [pagination, showQueryTime, measuredDurationMs, scrollTableIntoView, t])
 
   // Auto filters: fetch custom field defs when requested
   const resolvedEntityIds = React.useMemo(() => {

package/src/backend/__tests__/DataTable.showQueryTime.test.tsx

@@ -0,0 +1,70 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { renderToString } from 'react-dom/server'
+import { DataTable } from '../DataTable'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
+}))
+
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false }),
+}))
+
+type Row = { id: string; name: string }
+
+function renderFooter(showQueryTime?: boolean): string {
+  const columns: ColumnDef<Row>[] = [
+    { accessorKey: 'name', header: 'Name' },
+  ]
+  const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+  try {
+    return renderToString(
+      React.createElement(
+        QueryClientProvider as any,
+        { client: queryClient },
+        React.createElement(
+          I18nProvider as any,
+          { locale: 'en', dict: {} },
+          React.createElement(DataTable as any, {
+            columns,
+            data: [{ id: '1', name: 'Ada' }],
+            ...(showQueryTime === undefined ? {} : { showQueryTime }),
+            pagination: {
+              page: 1,
+              pageSize: 20,
+              total: 1,
+              totalPages: 1,
+              durationMs: 142,
+              onPageChange: () => {},
+            },
+          }),
+        ),
+      )
+    )
+  } finally {
+    queryClient.clear()
+  }
+}
+
+describe('DataTable showQueryTime', () => {
+  it('renders the query duration in the footer by default', () => {
+    const html = renderFooter(undefined)
+    expect(html).toContain('Showing 1 to 1 of 1 results in 142ms')
+  })
+
+  it('renders the count-only footer when showQueryTime is false', () => {
+    const html = renderFooter(false)
+    expect(html).toContain('Showing 1 to 1 of 1 results')
+    expect(html).not.toContain('142ms')
+    expect(html).not.toContain('results in')
+  })
+
+  it('renders the query duration when showQueryTime is explicitly true', () => {
+    const html = renderFooter(true)
+    expect(html).toContain('Showing 1 to 1 of 1 results in 142ms')
+  })
+})