migrate client code

.github/CODEOWNERS

@@ -178,6 +178,7 @@
 /x-pack/plugins/remote_clusters/  @elastic/es-ui
 /x-pack/legacy/plugins/rollup/  @elastic/es-ui
 /x-pack/plugins/searchprofiler/  @elastic/es-ui
+/x-pack/plugins/painless_lab/  @elastic/es-ui
 /x-pack/legacy/plugins/snapshot_restore/  @elastic/es-ui
 /x-pack/legacy/plugins/upgrade_assistant/  @elastic/es-ui
 /x-pack/plugins/upgrade_assistant/  @elastic/es-ui

x-pack/.i18nrc.json

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

x-pack/index.js

@@ -12,7 +12,6 @@ import { security } from './legacy/plugins/security';
 import { ml } from './legacy/plugins/ml';
 import { tilemap } from './legacy/plugins/tilemap';
 import { grokdebugger } from './legacy/plugins/grokdebugger';
-import { painlessLab } from './legacy/plugins/painless_lab';
 import { dashboardMode } from './legacy/plugins/dashboard_mode';
 import { logstash } from './legacy/plugins/logstash';
 import { beats } from './legacy/plugins/beats_management';
@@ -52,7 +51,6 @@ module.exports = function(kibana) {
     ml(kibana),
     tilemap(kibana),
     grokdebugger(kibana),
-    painlessLab(kibana),
     dashboardMode(kibana),
     logstash(kibana),
     beats(kibana),

x-pack/plugins/painless_lab/kibana.json

@@ -4,12 +4,13 @@
   "kibanaVersion": "kibana",
   "requiredPlugins": [
     "devTools",
-    "licensing"
+    "licensing",
+    "home"
   ],
   "configPath": [
     "xpack",
     "painless_lab"
   ],
   "server": true,
-  "ui": false
+  "ui": true
 }

x-pack/legacy/plugins/painless_lab/public/render_app.tsx → x-pack/plugins/painless_lab/public/application/index.tsx

@@ -5,21 +5,34 @@
  */
 
 import React from 'react';
-import { CoreStart } from 'kibana/public';
 import { render, unmountComponentAtNode } from 'react-dom';
+import { CoreSetup, CoreStart } from 'kibana/public';
 import { Main } from './components/main';
 import { createKibanaReactContext } from '../../../../../src/plugins/kibana_react/public';
 
-export function renderApp(element: any, { http, i18n, uiSettings }: CoreStart) {
+interface AppDependencies {
+  http: CoreSetup['http'];
+  I18nContext: CoreStart['i18n']['Context'];
+  uiSettings: CoreSetup['uiSettings'];
+}
+
+export function renderApp(
+  element: HTMLElement | null,
+  { http, I18nContext, uiSettings }: AppDependencies
+) {
+  if (!element) {
+    return () => undefined;
+  }
+
   const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
     uiSettings,
   });
   render(
-    <i18n.Context>
+    <I18nContext>
       <KibanaReactContextProvider>
         <Main http={http} />
       </KibanaReactContextProvider>
-    </i18n.Context>,
+    </I18nContext>,
     element
   );
   return () => unmountComponentAtNode(element);

x-pack/legacy/plugins/painless_lab/public/lib/execute_code.ts → x-pack/plugins/painless_lab/public/application/lib/execute_code.ts

@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { API_ROUTE_EXECUTE } from '../../common/constants';
+import { API_BASE_PATH } from '../../../common/constants';
 
 export async function executeCode(http: any, payload: Record<string, any>) {
-  return await http.post(API_ROUTE_EXECUTE, {
+  return await http.post(`${API_BASE_PATH}/execute`, {
     body: JSON.stringify(payload),
   });
 }

x-pack/plugins/painless_lab/public/index.scss

@@ -0,0 +1 @@
+@import 'styles/index'

x-pack/legacy/plugins/painless_lab/common/constants.ts → x-pack/plugins/painless_lab/public/index.ts

@@ -4,6 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export const PLUGIN_ID = 'painlessLab';
+import './styles/_index.scss';
+import { PluginInitializerContext } from 'src/core/public';
+import { PainlessLabUIPlugin } from './plugin';
 
-export const API_ROUTE_EXECUTE = '/api/painless_lab/execute';
+export function plugin(ctx: PluginInitializerContext) {
+  return new PainlessLabUIPlugin(ctx);
+}

x-pack/plugins/painless_lab/public/plugin.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { Plugin, CoreStart, CoreSetup, PluginInitializerContext } from 'kibana/public';
+import { first } from 'rxjs/operators';
+import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+import { FeatureCatalogueCategory } from '../../../../src/plugins/home/public';
+import { LICENSE_CHECK_STATE } from '../../licensing/public';
+
+import { PLUGIN } from '../common/constants';
+import { PluginDependencies } from './types';
+import { registerPainless } from './application/register_painless';
+
+export class PainlessLabUIPlugin implements Plugin<void, void, PluginDependencies> {
+  constructor(ctx: PluginInitializerContext) {}
+
+  async setup(
+    { http, getStartServices, uiSettings }: CoreSetup,
+    { devTools, home, licensing }: PluginDependencies
+  ) {
+    home.featureCatalogue.register({
+      id: PLUGIN.id,
+      title: i18n.translate('xpack.painlessLab.registryProviderTitle', {
+        defaultMessage: 'Painless Lab (beta)',
+      }),
+      description: i18n.translate('xpack.painlessLab.registryProviderDescription', {
+        defaultMessage: 'Simulate and debug painless code.',
+      }),
+      icon: '',
+      path: '/app/kibana#/dev_tools/painless_lab',
+      showOnHomePage: false,
+      category: FeatureCatalogueCategory.ADMIN,
+    });
+
+    devTools.register({
+      id: 'painless_lab',
+      order: 7,
+      title: (
+        <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexItem grow={false}>
+            {i18n.translate('xpack.painlessLab.displayName', {
+              defaultMessage: 'Painless Lab',
+            })}
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false} className="painlessLab__betaLabelContainer">
+            <EuiBetaBadge
+              label={i18n.translate('xpack.painlessLab.displayNameBetaLabel', {
+                defaultMessage: 'Beta',
+              })}
+              tooltipContent={i18n.translate('xpack.painlessLab.displayNameBetaTooltipText', {
+                defaultMessage: 'This feature might change drastically in future releases',
+              })}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ) as any,
+      enableRouting: false,
+      disabled: false,
+      // tooltipContent: xpackInfo.get('features.painlessLab.message'),
+      mount: async (ctx, { element }) => {
+        const [core] = await getStartServices();
+
+        const {
+          i18n: { Context: I18nContext },
+          notifications,
+        } = core;
+
+        registerPainless();
+
+        const license = await licensing.license$.pipe(first()).toPromise();
+        const { state, message: invalidLicenseMessage } = license.check(
+          PLUGIN.id,
+          PLUGIN.minimumLicenseType
+        );
+        const isValidLicense = state === LICENSE_CHECK_STATE.Valid;
+
+        if (!isValidLicense) {
+          notifications.toasts.addDanger(invalidLicenseMessage as string);
+          window.location.hash = '/dev_tools';
+          return () => {};
+        }
+
+        const { renderApp } = await import('./application');
+        return renderApp(element, { I18nContext, http, uiSettings });
+      },
+    });
+  }
+
+  async start(core: CoreStart, plugins: any) {}
+
+  async stop() {}
+}

x-pack/plugins/painless_lab/public/styles/_index.scss

@@ -0,0 +1,33 @@
+// Import the EUI global scope so we can use EUI constants
+@import 'src/legacy/ui/public/styles/_styling_constants';
+
+/**
+ * 1. This is a very brittle way of preventing the editor and other content from disappearing
+ *    behind the bottom bar.
+ */
+.painlessLabBottomBarPlaceholder {
+  height: $euiSize * 3; /* [1] */
+}
+
+.painlessLabRightPane {
+  border-right: none;
+  border-top: none;
+  border-bottom: none;
+  border-radius: 0;
+  padding-top: 0;
+  height: 100%;
+}
+
+.painlessLabRightPane__tabs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  [role="tabpanel"] {
+    height: 100%;
+  }
+}
+
+.painlessLab__betaLabelContainer {
+  line-height: 0;
+}

x-pack/plugins/painless_lab/public/types.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 { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
+import { DevToolsSetup } from '../../../../src/plugins/dev_tools/public';
+import { LicensingPluginSetup } from '../../licensing/public';
+
+export interface PluginDependencies {
+  licensing: LicensingPluginSetup;
+  home: HomePublicPluginSetup;
+  devTools: DevToolsSetup;
+}