move etl connection polling inline

apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx

@@ -20,6 +20,7 @@ import Link from 'next/link'
 import { useMemo, useState } from 'react'
 import { toast } from 'sonner'
 import {
+  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -46,6 +47,8 @@ interface TableRowComponentProps {
   schema: string
   namespace: string
   isLoading?: boolean
+  pollIntervalNamespaceTables?: number
+  publicationTablesNotSyncedToNamespaceTables?: Array<{ schema: string; name: string }>
 }
 
 export const TableRowComponent = ({
@@ -53,6 +56,8 @@ export const TableRowComponent = ({
   schema,
   namespace,
   isLoading,
+  pollIntervalNamespaceTables,
+  publicationTablesNotSyncedToNamespaceTables,
 }: TableRowComponentProps) => {
   const { ref: projectRef, bucketId } = useParams()
   const { data: project } = useSelectedProjectQuery()
@@ -91,6 +96,24 @@ export const TableRowComponent = ({
   const isPipelineRunning = pipelineStatus === 'started'
   const isReplicating = isTableUnderReplicationPublication && isPipelineRunning
 
+  // Check if this specific table is being waited on during polling
+  const isTableBeingWaitedOn = useMemo(() => {
+    if (!pollIntervalNamespaceTables || pollIntervalNamespaceTables === 0) return false
+    if (!publicationTablesNotSyncedToNamespaceTables) return false
+
+    return publicationTablesNotSyncedToNamespaceTables.some(
+      (pubTable) => getNamespaceTableNameFromPostgresTableName(pubTable) === table.name
+    )
+  }, [pollIntervalNamespaceTables, publicationTablesNotSyncedToNamespaceTables, table.name])
+
+  // Get the Postgres table that this namespace table is waiting for
+  const waitingForPostgresTable = useMemo(() => {
+    if (!isTableBeingWaitedOn || !publicationTablesNotSyncedToNamespaceTables) return null
+    return publicationTablesNotSyncedToNamespaceTables.find(
+      (pubTable) => getNamespaceTableNameFromPostgresTableName(pubTable) === table.name
+    )
+  }, [isTableBeingWaitedOn, publicationTablesNotSyncedToNamespaceTables, table.name])
+
   // [Joshen] Considers both the replication pipeline status + if the table is in the replication publication
   const replicationStatusLabel = useMemo(() => {
     if (isLoading) return 'Checking'
@@ -354,7 +377,28 @@ export const TableRowComponent = ({
               </DropdownMenu>
             </>
           ) : (
-            <p className="text-sm text-foreground-muted">Waiting</p>
+            <div className="flex items-center gap-x-2">
+              {isTableBeingWaitedOn ? (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div className="flex items-center gap-x-2 text-foreground-lighter">
+                      <Loader2 size={14} className="animate-spin" />
+                      <p className="text-sm">Connecting</p>
+                    </div>
+                  </TooltipTrigger>
+                  {waitingForPostgresTable && (
+                    <TooltipContent side="left">
+                      <p>
+                        Waiting for analytics table to be created for:{' '}
+                        {waitingForPostgresTable.schema}.{waitingForPostgresTable.name}
+                      </p>
+                    </TooltipContent>
+                  )}
+                </Tooltip>
+              ) : (
+                <p className="text-sm text-foreground-muted">Waiting to be accepted</p>
+              )}
+            </div>
           )}
         </TableCell>
       </TableRow>

apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/index.tsx

@@ -1,4 +1,3 @@
-import { Loader2 } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 
 import { useParams } from 'common'
@@ -12,7 +11,6 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import {
   Button,
   Card,
-  CardFooter,
   LoadingLine,
   Table,
   TableBody,
@@ -20,9 +18,6 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
 } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
 import { getNamespaceTableNameFromPostgresTableName } from '../AnalyticsBucketDetails.utils'
@@ -226,39 +221,16 @@ export const NamespaceWithTables = ({
                 namespace={namespace}
                 schema={displaySchema}
                 isLoading={isImportingForeignSchema || isLoadingNamespaceTables}
+                pollIntervalNamespaceTables={pollIntervalNamespaceTables}
+                publicationTablesNotSyncedToNamespaceTables={
+                  publicationTablesNotSyncedToNamespaceTables
+                }
               />
             ))
           )}
         </TableBody>
       </Table>
 
-      {pollIntervalNamespaceTables > 0 && (
-        <CardFooter className="border-t px-4 py-4 flex flex-row justify-end gap-x-4 relative overflow-hidden">
-          <div className="relative z-10">
-            <Tooltip>
-              <TooltipTrigger>
-                <div className="flex items-center gap-x-2 text-foreground-lighter">
-                  <Loader2 size={14} className="animate-spin" />
-                  <p className="text-sm">
-                    Connecting {publicationTablesNotSyncedToNamespaceTables.length} table
-                    {publicationTablesNotSyncedToNamespaceTables.length > 1 ? 's' : ''}
-                  </p>
-                </div>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" align="end">
-                <p className="mb-1">Waiting for analytics table to be created for:</p>
-                <ul className="list-disc pl-6">
-                  {publicationTablesNotSyncedToNamespaceTables.map((x) => {
-                    const value = `${x.schema}.${x.name}`
-                    return <li key={value}>{value}</li>
-                  })}
-                </ul>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </CardFooter>
-      )}
-
       <ImportForeignSchemaDialog
         bucketName={bucketName ?? ''}
         namespace={namespace}