fix(CodeEditor): only include pf-v6-c-code-editor__upload when dragging is active over an empty state

Author: nicolethoen

eslint.config.mjs

@@ -16,6 +16,7 @@ export default [
       '**/css',
       'packages/react-core/src/helpers/Popper/thirdparty',
       'packages/react-docs/patternfly-docs/generated',
+      'packages/react-docs/coverage',
       '.history/*',
       'packages/react-docs/static',
       '**/.cache'

packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

@@ -678,10 +678,14 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                 >
                   {editorHeader}
                   <div className={css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover)}>
-                    <div className={css(styles.codeEditorUpload)}>
-                      <input {...getInputProps()} /* hidden, necessary for react-dropzone */ hidden />
-                      {(showEmptyState || providedEmptyState) && !value ? emptyState : editor}
-                    </div>
+                    {(showEmptyState || providedEmptyState) && !value ? (
+                      <div className={css(styles.codeEditorUpload)}>
+                        <input {...getInputProps()} /* hidden, necessary for react-dropzone */ hidden />
+                        {emptyState}
+                      </div>
+                    ) : (
+                      editor
+                    )}
                   </div>
                 </div>
               ) : (

packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx

@@ -15,10 +15,9 @@ test('Matches snapshot with control buttons enabled', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test(`Renders with default classes ${styles.codeEditor}, ${styles.codeEditorMain}, ${styles.codeEditorCode}`, () => {
+test(`Renders with default classes ${styles.codeEditor}, ${styles.codeEditorCode}`, () => {
   render(<CodeEditor />);
   expect(screen.getByTestId('mock-editor').parentElement).toHaveClass(styles.codeEditorCode);
-  expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorMain);
   expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(styles.codeEditor);
 });
 
@@ -34,9 +33,9 @@ test(`Renders with ${styles.modifiers.readOnly} when isReadOnly = true`, () => {
   );
 });
 
-test(`Renders with ${styles.codeEditorUpload} when isUploadEnabled = true`, () => {
+test(`Renders with ${styles.codeEditorMain} when isUploadEnabled = true`, () => {
   render(<CodeEditor isUploadEnabled code="test" />);
-  expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorUpload);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorMain);
 });
 
 test(`Renders with empty state when code = undefined`, () => {

packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap

@@ -116,23 +116,13 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
         class="pf-v6-c-code-editor__main"
       >
         <div
-          class="pf-v6-c-code-editor__upload"
+          class="pf-v6-c-code-editor__code"
+          dir="ltr"
+          tabindex="0"
         >
-          <input
-            hidden=""
-            style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-            tabindex="-1"
-            type="file"
-          />
           <div
-            class="pf-v6-c-code-editor__code"
-            dir="ltr"
-            tabindex="0"
-          >
-            <div
-              data-testid="mock-editor"
-            />
-          </div>
+            data-testid="mock-editor"
+          />
         </div>
       </div>
     </div>