From 1fed6c4be0d2d5d9ee71d3d9ffefcb3314f13fcf Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Mon, 18 Jul 2022 15:02:52 +0300
Subject: [PATCH] Remove usage of shared global state from a component

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
---
 .../monaco-editor/__mocks__/monaco-editor.tsx | 43 +++++++++++++++++++
 .../monaco-editor/monaco-editor.tsx           |  7 ++-
 2 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/components/monaco-editor/__mocks__/monaco-editor.tsx

diff --git a/src/renderer/components/monaco-editor/__mocks__/monaco-editor.tsx b/src/renderer/components/monaco-editor/__mocks__/monaco-editor.tsx
new file mode 100644
index 0000000000..e7b01cc876
--- /dev/null
+++ b/src/renderer/components/monaco-editor/__mocks__/monaco-editor.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type { editor } from "monaco-editor";
+import React from "react";
+import type { MonacoEditorProps, MonacoEditorRef } from "../monaco-editor";
+import { monacoValidators } from "../monaco-validators";
+
+class FakeMonacoEditor extends React.Component<MonacoEditorProps> {
+  render() {
+    const { id, value, onChange, onError, language = "yaml" } = this.props;
+
+    return (
+      <input
+        data-testid={`monaco-editor-for-${id}`}
+
+        onChange={(event) => {
+          const newValue = event.target.value;
+
+          onChange?.(
+            newValue,
+            {} as editor.IModelContentChangedEvent,
+          );
+
+          const validator = monacoValidators[language];
+
+          try {
+            validator(newValue);
+          } catch(e) {
+            onError?.(e);
+          }
+        }}
+        value={value}
+      />
+    );
+  }
+}
+
+export const MonacoEditor = React.forwardRef<
+  MonacoEditorRef,
+  MonacoEditorProps
+>((props, ref) => <FakeMonacoEditor innerRef={ref} {...props} />);
diff --git a/src/renderer/components/monaco-editor/monaco-editor.tsx b/src/renderer/components/monaco-editor/monaco-editor.tsx
index 4869cb4f48..7418187dde 100644
--- a/src/renderer/components/monaco-editor/monaco-editor.tsx
+++ b/src/renderer/components/monaco-editor/monaco-editor.tsx
@@ -12,10 +12,11 @@ import type { MonacoTheme } from "./monaco-themes";
 import { type MonacoValidator, monacoValidators } from "./monaco-validators";
 import { debounce, merge } from "lodash";
 import { autoBind, cssNames, disposer } from "../../utils";
-import { UserStore } from "../../../common/user-store";
+import type { UserStore } from "../../../common/user-store";
 import type { ThemeStore } from "../../themes/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import themeStoreInjectable from "../../themes/store.injectable";
+import userStoreInjectable from "../../../common/user-store/user-store.injectable";
 
 export type MonacoEditorId = string;
 
@@ -39,6 +40,7 @@ export interface MonacoEditorProps {
 
 interface Dependencies {
   themeStore: ThemeStore;
+  userStore: UserStore;
 }
 
 export function createMonacoUri(id: MonacoEditorId): Uri {
@@ -99,7 +101,7 @@ class NonInjectedMonacoEditor extends React.Component<MonacoEditorProps & Depend
 
   @computed get options(): editor.IStandaloneEditorConstructionOptions {
     return merge({},
-      UserStore.getInstance().editorConfiguration,
+      this.props.userStore.editorConfiguration,
       this.props.options,
     );
   }
@@ -305,6 +307,7 @@ export const MonacoEditor = withInjectables<Dependencies, MonacoEditorProps, Mon
     getProps: (di, props) => ({
       ...props,
       themeStore: di.inject(themeStoreInjectable),
+      userStore: di.inject(userStoreInjectable),
     }),
   },
 );