Merge remote-tracking branch 'upstream/master' into fix-repo-root-fin…

…ding-for-ci
elastic · Jul 9, 2021 · cbed23c · cbed23c
2 parents fe532cb + ce48b73
commit cbed23c
Show file tree

Hide file tree

Showing 53 changed files with 845 additions and 391 deletions.
diff --git a/package.json b/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",

diff --git a/packages/elastic-eslint-config-kibana/.eslintrc.js b/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.`
+        },
       ],
     ],
   },

diff --git a/packages/kbn-babel-preset/BUILD.bazel b/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",

diff --git a/packages/kbn-babel-preset/webpack_preset.js b/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]',
+            },
+          ],
+        ],
+      },
+    ],
   };
 };
diff --git a/packages/kbn-crypto/BUILD.bazel b/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

diff --git a/packages/kbn-dev-utils/src/babel.ts b/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[\/\\]/,
+];
diff --git a/packages/kbn-eslint-plugin-eslint/rules/module_migration.js b/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) {

diff --git a/packages/kbn-storybook/lib/default_config.ts b/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;
   },
 };
diff --git a/packages/kbn-storybook/lib/theme_switcher.tsx b/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>

diff --git a/packages/kbn-telemetry-tools/BUILD.bazel b/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

diff --git a/packages/kbn-test/jest-preset.js b/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

diff --git a/packages/kbn-test/src/kbn_client/kbn_client_requester.test.ts b/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"`);
+  });
+});
diff --git a/packages/kbn-test/src/kbn_client/kbn_client_requester.ts b/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>

diff --git a/packages/kbn-test/src/kbn_client/kbn_client_ui_settings.ts b/packages/kbn-test/src/kbn_client/kbn_client_ui_settings.ts
@@ -8,7 +8,7 @@
 
 import { ToolingLog } from '@kbn/dev-utils';
 
-import { KbnClientRequester, uriencode } from './kbn_client_requester';
+import { KbnClientRequester, pathWithSpace } from './kbn_client_requester';
 
 export type UiSettingValues = Record<string, string | number | boolean>;
 interface UiSettingsApiResponse {
@@ -27,8 +27,8 @@ export class KbnClientUiSettings {
     private readonly defaults?: UiSettingValues
   ) {}
 
-  async get(setting: string) {
-    const all = await this.getAll();
+  async get(setting: string, { space }: { space?: string } = {}) {
+    const all = await this.getAll({ space });
     const value = all[setting]?.userValue;
 
     this.log.verbose('uiSettings.value: %j', value);
@@ -45,9 +45,9 @@ export class KbnClientUiSettings {
   /**
    * Unset a uiSetting
    */
-  async unset(setting: string) {
+  async unset(setting: string, { space }: { space?: string } = {}) {
     const { data } = await this.requester.request<any>({
-      path: uriencode`/api/kibana/settings/${setting}`,
+      path: pathWithSpace(space)`/api/kibana/settings/${setting}`,
       method: 'DELETE',
     });
     return data;
@@ -57,7 +57,10 @@ export class KbnClientUiSettings {
    * Replace all uiSettings with the `doc` values, `doc` is merged
    * with some defaults
    */
-  async replace(doc: UiSettingValues, { retries = 5 }: { retries?: number } = {}) {
+  async replace(
+    doc: UiSettingValues,
+    { retries = 5, space }: { retries?: number; space?: string } = {}
+  ) {
     this.log.debug('replacing kibana config doc: %j', doc);
 
     const changes: Record<string, any> = {
@@ -73,7 +76,7 @@ export class KbnClientUiSettings {
 
     await this.requester.request({
       method: 'POST',
-      path: '/api/kibana/settings',
+      path: pathWithSpace(space)`/api/kibana/settings`,
       body: { changes },
       retries,
     });
@@ -82,11 +85,11 @@ export class KbnClientUiSettings {
   /**
    * Add fields to the config doc (like setting timezone and defaultIndex)
    */
-  async update(updates: UiSettingValues) {
+  async update(updates: UiSettingValues, { space }: { space?: string } = {}) {
     this.log.debug('applying update to kibana config: %j', updates);
 
     await this.requester.request({
-      path: '/api/kibana/settings',
+      path: pathWithSpace(space)`/api/kibana/settings`,
       method: 'POST',
       body: {
         changes: updates,
@@ -95,9 +98,9 @@ export class KbnClientUiSettings {
     });
   }
 
-  private async getAll() {
+  private async getAll({ space }: { space?: string } = {}) {
     const { data } = await this.requester.request<UiSettingsApiResponse>({
-      path: '/api/kibana/settings',
+      path: pathWithSpace(space)`/api/kibana/settings`,
       method: 'GET',
     });
 

diff --git a/packages/kbn-ui-shared-deps/BUILD.bazel b/packages/kbn-ui-shared-deps/BUILD.bazel
@@ -40,6 +40,7 @@ SRC_DEPS = [
   "@npm//@elastic/charts",
   "@npm//@elastic/eui",
   "@npm//@elastic/numeral",
+  "@npm//@emotion/react",
   "@npm//abortcontroller-polyfill",
   "@npm//angular",
   "@npm//babel-loader",

diff --git a/packages/kbn-ui-shared-deps/src/entry.js b/packages/kbn-ui-shared-deps/src/entry.js
@@ -18,6 +18,7 @@ export const KbnI18n = require('@kbn/i18n');
 export const KbnI18nAngular = require('@kbn/i18n/angular');
 export const KbnI18nReact = require('@kbn/i18n/react');
 export const Angular = require('angular');
+export const EmotionReact = require('@emotion/react');
 export const Moment = require('moment');
 export const MomentTimezone = require('moment-timezone/moment-timezone');
 export const KbnMonaco = require('@kbn/monaco');

diff --git a/packages/kbn-ui-shared-deps/src/index.js b/packages/kbn-ui-shared-deps/src/index.js
@@ -57,6 +57,7 @@ exports.externals = {
   '@kbn/i18n': '__kbnSharedDeps__.KbnI18n',
   '@kbn/i18n/angular': '__kbnSharedDeps__.KbnI18nAngular',
   '@kbn/i18n/react': '__kbnSharedDeps__.KbnI18nReact',
+  '@emotion/react': '__kbnSharedDeps__.EmotionReact',
   jquery: '__kbnSharedDeps__.Jquery',
   moment: '__kbnSharedDeps__.Moment',
   'moment-timezone': '__kbnSharedDeps__.MomentTimezone',