From 7adb969f6a314281c050ffa76dfb7d8900be63a8 Mon Sep 17 00:00:00 2001 From: timgl Date: Tue, 9 Jan 2024 20:51:22 +0000 Subject: [PATCH] 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 --- .../data-warehouse/external/SourceModal.tsx | 14 ++++---- ...sourceFormLogic.ts => sourceFormLogic.tsx} | 32 +++++++++++++++--- .../external/sourceModalLogic.ts | 33 +++---------------- 3 files changed, 40 insertions(+), 39 deletions(-) rename frontend/src/scenes/data-warehouse/external/{sourceFormLogic.ts => sourceFormLogic.tsx} (81%) diff --git a/frontend/src/scenes/data-warehouse/external/SourceModal.tsx b/frontend/src/scenes/data-warehouse/external/SourceModal.tsx index 19d4023daaa0d..842f104a05b37 100644 --- 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 { 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 > - - - {SOURCE_DETAILS[sourceType].fields.map((field) => ( ))} + + +
diff --git a/frontend/src/scenes/data-warehouse/external/sourceFormLogic.ts b/frontend/src/scenes/data-warehouse/external/sourceFormLogic.tsx similarity index 81% rename from frontend/src/scenes/data-warehouse/external/sourceFormLogic.ts rename to frontend/src/scenes/data-warehouse/external/sourceFormLogic.tsx index 67877f9a32205..a2be7fc80e4c7 100644 --- a/frontend/src/scenes/data-warehouse/external/sourceFormLogic.ts +++ b/frontend/src/scenes/data-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 = { 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. +
+ You can find your account ID{' '} + + in your Stripe dashboard + + , and create a secret key{' '} + + here + + . + + ), 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 => { diff --git a/frontend/src/scenes/data-warehouse/external/sourceModalLogic.ts b/frontend/src/scenes/data-warehouse/external/sourceModalLogic.ts index 32ae739a5c4d3..852406e2b1b02 100644 --- 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([ 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([ }), reducers({ selectedConnector: [ - null as ConnectorConfigType | null, + null as SourceConfig | null, { selectConnector: (_, { connector }) => connector, }, @@ -79,8 +56,8 @@ export const sourceModalLogic = kea([ ], 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)