Replace EuiCodeEditor with EuiCodeBlock at DocView (#43852)

* Replace EuiCodeEditor with EuiCodeBlock

* Adapt filenames to block

Author: kertal

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

@@ -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/__snapshots__/json_code_editor.test.tsx.snap

@@ -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.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>
   );
 }