simplified connecting

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

@@ -1,9 +1,3 @@
-import { uniq } from 'lodash'
-import { Loader2, MoreVertical, Pause, Play, Trash } from 'lucide-react'
-import Link from 'next/link'
-import { useMemo, useState } from 'react'
-import { toast } from 'sonner'
-
 import { useParams } from 'common'
 import {
   convertKVStringArrayToJson,
@@ -20,8 +14,15 @@ import { useFDWUpdateMutation } from 'data/fdw/fdw-update-mutation'
 import { useIcebergNamespaceTableDeleteMutation } from 'data/storage/iceberg-namespace-table-delete-mutation'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { SqlEditor } from 'icons'
+import { uniq } from 'lodash'
+import { Loader2, MoreVertical, Pause, Play, Trash } from 'lucide-react'
+import Link from 'next/link'
+import { useMemo, useState } from 'react'
+import { toast } from 'sonner'
 import {
+  Badge,
   Button,
+  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -275,7 +276,12 @@ export const TableRowComponent = ({
           </TableCell>
         )}
 
-        <TableCell className="text-right flex flex-row items-center gap-x-2 justify-end min-h-[60px] py-4">
+        <TableCell
+          className={cn(
+            'text-right flex flex-row items-center gap-x-2 justify-end min-h-[60px] py-4',
+            !table.isConnected && 'bg-gradient-to-l from-brand-300/10 to-transparent to-80% '
+          )}
+        >
           {table.isConnected ? (
             <>
               <Button asChild type="default" size="tiny">
@@ -340,7 +346,11 @@ export const TableRowComponent = ({
               </DropdownMenu>
             </>
           ) : (
-            <p className="text-sm text-foreground-muted">Waiting to connect</p>
+            <>
+              <Badge variant="success" className="uppercase">
+                New
+              </Badge>
+            </>
           )}
         </TableCell>
       </TableRow>

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

@@ -1,4 +1,4 @@
-import { Loader2, RefreshCw } from 'lucide-react'
+import { Loader2, Plus } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 
 import { useParams } from 'common'
@@ -23,7 +23,6 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-  cn,
 } from 'ui'
 import { getNamespaceTableNameFromPostgresTableName } from '../AnalyticsBucketDetails.utils'
 import { useAnalyticsBucketAssociatedEntities } from '../useAnalyticsBucketAssociatedEntities'
@@ -219,13 +218,7 @@ export const NamespaceWithTables = ({
         onClose={() => setImportForeignSchemaShown(false)}
       />
       {(pollIntervalNamespaceTables > 0 || missingTables.length > 0) && (
-        <CardFooter
-          className={cn(
-            'border-t px-4 py-4 flex flex-row justify-end gap-x-4 relative overflow-hidden',
-            missingTables.length > 0 &&
-              'before:absolute before:inset-0 before:pointer-events-none before:bg-gradient-to-l before:from-brand-300/20 before:to-transparent before:to-40% before:z-0'
-          )}
-        >
+        <CardFooter className="border-t px-4 py-4 flex flex-row justify-end gap-x-4 relative overflow-hidden">
           {pollIntervalNamespaceTables > 0 && (
             <div className="relative z-10">
               <Tooltip>
@@ -251,18 +244,23 @@ export const NamespaceWithTables = ({
             </div>
           )}
           {missingTables.length > 0 && (
-            <Button
-              type="default"
-              size="tiny"
-              icon={schema ? <RefreshCw /> : undefined}
-              onClick={() => (schema ? rescanNamespace() : setImportForeignSchemaShown(true))}
-              loading={isImportingForeignSchema || isLoadingNamespaceTables}
-              className="relative z-10"
-            >
-              {schema
-                ? 'Sync tables'
-                : `Connect ${missingTables.length > 1 ? missingTables.length : ''} table${missingTables.length > 1 ? 's' : ''}`}
-            </Button>
+            <div className="flex items-center gap-x-2 items-between justify-between flex-1">
+              <p className="text-sm text-foreground-muted">
+                {missingTables.length} new table
+                {missingTables.length > 1 ? 's' : ''} waiting to connect
+              </p>
+              <Button
+                type="default"
+                size="tiny"
+                icon={schema ? <Plus /> : undefined}
+                onClick={() => (schema ? rescanNamespace() : setImportForeignSchemaShown(true))}
+                loading={isImportingForeignSchema || isLoadingNamespaceTables}
+                className="relative z-10"
+              >
+                Connect {missingTables.length > 1 ? missingTables.length : ''} table
+                {missingTables.length > 1 ? 's' : ''}
+              </Button>
+            </div>
           )}
         </CardFooter>
       )}