Split up components, restructure

x-pack/legacy/plugins/painless_playground/public/components/editor.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { EuiSpacer, EuiPageContent } from '@elastic/eui';
+import { CodeEditor } from '../../../../../../src/plugins/kibana_react/public';
+
+interface Props {
+  code: string;
+  setCode: (code: string) => void;
+  renderMainControls: () => React.ReactElement;
+}
+
+export function Editor({ code, setCode, renderMainControls }: Props) {
+  return (
+    <>
+      <EuiSpacer size="s" />
+      <EuiPageContent panelPaddingSize="m">
+        <EuiPageContent panelPaddingSize="s">
+          <CodeEditor
+            languageId="painless"
+            height={250}
+            value={code}
+            onChange={setCode}
+            options={{
+              fontSize: 12,
+              minimap: {
+                enabled: false,
+              },
+              scrollBeyondLastLine: false,
+              wordWrap: 'on',
+              wrappingIndent: 'indent',
+            }}
+          />
+        </EuiPageContent>
+        <EuiSpacer size="m" />
+        {renderMainControls()}
+      </EuiPageContent>
+    </>
+  );
+}

x-pack/legacy/plugins/painless_playground/public/components/main_controls.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+
+interface Props {
+  submit: () => void;
+  disabled: boolean;
+  toggleFlyout: () => void;
+}
+
+export function MainControls({ submit, disabled, toggleFlyout }: Props) {
+  return (
+    <EuiFlexGroup gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <EuiButton fill onClick={submit} isDisabled={disabled} data-test-subj="btnExecute">
+          <FormattedMessage
+            id="xpack.painless_playground.executeButtonLabel"
+            defaultMessage="Execute"
+          />
+        </EuiButton>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          fill
+          onClick={toggleFlyout}
+          isDisabled={disabled}
+          data-test-subj="btnViewRequest"
+        >
+          {i18n.translate('xpack.painless_playground.previewRequestButtonLabel', {
+            defaultMessage: 'Preview Request',
+          })}
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

x-pack/legacy/plugins/painless_playground/public/components/output.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import { EuiCodeBlock, EuiPanel, EuiTabbedContent, EuiSpacer } from '@elastic/eui';
+
+import { formatJson, formatResponse } from '../lib/helpers';
+import { Response } from '../common/types';
+
+export function Output({ response }: { response: Response }) {
+  return (
+    <EuiTabbedContent
+      size="s"
+      tabs={[
+        {
+          id: 'output',
+          name: 'Output',
+          content: (
+            <>
+              <EuiSpacer size="s" />
+              <EuiPanel>
+                <EuiCodeBlock language="json" paddingSize="s" isCopyable>
+                  {formatResponse(response)}
+                </EuiCodeBlock>
+              </EuiPanel>
+            </>
+          ),
+        },
+        {
+          id: 'request',
+          name: 'Response',
+          content: (
+            <>
+              <EuiSpacer size="s" />
+              <EuiPanel>
+                <EuiCodeBlock language="json" paddingSize="s" isCopyable>
+                  {formatJson(response)}
+                </EuiCodeBlock>
+              </EuiPanel>
+            </>
+          ),
+        },
+      ]}
+    />
+  );
+}