fix(data-warehouse): Auto reload source settings scene (#23713)

frontend/src/scenes/data-warehouse/settings/dataWarehouseSettingsLogic.ts

@@ -35,8 +35,6 @@ export const dataWarehouseSettingsLogic = kea<dataWarehouseSettingsLogicType>([
     actions({
         deleteSource: (source: ExternalDataStripeSource) => ({ source }),
         reloadSource: (source: ExternalDataStripeSource) => ({ source }),
-        reloadSchema: (schema: ExternalDataSourceSchema) => ({ schema }),
-        resyncSchema: (schema: ExternalDataSourceSchema) => ({ schema }),
         sourceLoadingFinished: (source: ExternalDataStripeSource) => ({ source }),
         schemaLoadingFinished: (schema: ExternalDataSourceSchema) => ({ schema }),
         abortAnyRunningQuery: true,
@@ -128,14 +126,6 @@ export const dataWarehouseSettingsLogic = kea<dataWarehouseSettingsLogicType>([
         schemaReloadingById: [
             {} as Record<string, boolean>,
             {
-                reloadSchema: (state, { schema }) => ({
-                    ...state,
-                    [schema.id]: true,
-                }),
-                resyncSchema: (state, { schema }) => ({
-                    ...state,
-                    [schema.id]: true,
-                }),
                 schemaLoadingFinished: (state, { schema }) => ({
                     ...state,
                     [schema.id]: false,
@@ -235,64 +225,6 @@ export const dataWarehouseSettingsLogic = kea<dataWarehouseSettingsLogicType>([
             }
             actions.sourceLoadingFinished(source)
         },
-        reloadSchema: async ({ schema }) => {
-            // Optimistic UI updates before sending updates to the backend
-            const clonedSources = JSON.parse(
-                JSON.stringify(values.dataWarehouseSources?.results ?? [])
-            ) as ExternalDataStripeSource[]
-            const sourceIndex = clonedSources.findIndex((n) => n.schemas.find((m) => m.id === schema.id))
-            const schemaIndex = clonedSources[sourceIndex].schemas.findIndex((n) => n.id === schema.id)
-            clonedSources[sourceIndex].status = 'Running'
-            clonedSources[sourceIndex].schemas[schemaIndex].status = 'Running'
-
-            actions.loadSourcesSuccess({
-                ...values.dataWarehouseSources,
-                results: clonedSources,
-            })
-
-            try {
-                await api.externalDataSchemas.reload(schema.id)
-                actions.schemaLoadingFinished(schema)
-                actions.loadSources(null)
-
-                posthog.capture('schema reloaded', { sourceType: clonedSources[sourceIndex].source_type })
-            } catch (e: any) {
-                if (e.message) {
-                    lemonToast.error(e.message)
-                } else {
-                    lemonToast.error('Cant reload schema at this time')
-                }
-            }
-        },
-        // Complete refresh
-        resyncSchema: async ({ schema }) => {
-            const clonedSources = JSON.parse(
-                JSON.stringify(values.dataWarehouseSources?.results ?? [])
-            ) as ExternalDataStripeSource[]
-            const sourceIndex = clonedSources.findIndex((n) => n.schemas.find((m) => m.id === schema.id))
-            const schemaIndex = clonedSources[sourceIndex].schemas.findIndex((n) => n.id === schema.id)
-            clonedSources[sourceIndex].status = 'Running'
-            clonedSources[sourceIndex].schemas[schemaIndex].status = 'Running'
-
-            actions.loadSourcesSuccess({
-                ...values.dataWarehouseSources,
-                results: clonedSources,
-            })
-
-            try {
-                await api.externalDataSchemas.resync(schema.id)
-                actions.schemaLoadingFinished(schema)
-                actions.loadSources(null)
-
-                posthog.capture('schema resynced', { sourceType: clonedSources[sourceIndex].source_type })
-            } catch (e: any) {
-                if (e.message) {
-                    lemonToast.error(e.message)
-                } else {
-                    lemonToast.error('Cant refresh schema at this time')
-                }
-            }
-        },
         abortAnyRunningQuery: () => {
             if (cache.abortController) {
                 cache.abortController.abort()

frontend/src/scenes/data-warehouse/settings/source/Schemas.tsx

@@ -46,15 +46,15 @@ const StatusTagSetting = {
 }
 
 export const SchemaTable = ({ schemas, isLoading }: SchemaTableProps): JSX.Element => {
-    const { reloadSchema, resyncSchema } = useActions(dataWarehouseSettingsLogic)
-    const { updateSchema } = useActions(dataWarehouseSourceSettingsLogic)
+    const { updateSchema, reloadSchema, resyncSchema } = useActions(dataWarehouseSourceSettingsLogic)
     const { schemaReloadingById } = useValues(dataWarehouseSettingsLogic)
 
     return (
         <>
             <LemonTable
                 dataSource={schemas}
                 loading={isLoading}
+                disableTableWhileLoading={false}
                 columns={[
                     {
                         title: 'Schema Name',

frontend/src/scenes/data-warehouse/settings/source/dataWarehouseSourceSettingsLogic.ts

@@ -1,7 +1,9 @@
-import { actions, afterMount, kea, key, path, props, reducers, selectors } from 'kea'
+import { lemonToast } from '@posthog/lemon-ui'
+import { actions, afterMount, kea, key, listeners, path, props, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import { urlToAction } from 'kea-router'
 import api from 'lib/api'
+import posthog from 'posthog-js'
 import { Scene } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
@@ -25,6 +27,8 @@ export interface DataWarehouseSourceSettingsLogicProps {
     parentSettingsTab: DataWarehouseSettingsTab
 }
 
+const REFRESH_INTERVAL = 5000
+
 export const dataWarehouseSourceSettingsLogic = kea<dataWarehouseSourceSettingsLogicType>([
     path(['scenes', 'data-warehouse', 'settings', 'source', 'dataWarehouseSourceSettingsLogic']),
     props({} as DataWarehouseSourceSettingsLogicProps),
@@ -33,19 +37,26 @@ export const dataWarehouseSourceSettingsLogic = kea<dataWarehouseSourceSettingsL
         setCurrentTab: (tab: DataWarehouseSourceSettingsTabs) => ({ tab }),
         setParentSettingsTab: (tab: DataWarehouseSettingsTab) => ({ tab }),
         setSourceId: (id: string) => ({ id }),
+        reloadSchema: (schema: ExternalDataSourceSchema) => ({ schema }),
+        resyncSchema: (schema: ExternalDataSourceSchema) => ({ schema }),
     }),
-    loaders(({ values }) => ({
+    loaders(({ actions, values }) => ({
         source: [
             null as ExternalDataStripeSource | null,
             {
                 loadSource: async () => {
                     return await api.externalDataSources.get(values.sourceId)
                 },
                 updateSchema: async (schema: ExternalDataSourceSchema) => {
+                    // Optimistic UI updates before sending updates to the backend
+                    const clonedSource = JSON.parse(JSON.stringify(values.source)) as ExternalDataStripeSource
+                    const schemaIndex = clonedSource.schemas.findIndex((n) => n.id === schema.id)
+                    clonedSource.schemas[schemaIndex] = schema
+                    actions.loadSourceSuccess(clonedSource)
+
                     const updatedSchema = await api.externalDataSchemas.update(schema.id, schema)
 
                     const source = values.source
-                    const schemaIndex = source?.schemas.findIndex((n) => n.id === schema.id)
                     if (schemaIndex !== undefined) {
                         source!.schemas[schemaIndex] = updatedSchema
                     }
@@ -105,6 +116,64 @@ export const dataWarehouseSourceSettingsLogic = kea<dataWarehouseSourceSettingsL
             ],
         ],
     }),
+    listeners(({ values, actions, cache }) => ({
+        loadSourceSuccess: () => {
+            clearTimeout(cache.refreshTimeout)
+
+            cache.refreshTimeout = setTimeout(() => {
+                actions.loadSource()
+            }, REFRESH_INTERVAL)
+        },
+        loadSourceFailure: () => {
+            clearTimeout(cache.refreshTimeout)
+
+            cache.refreshTimeout = setTimeout(() => {
+                actions.loadSource()
+            }, REFRESH_INTERVAL)
+        },
+        reloadSchema: async ({ schema }) => {
+            // Optimistic UI updates before sending updates to the backend
+            const clonedSource = JSON.parse(JSON.stringify(values.source)) as ExternalDataStripeSource
+            const schemaIndex = clonedSource.schemas.findIndex((n) => n.id === schema.id)
+            clonedSource.status = 'Running'
+            clonedSource.schemas[schemaIndex].status = 'Running'
+
+            actions.loadSourceSuccess(clonedSource)
+
+            try {
+                await api.externalDataSchemas.reload(schema.id)
+
+                posthog.capture('schema reloaded', { sourceType: clonedSource.source_type })
+            } catch (e: any) {
+                if (e.message) {
+                    lemonToast.error(e.message)
+                } else {
+                    lemonToast.error('Cant reload schema at this time')
+                }
+            }
+        },
+        resyncSchema: async ({ schema }) => {
+            // Optimistic UI updates before sending updates to the backend
+            const clonedSource = JSON.parse(JSON.stringify(values.source)) as ExternalDataStripeSource
+            const schemaIndex = clonedSource.schemas.findIndex((n) => n.id === schema.id)
+            clonedSource.status = 'Running'
+            clonedSource.schemas[schemaIndex].status = 'Running'
+
+            actions.loadSourceSuccess(clonedSource)
+
+            try {
+                await api.externalDataSchemas.resync(schema.id)
+
+                posthog.capture('schema resynced', { sourceType: clonedSource.source_type })
+            } catch (e: any) {
+                if (e.message) {
+                    lemonToast.error(e.message)
+                } else {
+                    lemonToast.error('Cant refresh schema at this time')
+                }
+            }
+        },
+    })),
     urlToAction(({ actions, values }) => ({
         '/data-warehouse/settings/:parentTab/:id': ({ parentTab, id }) => {
             if (id) {