Fix sample document editor.

elastic · Mar 14, 2020 · b7840ff · b7840ff
1 parent d33a82b
commit b7840ff
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 102 deletions.
diff --git a/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx b/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx
@@ -29,121 +29,117 @@ interface Props {
   onContextChange: ContextChangeHandler;
 }
 
-export function ContextTab({ context, contextSetup, onContextChange }: Props) {
-  return (
-    <>
-      <EuiSpacer size="m" />
+export const ContextTab = ({ context, contextSetup, onContextChange }: Props) => (
+  <>
+    <EuiSpacer size="m" />
+    <EuiFormRow
+      label={
+        <EuiToolTip
+          content={i18n.translate('xpack.painlessLab.contextFieldTooltipText', {
+            defaultMessage: 'Different contexts provide different functions on the ctx object',
+          })}
+        >
+          <span>
+            <FormattedMessage
+              id="xpack.painlessLab.contextFieldLabel"
+              defaultMessage="Execution context"
+            />{' '}
+            <EuiIcon type="questionInCircle" color="subdued" />
+          </span>
+        </EuiToolTip>
+      }
+      labelAppend={
+        <EuiText size="xs">
+          <EuiLink
+            href="https://www.elastic.co/guide/en/elasticsearch/painless/current/painless-execute-api.html"
+            target="_blank"
+          >
+            {i18n.translate('xpack.painlessLab.contextFieldDocLinkText', {
+              defaultMessage: 'Context docs',
+            })}
+          </EuiLink>
+        </EuiText>
+      }
+      fullWidth
+    >
+      <EuiSuperSelect
+        options={painlessContextOptions}
+        valueOfSelected={context}
+        onChange={(value: any) => onContextChange({ context: value })}
+        itemLayoutAlign="top"
+        hasDividers
+        fullWidth
+      />
+    </EuiFormRow>
+
+    {['filter', 'score'].indexOf(context) !== -1 && (
       <EuiFormRow
         label={
           <EuiToolTip
-            content={i18n.translate('xpack.painlessLab.contextFieldTooltipText', {
-              defaultMessage: 'Different contexts provide different functions on the ctx object',
+            content={i18n.translate('xpack.painlessLab.indexFieldTooltipText', {
+              defaultMessage: "Index mappings must be compatible with the sample document's fields",
             })}
           >
             <span>
-              <FormattedMessage
-                id="xpack.painlessLab.contextFieldLabel"
-                defaultMessage="Execution context"
-              />{' '}
+              <FormattedMessage id="xpack.painlessLab.indexFieldLabel" defaultMessage="Index" />{' '}
               <EuiIcon type="questionInCircle" color="subdued" />
             </span>
           </EuiToolTip>
         }
-        labelAppend={
-          <EuiText size="xs">
-            <EuiLink
-              href="https://www.elastic.co/guide/en/elasticsearch/painless/current/painless-execute-api.html"
-              target="_blank"
-            >
-              {i18n.translate('xpack.painlessLab.contextFieldDocLinkText', {
-                defaultMessage: 'Context docs',
-              })}
-            </EuiLink>
-          </EuiText>
-        }
         fullWidth
       >
-        <EuiSuperSelect
-          options={painlessContextOptions}
-          valueOfSelected={context}
-          onChange={(value: any) => onContextChange({ context: value })}
-          itemLayoutAlign="top"
-          hasDividers
+        <EuiFieldText
           fullWidth
+          value={contextSetup.index || ''}
+          onChange={e => {
+            onContextChange({
+              contextSetup: Object.assign({}, contextSetup, { index: e.target.value }),
+            });
+          }}
         />
       </EuiFormRow>
-
-      {['filter', 'score'].indexOf(context) !== -1 && (
-        <EuiFormRow
-          label={
-            <EuiToolTip
-              content={i18n.translate('xpack.painlessLab.indexFieldTooltipText', {
-                defaultMessage:
-                  "Index mappings must be compatible with the sample document's fields",
-              })}
-            >
-              <span>
-                <FormattedMessage id="xpack.painlessLab.indexFieldLabel" defaultMessage="Index" />{' '}
-                <EuiIcon type="questionInCircle" color="subdued" />
-              </span>
-            </EuiToolTip>
-          }
-          fullWidth
-        >
-          <EuiFieldText
-            fullWidth
-            value={contextSetup.index || ''}
-            onChange={e => {
-              onContextChange({
-                contextSetup: Object.assign({}, contextSetup, { index: e.target.value }),
-              });
+    )}
+    {['filter', 'score'].indexOf(context) !== -1 && (
+      <EuiFormRow
+        label={
+          <EuiToolTip
+            content={i18n.translate('xpack.painlessLab.documentFieldTooltipText', {
+              defaultMessage: "Your script can access this document's fields",
+            })}
+          >
+            <span>
+              <FormattedMessage
+                id="xpack.painlessLab.documentFieldLabel"
+                defaultMessage="Sample document"
+              />{' '}
+              <EuiIcon type="questionInCircle" color="subdued" />
+            </span>
+          </EuiToolTip>
+        }
+        fullWidth
+      >
+        <EuiPanel paddingSize="s">
+          <CodeEditor
+            languageId="json"
+            height={400}
+            value={contextSetup.document || ''}
+            onChange={(value: string) => {
+              const newContextSetup = Object.assign({}, contextSetup, { document: value });
+              onContextChange({ contextSetup: newContextSetup });
+            }}
+            options={{
+              fontSize: 12,
+              minimap: {
+                enabled: false,
+              },
+              scrollBeyondLastLine: false,
+              wordWrap: 'on',
+              wrappingIndent: 'indent',
+              automaticLayout: true,
             }}
           />
-        </EuiFormRow>
-      )}
-      {['filter', 'score'].indexOf(context) !== -1 && (
-        <EuiFormRow
-          label={
-            <EuiToolTip
-              content={i18n.translate('xpack.painlessLab.documentFieldTooltipText', {
-                defaultMessage: "Your script can access this document's fields",
-              })}
-            >
-              <span>
-                <FormattedMessage
-                  id="xpack.painlessLab.documentFieldLabel"
-                  defaultMessage="Sample document"
-                />{' '}
-                <EuiIcon type="questionInCircle" color="subdued" />
-              </span>
-            </EuiToolTip>
-          }
-          fullWidth
-        >
-          <EuiPanel paddingSize="s">
-            <CodeEditor
-              languageId="javascript"
-              height={400}
-              value={JSON.stringify(contextSetup.document, null, 2)}
-              onChange={(value: string) => {
-                onContextChange({
-                  contextSetup: Object.assign({}, contextSetup, { document: value }),
-                });
-              }}
-              options={{
-                fontSize: 12,
-                minimap: {
-                  enabled: false,
-                },
-                scrollBeyondLastLine: false,
-                wordWrap: 'on',
-                wrappingIndent: 'indent',
-                automaticLayout: true,
-              }}
-            />
-          </EuiPanel>
-        </EuiFormRow>
-      )}
-    </>
-  );
-}
+        </EuiPanel>
+      </EuiFormRow>
+    )}
+  </>
+);
diff --git a/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx b/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx
@@ -62,7 +62,7 @@ export function ParametersTab({ contextSetup, onContextChange }: Props) {
       >
         <EuiPanel paddingSize="s">
           <CodeEditor
-            languageId="javascript"
+            languageId="json"
             height={600}
             value={contextSetup.params}
             onChange={(value: string) => onContextChange({ contextSetup: { params: value } })}