Merge branch 'master' into ua/deprecation_toggle

docs/api/alerting/create_rule.asciidoc

@@ -6,6 +6,8 @@
 
 Create {kib} rules.
 
+WARNING: This API supports <<token-api-authentication>> only.
+
 [[create-rule-api-request]]
 ==== Request
 

docs/api/alerting/enable_rule.asciidoc

@@ -6,6 +6,8 @@
 
 Enable a rule.
 
+WARNING: This API supports <<token-api-authentication>> only.
+
 [[enable-rule-api-request]]
 ==== Request
 

docs/api/alerting/update_rule.asciidoc

@@ -6,6 +6,8 @@
 
 Update the attributes for an existing rule.
 
+WARNING: This API supports <<token-api-authentication>> only.
+
 [[update-rule-api-request]]
 ==== Request
 

docs/developer/getting-started/monorepo-packages.asciidoc

@@ -67,6 +67,7 @@ yarn kbn watch-bazel
 - @kbn/babel-code-parser
 - @kbn/babel-preset
 - @kbn/config-schema
+- @kbn/expect
 - @kbn/std
 - @kbn/tinymath
 - @kbn/utility-types

docs/development/core/public/kibana-plugin-core-public.app_wrapper_class.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [APP\_WRAPPER\_CLASS](./kibana-plugin-core-public.app_wrapper_class.md)
+
+## APP\_WRAPPER\_CLASS variable
+
+The class name for top level \*and\* nested application wrappers to ensure proper layout
+
+<b>Signature:</b>
+
+```typescript
+APP_WRAPPER_CLASS = "kbnAppWrapper"
+```

docs/development/core/public/kibana-plugin-core-public.md

@@ -138,6 +138,7 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 
 |  Variable | Description |
 |  --- | --- |
+|  [APP\_WRAPPER\_CLASS](./kibana-plugin-core-public.app_wrapper_class.md) | The class name for top level \*and\* nested application wrappers to ensure proper layout |
 |  [URL\_MAX\_LENGTH](./kibana-plugin-core-public.url_max_length.md) | The max URL length allowed by the current browser. Should be used to display warnings to users when query parameters cause URL to exceed this limit. |
 
 ## Type Aliases

docs/development/core/server/kibana-plugin-core-server.app_wrapper_class.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [APP\_WRAPPER\_CLASS](./kibana-plugin-core-server.app_wrapper_class.md)
+
+## APP\_WRAPPER\_CLASS variable
+
+The class name for top level \*and\* nested application wrappers to ensure proper layout
+
+<b>Signature:</b>
+
+```typescript
+APP_WRAPPER_CLASS = "kbnAppWrapper"
+```

docs/development/core/server/kibana-plugin-core-server.md

@@ -230,6 +230,7 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 
 |  Variable | Description |
 |  --- | --- |
+|  [APP\_WRAPPER\_CLASS](./kibana-plugin-core-server.app_wrapper_class.md) | The class name for top level \*and\* nested application wrappers to ensure proper layout |
 |  [kibanaResponseFactory](./kibana-plugin-core-server.kibanaresponsefactory.md) | Set of helpers used to create <code>KibanaResponse</code> to form HTTP response on an incoming request. Should be returned as a result of [RequestHandler](./kibana-plugin-core-server.requesthandler.md) execution. |
 |  [ServiceStatusLevels](./kibana-plugin-core-server.servicestatuslevels.md) | The current "level" of availability of a service. |
 |  [validBodyOutput](./kibana-plugin-core-server.validbodyoutput.md) | The set of valid body.output |

package.json

@@ -446,7 +446,7 @@
     "@kbn/es-archiver": "link:packages/kbn-es-archiver",
     "@kbn/eslint-import-resolver-kibana": "link:packages/kbn-eslint-import-resolver-kibana",
     "@kbn/eslint-plugin-eslint": "link:packages/kbn-eslint-plugin-eslint",
-    "@kbn/expect": "link:packages/kbn-expect",
+    "@kbn/expect": "link:bazel-bin/packages/kbn-expect/npm_module",
     "@kbn/optimizer": "link:packages/kbn-optimizer",
     "@kbn/plugin-generator": "link:packages/kbn-plugin-generator",
     "@kbn/plugin-helpers": "link:packages/kbn-plugin-helpers",

packages/BUILD.bazel

@@ -9,6 +9,7 @@ filegroup(
       "//packages/kbn-babel-code-parser:build",
       "//packages/kbn-babel-preset:build",
       "//packages/kbn-config-schema:build",
+      "//packages/kbn-expect:build",
       "//packages/kbn-std:build",
       "//packages/kbn-tinymath:build",
       "//packages/kbn-utility-types:build",

packages/kbn-expect/BUILD.bazel

@@ -0,0 +1,46 @@
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm")
+
+PKG_BASE_NAME = "kbn-expect"
+PKG_REQUIRE_NAME = "@kbn/expect"
+
+SOURCE_FILES = glob([
+  "expect.js",
+  "expect.js.d.ts",
+])
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "LICENSE.txt",
+  "package.json",
+  "README.md",
+]
+
+js_library(
+  name = PKG_BASE_NAME,
+  srcs = NPM_MODULE_EXTRA_FILES + [
+    ":srcs",
+  ],
+  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-expect/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "tsBuildInfoFile": "../../build/tsbuildinfo/packages/kbn-expect"
+    "incremental": false,
   },
   "include": [
     "expect.js.d.ts"

packages/kbn-optimizer/limits.yml

@@ -92,7 +92,7 @@ pageLoadAssetSize:
   visTypeTable: 94934
   visTypeTagcloud: 37575
   visTypeTimelion: 68883
-  visTypeTimeseries: 155203
+  visTypeTimeseries: 55203
   visTypeVega: 153573
   visTypeVislib: 242838
   visTypeXy: 113478

src/core/public/chrome/ui/header/_banner.scss

@@ -1,6 +1,7 @@
 .header__topBanner {
   position: fixed;
   top: 0;
+  left: 0;
   height: $kbnHeaderBannerHeight;
   width: 100%;
   z-index: $euiZHeader;

src/core/public/core_system.test.ts

@@ -199,7 +199,7 @@ describe('#start()', () => {
     root.innerHTML = '<p>foo bar</p>';
     await startCore(root);
     expect(root.innerHTML).toMatchInlineSnapshot(
-      `"<div id=\\"kibana-body\\"></div><div></div><div></div>"`
+      `"<div id=\\"kibana-body\\" data-test-subj=\\"kibanaChrome\\"></div><div></div><div></div>"`
     );
   });
 

src/core/public/core_system.ts

@@ -176,6 +176,7 @@ export class CoreSystem {
 
       const coreUiTargetDomElement = document.createElement('div');
       coreUiTargetDomElement.id = 'kibana-body';
+      coreUiTargetDomElement.dataset.testSubj = 'kibanaChrome';
       const notificationsTargetDomElement = document.createElement('div');
       const overlayTargetDomElement = document.createElement('div');
 

src/core/public/index.ts

@@ -74,7 +74,7 @@ export type {
   DomainDeprecationDetails,
 } from '../server/types';
 export type { CoreContext, CoreSystem } from './core_system';
-export { DEFAULT_APP_CATEGORIES } from '../utils';
+export { DEFAULT_APP_CATEGORIES, APP_WRAPPER_CLASS } from '../utils';
 export type {
   AppCategory,
   UiSettingsParams,

src/core/public/overlays/banners/_banners_list.scss

@@ -1,7 +1,3 @@
-.kbnGlobalBannerList {
-  padding: $euiSize;
-}
-
 .kbnGlobalBannerList__item + .kbnGlobalBannerList__item {
   margin-top: $euiSizeS;
 }

src/core/public/public.api.md

@@ -73,6 +73,9 @@ export interface App<HistoryLocationState = unknown> {
     updater$?: Observable<AppUpdater>;
 }
 
+// @public
+export const APP_WRAPPER_CLASS = "kbnAppWrapper";
+
 // @public
 export interface AppCategory {
     ariaLabel?: string;

src/core/public/rendering/_base.scss

@@ -1,16 +1,20 @@
 @import '../mixins';
 
 /**
- * stretch the root element of the Kibana application to set the base-size that
+ * Stretch the root element of the Kibana application to set the base-size that
  * flexed children should keep. Only works when paired with root styles applied
  * by core service from new platform
  */
-// SASSTODO: Naming here is too embedded and high up that changing them could cause major breaks
+
 #kibana-body {
-  overflow-x: hidden;
+  // DO NOT ADD ANY OVERFLOW BEHAVIORS HERE
+  // It will break the sticky navigation
   min-height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
+// Affixes a div to restrict the position of charts tooltip to the visible viewport minus the header
 #app-fixed-viewport {
   pointer-events: none;
   visibility: hidden;
@@ -21,26 +25,17 @@
   left: 0;
 }
 
-.app-wrapper {
+.kbnAppWrapper {
+  // DO NOT ADD ANY OTHER STYLES TO THIS SELECTOR
+  // This a very nested dependency happnening in "all" apps
   display: flex;
   flex-flow: column nowrap;
-  margin: 0 auto;
-
-  @include kibanaFullBodyMinHeight();
-}
-
-.app-wrapper-panel {
-  display: flex;
   flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: auto;
-  flex-direction: column;
-
-  > * {
-    flex-shrink: 0;
-  }
+  z-index: 0; // This effectively puts every high z-index inside the scope of this wrapper to it doesn't interfere with the header and/or overlay mask
+  position: relative; // This is temporary for apps that relied on this being present on `.application`
 }
 
+// TODO: This is problematic because it doesn't stay in line with EUI:
 // adapted from euiHeaderAffordForFixed as we need to handle the top banner
 @mixin kbnAffordForHeader($headerHeight) {
   padding-top: $headerHeight;

src/core/public/rendering/app_containers.test.tsx

@@ -6,21 +6,25 @@
  * Side Public License, v 1.
  */
 
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, of } from 'rxjs';
 import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import React from 'react';
 
-import { AppWrapper, AppContainer } from './app_containers';
+import { AppWrapper } from './app_containers';
 
 describe('AppWrapper', () => {
   it('toggles the `hidden-chrome` class depending on the chrome visibility state', () => {
     const chromeVisible$ = new BehaviorSubject<boolean>(true);
 
-    const component = mount(<AppWrapper chromeVisible$={chromeVisible$}>app-content</AppWrapper>);
+    const component = mount(
+      <AppWrapper chromeVisible$={chromeVisible$} classes$={of([])}>
+        app-content
+      </AppWrapper>
+    );
     expect(component.getDOMNode()).toMatchInlineSnapshot(`
       <div
-        class="app-wrapper"
+        class="kbnAppWrapper"
       >
         app-content
       </div>
@@ -30,7 +34,7 @@ describe('AppWrapper', () => {
     component.update();
     expect(component.getDOMNode()).toMatchInlineSnapshot(`
       <div
-        class="app-wrapper hidden-chrome"
+        class="kbnAppWrapper kbnAppWrapper--hiddenChrome"
       >
         app-content
       </div>
@@ -40,22 +44,25 @@ describe('AppWrapper', () => {
     component.update();
     expect(component.getDOMNode()).toMatchInlineSnapshot(`
       <div
-        class="app-wrapper"
+        class="kbnAppWrapper"
       >
         app-content
       </div>
     `);
   });
-});
 
-describe('AppContainer', () => {
   it('adds classes supplied by chrome', () => {
+    const chromeVisible$ = new BehaviorSubject<boolean>(true);
     const appClasses$ = new BehaviorSubject<string[]>([]);
 
-    const component = mount(<AppContainer classes$={appClasses$}>app-content</AppContainer>);
+    const component = mount(
+      <AppWrapper chromeVisible$={chromeVisible$} classes$={appClasses$}>
+        app-content
+      </AppWrapper>
+    );
     expect(component.getDOMNode()).toMatchInlineSnapshot(`
       <div
-        class="application"
+        class="kbnAppWrapper"
       >
         app-content
       </div>
@@ -65,7 +72,7 @@ describe('AppContainer', () => {
     component.update();
     expect(component.getDOMNode()).toMatchInlineSnapshot(`
       <div
-        class="application classA classB"
+        class="kbnAppWrapper classA classB"
       >
         app-content
       </div>
@@ -75,7 +82,7 @@ describe('AppContainer', () => {
     component.update();
     expect(component.getDOMNode()).toMatchInlineSnapshot(`
       <div
-        class="application classC"
+        class="kbnAppWrapper classC"
       >
         app-content
       </div>
@@ -85,7 +92,7 @@ describe('AppContainer', () => {
     component.update();
     expect(component.getDOMNode()).toMatchInlineSnapshot(`
       <div
-        class="application"
+        class="kbnAppWrapper"
       >
         app-content
       </div>

src/core/public/rendering/app_containers.tsx

@@ -10,17 +10,23 @@ import React from 'react';
 import { Observable } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
 import classNames from 'classnames';
+import { APP_WRAPPER_CLASS } from '../../utils';
 
 export const AppWrapper: React.FunctionComponent<{
   chromeVisible$: Observable<boolean>;
-}> = ({ chromeVisible$, children }) => {
-  const visible = useObservable(chromeVisible$);
-  return <div className={classNames('app-wrapper', { 'hidden-chrome': !visible })}>{children}</div>;
-};
-
-export const AppContainer: React.FunctionComponent<{
   classes$: Observable<string[]>;
-}> = ({ classes$, children }) => {
-  const classes = useObservable(classes$);
-  return <div className={classNames('application', classes)}>{children}</div>;
+}> = ({ chromeVisible$, classes$, children }) => {
+  const visible = useObservable(chromeVisible$);
+  const classes = useObservable(classes$, ['']);
+  return (
+    <div
+      className={classNames(
+        APP_WRAPPER_CLASS,
+        { 'kbnAppWrapper--hiddenChrome': !visible },
+        classes
+      )}
+    >
+      {children}
+    </div>
+  );
 };