refactor(connection): remove unused definitionTabs and enhance query options with exact filter

Author: letstri

apps/desktop/src/entities/connection/store/index.ts

@@ -11,10 +11,6 @@ const tabType = type({
   preview: 'boolean',
 })
 
-const definitionTabType = type({
-  type: '"enums" | "constraints" | "indexes"',
-})
-
 const queryToRunType = type({
   startLineNumber: 'number',
   endLineNumber: 'number',
@@ -30,7 +26,6 @@ const layoutSettingsType = type({
 export const connectionStoreType = type({
   lastOpenedPage: 'string | null' as type.cast<(Extract<keyof FileRoutesById, `/_protected/database/$id/${string}`> | null)>,
   lastOpenedChatId: 'string | null',
-  definitionTabs: definitionTabType.array(),
   lastOpenedTable: type({
     schema: 'string',
     table: 'string',
@@ -60,7 +55,6 @@ export const connectionStoreType = type({
 const defaultState: typeof connectionStoreType.infer = {
   lastOpenedPage: null,
   lastOpenedChatId: null,
-  definitionTabs: [],
   lastOpenedTable: null,
   sql: [
     '-- Write your SQL query here based on your database schema',
@@ -139,7 +133,6 @@ export function connectionStore(id: string) {
       lastOpenedPage: currentVal.lastOpenedPage,
       lastOpenedChatId: currentVal.lastOpenedChatId,
       lastOpenedTable: currentVal.lastOpenedTable,
-      definitionTabs: currentVal.definitionTabs,
       sql: currentVal.sql,
       selectedLines: currentVal.selectedLines,
       loggerOpened: currentVal.loggerOpened,

apps/desktop/src/entities/connection/utils/fetching.ts

@@ -27,11 +27,12 @@ export async function prefetchConnectionTableCore({ connection, schema, table, q
   query: {
     filters: ActiveFilter[]
     orderBy: Record<string, 'ASC' | 'DESC'>
+    exact: boolean
   }
 }) {
   await Promise.all([
     queryClient.prefetchInfiniteQuery(connectionRowsQuery({ connection, table, schema, query })),
-    queryClient.prefetchQuery(connectionTableTotalQuery({ connection, table, schema, query: { filters: query.filters, exact: false } })),
+    queryClient.prefetchQuery(connectionTableTotalQuery({ connection, table, schema, query })),
     queryClient.prefetchQuery(connectionTableColumnsQuery({ connection, table, schema })),
   ])
 }

apps/desktop/src/routes/_protected/database/$id/table/-components/header/header.tsx

@@ -3,7 +3,6 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@conar
 import { cn } from '@conar/ui/lib/utils'
 import NumberFlow from '@number-flow/react'
 import { useStore } from '@tanstack/react-store'
-import { useState } from 'react'
 import { useConnectionTableTotal } from '~/entities/connection/queries'
 import { Route } from '../..'
 import { useTableColumns } from '../../-queries/use-columns-query'
@@ -16,11 +15,10 @@ export function Header({ table, schema }: { table: string, schema: string }) {
   const columns = useTableColumns({ connection, table, schema })
   const store = usePageStoreContext()
   const filters = useStore(store, state => state.filters)
-  const [exact, setExact] = useState(false)
+  const exact = useStore(store, state => state.exact)
   const { data: total, isLoading } = useConnectionTableTotal({ connection, table, schema, query: { filters, exact } })
 
   const columnsCount = columns?.length ?? 0
-  const count = Number(total?.count)
 
   return (
     <div className="flex w-full items-center justify-between gap-6">
@@ -43,31 +41,35 @@ export function Header({ table, schema }: { table: string, schema: string }) {
               {columnsCount === 1 ? '' : 's'}
             </span>
             <Separator orientation="vertical" className="h-3!" />
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger
-                  className={cn('inline-flex items-center gap-1', !exact && total?.isEstimated && `
-                    cursor-pointer
-                  `)}
-                  onClick={() => setExact(true)}
-                >
-                  <NumberFlow
-                    value={count}
-                    format={{ notation: 'compact', compactDisplay: 'short', maximumFractionDigits: 1 }}
-                    className={cn('text-muted-foreground tabular-nums', isLoading && `
-                      animate-pulse
-                    `)}
-                    prefix={total?.isEstimated ? '~' : ''}
-                    suffix={count === 1 ? ' row' : ' rows'}
-                  />
-                </TooltipTrigger>
-                {!exact && total?.isEstimated && (
-                  <TooltipContent side="bottom">
-                    Click to get the exact count.
-                  </TooltipContent>
+            {total?.count === undefined
+              ? <>...</>
+              : (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger
+                        className={cn('inline-flex items-center gap-1', !exact && total.isEstimated && `
+                          cursor-pointer
+                        `)}
+                        onClick={() => store.setState(state => ({ ...state, exact: true } satisfies typeof state))}
+                      >
+                        <NumberFlow
+                          value={total.count}
+                          format={{ notation: 'compact', compactDisplay: 'short', maximumFractionDigits: 1 }}
+                          className={cn('text-muted-foreground tabular-nums', isLoading && `
+                            animate-pulse text-muted-foreground/50
+                          `)}
+                          prefix={total.isEstimated ? '~' : ''}
+                          suffix={total.count === 1 ? ' row' : ' rows'}
+                        />
+                      </TooltipTrigger>
+                      {!exact && total.isEstimated && (
+                        <TooltipContent side="bottom">
+                          Click to get the exact count.
+                        </TooltipContent>
+                      )}
+                    </Tooltip>
+                  </TooltipProvider>
                 )}
-              </Tooltip>
-            </TooltipProvider>
           </div>
         </div>
         <Separator orientation="vertical" className="h-6!" />

apps/desktop/src/routes/_protected/database/$id/table/-components/tabs.tsx

@@ -59,12 +59,14 @@ function getQueryOpts(connection: typeof connections.$inferSelect, schema: strin
     return {
       filters: state.filters,
       orderBy: state.orderBy,
+      exact: state.exact,
     }
   }
 
   return {
     filters: [],
     orderBy: {},
+    exact: false,
   }
 }
 

apps/desktop/src/routes/_protected/database/$id/table/index.tsx

@@ -44,6 +44,7 @@ export const Route = createFileRoute(
         query: {
           filters: store.state.filters,
           orderBy: store.state.orderBy,
+          exact: store.state.exact,
         },
       })
     }