Replace EuiCodeEditor with EuiCodeBlock at DocView (#43852)

* Replace EuiCodeEditor with EuiCodeBlock

* Adapt filenames to block

src/legacy/core_plugins/kbn_doc_views/public/views/__snapshots__/json_code_block.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`returns the \`JsonCodeEditor\` component 1`] = `
+<EuiCodeBlock
+  aria-label="Read only JSON view of an elasticsearch document"
+  isCopyable={true}
+  language="json"
+  paddingSize="s"
+>
+  {
+  "_index": "test",
+  "_source": {
+    "test": 123
+  }
+}
+</EuiCodeBlock>
+`;

src/legacy/core_plugins/kbn_doc_views/public/views/__snapshots__/json_code_editor.test.tsx.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`returns the \`JsonCodeEditor\` component 1`] = `
-<EuiCodeEditor
-  aria-label={
-    <FormattedMessage
-      defaultMessage="Read only JSON view of an elasticsearch document"
-      id="kbnDocViews.json.codeEditorAriaLabel"
-      values={Object {}}
-    />
-  }
-  isReadOnly={true}
-  mode="json"
-  setOptions={
-    Object {
-      "highlightActiveLine": false,
-      "maxLines": Infinity,
-      "minLines": 20,
-      "showPrintMargin": false,
-    }
-  }
-  theme="textmate"
-  value="{
-  \\"_index\\": \\"test\\",
-  \\"_source\\": {
-    \\"test\\": 123
-  }
-}"
-  width="100%"
-/>
-`;

src/legacy/core_plugins/kbn_doc_views/public/views/json.tsx

@@ -18,7 +18,7 @@
  */
 import { addDocView } from 'ui/registry/doc_views';
 import { i18n } from '@kbn/i18n';
-import { JsonCodeEditor } from './json_code_editor';
+import { JsonCodeBlock } from './json_code_block';
 
 /*
  * Registration of the the doc view: json
@@ -29,5 +29,5 @@ addDocView({
     defaultMessage: 'JSON',
   }),
   order: 20,
-  component: JsonCodeEditor,
+  component: JsonCodeBlock,
 });

src/legacy/core_plugins/kbn_doc_views/public/views/json_code_block.test.tsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { shallow } from 'enzyme';
-import { JsonCodeEditor } from './json_code_editor';
+import { JsonCodeBlock } from './json_code_block';
 import { IndexPattern } from 'ui/index_patterns';
 
 it('returns the `JsonCodeEditor` component', () => {
@@ -30,5 +30,5 @@ it('returns the `JsonCodeEditor` component', () => {
     onAddColumn: jest.fn(),
     onRemoveColumn: jest.fn(),
   };
-  expect(shallow(<JsonCodeEditor {...props} />)).toMatchSnapshot();
+  expect(shallow(<JsonCodeBlock {...props} />)).toMatchSnapshot();
 });

src/legacy/core_plugins/kbn_doc_views/public/views/json_code_block.tsx

@@ -16,32 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-// @ts-ignore
-import { EuiCodeEditor } from '@elastic/eui';
 import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCodeBlock } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { DocViewRenderProps } from 'ui/registry/doc_views';
 
-export function JsonCodeEditor({ hit }: DocViewRenderProps) {
+export function JsonCodeBlock({ hit }: DocViewRenderProps) {
+  const label = i18n.translate('kbnDocViews.json.codeEditorAriaLabel', {
+    defaultMessage: 'Read only JSON view of an elasticsearch document',
+  });
   return (
-    <EuiCodeEditor
-      aria-label={
-        <FormattedMessage
-          id="kbnDocViews.json.codeEditorAriaLabel"
-          defaultMessage="Read only JSON view of an elasticsearch document"
-        />
-      }
-      isReadOnly
-      mode="json"
-      setOptions={{
-        showPrintMargin: false,
-        minLines: 20,
-        maxLines: Infinity,
-        highlightActiveLine: false,
-      }}
-      theme="textmate"
-      value={JSON.stringify(hit, null, 2)}
-      width="100%"
-    />
+    <EuiCodeBlock aria-label={label} language="json" isCopyable paddingSize="s">
+      {JSON.stringify(hit, null, 2)}
+    </EuiCodeBlock>
   );
 }