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 );