[Maps][Vega] Isolate mapbox-gl library into bazel package (#99931) (#100553)

Co-authored-by: Thomas Neirynck <thomas@elastic.co>

package.json

@@ -127,6 +127,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';
+import { mapboxgl } from '@kbn/mapbox-gl';
 
-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(),
+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();

x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx

@@ -30,7 +30,6 @@ import { registerLayerWizards } from '../../classes/layers/load_layer_wizards';
 import { RenderToolTipContent } from '../../classes/tooltips/tooltip_property';
 import { GeoFieldWithIndex } from '../../components/geo_field_with_index';
 import { MapRefreshConfig } from '../../../common/descriptor_types';
-import 'mapbox-gl/dist/mapbox-gl.css';
 
 const RENDER_COMPLETE_EVENT = 'renderComplete';
 

x-pack/plugins/maps/public/connected_components/mb_map/mb_map.tsx

@@ -7,9 +7,8 @@
 
 import _ from 'lodash';
 import React, { Component } from 'react';
-import { Map as MapboxMap, MapboxOptions, MapMouseEvent } from 'mapbox-gl';
-// @ts-expect-error
-import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp';
+import type { Map as MapboxMap, MapboxOptions, MapMouseEvent } from 'mapbox-gl';
+
 // @ts-expect-error
 import { spritesheet } from '@elastic/maki';
 import sprites1 from '@elastic/maki/dist/sprite@1.png';
@@ -17,6 +16,9 @@ import sprites2 from '@elastic/maki/dist/sprite@2.png';
 import { Adapters } from 'src/plugins/inspector/public';
 import { Filter } from 'src/plugins/data/public';
 import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
+
+import { mapboxgl } from '@kbn/mapbox-gl';
+
 import { DrawFilterControl } from './draw_control';
 import { ScaleControl } from './scale_control';
 import { TooltipControl } from './tooltip_control';
@@ -45,13 +47,6 @@ import { GeoFieldWithIndex } from '../../components/geo_field_with_index';
 import { RenderToolTipContent } from '../../classes/tooltips/tooltip_property';
 import { MapExtentState } from '../../actions';
 import { TileStatusTracker } from './tile_status_tracker';
-// @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);
 
 export interface Props {
   isMapReady: boolean;

yarn.lock

@@ -2678,6 +2678,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/mapbox-gl@link:bazel-bin/packages/kbn-mapbox-gl/npm_module":
+  version "0.0.0"
+  uid ""
+
 "@kbn/monaco@link:packages/kbn-monaco":
   version "0.0.0"
   uid ""