Merge branch 'master' into kertal-pr-2019-12-09-np-saved-object-graph

Author: elasticmachine

config/apm.js

@@ -42,19 +42,22 @@ const { join } = require('path');
 const { execSync } = require('child_process');
 const merge = require('lodash.merge');
 
-module.exports = merge({
-  active: false,
-  serverUrl: 'https://f1542b814f674090afd914960583265f.apm.us-central1.gcp.cloud.es.io:443',
-  // The secretToken below is intended to be hardcoded in this file even though
-  // it makes it public. This is not a security/privacy issue. Normally we'd
-  // instead disable the need for a secretToken in the APM Server config where
-  // the data is transmitted to, but due to how it's being hosted, it's easier,
-  // for now, to simply leave it in.
-  secretToken: 'R0Gjg46pE9K9wGestd',
-  globalLabels: {},
-  centralConfig: false,
-  logUncaughtExceptions: true
-}, devConfig());
+module.exports = merge(
+  {
+    active: false,
+    serverUrl: 'https://f1542b814f674090afd914960583265f.apm.us-central1.gcp.cloud.es.io:443',
+    // The secretToken below is intended to be hardcoded in this file even though
+    // it makes it public. This is not a security/privacy issue. Normally we'd
+    // instead disable the need for a secretToken in the APM Server config where
+    // the data is transmitted to, but due to how it's being hosted, it's easier,
+    // for now, to simply leave it in.
+    secretToken: 'R0Gjg46pE9K9wGestd',
+    globalLabels: {},
+    centralConfig: false,
+    logUncaughtExceptions: true,
+  },
+  devConfig()
+);
 
 const rev = gitRev();
 if (rev !== null) module.exports.globalLabels.git_rev = rev;
@@ -66,7 +69,10 @@ try {
 
 function gitRev() {
   try {
-    return execSync('git rev-parse --short HEAD', { encoding: 'utf-8' }).trim();
+    return execSync('git rev-parse --short HEAD', {
+      encoding: 'utf-8',
+      stdio: ['ignore', 'pipe', 'ignore'],
+    }).trim();
   } catch (e) {
     return null;
   }

package.json

@@ -355,7 +355,7 @@
     "@types/semver": "^5.5.0",
     "@types/sinon": "^7.0.13",
     "@types/strip-ansi": "^3.0.0",
-    "@types/styled-components": "^4.4.0",
+    "@types/styled-components": "^4.4.1",
     "@types/supertest": "^2.0.5",
     "@types/supertest-as-promised": "^2.0.38",
     "@types/testing-library__react": "^9.1.2",

packages/kbn-babel-preset/package.json

@@ -14,6 +14,7 @@
     "@babel/preset-typescript": "^7.3.3",
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-filter-imports": "^3.0.0",
+    "babel-plugin-styled-components": "^1.10.6",
     "babel-plugin-transform-define": "^1.3.1",
     "babel-plugin-typescript-strip-namespaces": "^1.1.1"
   }

packages/kbn-babel-preset/webpack_preset.js

@@ -33,6 +33,12 @@ module.exports = () => {
     plugins: [
       require.resolve('@babel/plugin-transform-modules-commonjs'),
       require.resolve('@babel/plugin-syntax-dynamic-import'),
-    ]
+      [
+        require.resolve('babel-plugin-styled-components'),
+        {
+          fileName: false,
+        },
+      ],
+    ],
   };
 };

src/apm.js

@@ -25,15 +25,13 @@ module.exports = function (serviceName = name) {
   if (process.env.kbnWorkerType === 'optmzr') return;
 
   const conf = {
-    serviceName: `${serviceName}-${version.replace(/\./g, '_')}`
+    serviceName: `${serviceName}-${version.replace(/\./g, '_')}`,
   };
 
-  if (configFileExists()) conf.configFile = 'config/apm.js';
+  const configFile = join(__dirname, '..', 'config', 'apm.js');
+
+  if (existsSync(configFile)) conf.configFile = configFile;
   else conf.active = false;
 
   require('elastic-apm-node').start(conf);
 };
-
-function configFileExists() {
-  return existsSync(join(__dirname, '..', 'config', 'apm.js'));
-}

src/core/MIGRATION.md

@@ -20,6 +20,11 @@
 import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
 import { EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { debounce } from 'lodash';
+
+// Node v5 querystring for browser.
+// @ts-ignore
+import * as qs from 'querystring-browser';
 
 import { EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useServicesContext, useEditorReadContext } from '../../../../contexts';
@@ -80,17 +85,64 @@ function EditorUI() {
 
   useEffect(() => {
     editorInstanceRef.current = senseEditor.create(editorRef.current!);
+    const editor = editorInstanceRef.current;
+
+    const readQueryParams = () => {
+      const [, queryString] = (window.location.hash || '').split('?');
+      return qs.parse(queryString || '');
+    };
+
+    const loadBufferFromRemote = (url: string) => {
+      if (/^https?:\/\//.test(url)) {
+        const loadFrom: Record<string, any> = {
+          url,
+          // Having dataType here is required as it doesn't allow jQuery to `eval` content
+          // coming from the external source thereby preventing XSS attack.
+          dataType: 'text',
+          kbnXsrfToken: false,
+        };
+
+        if (/https?:\/\/api\.github\.com/.test(url)) {
+          loadFrom.headers = { Accept: 'application/vnd.github.v3.raw' };
+        }
 
-    const { content: text } = history.getSavedEditorState() || {
-      content: DEFAULT_INPUT_VALUE,
+        // Fire and forget.
+        $.ajax(loadFrom).done(async data => {
+          const coreEditor = editor.getCoreEditor();
+          await editor.update(data, true);
+          editor.moveToNextRequestEdge(false);
+          coreEditor.clearSelection();
+          editor.highlightCurrentRequestsAndUpdateActionBar();
+          coreEditor.getContainer().focus();
+        });
+      }
     };
-    editorInstanceRef.current.update(text);
+
+    // Support for loading a console snippet from a remote source, like support docs.
+    const onHashChange = debounce(() => {
+      const { load_from: url } = readQueryParams();
+      if (!url) {
+        return;
+      }
+      loadBufferFromRemote(url);
+    }, 200);
+    window.addEventListener('hashchange', onHashChange);
+
+    const initialQueryParams = readQueryParams();
+    if (initialQueryParams.load_from) {
+      loadBufferFromRemote(initialQueryParams.load_from);
+    } else {
+      const { content: text } = history.getSavedEditorState() || {
+        content: DEFAULT_INPUT_VALUE,
+      };
+      editor.update(text);
+    }
 
     function setupAutosave() {
       let timer: number;
       const saveDelay = 500;
 
-      editorInstanceRef.current!.getCoreEditor().on('change', () => {
+      editor.getCoreEditor().on('change', () => {
         if (timer) {
           clearTimeout(timer);
         }
@@ -100,35 +152,34 @@ function EditorUI() {
 
     function saveCurrentState() {
       try {
-        const content = editorInstanceRef.current!.getCoreEditor().getValue();
+        const content = editor.getCoreEditor().getValue();
         history.updateCurrentState(content);
       } catch (e) {
         // Ignoring saving error
       }
     }
 
-    setInputEditor(editorInstanceRef.current);
+    setInputEditor(editor);
     setTextArea(editorRef.current!.querySelector('textarea'));
 
     mappings.retrieveAutoCompleteInfo();
 
-    const unsubscribeResizer = subscribeResizeChecker(
-      editorRef.current!,
-      editorInstanceRef.current.getCoreEditor()
-    );
+    const unsubscribeResizer = subscribeResizeChecker(editorRef.current!, editor.getCoreEditor());
     setupAutosave();
 
     return () => {
       unsubscribeResizer();
       mappings.clearSubscriptions();
+      window.removeEventListener('hashchange', onHashChange);
     };
   }, [history, setInputEditor]);
 
   useEffect(() => {
-    applyCurrentSettings(editorInstanceRef.current!.getCoreEditor(), settings);
+    const { current: editor } = editorInstanceRef;
+    applyCurrentSettings(editor!.getCoreEditor(), settings);
     // Preserve legacy focus behavior after settings have updated.
-    editorInstanceRef
-      .current!.getCoreEditor()
+    editor!
+      .getCoreEditor()
       .getContainer()
       .focus();
   }, [settings]);

src/legacy/core_plugins/console/public/np_ready/application/containers/editor/legacy/console_editor/editor.tsx

@@ -16,15 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import { useCallback } from 'react';
 import { useEditorActionContext } from '../contexts/editor_context';
 import { instance as registry } from '../contexts/editor_context/editor_registry';
 
 export const useSetInputEditor = () => {
   const dispatch = useEditorActionContext();
 
-  return (editor: any) => {
-    dispatch({ type: 'setInputEditor', payload: editor });
-    registry.setInputEditor(editor);
-  };
+  return useCallback(
+    (editor: any) => {
+      dispatch({ type: 'setInputEditor', payload: editor });
+      registry.setInputEditor(editor);
+    },
+    [dispatch]
+  );
 };

src/legacy/core_plugins/console/public/np_ready/application/hooks/use_set_input_editor.ts

@@ -104,25 +104,12 @@ export class LegacyCoreEditor implements CoreEditor {
     return this.editor.getValue();
   }
 
-  setValue(text: string, forceRetokenize: boolean): Promise<void> {
+  async setValue(text: string, forceRetokenize: boolean): Promise<void> {
     const session = this.editor.getSession();
     session.setValue(text);
-    return new Promise(resolve => {
-      if (!forceRetokenize) {
-        // resolve immediately
-        resolve();
-        return;
-      }
-
-      // force update of tokens, but not on this thread to allow for ace rendering.
-      setTimeout(function() {
-        let i;
-        for (i = 0; i < session.getLength(); i++) {
-          session.getTokens(i);
-        }
-        resolve();
-      });
-    });
+    if (forceRetokenize) {
+      await this.forceRetokenize();
+    }
   }
 
   getLineValue(lineNumber: number): string {
@@ -241,6 +228,20 @@ export class LegacyCoreEditor implements CoreEditor {
     return Boolean((this.editor as any).completer && (this.editor as any).completer.activated);
   }
 
+  private forceRetokenize() {
+    const session = this.editor.getSession();
+    return new Promise(resolve => {
+      // force update of tokens, but not on this thread to allow for ace rendering.
+      setTimeout(function() {
+        let i;
+        for (i = 0; i < session.getLength(); i++) {
+          session.getTokens(i);
+        }
+        resolve();
+      });
+    });
+  }
+
   // eslint-disable-next-line @typescript-eslint/camelcase
   private DO_NOT_USE_onPaste(text: string) {
     if (text && curl.detectCURL(text)) {

src/legacy/core_plugins/console/public/np_ready/application/models/legacy_core_editor/legacy_core_editor.ts

@@ -26,7 +26,7 @@ describe('ajaxStream', () => {
   it('pulls items from the stream and calls the handler', async () => {
     const handler = jest.fn(() => ({}));
     const { req, sendText, done } = mockRequest();
-    const messages = ['{ "hello": "world" }\n', '{ "tis": "fate" }\n'].map(m => `${m.length}:${m}`);
+    const messages = ['{ "hello": "world" }\n', '{ "tis": "fate" }\n'];
 
     const promise = ajaxStream('', {}, req, {
       url: '/test/endpoint',
@@ -43,12 +43,34 @@ describe('ajaxStream', () => {
     expect(handler).toHaveBeenCalledWith({ tis: 'fate' });
   });
 
+  it('handles newlines in values', async () => {
+    const handler = jest.fn(() => ({}));
+    const { req, sendText, done } = mockRequest();
+    const messages = [
+      JSON.stringify({ hello: 'wo\nrld' }),
+      '\n',
+      JSON.stringify({ tis: 'fa\nte' }),
+      '\n',
+    ];
+
+    const promise = ajaxStream('', {}, req, {
+      url: '/test/endpoint',
+      onResponse: handler,
+    });
+
+    messages.forEach(sendText);
+    done();
+
+    await promise;
+    expect(handler).toHaveBeenCalledTimes(2);
+    expect(handler).toHaveBeenCalledWith({ hello: 'wo\nrld' });
+    expect(handler).toHaveBeenCalledWith({ tis: 'fa\nte' });
+  });
+
   it('handles partial messages', async () => {
     const handler = jest.fn(() => ({}));
     const { req, sendText, done } = mockRequest();
-    const messages = ['{ "hello": "world" }\n', '{ "tis": "fate" }\n']
-      .map(m => `${m.length}:${m}`)
-      .join('');
+    const messages = ['{ "hello": "world" }\n', '{ "tis": "fate" }\n'].join('');
 
     const promise = ajaxStream('', {}, req, {
       url: '/test/endpoint',
@@ -117,7 +139,7 @@ describe('ajaxStream', () => {
   it('rejects if the payload contains invalid JSON', async () => {
     const handler = jest.fn(() => ({}));
     const { req, sendText, done } = mockRequest();
-    const messages = ['{ waut? }\n'].map(m => `${m.length}:${m}`).join('');
+    const messages = ['{ waut? }\n'].join('');
 
     const promise = ajaxStream('', {}, req, {
       url: '/test/endpoint',
@@ -130,32 +152,12 @@ describe('ajaxStream', () => {
     expect(await promise.then(() => true).catch(() => false)).toBeFalsy();
   });
 
-  it('rejects if the delim is invalid', async () => {
-    const handler = jest.fn(() => ({}));
-    const { req, sendText, done } = mockRequest();
-    const messages = '{ "hi": "there" }';
-
-    const promise = ajaxStream('', {}, req, {
-      url: '/test/endpoint',
-      onResponse: handler,
-    });
-
-    sendText(messages);
-    done();
-
-    expect(await promise.then(() => true).catch(({ message }) => message)).toMatch(
-      /invalid stream response/i
-    );
-  });
-
   it('rejects if the handler throws', async () => {
     const handler = jest.fn(() => {
       throw new Error('DOH!');
     });
     const { req, sendText, done } = mockRequest();
-    const messages = ['{ "hello": "world" }\n', '{ "tis": "fate" }\n']
-      .map(m => `${m.length}:${m}`)
-      .join('');
+    const messages = ['{ "hello": "world" }\n', '{ "tis": "fate" }\n'].join('');
 
     const promise = ajaxStream('', {}, req, {
       url: '/test/endpoint',