chore(editor-3001): add modeling flag and adjust UI (#27016)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Dec 20, 2024 · ce1fcf1 · ce1fcf1
1 parent 946f561
commit ce1fcf1
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 12 deletions.
diff --git a/frontend/src/lib/monaco/codeEditorLogic.tsx b/frontend/src/lib/monaco/codeEditorLogic.tsx
@@ -29,7 +29,7 @@ import {
 import type { codeEditorLogicType } from './codeEditorLogicType'
 
 export const editorModelsStateKey = (key: string | number): string => `${key}/editorModelQueries`
-export const activemodelStateKey = (key: string | number): string => `${key}/activeModelUri`
+export const activeModelStateKey = (key: string | number): string => `${key}/activeModelUri`
 
 const METADATA_LANGUAGES = [HogLanguage.hog, HogLanguage.hogQL, HogLanguage.hogQLExpr, HogLanguage.hogTemplate]
 
@@ -206,7 +206,7 @@ export const codeEditorLogic = kea<codeEditorLogicType>([
 
             if (values.featureFlags[FEATURE_FLAGS.MULTITAB_EDITOR] || values.featureFlags[FEATURE_FLAGS.SQL_EDITOR]) {
                 const path = modelName.path.split('/').pop()
-                path && props.multitab && actions.setLocalState(activemodelStateKey(props.key), path)
+                path && props.multitab && actions.setLocalState(activeModelStateKey(props.key), path)
             }
         },
         deleteModel: ({ modelName }) => {

diff --git a/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx b/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx
@@ -10,7 +10,7 @@ import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { CodeEditor } from 'lib/monaco/CodeEditor'
 import {
-    activemodelStateKey,
+    activeModelStateKey,
     codeEditorLogic,
     CodeEditorLogicProps,
     editorModelsStateKey,
@@ -190,7 +190,7 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
                                 setMonacoAndEditor([monaco, editor])
 
                                 const allModelQueries = localStorage.getItem(editorModelsStateKey(codeEditorKey))
-                                const activeModelUri = localStorage.getItem(activemodelStateKey(codeEditorKey))
+                                const activeModelUri = localStorage.getItem(activeModelStateKey(codeEditorKey))
 
                                 if (allModelQueries && multitab) {
                                     // clear existing models

diff --git a/frontend/src/scenes/data-warehouse/editor/OutputPane.tsx b/frontend/src/scenes/data-warehouse/editor/OutputPane.tsx
@@ -7,6 +7,8 @@ import { useActions, useValues } from 'kea'
 import { AnimationType } from 'lib/animations/animations'
 import { Animation } from 'lib/components/Animation/Animation'
 import { ExportButton } from 'lib/components/ExportButton/ExportButton'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { useMemo } from 'react'
 import DataGrid from 'react-data-grid'
 import { InsightErrorState, StatelessInsightLoadingState } from 'scenes/insights/EmptyStates'
@@ -45,6 +47,7 @@ export function OutputPane(): JSX.Element {
     const { dataWarehouseSavedQueriesLoading } = useValues(dataWarehouseViewsLogic)
     const { updateDataWarehouseSavedQuery } = useActions(dataWarehouseViewsLogic)
     const { visualizationType, queryCancelled } = useValues(dataVisualizationLogic)
+    const { featureFlags } = useValues(featureFlagLogic)
 
     const vizKey = useMemo(() => `SQLEditorScene`, [])
 
@@ -91,10 +94,14 @@ export function OutputPane(): JSX.Element {
                             key: OutputTab.Visualization,
                             label: 'Visualization',
                         },
-                        {
-                            key: OutputTab.Info,
-                            label: 'Info',
-                        },
+                        ...(featureFlags[FEATURE_FLAGS.DATA_MODELING]
+                            ? [
+                                  {
+                                      key: OutputTab.Info,
+                                      label: 'Info',
+                                  },
+                              ]
+                            : []),
                     ]}
                 />
                 <div className="flex gap-4">

diff --git a/frontend/src/scenes/data-warehouse/editor/QueryTabs.tsx b/frontend/src/scenes/data-warehouse/editor/QueryTabs.tsx
@@ -46,7 +46,7 @@ function QueryTabComponent({ model, active, onClear, onClick }: QueryTabProps):
                 onClear ? 'pl-3 pr-2' : 'px-3'
             )}
         >
-            {model.view?.name ?? 'Untitled'}
+            {model.view?.name ?? 'New query'}
             {onClear && (
                 <LemonButton
                     onClick={(e) => {

diff --git a/frontend/src/scenes/data-warehouse/editor/multitabEditorLogic.tsx b/frontend/src/scenes/data-warehouse/editor/multitabEditorLogic.tsx
@@ -34,7 +34,8 @@ export interface MultitabEditorLogicProps {
 }
 
 export const editorModelsStateKey = (key: string | number): string => `${key}/editorModelQueries`
-export const activemodelStateKey = (key: string | number): string => `${key}/activeModelUri`
+export const activeModelStateKey = (key: string | number): string => `${key}/activeModelUri`
+export const activeModelVariablesStateKey = (key: string | number): string => `${key}/activeModelVariables`
 
 export interface QueryTab {
     uri: Uri
@@ -214,7 +215,7 @@ export const multitabEditorLogic = kea<multitabEditorLogicType>([
             }
 
             const path = tab.uri.path.split('/').pop()
-            path && actions.setLocalState(activemodelStateKey(props.key), path)
+            path && actions.setLocalState(activeModelStateKey(props.key), path)
         },
         deleteTab: ({ tab: tabToRemove }) => {
             if (props.monaco) {
@@ -244,7 +245,13 @@ export const multitabEditorLogic = kea<multitabEditorLogicType>([
         },
         initialize: () => {
             const allModelQueries = localStorage.getItem(editorModelsStateKey(props.key))
-            const activeModelUri = localStorage.getItem(activemodelStateKey(props.key))
+            const activeModelUri = localStorage.getItem(activeModelStateKey(props.key))
+            const activeModelVariablesString = localStorage.getItem(activeModelVariablesStateKey(props.key))
+            const activeModelVariables =
+                activeModelVariablesString && activeModelVariablesString != 'undefined'
+                    ? JSON.parse(activeModelVariablesString)
+                    : {}
+
             const mountedCodeEditorLogic =
                 codeEditorLogic.findMounted() ||
                 codeEditorLogic({
@@ -285,6 +292,13 @@ export const multitabEditorLogic = kea<multitabEditorLogicType>([
                     activeModel && props.editor?.setModel(activeModel)
                     const val = activeModel?.getValue()
                     if (val) {
+                        actions.setSourceQuery({
+                            ...values.sourceQuery,
+                            source: {
+                                ...values.sourceQuery.source,
+                                variables: activeModelVariables,
+                            },
+                        })
                         actions.setQueryInput(val)
                         actions.runQuery()
                     }
@@ -323,6 +337,11 @@ export const multitabEditorLogic = kea<multitabEditorLogicType>([
             })
             localStorage.setItem(editorModelsStateKey(props.key), JSON.stringify(queries))
         },
+        setSourceQuery: ({ sourceQuery }) => {
+            // NOTE: this is a hack to get the variables to persist.
+            // Variables should be handled first in this logic and then in the downstream variablesLogic
+            localStorage.setItem(activeModelVariablesStateKey(props.key), JSON.stringify(sourceQuery.source.variables))
+        },
         runQuery: ({ queryOverride, switchTab }) => {
             const query = queryOverride || values.queryInput