Address feedback and fix bugs with payload formatting helper.

x-pack/plugins/painless_lab/public/application/common/constants.tsx

@@ -122,5 +122,4 @@ for (int y = 0; y < height; y++) {
   }
 }
 
-return result;
-`;
+return result;`;

x-pack/plugins/painless_lab/public/application/common/types.ts

@@ -15,6 +15,11 @@ export interface RequestPayloadConfig {
   document: string;
 }
 
+export enum PayloadFormat {
+  UGLY = 'ugly',
+  PRETTY = 'pretty',
+}
+
 export interface Response {
   error?: ExecutionError | Error;
   result?: string;

x-pack/plugins/painless_lab/public/application/components/main.tsx

@@ -9,13 +9,13 @@ import React, { useState, useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { buildRequestPayload, formatJson } from '../lib/helpers';
-import { painlessContextOptions } from '../common/constants';
+import { painlessContextOptions, exampleScript } from '../common/constants';
+import { PayloadFormat } from '../common/types';
+import { useSubmitCode } from '../hooks';
 import { OutputPane } from './output_pane';
 import { MainControls } from './main_controls';
 import { Editor } from './editor';
 import { RequestFlyout } from './request_flyout';
-import { useSubmitCode } from '../hooks';
-import { exampleScript } from '../common/constants';
 
 interface Props {
   http: HttpSetup;
@@ -108,7 +108,10 @@ export function Main({ http }: Props) {
       {isRequestFlyoutOpen && (
         <RequestFlyout
           onClose={() => setRequestFlyoutOpen(false)}
-          requestBody={buildRequestPayload({ code, context, document, index, parameters })}
+          requestBody={buildRequestPayload(
+            { code, context, document, index, parameters },
+            PayloadFormat.PRETTY
+          )}
           response={response ? formatJson(response.result || response.error) : ''}
         />
       )}

x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx

@@ -26,9 +26,9 @@ interface Props {
   context: any;
   index: string;
   document: string;
-  onContextChange: (change: any) => void;
-  onIndexChange: (change: string) => void;
-  onDocumentChange: (change: string) => void;
+  onContextChange: (context: string) => void;
+  onIndexChange: (index: string) => void;
+  onDocumentChange: (document: string) => void;
 }
 
 export const ContextTab = ({

x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx

@@ -14,6 +14,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { monaco } from '@kbn/ui-shared-deps/monaco';
 import { i18n } from '@kbn/i18n';
 import { CodeEditor } from '../../../../../../../src/plugins/kibana_react/public';
 
@@ -75,6 +76,13 @@ export function ParametersTab({ parameters, onParametersChange }: Props) {
               wrappingIndent: 'indent',
               automaticLayout: true,
             }}
+            editorDidMount={(editor: monaco.editor.IStandaloneCodeEditor) => {
+              // Updating tab size for the editor
+              const model = editor.getModel();
+              if (model) {
+                model.updateOptions({ tabSize: 2 });
+              }
+            }}
           />
         </EuiPanel>
       </EuiFormRow>

x-pack/plugins/painless_lab/public/application/hooks/use_submit_code.ts

@@ -9,7 +9,7 @@ import { HttpSetup } from 'kibana/public';
 import { debounce } from 'lodash';
 
 import { API_BASE_PATH } from '../../../common/constants';
-import { Response, RequestPayloadConfig } from '../common/types';
+import { Response, RequestPayloadConfig, PayloadFormat } from '../common/types';
 import { buildRequestPayload } from '../lib/helpers';
 
 const DEBOUNCE_MS = 800;
@@ -32,7 +32,7 @@ export const useSubmitCode = (http: HttpSetup) => {
           const result = await http.post(`${API_BASE_PATH}/execute`, {
             // Stringify the string, because http runs it through JSON.parse, and we want to actually
             // send a JSON string.
-            body: JSON.stringify(buildRequestPayload(config)),
+            body: JSON.stringify(buildRequestPayload(config, PayloadFormat.UGLY)),
           });
 
           if (currentRequestIdRef.current === requestId) {

x-pack/plugins/painless_lab/public/application/lib/helpers.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { RequestPayloadConfig, Response, ExecutionError } from '../common/types';
+import { RequestPayloadConfig, Response, ExecutionError, PayloadFormat } from '../common/types';
 
 export function parseJSON(text: string) {
   try {
@@ -14,34 +14,47 @@ export function parseJSON(text: string) {
   }
 }
 
+function prettifyPayload(payload = '', indentationLevel = 0) {
+  const indentation = new Array(indentationLevel + 1).join(' ');
+  return payload.replace(/\n/g, `\n${indentation}`);
+}
+
 /**
  * Values should be preserved as strings so that floating point precision,
  * e.g. 1.0, is preserved instead of being coerced to an integer, e.g. 1.
  */
-export function buildRequestPayload({
-  code,
-  context,
-  parameters,
-  index,
-  document,
-}: RequestPayloadConfig): string {
+export function buildRequestPayload(
+  { code, context, parameters, index, document }: RequestPayloadConfig,
+  format: PayloadFormat = PayloadFormat.UGLY
+): string {
   const isAdvancedContext = context === 'filter' || context === 'score';
+  const formattedCode =
+    format === PayloadFormat.UGLY ? JSON.stringify(code) : `"""${prettifyPayload(code, 4)}"""`;
+  const formattedParameters =
+    format === PayloadFormat.UGLY ? parameters : prettifyPayload(parameters, 4);
+  const formattedContext = format === PayloadFormat.UGLY ? context : prettifyPayload(context, 6);
+  const formattedIndex = format === PayloadFormat.UGLY ? index : prettifyPayload(index);
+  const formattedDocument = format === PayloadFormat.UGLY ? document : prettifyPayload(document, 4);
+
   const requestPayload = `{
   "script": {
-    "source": "${code}",
-    ${parameters ? `"params": ${parameters}` : ``}
+    "source": ${formattedCode}${
+    parameters
+      ? `,
+    "params": ${formattedParameters}`
+      : ``
+  }
   }${
     isAdvancedContext
       ? `,
-  "context": ${context},
+  "context": "${formattedContext}",
   "context_setup": {
-    "index": ${index},
-    "document": ${document}
+    "index": "${formattedIndex}",
+    "document": ${formattedDocument}
   }`
       : ``
   }
 }`;
-
   return requestPayload;
 }
 

x-pack/plugins/painless_lab/server/routes/api/execute.ts

@@ -10,19 +10,6 @@ import { API_BASE_PATH } from '../../../common/constants';
 import { isEsError } from '../../lib';
 
 const bodySchema = schema.string();
-// const bodySchema = schema.object({
-//   script: schema.object({
-//     source: schema.string(),
-//     params: schema.maybe(schema.recordOf(schema.string(), schema.any())),
-//   }),
-//   context: schema.maybe(schema.string()),
-//   context_setup: schema.maybe(
-//     schema.object({
-//       index: schema.string(),
-//       document: schema.string(),
-//     })
-//   ),
-// });
 
 export function registerExecuteRoute({ router, license }: RouteDependencies) {
   router.post(
@@ -37,7 +24,6 @@ export function registerExecuteRoute({ router, license }: RouteDependencies) {
 
       try {
         const callAsCurrentUser = ctx.core.elasticsearch.dataClient.callAsCurrentUser;
-        console.log('body', body);
         const response = await callAsCurrentUser('scriptsPainlessExecute', {
           body,
         });