chore(data-warehouse): dw billing

frontend/src/lib/api.ts

@@ -50,6 +50,8 @@ import {
     BatchExportRun,
     UserBasicType,
     NotebookNodeResource,
+    AirbyteStripeResourceCreatePayload,
+    AirbyteStripeResource,
 } from '~/types'
 import { getCurrentOrganizationId, getCurrentTeamId } from './utils/logics'
 import { CheckboxValueType } from 'antd/lib/checkbox/Group'
@@ -566,6 +568,11 @@ class ApiRequest {
         return this.batchExportRun(id, runId, teamId).addPathComponent('logs')
     }
 
+    // Airbyte
+    public airbyteResources(teamId?: TeamType['id']): ApiRequest {
+        return this.projectsDetail(teamId).addPathComponent('airbyte_resources')
+    }
+
     // Request finalization
     public async get(options?: ApiMethodOptions): Promise<any> {
         return await api.get(this.assembleFullUrl(), options)
@@ -1571,6 +1578,15 @@ const api = {
         },
     },
 
+    airbyteResources: {
+        async list(): Promise<PaginatedResponse<AirbyteStripeResource>> {
+            return await new ApiRequest().airbyteResources().get()
+        },
+        async create(data: Partial<AirbyteStripeResourceCreatePayload>): Promise<AirbyteStripeResourceCreatePayload> {
+            return await new ApiRequest().airbyteResources().create({ data })
+        },
+    },
+
     dataWarehouseViewLinks: {
         async list(): Promise<PaginatedResponse<DataWarehouseViewLink>> {
             return await new ApiRequest().dataWarehouseViewLinks().get()

frontend/src/scenes/appScenes.ts

@@ -1,7 +1,7 @@
 import { Scene } from 'scenes/sceneTypes'
 import { preloadedScenes } from 'scenes/scenes'
 
 export const appScenes: Record<Scene, () => any> = {
     [Scene.Error404]: () => ({ default: preloadedScenes[Scene.Error404].component }),
     [Scene.ErrorNetwork]: () => ({ default: preloadedScenes[Scene.ErrorNetwork].component }),
     [Scene.ErrorProjectUnavailable]: () => ({ default: preloadedScenes[Scene.ErrorProjectUnavailable].component }),
@@ -44,7 +44,7 @@
     [Scene.DataWarehousePosthog]: () => import('./data-warehouse/posthog/DataWarehousePosthogScene'),
     [Scene.DataWarehouseExternal]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),
     [Scene.DataWarehouseSavedQueries]: () => import('./data-warehouse/saved_queries/DataWarehouseSavedQueriesScene'),
-    [Scene.DataWarehouseTable]: () => import('./data-warehouse/DataWarehouseTable'),
+    [Scene.DataWarehouseSettings]: () => import('./data-warehouse/settings/DataWarehouseSettingsScene'),
     [Scene.OrganizationSettings]: () => import('./organization/Settings'),
     [Scene.OrganizationCreateFirst]: () => import('./organization/Create'),
     [Scene.OrganizationCreationConfirm]: () => import('./organization/ConfirmOrganization/ConfirmOrganization'),

frontend/src/scenes/data-warehouse/DataWarehouseTable.tsx

@@ -1,76 +1,11 @@
-import { SceneExport } from 'scenes/sceneTypes'
 import { dataWarehouseTableLogic } from './dataWarehouseTableLogic'
-import { useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
-import { PageHeader } from 'lib/components/PageHeader'
-import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
-import { LemonButton, LemonDivider, LemonInput, LemonSelect } from '@posthog/lemon-ui'
-import { router } from 'kea-router'
-import { urls } from 'scenes/urls'
+import { LemonInput, LemonSelect } from '@posthog/lemon-ui'
 import { Field } from 'lib/forms/Field'
 
-export const scene: SceneExport = {
-    component: DataWarehousetTable,
-    logic: dataWarehouseTableLogic,
-    paramsToProps: ({ params: { id } }): (typeof dataWarehouseTableLogic)['props'] => ({
-        id: id,
-    }),
-}
-
-export function DataWarehousetTable({ id }: { id?: string } = {}): JSX.Element {
-    const { isEditingTable } = useValues(dataWarehouseTableLogic)
-    const showTableForm = id === 'new' || isEditingTable
-    return <div>{!id ? <LemonSkeleton /> : <>{showTableForm ? <TableForm id={id} /> : <></>}</>}</div>
-}
-
-export function TableForm({ id }: { id: string }): JSX.Element {
-    const { table, tableLoading, isEditingTable } = useValues(dataWarehouseTableLogic)
-    const { loadTable, editingTable } = useActions(dataWarehouseTableLogic)
-
+export function DatawarehouseTableForm(): JSX.Element {
     return (
         <Form formKey="table" logic={dataWarehouseTableLogic} className="space-y-4" enableFormOnSubmit>
-            <PageHeader
-                title={id === 'new' ? 'New table' : table.name}
-                buttons={
-                    <div className="flex items-center gap-2">
-                        <LemonButton
-                            data-attr="cancel-table"
-                            type="secondary"
-                            loading={tableLoading}
-                            onClick={() => {
-                                if (isEditingTable) {
-                                    editingTable(false)
-                                    loadTable()
-                                } else {
-                                    router.actions.push(urls.dataWarehouse())
-                                }
-                            }}
-                        >
-                            Cancel
-                        </LemonButton>
-                        <LemonButton
-                            type="primary"
-                            data-attr="save-feature-flag"
-                            htmlType="submit"
-                            loading={tableLoading}
-                        >
-                            Save
-                        </LemonButton>
-                    </div>
-                }
-                caption={
-                    <div>
-                        External tables are supported through object storage systems like S3.{' '}
-                        <a
-                            href="https://posthog.com/docs/data/data-warehouse#step-1-creating-a-bucket-in-s3"
-                            target="_blank"
-                        >
-                            Learn how to set up your data
-                        </a>
-                    </div>
-                }
-            />
-            <LemonDivider />
             <div className="flex flex-col gap-2 max-w-160">
                 <Field name="name" label="Table Name">
                     <LemonInput

frontend/src/scenes/data-warehouse/dataWarehouseTableLogic.tsx

@@ -1,8 +1,8 @@
 import { lemonToast } from '@posthog/lemon-ui'
-import { kea, path, props, key, listeners, afterMount, reducers, actions, selectors, connect } from 'kea'
+import { kea, path, props, listeners, reducers, actions, selectors, connect } from 'kea'
 import { forms } from 'kea-forms'
 import { loaders } from 'kea-loaders'
-import { router, urlToAction } from 'kea-router'
+import { router } from 'kea-router'
 import api from 'lib/api'
 import { urls } from 'scenes/urls'
 import { AnyPropertyFilter, Breadcrumb, DataWarehouseTable } from '~/types'
@@ -29,7 +29,6 @@ const NEW_WAREHOUSE_TABLE: DataWarehouseTable = {
 export const dataWarehouseTableLogic = kea<dataWarehouseTableLogicType>([
     path(['scenes', 'data-warehouse', 'tableLogic']),
     props({} as TableLogicProps),
-    key(({ id }) => id),
     connect(() => ({
         actions: [databaseSceneLogic, ['loadDatabase']],
     })),
@@ -122,25 +121,4 @@ export const dataWarehouseTableLogic = kea<dataWarehouseTableLogicType>([
             },
         },
     })),
-    urlToAction(({ actions, props }) => ({
-        [urls.dataWarehouseTable(props.id ?? 'new')]: (_, __, ___, { method }) => {
-            // If the URL was pushed (user clicked on a link), reset the scene's data.
-            // This avoids resetting form fields if you click back/forward.
-            if (method === 'PUSH') {
-                if (props.id) {
-                    actions.loadTable()
-                } else {
-                    actions.resetTable()
-                }
-            }
-        },
-    })),
-    afterMount(async ({ props, actions }) => {
-        // if (props.id !== 'new') {
-        //     await actions.loadTable()
-        // }
-        if (props.id === 'new') {
-            actions.resetTable()
-        }
-    }),
 ])

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

@@ -1,22 +1,26 @@
-import { LemonButton, LemonTag } from '@posthog/lemon-ui'
+import { LemonButtonWithSideAction, LemonTag } from '@posthog/lemon-ui'
 import { PageHeader } from 'lib/components/PageHeader'
 import { SceneExport } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
-import { useValues } from 'kea'
+import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
 import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
 import { ProductKey } from '~/types'
 import { DataWarehouseTablesContainer } from './DataWarehouseTables'
 import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic'
 import { DataWarehousePageTabs, DataWarehouseTab } from '../DataWarehousePageTabs'
+import SourceModal from './SourceModal'
+import { IconSettings } from 'lib/lemon-ui/icons'
 
 export const scene: SceneExport = {
     component: DataWarehouseExternalScene,
     logic: dataWarehouseSceneLogic,
 }
 
 export function DataWarehouseExternalScene(): JSX.Element {
-    const { shouldShowEmptyState, shouldShowProductIntroduction } = useValues(dataWarehouseSceneLogic)
+    const { shouldShowEmptyState, shouldShowProductIntroduction, isSourceModalOpen } =
+        useValues(dataWarehouseSceneLogic)
+    const { toggleSourceModal } = useActions(dataWarehouseSceneLogic)
 
     return (
         <div>
@@ -30,15 +34,19 @@ export function DataWarehouseExternalScene(): JSX.Element {
                     </div>
                 }
                 buttons={
-                    !shouldShowProductIntroduction ? (
-                        <LemonButton
-                            type="primary"
-                            to={urls.dataWarehouseTable('new')}
-                            data-attr="new-data-warehouse-table"
-                        >
-                            New Table
-                        </LemonButton>
-                    ) : undefined
+                    <LemonButtonWithSideAction
+                        type="primary"
+                        sideAction={{
+                            icon: <IconSettings />,
+                            onClick: () => router.actions.push(urls.dataWarehouseSettings()),
+                            'data-attr': 'saved-insights-new-insight-dropdown',
+                        }}
+                        data-attr="new-data-warehouse-easy-link"
+                        key={'new-data-warehouse-easy-link'}
+                        onClick={toggleSourceModal}
+                    >
+                        Link Source
+                    </LemonButtonWithSideAction>
                 }
                 caption={
                     <div>
@@ -59,13 +67,14 @@ export function DataWarehouseExternalScene(): JSX.Element {
                     description={
                         'Bring your production database, revenue data, CRM contacts or any other data into PostHog.'
                     }
-                    action={() => router.actions.push(urls.dataWarehouseTable('new'))}
+                    action={() => toggleSourceModal()}
                     isEmpty={shouldShowEmptyState}
                     docsURL="https://posthog.com/docs/data/data-warehouse"
                     productKey={ProductKey.DATA_WAREHOUSE}
                 />
             )}
             {!shouldShowEmptyState && <DataWarehouseTablesContainer />}
+            <SourceModal isOpen={isSourceModalOpen} onClose={toggleSourceModal} />
         </div>
     )
 }

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

@@ -0,0 +1,119 @@
+import { LemonButton, LemonDivider, LemonInput, LemonModal, LemonModalProps } from '@posthog/lemon-ui'
+import { Form } from 'kea-forms'
+import { ConnectorConfigType, sourceModalLogic } from './sourceModalLogic'
+import { useActions, useValues } from 'kea'
+import { DatawarehouseTableForm } from '../DataWarehouseTable'
+import { Field } from 'lib/forms/Field'
+import stripeLogo from 'public/stripe-logo.svg'
+
+interface SourceModalProps extends LemonModalProps {}
+
+export default function SourceModal(props: SourceModalProps): JSX.Element {
+    const { tableLoading, isAirbyteResourceSubmitting, selectedConnector, isManualLinkFormVisible, connectors } =
+        useValues(sourceModalLogic)
+    const { selectConnector, toggleManualLinkFormVisible, resetAirbyteResource, resetTable } =
+        useActions(sourceModalLogic)
+
+    const MenuButton = (config: ConnectorConfigType): JSX.Element => {
+        const onClick = (): void => {
+            selectConnector(config)
+        }
+
+        return (
+            <LemonButton onClick={onClick} className="w-100" center type="secondary">
+                <img src={stripeLogo} alt={`stripe logo`} height={50} />
+            </LemonButton>
+        )
+    }
+
+    const onClear = (): void => {
+        selectConnector(null)
+        toggleManualLinkFormVisible(false)
+        resetAirbyteResource()
+        resetTable()
+    }
+
+    const onManualLinkClick = (): void => {
+        toggleManualLinkFormVisible(true)
+    }
+
+    const formToShow = (): JSX.Element => {
+        if (selectedConnector) {
+            return (
+                <Form logic={sourceModalLogic} formKey={'airbyteResource'} className="space-y-4" enableFormOnSubmit>
+                    <Field name="account_id" label="Account Id">
+                        <LemonInput className="ph-ignore-input" autoFocus data-attr="account-id" placeholder="acct_" />
+                    </Field>
+                    <Field name="client_secret" label="Client Secret">
+                        <LemonInput
+                            className="ph-ignore-input"
+                            autoFocus
+                            data-attr="client-secret"
+                            placeholder="sklive"
+                        />
+                    </Field>
+                    <LemonDivider className="mt-4" />
+                    <div className="mt-2 flex flex-row justify-end gap-2">
+                        <LemonButton type="secondary" center data-attr="source-modal-back-button" onClick={onClear}>
+                            Back
+                        </LemonButton>
+                        <LemonButton
+                            type="primary"
+                            center
+                            htmlType="submit"
+                            data-attr="source-link"
+                            loading={isAirbyteResourceSubmitting}
+                        >
+                            Link
+                        </LemonButton>
+                    </div>
+                </Form>
+            )
+        }
+
+        if (isManualLinkFormVisible) {
+            return (
+                <div>
+                    <DatawarehouseTableForm />
+                    <LemonDivider className="mt-4" />
+                    <div className="mt-2 flex flex-row justify-end gap-2">
+                        <LemonButton type="secondary" center data-attr="source-modal-back-button" onClick={onClear}>
+                            Back
+                        </LemonButton>
+                        <LemonButton
+                            type="primary"
+                            center
+                            htmlType="submit"
+                            data-attr="source-link"
+                            loading={tableLoading}
+                        >
+                            Link
+                        </LemonButton>
+                    </div>
+                </div>
+            )
+        }
+
+        return (
+            <div className="flex flex-col gap-2">
+                {connectors.map((config, index) => (
+                    <MenuButton key={config.name + '_' + index} {...config} />
+                ))}
+                <LemonButton onClick={onManualLinkClick} className="w-100" center type="secondary">
+                    Manual Link
+                </LemonButton>
+            </div>
+        )
+    }
+
+    return (
+        <LemonModal
+            {...props}
+            onAfterClose={() => onClear()}
+            title="Data Sources"
+            description={selectedConnector ? selectedConnector.caption : null}
+        >
+            {formToShow()}
+        </LemonModal>
+    )
+}

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

@@ -1,4 +1,4 @@
-import { afterMount, connect, kea, path, selectors } from 'kea'
+import { actions, afterMount, connect, kea, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import api, { PaginatedResponse } from 'lib/api'
 import { DataWarehouseTable, ProductKey } from '~/types'
@@ -12,6 +12,17 @@ export const dataWarehouseSceneLogic = kea<dataWarehouseSceneLogicType>([
     connect(() => ({
         values: [userLogic, ['user']],
     })),
+    actions({
+        toggleSourceModal: true,
+    }),
+    reducers({
+        isSourceModalOpen: [
+            false,
+            {
+                toggleSourceModal: (state) => !state,
+            },
+        ],
+    }),
     loaders({
         dataWarehouse: [
             null as PaginatedResponse<DataWarehouseTable> | null,