CONSOLE-4407: Use ResizeObserver over automaticLayout

`automaticLayout` has a few problems in this older version, see microsoft/monaco-editor#4277

Author: logonoff

frontend/packages/console-shared/src/components/editor/BasicCodeEditor.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { loader, Monaco } from '@monaco-editor/react';
 import { CodeEditor } from '@patternfly/react-code-editor';
+import { getResizeObserver } from '@patternfly/react-core';
 import classNames from 'classnames';
 import * as monaco from 'monaco-editor';
 import { useTranslation } from 'react-i18next';
@@ -23,6 +24,22 @@ export const BasicCodeEditor: React.FC<BasicCodeEditorProps> = (props) => {
   const [monacoRef, setMonacoRef] = React.useState<Monaco | null>(null);
   useConsoleMonacoTheme(monacoRef?.editor);
 
+  // TODO(PF6): remove this when https://github.com/patternfly/patternfly-react/issues/11531 is fixed
+  const handleResize = React.useCallback(() => {
+    monacoRef?.editor?.getEditors()?.forEach((editor) => {
+      editor.layout({ width: 0, height: 0 });
+      editor.layout();
+    });
+  }, [monacoRef]);
+
+  React.useEffect(() => {
+    const observer = getResizeObserver(undefined, handleResize, true);
+
+    return () => {
+      observer();
+    };
+  }, [handleResize]);
+
   return (
     <CodeEditor
       copyButtonAriaLabel={t('Copy code to clipboard')}

frontend/packages/console-shared/src/components/editor/CodeEditor.scss

@@ -2,9 +2,6 @@
 
 .ocs-yaml-editor {
   .monaco-editor {
-    // Makes automaticLayout work properly. note that this breaks height="sizeToFit"
-    position: absolute !important;
-
     .monaco-hover-content .markdown-hover {
       // matches tooltip styling seen back in OpenShift 4.18
       max-width: 500px;

frontend/packages/console-shared/src/components/editor/yaml-editor-utils.ts

@@ -7,7 +7,6 @@ import { getSwaggerDefinitions } from '@console/internal/module/k8s/swagger';
 
 export const defaultEditorOptions: monaco.editor.IEditorOptions = {
   scrollBeyondLastLine: false,
-  automaticLayout: true, // paired with position: absolute for auto-resizing
 };
 
 const findManagedMetadata = (model: monaco.editor.ITextModel) => {