fix(data-warehouse): Improve stripe form (#19664)

* fix(data-warehouse): Improve stripe form * Update UI snapshots for `chromium` (1) * Update query snapshots * Update UI snapshots for `chromium` (1) * Update query snapshots * Update UI snapshots for `chromium` (1) * fix types --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: eric <[email protected]>
PostHog · Jan 9, 2024 · 7adb969 · 7adb969
1 parent 7de9f73
commit 7adb969
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 39 deletions.
diff --git a/frontend/src/scenes/data-warehouse/external/SourceModal.tsx b/frontend/src/scenes/data-warehouse/external/SourceModal.tsx
@@ -10,8 +10,8 @@ import stripeLogo from 'public/stripe-logo.svg'
 import { ExternalDataSourceType } from '~/types'
 
 import { DatawarehouseTableForm } from '../new_table/DataWarehouseTableForm'
-import { SOURCE_DETAILS, sourceFormLogic } from './sourceFormLogic'
-import { ConnectorConfigType, sourceModalLogic } from './sourceModalLogic'
+import { SOURCE_DETAILS, SourceConfig, sourceFormLogic } from './sourceFormLogic'
+import { sourceModalLogic } from './sourceModalLogic'
 
 interface SourceModalProps extends LemonModalProps {}
 
@@ -21,7 +21,7 @@ export default function SourceModal(props: SourceModalProps): JSX.Element {
     const { selectConnector, toggleManualLinkFormVisible, onClear } = useActions(sourceModalLogic)
     const { featureFlags } = useValues(featureFlagLogic)
 
-    const MenuButton = (config: ConnectorConfigType): JSX.Element => {
+    const MenuButton = (config: SourceConfig): JSX.Element => {
         const onClick = (): void => {
             selectConnector(config)
         }
@@ -104,7 +104,7 @@ export default function SourceModal(props: SourceModalProps): JSX.Element {
         <LemonModal
             {...props}
             onAfterClose={() => onClear()}
-            title="Data Sources"
+            title={selectedConnector ? 'Link ' + selectedConnector.name : 'Select source to link'}
             description={selectedConnector ? selectedConnector.caption : null}
         >
             {formToShow()}
@@ -129,14 +129,14 @@ function SourceForm({ sourceType }: SourceFormProps): JSX.Element {
             className="space-y-4"
             enableFormOnSubmit
         >
-            <Field name="prefix" label="Table Prefix">
-                <LemonInput className="ph-ignore-input" autoFocus data-attr="prefix" placeholder="internal_" />
-            </Field>
             {SOURCE_DETAILS[sourceType].fields.map((field) => (
                 <Field key={field.name} name={['payload', field.name]} label={field.label}>
                     <LemonInput className="ph-ignore-input" data-attr={field.name} />
                 </Field>
             ))}
+            <Field name="prefix" label="Table Prefix (optional)">
+                <LemonInput className="ph-ignore-input" data-attr="prefix" placeholder="internal_" />
+            </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={onBack}>

diff --git a/...ata-warehouse/external/sourceFormLogic.ts → ...ta-warehouse/external/sourceFormLogic.tsx b/...ata-warehouse/external/sourceFormLogic.ts → ...ta-warehouse/external/sourceFormLogic.tsx
@@ -3,6 +3,7 @@ import { actions, connect, kea, listeners, path, props } from 'kea'
 import { forms } from 'kea-forms'
 import { router, urlToAction } from 'kea-router'
 import api from 'lib/api'
+import { Link } from 'lib/lemon-ui/Link'
 import { urls } from 'scenes/urls'
 
 import { ExternalDataSourceCreatePayload, ExternalDataSourceType } from '~/types'
@@ -14,37 +15,60 @@ export interface SourceFormProps {
     sourceType: ExternalDataSourceType
 }
 
-interface SourceConfig {
-    name: string
-    caption: string
+export interface SourceConfig {
+    name: ExternalDataSourceType
+    caption: string | JSX.Element
     fields: FieldConfig[]
+    disabledReason?: string | null
 }
 interface FieldConfig {
     name: string
     label: string
     type: string
     required: boolean
+    placeholder: string
 }
 
 export const SOURCE_DETAILS: Record<string, SourceConfig> = {
     Stripe: {
         name: 'Stripe',
-        caption: 'Enter your Stripe credentials to link your Stripe to PostHog',
+        caption: (
+            <>
+                Enter your Stripe credentials to automatically pull your Stripe data into the PostHog Data warehouse.
+                <br />
+                You can find your account ID{' '}
+                <Link to="https://dashboard.stripe.com/settings/user" target="_blank">
+                    in your Stripe dashboard
+                </Link>
+                , and create a secret key{' '}
+                <Link to="https://dashboard.stripe.com/apikeys" target="_blank">
+                    here
+                </Link>
+                .
+            </>
+        ),
         fields: [
             {
                 name: 'account_id',
                 label: 'Account ID',
                 type: 'text',
                 required: true,
+                placeholder: 'acct_...',
             },
             {
                 name: 'client_secret',
                 label: 'Client Secret',
                 type: 'text',
                 required: true,
+                placeholder: 'sk_live_...',
             },
         ],
     },
+    Hubspot: {
+        name: 'Hubspot',
+        fields: [],
+        caption: '',
+    },
 }
 
 const getPayloadDefaults = (sourceType: string): Record<string, any> => {

diff --git a/frontend/src/scenes/data-warehouse/external/sourceModalLogic.ts b/frontend/src/scenes/data-warehouse/external/sourceModalLogic.ts
@@ -1,41 +1,18 @@
 import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 
-import { ExternalDataSourceType } from '~/types'
-
 import { dataWarehouseTableLogic } from '../new_table/dataWarehouseTableLogic'
 import { dataWarehouseSettingsLogic } from '../settings/dataWarehouseSettingsLogic'
 import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic'
+import { SOURCE_DETAILS, SourceConfig } from './sourceFormLogic'
 import type { sourceModalLogicType } from './sourceModalLogicType'
 
 export const getHubspotRedirectUri = (): string => `${window.location.origin}/data-warehouse/hubspot/redirect`
-export interface ConnectorConfigType {
-    name: ExternalDataSourceType
-    fields: string[]
-    caption: string
-    disabledReason: string | null
-}
-
-// TODO: add icon
-export const CONNECTORS: ConnectorConfigType[] = [
-    {
-        name: 'Stripe',
-        fields: ['account_id', 'client_secret'],
-        caption: 'Enter your Stripe credentials to link your Stripe to PostHog',
-        disabledReason: null,
-    },
-    {
-        name: 'Hubspot',
-        fields: [],
-        caption: '',
-        disabledReason: null,
-    },
-]
 
 export const sourceModalLogic = kea<sourceModalLogicType>([
     path(['scenes', 'data-warehouse', 'external', 'sourceModalLogic']),
     actions({
-        selectConnector: (connector: ConnectorConfigType | null) => ({ connector }),
+        selectConnector: (connector: SourceConfig | null) => ({ connector }),
         toggleManualLinkFormVisible: (visible: boolean) => ({ visible }),
         handleRedirect: (kind: string, searchParams: any) => ({ kind, searchParams }),
         onClear: true,
@@ -60,7 +37,7 @@ export const sourceModalLogic = kea<sourceModalLogicType>([
     }),
     reducers({
         selectedConnector: [
-            null as ConnectorConfigType | null,
+            null as SourceConfig | null,
             {
                 selectConnector: (_, { connector }) => connector,
             },
@@ -79,8 +56,8 @@ export const sourceModalLogic = kea<sourceModalLogicType>([
         ],
         connectors: [
             (s) => [s.dataWarehouseSources],
-            (sources) => {
-                return CONNECTORS.map((connector) => ({
+            (sources): SourceConfig[] => {
+                return Object.values(SOURCE_DETAILS).map((connector) => ({
                     ...connector,
                     disabledReason:
                         sources && sources.results.find((source) => source.source_type === connector.name)