Merge branch 'master' of github.com:elastic/kibana into implement/kbn…

…-optimizer-auto-transpile

docs/developer/contributing/development-github.asciidoc

@@ -25,7 +25,7 @@ Pull requests are made into the `master` branch and then backported when it is s
 * Breaking changes do not get backported and only go into `master`.
 * All non-breaking changes can be backported to the `<major>.x` branch.
 * Features should not be backported to a `<major>.<minor>` branch.
-* Bugs can be backported to a `<major>.<minor>` branch if the changes are safe and appropriate. Safety is a judgment call you make based on factors like the bug's severity, test coverage, confidence in the changes, etc. Your reasoning should be included in the pull request description.
+* Bug fixes can be backported to a `<major>.<minor>` branch if the changes are safe and appropriate. Safety is a judgment call you make based on factors like the bug's severity, test coverage, confidence in the changes, etc. Your reasoning should be included in the pull request description.
 * Documentation changes can be backported to any branch at any time.
 
 [discrete]

docs/user/dashboard/vega-reference.asciidoc

@@ -11,7 +11,7 @@ For additional *Vega* and *Vega-Lite* information, refer to the reference sectio
 
 {kib} has extended Vega and Vega-Lite with extensions that support:
 
-* Default height and width
+* Automatic sizing
 * Default theme to match {kib}
 * Writing {es} queries using the time range and filters from dashboards
 * Using the Elastic Map Service in Vega maps
@@ -22,12 +22,35 @@ For additional *Vega* and *Vega-Lite* information, refer to the reference sectio
 
 [float]
 [[vega-sizing-and-positioning]]
-==== Default height and width
+==== Automatic sizing
 
-By default, Vega visualizations use the `autosize = { type: 'fit', contains: 'padding' }` layout.
-`fit` uses all available space, ignores `width` and `height` values,
-and respects the padding values. To override this behavior, change the
-`autosize` value.
+Most users will want their Vega visualizations to take the full available space, so unlike
+Vega examples, `width` and `height` are not required parameters in {kib}. To set the width
+or height manually, set `autosize: none`. For example, to set the height to a specific pixel value:
+
+```
+autosize: none
+width: container
+height: 200
+```
+
+The default {kib} settings which are inherited by your visualizations are:
+
+```
+autosize: {
+  type: fit
+  contains: padding
+}
+width: container
+height: container
+```
+
+{kib} is able to merge your custom `autosize` settings with the defaults. The options `fit-x`
+and `fit-y` are supported but not recommended over the default `fit` setting.
+
+To learn more, read about
+https://vega.github.io/vega/docs/specification/#autosize[autosize]
+in the Vega documentation.
 
 [float]
 [[vega-theme]]

package.json

@@ -227,7 +227,7 @@
   "devDependencies": {
     "@babel/parser": "^7.11.2",
     "@babel/types": "^7.11.0",
-    "@elastic/apm-rum": "^5.6.0",
+    "@elastic/apm-rum": "^5.6.1",
     "@elastic/charts": "21.1.2",
     "@elastic/ems-client": "7.10.0",
     "@elastic/eslint-config-kibana": "0.15.0",

packages/kbn-babel-preset/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kbn/babel-preset",
-  "private": true,
   "version": "1.0.0",
+  "private": true,
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.10.4",
@@ -13,10 +13,8 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "babel-plugin-add-module-exports": "^1.0.2",
-    "babel-plugin-filter-imports": "^3.0.0",
     "babel-plugin-styled-components": "^1.10.7",
     "babel-plugin-transform-define": "^1.3.1",
-    "babel-plugin-transform-imports": "^2.0.0",
     "react-is": "^16.8.0",
     "styled-components": "^5.1.0"
   }

packages/kbn-babel-preset/webpack_preset.js

@@ -40,24 +40,5 @@ module.exports = () => {
         },
       ],
     ],
-    // NOTE: we can enable this by default for everything as soon as we only have one instance
-    // of lodash across the entire project. For now we are just enabling it for siem
-    // as they are extensively using the lodash v4
-    overrides: [
-      {
-        test: [/x-pack[\/\\]legacy[\/\\]plugins[\/\\]siem[\/\\]public/],
-        plugins: [
-          [
-            require.resolve('babel-plugin-transform-imports'),
-            {
-              'lodash/?(((\\w*)?/?)*)': {
-                transform: 'lodash/${1}/${member}',
-                preventFullImport: false,
-              },
-            },
-          ],
-        ],
-      },
-    ],
   };
 };

src/plugins/data/public/search/errors/timeout_error.test.tsx

@@ -37,9 +37,9 @@ describe('SearchTimeoutError', () => {
 
     expect(component.find('EuiButton').length).toBe(1);
     component.find('EuiButton').simulate('click');
-    expect(startMock.application.navigateToApp).toHaveBeenCalledWith('management', {
-      path: '/kibana/indexPatterns',
-    });
+    expect(startMock.application.navigateToUrl).toHaveBeenCalledWith(
+      'https://www.elastic.co/subscriptions'
+    );
   });
 
   it('Should create contact admin message', () => {

src/plugins/data/public/search/errors/timeout_error.tsx

@@ -78,9 +78,7 @@ export class SearchTimeoutError extends KbnError {
   private onClick(application: ApplicationStart) {
     switch (this.mode) {
       case TimeoutErrorMode.UPGRADE:
-        application.navigateToApp('management', {
-          path: `/kibana/indexPatterns`,
-        });
+        application.navigateToUrl('https://www.elastic.co/subscriptions');
         break;
       case TimeoutErrorMode.CHANGE:
         application.navigateToApp('management', {

src/plugins/data/public/ui/typeahead/suggestions_component.tsx

@@ -154,7 +154,7 @@ export class SuggestionsComponent extends Component<Props> {
 const StyledSuggestionsListDiv = styled.div`
   ${(props: { queryBarRect: DOMRect; verticalListPosition: string }) => `
       position: absolute;
-      z-index: 999;
+      z-index: 4001;
       left: ${props.queryBarRect.left}px;
       width: ${props.queryBarRect.width}px;
       ${props.verticalListPosition}`}

src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx

@@ -109,12 +109,11 @@ function renderTooltip(description: string) {
   );
 }
 
-const VISUALIZE_EMBEDDABLE_TYPE = 'visualization';
-type VisualizeEmbeddable = any;
+type EmbeddableWithDescription = IEmbeddable & { getDescription: () => string };
 
-function getViewDescription(embeddable: IEmbeddable | VisualizeEmbeddable) {
-  if (embeddable.type === VISUALIZE_EMBEDDABLE_TYPE) {
-    const description = embeddable.getVisualizationDescription();
+function getViewDescription(embeddable: IEmbeddable | EmbeddableWithDescription) {
+  if ('getDescription' in embeddable) {
+    const description = embeddable.getDescription();
 
     if (description) {
       return description;
@@ -137,7 +136,7 @@ export function PanelHeader({
 }: PanelHeaderProps) {
   const viewDescription = getViewDescription(embeddable);
   const showTitle = !hidePanelTitle && (!isViewMode || title || viewDescription !== '');
-  const showPanelBar = badges.length > 0 || notifications.length > 0 || showTitle;
+  const showPanelBar = !isViewMode || badges.length > 0 || notifications.length > 0 || showTitle;
   const classes = classNames('embPanel__header', {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     'embPanel__header--floater': !showPanelBar,

src/plugins/kibana_react/public/field_button/field_button.tsx

@@ -19,7 +19,8 @@
 
 import './field_button.scss';
 import classNames from 'classnames';
-import React, { ReactNode, HTMLAttributes } from 'react';
+import React, { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { CommonProps } from '@elastic/eui';
 
 export interface FieldButtonProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -56,7 +57,14 @@ export interface FieldButtonProps extends HTMLAttributes<HTMLDivElement> {
    * The component will render a `<button>` when provided an `onClick`
    */
   onClick?: () => void;
+  /**
+   * Applies to the inner `<button>`  or `<div>`
+   */
   dataTestSubj?: string;
+  /**
+   * Pass more button props to the `<button>` element
+   */
+  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement> & CommonProps;
 }
 
 const sizeToClassNameMap = {
@@ -79,6 +87,8 @@ export function FieldButton({
   isDraggable = false,
   onClick,
   dataTestSubj,
+  buttonProps,
+  ...rest
 }: FieldButtonProps) {
   const classes = classNames(
     'kbnFieldButton',
@@ -88,8 +98,18 @@ export function FieldButton({
     className
   );
 
+  const contentClasses = classNames('kbn-resetFocusState', 'kbnFieldButton__button');
+
+  const innerContent = (
+    <>
+      {fieldIcon && <span className="kbnFieldButton__fieldIcon">{fieldIcon}</span>}
+      {fieldName && <span className="kbnFieldButton__name">{fieldName}</span>}
+      {fieldInfoIcon && <div className="kbnFieldButton__infoIcon">{fieldInfoIcon}</div>}
+    </>
+  );
+
   return (
-    <div className={classes}>
+    <div className={classes} {...rest}>
       {onClick ? (
         <button
           onClick={(e) => {
@@ -99,17 +119,14 @@ export function FieldButton({
             onClick();
           }}
           data-test-subj={dataTestSubj}
-          className={'kbn-resetFocusState kbnFieldButton__button'}
+          className={contentClasses}
+          {...buttonProps}
         >
-          {fieldIcon && <span className="kbnFieldButton__fieldIcon">{fieldIcon}</span>}
-          {fieldName && <span className="kbnFieldButton__name">{fieldName}</span>}
-          {fieldInfoIcon && <div className="kbnFieldButton__infoIcon">{fieldInfoIcon}</div>}
+          {innerContent}
         </button>
       ) : (
-        <div className={'kbn-resetFocusState kbnFieldButton__button'} data-test-subj={dataTestSubj}>
-          {fieldIcon && <span className="kbnFieldButton__fieldIcon">{fieldIcon}</span>}
-          {fieldName && <span className="kbnFieldButton__name">{fieldName}</span>}
-          {fieldInfoIcon && <div className="kbnFieldButton__infoIcon">{fieldInfoIcon}</div>}
+        <div className={contentClasses} data-test-subj={dataTestSubj}>
+          {innerContent}
         </div>
       )}