From 0393cf2c18c4b8590dc1d29b9cf0fc860c508511 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Wed, 13 Nov 2019 16:26:36 +0000
Subject: [PATCH] Removing EuiCodeEditor from card

---
 .../custom_patterns_input.js                  | 45 ++++++++-----------
 .../components/event_input/event_input.js     | 39 +++++++---------
 .../components/event_output/event_output.js   | 34 ++++++--------
 .../components/pattern_input/pattern_input.js | 41 +++++++----------
 4 files changed, 63 insertions(+), 96 deletions(-)

diff --git a/x-pack/legacy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js b/x-pack/legacy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
index cc1d2bc53a9df..12429652bb633 100644
--- a/x-pack/legacy/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
+++ b/x-pack/legacy/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,49 +23,41 @@ 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%"
-            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%"
+          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
index 19335a88e9b87..8d4a6b308ba0c 100644
--- 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,39 +5,30 @@
  */
 
 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%"
-          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%"
+        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
index f669ac7a61fdd..a513eb3716d5c 100644
--- 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,38 +5,32 @@
  */
 
 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"
-          isReadOnly
-          width="100%"
-          height="340px"
-          value={JSON.stringify(value, null, 2)}
-          setOptions={{
-            highlightActiveLine: false,
-            highlightGutterLine: false,
-          }}
-        />
-      </EuiPanel>
+      <EuiCodeEditor
+        mode="json"
+        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
index 09a6e100d9f88..fd22bbcde1cc3 100644
--- 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,11 +5,7 @@
  */
 
 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';
@@ -17,29 +13,24 @@ 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%"
-          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%"
+        value={value}
+        onChange={onChange}
+        mode={new GrokMode()}
+        setOptions={{
+          highlightActiveLine: false,
+          highlightGutterLine: false,
+          minLines: EDITOR.PATTERN_MIN_LINES,
+          maxLines: EDITOR.PATTERN_MAX_LINES,
+        }}
+      />
     </EuiFormRow>
   );
 }