Joshen/depr 170 analytics buckets hook up connect tables functionality (supabase#40217)

* midway

* Hook up connect tables e2e

* Update isEnabled flag

* Change connectingStep to enum

* Nit

* Nit

* Nit

* Only show replication status if theres a publication

* Improve loading state in etl page

* Refactor + Clean up + Add long poll logic when adding more tables

Author: joshenlim

apps/studio/components/interfaces/Database/ETL/Destinations.tsx

@@ -117,16 +117,16 @@ export const Destinations = () => {
       </div>
 
       <div className="w-full overflow-hidden overflow-x-auto">
-        {(isSourcesLoading || isDestinationsLoading) && <GenericSkeletonLoader />}
-
         {(isSourcesError || isDestinationsError) && (
           <AlertError
             error={sourcesError || destinationsError}
             subject={PIPELINE_ERROR_MESSAGES.RETRIEVE_DESTINATIONS}
           />
         )}
 
-        {replicationNotEnabled ? (
+        {isSourcesLoading || isDestinationsLoading ? (
+          <GenericSkeletonLoader />
+        ) : replicationNotEnabled ? (
           <div className="border rounded-md p-4 md:p-12 flex flex-col gap-y-4">
             <div className="flex flex-col gap-y-1">
               <h3>Stream data to external destinations in real-time</h3>

apps/studio/components/interfaces/Database/ETL/NewPublicationPanel.tsx

@@ -5,7 +5,7 @@ import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { useParams } from 'common'
-import { useCreatePublicationMutation } from 'data/etl/create-publication-mutation'
+import { useCreatePublicationMutation } from 'data/etl/publication-create-mutation'
 import { useReplicationTablesQuery } from 'data/etl/tables-query'
 import {
   Button,
@@ -139,7 +139,7 @@ export const NewPublicationPanel = ({ visible, sourceId, onClose }: NewPublicati
                             </MultiSelector.Trigger>
                             <MultiSelector.Content>
                               <MultiSelector.List>
-                                {tables?.tables.map((table) => (
+                                {tables?.map((table) => (
                                   <MultiSelector.Item
                                     key={`${table.schema}.${table.name}`}
                                     value={`${table.schema}.${table.name}`}