diff --git a/frontend/src/scenes/appScenes.ts b/frontend/src/scenes/appScenes.ts index c1c1f9b35de01..09b66331d26f2 100644 --- a/frontend/src/scenes/appScenes.ts +++ b/frontend/src/scenes/appScenes.ts @@ -42,6 +42,7 @@ export const appScenes: Record any> = { [Scene.Survey]: () => import('./surveys/Survey'), [Scene.SurveyTemplates]: () => import('./surveys/SurveyTemplates'), [Scene.DataWarehouse]: () => import('./data-warehouse/external/DataWarehouseExternalScene'), + [Scene.DataWarehouseTable]: () => import('./data-warehouse/new_table/DataWarehouseTableScene'), [Scene.DataWarehousePosthog]: () => import('./data-warehouse/posthog/DataWarehousePosthogScene'), [Scene.DataWarehouseExternal]: () => import('./data-warehouse/external/DataWarehouseExternalScene'), [Scene.DataWarehouseSavedQueries]: () => import('./data-warehouse/saved_queries/DataWarehouseSavedQueriesScene'), diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx index bdbef3bfdbc60..4f7133fff9e4e 100644 --- a/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx +++ b/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx @@ -1,4 +1,4 @@ -import { LemonTag, Link, LemonButtonWithSideAction } from '@posthog/lemon-ui' +import { LemonTag, Link, LemonButtonWithSideAction, LemonButton } from '@posthog/lemon-ui' import { PageHeader } from 'lib/components/PageHeader' import { SceneExport } from 'scenes/sceneTypes' import { urls } from 'scenes/urls' @@ -47,10 +47,14 @@ export function DataWarehouseExternalScene(): JSX.Element { }} data-attr="new-data-warehouse-easy-link" key={'new-data-warehouse-easy-link'} - onClick={toggleSourceModal} + onClick={() => toggleSourceModal()} > Link Source + ) : !(shouldShowProductIntroduction || shouldShowEmptyState) ? ( + + New Table + ) : undefined } caption={ @@ -72,7 +76,11 @@ export function DataWarehouseExternalScene(): JSX.Element { description={ 'Bring your production database, revenue data, CRM contacts or any other data into PostHog.' } - action={() => toggleSourceModal()} + action={() => + featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE_EXTERNAL_LINK] + ? toggleSourceModal() + : router.actions.push(urls.dataWarehouseTable()) + } isEmpty={shouldShowEmptyState} docsURL="https://posthog.com/docs/data/data-warehouse" productKey={ProductKey.DATA_WAREHOUSE} diff --git a/frontend/src/scenes/data-warehouse/external/SourceModal.tsx b/frontend/src/scenes/data-warehouse/external/SourceModal.tsx index 0c32f1c788958..2308ec31b3140 100644 --- a/frontend/src/scenes/data-warehouse/external/SourceModal.tsx +++ b/frontend/src/scenes/data-warehouse/external/SourceModal.tsx @@ -2,7 +2,7 @@ import { LemonButton, LemonDivider, LemonInput, LemonModal, LemonModalProps } fr import { Form } from 'kea-forms' import { ConnectorConfigType, sourceModalLogic } from './sourceModalLogic' import { useActions, useValues } from 'kea' -import { DatawarehouseTableForm } from '../DataWarehouseTableForm' +import { DatawarehouseTableForm } from '../new_table/DataWarehouseTableForm' import { Field } from 'lib/forms/Field' import stripeLogo from 'public/stripe-logo.svg' diff --git a/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.tsx b/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.tsx index 0706fa65b707e..238945ac9f5b9 100644 --- a/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.tsx +++ b/frontend/src/scenes/data-warehouse/external/dataWarehouseSceneLogic.tsx @@ -13,13 +13,13 @@ export const dataWarehouseSceneLogic = kea([ values: [userLogic, ['user']], })), actions({ - toggleSourceModal: true, + toggleSourceModal: (isOpen?: boolean) => ({ isOpen }), }), reducers({ isSourceModalOpen: [ false, { - toggleSourceModal: (state) => !state, + toggleSourceModal: (state, { isOpen }) => (isOpen != undefined ? isOpen : !state), }, ], }), diff --git a/frontend/src/scenes/data-warehouse/external/sourceModalLogic.ts b/frontend/src/scenes/data-warehouse/external/sourceModalLogic.ts index a902950180adc..398db7f8247a3 100644 --- a/frontend/src/scenes/data-warehouse/external/sourceModalLogic.ts +++ b/frontend/src/scenes/data-warehouse/external/sourceModalLogic.ts @@ -5,7 +5,7 @@ import { forms } from 'kea-forms' import { ExternalDataStripeSourceCreatePayload } from '~/types' import api from 'lib/api' import { lemonToast } from '@posthog/lemon-ui' -import { dataWarehouseTableLogic } from '../dataWarehouseTableLogic' +import { dataWarehouseTableLogic } from '../new_table/dataWarehouseTableLogic' import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic' import { router } from 'kea-router' import { urls } from 'scenes/urls' diff --git a/frontend/src/scenes/data-warehouse/DataWarehouseTableForm.tsx b/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableForm.tsx similarity index 100% rename from frontend/src/scenes/data-warehouse/DataWarehouseTableForm.tsx rename to frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableForm.tsx diff --git a/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableScene.tsx b/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableScene.tsx new file mode 100644 index 0000000000000..e7c2fbf15e94a --- /dev/null +++ b/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableScene.tsx @@ -0,0 +1,65 @@ +import { dataWarehouseTableLogic } from './dataWarehouseTableLogic' +import { LemonButton, Link } from '@posthog/lemon-ui' +import { SceneExport } from 'scenes/sceneTypes' +import { PageHeader } from 'lib/components/PageHeader' +import { useActions, useValues } from 'kea' +import { router } from 'kea-router' +import { urls } from 'scenes/urls' +import { DatawarehouseTableForm } from './DataWarehouseTableForm' + +export const scene: SceneExport = { + component: DataWarehouseTable, + logic: dataWarehouseTableLogic, +} +export function DataWarehouseTable(): JSX.Element { + const { isEditingTable, tableLoading, table } = useValues(dataWarehouseTableLogic) + const { editingTable, loadTable, createTable } = useActions(dataWarehouseTableLogic) + return ( + <> + + { + if (isEditingTable) { + editingTable(false) + loadTable() + } else { + router.actions.push(urls.dataWarehouse()) + } + }} + > + Cancel + + { + createTable(table) + }} + loading={tableLoading} + > + Save + + + } + caption={ +
+ External tables are supported through object storage systems like S3.{' '} + + Learn how to set up your data + +
+ } + /> + + + ) +} diff --git a/frontend/src/scenes/data-warehouse/dataWarehouseTableLogic.tsx b/frontend/src/scenes/data-warehouse/new_table/dataWarehouseTableLogic.tsx similarity index 92% rename from frontend/src/scenes/data-warehouse/dataWarehouseTableLogic.tsx rename to frontend/src/scenes/data-warehouse/new_table/dataWarehouseTableLogic.tsx index a3cacb9edc810..dfb07fcab6df3 100644 --- a/frontend/src/scenes/data-warehouse/dataWarehouseTableLogic.tsx +++ b/frontend/src/scenes/data-warehouse/new_table/dataWarehouseTableLogic.tsx @@ -9,7 +9,7 @@ import { AnyPropertyFilter, Breadcrumb, DataWarehouseTable } from '~/types' import { DataTableNode } from '~/queries/schema' import { databaseSceneLogic } from 'scenes/data-management/database/databaseSceneLogic' import type { dataWarehouseTableLogicType } from './dataWarehouseTableLogicType' -import { dataWarehouseSceneLogic } from './external/dataWarehouseSceneLogic' +import { dataWarehouseSceneLogic } from '../external/dataWarehouseSceneLogic' export interface TableLogicProps { id: string | 'new' @@ -71,7 +71,7 @@ export const dataWarehouseTableLogic = kea([ lemonToast.success(<>Table {table.name} created) actions.loadDatabase() actions.loadDataWarehouse() - actions.toggleSourceModal() + actions.toggleSourceModal(false) router.actions.replace(urls.dataWarehouse()) }, updateTableSuccess: async ({ table }) => { @@ -96,13 +96,15 @@ export const dataWarehouseTableLogic = kea([ }), selectors({ breadcrumbs: [ - (s) => [s.table], - (table: DataWarehouseTable): Breadcrumb[] => [ + () => [], + (): Breadcrumb[] => [ { - name: 'Tables', - path: urls.dataWarehouse(), + name: `Data Warehouse`, + path: urls.dataWarehouseExternal(), + }, + { + name: 'New', }, - ...(table?.name ? [{ name: table.name }] : []), ], ], }), diff --git a/frontend/src/scenes/data-warehouse/settings/DataWarehouseSettingsScene.tsx b/frontend/src/scenes/data-warehouse/settings/DataWarehouseSettingsScene.tsx index 93d475512c20d..575ac0d373ee8 100644 --- a/frontend/src/scenes/data-warehouse/settings/DataWarehouseSettingsScene.tsx +++ b/frontend/src/scenes/data-warehouse/settings/DataWarehouseSettingsScene.tsx @@ -46,7 +46,7 @@ export function DataWarehouseSettingsScene(): JSX.Element { type="primary" data-attr="new-data-warehouse-easy-link" key={'new-data-warehouse-easy-link'} - onClick={toggleSourceModal} + onClick={() => toggleSourceModal()} > Link Source diff --git a/frontend/src/scenes/sceneLogic.ts b/frontend/src/scenes/sceneLogic.ts index 8068f4f053ac2..039e4d9cf8cfd 100644 --- a/frontend/src/scenes/sceneLogic.ts +++ b/frontend/src/scenes/sceneLogic.ts @@ -39,6 +39,7 @@ const sceneNavAlias: Partial> = { [Scene.DataWarehouseExternal]: Scene.DataWarehouse, [Scene.DataWarehouseSavedQueries]: Scene.DataWarehouse, [Scene.DataWarehouseSettings]: Scene.DataWarehouse, + [Scene.DataWarehouseTable]: Scene.DataWarehouse, [Scene.AppMetrics]: Scene.Apps, [Scene.ReplaySingle]: Scene.Replay, [Scene.ReplayPlaylist]: Scene.ReplayPlaylist, diff --git a/frontend/src/scenes/sceneTypes.ts b/frontend/src/scenes/sceneTypes.ts index dc17598a8ee81..523717aad0ffa 100644 --- a/frontend/src/scenes/sceneTypes.ts +++ b/frontend/src/scenes/sceneTypes.ts @@ -48,6 +48,7 @@ export enum Scene { DataWarehousePosthog = 'DataWarehousePosthog', DataWarehouseExternal = 'DataWarehouseExternal', DataWarehouseSavedQueries = 'DataWarehouseSavedQueries', + DataWarehouseTable = 'DataWarehouseTable', DataWarehouseSettings = 'DataWarehouseSettings', OrganizationSettings = 'OrganizationSettings', OrganizationCreateFirst = 'OrganizationCreate', diff --git a/frontend/src/scenes/scenes.ts b/frontend/src/scenes/scenes.ts index 3d3b3baa214db..e56a65e708e36 100644 --- a/frontend/src/scenes/scenes.ts +++ b/frontend/src/scenes/scenes.ts @@ -191,6 +191,10 @@ export const sceneConfigurations: Partial> = { projectBased: true, name: 'Data Warehouse Settings', }, + [Scene.DataWarehouseTable]: { + projectBased: true, + name: 'Data Warehouse Table', + }, [Scene.EarlyAccessFeatures]: { projectBased: true, }, @@ -455,6 +459,7 @@ export const routes: Record = { [urls.survey(':id')]: Scene.Survey, [urls.surveyTemplates()]: Scene.SurveyTemplates, [urls.dataWarehouse()]: Scene.DataWarehouse, + [urls.dataWarehouseTable()]: Scene.DataWarehouseTable, [urls.dataWarehousePosthog()]: Scene.DataWarehousePosthog, [urls.dataWarehouseExternal()]: Scene.DataWarehouseExternal, [urls.dataWarehouseSavedQueries()]: Scene.DataWarehouseSavedQueries, diff --git a/frontend/src/scenes/urls.ts b/frontend/src/scenes/urls.ts index 3e6823c7fa1b6..1d087c0100c3c 100644 --- a/frontend/src/scenes/urls.ts +++ b/frontend/src/scenes/urls.ts @@ -112,6 +112,7 @@ export const urls = { survey: (id: ':id' | 'new' | string): string => `/surveys/${id}`, surveyTemplates: (): string => '/survey_templates', dataWarehouse: (): string => '/data-warehouse', + dataWarehouseTable: (): string => `/data-warehouse/new`, dataWarehousePosthog: (): string => '/data-warehouse/posthog', dataWarehouseExternal: (): string => '/data-warehouse/external', dataWarehouseSavedQueries: (): string => '/data-warehouse/views',