chore(data-warehouse): restore form (#18429)

* restore form * button feature flag * button logic * Update UI snapshots for `chromium` (1) * types --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Nov 6, 2023 · df16d5b · df16d5b
1 parent 21ba4a2
commit df16d5b
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 15 deletions.
diff --git a/frontend/src/scenes/appScenes.ts b/frontend/src/scenes/appScenes.ts
@@ -42,6 +42,7 @@ export const appScenes: Record<Scene, () => 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
@@ -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
                         </LemonButtonWithSideAction>
+                    ) : !(shouldShowProductIntroduction || shouldShowEmptyState) ? (
+                        <LemonButton type="primary" to={urls.dataWarehouseTable()} data-attr="new-data-warehouse-table">
+                            New Table
+                        </LemonButton>
                     ) : 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
@@ -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
@@ -13,13 +13,13 @@ export const dataWarehouseSceneLogic = kea<dataWarehouseSceneLogicType>([
         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
@@ -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/...data-warehouse/DataWarehouseTableForm.tsx → ...ouse/new_table/DataWarehouseTableForm.tsx b/...data-warehouse/DataWarehouseTableForm.tsx → ...ouse/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
@@ -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 (
+        <>
+            <PageHeader
+                title={'New table'}
+                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-data-warehouse-table"
+                            onClick={() => {
+                                createTable(table)
+                            }}
+                            loading={tableLoading}
+                        >
+                            Save
+                        </LemonButton>
+                    </div>
+                }
+                caption={
+                    <div>
+                        External tables are supported through object storage systems like S3.{' '}
+                        <Link
+                            to="https://posthog.com/docs/data/data-warehouse#step-1-creating-a-bucket-in-s3"
+                            target="_blank"
+                        >
+                            Learn how to set up your data
+                        </Link>
+                    </div>
+                }
+            />
+            <DatawarehouseTableForm />
+        </>
+    )
+}
diff --git a/...ata-warehouse/dataWarehouseTableLogic.tsx → ...use/new_table/dataWarehouseTableLogic.tsx b/...ata-warehouse/dataWarehouseTableLogic.tsx → ...use/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<dataWarehouseTableLogicType>([
             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<dataWarehouseTableLogicType>([
     }),
     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
@@ -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
                         </LemonButton>

diff --git a/frontend/src/scenes/sceneLogic.ts b/frontend/src/scenes/sceneLogic.ts
@@ -39,6 +39,7 @@ const sceneNavAlias: Partial<Record<Scene, Scene>> = {
     [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
@@ -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
@@ -191,6 +191,10 @@ export const sceneConfigurations: Partial<Record<Scene, SceneConfig>> = {
         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<string, Scene> = {
     [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
@@ -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',