diff --git a/docs/development/core/public/kibana-plugin-core-public.app_wrapper_class.md b/docs/development/core/public/kibana-plugin-core-public.app_wrapper_class.md
new file mode 100644
index 000000000000..577c7edbeef4
--- /dev/null
+++ b/docs/development/core/public/kibana-plugin-core-public.app_wrapper_class.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-core-public](./kibana-plugin-core-public.md) > [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
+
+Signature:
+
+```typescript
+APP_WRAPPER_CLASS = "kbnAppWrapper"
+```
diff --git a/docs/development/core/public/kibana-plugin-core-public.md b/docs/development/core/public/kibana-plugin-core-public.md
index 39e554f5492a..b868a7f8216d 100644
--- a/docs/development/core/public/kibana-plugin-core-public.md
+++ b/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
diff --git a/docs/development/core/server/kibana-plugin-core-server.app_wrapper_class.md b/docs/development/core/server/kibana-plugin-core-server.app_wrapper_class.md
new file mode 100644
index 000000000000..cdb0b909bf79
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-core-server.app_wrapper_class.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [kibana-plugin-core-server](./kibana-plugin-core-server.md) > [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
+
+Signature:
+
+```typescript
+APP_WRAPPER_CLASS = "kbnAppWrapper"
+```
diff --git a/docs/development/core/server/kibana-plugin-core-server.md b/docs/development/core/server/kibana-plugin-core-server.md
index e33e9472d42a..4df8d074ba9c 100644
--- a/docs/development/core/server/kibana-plugin-core-server.md
+++ b/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 KibanaResponse
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 |
diff --git a/src/core/public/chrome/ui/header/_banner.scss b/src/core/public/chrome/ui/header/_banner.scss
index 5bb70b8e5332..41ec7b08c6c0 100644
--- a/src/core/public/chrome/ui/header/_banner.scss
+++ b/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;
diff --git a/src/core/public/core_system.test.ts b/src/core/public/core_system.test.ts
index f2979d06338f..1c4e78f0a5c2 100644
--- a/src/core/public/core_system.test.ts
+++ b/src/core/public/core_system.test.ts
@@ -199,7 +199,7 @@ describe('#start()', () => {
root.innerHTML = '
foo bar
';
await startCore(root);
expect(root.innerHTML).toMatchInlineSnapshot(
- `""`
+ `""`
);
});
diff --git a/src/core/public/core_system.ts b/src/core/public/core_system.ts
index b68a7ced118d..f0ea1e62fc33 100644
--- a/src/core/public/core_system.ts
+++ b/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');
diff --git a/src/core/public/index.ts b/src/core/public/index.ts
index ca432d6b8269..17ba37d075b7 100644
--- a/src/core/public/index.ts
+++ b/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,
diff --git a/src/core/public/overlays/banners/_banners_list.scss b/src/core/public/overlays/banners/_banners_list.scss
index 9d4df065a0a4..3d10a71c84a9 100644
--- a/src/core/public/overlays/banners/_banners_list.scss
+++ b/src/core/public/overlays/banners/_banners_list.scss
@@ -1,7 +1,3 @@
-.kbnGlobalBannerList {
- padding: $euiSize;
-}
-
.kbnGlobalBannerList__item + .kbnGlobalBannerList__item {
margin-top: $euiSizeS;
}
diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
index b3ded52a9817..26e2986abb92 100644
--- a/src/core/public/public.api.md
+++ b/src/core/public/public.api.md
@@ -73,6 +73,9 @@ export interface App {
updater$?: Observable;
}
+// @public
+export const APP_WRAPPER_CLASS = "kbnAppWrapper";
+
// @public
export interface AppCategory {
ariaLabel?: string;
diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss
index ed2d9bc0b391..936b41e7682b 100644
--- a/src/core/public/rendering/_base.scss
+++ b/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;
diff --git a/src/core/public/rendering/app_containers.test.tsx b/src/core/public/rendering/app_containers.test.tsx
index 9ef01258509c..193e393f268f 100644
--- a/src/core/public/rendering/app_containers.test.tsx
+++ b/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(true);
- const component = mount(app-content);
+ const component = mount(
+
+ app-content
+
+ );
expect(component.getDOMNode()).toMatchInlineSnapshot(`
app-content
@@ -30,7 +34,7 @@ describe('AppWrapper', () => {
component.update();
expect(component.getDOMNode()).toMatchInlineSnapshot(`
app-content
@@ -40,22 +44,25 @@ describe('AppWrapper', () => {
component.update();
expect(component.getDOMNode()).toMatchInlineSnapshot(`
app-content
`);
});
-});
-describe('AppContainer', () => {
it('adds classes supplied by chrome', () => {
+ const chromeVisible$ = new BehaviorSubject(true);
const appClasses$ = new BehaviorSubject([]);
- const component = mount(app-content);
+ const component = mount(
+
+ app-content
+
+ );
expect(component.getDOMNode()).toMatchInlineSnapshot(`
app-content
@@ -65,7 +72,7 @@ describe('AppContainer', () => {
component.update();
expect(component.getDOMNode()).toMatchInlineSnapshot(`
app-content
@@ -75,7 +82,7 @@ describe('AppContainer', () => {
component.update();
expect(component.getDOMNode()).toMatchInlineSnapshot(`
app-content
@@ -85,7 +92,7 @@ describe('AppContainer', () => {
component.update();
expect(component.getDOMNode()).toMatchInlineSnapshot(`
app-content
diff --git a/src/core/public/rendering/app_containers.tsx b/src/core/public/rendering/app_containers.tsx
index 0d715a675269..64d64d2caad7 100644
--- a/src/core/public/rendering/app_containers.tsx
+++ b/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;
-}> = ({ chromeVisible$, children }) => {
- const visible = useObservable(chromeVisible$);
- return {children}
;
-};
-
-export const AppContainer: React.FunctionComponent<{
classes$: Observable;
-}> = ({ classes$, children }) => {
- const classes = useObservable(classes$);
- return {children}
;
+}> = ({ chromeVisible$, classes$, children }) => {
+ const visible = useObservable(chromeVisible$);
+ const classes = useObservable(classes$, ['']);
+ return (
+
+ {children}
+
+ );
};
diff --git a/src/core/public/rendering/rendering_service.test.tsx b/src/core/public/rendering/rendering_service.test.tsx
index d293e2d44ba6..d9eb764fc9f0 100644
--- a/src/core/public/rendering/rendering_service.test.tsx
+++ b/src/core/public/rendering/rendering_service.test.tsx
@@ -13,7 +13,7 @@ import { RenderingService } from './rendering_service';
import { applicationServiceMock } from '../application/application_service.mock';
import { chromeServiceMock } from '../chrome/chrome_service.mock';
import { overlayServiceMock } from '../overlays/overlay_service.mock';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, of } from 'rxjs';
describe('RenderingService#start', () => {
let application: ReturnType;
@@ -28,6 +28,7 @@ describe('RenderingService#start', () => {
chrome = chromeServiceMock.createStartContract();
chrome.getHeaderComponent.mockReturnValue(Hello chrome!
);
+ chrome.getApplicationClasses$.mockReturnValue(of([]));
overlays = overlayServiceMock.createStartContract();
overlays.banners.getComponent.mockReturnValue(I'm a banner!
);
@@ -48,54 +49,58 @@ describe('RenderingService#start', () => {
it('renders application service into provided DOM element', () => {
startService();
- expect(targetDomElement.querySelector('div.application')).toMatchInlineSnapshot(`
-
-
- Hello application!
-
-
- `);
+ expect(targetDomElement.querySelector('div.kbnAppWrapper')).toMatchInlineSnapshot(`
+
+
+
+ Hello application!
+
+
+ `);
});
- it('adds the `chrome-hidden` class to the AppWrapper when chrome is hidden', () => {
+ it('adds the `kbnAppWrapper--hiddenChrome` class to the AppWrapper when chrome is hidden', () => {
const isVisible$ = new BehaviorSubject(true);
chrome.getIsVisible$.mockReturnValue(isVisible$);
startService();
- const appWrapper = targetDomElement.querySelector('div.app-wrapper')!;
- expect(appWrapper.className).toEqual('app-wrapper');
+ const appWrapper = targetDomElement.querySelector('div.kbnAppWrapper')!;
+ expect(appWrapper.className).toEqual('kbnAppWrapper');
act(() => isVisible$.next(false));
- expect(appWrapper.className).toEqual('app-wrapper hidden-chrome');
+ expect(appWrapper.className).toEqual('kbnAppWrapper kbnAppWrapper--hiddenChrome');
act(() => isVisible$.next(true));
- expect(appWrapper.className).toEqual('app-wrapper');
+ expect(appWrapper.className).toEqual('kbnAppWrapper');
});
- it('adds the application classes to the AppContainer', () => {
+ it('adds the application classes to the AppWrapper', () => {
const applicationClasses$ = new BehaviorSubject([]);
+ const isVisible$ = new BehaviorSubject(true);
+ chrome.getIsVisible$.mockReturnValue(isVisible$);
chrome.getApplicationClasses$.mockReturnValue(applicationClasses$);
startService();
- const appContainer = targetDomElement.querySelector('div.application')!;
- expect(appContainer.className).toEqual('application');
+ const appContainer = targetDomElement.querySelector('div.kbnAppWrapper')!;
+ expect(appContainer.className).toEqual('kbnAppWrapper');
act(() => applicationClasses$.next(['classA', 'classB']));
- expect(appContainer.className).toEqual('application classA classB');
+ expect(appContainer.className).toEqual('kbnAppWrapper classA classB');
act(() => applicationClasses$.next(['classC']));
- expect(appContainer.className).toEqual('application classC');
+ expect(appContainer.className).toEqual('kbnAppWrapper classC');
act(() => applicationClasses$.next([]));
- expect(appContainer.className).toEqual('application');
+ expect(appContainer.className).toEqual('kbnAppWrapper');
});
it('contains wrapper divs', () => {
startService();
- expect(targetDomElement.querySelector('div.app-wrapper')).toBeDefined();
- expect(targetDomElement.querySelector('div.app-wrapper-pannel')).toBeDefined();
+ expect(targetDomElement.querySelector('div.kbnAppWrapper')).toBeDefined();
});
it('renders the banner UI', () => {
diff --git a/src/core/public/rendering/rendering_service.tsx b/src/core/public/rendering/rendering_service.tsx
index 787fa475c7d5..1dfb4259d7d7 100644
--- a/src/core/public/rendering/rendering_service.tsx
+++ b/src/core/public/rendering/rendering_service.tsx
@@ -14,7 +14,7 @@ import { pairwise, startWith } from 'rxjs/operators';
import { InternalChromeStart } from '../chrome';
import { InternalApplicationStart } from '../application';
import { OverlayStart } from '../overlays';
-import { AppWrapper, AppContainer } from './app_containers';
+import { AppWrapper } from './app_containers';
interface StartDeps {
application: InternalApplicationStart;
@@ -48,16 +48,25 @@ export class RenderingService {
ReactDOM.render(
-
+ <>
+ {/* Fixed headers */}
{chromeHeader}
-
-
-
-
{bannerComponent}
-
{appComponent}
-
+
+ {/* banners$.subscribe() for things like the No data banner */}
+ {bannerComponent}
+
+ {/* The App Wrapper outside of the fixed headers that accepts custom class names from apps */}
+
+ {/* Affixes a div to restrict the position of charts tooltip to the visible viewport minus the header */}
+
+
+ {/* The actual plugin/app */}
+ {appComponent}
-
+ >
,
targetDomElement
);
diff --git a/src/core/public/styles/_ace_overrides.scss b/src/core/public/styles/_ace_overrides.scss
index 30acdbbc8097..ca5230b46acd 100644
--- a/src/core/public/styles/_ace_overrides.scss
+++ b/src/core/public/styles/_ace_overrides.scss
@@ -6,7 +6,7 @@
// In order to override the TM (Textmate) theme of Ace/Brace, everywhere,
// it is being scoped by a known outer selector
-.application {
+.kbnBody {
.ace-tm {
$aceBackground: tintOrShade($euiColorLightShade, 50%, 0);
diff --git a/src/core/public/styles/_base.scss b/src/core/public/styles/_base.scss
index bfb07c1b5142..46f46b469783 100644
--- a/src/core/public/styles/_base.scss
+++ b/src/core/public/styles/_base.scss
@@ -5,29 +5,6 @@
// Grab some nav-specific EUI vars
@import '@elastic/eui/src/components/collapsible_nav/variables';
-// Application Layout
-
-.application,
-.app-container {
- > * {
- position: relative;
- }
-}
-
-.application {
- position: relative;
- z-index: 0;
- display: flex;
- flex-grow: 1;
- flex-shrink: 0;
- flex-basis: auto;
- flex-direction: column;
-
- > * {
- flex-shrink: 0;
- }
-}
-
// We apply brute force focus states to anything not coming from Eui
// which has focus states designed at the component level.
// You can also use "kbn-resetFocusState" to not apply the default focus
diff --git a/src/core/server/index.ts b/src/core/server/index.ts
index 9fccc4b8bc1f..ca328f17b2ae 100644
--- a/src/core/server/index.ts
+++ b/src/core/server/index.ts
@@ -397,7 +397,7 @@ export type {
} from './deprecations';
export type { AppCategory } from '../types';
-export { DEFAULT_APP_CATEGORIES } from '../utils';
+export { DEFAULT_APP_CATEGORIES, APP_WRAPPER_CLASS } from '../utils';
export type {
SavedObject,
diff --git a/src/core/server/rendering/views/styles.tsx b/src/core/server/rendering/views/styles.tsx
index 018ee2d48d8c..105f94df9218 100644
--- a/src/core/server/rendering/views/styles.tsx
+++ b/src/core/server/rendering/views/styles.tsx
@@ -89,8 +89,7 @@ const InlineStyles: FC<{ darkMode: boolean }> = ({ darkMode }) => {
}
.kbnWelcomeText {
- font-family:
- display: inline-block;
+ display: block;
font-size: 14px;
font-family: sans-serif;
line-height: 40px !important;
@@ -103,7 +102,7 @@ const InlineStyles: FC<{ darkMode: boolean }> = ({ darkMode }) => {
text-align: center;
line-height: 1;
text-align: center;
- font-faimily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial !important;
+ font-family: sans-serif;
letter-spacing: -.005em;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
diff --git a/src/core/server/server.api.md b/src/core/server/server.api.md
index 327aee1a9dfc..56759edbd653 100644
--- a/src/core/server/server.api.md
+++ b/src/core/server/server.api.md
@@ -175,6 +175,9 @@ import { URL } from 'url';
export { AddConfigDeprecation }
+// @public
+export const APP_WRAPPER_CLASS = "kbnAppWrapper";
+
// @public
export interface AppCategory {
ariaLabel?: string;
diff --git a/src/core/utils/app_wrapper_class.ts b/src/core/utils/app_wrapper_class.ts
new file mode 100644
index 000000000000..51230cbbb6f7
--- /dev/null
+++ b/src/core/utils/app_wrapper_class.ts
@@ -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.
+ */
+
+/**
+ * The class name for top level *and* nested application wrappers to ensure proper layout
+ * @public
+ */
+export const APP_WRAPPER_CLASS = 'kbnAppWrapper';
diff --git a/src/core/utils/index.ts b/src/core/utils/index.ts
index a76138399f0f..73980983a12e 100644
--- a/src/core/utils/index.ts
+++ b/src/core/utils/index.ts
@@ -7,3 +7,4 @@
*/
export { DEFAULT_APP_CATEGORIES } from './default_app_categories';
+export { APP_WRAPPER_CLASS } from './app_wrapper_class';
diff --git a/src/plugins/dashboard/public/application/_dashboard_app.scss b/src/plugins/dashboard/public/application/_dashboard_app.scss
index f6525377cce7..435659b68528 100644
--- a/src/plugins/dashboard/public/application/_dashboard_app.scss
+++ b/src/plugins/dashboard/public/application/_dashboard_app.scss
@@ -1,9 +1,3 @@
-.dshAppContainer {
- display: flex;
- flex-direction: column;
- flex: 1;
-}
-
.dashboardViewport {
flex: 1;
display: flex;
diff --git a/src/plugins/dashboard/public/application/dashboard_app.tsx b/src/plugins/dashboard/public/application/dashboard_app.tsx
index e7e2ccfd46b9..fa86fb81bd40 100644
--- a/src/plugins/dashboard/public/application/dashboard_app.tsx
+++ b/src/plugins/dashboard/public/application/dashboard_app.tsx
@@ -303,7 +303,7 @@ export function DashboardApp({
}, [data.search.session]);
return (
-
+ <>
{savedDashboard && dashboardStateManager && dashboardContainer && viewMode && (
<>
>
)}
-
+ >
);
}
diff --git a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
index e23c249cc7e7..02403999cd75 100644
--- a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
+++ b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx
@@ -620,36 +620,38 @@ export function DashboardTopNav({
return (
<>
-
{viewMode !== ViewMode.VIEW ? (
-
- {{
- primaryActionButton: (
-
- ),
- quickButtonGroup: ,
- addFromLibraryButton: (
-
- ),
- extraButtons: [
- ,
- ],
- }}
-
+ <>
+
+
+ {{
+ primaryActionButton: (
+
+ ),
+ quickButtonGroup: ,
+ addFromLibraryButton: (
+
+ ),
+ extraButtons: [
+ ,
+ ],
+ }}
+
+ >
) : null}
>
);
diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx
index 0fad1c51f433..0c4ef8c58f94 100644
--- a/src/plugins/dashboard/public/plugin.tsx
+++ b/src/plugins/dashboard/public/plugin.tsx
@@ -12,6 +12,7 @@ import { filter, map } from 'rxjs/operators';
import { Start as InspectorStartContract } from 'src/plugins/inspector/public';
import { UrlForwardingSetup, UrlForwardingStart } from 'src/plugins/url_forwarding/public';
+import { APP_WRAPPER_CLASS } from '../../../core/public';
import {
App,
Plugin,
@@ -292,7 +293,7 @@ export class DashboardPlugin
category: DEFAULT_APP_CATEGORIES.kibana,
mount: async (params: AppMountParameters) => {
this.currentHistory = params.history;
- params.element.classList.add('dshAppContainer');
+ params.element.classList.add(APP_WRAPPER_CLASS);
const { mountApp } = await import('./application/dashboard_router');
appMounted();
return mountApp({
diff --git a/test/plugin_functional/test_suites/core_plugins/applications.ts b/test/plugin_functional/test_suites/core_plugins/applications.ts
index 0e52b536410e..0145a84423b3 100644
--- a/test/plugin_functional/test_suites/core_plugins/applications.ts
+++ b/test/plugin_functional/test_suites/core_plugins/applications.ts
@@ -25,7 +25,7 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
expect(await testSubjects.exists('kbnLoadingMessage')).to.be(false);
const getAppWrapperHeight = async () => {
- const wrapper = await find.byClassName('app-wrapper');
+ const wrapper = await find.byClassName('kbnAppWrapper');
return (await wrapper.getSize()).height;
};
diff --git a/x-pack/plugins/banners/public/components/banner.tsx b/x-pack/plugins/banners/public/components/banner.tsx
index ae2898629765..5a1e20621f3d 100644
--- a/x-pack/plugins/banners/public/components/banner.tsx
+++ b/x-pack/plugins/banners/public/components/banner.tsx
@@ -25,7 +25,7 @@ export const Banner: FC = ({ bannerConfig }) => {
color: textColor,
}}
>
-
diff --git a/x-pack/plugins/canvas/public/components/fullscreen/fullscreen.scss b/x-pack/plugins/canvas/public/components/fullscreen/fullscreen.scss
index 3ab04e31eb9c..0201498714a8 100644
--- a/x-pack/plugins/canvas/public/components/fullscreen/fullscreen.scss
+++ b/x-pack/plugins/canvas/public/components/fullscreen/fullscreen.scss
@@ -5,10 +5,6 @@ body.canvas-isFullscreen {
padding-top: 0;
}
- .headerWrapper ~ .app-wrapper {
- min-height: 100vh;
- }
-
// following rule is for docked navigation
&.euiBody--collapsibleNavIsDocked {
padding-left: 0 !important; // sass-lint:disable-line no-important
diff --git a/x-pack/plugins/canvas/public/components/popover/popover.tsx b/x-pack/plugins/canvas/public/components/popover/popover.tsx
index 193673932f5f..275d800fe2ca 100644
--- a/x-pack/plugins/canvas/public/components/popover/popover.tsx
+++ b/x-pack/plugins/canvas/public/components/popover/popover.tsx
@@ -86,7 +86,7 @@ export class Popover extends Component {
return button(handleClick);
};
- const appWrapper = document.querySelector('.app-wrapper');
+ const appWrapper = document.querySelector('.kbnAppWrapper');
const EuiPopoverAny = (EuiPopover as any) as React.FC;
return (
diff --git a/x-pack/plugins/monitoring/public/angular/index.ts b/x-pack/plugins/monitoring/public/angular/index.ts
index be26f11c8aaf..0c605abb828b 100644
--- a/x-pack/plugins/monitoring/public/angular/index.ts
+++ b/x-pack/plugins/monitoring/public/angular/index.ts
@@ -10,10 +10,10 @@ import { uiRoutes } from './helpers/routes';
import { Legacy } from '../legacy_shims';
import { configureAppAngularModule } from '../../../../../src/plugins/kibana_legacy/public';
import { localAppModule, appModuleName } from './app_modules';
+import { APP_WRAPPER_CLASS } from '../../../../../src/core/public';
import { MonitoringStartPluginDependencies } from '../types';
-const APP_WRAPPER_CLASS = 'monApplicationWrapper';
export class AngularApp {
private injector?: angular.auto.IInjectorService;
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__snapshots__/cells.test.js.snap b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__snapshots__/cells.test.js.snap
index 89b32d37a744..7a18ca31830a 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__snapshots__/cells.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__snapshots__/cells.test.js.snap
@@ -31,13 +31,19 @@ exports[`Node Listing Metric Cell should format a non-percentage metric 1`] = `
-
+ type="button"
+ >
+
+
@@ -78,13 +84,19 @@ exports[`Node Listing Metric Cell should format a percentage metric 1`] = `
-
+ type="button"
+ >
+
+
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js
index 04592a4c6165..abcbe7f74983 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js
@@ -11,10 +11,9 @@ import { formatMetric } from '../../../lib/format_number';
import {
EuiText,
EuiPopover,
- EuiIcon,
+ EuiButtonIcon,
EuiDescriptionList,
EuiSpacer,
- EuiKeyboardAccessible,
EuiFlexGroup,
EuiFlexItem,
} from '@elastic/eui';
@@ -40,7 +39,7 @@ const getDirection = (slope) => {
const getIcon = (slope) => {
if (slope || slope === 0) {
- return slope > 0 ? 'arrowUp' : 'arrowDown';
+ return slope > 0 ? 'sortUp' : 'sortDown';
}
return null;
};
@@ -83,17 +82,22 @@ function MetricCell({ isOnline, metric = {}, isPercent, ...props }) {
},
];
+ const iconLabel = i18n.translate(
+ 'xpack.monitoring.elasticsearch.node.cells.tooltip.iconLabel',
+ {
+ defaultMessage: 'More information about this metric',
+ }
+ );
+
const button = (
-
-
-
+
);
return (
diff --git a/x-pack/plugins/monitoring/public/index.scss b/x-pack/plugins/monitoring/public/index.scss
index e25885debebd..99b8d1ecfd33 100644
--- a/x-pack/plugins/monitoring/public/index.scss
+++ b/x-pack/plugins/monitoring/public/index.scss
@@ -6,9 +6,3 @@
// monChart__legend
// monChart__legend--small
// monChart__legend-isLoading
-
-.monApplicationWrapper {
- display: flex;
- flex-direction: column;
- flex-grow: 1;
-}
diff --git a/x-pack/plugins/reporting/server/lib/layouts/preserve_layout.css b/x-pack/plugins/reporting/server/lib/layouts/preserve_layout.css
index 86183694330e..508d217cdd03 100644
--- a/x-pack/plugins/reporting/server/lib/layouts/preserve_layout.css
+++ b/x-pack/plugins/reporting/server/lib/layouts/preserve_layout.css
@@ -23,11 +23,6 @@ filter-bar,
display: none !important;
}
-/* override open/closed positioning of the app wrapper/nav */
-.app-wrapper {
- left: 0px !important;
-}
-
/**
* Discover Tweaks
*/
diff --git a/x-pack/plugins/reporting/server/lib/layouts/print.css b/x-pack/plugins/reporting/server/lib/layouts/print.css
index fa963ac72ab4..92cbb327a321 100644
--- a/x-pack/plugins/reporting/server/lib/layouts/print.css
+++ b/x-pack/plugins/reporting/server/lib/layouts/print.css
@@ -23,11 +23,6 @@ filter-bar,
display: none !important;
}
-/* override open/closed positioning of the app wrapper/nav */
-.app-wrapper {
- left: 0px !important;
-}
-
/**
* Discover Tweaks
*/
diff --git a/x-pack/plugins/reporting/server/lib/screenshots/constants.ts b/x-pack/plugins/reporting/server/lib/screenshots/constants.ts
index fb5220fa3955..3d8c50782dee 100644
--- a/x-pack/plugins/reporting/server/lib/screenshots/constants.ts
+++ b/x-pack/plugins/reporting/server/lib/screenshots/constants.ts
@@ -5,7 +5,8 @@
* 2.0.
*/
-export const DEFAULT_PAGELOAD_SELECTOR = '.application';
+import { APP_WRAPPER_CLASS } from '../../../../../../src/core/server';
+export const DEFAULT_PAGELOAD_SELECTOR = `.${APP_WRAPPER_CLASS}`;
export const CONTEXT_GETNUMBEROFITEMS = 'GetNumberOfItems';
export const CONTEXT_GETBROWSERDIMENSIONS = 'GetBrowserDimensions';
diff --git a/x-pack/plugins/reporting/server/lib/screenshots/observable.test.ts b/x-pack/plugins/reporting/server/lib/screenshots/observable.test.ts
index 31726fa42a9c..5419775f1440 100644
--- a/x-pack/plugins/reporting/server/lib/screenshots/observable.test.ts
+++ b/x-pack/plugins/reporting/server/lib/screenshots/observable.test.ts
@@ -204,7 +204,7 @@ describe('Screenshot Observable Pipeline', () => {
expect(mockOpen.mock.calls.length).toBe(2);
const firstSelector = mockOpen.mock.calls[0][1].waitForSelector;
- expect(firstSelector).toBe('.application');
+ expect(firstSelector).toBe('.kbnAppWrapper');
const secondSelector = mockOpen.mock.calls[1][1].waitForSelector;
expect(secondSelector).toBe('[data-shared-page="2"]');
diff --git a/x-pack/plugins/reporting/server/routes/diagnostic/screenshot.ts b/x-pack/plugins/reporting/server/routes/diagnostic/screenshot.ts
index 70e5b89af7e8..7405e8cff897 100644
--- a/x-pack/plugins/reporting/server/routes/diagnostic/screenshot.ts
+++ b/x-pack/plugins/reporting/server/routes/diagnostic/screenshot.ts
@@ -7,6 +7,7 @@
import { i18n } from '@kbn/i18n';
import { ReportingCore } from '../..';
+import { APP_WRAPPER_CLASS } from '../../../../../../src/core/server';
import { API_DIAGNOSE_URL } from '../../../common/constants';
import { omitBlockedHeaders } from '../../export_types/common';
import { getAbsoluteUrlFactory } from '../../export_types/common/get_absolute_url';
@@ -47,8 +48,8 @@ export const registerDiagnoseScreenshot = (reporting: ReportingCore, logger: Log
height: 2024,
},
selectors: {
- screenshot: '.application',
- renderComplete: '.application',
+ screenshot: `.${APP_WRAPPER_CLASS}`,
+ renderComplete: `.${APP_WRAPPER_CLASS}`,
itemsCountAttribute: 'data-test-subj="kibanaChrome"',
timefilterDurationAttribute: 'data-test-subj="kibanaChrome"',
},
diff --git a/x-pack/plugins/security_solution/public/common/components/page/index.tsx b/x-pack/plugins/security_solution/public/common/components/page/index.tsx
index 3c02f0075eec..30b89086fb99 100644
--- a/x-pack/plugins/security_solution/public/common/components/page/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/page/index.tsx
@@ -32,7 +32,7 @@ export const AppGlobalStyle = createGlobalStyle<{ theme: { eui: { euiColorPrimar
overflow: hidden;
}
- div.app-wrapper {
+ div.kbnAppWrapper {
background-color: rgba(0,0,0,0);
}
diff --git a/x-pack/plugins/uptime/public/apps/uptime_app.tsx b/x-pack/plugins/uptime/public/apps/uptime_app.tsx
index 8e049be75434..84c012eb01cf 100644
--- a/x-pack/plugins/uptime/public/apps/uptime_app.tsx
+++ b/x-pack/plugins/uptime/public/apps/uptime_app.tsx
@@ -118,7 +118,7 @@ const Application = (props: UptimeAppProps) => {
-
+
diff --git a/x-pack/test/functional/page_objects/security_page.ts b/x-pack/test/functional/page_objects/security_page.ts
index 97a5c517db79..e6f372a79f0a 100644
--- a/x-pack/test/functional/page_objects/security_page.ts
+++ b/x-pack/test/functional/page_objects/security_page.ts
@@ -108,7 +108,7 @@ export function SecurityPageProvider({ getService, getPageObjects }: FtrProvider
if (expectedResult === 'chrome') {
await find.byCssSelector(
- '[data-test-subj="kibanaChrome"] .app-wrapper:not(.hidden-chrome)',
+ '[data-test-subj="kibanaChrome"] .kbnAppWrapper:not(.kbnAppWrapper--hiddenChrome)',
20000
);
log.debug(`Finished login process currentUrl = ${await browser.getCurrentUrl()}`);
diff --git a/x-pack/test/security_functional/tests/oidc/url_capture.ts b/x-pack/test/security_functional/tests/oidc/url_capture.ts
index a3b87def6176..968e1001a5f5 100644
--- a/x-pack/test/security_functional/tests/oidc/url_capture.ts
+++ b/x-pack/test/security_functional/tests/oidc/url_capture.ts
@@ -43,7 +43,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
);
await find.byCssSelector(
- '[data-test-subj="kibanaChrome"] .app-wrapper:not(.hidden-chrome)',
+ '[data-test-subj="kibanaChrome"] .kbnAppWrapper:not(.kbnAppWrapper--hiddenChrome)',
20000
);
diff --git a/x-pack/test/security_functional/tests/saml/url_capture.ts b/x-pack/test/security_functional/tests/saml/url_capture.ts
index 68ec96fbf4fa..80f6528334cc 100644
--- a/x-pack/test/security_functional/tests/saml/url_capture.ts
+++ b/x-pack/test/security_functional/tests/saml/url_capture.ts
@@ -43,7 +43,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
);
await find.byCssSelector(
- '[data-test-subj="kibanaChrome"] .app-wrapper:not(.hidden-chrome)',
+ '[data-test-subj="kibanaChrome"] .kbnAppWrapper:not(.kbnAppWrapper--hiddenChrome)',
20000
);