fix(editor-3001): make sure view name stays synced to tab (#27809)

PostHog · Jan 23, 2025 · 607d7da · 607d7da
1 parent ea1e385
commit 607d7da
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/frontend/src/scenes/data-warehouse/editor/QueryTabs.tsx b/frontend/src/scenes/data-warehouse/editor/QueryTabs.tsx
@@ -1,7 +1,7 @@
 import { IconPlus, IconX } from '@posthog/icons'
 import { LemonButton } from '@posthog/lemon-ui'
 import clsx from 'clsx'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import AutoTab from './AutoTab'
 import { NEW_QUERY, QueryTab } from './multitabEditorLogic'
@@ -45,6 +45,10 @@ function QueryTabComponent({ model, active, onClear, onClick, onRename }: QueryT
     const [tabName, setTabName] = useState(() => model.name || NEW_QUERY)
     const [isEditing, setIsEditing] = useState(false)
 
+    useEffect(() => {
+        setTabName(model.view?.name || model.name || NEW_QUERY)
+    }, [model])
+
     const handleRename = (): void => {
         setIsEditing(false)
         onRename(model, tabName)

diff --git a/frontend/src/scenes/data-warehouse/editor/multitabEditorLogic.tsx b/frontend/src/scenes/data-warehouse/editor/multitabEditorLogic.tsx
@@ -361,7 +361,7 @@ export const multitabEditorLogic = kea<multitabEditorLogicType>([
                 return {
                     query: props.monaco?.editor.getModel(model.uri)?.getValue() || '',
                     path: model.uri.path.split('/').pop(),
-                    name: model.name || NEW_QUERY,
+                    name: model.view?.name || model.name || NEW_QUERY,
                     view: model.view,
                 }
             })
@@ -426,6 +426,7 @@ export const multitabEditorLogic = kea<multitabEditorLogicType>([
             const types = logic.values.response?.types ?? []
 
             await dataWarehouseViewsLogic.asyncActions.createDataWarehouseSavedQuery({ name, query, types })
+            actions.updateState()
         },
         saveAsInsight: async () => {
             LemonDialog.openForm({