chore(NA): splits types from code on @kbn/ui-shared-deps-src (elastic#123313)

* chore(NA): splits types from code on @kbn/ui-shared-deps-src

* chore(NA): break flot-charts into another package

* chore(NA): skip failing tests

* chore(NA): remove skip and add correct value

* chore(NA): fix new ui-theme import

* chore(NA): adding fleet cloned test

* chore(NA): remove cloned test

* chore(NA): remove added typo

Author: mistic

.eslintignore

@@ -35,7 +35,7 @@ snapshots.js
 /packages/kbn-test/src/functional_test_runner/__tests__/fixtures/
 /packages/kbn-test/src/functional_test_runner/lib/config/__tests__/fixtures/
 /packages/kbn-ui-framework/dist
-/packages/kbn-ui-shared-deps-src/src/flot_charts
+/packages/kbn-flot-charts/lib
 /packages/kbn-monaco/src/painless/antlr
 
 # Bazel

.eslintrc.js

@@ -1569,7 +1569,7 @@ module.exports = {
       },
     },
     {
-      files: ['packages/kbn-ui-shared-deps-src/src/flot_charts/**/*.js'],
+      files: ['packages/kbn-flot-charts/lib/**/*.js'],
       env: {
         jquery: true,
       },

.i18nrc.json

@@ -32,7 +32,7 @@
     "expressionShape": "src/plugins/expression_shape",
     "expressionTagcloud": "src/plugins/chart_expressions/expression_tagcloud",
     "fieldFormats": "src/plugins/field_formats",
-    "flot": "packages/kbn-ui-shared-deps-src/src/flot_charts",
+    "flot": "packages/kbn-flot-charts/lib",
     "home": "src/plugins/home",
     "indexPatternEditor": "src/plugins/data_view_editor",
     "indexPatternFieldEditor": "src/plugins/data_view_field_editor",

package.json

@@ -137,6 +137,7 @@
     "@kbn/crypto": "link:bazel-bin/packages/kbn-crypto",
     "@kbn/es-query": "link:bazel-bin/packages/kbn-es-query",
     "@kbn/field-types": "link:bazel-bin/packages/kbn-field-types",
+    "@kbn/flot-charts": "link:bazel-bin/packages/kbn-flot-charts",
     "@kbn/i18n": "link:bazel-bin/packages/kbn-i18n",
     "@kbn/i18n-react": "link:bazel-bin/packages/kbn-i18n-react",
     "@kbn/interpreter": "link:bazel-bin/packages/kbn-interpreter",
@@ -169,6 +170,7 @@
     "@kbn/ui-framework": "link:bazel-bin/packages/kbn-ui-framework",
     "@kbn/ui-shared-deps-npm": "link:bazel-bin/packages/kbn-ui-shared-deps-npm",
     "@kbn/ui-shared-deps-src": "link:bazel-bin/packages/kbn-ui-shared-deps-src",
+    "@kbn/ui-theme": "link:bazel-bin/packages/kbn-ui-theme",
     "@kbn/utility-types": "link:bazel-bin/packages/kbn-utility-types",
     "@kbn/utils": "link:bazel-bin/packages/kbn-utils",
     "@loaders.gl/core": "^2.3.1",
@@ -602,6 +604,8 @@
     "@types/kbn__std": "link:bazel-bin/packages/kbn-std/npm_module_types",
     "@types/kbn__telemetry-tools": "link:bazel-bin/packages/kbn-telemetry-tools/npm_module_types",
     "@types/kbn__ui-shared-deps-npm": "link:bazel-bin/packages/kbn-ui-shared-deps-npm/npm_module_types",
+    "@types/kbn__ui-shared-deps-src": "link:bazel-bin/packages/kbn-ui-shared-deps-src/npm_module_types",
+    "@types/kbn__ui-theme": "link:bazel-bin/packages/kbn-ui-theme/npm_module_types",
     "@types/kbn__utility-types": "link:bazel-bin/packages/kbn-utility-types/npm_module_types",
     "@types/kbn__utils": "link:bazel-bin/packages/kbn-utils/npm_module_types",
     "@types/license-checker": "15.0.0",

packages/BUILD.bazel

@@ -26,6 +26,7 @@ filegroup(
       "//packages/kbn-eslint-plugin-eslint:build",
       "//packages/kbn-expect:build",
       "//packages/kbn-field-types:build",
+      "//packages/kbn-flot-charts:build",
       "//packages/kbn-i18n:build",
       "//packages/kbn-i18n-react:build",
       "//packages/kbn-interpreter:build",
@@ -66,6 +67,7 @@ filegroup(
       "//packages/kbn-ui-framework:build",
       "//packages/kbn-ui-shared-deps-npm:build",
       "//packages/kbn-ui-shared-deps-src:build",
+      "//packages/kbn-ui-theme:build",
       "//packages/kbn-utility-types:build",
       "//packages/kbn-utils:build",
   ],
@@ -121,6 +123,8 @@ filegroup(
       "//packages/kbn-std:build_types",
       "//packages/kbn-telemetry-tools:build_types",
       "//packages/kbn-ui-shared-deps-npm:build_types",
+      "//packages/kbn-ui-shared-deps-src:build_types",
+      "//packages/kbn-ui-theme:build_types",
       "//packages/kbn-utility-types:build_types",
       "//packages/kbn-utils:build_types",
   ],

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

@@ -94,7 +94,7 @@ module.exports = {
         ].map(from => ({
           from,
           to: false,
-          disallowedMessage: `Use "@kbn/ui-shared-deps-src/theme" to access theme vars.`
+          disallowedMessage: `Use "@kbn/ui-theme" to access theme vars.`
         })),
       ],
     ],

packages/kbn-ui-shared-deps-src/src/flot_charts/API.md packages/kbn-flot-charts/API.md

@@ -0,0 +1,51 @@
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "pkg_npm")
+
+PKG_BASE_NAME = "kbn-flot-charts"
+PKG_REQUIRE_NAME = "@kbn/flot-charts"
+
+SOURCE_FILES = glob([
+  "lib/**/*.js",
+  "index.js",
+])
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+  "API.md",
+]
+
+RUNTIME_DEPS = [
+  "//packages/kbn-i18n",
+]
+
+js_library(
+  name = PKG_BASE_NAME,
+  srcs = NPM_MODULE_EXTRA_FILES + [
+    ":srcs",
+  ],
+  deps = RUNTIME_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-flot-charts/BUILD.bazel

@@ -1,3 +1,11 @@
+/*
+ * 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.
+ */
+
 /* @notice
  *
  * This product includes code that is based on flot-charts, which was available
@@ -26,15 +34,15 @@
  * THE SOFTWARE.
  */
 
-import './jquery_flot';
-import './jquery_flot_canvas';
-import './jquery_flot_time';
-import './jquery_flot_symbol';
-import './jquery_flot_crosshair';
-import './jquery_flot_selection';
-import './jquery_flot_pie';
-import './jquery_flot_stack';
-import './jquery_flot_threshold';
-import './jquery_flot_fillbetween';
-import './jquery_flot_log';
-import './jquery_flot_axislabels';
+import './lib/jquery_flot';
+import './lib/jquery_flot_canvas';
+import './lib/jquery_flot_time';
+import './lib/jquery_flot_symbol';
+import './lib/jquery_flot_crosshair';
+import './lib/jquery_flot_selection';
+import './lib/jquery_flot_pie';
+import './lib/jquery_flot_stack';
+import './lib/jquery_flot_threshold';
+import './lib/jquery_flot_fillbetween';
+import './lib/jquery_flot_log';
+import './lib/jquery_flot_axislabels';

packages/kbn-ui-shared-deps-src/src/flot_charts/index.js packages/kbn-flot-charts/index.js

@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/flot-charts",
+  "version": "1.0.0",
+  "private": true,
+  "main": "./index.js",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/kbn-ui-shared-deps-src/src/flot_charts/jquery_colorhelpers.js packages/kbn-flot-charts/lib/jquery_colorhelpers.js

@@ -70,7 +70,7 @@ TYPES_DEPS = [
   "//packages/kbn-dev-utils:npm_module_types",
   "//packages/kbn-std:npm_module_types",
   "//packages/kbn-ui-shared-deps-npm:npm_module_types",
-  "//packages/kbn-ui-shared-deps-src",
+  "//packages/kbn-ui-shared-deps-src:npm_module_types",
   "//packages/kbn-utils:npm_module_types",
   "@npm//chalk",
   "@npm//clean-webpack-plugin",

packages/kbn-ui-shared-deps-src/src/flot_charts/jquery_flot.js packages/kbn-flot-charts/lib/jquery_flot.js

@@ -16,7 +16,7 @@ import webpackMerge from 'webpack-merge';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import CompressionPlugin from 'compression-webpack-plugin';
 import UiSharedDepsNpm from '@kbn/ui-shared-deps-npm';
-import UiSharedDepsSrc from '@kbn/ui-shared-deps-src';
+import * as UiSharedDepsSrc from '@kbn/ui-shared-deps-src';
 
 import { Bundle, BundleRefs, WorkerConfig } from '../common';
 import { BundleRefsPlugin } from './bundle_refs_plugin';

packages/kbn-ui-shared-deps-src/src/flot_charts/jquery_flot_axislabels.js packages/kbn-flot-charts/lib/jquery_flot_axislabels.js

@@ -52,7 +52,7 @@ RUNTIME_DEPS = [
 TYPES_DEPS = [
   "//packages/kbn-dev-utils:npm_module_types",
   "//packages/kbn-ui-shared-deps-npm:npm_module_types",
-  "//packages/kbn-ui-shared-deps-src",
+  "//packages/kbn-ui-shared-deps-src:npm_module_types",
   "//packages/kbn-utils:npm_module_types",
   "@npm//@elastic/eui",
   "@npm//@emotion/cache",

packages/kbn-ui-shared-deps-src/src/flot_charts/jquery_flot_canvas.js packages/kbn-flot-charts/lib/jquery_flot_canvas.js

@@ -11,7 +11,7 @@ import { logger } from '@storybook/node-logger';
 import buildStandalone from '@storybook/react/standalone';
 import { Flags, run } from '@kbn/dev-utils';
 import UiSharedDepsNpm from '@kbn/ui-shared-deps-npm';
-import UiSharedDepsSrc from '@kbn/ui-shared-deps-src';
+import * as UiSharedDepsSrc from '@kbn/ui-shared-deps-src';
 import * as constants from './constants';
 
 // Convert the flags to a Storybook loglevel

packages/kbn-ui-shared-deps-src/src/flot_charts/jquery_flot_categories.js packages/kbn-flot-charts/lib/jquery_flot_categories.js

@@ -1,10 +1,11 @@
-load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project")
-load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
 load("@npm//webpack-cli:index.bzl", webpack = "webpack_cli")
-load("//src/dev/bazel:index.bzl", "jsts_transpiler")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
 
 PKG_BASE_NAME = "kbn-ui-shared-deps-src"
 PKG_REQUIRE_NAME = "@kbn/ui-shared-deps-src"
+TYPES_PKG_REQUIRE_NAME = "@types/kbn__ui-shared-deps-src"
 
 SOURCE_FILES = glob(
   [
@@ -23,8 +24,6 @@ filegroup(
 )
 
 NPM_MODULE_EXTRA_FILES = [
-  "flot_charts/package.json",
-  "theme/package.json",
   "package.json",
   "README.md"
 ]
@@ -34,11 +33,13 @@ RUNTIME_DEPS = [
   "//packages/elastic-safer-lodash-set",
   "//packages/kbn-analytics",
   "//packages/kbn-babel-preset",
+  "//packages/kbn-flot-charts",
   "//packages/kbn-i18n",
   "//packages/kbn-i18n-react",
   "//packages/kbn-monaco",
   "//packages/kbn-std",
   "//packages/kbn-ui-shared-deps-npm",
+  "//packages/kbn-ui-theme",
 ]
 
 TYPES_DEPS = [
@@ -50,7 +51,7 @@ TYPES_DEPS = [
   "//packages/kbn-monaco:npm_module_types",
   "//packages/kbn-std:npm_module_types",
   "//packages/kbn-ui-shared-deps-npm:npm_module_types",
-  "@npm//@elastic/eui",
+  "//packages/kbn-ui-theme:npm_module_types",
   "@npm//webpack",
 ]
 
@@ -105,7 +106,7 @@ webpack(
 js_library(
   name = PKG_BASE_NAME,
   srcs = NPM_MODULE_EXTRA_FILES,
-  deps = RUNTIME_DEPS + [":target_node", ":tsc_types", ":shared_built_assets"],
+  deps = RUNTIME_DEPS + [":target_node", ":shared_built_assets"],
   package_name = PKG_REQUIRE_NAME,
   visibility = ["//visibility:public"],
 )
@@ -124,3 +125,20 @@ filegroup(
   ],
   visibility = ["//visibility:public"],
 )
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = TYPES_PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [
+    ":npm_module_types",
+  ],
+  visibility = ["//visibility:public"],
+)

packages/kbn-ui-shared-deps-src/src/flot_charts/jquery_flot_crosshair.js packages/kbn-flot-charts/lib/jquery_flot_crosshair.js

@@ -3,6 +3,5 @@
   "version": "1.0.0",
   "private": true,
   "license": "SSPL-1.0 OR Elastic License 2.0",
-  "main": "target_node/index.js",
-  "types": "target_types/index.d.ts"
+  "main": "target_node/index.js"
 }

packages/kbn-ui-shared-deps-src/src/flot_charts/jquery_flot_errorbars.js packages/kbn-flot-charts/lib/jquery_flot_errorbars.js

@@ -8,28 +8,30 @@
 
 const Path = require('path');
 
+// extracted const vars
 /**
  * Absolute path to the distributable directory
  */
-exports.distDir = Path.resolve(__dirname, '../shared_built_assets');
+const distDir = Path.resolve(__dirname, '../shared_built_assets');
 
 /**
  * Filename of the main bundle file in the distributable directory
  */
-exports.jsFilename = 'kbn-ui-shared-deps-src.js';
+const jsFilename = 'kbn-ui-shared-deps-src.js';
 
 /**
  * Filename of the main bundle file in the distributable directory
  */
-exports.cssDistFilename = 'kbn-ui-shared-deps-src.css';
+const cssDistFilename = 'kbn-ui-shared-deps-src.css';
 
 /**
  * Externals mapping inteded to be used in a webpack config
  */
-exports.externals = {
+const externals = {
   /**
    * stateful deps
    */
+  '@kbn/ui-theme': '__kbnSharedDeps__.KbnUiTheme',
   '@kbn/i18n': '__kbnSharedDeps__.KbnI18n',
   '@kbn/i18n-react': '__kbnSharedDeps__.KbnI18nReact',
   '@emotion/react': '__kbnSharedDeps__.EmotionReact',
@@ -43,7 +45,6 @@ exports.externals = {
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
   'styled-components': '__kbnSharedDeps__.StyledComponents',
   '@kbn/monaco': '__kbnSharedDeps__.KbnMonaco',
-  '@kbn/ui-shared-deps-src/theme': '__kbnSharedDeps__.Theme',
   // this is how plugins/consumers from npm load monaco
   'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBarePluginApi',
 
@@ -77,3 +78,5 @@ exports.externals = {
   history: '__kbnSharedDeps__.History',
   classnames: '__kbnSharedDeps__.Classnames',
 };
+
+module.exports = { distDir, jsFilename, cssDistFilename, externals };

packages/kbn-ui-shared-deps-src/src/flot_charts/jquery_flot_fillbetween.js packages/kbn-flot-charts/lib/jquery_flot_fillbetween.js

@@ -11,9 +11,10 @@ require('./polyfills');
 export const Jquery = require('jquery');
 window.$ = window.jQuery = Jquery;
 // mutates window.jQuery and window.$
-require('./flot_charts');
+require('@kbn/flot-charts');
 
 // stateful deps
+export const KbnUiTheme = require('@kbn/ui-theme');
 export const KbnI18n = require('@kbn/i18n');
 export const KbnI18nReact = require('@kbn/i18n-react');
 export const EmotionReact = require('@emotion/react');
@@ -43,7 +44,6 @@ export const ElasticEuiChartsTheme = require('@elastic/eui/dist/eui_charts_theme
 export const ElasticDatemath = require('@elastic/datemath');
 export const ReactBeautifulDnD = require('react-beautiful-dnd');
 
-export const Theme = require('./theme.ts');
 export const Lodash = require('lodash');
 export const LodashFp = require('lodash/fp');