Removing EuiCode from inside EuiPanel (elastic#50683)

miukimiu · Nov 15, 2019 · 8ba0680 · 8ba0680
1 parent 62e5759
commit 8ba0680
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 102 deletions.
diff --git a/...acy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js b/...acy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
@@ -10,9 +10,8 @@ import {
   EuiCallOut,
   EuiCodeBlock,
   EuiFormRow,
-  EuiPanel,
   EuiCodeEditor,
-  EuiSpacer
+  EuiSpacer,
 } from '@elastic/eui';
 import { EDITOR } from '../../../common/constants';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -24,51 +23,43 @@ MSG message-id=<%{GREEDYDATA}>`;
   return (
     <EuiAccordion
       id="customPatternsInput"
-      buttonContent={(
+      buttonContent={
         <FormattedMessage
           id="xpack.grokDebugger.customPatternsButtonLabel"
           defaultMessage="Custom Patterns"
         />
-      )}
+      }
       data-test-subj="btnToggleCustomPatternsInput"
     >
-
       <EuiSpacer size="m" />
 
       <EuiCallOut
-        title={(
+        title={
           <FormattedMessage
             id="xpack.grokDebugger.customPatterns.callOutTitle"
             defaultMessage="Enter one custom pattern per line. For example:"
           />
-        )}
+        }
       >
-        <EuiCodeBlock>
-          { sampleCustomPatterns }
-        </EuiCodeBlock>
+        <EuiCodeBlock>{sampleCustomPatterns}</EuiCodeBlock>
       </EuiCallOut>
 
       <EuiSpacer size="m" />
 
-      <EuiFormRow
-        fullWidth
-        data-test-subj="aceCustomPatternsInput"
-      >
-        <EuiPanel paddingSize="s">
-          <EuiCodeEditor
-            width="100%"
-            theme="textmate"
-            mode="text"
-            value={value}
-            onChange={onChange}
-            setOptions={{
-              highlightActiveLine: false,
-              highlightGutterLine: false,
-              minLines: EDITOR.PATTERN_MIN_LINES,
-              maxLines: EDITOR.PATTERN_MAX_LINES,
-            }}
-          />
-        </EuiPanel>
+      <EuiFormRow fullWidth data-test-subj="aceCustomPatternsInput">
+        <EuiCodeEditor
+          width="100%"
+          theme="textmate"
+          mode="text"
+          value={value}
+          onChange={onChange}
+          setOptions={{
+            highlightActiveLine: false,
+            highlightGutterLine: false,
+            minLines: EDITOR.PATTERN_MIN_LINES,
+            maxLines: EDITOR.PATTERN_MAX_LINES,
+          }}
+        />
       </EuiFormRow>
     </EuiAccordion>
   );

diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/event_input/event_input.js b/x-pack/legacy/plugins/grokdebugger/public/components/event_input/event_input.js
@@ -5,41 +5,32 @@
  */
 
 import React from 'react';
-import {
-  EuiFormRow,
-  EuiPanel,
-  EuiCodeEditor
-} from '@elastic/eui';
+import { EuiFormRow, EuiCodeEditor } from '@elastic/eui';
 import { EDITOR } from '../../../common/constants';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export function EventInput({ value, onChange }) {
   return (
     <EuiFormRow
-      label={(
-        <FormattedMessage
-          id="xpack.grokDebugger.sampleDataLabel"
-          defaultMessage="Sample Data"
-        />
-      )}
+      label={
+        <FormattedMessage id="xpack.grokDebugger.sampleDataLabel" defaultMessage="Sample Data" />
+      }
       fullWidth
       data-test-subj="aceEventInput"
     >
-      <EuiPanel paddingSize="s">
-        <EuiCodeEditor
-          width="100%"
-          theme="textmate"
-          mode="text"
-          value={value}
-          onChange={onChange}
-          setOptions={{
-            highlightActiveLine: false,
-            highlightGutterLine: false,
-            minLines: EDITOR.SAMPLE_DATA_MIN_LINES,
-            maxLines: EDITOR.SAMPLE_DATA_MAX_LINES
-          }}
-        />
-      </EuiPanel>
+      <EuiCodeEditor
+        width="100%"
+        theme="textmate"
+        mode="text"
+        value={value}
+        onChange={onChange}
+        setOptions={{
+          highlightActiveLine: false,
+          highlightGutterLine: false,
+          minLines: EDITOR.SAMPLE_DATA_MIN_LINES,
+          maxLines: EDITOR.SAMPLE_DATA_MAX_LINES,
+        }}
+      />
     </EuiFormRow>
   );
 }
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/event_output/event_output.js b/x-pack/legacy/plugins/grokdebugger/public/components/event_output/event_output.js
@@ -5,39 +5,33 @@
  */
 
 import React from 'react';
-import {
-  EuiFormRow,
-  EuiPanel,
-  EuiCodeEditor
-} from '@elastic/eui';
+import { EuiFormRow, EuiCodeEditor } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export function EventOutput({ value }) {
   return (
     <EuiFormRow
-      label={(
+      label={
         <FormattedMessage
           id="xpack.grokDebugger.structuredDataLabel"
           defaultMessage="Structured Data"
         />
-      )}
+      }
       fullWidth
       data-test-subj="aceEventOutput"
     >
-      <EuiPanel paddingSize="s">
-        <EuiCodeEditor
-          mode="json"
-          theme="textmate"
-          isReadOnly
-          width="100%"
-          height="340px"
-          value={JSON.stringify(value, null, 2)}
-          setOptions={{
-            highlightActiveLine: false,
-            highlightGutterLine: false,
-          }}
-        />
-      </EuiPanel>
+      <EuiCodeEditor
+        mode="json"
+        theme="textmate"
+        isReadOnly
+        width="100%"
+        height="340px"
+        value={JSON.stringify(value, null, 2)}
+        setOptions={{
+          highlightActiveLine: false,
+          highlightGutterLine: false,
+        }}
+      />
     </EuiFormRow>
   );
 }
diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/pattern_input/pattern_input.js b/x-pack/legacy/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
@@ -5,42 +5,33 @@
  */
 
 import React from 'react';
-import {
-  EuiFormRow,
-  EuiPanel,
-  EuiCodeEditor
-} from '@elastic/eui';
+import { EuiFormRow, EuiCodeEditor } from '@elastic/eui';
 import { EDITOR } from '../../../common/constants';
 import { GrokMode } from '../../lib/ace';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export function PatternInput({ value, onChange }) {
   return (
     <EuiFormRow
-      label={(
-        <FormattedMessage
-          id="xpack.grokDebugger.grokPatternLabel"
-          defaultMessage="Grok Pattern"
-        />
-      )}
+      label={
+        <FormattedMessage id="xpack.grokDebugger.grokPatternLabel" defaultMessage="Grok Pattern" />
+      }
       fullWidth
       data-test-subj="acePatternInput"
     >
-      <EuiPanel paddingSize="s">
-        <EuiCodeEditor
-          width="100%"
-          theme="textmate"
-          value={value}
-          onChange={onChange}
-          mode={new GrokMode()}
-          setOptions={{
-            highlightActiveLine: false,
-            highlightGutterLine: false,
-            minLines: EDITOR.PATTERN_MIN_LINES,
-            maxLines: EDITOR.PATTERN_MAX_LINES,
-          }}
-        />
-      </EuiPanel>
+      <EuiCodeEditor
+        width="100%"
+        theme="textmate"
+        value={value}
+        onChange={onChange}
+        mode={new GrokMode()}
+        setOptions={{
+          highlightActiveLine: false,
+          highlightGutterLine: false,
+          minLines: EDITOR.PATTERN_MIN_LINES,
+          maxLines: EDITOR.PATTERN_MAX_LINES,
+        }}
+      />
     </EuiFormRow>
   );
 }