feat(experiments): Use a HogQL expression data warehouse setup

frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx

@@ -24,6 +24,7 @@ import { DataWarehouseTableForInsight } from 'scenes/data-warehouse/types'
 
 import { ActionType, CohortType, EventDefinition, PropertyDefinition } from '~/types'
 
+import { HogQLDropdown } from '../HogQLDropdown/HogQLDropdown'
 import { taxonomicFilterLogic } from '../TaxonomicFilter/taxonomicFilterLogic'
 import { TZLabel } from '../TZLabel'
 
@@ -291,8 +292,21 @@ function DefinitionView({ group }: { group: TaxonomicFilterGroup }): JSX.Element
             label: column.name + ' (' + column.type + ')',
             value: column.name,
         }))
+        const hogqlOption = { label: 'HogQL Expression', value: '' }
         const itemValue = localDefinition ? group?.getValue?.(localDefinition) : null
 
+        const isUsingHogQLExpression = (value: string | undefined): boolean => {
+            if (value === undefined) {
+                return false
+            }
+            const column = Object.values(_definition.fields ?? {}).find((n) => n.name == value)
+            return !column
+        }
+
+        const distinct_id_field_value =
+            'distinct_id_field' in localDefinition ? localDefinition.distinct_id_field : undefined
+        const timestamp_field_value = 'timestamp_field' in localDefinition ? localDefinition.timestamp_field : undefined
+
         return (
             <form className="definition-popover-data-warehouse-schema-form">
                 <div className="flex flex-col justify-between gap-4">
@@ -310,23 +324,33 @@ function DefinitionView({ group }: { group: TaxonomicFilterGroup }): JSX.Element
                             <span className="label-text">Distinct ID field</span>
                         </label>
                         <LemonSelect
-                            value={
-                                'distinct_id_field' in localDefinition ? localDefinition.distinct_id_field : undefined
-                            }
-                            options={columnOptions}
+                            value={isUsingHogQLExpression(distinct_id_field_value) ? '' : distinct_id_field_value}
+                            options={[...columnOptions, hogqlOption]}
                             onChange={(value) => setLocalDefinition({ distinct_id_field: value })}
                         />
+                        {isUsingHogQLExpression(distinct_id_field_value) && (
+                            <HogQLDropdown
+                                hogQLValue={distinct_id_field_value || ''}
+                                tableName={_definition.name}
+                                onHogQLValueChange={(value) => setLocalDefinition({ distinct_id_field: value })}
+                            />
+                        )}
 
                         <label className="definition-popover-edit-form-label" htmlFor="Timestamp Field">
                             <span className="label-text">Timestamp field</span>
                         </label>
                         <LemonSelect
-                            value={
-                                ('timestamp_field' in localDefinition && localDefinition.timestamp_field) || undefined
-                            }
-                            options={columnOptions}
+                            value={isUsingHogQLExpression(timestamp_field_value) ? '' : timestamp_field_value}
+                            options={[...columnOptions, hogqlOption]}
                             onChange={(value) => setLocalDefinition({ timestamp_field: value })}
                         />
+                        {isUsingHogQLExpression(timestamp_field_value) && (
+                            <HogQLDropdown
+                                hogQLValue={timestamp_field_value || ''}
+                                tableName={_definition.name}
+                                onHogQLValueChange={(value) => setLocalDefinition({ timestamp_field: value })}
+                            />
+                        )}
                     </DefinitionPopover.Section>
                     <div className="flex justify-end">
                         <LemonButton

frontend/src/lib/components/HogQLDropdown/HogQLDropdown.tsx

@@ -0,0 +1,52 @@
+import { LemonButton, LemonDropdown } from '@posthog/lemon-ui'
+import clsx from 'clsx'
+import { useState } from 'react'
+
+import { NodeKind } from '~/queries/schema'
+
+import { HogQLEditor } from '../HogQLEditor/HogQLEditor'
+
+export const HogQLDropdown = ({
+    hogQLValue,
+    onHogQLValueChange,
+    tableName,
+    className = '',
+}: {
+    hogQLValue: string
+    tableName: string
+    className?: string
+    onHogQLValueChange: (hogQLValue: string) => void
+}): JSX.Element => {
+    const [isHogQLDropdownVisible, setIsHogQLDropdownVisible] = useState(false)
+
+    return (
+        <div className={clsx('flex-auto overflow-hidden', className)}>
+            <LemonDropdown
+                visible={isHogQLDropdownVisible}
+                closeOnClickInside={false}
+                onClickOutside={() => setIsHogQLDropdownVisible(false)}
+                overlay={
+                    // eslint-disable-next-line react/forbid-dom-props
+                    <div className="w-120" style={{ maxWidth: 'max(60vw, 20rem)' }}>
+                        <HogQLEditor
+                            value={hogQLValue}
+                            metadataSource={{ kind: NodeKind.HogQLQuery, query: `SELECT * FROM ${tableName}` }}
+                            onChange={(currentValue) => {
+                                onHogQLValueChange(currentValue)
+                                setIsHogQLDropdownVisible(false)
+                            }}
+                        />
+                    </div>
+                }
+            >
+                <LemonButton
+                    fullWidth
+                    type="secondary"
+                    onClick={() => setIsHogQLDropdownVisible(!isHogQLDropdownVisible)}
+                >
+                    <code>{hogQLValue}</code>
+                </LemonButton>
+            </LemonDropdown>
+        </div>
+    )
+}

frontend/src/scenes/data-warehouse/ViewLinkModal.tsx

@@ -5,7 +5,6 @@ import {
     LemonButton,
     LemonCheckbox,
     LemonDivider,
-    LemonDropdown,
     LemonInput,
     LemonModal,
     LemonSelect,
@@ -14,12 +13,12 @@ import {
 import { useActions, useValues } from 'kea'
 import { Field, Form } from 'kea-forms'
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { HogQLEditor } from 'lib/components/HogQLEditor/HogQLEditor'
+import { HogQLDropdown } from 'lib/components/HogQLDropdown/HogQLDropdown'
 import { IconSwapHoriz } from 'lib/lemon-ui/icons'
 import { useState } from 'react'
 import { viewLinkLogic } from 'scenes/data-warehouse/viewLinkLogic'
 
-import { DatabaseSchemaField, NodeKind } from '~/queries/schema'
+import { DatabaseSchemaField } from '~/queries/schema'
 
 export function ViewLinkModal(): JSX.Element {
     const { isJoinTableModalOpen } = useValues(viewLinkLogic)
@@ -122,6 +121,7 @@ export function ViewLinkForm(): JSX.Element {
                                 />
                                 {sourceIsUsingHogQLExpression && (
                                     <HogQLDropdown
+                                        className="mt-2"
                                         hogQLValue={selectedSourceKey ?? ''}
                                         onHogQLValueChange={selectSourceKey}
                                         tableName={selectedSourceTableName ?? ''}
@@ -147,6 +147,7 @@ export function ViewLinkForm(): JSX.Element {
                                 />
                                 {joiningIsUsingHogQLExpression && (
                                     <HogQLDropdown
+                                        className="mt-2"
                                         hogQLValue={selectedJoiningKey ?? ''}
                                         onHogQLValueChange={selectJoiningKey}
                                         tableName={selectedJoiningTableName ?? ''}
@@ -247,49 +248,6 @@ export function ViewLinkForm(): JSX.Element {
     )
 }
 
-const HogQLDropdown = ({
-    hogQLValue,
-    onHogQLValueChange,
-    tableName,
-}: {
-    hogQLValue: string
-    tableName: string
-    onHogQLValueChange: (hogQLValue: string) => void
-}): JSX.Element => {
-    const [isHogQLDropdownVisible, setIsHogQLDropdownVisible] = useState(false)
-
-    return (
-        <div className="flex-auto overflow-hidden mt-2">
-            <LemonDropdown
-                visible={isHogQLDropdownVisible}
-                closeOnClickInside={false}
-                onClickOutside={() => setIsHogQLDropdownVisible(false)}
-                overlay={
-                    // eslint-disable-next-line react/forbid-dom-props
-                    <div className="w-120" style={{ maxWidth: 'max(60vw, 20rem)' }}>
-                        <HogQLEditor
-                            value={hogQLValue}
-                            metadataSource={{ kind: NodeKind.HogQLQuery, query: `SELECT * FROM ${tableName}` }}
-                            onChange={(currentValue) => {
-                                onHogQLValueChange(currentValue)
-                                setIsHogQLDropdownVisible(false)
-                            }}
-                        />
-                    </div>
-                }
-            >
-                <LemonButton
-                    fullWidth
-                    type="secondary"
-                    onClick={() => setIsHogQLDropdownVisible(!isHogQLDropdownVisible)}
-                >
-                    <code>{hogQLValue}</code>
-                </LemonButton>
-            </LemonDropdown>
-        </div>
-    )
-}
-
 interface KeyLabelProps {
     column: DatabaseSchemaField
 }