ACM-16850-miscellaneous-monaco-issues (stolostron#4181)

* ACM-16850-miscellaneous-monaco-issues

Signed-off-by: John Swanke <jswanke@redhat.com>

* fix snaps

Signed-off-by: John Swanke <jswanke@redhat.com>

---------

Signed-off-by: John Swanke <jswanke@redhat.com>

Author: jeswanke

frontend/src/components/SyncEditor/SyncEditor.tsx

@@ -179,6 +179,7 @@ export function SyncEditor(props: SyncEditorProps): JSX.Element {
     window.getEditorValue = () => editor.getValue()
     setEditor(editor)
     setMonaco(monaco)
+    layoutEditor(editor)
   }
 
   useEffect(() => {
@@ -752,25 +753,32 @@ export function SyncEditor(props: SyncEditorProps): JSX.Element {
     ]
   )
 
-  useResizeObserver(pageRef, (entry) => {
-    const { width } = entry.contentRect
-    let { height } = entry.contentRect
-
-    if (pageRef.current) {
-      height = window.innerHeight - pageRef.current?.getBoundingClientRect().top
-    }
-
-    if (variant === 'toolbar') {
-      height -= 36
-    }
-    if (editorHasErrors) {
-      height -= 75
-    }
-    if (editor) {
-      editor.layout({ width, height })
-      setShowCondensed(width < 500)
-    }
+  useResizeObserver(pageRef, () => {
+    layoutEditor(editor)
   })
+  const layoutEditor = useCallback(
+    (editor: any) => {
+      if (pageRef.current && editor) {
+        const rect = pageRef.current.getBoundingClientRect()
+        const { width } = rect
+        let { height } = rect
+
+        if (pageRef.current) {
+          height = window.innerHeight - pageRef.current?.getBoundingClientRect().top
+        }
+
+        if (variant === 'toolbar') {
+          height -= 36
+        }
+        if (editorHasErrors) {
+          height -= 75
+        }
+        editor.layout({ width, height })
+        setShowCondensed(width < 500)
+      }
+    },
+    [editorHasErrors, variant]
+  )
 
   return (
     <div ref={pageRef} className="sync-editor__container">

frontend/src/components/TemplateEditor/TemplateEditor.js

@@ -835,8 +835,16 @@ export default class TemplateEditor extends React.Component {
       highlightDecorations(this.editors, this.state.decorationRows, this.state.i18n)
     }
     this.layoutEditors()
+    editor.clearedUndoRedoStack = false
     editor.onDidChangeModelContent(() => {
+      const editorHasFocus = !!document.querySelector('.monaco-editor.focused')
+      const activeId = document.activeElement?.id
+      const formHasFocus = !editorHasFocus && ['undo-button', 'redo-button'].indexOf(activeId) === -1
       const model = editor.getModel()
+      if (!editor.clearedUndoRedoStack || formHasFocus) {
+        model._undoRedoService._editStacks.clear()
+        editor.clearedUndoRedoStack = true
+      }
       const hasUndo = model.canUndo()
       const hasRedo = model.canRedo()
       this.setState({ hasUndo, hasRedo })

frontend/src/components/TemplateEditor/components/EditorBar.js

@@ -66,6 +66,7 @@ class EditorButton extends React.Component {
           role={'button'}
           aria-label={tooltip}
           title={tooltip}
+          id={`${icon}-button`}
           onClick={this.handleClick}
           onKeyPress={this.handleKeyPress}
         >

frontend/src/components/TemplateEditor/components/EditorHeader.js

@@ -69,6 +69,7 @@ class EditorHeader extends React.Component {
               variant="inline-compact"
               isBlock
               onCopy={() => handleEditorCommand('copyAll')}
+              style={{ backgroundColor: '#25282c' }}
             />
           </div>
         </div>

frontend/src/components/TemplateEditor/components/YamlEditor.js

@@ -2,6 +2,7 @@
 'use strict'
 
 import React from 'react'
+import debounce from 'lodash/debounce'
 import PropTypes from 'prop-types'
 import { DecorationType } from '../utils/source-utils'
 import { global_BackgroundColor_200 as globalBackground200 } from '@patternfly/react-tokens/dist/js/global_BackgroundColor_200'
@@ -32,8 +33,8 @@ class YamlEditor extends React.Component {
           language: 'yaml',
           height: '100%',
           width: '100%',
+          theme: 'console',
           options: {
-            theme: 'console',
             wordWrap: 'wordWrapColumn',
             wordWrapColumn: 132,
             wordWrapMinified: false,
@@ -50,6 +51,7 @@ class YamlEditor extends React.Component {
           editorWillMount: this.editorWillMount.bind(this),
           onChange: onYamlChange,
         }),
+      editorHasFocus: false,
     }
   }
 
@@ -159,14 +161,31 @@ class YamlEditor extends React.Component {
         }
       }).bind(this)
     )
+
+    editor.onMouseDown(
+      debounce(() => {
+        const editorHasFocus = !!document.querySelector('.monaco-editor.focused')
+        this.setState({ editorHasFocus })
+      }, 0)
+    )
+
+    editor.onDidBlurEditorWidget(() => {
+      const editorHasFocus = !!document.querySelector('.monaco-editor.focused')
+      const activeId = document.activeElement?.id
+      if (!editorHasFocus && ['undo-button', 'redo-button'].indexOf(activeId) === -1) {
+        this.setState({ editorHasFocus })
+      }
+    })
   }
 
   shouldComponentUpdate(nextProps) {
+    // if editor has focus, ignore form changes, since editor is doing all the changes
     return (
-      this.props.yaml !== nextProps.yaml ||
-      this.props.hide !== nextProps.hide ||
-      this.props.readOnly !== nextProps.readOnly ||
-      this.props.showCondensed !== nextProps.showCondensed
+      !this.state.editorHasFocus &&
+      (this.props.yaml !== nextProps.yaml ||
+        this.props.hide !== nextProps.hide ||
+        this.props.readOnly !== nextProps.readOnly ||
+        this.props.showCondensed !== nextProps.showCondensed)
     )
   }
 
@@ -193,9 +212,9 @@ class YamlEditor extends React.Component {
         {editor &&
           React.cloneElement(editor, {
             value: yaml,
+            theme: 'console',
             options: {
               ...this.state.editor.props.options,
-              theme: 'console',
               wordWrapColumn: showCondensed ? 512 : 256,
               minimap: {
                 enabled: !showCondensed,

frontend/src/components/TemplateEditor/components/__snapshots__/EditorBar.test.js.snap

@@ -23,6 +23,7 @@ exports[`EditorBar component renders as expected 1`] = `
         >
           <div
             class="editor-bar-button restore"
+            id="undefined-button"
             role="button"
             tabindex="0"
           >
@@ -34,6 +35,7 @@ exports[`EditorBar component renders as expected 1`] = `
         >
           <div
             class="editor-bar-button undo disabled"
+            id="undo-button"
             role="button"
             tabindex="0"
           >
@@ -53,6 +55,7 @@ exports[`EditorBar component renders as expected 1`] = `
           </div>
           <div
             class="editor-bar-button redo"
+            id="redo-button"
             role="button"
             tabindex="0"
           >
@@ -116,6 +119,7 @@ exports[`EditorBar component renders as expected 1`] = `
             </div>
             <div
               class="editor-bar-button previous disabled"
+              id="previous-button"
               role="button"
               tabindex="0"
             >
@@ -135,6 +139,7 @@ exports[`EditorBar component renders as expected 1`] = `
             </div>
             <div
               class="editor-bar-button next disabled"
+              id="next-button"
               role="button"
               tabindex="0"
             >
@@ -164,6 +169,7 @@ exports[`EditorBar component renders as expected 1`] = `
       >
         <div
           class="editor-bar-button close"
+          id="close-button"
           role="button"
           tabindex="0"
         >

frontend/src/components/TemplateEditor/components/__snapshots__/EditorHeader.test.js.snap

@@ -62,6 +62,7 @@ exports[`EditorHeader component renders as expected 1`] = `
         class="pf-v5-c-clipboard-copy pf-m-inline pf-m-block"
         data-ouia-component-type="PF5/ClipboardCopy"
         data-ouia-safe="true"
+        style="background-color: rgb(37, 40, 44);"
       >
         <span
           class="pf-v5-c-clipboard-copy__text"