diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index 0311481f349..67acf61d799 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx @@ -155,6 +155,8 @@ export interface CodeEditorProps extends Omit, ' isCopyEnabled?: boolean; /** Flag indicating the editor is styled using monaco's dark theme. */ isDarkTheme?: boolean; + /** Flag indicating the editor has a plain header. */ + isHeaderPlain?: boolean; /** Flag to add download button to code editor actions. */ isDownloadEnabled?: boolean; /** Flag to include a label indicating the currently configured editor language. */ @@ -261,6 +263,7 @@ class CodeEditor extends React.Component { isUploadEnabled: false, isDownloadEnabled: false, isCopyEnabled: false, + isHeaderPlain: false, copyButtonAriaLabel: 'Copy code to clipboard', uploadButtonAriaLabel: 'Upload code', downloadButtonAriaLabel: 'Download code', @@ -492,6 +495,7 @@ class CodeEditor extends React.Component { emptyStateLink, customControls, isMinimapVisible, + isHeaderPlain, headerMainContent, shortcutsPopoverButtonText, shortcutsPopoverProps: shortcutsPopoverPropsProp, @@ -560,45 +564,50 @@ class CodeEditor extends React.Component { trigger: 'mouseenter focus' }; - const editorHeader = ( -
- { -
- - {isCopyEnabled && (!showEmptyState || !!value) && ( - } - aria-label={copyButtonAriaLabel} - tooltipProps={{ - ...tooltipProps, - 'aria-live': 'polite', - content:
{copied ? copyButtonSuccessTooltipText : copyButtonToolTipText}
, - exitDelay: copied ? toolTipCopyExitDelay : toolTipDelay, - onTooltipHidden: () => this.setState({ copied: false }) - }} - onClick={this.copyCode} - /> - )} - {isUploadEnabled && ( - } - aria-label={uploadButtonAriaLabel} - tooltipProps={{ content:
{uploadButtonToolTipText}
, ...tooltipProps }} - onClick={open} - /> - )} - {isDownloadEnabled && (!showEmptyState || !!value) && ( - } - aria-label={downloadButtonAriaLabel} - tooltipProps={{ content:
{downloadButtonToolTipText}
, ...tooltipProps }} - onClick={this.download} - /> - )} - {customControls && customControls} -
-
- } + const hasEditorHeaderContent = + ((isCopyEnabled || isDownloadEnabled) && (!showEmptyState || !!value)) || + isUploadEnabled || + customControls || + headerMainContent || + !!shortcutsPopoverProps.bodyContent; + + const editorHeaderContent = ( + +
+ + {isCopyEnabled && (!showEmptyState || !!value) && ( + } + aria-label={copyButtonAriaLabel} + tooltipProps={{ + ...tooltipProps, + 'aria-live': 'polite', + content:
{copied ? copyButtonSuccessTooltipText : copyButtonToolTipText}
, + exitDelay: copied ? toolTipCopyExitDelay : toolTipDelay, + onTooltipHidden: () => this.setState({ copied: false }) + }} + onClick={this.copyCode} + /> + )} + {isUploadEnabled && ( + } + aria-label={uploadButtonAriaLabel} + tooltipProps={{ content:
{uploadButtonToolTipText}
, ...tooltipProps }} + onClick={open} + /> + )} + {isDownloadEnabled && (!showEmptyState || !!value) && ( + } + aria-label={downloadButtonAriaLabel} + tooltipProps={{ content:
{downloadButtonToolTipText}
, ...tooltipProps }} + onClick={this.download} + /> + )} + {customControls && customControls} +
+
{
{headerMainContent}
} {!!shortcutsPopoverProps.bodyContent && (
@@ -609,6 +618,14 @@ class CodeEditor extends React.Component {
)} +
+ ); + + const editorHeader = ( +
+ {hasEditorHeaderContent && ( +
{editorHeaderContent}
+ )} {isLanguageLabelVisible && (
@@ -643,14 +660,14 @@ class CodeEditor extends React.Component { {...getRootProps({ onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog })} - className={`${fileUploadStyles.fileUpload} ${isDragActive && fileUploadStyles.modifiers.dragHover} ${ - isLoading && fileUploadStyles.modifiers.loading - }`} + className={css(isLoading && fileUploadStyles.modifiers.loading)} > {editorHeader} -
- - {(showEmptyState || providedEmptyState) && !value ? emptyState : editor} +
+
+ + {(showEmptyState || providedEmptyState) && !value ? emptyState : editor} +
) : ( diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx index 132448c50ad..d4872e711a5 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx @@ -38,7 +38,7 @@ export const CodeEditorControl: React.FunctionComponent return isVisible ? ( - diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx index 78e403d5fec..ebdfe4c053c 100644 --- a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { render, screen, act } from '@testing-library/react'; import { CodeEditor, Language } from '../CodeEditor'; import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor'; -import fileUploadStyles from '@patternfly/react-styles/css/components/FileUpload/file-upload'; jest.mock('@monaco-editor/react', () => jest.fn(() =>
)); @@ -35,11 +34,9 @@ test(`Renders with ${styles.modifiers.readOnly} when isReadOnly = true`, () => { ); }); -test(`Renders with ${fileUploadStyles.fileUpload} when isUploadEnabled = true`, () => { +test(`Renders with ${styles.codeEditorUpload} when isUploadEnabled = true`, () => { render(); - expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass( - fileUploadStyles.fileUpload - ); + expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorUpload); }); test(`Renders with empty state when code = undefined`, () => { diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap index 2dfcbd78dd7..999965dd104 100644 --- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap +++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = ` class="pf-v5-c-code-editor" >