fix(CodeEditor): hide button and link when read-only (#9668)

patternfly · Oct 6, 2023 · 0346933 · 0346933
1 parent 8a6d4d4
commit 0346933
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 25 deletions.
diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
@@ -526,18 +526,20 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                   headingLevel="h4"
                 />
                 <EmptyStateBody>{emptyStateBody}</EmptyStateBody>
-                <EmptyStateFooter>
-                  <EmptyStateActions>
-                    <Button variant="primary" onClick={open}>
-                      {emptyStateButton}
-                    </Button>
-                  </EmptyStateActions>
-                  <EmptyStateActions>
-                    <Button variant="link" onClick={this.toggleEmptyState}>
-                      {emptyStateLink}
-                    </Button>
-                  </EmptyStateActions>
-                </EmptyStateFooter>
+                {!isReadOnly && (
+                  <EmptyStateFooter>
+                    <EmptyStateActions>
+                      <Button variant="primary" onClick={open}>
+                        {emptyStateButton}
+                      </Button>
+                    </EmptyStateActions>
+                    <EmptyStateActions>
+                      <Button variant="link" onClick={this.toggleEmptyState}>
+                        {emptyStateLink}
+                      </Button>
+                    </EmptyStateActions>
+                  </EmptyStateFooter>
+                )}
               </EmptyState>
             ) : (
               <EmptyState variant={EmptyStateVariant.sm}>
@@ -546,13 +548,15 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                   icon={<EmptyStateIcon icon={CodeIcon} />}
                   headingLevel="h4"
                 />
-                <EmptyStateFooter>
-                  <EmptyStateActions>
-                    <Button variant="primary" onClick={this.toggleEmptyState}>
-                      {emptyStateLink}
-                    </Button>
-                  </EmptyStateActions>
-                </EmptyStateFooter>
+                {!isReadOnly && (
+                  <EmptyStateFooter>
+                    <EmptyStateActions>
+                      <Button variant="primary" onClick={this.toggleEmptyState}>
+                        {emptyStateLink}
+                      </Button>
+                    </EmptyStateActions>
+                  </EmptyStateFooter>
+                )}
               </EmptyState>
             ));
 

diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx
@@ -23,8 +23,6 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
   };
 
   const onEditorDidMount = (editor, monaco) => {
-    // eslint-disable-next-line no-console
-    console.log(editor.getValue());
     editor.layout();
     editor.focus();
     monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });

diff --git a/...ges/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/...ges/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
@@ -4,8 +4,6 @@ import { Grid, GridItem, Chip } from '@patternfly/react-core';
 
 export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
   const onEditorDidMount = (editor, monaco) => {
-    // eslint-disable-next-line no-console
-    console.log(editor.getValue());
     editor.layout();
     editor.focus();
     monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });

diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx
@@ -3,8 +3,6 @@ import { CodeEditor, Language } from '@patternfly/react-code-editor';
 
 export const CodeEditorSizeToFit: React.FunctionComponent = () => {
   const onEditorDidMount = (editor, monaco) => {
-    // eslint-disable-next-line no-console
-    console.log(editor.getValue());
     editor.layout();
     editor.focus();
     monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });