From 115d20f1a7bf74ef60943b13aa08d70a900e9506 Mon Sep 17 00:00:00 2001
From: eric <eeoneric@gmail.com>
Date: Tue, 6 Aug 2024 12:08:25 -0400
Subject: [PATCH] key the editors

---
 frontend/src/lib/monaco/CodeEditor.tsx         |  1 +
 .../nodes/HogQLQuery/HogQLQueryEditor.tsx      | 18 +++++++++++++++---
 .../settings/dataWarehouseSceneLogic.ts        | 10 +++++++++-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/monaco/CodeEditor.tsx b/frontend/src/lib/monaco/CodeEditor.tsx
index c1ebef5fb1498..e9ba319069831 100644
--- 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
index fa76206b6bdf5..1595e45fcd26c 100644
--- 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
index 70ad08313ca85..0705784c137c9 100644
--- 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,