[7.x] Create Painless Lab app (#57538)

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>
+  );
+}