From 1572e8543cf4f738e1c437fdc2c245f7a5e4088b Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Tue, 17 Sep 2024 14:16:01 -0400
Subject: [PATCH 1/3] fix(CodeEditor): Set default height

The docs state that the default height is 100%. However, the examples just break if you don't pass in a height. This should help.
---
 .../src/components/CodeEditor/CodeEditor.tsx  | 26 +++++++--
 .../CodeEditor/examples/CodeEditor.md         |  6 ++
 .../CodeEditor/examples/CodeEditorModal.tsx   | 57 +++++++++++++++++++
 3 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorModal.tsx

diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
index ac7fc3f5d4b..7866e08bad7 100644
--- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
@@ -250,7 +250,6 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
     onEditorDidMount: () => {},
     language: Language.plaintext,
     isDarkTheme: false,
-    height: '',
     width: '',
     isLineNumbersVisible: true,
     isReadOnly: false,
@@ -641,7 +640,13 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
           );
 
           const editor = (
-            <div className={css(styles.codeEditorCode)} ref={this.wrapperRef} tabIndex={0} dir="ltr">
+            <div
+              className={css(styles.codeEditorCode)}
+              style={{ height: '100%' }}
+              ref={this.wrapperRef}
+              tabIndex={0}
+              dir="ltr"
+            >
               <Editor
                 height={height}
                 width={width}
@@ -658,7 +663,11 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
           );
 
           return (
-            <div className={css(styles.codeEditor, isReadOnly && styles.modifiers.readOnly, className)} ref={this.ref}>
+            <div
+              className={css(styles.codeEditor, isReadOnly && styles.modifiers.readOnly, className)}
+              style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+              ref={this.ref}
+            >
               {isUploadEnabled || providedEmptyState ? (
                 <div
                   {...getRootProps({
@@ -667,7 +676,10 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                   className={css(isLoading && fileUploadStyles.modifiers.loading)}
                 >
                   {editorHeader}
-                  <div className={css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover)}>
+                  <div
+                    className={css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover)}
+                    style={{ flexGrow: 1 }}
+                  >
                     <div className={css(styles.codeEditorUpload)}>
                       <input {...getInputProps()} /* hidden, necessary for react-dropzone */ />
                       {(showEmptyState || providedEmptyState) && !value ? emptyState : editor}
@@ -677,7 +689,11 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
               ) : (
                 <>
                   {editorHeader}
-                  {showEditor && <div className={css(styles.codeEditorMain)}>{editor}</div>}
+                  {showEditor && (
+                    <div className={css(styles.codeEditorMain)} style={{ flexGrow: 1 }}>
+                      {editor}
+                    </div>
+                  )}
                 </>
               )}
             </div>
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
index 62c95d96cd1..a02f7d36e76 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
@@ -43,3 +43,9 @@ These examples below are the shortcuts that we recommend describing in the popov
 ```ts file="CodeEditorCustomControl.tsx"
 
 ```
+
+### With 100% height
+
+```ts file="CodeEditorModal.tsx"
+
+```
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorModal.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorModal.tsx
new file mode 100644
index 00000000000..531b61bb396
--- /dev/null
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorModal.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
+
+export const CodeEditorFullHeight: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const onEditorDidMount = (editor, monaco) => {
+    editor.layout();
+    editor.focus();
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+  };
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const onChange = (value) => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle} ouiaId="ShowBasicModal">
+        Show basic modal with code editor inside
+      </Button>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        ouiaId="BasicModal"
+        aria-labelledby="basic-modal-title"
+        aria-describedby="modal-box-body-basic"
+        style={{ height: '800px' }}
+      >
+        <ModalHeader title="Basic modal" labelId="basic-modal-title" />
+        <ModalBody id="modal-box-body-basic">
+          <CodeEditor
+            isLanguageLabelVisible
+            code="Some example content"
+            onChange={onChange}
+            language={Language.javascript}
+            onEditorDidMount={onEditorDidMount}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

From 4b7c7123e09dce654fe540c97e4648034c42e498 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Wed, 18 Sep 2024 14:05:30 -0400
Subject: [PATCH 2/3] Switch to modifier classes

---
 .../src/components/CodeEditor/CodeEditor.tsx  | 27 ++++++++++++-------
 .../CodeEditor/examples/CodeEditorModal.tsx   |  1 +
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
index 7866e08bad7..38d0f122dbc 100644
--- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
@@ -149,7 +149,7 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
   emptyStateTitle?: React.ReactNode;
   /** Editor header main content title. */
   headerMainContent?: string;
-  /** Height of code editor. Defaults to 100%. 'sizeToFit' will automatically change the height
+  /** Height of code editor. 'sizeToFit' will automatically change the height
    * to the height of the content.
    */
   height?: string | 'sizeToFit';
@@ -157,6 +157,8 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
   isCopyEnabled?: boolean;
   /** Flag indicating the editor is styled using monaco's dark theme. */
   isDarkTheme?: boolean;
+  /** Flag that enables component to consume the available height of its container */
+  isFullHeight?: boolean;
   /** Flag indicating the editor has a plain header. */
   isHeaderPlain?: boolean;
   /** Flag to add download button to code editor actions. */
@@ -520,6 +522,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
       },
       ...optionsProp
     };
+    const isFullHeight = this.props.height === '100%' ? true : this.props.isFullHeight;
 
     return (
       <Dropzone multiple={false} onDropAccepted={this.onDropAccepted} onDropRejected={this.onDropRejected}>
@@ -641,14 +644,13 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
 
           const editor = (
             <div
-              className={css(styles.codeEditorCode)}
-              style={{ height: '100%' }}
+              className={css(styles.codeEditorCode, isFullHeight && styles.modifiers.fullHeight)}
               ref={this.wrapperRef}
               tabIndex={0}
               dir="ltr"
             >
               <Editor
-                height={height}
+                height={height === '100%' ? undefined : height}
                 width={width}
                 language={language}
                 value={value}
@@ -664,8 +666,12 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
 
           return (
             <div
-              className={css(styles.codeEditor, isReadOnly && styles.modifiers.readOnly, className)}
-              style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+              className={css(
+                styles.codeEditor,
+                isReadOnly && styles.modifiers.readOnly,
+                isFullHeight && styles.modifiers.fullHeight,
+                className
+              )}
               ref={this.ref}
             >
               {isUploadEnabled || providedEmptyState ? (
@@ -677,8 +683,11 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                 >
                   {editorHeader}
                   <div
-                    className={css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover)}
-                    style={{ flexGrow: 1 }}
+                    className={css(
+                      styles.codeEditorMain,
+                      isDragActive && styles.modifiers.dragHover,
+                      isFullHeight && styles.modifiers.fullHeight
+                    )}
                   >
                     <div className={css(styles.codeEditorUpload)}>
                       <input {...getInputProps()} /* hidden, necessary for react-dropzone */ />
@@ -690,7 +699,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                 <>
                   {editorHeader}
                   {showEditor && (
-                    <div className={css(styles.codeEditorMain)} style={{ flexGrow: 1 }}>
+                    <div className={css(styles.codeEditorMain, isFullHeight && styles.modifiers.fullHeight)}>
                       {editor}
                     </div>
                   )}
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorModal.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorModal.tsx
index 531b61bb396..f048c4eed1a 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorModal.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorModal.tsx
@@ -41,6 +41,7 @@ export const CodeEditorFullHeight: React.FunctionComponent = () => {
             onChange={onChange}
             language={Language.javascript}
             onEditorDidMount={onEditorDidMount}
+            isFullHeight
           />
         </ModalBody>
         <ModalFooter>

From 7dfb53cee9477ec0700214fdb0ca68df902e1366 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Wed, 18 Sep 2024 16:44:14 -0400
Subject: [PATCH 3/3] Adjust to Coker's new suggestions

---
 .../src/components/CodeEditor/CodeEditor.tsx  | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
index 38d0f122dbc..c9a0b444c5c 100644
--- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
@@ -644,10 +644,11 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
 
           const editor = (
             <div
-              className={css(styles.codeEditorCode, isFullHeight && styles.modifiers.fullHeight)}
+              className={css(styles.codeEditorCode)}
               ref={this.wrapperRef}
               tabIndex={0}
               dir="ltr"
+              style={{ height: '100%' }}
             >
               <Editor
                 height={height === '100%' ? undefined : height}
@@ -666,13 +667,13 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
 
           return (
             <div
-              className={css(
-                styles.codeEditor,
-                isReadOnly && styles.modifiers.readOnly,
-                isFullHeight && styles.modifiers.fullHeight,
-                className
-              )}
+              className={css(styles.codeEditor, isReadOnly && styles.modifiers.readOnly, className)}
               ref={this.ref}
+              style={
+                isFullHeight
+                  ? { height: '100%', display: 'flex', flexDirection: 'column' }
+                  : { display: 'flex', flexDirection: 'column' }
+              }
             >
               {isUploadEnabled || providedEmptyState ? (
                 <div
@@ -680,14 +681,12 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                     onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog
                   })}
                   className={css(isLoading && fileUploadStyles.modifiers.loading)}
+                  style={{ display: 'flex', flexDirection: 'column', flexGrow: '1' }}
                 >
                   {editorHeader}
                   <div
-                    className={css(
-                      styles.codeEditorMain,
-                      isDragActive && styles.modifiers.dragHover,
-                      isFullHeight && styles.modifiers.fullHeight
-                    )}
+                    className={css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover)}
+                    style={{ flexGrow: 1 }}
                   >
                     <div className={css(styles.codeEditorUpload)}>
                       <input {...getInputProps()} /* hidden, necessary for react-dropzone */ />
@@ -699,7 +698,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                 <>
                   {editorHeader}
                   {showEditor && (
-                    <div className={css(styles.codeEditorMain, isFullHeight && styles.modifiers.fullHeight)}>
+                    <div className={css(styles.codeEditorMain)} style={{ flexGrow: 1 }}>
                       {editor}
                     </div>
                   )}