Skip to content

Commit addda04

Browse files
kmcfaulkmcfaul
authored
feat(CodeEditor,Divider): consume penta & update core version (#10081)
* feat(CodeEditor,Divider): consume penta & update core version * fix treeview test * bump core ver & fix issues * fix integration * use strings * syntax updates * fix snap, update divider
1 parent c496543 commit addda04

File tree

23 files changed

+202
-189
lines changed

23 files changed

+202
-189
lines changed

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

Lines changed: 62 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,8 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
155155
isCopyEnabled?: boolean;
156156
/** Flag indicating the editor is styled using monaco's dark theme. */
157157
isDarkTheme?: boolean;
158+
/** Flag indicating the editor has a plain header. */
159+
isHeaderPlain?: boolean;
158160
/** Flag to add download button to code editor actions. */
159161
isDownloadEnabled?: boolean;
160162
/** Flag to include a label indicating the currently configured editor language. */
@@ -261,6 +263,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
261263
isUploadEnabled: false,
262264
isDownloadEnabled: false,
263265
isCopyEnabled: false,
266+
isHeaderPlain: false,
264267
copyButtonAriaLabel: 'Copy code to clipboard',
265268
uploadButtonAriaLabel: 'Upload code',
266269
downloadButtonAriaLabel: 'Download code',
@@ -492,6 +495,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
492495
emptyStateLink,
493496
customControls,
494497
isMinimapVisible,
498+
isHeaderPlain,
495499
headerMainContent,
496500
shortcutsPopoverButtonText,
497501
shortcutsPopoverProps: shortcutsPopoverPropsProp,
@@ -560,45 +564,50 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
560564
trigger: 'mouseenter focus'
561565
};
562566

563-
const editorHeader = (
564-
<div className={css(styles.codeEditorHeader)}>
565-
{
566-
<div className={css(styles.codeEditorControls)}>
567-
<CodeEditorContext.Provider value={{ code: value }}>
568-
{isCopyEnabled && (!showEmptyState || !!value) && (
569-
<CodeEditorControl
570-
icon={<CopyIcon />}
571-
aria-label={copyButtonAriaLabel}
572-
tooltipProps={{
573-
...tooltipProps,
574-
'aria-live': 'polite',
575-
content: <div>{copied ? copyButtonSuccessTooltipText : copyButtonToolTipText}</div>,
576-
exitDelay: copied ? toolTipCopyExitDelay : toolTipDelay,
577-
onTooltipHidden: () => this.setState({ copied: false })
578-
}}
579-
onClick={this.copyCode}
580-
/>
581-
)}
582-
{isUploadEnabled && (
583-
<CodeEditorControl
584-
icon={<UploadIcon />}
585-
aria-label={uploadButtonAriaLabel}
586-
tooltipProps={{ content: <div>{uploadButtonToolTipText}</div>, ...tooltipProps }}
587-
onClick={open}
588-
/>
589-
)}
590-
{isDownloadEnabled && (!showEmptyState || !!value) && (
591-
<CodeEditorControl
592-
icon={<DownloadIcon />}
593-
aria-label={downloadButtonAriaLabel}
594-
tooltipProps={{ content: <div>{downloadButtonToolTipText}</div>, ...tooltipProps }}
595-
onClick={this.download}
596-
/>
597-
)}
598-
{customControls && customControls}
599-
</CodeEditorContext.Provider>
600-
</div>
601-
}
567+
const hasEditorHeaderContent =
568+
((isCopyEnabled || isDownloadEnabled) && (!showEmptyState || !!value)) ||
569+
isUploadEnabled ||
570+
customControls ||
571+
headerMainContent ||
572+
!!shortcutsPopoverProps.bodyContent;
573+
574+
const editorHeaderContent = (
575+
<React.Fragment>
576+
<div className={css(styles.codeEditorControls)}>
577+
<CodeEditorContext.Provider value={{ code: value }}>
578+
{isCopyEnabled && (!showEmptyState || !!value) && (
579+
<CodeEditorControl
580+
icon={<CopyIcon />}
581+
aria-label={copyButtonAriaLabel}
582+
tooltipProps={{
583+
...tooltipProps,
584+
'aria-live': 'polite',
585+
content: <div>{copied ? copyButtonSuccessTooltipText : copyButtonToolTipText}</div>,
586+
exitDelay: copied ? toolTipCopyExitDelay : toolTipDelay,
587+
onTooltipHidden: () => this.setState({ copied: false })
588+
}}
589+
onClick={this.copyCode}
590+
/>
591+
)}
592+
{isUploadEnabled && (
593+
<CodeEditorControl
594+
icon={<UploadIcon />}
595+
aria-label={uploadButtonAriaLabel}
596+
tooltipProps={{ content: <div>{uploadButtonToolTipText}</div>, ...tooltipProps }}
597+
onClick={open}
598+
/>
599+
)}
600+
{isDownloadEnabled && (!showEmptyState || !!value) && (
601+
<CodeEditorControl
602+
icon={<DownloadIcon />}
603+
aria-label={downloadButtonAriaLabel}
604+
tooltipProps={{ content: <div>{downloadButtonToolTipText}</div>, ...tooltipProps }}
605+
onClick={this.download}
606+
/>
607+
)}
608+
{customControls && customControls}
609+
</CodeEditorContext.Provider>
610+
</div>
602611
{<div className={css(styles.codeEditorHeaderMain)}>{headerMainContent}</div>}
603612
{!!shortcutsPopoverProps.bodyContent && (
604613
<div className={`${styles.codeEditor}__keyboard-shortcuts`}>
@@ -609,6 +618,14 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
609618
</Popover>
610619
</div>
611620
)}
621+
</React.Fragment>
622+
);
623+
624+
const editorHeader = (
625+
<div className={css(styles.codeEditorHeader, isHeaderPlain && styles.modifiers.plain)}>
626+
{hasEditorHeaderContent && (
627+
<div className={css(styles.codeEditorHeaderContent)}>{editorHeaderContent}</div>
628+
)}
612629
{isLanguageLabelVisible && (
613630
<div className={css(styles.codeEditorTab)}>
614631
<span className={css(styles.codeEditorTabIcon)}>
@@ -643,14 +660,14 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
643660
{...getRootProps({
644661
onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog
645662
})}
646-
className={`${fileUploadStyles.fileUpload} ${isDragActive && fileUploadStyles.modifiers.dragHover} ${
647-
isLoading && fileUploadStyles.modifiers.loading
648-
}`}
663+
className={css(isLoading && fileUploadStyles.modifiers.loading)}
649664
>
650665
{editorHeader}
651-
<div className={css(styles.codeEditorMain)}>
652-
<input {...getInputProps()} /* hidden, necessary for react-dropzone */ />
653-
{(showEmptyState || providedEmptyState) && !value ? emptyState : editor}
666+
<div className={css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover)}>
667+
<div className={css(styles.codeEditorUpload)}>
668+
<input {...getInputProps()} /* hidden, necessary for react-dropzone */ />
669+
{(showEmptyState || providedEmptyState) && !value ? emptyState : editor}
670+
</div>
654671
</div>
655672
</div>
656673
) : (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const CodeEditorControl: React.FunctionComponent<CodeEditorControlProps>
3838

3939
return isVisible ? (
4040
<Tooltip {...tooltipProps}>
41-
<Button className={className} onClick={onCustomClick} variant="control" aria-label={ariaLabel} {...props}>
41+
<Button className={className} onClick={onCustomClick} variant="plain" aria-label={ariaLabel} {...props}>
4242
{icon}
4343
</Button>
4444
</Tooltip>

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import { render, screen, act } from '@testing-library/react';
33
import { CodeEditor, Language } from '../CodeEditor';
44
import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor';
5-
import fileUploadStyles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
65

76
jest.mock('@monaco-editor/react', () => jest.fn(() => <div data-testid="mock-editor"></div>));
87

@@ -35,11 +34,9 @@ test(`Renders with ${styles.modifiers.readOnly} when isReadOnly = true`, () => {
3534
);
3635
});
3736

38-
test(`Renders with ${fileUploadStyles.fileUpload} when isUploadEnabled = true`, () => {
37+
test(`Renders with ${styles.codeEditorUpload} when isUploadEnabled = true`, () => {
3938
render(<CodeEditor isUploadEnabled code="test" />);
40-
expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(
41-
fileUploadStyles.fileUpload
42-
);
39+
expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorUpload);
4340
});
4441

4542
test(`Renders with empty state when code = undefined`, () => {

0 commit comments

Comments
 (0)