chore(data-warehouse): ui fixes for data warehouse linking fields (#2…

…2861) * sentence casing and lemon tag * add table * split out tables and clean up logic * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * update logo * Update UI snapshots for `chromium` (2) * adjust link flow * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Tom Owers <[email protected]>
PostHog · Jun 12, 2024 · 803a009 · 803a009
1 parent 78ed4f2
commit 803a009
Show file tree

Hide file tree

Showing 11 changed files with 196 additions and 124 deletions.
diff --git a/frontend/public/cloudflare-logo.png b/frontend/public/cloudflare-logo.png
diff --git a/frontend/public/cloudflare-logo.svg b/frontend/public/cloudflare-logo.svg
diff --git a/frontend/src/scenes/data-management/database/DatabaseTable.tsx b/frontend/src/scenes/data-management/database/DatabaseTable.tsx
@@ -140,7 +140,7 @@ export function DatabaseTable({ table, tables, inEditSchemaMode, schemaOnChange
                             )
                         }
 
-                        const tagType: LemonTagType = schema_valid ? 'success' : 'danger'
+                        const tagType: LemonTagType = schema_valid ? 'default' : 'danger'
 
                         return (
                             <LemonTag type={tagType} className="uppercase">

diff --git a/frontend/src/scenes/data-warehouse/external/TableData.tsx b/frontend/src/scenes/data-warehouse/external/TableData.tsx
@@ -151,7 +151,9 @@ export function TableData(): JSX.Element {
                                         })
                                     )}
                                 >
-                                    <LemonButton type="primary">Query</LemonButton>
+                                    <LemonButton type="primary" status="alt">
+                                        Query
+                                    </LemonButton>
                                 </Link>
                                 {table.type === 'view' && (
                                     <LemonButton type="primary" onClick={() => setIsEditingSavedQuery(true)}>

diff --git a/frontend/src/scenes/data-warehouse/external/forms/SyncProgressStep.tsx b/frontend/src/scenes/data-warehouse/external/forms/SyncProgressStep.tsx
@@ -1,12 +1,15 @@
-import { LemonTable, LemonTag, LemonTagType } from '@posthog/lemon-ui'
-import { useValues } from 'kea'
+import { LemonButton, LemonTable, LemonTag, LemonTagType } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
 import { sourceWizardLogic } from 'scenes/data-warehouse/new/sourceWizardLogic'
 import { dataWarehouseSettingsLogic } from 'scenes/data-warehouse/settings/dataWarehouseSettingsLogic'
+import { urls } from 'scenes/urls'
 
+import { DataTableNode, NodeKind } from '~/queries/schema'
 import { ExternalDataSourceSchema } from '~/types'
 
 export const SyncProgressStep = (): JSX.Element => {
     const { sourceId } = useValues(sourceWizardLogic)
+    const { cancelWizard } = useActions(sourceWizardLogic)
     const { dataWarehouseSources, dataWarehouseSourcesLoading } = useValues(dataWarehouseSettingsLogic)
 
     const source = dataWarehouseSources?.results.find((n) => n.id === sourceId)
@@ -65,6 +68,41 @@ export const SyncProgressStep = (): JSX.Element => {
                                 return <LemonTag type={tagType}>{status}</LemonTag>
                             },
                         },
+                        {
+                            key: 'actions',
+                            width: 0,
+                            render: function RenderStatus(_, schema) {
+                                if (schema.table && schema.status === 'Completed') {
+                                    const query: DataTableNode = {
+                                        kind: NodeKind.DataTableNode,
+                                        full: true,
+                                        source: {
+                                            kind: NodeKind.HogQLQuery,
+                                            query: `SELECT ${schema.table.columns
+                                                .filter(
+                                                    ({ table, fields, chain, schema_valid }) =>
+                                                        !table && !fields && !chain && schema_valid
+                                                )
+                                                .map(({ name }) => name)} FROM ${
+                                                schema.table.name === 'numbers' ? 'numbers(0, 10)' : schema.table.name
+                                            } LIMIT 100`,
+                                        },
+                                    }
+                                    return (
+                                        <LemonButton
+                                            className="my-1"
+                                            type="primary"
+                                            onClick={() => cancelWizard()}
+                                            to={urls.insightNew(undefined, undefined, JSON.stringify(query))}
+                                        >
+                                            Query
+                                        </LemonButton>
+                                    )
+                                }
+
+                                return ''
+                            },
+                        },
                     ]}
                 />
             </div>

diff --git a/frontend/src/scenes/data-warehouse/new/DataWarehouseTableForm.tsx b/frontend/src/scenes/data-warehouse/new/DataWarehouseTableForm.tsx
@@ -3,11 +3,13 @@ import { useValues } from 'kea'
 import { Form } from 'kea-forms'
 import { LemonField } from 'lib/lemon-ui/LemonField'
 
+import { ManualLinkSourceType } from '~/types'
+
 import { dataWarehouseTableLogic } from './dataWarehouseTableLogic'
-import { ManualLinkProvider, sourceWizardLogic } from './sourceWizardLogic'
+import { sourceWizardLogic } from './sourceWizardLogic'
 
 const ProviderMappings: Record<
-    ManualLinkProvider,
+    ManualLinkSourceType,
     {
         fileUrlPatternPlaceholder: string
         accessKeyPlaceholder: string

diff --git a/frontend/src/scenes/data-warehouse/new/ManualLinkProvider.tsx b/frontend/src/scenes/data-warehouse/new/ManualLinkProvider.tsx
diff --git a/frontend/src/scenes/data-warehouse/new/NewSourceWizard.tsx b/frontend/src/scenes/data-warehouse/new/NewSourceWizard.tsx
@@ -1,10 +1,10 @@
-import { LemonButton, LemonTable } from '@posthog/lemon-ui'
+import { LemonButton, LemonTable, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { PageHeader } from 'lib/components/PageHeader'
 import { useCallback } from 'react'
 import { SceneExport } from 'scenes/sceneTypes'
 
-import { SourceConfig } from '~/types'
+import { ManualLinkSourceType, SourceConfig } from '~/types'
 
 import { DataWarehouseBetaNotice } from '../DataWarehouseBetaNotice'
 import PostgresSchemaForm from '../external/forms/PostgresSchemaForm'
@@ -13,7 +13,6 @@ import { SyncProgressStep } from '../external/forms/SyncProgressStep'
 import { DatawarehouseTableForm } from '../new/DataWarehouseTableForm'
 import { RenderDataWarehouseSourceIcon } from '../settings/DataWarehouseSourcesTable'
 import { dataWarehouseTableLogic } from './dataWarehouseTableLogic'
-import { ManualLinkProvider } from './ManualLinkProvider'
 import { sourceWizardLogic } from './sourceWizardLogic'
 
 export const scene: SceneExport = {
@@ -43,11 +42,6 @@ export function NewSourceWizard(): JSX.Element {
                 >
                     Back
                 </LemonButton>
-                {showSkipButton && (
-                    <LemonButton type="primary" center onClick={() => closeWizard()} data-attr="source-link">
-                        Skip
-                    </LemonButton>
-                )}
                 <LemonButton
                     loading={isLoading || manualLinkIsLoading}
                     disabledReason={!canGoNext && 'You cant click next yet'}
@@ -108,22 +102,32 @@ function ModalPage({ children, page }: ModalPageProps): JSX.Element {
 }
 
 function FirstStep(): JSX.Element {
-    const { connectors, addToHubspotButtonUrl } = useValues(sourceWizardLogic)
-    const { selectConnector, toggleManualLinkFormVisible, onNext } = useActions(sourceWizardLogic)
+    const { connectors, manualConnectors, addToHubspotButtonUrl } = useValues(sourceWizardLogic)
+    const { selectConnector, toggleManualLinkFormVisible, onNext, setManualLinkingProvider } =
+        useActions(sourceWizardLogic)
 
     const onClick = (sourceConfig: SourceConfig): void => {
-        if (sourceConfig.name == 'Manual') {
-            toggleManualLinkFormVisible(true)
-        } else if (sourceConfig.name == 'Hubspot') {
+        if (sourceConfig.name == 'Hubspot') {
             window.open(addToHubspotButtonUrl() as string)
         } else {
             selectConnector(sourceConfig)
         }
         onNext()
     }
 
+    const onManualLinkClick = (manulLinkSource: ManualLinkSourceType): void => {
+        toggleManualLinkFormVisible(true)
+        setManualLinkingProvider(manulLinkSource)
+    }
+
     return (
         <ModalPage page={1}>
+            <h2 className="mt-4">Managed by PostHog</h2>
+
+            <span>
+                Data will be synced to PostHog and regularly refreshed.{' '}
+                <Link to="https://posthog.com/docs/data-warehouse/setup#stripe">Learn more</Link>
+            </span>
             <LemonTable
                 dataSource={connectors}
                 loading={false}
@@ -158,6 +162,51 @@ function FirstStep(): JSX.Element {
                     },
                 ]}
             />
+
+            <h2 className="mt-4">Self Managed</h2>
+
+            <span>
+                Data will be queried directly from your data source that you manage.{' '}
+                <Link to="https://posthog.com/docs/data-warehouse/setup#linking-a-custom-source">Learn more</Link>
+            </span>
+            <LemonTable
+                dataSource={manualConnectors}
+                loading={false}
+                disableTableWhileLoading={false}
+                columns={[
+                    {
+                        title: 'Source',
+                        width: 0,
+                        render: function RenderAppInfo(_, sourceConfig) {
+                            return <RenderDataWarehouseSourceIcon type={sourceConfig.type} />
+                        },
+                    },
+                    {
+                        title: 'Name',
+                        key: 'name',
+                        render: function RenderName(_, sourceConfig) {
+                            return <span className="font-semibold text-sm gap-1">{sourceConfig.name}</span>
+                        },
+                    },
+                    {
+                        key: 'actions',
+                        width: 0,
+                        render: function RenderActions(_, sourceConfig) {
+                            return (
+                                <div className="flex flex-row justify-end">
+                                    <LemonButton
+                                        onClick={() => onManualLinkClick(sourceConfig.type)}
+                                        className="my-2"
+                                        type="primary"
+                                    >
+                                        Link
+                                    </LemonButton>
+                                </div>
+                            )
+                        },
+                    },
+                ]}
+            />
         </ModalPage>
     )
 }
@@ -167,16 +216,16 @@ function SecondStep(): JSX.Element {
 
     return (
         <ModalPage page={2}>
-            {selectedConnector ? <SourceForm sourceConfig={selectedConnector} /> : <ManualLinkProvider />}
+            {selectedConnector ? <SourceForm sourceConfig={selectedConnector} /> : <DatawarehouseTableForm />}
         </ModalPage>
     )
 }
 
 function ThirdStep(): JSX.Element {
-    const { isManualLinkFormVisible } = useValues(sourceWizardLogic)
-
     return (
-        <ModalPage page={3}>{isManualLinkFormVisible ? <DatawarehouseTableForm /> : <PostgresSchemaForm />}</ModalPage>
+        <ModalPage page={3}>
+            <PostgresSchemaForm />
+        </ModalPage>
     )
 }