Merge branch 'master' into expression_error

dev_docs/tutorials/debugging.mdx

@@ -0,0 +1,61 @@
+---
+id: kibDevTutorialDebugging
+slug: /kibana-dev-docs/tutorial/debugging
+title: Debugging in development
+summary: Learn how to debug Kibana while running from source
+date: 2021-04-26
+tags: ['kibana', 'onboarding', 'dev', 'tutorials', 'debugging']
+---
+
+There are multiple ways to go about debugging Kibana when running from source.
+
+## Debugging using Chrome DevTools
+
+You will need to run Node using `--inspect` or `--inspect-brk` in order to enable the inspector. Additional information can be found in the [Node.js docs](https://nodejs.org/en/docs/guides/debugging-getting-started/).
+
+Once Node is running with the inspector enabled, you can open `chrome://inspect` in your Chrome browser. You should see a remote target for the inspector running. Click "inspect". You can now begin using the debugger.
+
+Next we will go over how to exactly enable the inspector for different aspects of the codebase.
+
+### Jest Unit Tests
+
+You will need to run Jest directly from the Node script:
+
+`node --inspect-brk scripts/jest [TestPathPattern]`
+
+### Functional Test Runner
+
+`node --inspect-brk scripts/functional_test_runner`
+
+### Development Server 
+
+`node --inspect-brk scripts/kibana`
+
+## Debugging using logging
+
+When running Kibana, it's sometimes helpful to enable verbose logging.
+
+`yarn start --verbose`
+
+Using verbose logging usually results in much more information than you're interested in. The [logging documentation](https://www.elastic.co/guide/en/kibana/current/logging-settings.html) covers ways to change the log level of certain types.
+
+In the following example of a configuration stored in `config/kibana.dev.yml` we are logging all Elasticsearch queries and any logs created by the Management plugin.
+
+```
+logging:
+  appenders:
+    console:
+      type: console
+      layout:
+        type: pattern
+        highlight: true
+  root:
+    appenders: [default, console]
+    level: info
+
+  loggers:
+    - name: plugins.management
+      level: debug
+    - name: elasticsearch.query
+      level: debug
+```

package.json

@@ -114,6 +114,7 @@
     "@elastic/safer-lodash-set": "link:bazel-bin/packages/elastic-safer-lodash-set",
     "@elastic/search-ui-app-search-connector": "^1.6.0",
     "@elastic/ui-ace": "0.2.3",
+    "@emotion/react": "^11.4.0",
     "@hapi/accept": "^5.0.2",
     "@hapi/boom": "^9.1.1",
     "@hapi/cookie": "^11.0.2",
@@ -454,6 +455,8 @@
     "@elastic/eslint-plugin-eui": "0.0.2",
     "@elastic/github-checks-reporter": "0.0.20b3",
     "@elastic/makelogs": "^6.0.0",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@emotion/jest": "^11.3.0",
     "@istanbuljs/schema": "^0.1.2",
     "@jest/reporters": "^26.6.2",
     "@kbn/babel-code-parser": "link:bazel-bin/packages/kbn-babel-code-parser",

packages/elastic-eslint-config-kibana/.eslintrc.js

@@ -1,3 +1,5 @@
+const { USES_STYLED_COMPONENTS } = require('@kbn/dev-utils'); 
+
 module.exports = {
   extends: [
     './javascript.js',
@@ -79,7 +81,13 @@ module.exports = {
           from: 'react-intl',
           to: '@kbn/i18n/react',
           disallowedMessage: `import from @kbn/i18n/react instead`
-        }
+        },
+        {
+          from: 'styled-components',
+          to: false,
+          exclude: USES_STYLED_COMPONENTS,
+          disallowedMessage: `Prefer using @emotion/react instead. To use styled-components, ensure you plugin is enabled in @kbn/dev-utils/src/babel.ts.`
+        },
       ],
     ],
   },

packages/kbn-babel-preset/BUILD.bazel

@@ -32,6 +32,7 @@ DEPS = [
   "@npm//@babel/preset-env",
   "@npm//@babel/preset-react",
   "@npm//@babel/preset-typescript",
+  "@npm//@emotion/babel-preset-css-prop",
   "@npm//babel-plugin-add-module-exports",
   "@npm//babel-plugin-styled-components",
   "@npm//babel-plugin-transform-react-remove-prop-types",

packages/kbn-babel-preset/webpack_preset.js

@@ -6,6 +6,8 @@
  * Side Public License, v 1.
  */
 
+const { USES_STYLED_COMPONENTS } = require.resolve('@kbn/dev-utils');
+
 module.exports = () => {
   return {
     presets: [
@@ -21,14 +23,6 @@ module.exports = () => {
       ],
       require('./common_preset'),
     ],
-    plugins: [
-      [
-        require.resolve('babel-plugin-styled-components'),
-        {
-          fileName: false,
-        },
-      ],
-    ],
     env: {
       production: {
         plugins: [
@@ -42,5 +36,29 @@ module.exports = () => {
         ],
       },
     },
+    overrides: [
+      {
+        include: USES_STYLED_COMPONENTS,
+        plugins: [
+          [
+            require.resolve('babel-plugin-styled-components'),
+            {
+              fileName: false,
+            },
+          ],
+        ],
+      },
+      {
+        exclude: USES_STYLED_COMPONENTS,
+        presets: [
+          [
+            require.resolve('@emotion/babel-preset-css-prop'),
+            {
+              labelFormat: '[local]',
+            },
+          ],
+        ],
+      },
+    ],
   };
 };

packages/kbn-crypto/BUILD.bazel

@@ -38,7 +38,8 @@ TYPES_DEPS = [
   "@npm//@types/node",
   "@npm//@types/node-forge",
   "@npm//@types/testing-library__jest-dom",
-  "@npm//resize-observer-polyfill"
+  "@npm//resize-observer-polyfill",
+  "@npm//@emotion/react",
 ]
 
 DEPS = SRC_DEPS + TYPES_DEPS

packages/kbn-dev-utils/src/babel.ts

@@ -46,3 +46,14 @@ export async function transformFileWithBabel(file: File) {
   file.extname = '.js';
   transformedFiles.add(file);
 }
+
+/**
+ * Synchronized regex list of files that use `styled-components`.
+ * Used by `kbn-babel-preset` and `elastic-eslint-config-kibana`.
+ */
+export const USES_STYLED_COMPONENTS = [
+  /packages[\/\\]kbn-ui-shared-deps[\/\\]/,
+  /src[\/\\]plugins[\/\\](data|kibana_react)[\/\\]/,
+  /x-pack[\/\\]plugins[\/\\](apm|beats_management|cases|fleet|infra|lists|observability|osquery|security_solution|timelines|uptime)[\/\\]/,
+  /x-pack[\/\\]test[\/\\]plugin_functional[\/\\]plugins[\/\\]resolver_test[\/\\]/,
+];

packages/kbn-eslint-plugin-eslint/rules/module_migration.js

@@ -78,6 +78,12 @@ module.exports = {
             disallowedMessage: {
               type: 'string',
             },
+            include: {
+              type: 'array',
+            },
+            exclude: {
+              type: 'array',
+            },
           },
           anyOf: [
             {
@@ -95,7 +101,22 @@ module.exports = {
     ],
   },
   create: (context) => {
-    const mappings = context.options[0];
+    const filename = path.relative(KIBANA_ROOT, context.getFilename());
+
+    const mappings = context.options[0].filter((mapping) => {
+      // exclude mapping rule if it is explicitly excluded from this file
+      if (mapping.exclude && mapping.exclude.some((p) => p.test(filename))) {
+        return false;
+      }
+
+      // if this mapping rule is only included in specific files, optionally include it
+      if (mapping.include) {
+        return mapping.include.some((p) => p.test(filename));
+      }
+
+      // include all mapping rules by default
+      return true;
+    });
 
     return {
       ImportDeclaration(node) {

packages/kbn-storybook/lib/default_config.ts

@@ -6,8 +6,11 @@
  * Side Public License, v 1.
  */
 
+import * as path from 'path';
 import { StorybookConfig } from '@storybook/core/types';
+import { REPO_ROOT } from './constants';
 
+const toPath = (_path: string) => path.join(REPO_ROOT, _path);
 export const defaultConfig: StorybookConfig = {
   addons: ['@kbn/storybook/preset', '@storybook/addon-a11y', '@storybook/addon-essentials'],
   stories: ['../**/*.stories.tsx'],
@@ -22,6 +25,21 @@ export const defaultConfig: StorybookConfig = {
 
     config.node = { fs: 'empty' };
 
-    return config;
+    // Remove when @storybook has moved to @emotion v11
+    // https://github.com/storybookjs/storybook/issues/13145
+    const emotion11CompatibleConfig = {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve?.alias,
+          '@emotion/core': toPath('node_modules/@emotion/react'),
+          '@emotion/styled': toPath('node_modules/@emotion/styled'),
+          'emotion-theming': toPath('node_modules/@emotion/react'),
+        },
+      },
+    };
+
+    return emotion11CompatibleConfig;
   },
 };

packages/kbn-storybook/lib/theme_switcher.tsx

@@ -54,6 +54,7 @@ export function ThemeSwitcher() {
       closeOnClick
       tooltip={({ onHide }) => <Menu onHide={onHide} />}
     >
+      {/* @ts-ignore Remove when @storybook has moved to @emotion v11 */}
       <IconButton key="eui-theme" title="Change the EUI theme">
         <Icons icon={selectedTheme?.includes('dark') ? 'heart' : 'hearthollow'} />
       </IconButton>

packages/kbn-telemetry-tools/BUILD.bazel

@@ -47,7 +47,8 @@ TYPES_DEPS = [
   "@npm//@types/node",
   "@npm//@types/normalize-path",
   "@npm//@types/testing-library__jest-dom",
-  "@npm//resize-observer-polyfill"
+  "@npm//resize-observer-polyfill",
+  "@npm//@emotion/react",
 ]
 
 DEPS = SRC_DEPS + TYPES_DEPS

packages/kbn-test/jest-preset.js

@@ -66,6 +66,7 @@ module.exports = {
   snapshotSerializers: [
     '<rootDir>/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts',
     '<rootDir>/node_modules/enzyme-to-json/serializer',
+    '<rootDir>/node_modules/@emotion/jest/serializer',
   ],
 
   // The test environment that will be used for testing

packages/kbn-test/src/kbn_client/kbn_client_requester.test.ts

@@ -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
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { pathWithSpace } from './kbn_client_requester';
+
+describe('pathWithSpace()', () => {
+  it('adds a space to the path', () => {
+    expect(pathWithSpace('hello')`/foo/bar`).toMatchInlineSnapshot(`"/s/hello/foo/bar"`);
+  });
+
+  it('ignores the space when it is empty', () => {
+    expect(pathWithSpace(undefined)`/foo/bar`).toMatchInlineSnapshot(`"/foo/bar"`);
+    expect(pathWithSpace('')`/foo/bar`).toMatchInlineSnapshot(`"/foo/bar"`);
+  });
+
+  it('ignores the space when it is the default space', () => {
+    expect(pathWithSpace('default')`/foo/bar`).toMatchInlineSnapshot(`"/foo/bar"`);
+  });
+
+  it('uriencodes variables in the path', () => {
+    expect(pathWithSpace('space')`hello/${'funky/username🏴‍☠️'}`).toMatchInlineSnapshot(
+      `"/s/space/hello/funky%2Fusername%F0%9F%8F%B4%E2%80%8D%E2%98%A0%EF%B8%8F"`
+    );
+  });
+
+  it('ensures the path always starts with a slash', () => {
+    expect(pathWithSpace('foo')`hello/world`).toMatchInlineSnapshot(`"/s/foo/hello/world"`);
+    expect(pathWithSpace()`hello/world`).toMatchInlineSnapshot(`"/hello/world"`);
+  });
+});

packages/kbn-test/src/kbn_client/kbn_client_requester.ts

@@ -23,6 +23,19 @@ const isIgnorableError = (error: any, ignorableErrors: number[] = []) => {
   return isAxiosResponseError(error) && ignorableErrors.includes(error.response.status);
 };
 
+/**
+ * Creates a template literal tag which will uriencode the variables in a template literal
+ * as well as prefix the path with a specific space if one is defined
+ */
+export const pathWithSpace = (space?: string) => {
+  const prefix = !space || space === 'default' ? '' : uriencode`/s/${space}`;
+
+  return (strings: TemplateStringsArray, ...args: Array<string | number>) => {
+    const path = uriencode(strings, ...args);
+    return path.startsWith('/') || path === '' ? `${prefix}${path}` : `${prefix}/${path}`;
+  };
+};
+
 export const uriencode = (
   strings: TemplateStringsArray,
   ...values: Array<string | number | boolean>