refactor: adjust navbar scenes

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

@@ -35,7 +35,7 @@ import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 
 import { dashboardsModel } from '~/models/dashboardsModel'
-import { ProductKey } from '~/types'
+import { DataWarehouseTab, ProductKey } from '~/types'
 
 import { navigationLogic } from '../navigation/navigationLogic'
 import type { navigation3000LogicType } from './navigationLogicType'
@@ -390,13 +390,6 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                               icon: <IconNotebook />,
                               to: urls.notebooks(),
                           },
-                          {
-                              identifier: Scene.DataManagement,
-                              label: 'Data management',
-                              icon: <IconDatabase />,
-                              logic: isUsingSidebar ? dataManagementSidebarLogic : undefined,
-                              to: isUsingSidebar ? undefined : urls.eventDefinitions(),
-                          },
                           {
                               identifier: Scene.PersonsManagement,
                               label: 'People',
@@ -410,6 +403,12 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                               icon: <IconLive />,
                               to: featureFlags[FEATURE_FLAGS.LIVE_EVENTS] ? urls.activity() : urls.events(),
                           },
+                          {
+                              identifier: Scene.DataWarehouse,
+                              label: 'SQL Studio',
+                              icon: <IconServer />,
+                              to: isUsingSidebar ? undefined : urls.dataWarehouse(),
+                          },
                       ]
                     : [
                           {
@@ -486,28 +485,39 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             icon: <IconChat />,
                             to: urls.surveys(),
                         },
+                        featureFlags[FEATURE_FLAGS.PRODUCT_INTRO_PAGES] !== 'test' || hasOnboardedFeatureFlags
+                            ? {
+                                  identifier: Scene.EarlyAccessFeatures,
+                                  label: 'Early access features',
+                                  icon: <IconRocket />,
+                                  to: urls.earlyAccessFeatures(),
+                              }
+                            : null,
+                    ].filter(isNotNil),
+                    [
+                        {
+                            identifier: Scene.DataManagement,
+                            label: 'Events management',
+                            icon: <IconDatabase />,
+                            logic: isUsingSidebar ? dataManagementSidebarLogic : undefined,
+                            to: isUsingSidebar ? undefined : urls.eventDefinitions(),
+                        },
                         {
-                            identifier: Scene.DataWarehouse,
-                            label: 'Data warehouse',
+                            identifier: Scene.DataWarehouseSettings,
+                            label: 'Data import',
                             icon: <IconServer />,
-                            to: isUsingSidebar ? undefined : urls.dataWarehouse(),
+                            to: isUsingSidebar
+                                ? undefined
+                                : urls.dataWarehouseSettings(DataWarehouseTab.ManagedSources),
                         },
                         hasOnboardedAnyProduct
                             ? {
                                   identifier: Scene.Pipeline,
-                                  label: 'Data pipeline',
+                                  label: 'Data export',
                                   icon: <IconDecisionTree />,
                                   to: urls.pipeline(),
                               }
                             : null,
-                        featureFlags[FEATURE_FLAGS.PRODUCT_INTRO_PAGES] !== 'test' || hasOnboardedFeatureFlags
-                            ? {
-                                  identifier: Scene.EarlyAccessFeatures,
-                                  label: 'Early access features',
-                                  icon: <IconRocket />,
-                                  to: urls.earlyAccessFeatures(),
-                              }
-                            : null,
                     ].filter(isNotNil),
                 ]
             },

frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx

@@ -16,7 +16,7 @@ import { CORE_FILTER_DEFINITIONS_BY_GROUP } from 'lib/taxonomy'
 import { capitalizeFirstLetter, pluralize, toParams } from 'lib/utils'
 import { getEventDefinitionIcon, getPropertyDefinitionIcon } from 'scenes/data-management/events/DefinitionHeader'
 import { dataWarehouseJoinsLogic } from 'scenes/data-warehouse/external/dataWarehouseJoinsLogic'
-import { dataWarehouseSceneLogic } from 'scenes/data-warehouse/external/dataWarehouseSceneLogic'
+import { dataWarehouseSceneLogic } from 'scenes/data-warehouse/settings/dataWarehouseSceneLogic'
 import { experimentsLogic } from 'scenes/experiments/experimentsLogic'
 import { featureFlagsLogic } from 'scenes/feature-flags/featureFlagsLogic'
 import { groupDisplayId } from 'scenes/persons/GroupActorDisplay'

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

@@ -11,7 +11,7 @@ import { CodeEditor } from 'lib/monaco/CodeEditor'
 import { codeEditorLogic } from 'lib/monaco/codeEditorLogic'
 import type { editor as importedEditor, IDisposable } from 'monaco-editor'
 import { useEffect, useRef, useState } from 'react'
-import { dataWarehouseSceneLogic } from 'scenes/data-warehouse/external/dataWarehouseSceneLogic'
+import { dataWarehouseSceneLogic } from 'scenes/data-warehouse/settings/dataWarehouseSceneLogic'
 
 import { HogQLQuery } from '~/queries/schema'
 

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

@@ -12,8 +12,8 @@ import { LemonField } from 'lib/lemon-ui/LemonField'
 // esbuild doesn't support manual chunks as of 2023, so we can't just put Monaco in its own chunk, which would prevent
 // re-importing. As for @monaco-editor/react, it does some lazy loading and doesn't have this problem.
 import type { editor } from 'monaco-editor'
-import { dataWarehouseSceneLogic } from 'scenes/data-warehouse/external/dataWarehouseSceneLogic'
 import { dataWarehouseViewsLogic } from 'scenes/data-warehouse/saved_queries/dataWarehouseViewsLogic'
+import { dataWarehouseSceneLogic } from 'scenes/data-warehouse/settings/dataWarehouseSceneLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 
 import { DataNode, HogQLQuery, NodeKind } from '~/queries/schema'

frontend/src/scenes/appScenes.ts

@@ -42,7 +42,7 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.DataWarehouse]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),
     [Scene.DataWarehouseTable]: () => import('./data-warehouse/new/NewSourceWizard'),
     [Scene.DataWarehouseExternal]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),
-    [Scene.DataWarehouseSettings]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),
+    [Scene.DataWarehouseSettings]: () => import('./data-warehouse/settings/DataWarehouseSettingsScene'),
     [Scene.DataWarehouseRedirect]: () => import('./data-warehouse/redirect/DataWarehouseRedirectScene'),
     [Scene.dataWarehouseSourceSettings]: () =>
         import('./data-warehouse/settings/source/DataWarehouseSourceSettingsScene'),

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

@@ -7,7 +7,7 @@ import { Link } from 'lib/lemon-ui/Link'
 import { deleteWithUndo } from 'lib/utils/deleteWithUndo'
 import { useCallback } from 'react'
 import { dataWarehouseJoinsLogic } from 'scenes/data-warehouse/external/dataWarehouseJoinsLogic'
-import { dataWarehouseSceneLogic } from 'scenes/data-warehouse/external/dataWarehouseSceneLogic'
+import { dataWarehouseSceneLogic } from 'scenes/data-warehouse/settings/dataWarehouseSceneLogic'
 import { viewLinkLogic } from 'scenes/data-warehouse/viewLinkLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'

frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx

@@ -1,6 +1,5 @@
-import { LemonButton, LemonTabs, Link } from '@posthog/lemon-ui'
+import { LemonButton, Link } from '@posthog/lemon-ui'
 import { BindLogic, useActions, useValues } from 'kea'
-import { router } from 'kea-router'
 import { PageHeader } from 'lib/components/PageHeader'
 import { insightDataLogic } from 'scenes/insights/insightDataLogic'
 import { insightLogic } from 'scenes/insights/insightLogic'
@@ -11,36 +10,15 @@ import { urls } from 'scenes/urls'
 import { DataWarehouseTab } from '~/types'
 
 import { DataWarehouseInitialBillingLimitNotice } from '../DataWarehouseInitialBillingLimitNotice'
-import { DataWarehouseManagedSourcesTable } from '../settings/DataWarehouseManagedSourcesTable'
-import { DataWarehouseSelfManagedSourcesTable } from '../settings/DataWarehouseSelfManagedSourcesTable'
-import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic'
+import { dataWarehouseExternalSceneLogic } from './dataWarehouseExternalSceneLogic'
 import { DataWarehouseTables } from './DataWarehouseTables'
 
 export const scene: SceneExport = {
     component: DataWarehouseExternalScene,
-    logic: dataWarehouseSceneLogic,
-}
-
-const tabToContent: Partial<Record<DataWarehouseTab, JSX.Element>> = {
-    [DataWarehouseTab.Explore]: <Explore />,
-    [DataWarehouseTab.ManagedSources]: <DataWarehouseManagedSourcesTable />,
-    [DataWarehouseTab.SelfManagedSources]: <DataWarehouseSelfManagedSourcesTable />,
-}
-
-export const humanFriendlyDataWarehouseTabName = (tab: DataWarehouseTab): string => {
-    switch (tab) {
-        case DataWarehouseTab.Explore:
-            return 'Explore'
-        case DataWarehouseTab.ManagedSources:
-            return 'Managed sources'
-        case DataWarehouseTab.SelfManagedSources:
-            return 'Self-Managed sources'
-    }
+    logic: dataWarehouseExternalSceneLogic,
 }
 
 export function DataWarehouseExternalScene(): JSX.Element {
-    const { currentTab } = useValues(dataWarehouseSceneLogic)
-
     const { insightSaving, insightProps } = useValues(
         insightLogic({
             dashboardItemId: 'new',
@@ -60,24 +38,16 @@ export function DataWarehouseExternalScene(): JSX.Element {
             <PageHeader
                 buttons={
                     <>
-                        {currentTab === DataWarehouseTab.Explore && (
-                            <LemonButton
-                                type="primary"
-                                data-attr="save-exploration"
-                                onClick={() => saveAs(query, true)}
-                                loading={insightSaving}
-                            >
-                                Save as insight
-                            </LemonButton>
-                        )}
-
                         <LemonButton
                             type="primary"
-                            data-attr="new-data-warehouse-easy-link"
-                            key="new-data-warehouse-easy-link"
-                            to={urls.dataWarehouseTable()}
+                            data-attr="save-exploration"
+                            onClick={() => saveAs(query, true)}
+                            loading={insightSaving}
                         >
-                            Link source
+                            Save as insight
+                        </LemonButton>
+                        <LemonButton type="secondary" to={urls.dataWarehouseSettings(DataWarehouseTab.ManagedSources)}>
+                            Manage sources
                         </LemonButton>
                     </>
                 }
@@ -93,27 +63,9 @@ export function DataWarehouseExternalScene(): JSX.Element {
                 }
             />
             <DataWarehouseInitialBillingLimitNotice />
-            <LemonTabs
-                activeKey={currentTab}
-                onChange={(tab) => router.actions.push(urls.dataWarehouse(tab as DataWarehouseTab))}
-                tabs={Object.entries(tabToContent).map(([tab, content]) => ({
-                    label: (
-                        <span className="flex items-center justify-between gap-1">
-                            {humanFriendlyDataWarehouseTabName(tab as DataWarehouseTab)}{' '}
-                        </span>
-                    ),
-                    key: tab,
-                    content: content,
-                }))}
-            />
+            <BindLogic logic={insightSceneLogic} props={{}}>
+                <DataWarehouseTables />
+            </BindLogic>
         </div>
     )
 }
-
-function Explore(): JSX.Element {
-    return (
-        <BindLogic logic={insightSceneLogic} props={{}}>
-            <DataWarehouseTables />
-        </BindLogic>
-    )
-}

frontend/src/scenes/data-warehouse/external/DataWarehouseTables.tsx

@@ -13,9 +13,9 @@ import { urls } from 'scenes/urls'
 import { Query } from '~/queries/Query/Query'
 import { DatabaseSchemaTable, NodeKind } from '~/queries/schema'
 
+import { dataWarehouseSceneLogic } from '../settings/dataWarehouseSceneLogic'
 import { viewLinkLogic } from '../viewLinkLogic'
 import { ViewLinkModal } from '../ViewLinkModal'
-import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic'
 import { DeleteTableModal, TableData } from './TableData'
 
 export const DataWarehouseTables = (): JSX.Element => {

frontend/src/scenes/data-warehouse/external/TableData.tsx

@@ -8,7 +8,7 @@ import { DatabaseTable } from 'scenes/data-management/database/DatabaseTable'
 
 import { DatabaseSchemaTable } from '~/queries/schema'
 
-import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic'
+import { dataWarehouseSceneLogic } from '../settings/dataWarehouseSceneLogic'
 
 export function TableData(): JSX.Element {
     const {

frontend/src/scenes/data-warehouse/external/dataWarehouseExternalSceneLogic.ts

@@ -0,0 +1,7 @@
+import { kea } from 'kea'
+
+import type { dataWarehouseExternalSceneLogicType } from './dataWarehouseExternalSceneLogicType'
+
+export const dataWarehouseExternalSceneLogic = kea<dataWarehouseExternalSceneLogicType>({
+    path: ['scenes', 'data-warehouse', 'external', 'dataWarehouseExternalSceneLogic'],
+})

frontend/src/scenes/data-warehouse/new/sourceWizardLogic.tsx

@@ -845,7 +845,7 @@ export const sourceWizardLogic = kea<sourceWizardLogicType>([
             actions.cancelWizard()
 
             if (router.values.location.pathname.includes(urls.dataWarehouseTable())) {
-                router.actions.push(urls.dataWarehouse(DataWarehouseTab.ManagedSources))
+                router.actions.push(urls.dataWarehouseSettings(DataWarehouseTab.ManagedSources))
             } else if (router.values.location.pathname.includes(urls.pipelineNodeDataWarehouseNew())) {
                 router.actions.push(urls.pipeline(PipelineTab.DataImport))
             }

frontend/src/scenes/data-warehouse/settings/DataWarehouseSettingsScene.tsx

@@ -0,0 +1,79 @@
+import { LemonButton, LemonTabs, Link } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { router } from 'kea-router'
+import { PageHeader } from 'lib/components/PageHeader'
+import { SceneExport } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+
+import { DataWarehouseTab } from '~/types'
+
+import { DataWarehouseInitialBillingLimitNotice } from '../DataWarehouseInitialBillingLimitNotice'
+import { DataWarehouseManagedSourcesTable } from './DataWarehouseManagedSourcesTable'
+import { dataWarehouseSceneLogic } from './dataWarehouseSceneLogic'
+import { DataWarehouseSelfManagedSourcesTable } from './DataWarehouseSelfManagedSourcesTable'
+
+export const scene: SceneExport = {
+    component: DataWarehouseSettingsScene,
+    logic: dataWarehouseSceneLogic,
+}
+
+const tabToContent: Partial<Record<DataWarehouseTab, JSX.Element>> = {
+    [DataWarehouseTab.ManagedSources]: <DataWarehouseManagedSourcesTable />,
+    [DataWarehouseTab.SelfManagedSources]: <DataWarehouseSelfManagedSourcesTable />,
+}
+
+export const humanFriendlyDataWarehouseTabName = (tab: DataWarehouseTab): string => {
+    switch (tab) {
+        case DataWarehouseTab.ManagedSources:
+            return 'Managed sources'
+        case DataWarehouseTab.SelfManagedSources:
+            return 'Self-Managed sources'
+    }
+}
+
+export function DataWarehouseSettingsScene(): JSX.Element {
+    const { currentTab } = useValues(dataWarehouseSceneLogic)
+
+    return (
+        <div>
+            <PageHeader
+                buttons={
+                    <>
+                        <LemonButton
+                            type="primary"
+                            data-attr="new-data-warehouse-easy-link"
+                            key="new-data-warehouse-easy-link"
+                            to={urls.dataWarehouseTable()}
+                        >
+                            Link source
+                        </LemonButton>
+                    </>
+                }
+                caption={
+                    <div>
+                        Explore all your data in PostHog with{' '}
+                        <Link to="https://posthog.com/manual/hogql" target="_blank">
+                            HogQL
+                        </Link>
+                        . Connect your own tables from S3 to query data from outside PostHog.{' '}
+                        <Link to="https://posthog.com/docs/data/data-warehouse">Learn more</Link>
+                    </div>
+                }
+            />
+            <DataWarehouseInitialBillingLimitNotice />
+            <LemonTabs
+                activeKey={currentTab}
+                onChange={(tab) => router.actions.push(urls.dataWarehouseSettings(tab as DataWarehouseTab))}
+                tabs={Object.entries(tabToContent).map(([tab, content]) => ({
+                    label: (
+                        <span className="flex items-center justify-between gap-1">
+                            {humanFriendlyDataWarehouseTabName(tab as DataWarehouseTab)}{' '}
+                        </span>
+                    ),
+                    key: tab,
+                    content: content,
+                }))}
+            />
+        </div>
+    )
+}