feat(data-warehouse): onboarding flow wip (#23291)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Raquel Smith <[email protected]>

frontend/src/layout/navigation-3000/navigationLogic.tsx

@@ -486,6 +486,12 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             icon: <IconChat />,
                             to: urls.surveys(),
                         },
+                        {
+                            identifier: Scene.DataWarehouse,
+                            label: 'Data warehouse',
+                            icon: <IconServer />,
+                            to: isUsingSidebar ? undefined : urls.dataWarehouse(),
+                        },
                         featureFlags[FEATURE_FLAGS.PRODUCT_INTRO_PAGES] !== 'test' || hasOnboardedFeatureFlags
                             ? {
                                   identifier: Scene.EarlyAccessFeatures,
@@ -494,16 +500,6 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                                   to: urls.earlyAccessFeatures(),
                               }
                             : null,
-                        hasOnboardedAnyProduct
-                            ? {
-                                  identifier: Scene.DataWarehouse,
-                                  label: 'Data warehouse',
-                                  icon: <IconServer />,
-                                  to: urls.dataWarehouse(),
-                                  featureFlag: FEATURE_FLAGS.DATA_WAREHOUSE,
-                                  tag: 'beta' as const,
-                              }
-                            : null,
                         hasOnboardedAnyProduct
                             ? featureFlags[FEATURE_FLAGS.PIPELINE_UI]
                                 ? {

frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx

@@ -567,17 +567,13 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
                             push(urls.webAnalytics())
                         },
                     },
-                    ...(values.featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE]
-                        ? [
-                              {
-                                  icon: IconServer,
-                                  display: 'Go to Data warehouse',
-                                  executor: () => {
-                                      push(urls.dataWarehouse())
-                                  },
-                              },
-                          ]
-                        : []),
+                    {
+                        icon: IconServer,
+                        display: 'Go to Data warehouse',
+                        executor: () => {
+                            push(urls.dataWarehouse())
+                        },
+                    },
                     ...(values.featureFlags[FEATURE_FLAGS.ERROR_TRACKING]
                         ? [
                               {

frontend/src/lib/constants.tsx

@@ -157,7 +157,6 @@ export const FEATURE_FLAGS = {
     // owner: #team-replay, only to be enabled for PostHog team testing
     EXCEPTION_AUTOCAPTURE: 'exception-autocapture',
     WEB_VITALS_AUTOCAPTURE: 'web-vitals-autocapture', // owner: @team-replay
-    DATA_WAREHOUSE: 'data-warehouse', // owner: @EDsCODE
     FF_DASHBOARD_TEMPLATES: 'ff-dashboard-templates', // owner: @EDsCODE
     ARTIFICIAL_HOG: 'artificial-hog', // owner: @Twixes
     CS_DASHBOARDS: 'cs-dashboards', // owner: @pauldambra

frontend/src/mocks/handlers.ts

@@ -50,6 +50,7 @@ export const defaultMocks: Mocks = {
         '/api/projects/:team_id/dashboards/': EMPTY_PAGINATED_RESPONSE,
         '/api/projects/:team_id/dashboard_templates': EMPTY_PAGINATED_RESPONSE,
         '/api/projects/:team_id/dashboard_templates/repository/': [],
+        '/api/projects/:team_id/external_data_sources/': EMPTY_PAGINATED_RESPONSE,
         '/api/projects/:team_id/notebooks': () => {
             // this was matching on `?contains=query` but that made MSW unhappy and seems unnecessary
             return [

frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx

@@ -83,12 +83,10 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
 
     return (
         <div className="flex items-start gap-2">
-            <FlaggedFeature flag={FEATURE_FLAGS.DATA_WAREHOUSE}>
-                {/* eslint-disable-next-line react/forbid-dom-props */}
-                <div className="flex max-sm:hidden" style={{ maxHeight: panelHeight }}>
-                    <DatabaseTableTreeWithItems inline />
-                </div>
-            </FlaggedFeature>
+            {/* eslint-disable-next-line react/forbid-dom-props */}
+            <div className="flex max-sm:hidden" style={{ maxHeight: panelHeight }}>
+                <DatabaseTableTreeWithItems inline />
+            </div>
             <div
                 data-attr="hogql-query-editor"
                 className={clsx(
@@ -212,46 +210,41 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
                                     {!props.setQuery ? 'No permission to update' : 'Update and run'}
                                 </LemonButton>
                             </div>
-                            {featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE] ? (
-                                <LemonButton
-                                    className="ml-2"
-                                    onClick={saveAsView}
-                                    type="primary"
-                                    center
-                                    disabledReason={
-                                        hasErrors
-                                            ? error ?? 'Query has errors'
-                                            : !isValidView
-                                            ? 'All fields must have an alias'
-                                            : ''
-                                    }
-                                    data-attr="hogql-query-editor-save-as-view"
-                                >
-                                    Save as view
-                                </LemonButton>
-                            ) : null}
-                            {featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE] && (
-                                <LemonButtonWithDropdown
-                                    className="ml-2"
-                                    icon={<IconInfo />}
-                                    type="secondary"
-                                    size="small"
-                                    dropdown={{
-                                        overlay: (
-                                            <div>
-                                                Save a query as a view that can be referenced in another query. This is
-                                                useful for modeling data and organizing large queries into readable
-                                                chunks.{' '}
-                                                <Link to="https://posthog.com/docs/data-warehouse">More Info</Link>{' '}
-                                            </div>
-                                        ),
-                                        placement: 'right-start',
-                                        fallbackPlacements: ['left-start'],
-                                        actionable: true,
-                                        closeParentPopoverOnClickInside: true,
-                                    }}
-                                />
-                            )}
+                            <LemonButton
+                                className="ml-2"
+                                onClick={saveAsView}
+                                type="primary"
+                                center
+                                disabledReason={
+                                    hasErrors
+                                        ? error ?? 'Query has errors'
+                                        : !isValidView
+                                        ? 'All fields must have an alias'
+                                        : ''
+                                }
+                                data-attr="hogql-query-editor-save-as-view"
+                            >
+                                Save as view
+                            </LemonButton>
+                            <LemonButtonWithDropdown
+                                className="ml-2"
+                                icon={<IconInfo />}
+                                type="secondary"
+                                size="small"
+                                dropdown={{
+                                    overlay: (
+                                        <div>
+                                            Save a query as a view that can be referenced in another query. This is
+                                            useful for modeling data and organizing large queries into readable chunks.{' '}
+                                            <Link to="https://posthog.com/docs/data-warehouse">More Info</Link>{' '}
+                                        </div>
+                                    ),
+                                    placement: 'right-start',
+                                    fallbackPlacements: ['left-start'],
+                                    actionable: true,
+                                    closeParentPopoverOnClickInside: true,
+                                }}
+                            />
                         </>
                     )}
                 </div>

frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx

@@ -1,7 +1,5 @@
 import { useActions, useValues } from 'kea'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { FEATURE_FLAGS } from 'lib/constants'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 
@@ -18,7 +16,6 @@ export function GlobalAndOrFilters({ insightProps }: EditorFilterProps): JSX.Ele
     const { groupsTaxonomicTypes } = useValues(groupsModel)
     const { isTrends, querySource, isDataWarehouseSeries } = useValues(insightVizDataLogic(insightProps))
     const { updateQuerySource } = useActions(insightVizDataLogic(insightProps))
-    const { featureFlags } = useValues(featureFlagLogic)
 
     const taxonomicGroupTypes = [
         TaxonomicFilterGroupType.EventProperties,
@@ -29,7 +26,7 @@ export function GlobalAndOrFilters({ insightProps }: EditorFilterProps): JSX.Ele
         TaxonomicFilterGroupType.Elements,
         ...(isTrends ? [TaxonomicFilterGroupType.SessionProperties] : []),
         TaxonomicFilterGroupType.HogQLExpression,
-        ...(featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE] ? [TaxonomicFilterGroupType.DataWarehousePersonProperties] : []),
+        TaxonomicFilterGroupType.DataWarehousePersonProperties,
     ]
 
     return (

frontend/src/queries/nodes/InsightViz/TrendsSeries.tsx

@@ -1,7 +1,6 @@
 import { useActions, useValues } from 'kea'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
-import { FEATURE_FLAGS, SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants'
 import { alphabet } from 'lib/utils'
 import { ActionFilter } from 'scenes/insights/filters/ActionFilter/ActionFilter'
 import { MathAvailability } from 'scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow'
@@ -24,7 +23,6 @@ export function TrendsSeries(): JSX.Element | null {
         insightVizDataLogic(insightProps)
     )
     const { updateQuerySource } = useActions(insightVizDataLogic(insightProps))
-    const { featureFlags } = useValues(featureFlagLogic)
 
     const { showGroupsOptions, groupsTaxonomicTypes } = useValues(groupsModel)
 
@@ -38,7 +36,7 @@ export function TrendsSeries(): JSX.Element | null {
         ...(isTrends ? [TaxonomicFilterGroupType.SessionProperties] : []),
         TaxonomicFilterGroupType.HogQLExpression,
         TaxonomicFilterGroupType.DataWarehouseProperties,
-        ...(featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE] ? [TaxonomicFilterGroupType.DataWarehousePersonProperties] : []),
+        TaxonomicFilterGroupType.DataWarehousePersonProperties,
     ]
 
     if (!isInsightQueryNode(querySource)) {
@@ -87,15 +85,11 @@ export function TrendsSeries(): JSX.Element | null {
                 }
                 mathAvailability={mathAvailability}
                 propertiesTaxonomicGroupTypes={propertiesTaxonomicGroupTypes}
-                actionsTaxonomicGroupTypes={
-                    featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE]
-                        ? [
-                              TaxonomicFilterGroupType.Events,
-                              TaxonomicFilterGroupType.Actions,
-                              TaxonomicFilterGroupType.DataWarehouse,
-                          ]
-                        : [TaxonomicFilterGroupType.Events, TaxonomicFilterGroupType.Actions]
-                }
+                actionsTaxonomicGroupTypes={[
+                    TaxonomicFilterGroupType.Events,
+                    TaxonomicFilterGroupType.Actions,
+                    TaxonomicFilterGroupType.DataWarehouse,
+                ]}
             />
         </>
     )

frontend/src/scenes/data-management/DataManagementScene.stories.tsx

@@ -249,7 +249,6 @@ const meta: Meta = {
 }
 export default meta
 export function Database(): JSX.Element {
-    setFeatureFlags([FEATURE_FLAGS.DATA_WAREHOUSE])
     useEffect(() => {
         router.actions.push(urls.database())
     }, [])

frontend/src/scenes/data-management/database/DatabaseTables.tsx

@@ -1,22 +1,20 @@
 import { LemonButton, LemonDropdown, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { FEATURE_FLAGS } from 'lib/constants'
 import { LemonTable, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
 import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { humanFriendlyDetailedTime } from 'lib/utils'
 import { databaseTableListLogic } from 'scenes/data-management/database/databaseTableListLogic'
+import { defaultQuery } from 'scenes/data-warehouse/utils'
 import { viewLinkLogic } from 'scenes/data-warehouse/viewLinkLogic'
 import { urls } from 'scenes/urls'
 
-import { DatabaseSchemaTable, DataTableNode, NodeKind } from '~/queries/schema'
+import { DatabaseSchemaTable } from '~/queries/schema'
 
 import { DatabaseTable } from './DatabaseTable'
 
 export function DatabaseTablesContainer(): JSX.Element {
     const { filteredTables, databaseLoading } = useValues(databaseTableListLogic)
     const { toggleJoinTableModal, selectSourceTable } = useActions(viewLinkLogic)
-    const { featureFlags } = useValues(featureFlagLogic)
 
     return (
         <>
@@ -29,20 +27,18 @@ export function DatabaseTablesContainer(): JSX.Element {
                             <div className="mt-2">
                                 <span className="card-secondary">Columns</span>
                                 <DatabaseTable table={row.name} tables={filteredTables} inEditSchemaMode={false} />
-                                {featureFlags[FEATURE_FLAGS.DATA_WAREHOUSE] && (
-                                    <div className="w-full flex justify-end">
-                                        <LemonButton
-                                            className="mt-2"
-                                            type="primary"
-                                            onClick={() => {
-                                                selectSourceTable(row.name)
-                                                toggleJoinTableModal()
-                                            }}
-                                        >
-                                            Add link to view
-                                        </LemonButton>
-                                    </div>
-                                )}
+                                <div className="w-full flex justify-end">
+                                    <LemonButton
+                                        className="mt-2"
+                                        type="primary"
+                                        onClick={() => {
+                                            selectSourceTable(row.name)
+                                            toggleJoinTableModal()
+                                        }}
+                                    >
+                                        Add link to view
+                                    </LemonButton>
+                                </div>
                             </div>
                         </div>
                     )
@@ -81,22 +77,7 @@ export function DatabaseTables<T extends DatabaseSchemaTable>({
                                   key: 'name',
                                   dataIndex: 'name',
                                   render: function RenderTable(table, obj: T) {
-                                      const query: DataTableNode = {
-                                          kind: NodeKind.DataTableNode,
-                                          full: true,
-                                          source: {
-                                              kind: NodeKind.HogQLQuery,
-                                              // TODO: Use `hogql` tag?
-                                              query: `SELECT ${Object.values(obj.fields)
-                                                  .filter(
-                                                      ({ table, fields, chain, schema_valid }) =>
-                                                          !table && !fields && !chain && schema_valid
-                                                  )
-                                                  .map(({ name }) => name)} FROM ${
-                                                  table === 'numbers' ? 'numbers(0, 10)' : table
-                                              } LIMIT 100`,
-                                          },
-                                      }
+                                      const query = defaultQuery(table as string, Object.values(obj.fields))
                                       return (
                                           <div className="flex">
                                               <Link to={urls.insightNew(undefined, undefined, JSON.stringify(query))}>