chore(data-warehouse): refactor wizard (#21316)

* Updated the source sync flow to allow users to select the initial tables to sync * change from modal to scene * types * add settings --------- Co-authored-by: Tom Owers <[email protected]>
PostHog · Apr 4, 2024 · bb151e6 · bb151e6
1 parent d39849e
commit bb151e6
Show file tree

Hide file tree

Showing 13 changed files with 84 additions and 140 deletions.
diff --git a/frontend/src/scenes/appScenes.ts b/frontend/src/scenes/appScenes.ts
@@ -38,7 +38,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.DataWarehouseTable]: () => import('./data-warehouse/new/NewSourceWizard'),
     [Scene.DataWarehouseExternal]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),
     [Scene.DataWarehouseSettings]: () => import('./data-warehouse/settings/DataWarehouseSettingsScene'),
     [Scene.DataWarehouseRedirect]: () => import('./data-warehouse/redirect/DataWarehouseRedirectScene'),

diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx
@@ -32,7 +32,7 @@ const TABS_TO_CONTENT = {
 
 export function DataWarehouseExternalScene(): JSX.Element {
     const { activeSceneTab } = useValues(dataWarehouseSceneLogic)
-    const { toggleSourceModal, setSceneTab } = useActions(dataWarehouseSceneLogic)
+    const { setSceneTab } = useActions(dataWarehouseSceneLogic)
     const { featureFlags } = useValues(featureFlagLogic)
     const { toggleNewJoinModal } = useActions(viewLinkLogic)
 
@@ -57,7 +57,7 @@ export function DataWarehouseExternalScene(): JSX.Element {
                                     type="primary"
                                     data-attr="new-data-warehouse-easy-link"
                                     key="new-data-warehouse-easy-link"
-                                    onClick={() => toggleSourceModal()}
+                                    to={urls.dataWarehouseTable()}
                                 >
                                     Link Source
                                 </LemonButton>

diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx
@@ -4,23 +4,22 @@ import { useActions, useValues } from 'kea'
 import { DatabaseTableTree, TreeItem } from 'lib/components/DatabaseTableTree/DatabaseTableTree'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { urls } from 'scenes/urls'
 
 import { ViewLinkModal } from '../ViewLinkModal'
 import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic'
-import SourceModal from './SourceModal'
 import { TableData } from './TableData'
 
 export const DataWarehouseTables = (): JSX.Element => {
     const {
-        isSourceModalOpen,
         externalTablesBySourceType,
         dataWarehouseLoading,
         posthogTables,
         savedQueriesFormatted,
         selectedRow,
         dataWarehouseSavedQueriesLoading,
     } = useValues(dataWarehouseSceneLogic)
-    const { toggleSourceModal, selectRow } = useActions(dataWarehouseSceneLogic)
+    const { selectRow } = useActions(dataWarehouseSceneLogic)
     const { featureFlags } = useValues(featureFlagLogic)
 
     const treeItems = (): TreeItem[] => {
@@ -36,14 +35,7 @@ export const DataWarehouseTables = (): JSX.Element => {
                 })),
                 emptyLabel: (
                     <span className="text-muted">
-                        No tables found.{' '}
-                        <Link
-                            onClick={() => {
-                                toggleSourceModal()
-                            }}
-                        >
-                            Link source
-                        </Link>
+                        No tables found. <Link to={urls.dataWarehouseTable()}>Link source</Link>
                     </span>
                 ),
                 isLoading: dataWarehouseLoading,
@@ -80,7 +72,6 @@ export const DataWarehouseTables = (): JSX.Element => {
                 </div>
                 <TableData />
             </div>
-            <SourceModal isOpen={isSourceModalOpen} onClose={() => toggleSourceModal(false)} />
             <ViewLinkModal />
         </>
     )

diff --git a/frontend/src/scenes/data-warehouse/external/forms/PostgresSchemaForm.tsx b/frontend/src/scenes/data-warehouse/external/forms/PostgresSchemaForm.tsx
@@ -1,13 +1,13 @@
 import { LemonSwitch, LemonTable } from '@posthog/lemon-ui'
 import { useActions, useMountedLogic, useValues } from 'kea'
 
-import { sourceModalLogic } from '../sourceModalLogic'
+import { sourceWizardLogic } from '../../new/sourceWizardLogic'
 import { sourceFormLogic } from './sourceFormLogic'
 
 export default function PostgresSchemaForm(): JSX.Element {
     useMountedLogic(sourceFormLogic({ sourceType: 'Postgres' }))
-    const { selectSchema } = useActions(sourceModalLogic)
-    const { databaseSchema } = useValues(sourceModalLogic)
+    const { selectSchema } = useActions(sourceWizardLogic)
+    const { databaseSchema } = useValues(sourceWizardLogic)
 
     return (
         <div className="flex flex-col gap-2">

diff --git a/frontend/src/scenes/data-warehouse/external/forms/SourceForm.tsx b/frontend/src/scenes/data-warehouse/external/forms/SourceForm.tsx
@@ -4,7 +4,7 @@ import { LemonField } from 'lib/lemon-ui/LemonField'
 
 import { ExternalDataSourceType } from '~/types'
 
-import { SOURCE_DETAILS } from '../sourceModalLogic'
+import { SOURCE_DETAILS } from '../../new/sourceWizardLogic'
 import { sourceFormLogic } from './sourceFormLogic'
 
 interface SourceFormProps {

diff --git a/frontend/src/scenes/data-warehouse/external/forms/sourceFormLogic.ts b/frontend/src/scenes/data-warehouse/external/forms/sourceFormLogic.ts
@@ -7,7 +7,7 @@ import { urls } from 'scenes/urls'
 
 import { ExternalDataSourceCreatePayload, ExternalDataSourceType } from '~/types'
 
-import { getHubspotRedirectUri, sourceModalLogic } from '../sourceModalLogic'
+import { getHubspotRedirectUri, sourceWizardLogic } from '../../new/sourceWizardLogic'
 import type { sourceFormLogicType } from './sourceFormLogicType'
 
 export interface SourceFormProps {
@@ -83,7 +83,7 @@ export const sourceFormLogic = kea<sourceFormLogicType>([
     props({} as SourceFormProps),
     connect({
         actions: [
-            sourceModalLogic,
+            sourceWizardLogic,
             ['setDatabaseSchemas', 'onBack', 'onNext', 'selectConnector', 'toggleSourceModal', 'loadSources'],
         ],
     }),

diff --git a/...ouse/new_table/DataWarehouseTableForm.tsx → ...-warehouse/new/DataWarehouseTableForm.tsx b/...ouse/new_table/DataWarehouseTableForm.tsx → ...-warehouse/new/DataWarehouseTableForm.tsx
diff --git a/...s/data-warehouse/external/SourceModal.tsx → ...es/data-warehouse/new/NewSourceWizard.tsx b/...s/data-warehouse/external/SourceModal.tsx → ...es/data-warehouse/new/NewSourceWizard.tsx
@@ -1,24 +1,28 @@
-import { LemonButton, LemonModal, LemonModalProps } from '@posthog/lemon-ui'
+import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { PageHeader } from 'lib/components/PageHeader'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import hubspotLogo from 'public/hubspot-logo.svg'
 import postgresLogo from 'public/postgres-logo.svg'
 import stripeLogo from 'public/stripe-logo.svg'
 import zendeskLogo from 'public/zendesk-logo.png'
+import { SceneExport } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
 
-import { DatawarehouseTableForm } from '../new_table/DataWarehouseTableForm'
-import PostgresSchemaForm from './forms/PostgresSchemaForm'
-import SourceForm from './forms/SourceForm'
-import { SourceConfig } from './sourceModalLogic'
-import { sourceModalLogic } from './sourceModalLogic'
+import PostgresSchemaForm from '../external/forms/PostgresSchemaForm'
+import SourceForm from '../external/forms/SourceForm'
+import { DatawarehouseTableForm } from '../new/DataWarehouseTableForm'
+import { SourceConfig, sourceWizardLogic } from './sourceWizardLogic'
 
-interface SourceModalProps extends LemonModalProps {}
-
-export default function SourceModal(props: SourceModalProps): JSX.Element {
-    const { modalTitle, modalCaption } = useValues(sourceModalLogic)
-    const { onClear, onBack, onSubmit } = useActions(sourceModalLogic)
-    const { currentStep } = useValues(sourceModalLogic)
+export const scene: SceneExport = {
+    component: NewSourceWizard,
+    logic: sourceWizardLogic,
+}
+export function NewSourceWizard(): JSX.Element {
+    const { modalTitle, modalCaption } = useValues(sourceWizardLogic)
+    const { onBack, onSubmit } = useActions(sourceWizardLogic)
+    const { currentStep } = useValues(sourceWizardLogic)
 
     const footer = (): JSX.Element | null => {
         if (currentStep === 1) {
@@ -38,18 +42,30 @@ export default function SourceModal(props: SourceModalProps): JSX.Element {
     }
 
     return (
-        <LemonModal
-            {...props}
-            width={600}
-            onAfterClose={() => onClear()}
-            title={modalTitle}
-            description={modalCaption}
-            footer={footer()}
-        >
-            <FirstStep />
-            <SecondStep />
-            <ThirdStep />
-        </LemonModal>
+        <>
+            <PageHeader
+                buttons={
+                    <>
+                        <LemonButton
+                            type="secondary"
+                            center
+                            data-attr="source-form-cancel-button"
+                            to={urls.dataWarehouse()}
+                        >
+                            Cancel
+                        </LemonButton>
+                    </>
+                }
+            />
+            <>
+                <h3>{modalTitle}</h3>
+                <p>{modalCaption}</p>
+                <FirstStep />
+                <SecondStep />
+                <ThirdStep />
+                {footer()}
+            </>
+        </>
     )
 }
 
@@ -59,7 +75,7 @@ interface ModalPageProps {
 }
 
 function ModalPage({ children, page }: ModalPageProps): JSX.Element {
-    const { currentStep } = useValues(sourceModalLogic)
+    const { currentStep } = useValues(sourceWizardLogic)
 
     if (currentStep !== page) {
         return <></>
@@ -69,8 +85,8 @@ function ModalPage({ children, page }: ModalPageProps): JSX.Element {
 }
 
 function FirstStep(): JSX.Element {
-    const { connectors, addToHubspotButtonUrl } = useValues(sourceModalLogic)
-    const { selectConnector, toggleManualLinkFormVisible, onNext } = useActions(sourceModalLogic)
+    const { connectors, addToHubspotButtonUrl } = useValues(sourceWizardLogic)
+    const { selectConnector, toggleManualLinkFormVisible, onNext } = useActions(sourceWizardLogic)
     const { featureFlags } = useValues(featureFlagLogic)
 
     const MenuButton = (config: SourceConfig): JSX.Element => {
@@ -135,7 +151,7 @@ function FirstStep(): JSX.Element {
 }
 
 function SecondStep(): JSX.Element {
-    const { selectedConnector } = useValues(sourceModalLogic)
+    const { selectedConnector } = useValues(sourceWizardLogic)
 
     return (
         <ModalPage page={2}>

diff --git a/...use/new_table/dataWarehouseTableLogic.tsx → ...warehouse/new/dataWarehouseTableLogic.tsx b/...use/new_table/dataWarehouseTableLogic.tsx → ...warehouse/new/dataWarehouseTableLogic.tsx
@@ -1,5 +1,5 @@
 import { lemonToast } from '@posthog/lemon-ui'
-import { actions, connect, kea, listeners, path, props, reducers, selectors } from 'kea'
+import { actions, connect, kea, listeners, path, props, reducers } from 'kea'
 import { forms } from 'kea-forms'
 import { loaders } from 'kea-loaders'
 import { router } from 'kea-router'
@@ -8,7 +8,7 @@ import { databaseTableListLogic } from 'scenes/data-management/database/database
 import { urls } from 'scenes/urls'
 
 import { DataTableNode } from '~/queries/schema'
-import { AnyPropertyFilter, Breadcrumb, DataWarehouseTable } from '~/types'
+import { AnyPropertyFilter, DataWarehouseTable } from '~/types'
 
 import { dataWarehouseSceneLogic } from '../external/dataWarehouseSceneLogic'
 import type { dataWarehouseTableLogicType } from './dataWarehouseTableLogicType'
@@ -97,17 +97,6 @@ export const dataWarehouseTableLogic = kea<dataWarehouseTableLogicType>([
             },
         ],
     }),
-    selectors({
-        breadcrumbs: [
-            () => [],
-            (): Breadcrumb[] => [
-                {
-                    key: 'new',
-                    name: 'New',
-                },
-            ],
-        ],
-    }),
     forms(({ actions, props }) => ({
         table: {
             defaults: { ...NEW_WAREHOUSE_TABLE } as DataWarehouseTable,

diff --git a/...a-warehouse/external/sourceModalLogic.tsx → .../data-warehouse/new/sourceWizardLogic.tsx b/...a-warehouse/external/sourceModalLogic.tsx → .../data-warehouse/new/sourceWizardLogic.tsx
@@ -1,14 +1,16 @@
 import { Link } from '@posthog/lemon-ui'
 import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { Scene } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
 
-import { ExternalDataSourceSyncSchema, ExternalDataSourceType } from '~/types'
+import { Breadcrumb, ExternalDataSourceSyncSchema, ExternalDataSourceType } from '~/types'
 
-import { dataWarehouseTableLogic } from '../new_table/dataWarehouseTableLogic'
+import { dataWarehouseSceneLogic } from '../external/dataWarehouseSceneLogic'
+import { sourceFormLogic } from '../external/forms/sourceFormLogic'
 import { dataWarehouseSettingsLogic } from '../settings/dataWarehouseSettingsLogic'
-import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic'
-import { sourceFormLogic } from './forms/sourceFormLogic'
-import type { sourceModalLogicType } from './sourceModalLogicType'
+import { dataWarehouseTableLogic } from './dataWarehouseTableLogic'
+import type { sourceWizardLogicType } from './sourceWizardLogicType'
 
 export const getHubspotRedirectUri = (): string => `${window.location.origin}/data-warehouse/hubspot/redirect`
 
@@ -153,8 +155,8 @@ export const SOURCE_DETAILS: Record<string, SourceConfig> = {
     },
 }
 
-export const sourceModalLogic = kea<sourceModalLogicType>([
-    path(['scenes', 'data-warehouse', 'external', 'sourceModalLogic']),
+export const sourceWizardLogic = kea<sourceWizardLogicType>([
+    path(['scenes', 'data-warehouse', 'external', 'sourceWizardLogic']),
     actions({
         selectConnector: (connector: SourceConfig | null) => ({ connector }),
         toggleManualLinkFormVisible: (visible: boolean) => ({ visible }),
@@ -220,6 +222,17 @@ export const sourceModalLogic = kea<sourceModalLogicType>([
         ],
     }),
     selectors({
+        breadcrumbs: [
+            () => [],
+            (): Breadcrumb[] => [
+                {
+                    key: Scene.DataWarehouse,
+                    name: 'Data Warehouse',
+                    path: urls.dataWarehouse(),
+                },
+                { key: [Scene.DataWarehouse, 'New'], name: 'New' },
+            ],
+        ],
         showFooter: [
             (s) => [s.selectedConnector, s.isManualLinkFormVisible],
             (selectedConnector, isManualLinkFormVisible) => selectedConnector || isManualLinkFormVisible,

diff --git a/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableScene.tsx b/frontend/src/scenes/data-warehouse/new_table/DataWarehouseTableScene.tsx