From ce1fcf195ca242111d31171f07442af57351db9e Mon Sep 17 00:00:00 2001 From: Eric Duong Date: Fri, 20 Dec 2024 11:53:12 -0500 Subject: [PATCH] chore(editor-3001): add modeling flag and adjust UI (#27016) Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> --- frontend/src/lib/monaco/codeEditorLogic.tsx | 4 +-- .../nodes/HogQLQuery/HogQLQueryEditor.tsx | 4 +-- .../data-warehouse/editor/OutputPane.tsx | 15 ++++++++--- .../data-warehouse/editor/QueryTabs.tsx | 2 +- .../editor/multitabEditorLogic.tsx | 25 ++++++++++++++++--- 5 files changed, 38 insertions(+), 12 deletions(-) diff --git a/frontend/src/lib/monaco/codeEditorLogic.tsx b/frontend/src/lib/monaco/codeEditorLogic.tsx index 42e95f25209a4..b02e4d38d780a 100644 --- 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([ 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 index 49ebdc16ae396..4c6dd4d8a70e6 100644 --- 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 index 2fd8adf883adb..517073e70c91f 100644 --- 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', + }, + ] + : []), ]} />
diff --git a/frontend/src/scenes/data-warehouse/editor/QueryTabs.tsx b/frontend/src/scenes/data-warehouse/editor/QueryTabs.tsx index 85c9d80ef6270..d060984b41512 100644 --- 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 && ( { diff --git a/frontend/src/scenes/data-warehouse/editor/multitabEditorLogic.tsx b/frontend/src/scenes/data-warehouse/editor/multitabEditorLogic.tsx index 94995a446ae2d..7f713327b5197 100644 --- 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([ } 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([ }, 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([ 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([ }) 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