Refine Painless Playground UI/UX

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

@@ -23,6 +23,7 @@ export const painlessPlayground = (kibana: any) =>
       }).default();
     },
     uiExports: {
+      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
       devTools: [resolve(__dirname, 'public/register')],
     },
     init: (server: Legacy.Server) => {

x-pack/legacy/plugins/painless_playground/public/common/constants.tsx

@@ -0,0 +1,63 @@
+/*
+ * 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 { EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+const defaultLabel = i18n.translate('xpack.painless_playground.contextDefaultLabel', {
+  defaultMessage: 'Basic',
+});
+
+const filterLabel = i18n.translate('xpack.painless_playground.contextFilterLabel', {
+  defaultMessage: 'Filter',
+});
+
+const scoreLabel = i18n.translate('xpack.painless_playground.contextScoreLabel', {
+  defaultMessage: 'Score',
+});
+
+export const painlessContextOptions = [
+  {
+    value: 'painless_test',
+    inputDisplay: defaultLabel,
+    dropdownDisplay: (
+      <>
+        <strong>{defaultLabel}</strong>
+        <EuiText size="s" color="subdued">
+          <p className="euiTextColor--subdued">The script result will be converted to a string</p>
+        </EuiText>
+      </>
+    ),
+  },
+  {
+    value: 'filter',
+    inputDisplay: filterLabel,
+    dropdownDisplay: (
+      <>
+        <strong>{filterLabel}</strong>
+        <EuiText size="s" color="subdued">
+          <p className="euiTextColor--subdued">Use the context of a filter&rsquo;s script query</p>
+        </EuiText>
+      </>
+    ),
+  },
+  {
+    value: 'score',
+    inputDisplay: scoreLabel,
+    dropdownDisplay: (
+      <>
+        <strong>{scoreLabel}</strong>
+        <EuiText size="s" color="subdued">
+          <p className="euiTextColor--subdued">
+            Use the context of a cript_score function in function_score query
+          </p>
+        </EuiText>
+      </>
+    ),
+  },
+];

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

@@ -10,34 +10,27 @@ 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) {
+export function Editor({ code, setCode }: Props) {
   return (
-    <>
-      <EuiSpacer size="s" />
-      <EuiPageContent panelPaddingSize="m">
-        <EuiPageContent panelPaddingSize="s">
-          <CodeEditor
-            languageId="painless"
-            height={380}
-            value={code}
-            onChange={setCode}
-            options={{
-              fontSize: 12,
-              minimap: {
-                enabled: false,
-              },
-              scrollBeyondLastLine: false,
-              wordWrap: 'on',
-              wrappingIndent: 'indent',
-            }}
-          />
-        </EuiPageContent>
-        <EuiSpacer size="m" />
-        {renderMainControls()}
-      </EuiPageContent>
-    </>
+    <CodeEditor
+      languageId="painless"
+      // 99% width allows the editor to resize horizontally. 100% prevents it from resizing.
+      width="99%"
+      height="100%"
+      value={code}
+      onChange={setCode}
+      options={{
+        fontSize: 12,
+        minimap: {
+          enabled: false,
+        },
+        scrollBeyondLastLine: false,
+        wordWrap: 'on',
+        wrappingIndent: 'indent',
+        automaticLayout: true,
+      }}
+    />
   );
 }

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

@@ -3,40 +3,139 @@
  * 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 React, { useState } from 'react';
+import {
+  EuiPopover,
+  EuiBottomBar,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiButton,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
 interface Props {
-  submit: () => void;
-  disabled: boolean;
-  toggleFlyout: () => void;
+  toggleRequestFlyout: () => void;
+  isRequestFlyoutOpen: boolean;
+  isLoading: boolean;
+  reset: () => void;
 }
 
-export function MainControls({ submit, disabled, toggleFlyout }: Props) {
+export function MainControls({
+  toggleRequestFlyout,
+  isRequestFlyoutOpen,
+  isLoading,
+  reset,
+}: Props) {
+  const [isHelpOpen, setIsHelpOpen] = useState(false);
+
+  const items = [
+    <EuiContextMenuItem
+      key="walkthrough"
+      icon="popout"
+      href="https://www.elastic.co/guide/en/elasticsearch/painless/7.5/painless-walkthrough.html"
+      target="_blank"
+      onClick={() => setIsHelpOpen(false)}
+    >
+      {i18n.translate('xpack.painless_playground.walkthroughButtonLabel', {
+        defaultMessage: 'Walkthrough',
+      })}
+    </EuiContextMenuItem>,
+
+    <EuiContextMenuItem
+      key="api"
+      icon="popout"
+      href="https://www.elastic.co/guide/en/elasticsearch/painless/current/painless-api-reference.html"
+      target="_blank"
+      onClick={() => setIsHelpOpen(false)}
+    >
+      {i18n.translate('xpack.painless_playground.apiReferenceButtonLabel', {
+        defaultMessage: 'API reference',
+      })}
+    </EuiContextMenuItem>,
+
+    <EuiContextMenuItem
+      key="languageSpec"
+      icon="popout"
+      href="https://www.elastic.co/guide/en/elasticsearch/painless/current/painless-lang-spec.html"
+      target="_blank"
+      onClick={() => setIsHelpOpen(false)}
+    >
+      {i18n.translate('xpack.painless_playground.languageSpecButtonLabel', {
+        defaultMessage: 'Language spec',
+      })}
+    </EuiContextMenuItem>,
+
+    <EuiContextMenuItem
+      key="reset"
+      icon="bolt"
+      onClick={() => {
+        reset();
+        setIsHelpOpen(false);
+      }}
+    >
+      {i18n.translate('xpack.painless_playground.resetButtonLabel', {
+        defaultMessage: 'Reset script',
+      })}
+    </EuiContextMenuItem>,
+  ];
+
   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>
+    <>
+      <div className="painlessPlaygroundBottomBarPlaceholder" />
+
+      <EuiBottomBar paddingSize="none">
+        <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
+              <EuiFlexItem grow={false}>
+                <EuiPopover
+                  id="painlessPlaygroundHelpContextMenu"
+                  button={
+                    <EuiButtonEmpty
+                      size="s"
+                      iconType="help"
+                      iconSide="left"
+                      color="ghost"
+                      onClick={() => setIsHelpOpen(!isHelpOpen)}
+                    >
+                      {i18n.translate('xpack.painless_playground.helpButtonLabel', {
+                        defaultMessage: 'Help',
+                      })}
+                    </EuiButtonEmpty>
+                  }
+                  isOpen={isHelpOpen}
+                  closePopover={() => setIsHelpOpen(false)}
+                  panelPaddingSize="none"
+                  withTitle
+                  anchorPosition="upRight"
+                >
+                  <EuiContextMenuPanel items={items} />
+                </EuiPopover>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              size="s"
+              color="ghost"
+              onClick={toggleRequestFlyout}
+              data-test-subj="btnViewRequest"
+            >
+              {isRequestFlyoutOpen
+                ? i18n.translate('xpack.painless_playground.hideRequestButtonLabel', {
+                    defaultMessage: 'Hide API request',
+                  })
+                : i18n.translate('xpack.painless_playground.showRequestButtonLabel', {
+                    defaultMessage: 'Show API request',
+                  })}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiBottomBar>
+    </>
   );
 }