Create Painless Lab app (#57538) (#61015)

* Create Painless Playground app (#54578)

* Replace heart script with smiley face script. (#57755)

* Rename Painless Playground -> Painless Lab. (#57545)

* Fix i18n namespace.

* Improve smiley face proportions.
- Add def keyword to Painless spec.
- Temporarily fix broken highlighting.
- Add small padding to main controls.

* [Painless Lab] Minor Fixes (#58135)

* Code restructure, improve types, add plugin id, introduced hook

Moved the code execution hook to a custom hook outside of main,
also chaining off promise to avoid lower level handling of
sequencing.

* Re-instated formatting code

To improve DX the execution error response from the painless API
was massaged to a more reader friendly state, only giving non-repeating
information.

Currently it is hard to determine the line and character information from
the painless endpoint. If the user wishes to see this raw information it
will be available in the API response flyout.

* Remove leading new line in default script

* Remove registration of feature flag

* Fix types

* Restore previous auto-submit request behaviour

* Remove use of null and remove old comment

Stick with "undefined" as the designation for something not existing.

* [Painless Lab] NP migration (#59794)

* Fix sample document editor.

* [Painless Lab] Fix float -> integer coercion bug (#60201)

* Clarify data and persistence flow. Fix floating point precision bug.
* Send a string to API and ES client instead of an object.

* Rename helpers lib to format. Add tests for formatRequestPayload.

* Add query parameter to score context (#60414)

* Fix typo and i18n

* Make state init lazy

Otherwise we are needlessly reading and JSON.parse'ing on every
state update

* Support the query parameter in requests to Painless

* Fix borked i18n

* Fix i18n

* Another i18n issue

* [Painless] Minor state update model refactor (#60532)

* Fix typo and i18n

* Make state init lazy

Otherwise we are needlessly reading and JSON.parse'ing on every
state update

* Support the query parameter in requests to Painless

* WiP on state refactor

* Some cleanup after manual testing

* Fix types and i18n

* Fix i18n in context_tab

* i18n

* [Painless] Language Service (#60612)

* Added language service

* Use the correct monaco instance and add wordwise operations

* Remove plugin context initializer for now

* [Painless] Replace hard-coded links (#60603)

* Replace hard-coded links

Also remove all props from Main component

* Pass the new links object to the request flyout too

* Link directly to painless execute API's contexts

* Remove responsive stacking from tabs with icons in them.

* Resize Painless Lab bottom bar to accommodate nav drawer width (#60833)

* Validate Painless Lab index field (#60841)

* Make JSON format of parameters field more prominent. Set default parameters to provide an example to users.
* Set default document to provide an example to users.
* Simplify context's updateState interface.
* Refactor store and context file organization.
  - Remove common directory, move constants and types files to root.
  - Move initialState into context file, where it's being used.
* Add validation for index input.
* Create context directory.

* Fix bottom bar z-index.

* Position flyout help link so it's bottom-aligned with the title and farther from the close button.

Co-authored-by: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Co-authored-by: Jean-Louis Leysens <jloleysens@gmail.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Alison Goryachev <alison.goryachev@elastic.co>

Co-authored-by: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Co-authored-by: Jean-Louis Leysens <jloleysens@gmail.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Alison Goryachev <alison.goryachev@elastic.co>

packages/kbn-ui-shared-deps/monaco.ts

@@ -25,6 +25,8 @@ import 'monaco-editor/esm/vs/base/worker/defaultWorkerFactory';
 import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
 import 'monaco-editor/esm/vs/editor/browser/widget/codeEditorWidget.js';
 
+import 'monaco-editor/esm/vs/editor/contrib/wordOperations/wordOperations.js'; // Needed for word-wise char navigation
+
 import 'monaco-editor/esm/vs/editor/contrib/suggest/suggestController.js'; // Needed for suggestions
 import 'monaco-editor/esm/vs/editor/contrib/hover/hover.js'; // Needed for hover
 import 'monaco-editor/esm/vs/editor/contrib/parameterHints/parameterHints.js'; // Needed for signature

src/plugins/dev_tools/public/plugin.ts

@@ -132,4 +132,6 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup, DevToolsStart> {
       getSortedDevTools: this.getSortedDevTools.bind(this),
     };
   }
+
+  public stop() {}
 }

x-pack/.i18nrc.json

@@ -30,6 +30,7 @@
     "xpack.ml": ["plugins/ml", "legacy/plugins/ml"],
     "xpack.monitoring": ["plugins/monitoring", "legacy/plugins/monitoring"],
     "xpack.remoteClusters": "plugins/remote_clusters",
+    "xpack.painlessLab": "plugins/painless_lab",
     "xpack.reporting": ["plugins/reporting", "legacy/plugins/reporting"],
     "xpack.rollupJobs": "legacy/plugins/rollup",
     "xpack.searchProfiler": "plugins/searchprofiler",

x-pack/plugins/painless_lab/common/constants.ts

@@ -0,0 +1,15 @@
+/*
+ * 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 { LicenseType } from '../../licensing/common/types';
+
+const basicLicense: LicenseType = 'basic';
+
+export const PLUGIN = {
+  id: 'painlessLab',
+  minimumLicenseType: basicLicense,
+};
+
+export const API_BASE_PATH = '/api/painless_lab';

x-pack/plugins/painless_lab/kibana.json

@@ -0,0 +1,16 @@
+{
+  "id": "painlessLab",
+  "version": "8.0.0",
+  "kibanaVersion": "kibana",
+  "requiredPlugins": [
+    "devTools",
+    "licensing",
+    "home"
+  ],
+  "configPath": [
+    "xpack",
+    "painless_lab"
+  ],
+  "server": true,
+  "ui": true
+}

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

@@ -0,0 +1,35 @@
+/*
+ * 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 { CodeEditor } from '../../../../../../src/plugins/kibana_react/public';
+
+interface Props {
+  code: string;
+  onChange: (code: string) => void;
+}
+
+export function Editor({ code, onChange }: Props) {
+  return (
+    <CodeEditor
+      languageId="painless"
+      // 99% width allows the editor to resize horizontally. 100% prevents it from resizing.
+      width="99%"
+      height="100%"
+      value={code}
+      onChange={onChange}
+      options={{
+        fontSize: 12,
+        minimap: {
+          enabled: false,
+        },
+        scrollBeyondLastLine: false,
+        wordWrap: 'on',
+        wrappingIndent: 'indent',
+        automaticLayout: true,
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,94 @@
+/*
+ * 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, { useState, useEffect } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { formatRequestPayload, formatJson } from '../lib/format';
+import { exampleScript } from '../constants';
+import { PayloadFormat } from '../types';
+import { useSubmitCode } from '../hooks';
+import { useAppContext } from '../context';
+import { OutputPane } from './output_pane';
+import { MainControls } from './main_controls';
+import { Editor } from './editor';
+import { RequestFlyout } from './request_flyout';
+
+export const Main: React.FunctionComponent = () => {
+  const {
+    store: { payload, validation },
+    updatePayload,
+    services: {
+      http,
+      chrome: { getIsNavDrawerLocked$ },
+    },
+    links,
+  } = useAppContext();
+
+  const [isRequestFlyoutOpen, setRequestFlyoutOpen] = useState(false);
+  const { inProgress, response, submit } = useSubmitCode(http);
+
+  // Live-update the output and persist payload state as the user changes it.
+  useEffect(() => {
+    if (validation.isValid) {
+      submit(payload);
+    }
+  }, [payload, submit, validation.isValid]);
+
+  const toggleRequestFlyout = () => {
+    setRequestFlyoutOpen(!isRequestFlyoutOpen);
+  };
+
+  const [isNavDrawerLocked, setIsNavDrawerLocked] = useState(false);
+
+  useEffect(() => {
+    const subscription = getIsNavDrawerLocked$().subscribe((newIsNavDrawerLocked: boolean) => {
+      setIsNavDrawerLocked(newIsNavDrawerLocked);
+    });
+
+    return () => subscription.unsubscribe();
+  });
+
+  return (
+    <div className="painlessLabMainContainer">
+      <EuiFlexGroup className="painlessLabPanelsContainer" responsive={false} gutterSize="none">
+        <EuiFlexItem>
+          <EuiTitle className="euiScreenReaderOnly">
+            <h1>
+              {i18n.translate('xpack.painlessLab.title', {
+                defaultMessage: 'Painless Lab',
+              })}
+            </h1>
+          </EuiTitle>
+
+          <Editor code={payload.code} onChange={nextCode => updatePayload({ code: nextCode })} />
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <OutputPane isLoading={inProgress} response={response} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <MainControls
+        links={links}
+        isLoading={inProgress}
+        toggleRequestFlyout={toggleRequestFlyout}
+        isRequestFlyoutOpen={isRequestFlyoutOpen}
+        isNavDrawerLocked={isNavDrawerLocked}
+        reset={() => updatePayload({ code: exampleScript })}
+      />
+
+      {isRequestFlyoutOpen && (
+        <RequestFlyout
+          links={links}
+          onClose={() => setRequestFlyoutOpen(false)}
+          requestBody={formatRequestPayload(payload, PayloadFormat.PRETTY)}
+          response={response ? formatJson(response.result || response.error) : ''}
+        />
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,145 @@
+/*
+ * 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, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  EuiPopover,
+  EuiBottomBar,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { Links } from '../../links';
+
+interface Props {
+  toggleRequestFlyout: () => void;
+  isRequestFlyoutOpen: boolean;
+  isLoading: boolean;
+  reset: () => void;
+  links: Links;
+  isNavDrawerLocked: boolean;
+}
+
+export function MainControls({
+  toggleRequestFlyout,
+  isRequestFlyoutOpen,
+  reset,
+  links,
+  isNavDrawerLocked,
+}: Props) {
+  const [isHelpOpen, setIsHelpOpen] = useState(false);
+
+  const items = [
+    <EuiContextMenuItem
+      key="walkthrough"
+      icon="popout"
+      href={links.painlessWalkthrough}
+      target="_blank"
+      onClick={() => setIsHelpOpen(false)}
+    >
+      {i18n.translate('xpack.painlessLab.walkthroughButtonLabel', {
+        defaultMessage: 'Walkthrough',
+      })}
+    </EuiContextMenuItem>,
+
+    <EuiContextMenuItem
+      key="api"
+      icon="popout"
+      href={links.painlessAPIReference}
+      target="_blank"
+      onClick={() => setIsHelpOpen(false)}
+    >
+      {i18n.translate('xpack.painlessLab.apiReferenceButtonLabel', {
+        defaultMessage: 'API reference',
+      })}
+    </EuiContextMenuItem>,
+
+    <EuiContextMenuItem
+      key="languageSpec"
+      icon="popout"
+      href={links.painlessLangSpec}
+      target="_blank"
+      onClick={() => setIsHelpOpen(false)}
+    >
+      {i18n.translate('xpack.painlessLab.languageSpecButtonLabel', {
+        defaultMessage: 'Language spec',
+      })}
+    </EuiContextMenuItem>,
+
+    <EuiContextMenuItem
+      key="reset"
+      icon="bolt"
+      onClick={() => {
+        reset();
+        setIsHelpOpen(false);
+      }}
+    >
+      {i18n.translate('xpack.painlessLab.resetButtonLabel', {
+        defaultMessage: 'Reset script',
+      })}
+    </EuiContextMenuItem>,
+  ];
+
+  const classes = classNames('painlessLab__bottomBar', {
+    'painlessLab__bottomBar-isNavDrawerLocked': isNavDrawerLocked,
+  });
+
+  return (
+    <EuiBottomBar paddingSize="s" className={classes}>
+      <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
+            <EuiFlexItem grow={false}>
+              <EuiPopover
+                id="painlessLabHelpContextMenu"
+                button={
+                  <EuiButtonEmpty
+                    size="s"
+                    iconType="help"
+                    iconSide="left"
+                    color="ghost"
+                    onClick={() => setIsHelpOpen(!isHelpOpen)}
+                  >
+                    {i18n.translate('xpack.painlessLab.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.painlessLab.hideRequestButtonLabel', {
+                  defaultMessage: 'Hide API request',
+                })
+              : i18n.translate('xpack.painlessLab.showRequestButtonLabel', {
+                  defaultMessage: 'Show API request',
+                })}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiBottomBar>
+  );
+}