Merge branch 'master' into kibana-page-template-as-6

docs/developer/getting-started/monorepo-packages.asciidoc

@@ -100,6 +100,7 @@ yarn kbn watch-bazel
 - @kbn/server-http-tools
 - @kbn/server-route-repository
 - @kbn/std
+- @kbn/storybook
 - @kbn/telemetry-utils
 - @kbn/tinymath
 - @kbn/ui-shared-deps

package.json

@@ -97,8 +97,8 @@
     "yarn": "^1.21.1"
   },
   "dependencies": {
-    "@elastic/apm-rum": "^5.6.1",
-    "@elastic/apm-rum-react": "^1.2.5",
+    "@elastic/apm-rum": "^5.8.0",
+    "@elastic/apm-rum-react": "^1.2.11",
     "@elastic/charts": "30.1.0",
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.13",
@@ -224,7 +224,7 @@
     "deep-freeze-strict": "^1.1.1",
     "deepmerge": "^4.2.2",
     "del": "^5.1.0",
-    "elastic-apm-node": "^3.14.0",
+    "elastic-apm-node": "^3.16.0",
     "elasticsearch": "^16.7.0",
     "execa": "^4.0.2",
     "exit-hook": "^2.2.0",
@@ -468,7 +468,7 @@
     "@kbn/plugin-generator": "link:bazel-bin/packages/kbn-plugin-generator",
     "@kbn/plugin-helpers": "link:packages/kbn-plugin-helpers",
     "@kbn/pm": "link:packages/kbn-pm",
-    "@kbn/storybook": "link:packages/kbn-storybook",
+    "@kbn/storybook": "link:bazel-bin/packages/kbn-storybook",
     "@kbn/telemetry-tools": "link:bazel-bin/packages/kbn-telemetry-tools",
     "@kbn/test": "link:packages/kbn-test",
     "@kbn/test-subj-selector": "link:packages/kbn-test-subj-selector",
@@ -841,4 +841,4 @@
     "yargs": "^15.4.1",
     "zlib": "^1.0.5"
   }
-}
+}

packages/BUILD.bazel

@@ -44,6 +44,7 @@ filegroup(
       "//packages/kbn-server-http-tools:build",
       "//packages/kbn-server-route-repository:build",
       "//packages/kbn-std:build",
+      "//packages/kbn-storybook:build",
       "//packages/kbn-telemetry-tools:build",
       "//packages/kbn-tinymath:build",
       "//packages/kbn-ui-shared-deps:build",

packages/kbn-storybook/BUILD.bazel

@@ -0,0 +1,98 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
+
+PKG_BASE_NAME = "kbn-storybook"
+PKG_REQUIRE_NAME = "@kbn/storybook"
+
+SOURCE_FILES = glob(
+  [
+    "lib/**/*.ts",
+    "lib/**/*.tsx",
+    "*.ts",
+  ],
+  exclude = ["**/*.test.*"],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "preset/package.json",
+  "templates/index.ejs",
+  "package.json",
+  "README.md",
+  "preset.js",
+]
+
+SRC_DEPS = [
+  "//packages/kbn-dev-utils",
+  "//packages/kbn-ui-shared-deps",
+  "@npm//@storybook/addons",
+  "@npm//@storybook/api",
+  "@npm//@storybook/components",
+  "@npm//@storybook/core",
+  "@npm//@storybook/node-logger",
+  "@npm//@storybook/react",
+  "@npm//@storybook/theming",
+  "@npm//loader-utils",
+  "@npm//react",
+  "@npm//webpack",
+  "@npm//webpack-merge",
+]
+
+TYPES_DEPS = [
+  "@npm//@types/loader-utils",
+  "@npm//@types/node",
+  "@npm//@types/webpack",
+  "@npm//@types/webpack-merge",
+]
+
+DEPS = SRC_DEPS + TYPES_DEPS
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+  ],
+)
+
+ts_project(
+  name = "tsc",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = DEPS,
+  declaration = True,
+  declaration_map = True,
+  incremental = True,
+  out_dir = "target",
+  source_map = True,
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_BASE_NAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = [":tsc"] + DEPS,
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [
+    ":%s" % PKG_BASE_NAME,
+  ]
+)
+
+filegroup(
+  name = "build",
+  srcs = [
+    ":npm_module",
+  ],
+  visibility = ["//visibility:public"],
+)

packages/kbn-storybook/package.json

@@ -7,10 +7,5 @@
   "types": "./target/index.d.ts",
   "kibana": {
     "devOnly": true
-  },
-  "scripts": {
-    "build": "../../node_modules/.bin/tsc",
-    "kbn:bootstrap": "yarn build",
-    "kbn:watch": "yarn build --watch"
   }
 }

packages/kbn-storybook/preset.js

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+// eslint-disable-next-line
 const webpackConfig = require('./target/webpack.config').default;
 
 module.exports = {

packages/kbn-storybook/preset/package.json

@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "main": "../preset.js"
+}

packages/kbn-storybook/tsconfig.json

@@ -1,14 +1,15 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "incremental": false,
+    "incremental": true,
     "outDir": "target",
     "skipLibCheck": true,
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
     "sourceRoot": "../../../../packages/kbn-storybook",
+    "target": "es2015",
     "types": ["node"]
   },
-  "include": ["*.ts", "lib/**/*.ts", "lib/**/*.tsx", "../../typings/index.d.ts"]
+  "include": ["*.ts", "lib/**/*.ts", "lib/**/*.tsx"]
 }

packages/kbn-storybook/typings.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+// Storybook react doesn't declare this in its typings, but it's there.
+declare module '@storybook/react/standalone';
+
+// Storybook references this module. It's @ts-ignored in the codebase but when
+// built into its dist it strips that out. Add it here to avoid a type checking
+// error.
+//
+// See https://github.com/storybookjs/storybook/issues/11684
+declare module 'react-syntax-highlighter/dist/cjs/create-element';
+declare module 'react-syntax-highlighter/dist/cjs/prism-light';

packages/kbn-storybook/webpack.config.ts

@@ -94,7 +94,7 @@ export default function ({ config: storybookConfig }: { config: Configuration })
     return plugin.options && typeof plugin.options.template === 'string';
   });
   if (htmlWebpackPlugin) {
-    htmlWebpackPlugin.options.template = require.resolve('../lib/templates/index.ejs');
+    htmlWebpackPlugin.options.template = require.resolve('../templates/index.ejs');
   }
 
   return webpackMerge(storybookConfig, config);

packages/kbn-ui-shared-deps/webpack.config.js

@@ -7,7 +7,6 @@
  */
 
 const Path = require('path');
-const Os = require('os');
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
@@ -31,15 +30,15 @@ module.exports = {
     'kbn-ui-shared-deps.v8.light': ['@elastic/eui/dist/eui_theme_amsterdam_light.css'],
   },
   context: __dirname,
-  devtool: 'cheap-source-map',
+  // cheap-source-map should be used if needed
+  devtool: false,
   output: {
     path: UiSharedDeps.distDir,
     filename: '[name].js',
     sourceMapFilename: '[file].map',
     devtoolModuleFilenameTemplate: (info) =>
       `kbn-ui-shared-deps/${Path.relative(REPO_ROOT, info.absoluteResourcePath)}`,
     library: '__kbnSharedDeps__',
-    futureEmitAssets: true,
   },
 
   module: {
@@ -111,7 +110,7 @@ module.exports = {
   optimization: {
     minimizer: [
       new CssMinimizerPlugin({
-        parallel: Math.min(Os.cpus().length, 2),
+        parallel: false,
         minimizerOptions: {
           preset: [
             'default',
@@ -125,7 +124,7 @@ module.exports = {
         cache: false,
         sourceMap: false,
         extractComments: false,
-        parallel: Math.min(Os.cpus().length, 2),
+        parallel: false,
         terserOptions: {
           compress: true,
           mangle: true,

src/core/public/apm_system.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import type { ApmBase } from '@elastic/apm-rum';
+import type { ApmBase, AgentConfigOptions } from '@elastic/apm-rum';
 import { modifyUrl } from '@kbn/std';
 import type { InternalApplicationStart } from './application';
 
@@ -18,9 +18,8 @@ const HTTP_REQUEST_TRANSACTION_NAME_REGEX = /^(GET|POST|PUT|HEAD|PATCH|DELETE|OP
  * that lives in the Kibana Platform.
  */
 
-interface ApmConfig {
-  // AgentConfigOptions is not exported from @elastic/apm-rum
-  active?: boolean;
+interface ApmConfig extends AgentConfigOptions {
+  // Kibana-specific config settings:
   globalLabels?: Record<string, string>;
 }
 

packages/kbn-storybook/typings.d.ts → src/plugins/management/common/index.ts

@@ -6,5 +6,4 @@
  * Side Public License, v 1.
  */
 
-// Storybook react doesn't declare this in its typings, but it's there.
-declare module '@storybook/react/standalone';
+export { ManagementAppLocator } from './locator';

src/plugins/management/common/locator.test.ts

@@ -7,16 +7,16 @@
  */
 
 import { MANAGEMENT_APP_ID } from './contants';
-import { ManagementAppLocator, MANAGEMENT_APP_LOCATOR } from './locator';
+import { ManagementAppLocatorDefinition, MANAGEMENT_APP_LOCATOR } from './locator';
 
 test('locator has the right ID', () => {
-  const locator = new ManagementAppLocator();
+  const locator = new ManagementAppLocatorDefinition();
 
   expect(locator.id).toBe(MANAGEMENT_APP_LOCATOR);
 });
 
 test('returns management app ID', async () => {
-  const locator = new ManagementAppLocator();
+  const locator = new ManagementAppLocatorDefinition();
   const location = await locator.getLocation({
     sectionId: 'a',
     appId: 'b',
@@ -28,26 +28,26 @@ test('returns management app ID', async () => {
 });
 
 test('returns Kibana location for section ID and app ID pair', async () => {
-  const locator = new ManagementAppLocator();
+  const locator = new ManagementAppLocatorDefinition();
   const location = await locator.getLocation({
     sectionId: 'ingest',
     appId: 'index',
   });
 
   expect(location).toMatchObject({
-    route: '/ingest/index',
+    path: '/ingest/index',
     state: {},
   });
 });
 
 test('when app ID is not provided, returns path to just the section ID', async () => {
-  const locator = new ManagementAppLocator();
+  const locator = new ManagementAppLocatorDefinition();
   const location = await locator.getLocation({
     sectionId: 'data',
   });
 
   expect(location).toMatchObject({
-    route: '/data',
+    path: '/data',
     state: {},
   });
 });

src/plugins/management/common/locator.ts

@@ -7,7 +7,7 @@
  */
 
 import { SerializableState } from 'src/plugins/kibana_utils/common';
-import { LocatorDefinition } from 'src/plugins/share/common';
+import { LocatorDefinition, LocatorPublic } from 'src/plugins/share/common';
 import { MANAGEMENT_APP_ID } from './contants';
 
 export const MANAGEMENT_APP_LOCATOR = 'MANAGEMENT_APP_LOCATOR';
@@ -17,15 +17,18 @@ export interface ManagementAppLocatorParams extends SerializableState {
   appId?: string;
 }
 
-export class ManagementAppLocator implements LocatorDefinition<ManagementAppLocatorParams> {
+export type ManagementAppLocator = LocatorPublic<ManagementAppLocatorParams>;
+
+export class ManagementAppLocatorDefinition
+  implements LocatorDefinition<ManagementAppLocatorParams> {
   public readonly id = MANAGEMENT_APP_LOCATOR;
 
   public readonly getLocation = async (params: ManagementAppLocatorParams) => {
-    const route = `/${params.sectionId}${params.appId ? '/' + params.appId : ''}`;
+    const path = `/${params.sectionId}${params.appId ? '/' + params.appId : ''}`;
 
     return {
       app: MANAGEMENT_APP_ID,
-      route,
+      path,
       state: {},
     };
   };

src/plugins/management/public/mocks/index.ts

@@ -33,9 +33,11 @@ const createSetupContract = (): ManagementSetup => ({
   locator: {
     getLocation: jest.fn(async () => ({
       app: 'MANAGEMENT',
-      route: '',
+      path: '',
       state: {},
     })),
+    getUrl: jest.fn(),
+    useUrl: jest.fn(),
     navigate: jest.fn(),
   },
 });