CONSOLE-4407: maintain backwards compatibility with ref object

openshift · Jan 14, 2025 · a50c157 · a50c157
1 parent d5c1bd9
commit a50c157
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 16 deletions.
diff --git a/frontend/packages/console-dynamic-plugin-sdk/README.md b/frontend/packages/console-dynamic-plugin-sdk/README.md
@@ -163,6 +163,7 @@ This section documents notable changes in the Console provided shared modules ac
   from `@patternfly/react-icons` instead. The `fa-spin` class remains but is deprecated and will be
   removed in the future. Plugins should provide their own CSS to spin icons if needed.
 - Removed PatternFly 4.x shared modules.
+- Upgraded `monaco-editor` to version `0.36.1`.
 
 ### PatternFly dynamic modules
 

diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts b/frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts
@@ -658,8 +658,8 @@ export type CodeEditorProps = {
 };
 
 export type CodeEditorRef = {
-  getEditor: () => monaco.editor.IStandaloneCodeEditor;
-  getMonaco: () => typeof monaco;
+  editor: monaco.editor.IStandaloneCodeEditor;
+  monaco: typeof monaco;
 };
 
 export type ResourceYAMLEditorProps = {

diff --git a/frontend/packages/console-shared/src/components/editor/CodeEditor.tsx b/frontend/packages/console-shared/src/components/editor/CodeEditor.tsx
@@ -66,8 +66,8 @@ const CodeEditor = React.forwardRef<CodeEditorRef, CodeEditorProps>((props, ref)
   React.useImperativeHandle(
     ref,
     () => ({
-      getEditor: () => editorRef,
-      getMonaco: () => monacoRef,
+      editor: editorRef,
+      monaco: monacoRef,
     }),
     [editorRef, monacoRef],
   );

diff --git a/frontend/packages/console-shared/src/components/editor/CodeEditorSidebar.tsx b/frontend/packages/console-shared/src/components/editor/CodeEditorSidebar.tsx
@@ -28,13 +28,13 @@ const CodeEditorSidebar: React.FC<CodeEditorSidebarProps> = ({
   sanitizeYamlContent,
   toggleSidebar,
 }) => {
-  const getEditor = React.useCallback(() => editorRef?.current?.getEditor(), [editorRef]);
+  const editor = editorRef.current?.editor;
 
   const insertYamlContent = React.useCallback(
     (id: string = 'default', yamlContent: string = '', kind) => {
       const yaml = sanitizeYamlContent ? sanitizeYamlContent(id, yamlContent, kind) : yamlContent;
 
-      const selection = getEditor()?.getSelection();
+      const selection = editor?.getSelection();
       const range = new Range(
         selection.startLineNumber,
         selection.startColumn,
@@ -64,18 +64,18 @@ const CodeEditorSidebar: React.FC<CodeEditorSidebarProps> = ({
       );
 
       const op = { range, text: indentedText, forceMoveMarkers: true };
-      getEditor()?.executeEdits(id, [op], [newContentSelection]);
-      getEditor()?.focus();
+      editor?.executeEdits(id, [op], [newContentSelection]);
+      editor?.focus();
     },
-    [sanitizeYamlContent, getEditor],
+    [sanitizeYamlContent, editor],
   );
 
   const replaceYamlContent = React.useCallback(
     (id: string = 'default', yamlContent: string = '', kind: string) => {
       const yaml = sanitizeYamlContent ? sanitizeYamlContent(id, yamlContent, kind) : yamlContent;
-      getEditor()?.setValue(yaml);
+      editor?.setValue(yaml);
     },
-    [sanitizeYamlContent, getEditor],
+    [sanitizeYamlContent, editor],
   );
 
   const downloadYamlContent = React.useCallback(

diff --git a/frontend/packages/console-shared/src/components/editor/yaml-editor-utils.ts b/frontend/packages/console-shared/src/components/editor/yaml-editor-utils.ts
@@ -70,10 +70,10 @@ export const fold = (
  */
 export const registerAutoFold = (
   editor: monaco.editor.IStandaloneCodeEditor,
-  model: monaco.editor.ITextModel,
   alreadyInUse: boolean = false,
 ) => {
   let initialFoldingTriggered = false;
+  const model = editor.getModel();
   const tryFolding = () => {
     const document = model.getValue();
     if (!initialFoldingTriggered && document !== '') {
@@ -131,7 +131,6 @@ export const registerYAMLinMonaco = (
   }
 
   if (!alreadyInUse) {
-    const model = editor.getModel();
-    registerAutoFold(editor, model);
+    registerAutoFold(editor);
   }
 };
diff --git a/frontend/public/components/edit-yaml.jsx b/frontend/public/components/edit-yaml.jsx
@@ -146,7 +146,9 @@ const EditYAMLInner = (props) => {
   const onCancel = 'onCancel' in props ? props.onCancel : navigateBack;
 
   /** @return {import('monaco-editor').editor.IStandaloneCodeEditor | null} */
-  const getEditor = () => monacoRef.current?.getEditor();
+  const getEditor = () => {
+    return monacoRef.current?.editor;
+  };
 
   const getModel = React.useCallback(
     (obj) => {
@@ -372,7 +374,7 @@ const EditYAMLInner = (props) => {
     }
 
     const newVersion = _.get(props.obj, 'metadata.resourceVersion');
-    const s = displayedVersion.current !== newVersion;
+    const s = displayedVersion.current !== newVersion && editorMounted;
     setStale(s);
     handleError(props.error, success);
     if (props.sampleObj) {