key the editors

PostHog · Aug 6, 2024 · 115d20f · 115d20f
1 parent e9153e5
commit 115d20f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/frontend/src/lib/monaco/CodeEditor.tsx b/frontend/src/lib/monaco/CodeEditor.tsx
@@ -220,6 +220,7 @@ export function CodeEditor({
 
     return (
         <MonacoEditor // eslint-disable-line react/forbid-elements
+            key={queryKey}
             theme={isDarkModeOn ? 'vs-dark' : 'vs-light'}
             loading={<Spinner />}
             options={{

diff --git a/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx b/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx
@@ -34,9 +34,16 @@ const EDITOR_HEIGHT = 222
 export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
     const editorRef = useRef<HTMLDivElement | null>(null)
 
-    const [key] = useState(() =>
-        router.values.location.pathname.includes(urls.dataWarehouse()) ? urls.dataWarehouse() : uniqueNode++
+    const [key, setKey] = useState(() =>
+        router.values.location.pathname.includes(urls.dataWarehouse()) ? router.values.location.pathname : uniqueNode++
     )
+
+    useEffect(() => {
+        if (router.values.location.pathname.includes(urls.dataWarehouse())) {
+            setKey(router.values.location.pathname)
+        }
+    }, [router.values.location.pathname])
+
     const [monacoAndEditor, setMonacoAndEditor] = useState(
         null as [Monaco, importedEditor.IStandaloneCodeEditor] | null
     )
@@ -69,7 +76,12 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
         codeEditorLogic(codeEditorLogicProps)
     )
 
-    const { editingView } = useValues(dataWarehouseSceneLogic)
+    const { editingView } = useValues(
+        dataWarehouseSceneLogic({
+            monaco,
+            editor,
+        })
+    )
     // Using useRef, not useState, as we don't want to reload the component when this changes.
     const monacoDisposables = useRef([] as IDisposable[])
     useEffect(() => {

diff --git a/frontend/src/scenes/data-warehouse/settings/dataWarehouseSceneLogic.ts b/frontend/src/scenes/data-warehouse/settings/dataWarehouseSceneLogic.ts
@@ -1,7 +1,9 @@
+import { Monaco } from '@monaco-editor/react'
 import { lemonToast } from '@posthog/lemon-ui'
-import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
+import { actions, connect, kea, listeners, path, props, reducers, selectors } from 'kea'
 import { router, urlToAction } from 'kea-router'
 import api from 'lib/api'
+import { editor } from 'monaco-editor'
 import posthog from 'posthog-js'
 import { databaseTableListLogic } from 'scenes/data-management/database/databaseTableListLogic'
 import { urls } from 'scenes/urls'
@@ -11,8 +13,14 @@ import { DatabaseSchemaTable, DatabaseSerializedFieldType, HogQLQuery, NodeKind
 import { dataWarehouseViewsLogic } from '../saved_queries/dataWarehouseViewsLogic'
 import type { dataWarehouseSceneLogicType } from './dataWarehouseSceneLogicType'
 
+export interface DataWarehouseSceneLogicProps {
+    monaco?: Monaco | null
+    editor?: editor.IStandaloneCodeEditor | null
+}
+
 export const dataWarehouseSceneLogic = kea<dataWarehouseSceneLogicType>([
     path(['scenes', 'warehouse', 'dataWarehouseSceneLogic']),
+    props({} as DataWarehouseSceneLogicProps),
     connect(() => ({
         values: [
             databaseTableListLogic,