chore(data-warehouse): split managed and self managed tables in setti…

…ngs page (#23034)

split managed and self-managed

frontend/src/scenes/data-warehouse/external/TableData.tsx

@@ -229,7 +229,7 @@ export function DeleteTableModal({
 
     return (
         <LemonModal
-            title={`Delete ${capitalizeFirstLetter(subject)}?`}
+            title={`Delete ${subject}?`}
             onClose={() => setIsOpen(false)}
             footer={
                 <>

frontend/src/scenes/data-warehouse/new/NewSourceWizard.tsx

@@ -11,7 +11,7 @@ import PostgresSchemaForm from '../external/forms/PostgresSchemaForm'
 import SourceForm from '../external/forms/SourceForm'
 import { SyncProgressStep } from '../external/forms/SyncProgressStep'
 import { DatawarehouseTableForm } from '../new/DataWarehouseTableForm'
-import { RenderDataWarehouseSourceIcon } from '../settings/DataWarehouseSourcesTable'
+import { RenderDataWarehouseSourceIcon } from '../settings/DataWarehouseManagedSourcesTable'
 import { dataWarehouseTableLogic } from './dataWarehouseTableLogic'
 import { sourceWizardLogic } from './sourceWizardLogic'
 

frontend/src/scenes/data-warehouse/settings/DataWarehouseSourcesTable.tsx → frontend/src/scenes/data-warehouse/settings/DataWarehouseManagedSourcesTable.tsx

@@ -42,7 +42,7 @@ const StatusTagSetting = {
     Failed: 'danger',
 }
 
-export function DataWarehouseSourcesTable(): JSX.Element {
+export function DataWarehouseManagedSourcesTable(): JSX.Element {
     const { dataWarehouseSources, dataWarehouseSourcesLoading, sourceReloadingById } =
         useValues(dataWarehouseSettingsLogic)
     const { deleteSource, reloadSource, updateSource } = useActions(dataWarehouseSettingsLogic)

frontend/src/scenes/data-warehouse/settings/DataWarehouseSelfManagedSourcesTable.tsx

@@ -0,0 +1,58 @@
+import { LemonButton, LemonDialog, LemonTable } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+
+import { DatabaseSchemaDataWarehouseTable } from '~/queries/schema'
+
+import { dataWarehouseSettingsLogic } from './dataWarehouseSettingsLogic'
+
+export function DataWarehouseSelfManagedSourcesTable(): JSX.Element {
+    const { selfManagedTables } = useValues(dataWarehouseSettingsLogic)
+    const { deleteSelfManagedTable } = useActions(dataWarehouseSettingsLogic)
+
+    return (
+        <LemonTable
+            dataSource={selfManagedTables}
+            columns={[
+                {
+                    title: 'Name',
+                    dataIndex: 'name',
+                    key: 'name',
+                },
+                {
+                    key: 'actions',
+                    render: (_, item: DatabaseSchemaDataWarehouseTable) => {
+                        return (
+                            <div className="flex flex-row justify-end">
+                                <LemonButton
+                                    status="danger"
+                                    data-attr={`delete-data-warehouse-${item.name}`}
+                                    key={`delete-data-warehouse-${item.name}`}
+                                    onClick={() => {
+                                        LemonDialog.open({
+                                            title: 'Delete table?',
+                                            description:
+                                                'Table deletion cannot be undone. All views and joins related to this table will be deleted.',
+
+                                            primaryButton: {
+                                                children: 'Delete',
+                                                status: 'danger',
+                                                onClick: () => {
+                                                    deleteSelfManagedTable(item.id)
+                                                },
+                                            },
+                                            secondaryButton: {
+                                                children: 'Cancel',
+                                            },
+                                        })
+                                    }}
+                                >
+                                    Delete
+                                </LemonButton>
+                            </div>
+                        )
+                    },
+                },
+            ]}
+        />
+    )
+}

frontend/src/scenes/data-warehouse/settings/DataWarehouseSettingsScene.tsx

@@ -1,18 +1,30 @@
-import { LemonButton } from '@posthog/lemon-ui'
+import { LemonButton, LemonTabs } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { router } from 'kea-router'
 import { PageHeader } from 'lib/components/PageHeader'
 import { SceneExport } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
+import { DataWarehouseSettingsTab } from '~/types'
+
 import { DataWarehouseBetaNotice } from '../DataWarehouseBetaNotice'
-import { dataWarehouseSettingsLogic } from './dataWarehouseSettingsLogic'
-import { DataWarehouseSourcesTable } from './DataWarehouseSourcesTable'
+import { DataWarehouseManagedSourcesTable } from './DataWarehouseManagedSourcesTable'
+import { DataWarehouseSelfManagedSourcesTable } from './DataWarehouseSelfManagedSourcesTable'
+import { dataWarehouseSettingsLogic, humanFriendlyDataWarehouseSettingsTabName } from './dataWarehouseSettingsLogic'
 
 export const scene: SceneExport = {
     component: DataWarehouseSettingsScene,
     logic: dataWarehouseSettingsLogic,
 }
 
 export function DataWarehouseSettingsScene(): JSX.Element {
+    const { currentTab } = useValues(dataWarehouseSettingsLogic)
+
+    const tabToContent: Partial<Record<DataWarehouseSettingsTab, JSX.Element>> = {
+        [DataWarehouseSettingsTab.Managed]: <DataWarehouseManagedSourcesTable />,
+        [DataWarehouseSettingsTab.SelfManaged]: <DataWarehouseSelfManagedSourcesTable />,
+    }
+
     return (
         <div>
             <PageHeader
@@ -34,7 +46,19 @@ export function DataWarehouseSettingsScene(): JSX.Element {
                 }
             />
             <DataWarehouseBetaNotice />
-            <DataWarehouseSourcesTable />
+            <LemonTabs
+                activeKey={currentTab}
+                onChange={(tab) => router.actions.push(urls.dataWarehouseSettings(tab as DataWarehouseSettingsTab))}
+                tabs={Object.entries(tabToContent).map(([tab, content]) => ({
+                    label: (
+                        <span className="flex justify-center items-center justify-between gap-1">
+                            {humanFriendlyDataWarehouseSettingsTabName(tab as DataWarehouseSettingsTab)}{' '}
+                        </span>
+                    ),
+                    key: tab,
+                    content: content,
+                }))}
+            />
         </div>
     )
 }

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

@@ -1,20 +1,36 @@
-import { actions, afterMount, kea, listeners, path, reducers, selectors } from 'kea'
+import { actions, afterMount, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
+import { actionToUrl, urlToAction } from 'kea-router'
 import api, { ApiMethodOptions, PaginatedResponse } from 'lib/api'
 import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
+import { databaseTableListLogic } from 'scenes/data-management/database/databaseTableListLogic'
 import { Scene } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
-import { Breadcrumb, ExternalDataSourceSchema, ExternalDataStripeSource } from '~/types'
+import { DatabaseSchemaDataWarehouseTable } from '~/queries/schema'
+import { Breadcrumb, DataWarehouseSettingsTab, ExternalDataSourceSchema, ExternalDataStripeSource } from '~/types'
 
 import type { dataWarehouseSettingsLogicType } from './dataWarehouseSettingsLogicType'
 
 const REFRESH_INTERVAL = 10000
 
 export interface DataWarehouseSource {}
 
+export const humanFriendlyDataWarehouseSettingsTabName = (tab: DataWarehouseSettingsTab): string => {
+    switch (tab) {
+        case DataWarehouseSettingsTab.Managed:
+            return 'Managed'
+        case DataWarehouseSettingsTab.SelfManaged:
+            return 'Self managed'
+    }
+}
+
 export const dataWarehouseSettingsLogic = kea<dataWarehouseSettingsLogicType>([
     path(['scenes', 'data-warehouse', 'settings', 'dataWarehouseSettingsLogic']),
+    connect(() => ({
+        values: [databaseTableListLogic, ['dataWarehouseTables']],
+        actions: [databaseTableListLogic, ['loadDatabase']],
+    })),
     actions({
         deleteSource: (source: ExternalDataStripeSource) => ({ source }),
         reloadSource: (source: ExternalDataStripeSource) => ({ source }),
@@ -24,6 +40,8 @@ export const dataWarehouseSettingsLogic = kea<dataWarehouseSettingsLogicType>([
         schemaLoadingFinished: (schema: ExternalDataSourceSchema) => ({ schema }),
         updateSchema: (schema: ExternalDataSourceSchema) => ({ schema }),
         abortAnyRunningQuery: true,
+        setCurrentTab: (tab: DataWarehouseSettingsTab = DataWarehouseSettingsTab.Managed) => ({ tab }),
+        deleteSelfManagedTable: (tableId: string) => ({ tableId }),
     }),
     loaders(({ cache, actions, values }) => ({
         dataWarehouseSources: [
@@ -100,6 +118,12 @@ export const dataWarehouseSettingsLogic = kea<dataWarehouseSettingsLogicType>([
                 }),
             },
         ],
+        currentTab: [
+            DataWarehouseSettingsTab.Managed as DataWarehouseSettingsTab,
+            {
+                setCurrentTab: (_, { tab }) => tab,
+            },
+        ],
     })),
     selectors({
         breadcrumbs: [
@@ -117,8 +141,18 @@ export const dataWarehouseSettingsLogic = kea<dataWarehouseSettingsLogicType>([
                 },
             ],
         ],
+        selfManagedTables: [
+            (s) => [s.dataWarehouseTables],
+            (dataWarehouseTables): DatabaseSchemaDataWarehouseTable[] => {
+                return dataWarehouseTables.filter((table) => !table.source)
+            },
+        ],
     }),
     listeners(({ actions, values, cache }) => ({
+        deleteSelfManagedTable: async ({ tableId }) => {
+            await api.dataWarehouseTables.delete(tableId)
+            actions.loadDatabase()
+        },
         loadSourcesSuccess: () => {
             clearTimeout(cache.refreshTimeout)
 
@@ -254,4 +288,16 @@ export const dataWarehouseSettingsLogic = kea<dataWarehouseSettingsLogicType>([
     afterMount(({ actions }) => {
         actions.loadSources(null)
     }),
+    actionToUrl(({ values }) => {
+        return {
+            setCurrentTab: () => [urls.dataWarehouseSettings(values.currentTab)],
+        }
+    }),
+    urlToAction(({ actions, values }) => ({
+        '/data-warehouse/settings/:tab': ({ tab }) => {
+            if (tab !== values.currentTab) {
+                actions.setCurrentTab(tab as DataWarehouseSettingsTab)
+            }
+        },
+    })),
 ])

frontend/src/scenes/pipeline/Pipeline.tsx

@@ -5,7 +5,7 @@ import { PageHeader } from 'lib/components/PageHeader'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { DataWarehouseSourcesTable } from 'scenes/data-warehouse/settings/DataWarehouseSourcesTable'
+import { DataWarehouseManagedSourcesTable } from 'scenes/data-warehouse/settings/DataWarehouseManagedSourcesTable'
 import { SceneExport } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
@@ -39,7 +39,7 @@ export function Pipeline(): JSX.Element {
     if (featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE]) {
         tabToContent = {
             ...tabToContent,
-            [PipelineTab.DataImport]: <DataWarehouseSourcesTable />,
+            [PipelineTab.DataImport]: <DataWarehouseManagedSourcesTable />,
         }
     }
     // Import apps are deprecated, we only show the tab if there are some still enabled

frontend/src/scenes/scenes.ts

@@ -555,7 +555,7 @@ export const routes: Record<string, Scene> = {
     [urls.surveyTemplates()]: Scene.SurveyTemplates,
     [urls.dataWarehouse()]: Scene.DataWarehouse,
     [urls.dataWarehouseTable()]: Scene.DataWarehouseTable,
-    [urls.dataWarehouseSettings()]: Scene.DataWarehouseSettings,
+    [urls.dataWarehouseSettings(':tab')]: Scene.DataWarehouseSettings,
     [urls.dataWarehouseRedirect(':kind')]: Scene.DataWarehouseRedirect,
     [urls.featureFlags()]: Scene.FeatureFlags,
     [urls.featureFlag(':id')]: Scene.FeatureFlag,

frontend/src/scenes/urls.ts

@@ -11,6 +11,7 @@ import {
     AnyPartialFilterType,
     AppMetricsUrlParams,
     DashboardType,
+    DataWarehouseSettingsTab,
     FilterType,
     InsightShortId,
     PipelineNodeTab,
@@ -159,7 +160,8 @@ export const urls = {
         combineUrl('/data-warehouse', {}, query ? { q: typeof query === 'string' ? query : JSON.stringify(query) } : {})
             .url,
     dataWarehouseTable: (): string => `/data-warehouse/new`,
-    dataWarehouseSettings: (): string => '/data-warehouse/settings',
+    dataWarehouseSettings: (tab?: DataWarehouseSettingsTab | ':tab'): string =>
+        `/data-warehouse/settings/${tab ? tab : DataWarehouseSettingsTab.Managed}`,
     dataWarehouseRedirect: (kind: string): string => `/data-warehouse/${kind}/redirect`,
     annotations: (): string => '/data-management/annotations',
     annotation: (id: AnnotationType['id'] | ':id'): string => `/data-management/annotations/${id}`,

frontend/src/types.ts

@@ -3793,6 +3793,11 @@ export interface DataWarehouseViewLink {
     created_at?: string | null
 }
 
+export enum DataWarehouseSettingsTab {
+    Managed = 'managed',
+    SelfManaged = 'self_managed',
+}
+
 export const externalDataSources = ['Stripe', 'Hubspot', 'Postgres', 'Zendesk', 'Snowflake'] as const
 
 export type ExternalDataSourceType = (typeof externalDataSources)[number]