From b56f13a215b21c0395d5b7c182c5b118fc56f18b Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Thu, 2 Sep 2021 14:31:02 -0400 Subject: [PATCH 1/8] account for banners when data grid is full screen --- src/core/public/rendering/_base.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss index 92ba28ff70887..2fbd00abc16c9 100644 --- a/src/core/public/rendering/_base.scss +++ b/src/core/public/rendering/_base.scss @@ -49,6 +49,12 @@ &.kbnBody--hasHeaderBanner { @include kbnAffordForHeader($kbnHeaderOffsetWithBanner); + + // Prevents banners from covering full screen data grids + .euiDataGrid--fullScreen { + height: auto; + top: $kbnHeaderBannerHeight; + } } &.kbnBody--chromeHidden { @include kbnAffordForHeader(0); From b23599ad032cf1727928ddd70040361434271a8e Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Thu, 2 Sep 2021 14:38:24 -0400 Subject: [PATCH 2/8] account for banner when canvas is full screen --- x-pack/plugins/canvas/common/lib/constants.ts | 1 + .../canvas/public/components/workpad/workpad.js | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/canvas/common/lib/constants.ts b/x-pack/plugins/canvas/common/lib/constants.ts index 2b916033ce557..a41ec13b36252 100644 --- a/x-pack/plugins/canvas/common/lib/constants.ts +++ b/x-pack/plugins/canvas/common/lib/constants.ts @@ -45,3 +45,4 @@ export const CANVAS_EMBEDDABLE_CLASSNAME = `canvasEmbeddable`; export const CONTEXT_MENU_TOP_BORDER_CLASSNAME = 'canvasContextMenu--topBorder'; export const API_ROUTE_FUNCTIONS = `${API_ROUTE}/fns`; export const ESSQL_SEARCH_STRATEGY = 'essql'; +export const HEADER_BANNER_HEIGHT = 32; diff --git a/x-pack/plugins/canvas/public/components/workpad/workpad.js b/x-pack/plugins/canvas/public/components/workpad/workpad.js index 1e46558c7a377..661343dc577c0 100644 --- a/x-pack/plugins/canvas/public/components/workpad/workpad.js +++ b/x-pack/plugins/canvas/public/components/workpad/workpad.js @@ -12,7 +12,7 @@ import Style from 'style-it'; import { WorkpadPage } from '../workpad_page'; import { Fullscreen } from '../fullscreen'; import { isTextInput } from '../../lib/is_text_input'; -import { WORKPAD_CANVAS_BUFFER } from '../../../common/lib/constants'; +import { HEADER_BANNER_HEIGHT, WORKPAD_CANVAS_BUFFER } from '../../../common/lib/constants'; export class Workpad extends React.PureComponent { static propTypes = { @@ -104,7 +104,16 @@ export class Workpad extends React.PureComponent { {({ isFullscreen, windowSize }) => { - const scale = Math.min(windowSize.height / height, windowSize.width / width); + const hasHeaderBanner = document.getElementsByClassName('kbnBody--hasHeaderBanner') + .length; + + const headerBannerOffset = hasHeaderBanner ? HEADER_BANNER_HEIGHT : 0; + + const scale = Math.min( + (windowSize.height - headerBannerOffset) / height, + windowSize.width / width + ); + const fsStyle = isFullscreen ? { transform: `scale3d(${scale}, ${scale}, 1)`, @@ -112,6 +121,7 @@ export class Workpad extends React.PureComponent { msTransform: `scale3d(${scale}, ${scale}, 1)`, height: windowSize.height < height ? 'auto' : height, width: windowSize.width < width ? 'auto' : width, + top: hasHeaderBanner ? `${headerBannerOffset / 2}px` : undefined, } : {}; From 860ea5883a5656662ff845b636edbd55f58b9e38 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Fri, 3 Sep 2021 09:49:26 -0400 Subject: [PATCH 3/8] change height per feedback --- src/core/public/rendering/_base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss index 2fbd00abc16c9..18e564abf822f 100644 --- a/src/core/public/rendering/_base.scss +++ b/src/core/public/rendering/_base.scss @@ -52,7 +52,7 @@ // Prevents banners from covering full screen data grids .euiDataGrid--fullScreen { - height: auto; + height: calc(100vh - #{$kbnHeaderBannerHeight}); top: $kbnHeaderBannerHeight; } } From c0b0206dd4e0f43c27d8d87a207b6805b035b08d Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Wed, 8 Sep 2021 10:54:47 -0400 Subject: [PATCH 4/8] add withKibana --- .../plugins/canvas/public/components/workpad/workpad.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/canvas/public/components/workpad/workpad.js b/x-pack/plugins/canvas/public/components/workpad/workpad.js index 661343dc577c0..1717d5e3f7fb7 100644 --- a/x-pack/plugins/canvas/public/components/workpad/workpad.js +++ b/x-pack/plugins/canvas/public/components/workpad/workpad.js @@ -13,8 +13,9 @@ import { WorkpadPage } from '../workpad_page'; import { Fullscreen } from '../fullscreen'; import { isTextInput } from '../../lib/is_text_input'; import { HEADER_BANNER_HEIGHT, WORKPAD_CANVAS_BUFFER } from '../../../common/lib/constants'; +import { withKibana } from '../../../../../../src/plugins/kibana_react/public'; -export class Workpad extends React.PureComponent { +class WorkpadUI extends React.PureComponent { static propTypes = { selectedPageNumber: PropTypes.number.isRequired, getAnimation: PropTypes.func.isRequired, @@ -80,6 +81,7 @@ export class Workpad extends React.PureComponent { registerLayout, unregisterLayout, zoomScale, + kibana, } = this.props; const bufferStyle = { @@ -104,6 +106,8 @@ export class Workpad extends React.PureComponent { {({ isFullscreen, windowSize }) => { + console.log(kibana); + const hasHeaderBanner = document.getElementsByClassName('kbnBody--hasHeaderBanner') .length; @@ -159,3 +163,5 @@ export class Workpad extends React.PureComponent { ); } } + +export const Workpad = withKibana(WorkpadUI); From 0efa8e4a3ac12c8f726bf7557031e7b5351ebad9 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Wed, 8 Sep 2021 14:38:01 -0400 Subject: [PATCH 5/8] rm withKibana; move vars out of Fullscreen --- .../canvas/public/components/workpad/workpad.js | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/canvas/public/components/workpad/workpad.js b/x-pack/plugins/canvas/public/components/workpad/workpad.js index 1717d5e3f7fb7..ab3246dde268f 100644 --- a/x-pack/plugins/canvas/public/components/workpad/workpad.js +++ b/x-pack/plugins/canvas/public/components/workpad/workpad.js @@ -13,9 +13,8 @@ import { WorkpadPage } from '../workpad_page'; import { Fullscreen } from '../fullscreen'; import { isTextInput } from '../../lib/is_text_input'; import { HEADER_BANNER_HEIGHT, WORKPAD_CANVAS_BUFFER } from '../../../common/lib/constants'; -import { withKibana } from '../../../../../../src/plugins/kibana_react/public'; -class WorkpadUI extends React.PureComponent { +export class WorkpadUI extends React.PureComponent { static propTypes = { selectedPageNumber: PropTypes.number.isRequired, getAnimation: PropTypes.func.isRequired, @@ -81,7 +80,6 @@ class WorkpadUI extends React.PureComponent { registerLayout, unregisterLayout, zoomScale, - kibana, } = this.props; const bufferStyle = { @@ -89,6 +87,10 @@ class WorkpadUI extends React.PureComponent { width: isFullscreen ? width : (width + 2 * WORKPAD_CANVAS_BUFFER) * zoomScale, }; + const hasHeaderBanner = document.getElementsByClassName('kbnBody--hasHeaderBanner').length; + + const headerBannerOffset = hasHeaderBanner ? HEADER_BANNER_HEIGHT : 0; + return (
{({ isFullscreen, windowSize }) => { - console.log(kibana); - - const hasHeaderBanner = document.getElementsByClassName('kbnBody--hasHeaderBanner') - .length; - - const headerBannerOffset = hasHeaderBanner ? HEADER_BANNER_HEIGHT : 0; - const scale = Math.min( (windowSize.height - headerBannerOffset) / height, windowSize.width / width @@ -163,5 +158,3 @@ class WorkpadUI extends React.PureComponent { ); } } - -export const Workpad = withKibana(WorkpadUI); From 554aafe26d8e2f1e19d1eecb095085df3c52c09a Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Wed, 8 Sep 2021 12:48:37 -0700 Subject: [PATCH 6/8] Use hasHeaderBanner$ --- x-pack/plugins/canvas/public/components/workpad/index.js | 7 +++++++ x-pack/plugins/canvas/public/components/workpad/workpad.js | 6 +++--- x-pack/plugins/canvas/public/services/kibana/platform.ts | 1 + x-pack/plugins/canvas/public/services/platform.ts | 2 ++ 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/canvas/public/components/workpad/index.js b/x-pack/plugins/canvas/public/components/workpad/index.js index 2ebefa5e0e322..ae9b6a1fee22c 100644 --- a/x-pack/plugins/canvas/public/components/workpad/index.js +++ b/x-pack/plugins/canvas/public/components/workpad/index.js @@ -8,6 +8,7 @@ import React, { useContext, useCallback } from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { pure, compose, withState, withProps, getContext, withHandlers } from 'recompose'; +import useObservable from 'react-use/lib/useObservable'; import { transitionsRegistry } from '../../lib/transitions_registry'; import { fetchAllRenderables } from '../../state/actions/elements'; import { setZoomScale } from '../../state/actions/transient'; @@ -22,6 +23,7 @@ import { zoomHandlerCreators } from '../../lib/app_handler_creators'; import { trackCanvasUiMetric, METRIC_TYPE } from '../../lib/ui_metric'; import { LAUNCHED_FULLSCREEN, LAUNCHED_FULLSCREEN_AUTOPLAY } from '../../../common/lib/constants'; import { WorkpadRoutingContext } from '../../routes/workpad'; +import { usePlatformService } from '../../services'; import { Workpad as WorkpadComponent } from './workpad'; const mapStateToProps = (state) => { @@ -57,6 +59,10 @@ const AddContexts = (props) => { WorkpadRoutingContext ); + const platformService = usePlatformService(); + + const hasHeaderBanner = useObservable(platformService.hasHeaderBanner$()); + const setFullscreenWithEffect = useCallback( (fullscreen) => { setFullscreen(fullscreen); @@ -79,6 +85,7 @@ const AddContexts = (props) => { isFullscreen={isFullscreen} undoHistory={undo} redoHistory={redo} + hasHeaderBanner={hasHeaderBanner} /> ); }; diff --git a/x-pack/plugins/canvas/public/components/workpad/workpad.js b/x-pack/plugins/canvas/public/components/workpad/workpad.js index ab3246dde268f..9e1c0588e447b 100644 --- a/x-pack/plugins/canvas/public/components/workpad/workpad.js +++ b/x-pack/plugins/canvas/public/components/workpad/workpad.js @@ -14,7 +14,7 @@ import { Fullscreen } from '../fullscreen'; import { isTextInput } from '../../lib/is_text_input'; import { HEADER_BANNER_HEIGHT, WORKPAD_CANVAS_BUFFER } from '../../../common/lib/constants'; -export class WorkpadUI extends React.PureComponent { +export class Workpad extends React.PureComponent { static propTypes = { selectedPageNumber: PropTypes.number.isRequired, getAnimation: PropTypes.func.isRequired, @@ -37,6 +37,7 @@ export class WorkpadUI extends React.PureComponent { zoomIn: PropTypes.func.isRequired, zoomOut: PropTypes.func.isRequired, resetZoom: PropTypes.func.isRequired, + hasHeaderBanner: PropTypes.bool, }; _toggleFullscreen = () => { @@ -80,6 +81,7 @@ export class WorkpadUI extends React.PureComponent { registerLayout, unregisterLayout, zoomScale, + hasHeaderBanner = false, } = this.props; const bufferStyle = { @@ -87,8 +89,6 @@ export class WorkpadUI extends React.PureComponent { width: isFullscreen ? width : (width + 2 * WORKPAD_CANVAS_BUFFER) * zoomScale, }; - const hasHeaderBanner = document.getElementsByClassName('kbnBody--hasHeaderBanner').length; - const headerBannerOffset = hasHeaderBanner ? HEADER_BANNER_HEIGHT : 0; return ( diff --git a/x-pack/plugins/canvas/public/services/kibana/platform.ts b/x-pack/plugins/canvas/public/services/kibana/platform.ts index f71d480b552f6..dc524aab6f444 100644 --- a/x-pack/plugins/canvas/public/services/kibana/platform.ts +++ b/x-pack/plugins/canvas/public/services/kibana/platform.ts @@ -30,6 +30,7 @@ export const platformServiceFactory: CanvaPlatformServiceFactory = ({ coreStart, // though we don't do this. So this cast may be the best option. getHasWriteAccess: () => coreStart.application.capabilities.canvas.save as boolean, getUISetting: coreStart.uiSettings.get.bind(coreStart.uiSettings), + hasHeaderBanner$: coreStart.chrome.hasHeaderBanner$, setBreadcrumbs: coreStart.chrome.setBreadcrumbs, setRecentlyAccessed: coreStart.chrome.recentlyAccessed.add, setFullscreen: coreStart.chrome.setIsVisible, diff --git a/x-pack/plugins/canvas/public/services/platform.ts b/x-pack/plugins/canvas/public/services/platform.ts index b622484c16fc3..9bff61a0c668a 100644 --- a/x-pack/plugins/canvas/public/services/platform.ts +++ b/x-pack/plugins/canvas/public/services/platform.ts @@ -5,6 +5,7 @@ * 2.0. */ +import { Observable } from 'rxjs'; import { SavedObjectsStart, SavedObjectsClientContract, @@ -22,6 +23,7 @@ export interface CanvasPlatformService { getKibanaVersion: () => string; getHasWriteAccess: () => boolean; getUISetting: (key: string, defaultValue?: any) => any; + hasHeaderBanner$: () => Observable; setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void; setRecentlyAccessed: (link: string, label: string, id: string) => void; setFullscreen: ChromeStart['setIsVisible']; From 128872d8c5717e634f4991954f7b12744816bc39 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Thu, 9 Sep 2021 12:08:02 -0400 Subject: [PATCH 7/8] add banner height var comments --- src/core/public/_variables.scss | 2 +- x-pack/plugins/canvas/common/lib/constants.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss index f6ff5619bfc53..6c21c9760be97 100644 --- a/src/core/public/_variables.scss +++ b/src/core/public/_variables.scss @@ -1,7 +1,7 @@ @import '@elastic/eui/src/global_styling/variables/header'; // height of the header banner -$kbnHeaderBannerHeight: $euiSizeXL; +$kbnHeaderBannerHeight: $euiSizeXL; // This value is also declared in `/x-pack/plugins/canvas/common/lib/constants.ts` // total height of the header (when the banner is *not* present) $kbnHeaderOffset: $euiHeaderHeightCompensation * 2; // total height of the header when the banner is present diff --git a/x-pack/plugins/canvas/common/lib/constants.ts b/x-pack/plugins/canvas/common/lib/constants.ts index a41ec13b36252..7212baf2414ea 100644 --- a/x-pack/plugins/canvas/common/lib/constants.ts +++ b/x-pack/plugins/canvas/common/lib/constants.ts @@ -45,4 +45,4 @@ export const CANVAS_EMBEDDABLE_CLASSNAME = `canvasEmbeddable`; export const CONTEXT_MENU_TOP_BORDER_CLASSNAME = 'canvasContextMenu--topBorder'; export const API_ROUTE_FUNCTIONS = `${API_ROUTE}/fns`; export const ESSQL_SEARCH_STRATEGY = 'essql'; -export const HEADER_BANNER_HEIGHT = 32; +export const HEADER_BANNER_HEIGHT = 32; // This value is also declared in `/src/core/public/_variables.scss` From 7b0e7296611bf965e5dd743f33d1157f78653f48 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Thu, 9 Sep 2021 13:16:56 -0400 Subject: [PATCH 8/8] fix ts error --- x-pack/plugins/canvas/public/services/stubs/platform.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/plugins/canvas/public/services/stubs/platform.ts b/x-pack/plugins/canvas/public/services/stubs/platform.ts index 1daaa6bd32f09..3942fcf145cee 100644 --- a/x-pack/plugins/canvas/public/services/stubs/platform.ts +++ b/x-pack/plugins/canvas/public/services/stubs/platform.ts @@ -27,6 +27,7 @@ export const platformServiceFactory: CanvasPlatformServiceFactory = () => ({ getKibanaVersion: () => 'kibanaVersion', getHasWriteAccess: () => true, getUISetting, + hasHeaderBanner$: noop, setBreadcrumbs: noop, setRecentlyAccessed: noop, getSavedObjects: noop,