move behind flag

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

@@ -510,6 +510,14 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                             icon: <IconServer />,
                             to: isUsingSidebar ? undefined : urls.dataWarehouse(),
                         },
+                        featureFlags[FEATURE_FLAGS.SQL_EDITOR]
+                            ? {
+                                  identifier: Scene.SQLEditor,
+                                  label: 'SQL editor',
+                                  icon: <IconServer />,
+                                  to: isUsingSidebar ? undefined : urls.sqlEditor(),
+                              }
+                            : null,
                         featureFlags[FEATURE_FLAGS.DATA_MODELING] && hasOnboardedAnyProduct
                             ? {
                                   identifier: Scene.DataModel,

frontend/src/lib/constants.tsx

@@ -176,6 +176,7 @@ export const FEATURE_FLAGS = {
     AI_SESSION_SUMMARY: 'ai-session-summary', // owner: #team-replay
     AI_SESSION_PERMISSIONS: 'ai-session-permissions', // owner: #team-replay
     PRODUCT_INTRO_PAGES: 'product-intro-pages', // owner: @raquelmsmith
+    SQL_EDITOR: 'sql-editor', // owner: @EDsCODE #team-data-warehouse
     SESSION_REPLAY_DOCTOR: 'session-replay-doctor', // owner: #team-replay
     REPLAY_SIMILAR_RECORDINGS: 'session-replay-similar-recordings', // owner: #team-replay
     SAVED_NOT_PINNED: 'saved-not-pinned', // owner: #team-replay

frontend/src/scenes/appScenes.ts

@@ -40,6 +40,7 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.SurveyTemplates]: () => import('./surveys/SurveyTemplates'),
     [Scene.DataModel]: () => import('./data-model/DataModelScene'),
     [Scene.DataWarehouse]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),
+    [Scene.SQLEditor]: () => import('./data-warehouse/editor/EditorScene'),
     [Scene.DataWarehouseTable]: () => import('./data-warehouse/new/NewSourceWizard'),
     [Scene.DataWarehouseExternal]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),
     [Scene.DataWarehouseRedirect]: () => import('./data-warehouse/redirect/DataWarehouseRedirectScene'),

frontend/src/scenes/data-warehouse/editor/editorSizingLogic.tsx

@@ -34,7 +34,8 @@ export const editorSizingLogic = kea<editorSizingLogicType>([
         ],
         queryPaneHeight: [
             (s) => [s.queryPaneDesiredSize],
-            (queryPaneDesiredSize) => Math.max(queryPaneDesiredSize || DEFAULT_QUERY_PANE_HEIGHT, MINIMUM_QUERY_PANE_HEIGHT),
+            (queryPaneDesiredSize) =>
+                Math.max(queryPaneDesiredSize || DEFAULT_QUERY_PANE_HEIGHT, MINIMUM_QUERY_PANE_HEIGHT),
         ],
         queryTabsWidth: [(s) => [s.queryPaneDesiredSize], (desiredSize) => desiredSize || NAVIGATOR_DEFAULT_WIDTH],
         sourceNavigatorResizerProps: [

frontend/src/scenes/data-warehouse/editor/queryWindowLogic.ts

@@ -1,39 +1,41 @@
 import { actions, events, kea, listeners, path, reducers } from 'kea'
 import { uuid } from 'lib/utils'
+
 import type { queryWindowLogicType } from './queryWindowLogicType'
 
 export interface Tab {
     key: string
     label: string
 }
 
-const generateTabKey = () => {
-    return uuid()
-}
-
-
 export const queryWindowLogic = kea<queryWindowLogicType>([
     path(['scenes', 'data-warehouse', 'editor', 'queryWindowLogic']),
     actions({
         selectTab: (tab: Tab) => ({ tab }),
         addTab: true,
         _addTab: (tab: Tab) => ({ tab }),
         deleteTab: (tab: Tab) => ({ tab }),
-        _deleteTab: (tab: Tab) => ({ tab })
+        _deleteTab: (tab: Tab) => ({ tab }),
     }),
     reducers({
-        tabs: [[] as Tab[], {
-            _addTab: (state, { tab }) => [...state, tab],
-            _deleteTab: (state, { tab }) => state.filter((t) => t.key !== tab.key)
-        }],
-        activeTabKey: ['none', {
-            selectTab: (_, { tab }) => tab.key,
-        }]
+        tabs: [
+            [] as Tab[],
+            {
+                _addTab: (state, { tab }) => [...state, tab],
+                _deleteTab: (state, { tab }) => state.filter((t) => t.key !== tab.key),
+            },
+        ],
+        activeTabKey: [
+            'none',
+            {
+                selectTab: (_, { tab }) => tab.key,
+            },
+        ],
     }),
     listeners(({ values, actions }) => ({
         addTab: () => {
             const tab = {
-                key: generateTabKey(),
+                key: uuid(),
                 label: 'Untitled',
             }
             actions._addTab(tab)
@@ -46,11 +48,11 @@ export const queryWindowLogic = kea<queryWindowLogicType>([
                 actions.selectTab(nextTab)
             }
             actions._deleteTab(tab)
-        }
+        },
     })),
     events(({ actions }) => ({
         afterMount: () => {
             actions.addTab()
         },
-    }))
+    })),
 ])

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

@@ -1,19 +1,73 @@
+import { LemonButton, Link, Spinner } from '@posthog/lemon-ui'
+import { BindLogic, useActions, useValues } from 'kea'
+import { PageHeader } from 'lib/components/PageHeader'
+import { insightLogic } from 'scenes/insights/insightLogic'
+import { insightSceneLogic } from 'scenes/insights/insightSceneLogic'
 import { SceneExport } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+
+import { PipelineTab } from '~/types'
 
 import { DataWarehouseInitialBillingLimitNotice } from '../DataWarehouseInitialBillingLimitNotice'
-import { EditorScene } from '../editor/EditorScene'
-import { dataWarehouseExternalSceneLogic } from './dataWarehouseExternalSceneLogic'
+import { DATAWAREHOUSE_EDITOR_ITEM_ID, dataWarehouseExternalSceneLogic } from './dataWarehouseExternalSceneLogic'
+import { DataWarehouseTables } from './DataWarehouseTables'
 
 export const scene: SceneExport = {
     component: DataWarehouseExternalScene,
     logic: dataWarehouseExternalSceneLogic,
 }
 
 export function DataWarehouseExternalScene(): JSX.Element {
+    const { viewLoading } = useValues(dataWarehouseExternalSceneLogic)
+
+    const logic = insightLogic({
+        dashboardItemId: DATAWAREHOUSE_EDITOR_ITEM_ID,
+        cachedInsight: null,
+    })
+    const { insightSaving, insightProps } = useValues(logic)
+    const { saveAs } = useActions(logic)
+
+    const insightDataLogicProps = {
+        ...insightProps,
+    }
+
     return (
-        <>
+        <div>
+            <PageHeader
+                buttons={
+                    <>
+                        <LemonButton
+                            type="primary"
+                            data-attr="save-exploration"
+                            onClick={() => saveAs(true, false)}
+                            loading={insightSaving}
+                        >
+                            Save as insight
+                        </LemonButton>
+                        <LemonButton type="secondary" to={urls.pipeline(PipelineTab.Sources)}>
+                            Manage sources
+                        </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 />
-            <EditorScene />
-        </>
+            {viewLoading ? (
+                <Spinner />
+            ) : (
+                <BindLogic logic={insightSceneLogic} props={{}}>
+                    <DataWarehouseTables insightProps={insightDataLogicProps} />
+                </BindLogic>
+            )}
+        </div>
     )
 }

frontend/src/scenes/sceneTypes.ts

@@ -43,6 +43,7 @@ export enum Scene {
     Survey = 'Survey',
     SurveyTemplates = 'SurveyTemplates',
     DataWarehouse = 'DataWarehouse',
+    SQLEditor = 'SQLEditor',
     DataModel = 'DataModel',
     DataWarehouseExternal = 'DataWarehouseExternal',
     DataWarehouseTable = 'DataWarehouseTable',

frontend/src/scenes/scenes.ts

@@ -233,6 +233,11 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
         projectBased: true,
         name: 'Data warehouse',
         defaultDocsPath: '/docs/data-warehouse',
+    },
+    [Scene.SQLEditor]: {
+        projectBased: true,
+        name: 'SQL editor',
+        defaultDocsPath: '/docs/data-warehouse/setup',
         layout: 'app-raw-no-header',
     },
     [Scene.DataWarehouseExternal]: {
@@ -540,6 +545,7 @@ export const routes: Record<string, Scene> = {
     [urls.dataWarehouseView(':id')]: Scene.DataWarehouse,
     [urls.dataWarehouseTable()]: Scene.DataWarehouseTable,
     [urls.dataWarehouseRedirect(':kind')]: Scene.DataWarehouseRedirect,
+    [urls.sqlEditor()]: Scene.SQLEditor,
     [urls.featureFlags()]: Scene.FeatureFlags,
     [urls.featureFlag(':id')]: Scene.FeatureFlag,
     [urls.annotations()]: Scene.DataManagement,

frontend/src/scenes/urls.ts

@@ -161,6 +161,7 @@ export const urls = {
     dataWarehouse: (query?: string | Record<string, any>): string =>
         combineUrl(`/data-warehouse`, {}, query ? { q: typeof query === 'string' ? query : JSON.stringify(query) } : {})
             .url,
+    sqlEditor: (): string => `/sql`,
     dataWarehouseView: (id: string): string => combineUrl(`/data-warehouse/view/${id}`).url,
     dataWarehouseTable: (): string => `/data-warehouse/new`,
     dataWarehouseRedirect: (kind: string): string => `/data-warehouse/${kind}/redirect`,