Account for presence of top banner when EuiDataGrid and Canvas are full screen (#111038)

* account for banners when data grid is full screen

* account for banner when canvas is full screen

* change height per feedback

* add withKibana

* rm withKibana; move vars out of Fullscreen

* Use hasHeaderBanner$

* add banner height var comments

* fix ts error

Co-authored-by: Catherine Liu <catherine.liu@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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

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: calc(100vh - #{$kbnHeaderBannerHeight});
+      top: $kbnHeaderBannerHeight;
+    }
   }
   &.kbnBody--chromeHidden {
     @include kbnAffordForHeader(0);

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; // This value is also declared in `/src/core/public/_variables.scss`

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

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 = {
@@ -37,6 +37,7 @@ export class Workpad 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 Workpad extends React.PureComponent {
       registerLayout,
       unregisterLayout,
       zoomScale,
+      hasHeaderBanner = false,
     } = this.props;
 
     const bufferStyle = {
@@ -87,6 +89,8 @@ export class Workpad extends React.PureComponent {
       width: isFullscreen ? width : (width + 2 * WORKPAD_CANVAS_BUFFER) * zoomScale,
     };
 
+    const headerBannerOffset = hasHeaderBanner ? HEADER_BANNER_HEIGHT : 0;
+
     return (
       <div className="canvasWorkpad__buffer" style={bufferStyle}>
         <div
@@ -104,7 +108,11 @@ export class Workpad extends React.PureComponent {
 
           <Fullscreen>
             {({ isFullscreen, windowSize }) => {
-              const scale = Math.min(windowSize.height / height, windowSize.width / width);
+              const scale = Math.min(
+                (windowSize.height - headerBannerOffset) / height,
+                windowSize.width / width
+              );
+
               const fsStyle = isFullscreen
                 ? {
                     transform: `scale3d(${scale}, ${scale}, 1)`,
@@ -112,6 +120,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,
                   }
                 : {};
 

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,

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<boolean>;
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
   setRecentlyAccessed: (link: string, label: string, id: string) => void;
   setFullscreen: ChromeStart['setIsVisible'];

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,