From 2fed1ec92372330815e9e9fd2174ae6e557ea6f2 Mon Sep 17 00:00:00 2001 From: eric Date: Fri, 18 Oct 2024 09:42:04 -0400 Subject: [PATCH] move behind flag --- .../navigation-3000/navigationLogic.tsx | 8 +++ frontend/src/lib/constants.tsx | 1 + frontend/src/scenes/appScenes.ts | 1 + .../editor/editorSizingLogic.tsx | 3 +- .../data-warehouse/editor/queryWindowLogic.ts | 34 +++++----- .../external/DataWarehouseExternalScene.tsx | 64 +++++++++++++++++-- frontend/src/scenes/sceneTypes.ts | 1 + frontend/src/scenes/scenes.ts | 6 ++ frontend/src/scenes/urls.ts | 1 + 9 files changed, 97 insertions(+), 22 deletions(-) diff --git a/frontend/src/layout/navigation-3000/navigationLogic.tsx b/frontend/src/layout/navigation-3000/navigationLogic.tsx index 74d9ac5212cad..8b9728ffafc08 100644 --- a/frontend/src/layout/navigation-3000/navigationLogic.tsx +++ b/frontend/src/layout/navigation-3000/navigationLogic.tsx @@ -510,6 +510,14 @@ export const navigation3000Logic = kea([ icon: , to: isUsingSidebar ? undefined : urls.dataWarehouse(), }, + featureFlags[FEATURE_FLAGS.SQL_EDITOR] + ? { + identifier: Scene.SQLEditor, + label: 'SQL editor', + icon: , + to: isUsingSidebar ? undefined : urls.sqlEditor(), + } + : null, featureFlags[FEATURE_FLAGS.DATA_MODELING] && hasOnboardedAnyProduct ? { identifier: Scene.DataModel, diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx index 36db4c50cdc65..8bd4d0d19ea44 100644 --- a/frontend/src/lib/constants.tsx +++ b/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 diff --git a/frontend/src/scenes/appScenes.ts b/frontend/src/scenes/appScenes.ts index 0bfb2ae19e362..5399ca013151c 100644 --- a/frontend/src/scenes/appScenes.ts +++ b/frontend/src/scenes/appScenes.ts @@ -40,6 +40,7 @@ export const appScenes: Record 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'), diff --git a/frontend/src/scenes/data-warehouse/editor/editorSizingLogic.tsx b/frontend/src/scenes/data-warehouse/editor/editorSizingLogic.tsx index 8ed8c3dbd7d69..8f3be1fe9671d 100644 --- a/frontend/src/scenes/data-warehouse/editor/editorSizingLogic.tsx +++ b/frontend/src/scenes/data-warehouse/editor/editorSizingLogic.tsx @@ -34,7 +34,8 @@ export const editorSizingLogic = kea([ ], 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: [ diff --git a/frontend/src/scenes/data-warehouse/editor/queryWindowLogic.ts b/frontend/src/scenes/data-warehouse/editor/queryWindowLogic.ts index ec9b58654c02c..2af354bb9e1ba 100644 --- a/frontend/src/scenes/data-warehouse/editor/queryWindowLogic.ts +++ b/frontend/src/scenes/data-warehouse/editor/queryWindowLogic.ts @@ -1,5 +1,6 @@ import { actions, events, kea, listeners, path, reducers } from 'kea' import { uuid } from 'lib/utils' + import type { queryWindowLogicType } from './queryWindowLogicType' export interface Tab { @@ -7,11 +8,6 @@ export interface Tab { label: string } -const generateTabKey = () => { - return uuid() -} - - export const queryWindowLogic = kea([ path(['scenes', 'data-warehouse', 'editor', 'queryWindowLogic']), actions({ @@ -19,21 +15,27 @@ export const queryWindowLogic = kea([ 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([ actions.selectTab(nextTab) } actions._deleteTab(tab) - } + }, })), events(({ actions }) => ({ afterMount: () => { actions.addTab() }, - })) + })), ]) diff --git a/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx b/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx index 58c4d900c58c0..b1d8ffac7a192 100644 --- a/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx +++ b/frontend/src/scenes/data-warehouse/external/DataWarehouseExternalScene.tsx @@ -1,8 +1,16 @@ +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, @@ -10,10 +18,56 @@ export const scene: SceneExport = { } 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 ( - <> +
+ + saveAs(true, false)} + loading={insightSaving} + > + Save as insight + + + Manage sources + + + } + caption={ +
+ Explore all your data in PostHog with{' '} + + HogQL + + . Connect your own tables from S3 to query data from outside PostHog.{' '} + Learn more +
+ } + /> - - + {viewLoading ? ( + + ) : ( + + + + )} +
) } diff --git a/frontend/src/scenes/sceneTypes.ts b/frontend/src/scenes/sceneTypes.ts index 1c44b92c91122..0df65f0d4e683 100644 --- a/frontend/src/scenes/sceneTypes.ts +++ b/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', diff --git a/frontend/src/scenes/scenes.ts b/frontend/src/scenes/scenes.ts index fe0e835197c5e..5a8ff25fb4f6c 100644 --- a/frontend/src/scenes/scenes.ts +++ b/frontend/src/scenes/scenes.ts @@ -233,6 +233,11 @@ export const sceneConfigurations: Record = { 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 = { [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, diff --git a/frontend/src/scenes/urls.ts b/frontend/src/scenes/urls.ts index 05f0372b7f8c8..5aa1cad350247 100644 --- a/frontend/src/scenes/urls.ts +++ b/frontend/src/scenes/urls.ts @@ -161,6 +161,7 @@ export const urls = { dataWarehouse: (query?: string | Record): 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`,