Add syntax highlighting

x-pack/legacy/plugins/painless_playground/common/constants/index.ts

@@ -6,4 +6,3 @@
 
 export { ROUTES } from './routes';
 export { PLUGIN } from './plugin';
-export { EDITOR } from './editor';

x-pack/legacy/plugins/painless_playground/common/constants/plugin.ts

@@ -5,5 +5,5 @@
  */
 
 export const PLUGIN = {
-  ID: 'painlessPlayground',
+  ID: 'painless_playground',
 };

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

@@ -3,7 +3,7 @@
  * 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 React, { useState } from 'react';
 import {
   EuiForm,
   EuiButton,
@@ -13,7 +13,6 @@ import {
   EuiPageContentBody,
   EuiSpacer,
   EuiFormRow,
-  EuiPanel,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { CodeEditor } from '../../../../../../src/plugins/kibana_react/public';
@@ -24,121 +23,144 @@ interface Props {
 
 interface State {
   code: string;
-  output: any;
+  request?: string;
+  response?: string;
 }
-export class PainlessPlayground extends React.Component<Props, State> {
-  state = {
+export function PainlessPlayground(props: Props) {
+  const [state, setState] = useState<State>({
     code: '',
-    output: '',
-  };
-
-  onPatternChange = (code: string) => {
-    this.setState({ code });
-  };
+    request: '',
+    response: '',
+  });
 
-  submit = async () => {
+  const submit = async () => {
+    const request = {
+      script: {
+        source: state.code,
+      },
+    };
     try {
-      const payload = {
-        script: {
-          source: this.state.code,
-        },
-      };
-      const response = await this.props.service.simulate(payload);
-      this.setState({
-        output: response,
+      const response = await props.service.simulate(request);
+      setState({
+        code: state.code,
+        response: JSON.stringify(response, null, 2),
+        request: JSON.stringify(request, null, 2),
       });
     } catch (e) {
-      this.setState({
-        output: e,
+      setState({
+        code: state.code,
+        response: JSON.stringify(e, null, 2),
+        request: JSON.stringify(request, null, 2),
       });
     }
   };
 
-  onSimulateClick = () => {
-    this.submit();
-  };
-
-  isSimulateDisabled = () => {
-    return this.state.code.trim() === '';
+  const onSimulateClick = () => {
+    submit();
   };
-
-  render() {
-    return (
-      <EuiPage>
-        <EuiPageBody>
-          <EuiPageContent>
-            <EuiPageContentBody>
-              <EuiForm data-test-subj="painlessPlayground">
-                <EuiFormRow
-                  label={
-                    <FormattedMessage
-                      id="xpack.painlessPlayground.codeLabel"
-                      defaultMessage="Painless Code"
-                    />
-                  }
-                  fullWidth
-                  data-test-subj="codeInput"
-                >
-                  <EuiPanel paddingSize="s">
-                    <CodeEditor
-                      languageId="javascript"
-                      height={250}
-                      value={this.state.code}
-                      onChange={this.onPatternChange}
-                      options={{
-                        fontSize: 12,
-                        minimap: {
-                          enabled: false,
-                        },
-                        scrollBeyondLastLine: false,
-                        wordWrap: 'on',
-                        wrappingIndent: 'indent',
-                      }}
-                    />
-                  </EuiPanel>
-                </EuiFormRow>
-                <EuiSpacer />
-                <EuiButton
-                  fill
-                  onClick={this.onSimulateClick}
-                  isDisabled={this.isSimulateDisabled()}
-                  data-test-subj="btnSimulate"
-                >
+  return (
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPageContent>
+          <EuiPageContentBody>
+            <EuiForm data-test-subj="painlessPlayground">
+              <EuiFormRow
+                label={
                   <FormattedMessage
-                    id="xpack.painlessPlayground.simulateButtonLabel"
-                    defaultMessage="Simulate"
+                    id="xpack.painlessPlayground.codeLabel"
+                    defaultMessage="Painless Code"
+                  />
+                }
+                fullWidth
+                data-test-subj="codeInput"
+              >
+                <div style={{ border: '1px solid #D3DAE6', padding: '3px' }}>
+                  <CodeEditor
+                    languageId="painless"
+                    height={250}
+                    value={state.code}
+                    onChange={code => setState({ code })}
+                    options={{
+                      fontSize: 12,
+                      minimap: {
+                        enabled: false,
+                      },
+                      scrollBeyondLastLine: false,
+                      wordWrap: 'on',
+                      wrappingIndent: 'indent',
+                    }}
                   />
-                </EuiButton>
-                <EuiSpacer />
+                </div>
+              </EuiFormRow>
+              <EuiSpacer />
+              <EuiButton
+                fill
+                onClick={onSimulateClick}
+                isDisabled={state.code.trim() === ''}
+                data-test-subj="btnSimulate"
+              >
+                <FormattedMessage
+                  id="xpack.painlessPlayground.simulateButtonLabel"
+                  defaultMessage="Simulate"
+                />
+              </EuiButton>
+              <EuiSpacer />
+
+              {state.request && (
                 <EuiFormRow
                   label={
                     <FormattedMessage
                       id="xpack.painlessPlayground.outputLabel"
-                      defaultMessage="Output"
+                      defaultMessage="Request"
                     />
                   }
                   fullWidth
-                  data-test-subj="output"
+                  data-test-subj="request"
                 >
-                  <EuiPanel paddingSize="s">
+                  <div style={{ border: '1px solid #D3DAE6', padding: '3px' }}>
                     <CodeEditor
                       languageId="json"
                       height={250}
-                      value={JSON.stringify(this.state.output, null, 2)}
+                      value={'POST /_scripts/painless/_execute\n' + state.request}
                       options={{
                         fontSize: 12,
                         minimap: {
                           enabled: false,
                         },
                       }}
                     />
-                  </EuiPanel>
+                  </div>
                 </EuiFormRow>
-              </EuiForm>
-            </EuiPageContentBody>
-          </EuiPageContent>
-        </EuiPageBody>
-      </EuiPage>
-    );
-  }
+              )}
+
+              <EuiFormRow
+                label={
+                  <FormattedMessage
+                    id="xpack.painlessPlayground.outputLabel"
+                    defaultMessage="Response"
+                  />
+                }
+                fullWidth
+                data-test-subj="response"
+              >
+                <div style={{ border: '1px solid #D3DAE6', padding: '3px' }}>
+                  <CodeEditor
+                    languageId="json"
+                    height={250}
+                    value={state.response || ''}
+                    options={{
+                      fontSize: 12,
+                      minimap: {
+                        enabled: false,
+                      },
+                    }}
+                  />
+                </div>
+              </EuiFormRow>
+            </EuiForm>
+          </EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
 }

x-pack/legacy/plugins/painless_playground/public/register.ts

@@ -8,6 +8,7 @@ import { i18n } from '@kbn/i18n';
 // @ts-ignore
 import { xpackInfo } from 'plugins/xpack_main/services/xpack_info';
 import { npSetup, npStart } from 'ui/new_platform';
+import { registerPainless } from './register_painless';
 
 npSetup.plugins.dev_tools.register({
   order: 7,
@@ -19,6 +20,7 @@ npSetup.plugins.dev_tools.register({
   disabled: false,
   tooltipContent: xpackInfo.get('features.painless_playground.message'),
   async mount(context, { element }) {
+    registerPainless();
     /**
     const licenseCheck = {
       showPage: xpackInfo.get('features.painless_playground.enableLink'),