[kibana_react] Extract <FieldButton /> and <FieldIcon/> to a package (#115377)

.github/CODEOWNERS

@@ -61,6 +61,7 @@
 /examples/partial_results_example/ @elastic/kibana-app-services
 /packages/elastic-datemath/ @elastic/kibana-app-services
 /packages/kbn-interpreter/ @elastic/kibana-app-services
+/packages/kbn-react-field/ @elastic/kibana-app-services
 /src/plugins/bfetch/ @elastic/kibana-app-services
 /src/plugins/data/ @elastic/kibana-app-services
 /src/plugins/data_views/ @elastic/kibana-app-services

package.json

@@ -139,6 +139,7 @@
     "@kbn/logging": "link:bazel-bin/packages/kbn-logging",
     "@kbn/mapbox-gl": "link:bazel-bin/packages/kbn-mapbox-gl",
     "@kbn/monaco": "link:bazel-bin/packages/kbn-monaco",
+    "@kbn/react-field": "link:bazel-bin/packages/kbn-react-field",
     "@kbn/rule-data-utils": "link:bazel-bin/packages/kbn-rule-data-utils",
     "@kbn/securitysolution-autocomplete": "link:bazel-bin/packages/kbn-securitysolution-autocomplete",
     "@kbn/securitysolution-es-utils": "link:bazel-bin/packages/kbn-securitysolution-es-utils",

packages/BUILD.bazel

@@ -36,6 +36,7 @@ filegroup(
       "//packages/kbn-optimizer:build",
       "//packages/kbn-plugin-generator:build",
       "//packages/kbn-plugin-helpers:build",
+      "//packages/kbn-react-field:build",
       "//packages/kbn-rule-data-utils:build",
       "//packages/kbn-securitysolution-autocomplete:build",
       "//packages/kbn-securitysolution-list-constants:build",

packages/kbn-optimizer/limits.yml

@@ -104,7 +104,7 @@ pageLoadAssetSize:
   dataViews: 41532
   expressions: 140958
   fieldFormats: 65209
-  kibanaReact: 84422
+  kibanaReact: 74422
   share: 71239
   uiActions: 35121
   dataEnhanced: 24980

packages/kbn-optimizer/src/worker/webpack.config.ts

@@ -28,6 +28,14 @@ const IS_CODE_COVERAGE = !!process.env.CODE_COVERAGE;
 const ISTANBUL_PRESET_PATH = require.resolve('@kbn/babel-preset/istanbul_preset');
 const BABEL_PRESET_PATH = require.resolve('@kbn/babel-preset/webpack_preset');
 
+const nodeModulesButNotKbnPackages = (path: string) => {
+  if (!path.includes('node_modules')) {
+    return false;
+  }
+
+  return !path.includes(`node_modules${Path.sep}@kbn${Path.sep}`);
+};
+
 export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: WorkerConfig) {
   const ENTRY_CREATOR = require.resolve('./entry_point_creator');
 
@@ -138,7 +146,7 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
         },
         {
           test: /\.scss$/,
-          exclude: /node_modules/,
+          exclude: nodeModulesButNotKbnPackages,
           oneOf: [
             ...worker.themeTags.map((theme) => ({
               resourceQuery: `?${theme}`,

packages/kbn-react-field/BUILD.bazel

@@ -0,0 +1,121 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler")
+
+PKG_BASE_NAME = "kbn-react-field"
+PKG_REQUIRE_NAME = "@kbn/react-field"
+
+SOURCE_FILES = glob(
+  [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.scss",
+    "src/**/*.svg",
+  ],
+  exclude = [
+    "**/*.test.*",
+    "**/__fixtures__/**",
+    "**/__snapshots__/**",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+  "README.md",
+  "field_button/package.json",
+  "field_icon/package.json",
+]
+
+RUNTIME_DEPS = [
+  "@npm//prop-types",
+  "@npm//react",
+  "@npm//classnames",
+  "@npm//@elastic/eui",
+  "//packages/kbn-i18n",
+]
+
+TYPES_DEPS = [
+  "//packages/kbn-babel-preset",
+  "//packages/kbn-i18n",
+  "@npm//tslib",
+  "@npm//@types/jest",
+  "@npm//@types/prop-types",
+  "@npm//@types/classnames",
+  "@npm//@types/react",
+  "@npm//@elastic/eui",
+  "@npm//resize-observer-polyfill",
+]
+
+jsts_transpiler(
+  name = "target_webpack",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+  additional_args = [
+    "--copy-files",
+    "--quiet"
+  ],
+)
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  additional_args = [
+    "--copy-files",
+    "--quiet"
+  ],
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  source_map = True,
+  root_dir = "src",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_BASE_NAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_webpack", ":tsc_types"],
+  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-react-field/README.md

@@ -0,0 +1 @@
+Shareable field type related React components

packages/kbn-react-field/field_button/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../target_node/field_button/index.js",
+  "browser": "../target_webpack/field_button/index.js",
+  "types": "../target_types/field_button/index.d.ts"
+}

packages/kbn-react-field/field_icon/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../target_node/field_icon/index.js",
+  "browser": "../target_webpack/field_icon/index.js",
+  "types": "../target_types/field_icon/index.d.ts"
+}

packages/kbn-react-field/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-react-field'],
+};

packages/kbn-react-field/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@kbn/react-field",
+  "main": "./target_node/index.js",
+  "browser": "./target_webpack/index.js",
+  "types": "./target_types/index.d.ts",
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "private": true
+}

packages/kbn-react-field/src/field_button/index.ts

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export * from './field_icon';
+export { FieldButton } from './field_button';
+export type { FieldButtonProps, ButtonSize } from './field_button';

packages/kbn-react-field/src/field_icon/index.ts

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export * from './field_button';
+export { FieldIcon } from './field_icon';
+export type { FieldIconProps } from './field_icon';

packages/kbn-react-field/src/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+export { FieldIcon } from './field_icon';
+export type { FieldIconProps } from './field_icon';
+export { FieldButton } from './field_button';
+export type { FieldButtonProps, ButtonSize } from './field_button';

packages/kbn-react-field/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./target_types",
+    "sourceMap": true,
+    "sourceRoot": "../../../../../packages/kbn-react-field/src",
+    "types": [
+      "jest",
+      "node",
+      "resize-observer-polyfill"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+  ],
+  "exclude": [
+    "**/__fixtures__/**/*"
+  ]
+}

src/plugins/discover/public/application/main/components/sidebar/discover_field.tsx

@@ -24,8 +24,9 @@ import {
 import { i18n } from '@kbn/i18n';
 import { UiCounterMetricType } from '@kbn/analytics';
 import classNames from 'classnames';
+import { FieldIcon } from '@kbn/react-field/field_icon';
+import { FieldButton } from '@kbn/react-field/field_button';
 import { DiscoverFieldDetails } from './discover_field_details';
-import { FieldIcon, FieldButton } from '../../../../../../kibana_react/public';
 import { FieldDetails } from './types';
 import { IndexPatternField, IndexPattern } from '../../../../../../data/public';
 import { getFieldTypeName } from './lib/get_field_type_name';

src/plugins/discover/public/components/field_name/field_name.tsx

@@ -11,7 +11,7 @@ import './field_name.scss';
 import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { FieldIcon, FieldIconProps } from '../../../../kibana_react/public';
+import { FieldIcon, FieldIconProps } from '@kbn/react-field/field_icon';
 import { getFieldTypeName } from './field_type_name';
 import { IndexPatternField } from '../../../../data/public';
 import { getFieldSubtypeMulti } from '../../../../data/common';

src/plugins/kibana_react/public/index.ts

@@ -16,8 +16,6 @@ export * from './context';
 export * from './overview_page';
 export * from './overlays';
 export * from './ui_settings';
-export * from './field_icon';
-export * from './field_button';
 export * from './table_list_view';
 export * from './toolbar_button';
 export * from './split_panel';

src/plugins/presentation_util/public/components/field_picker/field_picker.tsx

@@ -11,10 +11,11 @@ import { sortBy, uniq } from 'lodash';
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+import { FieldIcon } from '@kbn/react-field/field_icon';
+import { FieldButton } from '@kbn/react-field/field_button';
 
 import { FieldSearch } from './field_search';
 import { DataView, DataViewField } from '../../../../data_views/common';
-import { FieldIcon, FieldButton } from '../../../../kibana_react/public';
 
 import './field_picker.scss';
 

src/plugins/presentation_util/public/components/field_picker/field_search.tsx

@@ -21,8 +21,8 @@ import {
   EuiSpacer,
   EuiPopoverTitle,
 } from '@elastic/eui';
+import { FieldIcon } from '@kbn/react-field/field_icon';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { FieldIcon } from '../../../../kibana_react/public';
 
 export interface Props {
   onSearchChange: (value: string) => void;

x-pack/plugins/canvas/shareable_runtime/webpack.config.js

@@ -18,6 +18,14 @@ const {
 
 const isProd = process.env.NODE_ENV === 'production';
 
+const nodeModulesButNotKbnPackages = (_path) => {
+  if (!_path.includes('node_modules')) {
+    return false;
+  }
+
+  return !_path.includes(`node_modules${path.sep}@kbn${path.sep}`);
+};
+
 module.exports = {
   context: KIBANA_ROOT,
   entry: {
@@ -124,7 +132,7 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        exclude: [/node_modules/, /\.module\.s(a|c)ss$/],
+        exclude: [nodeModulesButNotKbnPackages, /\.module\.s(a|c)ss$/],
         use: [
           {
             loader: 'style-loader',

x-pack/plugins/graph/public/components/field_manager/field_editor.tsx

@@ -25,11 +25,11 @@ import {
   EuiIconTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FieldIcon } from '@kbn/react-field/field_icon';
 import classNames from 'classnames';
 import { WorkspaceField } from '../../types';
 import { iconChoices } from '../../helpers/style_choices';
 import { LegacyIcon } from '../legacy_icon';
-import { FieldIcon } from '../../../../../../src/plugins/kibana_react/public';
 import { UpdateableFieldProperties } from './field_manager';
 
 import { isEqual } from '../helpers';

x-pack/plugins/graph/public/components/field_manager/field_picker.tsx

@@ -9,8 +9,8 @@ import React, { useState, useEffect, ReactNode } from 'react';
 import { EuiPopover, EuiSelectable, EuiBadge } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import classNames from 'classnames';
+import { FieldIcon } from '@kbn/react-field/field_icon';
 import { WorkspaceField } from '../../types';
-import { FieldIcon } from '../../../../../../src/plugins/kibana_react/public';
 
 export interface FieldPickerProps {
   fieldMap: Record<string, WorkspaceField>;

x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx

@@ -36,6 +36,7 @@ import {
   TooltipType,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
+import { FieldButton } from '@kbn/react-field/field_button';
 import type { FieldFormatsStart } from 'src/plugins/field_formats/public';
 import { EuiHighlight } from '@elastic/eui';
 import {
@@ -45,7 +46,6 @@ import {
   Filter,
   esQuery,
 } from '../../../../../src/plugins/data/public';
-import { FieldButton } from '../../../../../src/plugins/kibana_react/public';
 import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 import { DragDrop, DragDropIdentifier } from '../drag_drop';
 import { DatasourceDataPanelProps, DataType } from '../types';

x-pack/plugins/lens/public/indexpattern_datasource/lens_field_icon.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { FieldIcon, FieldIconProps } from '../../../../../src/plugins/kibana_react/public';
+import { FieldIcon, FieldIconProps } from '@kbn/react-field/field_icon';
 import { DataType } from '../types';
 import { normalizeOperationDataType } from './utils';
 

x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx

@@ -16,9 +16,9 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FieldIcon } from '@kbn/react-field/field_icon';
 import _ from 'lodash';
 import { MVTFieldDescriptor } from '../../../../common/descriptor_types';
-import { FieldIcon } from '../../../../../../../src/plugins/kibana_react/public';
 import { MVT_FIELD_TYPE } from '../../../../common/constants';
 
 function makeOption({

x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx

@@ -16,8 +16,8 @@ import {
   EuiFlexItem,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FieldIcon } from '@kbn/react-field/field_icon';
 import { FIELD_ORIGIN, VECTOR_STYLES } from '../../../../../common/constants';
-import { FieldIcon } from '../../../../../../../../src/plugins/kibana_react/public';
 import { StyleField } from '../style_fields_helper';
 
 function renderOption(

x-pack/plugins/maps/public/components/single_field_select.tsx

@@ -17,8 +17,8 @@ import {
   EuiFlexItem,
   EuiToolTip,
 } from '@elastic/eui';
+import { FieldIcon } from '@kbn/react-field/field_icon';
 import { IndexPatternField } from 'src/plugins/data/public';
-import { FieldIcon } from '../../../../../src/plugins/kibana_react/public';
 
 function fieldsToOptions(
   fields?: IndexPatternField[],

x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx

@@ -21,7 +21,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { FieldIcon } from '../../../../../../src/plugins/kibana_react/public';
+import { FieldIcon } from '@kbn/react-field/field_icon';
 
 export type FieldProps = {
   label: string;

x-pack/plugins/osquery/public/common/lib/kibana/kibana_react.ts

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { useHistory } from 'react-router-dom';
+import { FieldIcon } from '@kbn/react-field/field_icon';
 import {
   KibanaContextProvider,
   KibanaReactContextValue,
@@ -15,7 +16,6 @@ import {
   useUiSetting$,
   withKibana,
   reactRouterNavigate,
-  FieldIcon,
 } from '../../../../../../../src/plugins/kibana_react/public';
 import { StartServices } from '../../../types';
 

x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx

@@ -8,8 +8,8 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiText, EuiToolTip } from '@elastic/eui';
 import { isEmpty } from 'lodash';
+import { FieldIcon } from '@kbn/react-field/field_icon';
 import * as i18n from '../translations';
-import { FieldIcon } from '../../../../../../../../src/plugins/kibana_react/public';
 import { DataViewField } from '../../../../../../../../src/plugins/data_views/common';
 import { getExampleText } from '../helpers';
 import { BrowserField } from '../../../containers/source';

x-pack/plugins/stack_alerts/public/alert_types/geo_containment/query_builder/util_components/single_field_select.tsx

@@ -14,8 +14,8 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
+import { FieldIcon } from '@kbn/react-field/field_icon';
 import { IFieldType } from 'src/plugins/data/public';
-import { FieldIcon } from '../../../../../../../../src/plugins/kibana_react/public';
 
 function fieldsToOptions(fields?: IFieldType[]): Array<EuiComboBoxOptionOption<IFieldType>> {
   if (!fields) {

yarn.lock

@@ -3867,6 +3867,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/react-field@link:bazel-bin/packages/kbn-react-field":
+  version "0.0.0"
+  uid ""
+
 "@kbn/rule-data-utils@link:bazel-bin/packages/kbn-rule-data-utils":
   version "0.0.0"
   uid ""