Merge branch 'master' into 100445-fix-failing-anomaly-functional-test

package.json

@@ -130,6 +130,7 @@
     "@kbn/config": "link:bazel-bin/packages/kbn-config/npm_module",
     "@kbn/config-schema": "link:bazel-bin/packages/kbn-config-schema/npm_module",
     "@kbn/crypto": "link:bazel-bin/packages/kbn-crypto/npm_module",
+    "@kbn/mapbox-gl": "link:bazel-bin/packages/kbn-mapbox-gl/npm_module",
     "@kbn/i18n": "link:bazel-bin/packages/kbn-i18n/npm_module",
     "@kbn/interpreter": "link:packages/kbn-interpreter",
     "@kbn/io-ts-utils": "link:packages/kbn-io-ts-utils",

packages/BUILD.bazel

@@ -24,6 +24,7 @@ filegroup(
       "//packages/kbn-i18n:build",
       "//packages/kbn-legacy-logging:build",
       "//packages/kbn-logging:build",
+      "//packages/kbn-mapbox-gl:build",
       "//packages/kbn-plugin-generator:build",
       "//packages/kbn-securitysolution-list-constants:build",
       "//packages/kbn-securitysolution-io-ts-types:build",

packages/kbn-mapbox-gl/BUILD.bazel

@@ -0,0 +1,84 @@
+
+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-mapbox-gl"
+PKG_REQUIRE_NAME = "@kbn/mapbox-gl"
+
+SOURCE_FILES = glob(
+  [
+    "src/**/*.ts",
+  ],
+  exclude = [
+    "**/*.test.*",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+  "README.md"
+]
+
+SRC_DEPS = [
+  "@npm//@mapbox/mapbox-gl-rtl-text",
+  "@npm//file-loader",
+  "@npm//mapbox-gl",
+]
+
+TYPES_DEPS = [
+  "@npm//@types/mapbox-gl",
+]
+
+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,
+  root_dir = "src",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_BASE_NAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = DEPS + [":tsc"],
+  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-mapbox-gl/README.md

@@ -0,0 +1,3 @@
+# @kbn/mapbox-gl
+
+Default instantiation for mapbox-gl.

packages/kbn-mapbox-gl/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@kbn/mapbox-gl",
+  "version": "1.0.0",
+  "private": true,
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "main": "./target/index.js",
+  "types": "./target/index.d.ts"
+}

packages/kbn-mapbox-gl/src/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 './typings';
+import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp';
+// @ts-expect-error
+import mbRtlPlugin from '!!file-loader!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js';
+// @ts-expect-error
+import mbWorkerUrl from '!!file-loader!mapbox-gl/dist/mapbox-gl-csp-worker';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+mapboxgl.workerUrl = mbWorkerUrl;
+mapboxgl.setRTLTextPlugin(mbRtlPlugin);
+
+export { mapboxgl };

packages/kbn-mapbox-gl/src/typings.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+// Mapbox-gl doesn't declare this type.
+declare module 'mapbox-gl/dist/mapbox-gl-csp';

packages/kbn-mapbox-gl/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "incremental": true,
+    "outDir": "./target",
+    "declaration": true,
+    "declarationMap": true,
+    "rootDir": "src",
+    "sourceMap": true,
+    "sourceRoot": "../../../../packages/kbn-mapbox-gl/src",
+    "types": []
+  },
+  "include": [
+    "src/**/*",
+  ]
+}

src/plugins/vis_type_vega/public/vega_view/vega_map_view/vega_map_view.scss

@@ -1,5 +1,3 @@
-@import '~mapbox-gl/dist/mapbox-gl.css';
-
 .vgaVis {
   .mapboxgl-canvas-container {
     cursor: auto;

src/plugins/vis_type_vega/public/vega_view/vega_map_view/view.test.ts

@@ -29,30 +29,31 @@ import {
 } from '../../services';
 import { initVegaLayer, initTmsRasterLayer } from './layers';
 
-// @ts-expect-error
-import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp';
-
-jest.mock('mapbox-gl/dist/mapbox-gl-csp', () => ({
-  setRTLTextPlugin: jest.fn(),
-  Map: jest.fn().mockImplementation(() => ({
-    getLayer: () => '',
-    removeLayer: jest.fn(),
-    once: (eventName: string, handler: Function) => handler(),
-    remove: () => jest.fn(),
-    getCanvas: () => ({ clientWidth: 512, clientHeight: 512 }),
-    getCenter: () => ({ lat: 20, lng: 20 }),
-    getZoom: () => 3,
-    addControl: jest.fn(),
-    addLayer: jest.fn(),
-    dragRotate: {
-      disable: jest.fn(),
-    },
-    touchZoomRotate: {
-      disableRotation: jest.fn(),
-    },
-  })),
-  MapboxOptions: jest.fn(),
-  NavigationControl: jest.fn(),
+import { mapboxgl } from '@kbn/mapbox-gl';
+
+jest.mock('@kbn/mapbox-gl', () => ({
+  mapboxgl: {
+    setRTLTextPlugin: jest.fn(),
+    Map: jest.fn().mockImplementation(() => ({
+      getLayer: () => '',
+      removeLayer: jest.fn(),
+      once: (eventName: string, handler: Function) => handler(),
+      remove: () => jest.fn(),
+      getCanvas: () => ({ clientWidth: 512, clientHeight: 512 }),
+      getCenter: () => ({ lat: 20, lng: 20 }),
+      getZoom: () => 3,
+      addControl: jest.fn(),
+      addLayer: jest.fn(),
+      dragRotate: {
+        disable: jest.fn(),
+      },
+      touchZoomRotate: {
+        disableRotation: jest.fn(),
+      },
+    })),
+    MapboxOptions: jest.fn(),
+    NavigationControl: jest.fn(),
+  },
 }));
 
 jest.mock('./layers', () => ({

src/plugins/vis_type_vega/public/vega_view/vega_map_view/view.ts

@@ -10,8 +10,9 @@ import { i18n } from '@kbn/i18n';
 import type { Map, Style, MapboxOptions } from 'mapbox-gl';
 
 import { View, parse } from 'vega';
-// @ts-expect-error
-import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp';
+
+import { mapboxgl } from '@kbn/mapbox-gl';
+
 import { initTmsRasterLayer, initVegaLayer } from './layers';
 import { VegaBaseView } from '../vega_base_view';
 import { getMapServiceSettings } from '../../services';
@@ -27,14 +28,6 @@ import {
 import { validateZoomSettings, injectMapPropsIntoSpec } from './utils';
 import './vega_map_view.scss';
 
-// @ts-expect-error
-import mbRtlPlugin from '!!file-loader!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js';
-// @ts-expect-error
-import mbWorkerUrl from '!!file-loader!mapbox-gl/dist/mapbox-gl-csp-worker';
-
-mapboxgl.workerUrl = mbWorkerUrl;
-mapboxgl.setRTLTextPlugin(mbRtlPlugin);
-
 async function updateVegaView(mapBoxInstance: Map, vegaView: View) {
   const mapCanvas = mapBoxInstance.getCanvas();
   const { lat, lng } = mapBoxInstance.getCenter();