[7.x] Use EuiResizableContainer in visualize (#86934)

src/plugins/vis_default_editor/public/_default.scss

@@ -1,45 +1,26 @@
 .visEditor--default {
+  // height: 1px is in place to make editor children take their height in the parent
+  height: 1px;
   flex: 1 1 auto;
   display: flex;
-
-  @include euiBreakpoint('xs', 's', 'm') {
-    flex-direction: column;
-  }
 }
 
 /**
  * Collapsible sidebar container
  */
 
 .visEditor__collapsibleSidebar {
-  background: $euiColorLightestShade;
-  min-width: $visEditorSidebarMinWidth;
-  max-width: 100%;
-  position: relative;
-  flex-shrink: 0;
-
-  @include euiBreakpoint('xs', 's', 'm') {
-    // If we are on a small screen we force the editor to take 100% width.
-    width: 100% !important;
-  }
-
-  @include euiBreakpoint('l', 'xl') {
-    max-width: 75%;
-  }
+  flex-grow: 1;
 }
 
-// !importants on width are required to override resizable panel inline widths
+// !importants on width and height are required to override resizable panel inline widths
 .visEditor__collapsibleSidebar-isClosed {
   min-width: 0;
   width: $euiSizeXL !important; // Just enough room for the collapse button
 
   .visEditorSidebar {
     display: none;
-  }
-
-  @include euiBreakpoint('xs', 's', 'm') {
-    height: $euiSizeXXL; // Just enough room for the collapse button
-    width: 100% !important;
+    padding-left: 0;
   }
 }
 
@@ -53,13 +34,6 @@
  * Resizer
  */
 
-.visEditor__resizer {
-  @include kbnResizer($euiSizeM);
-  @include euiBreakpoint('xs', 's', 'm') {
-    display: none;
-  }
-}
-
 .visEditor__resizer-isHidden {
   display: none;
 }
@@ -68,15 +42,14 @@
  * Canvas area
  */
 
+.visEditor__visualization__wrapper-expanded {
+  width: 100% !important;
+}
+
 .visEditor__visualization {
   display: flex;
   flex: 1 1 auto; // Fixes IE bug: the editor overflows a visualization on small screens
   overflow: hidden;
-
-  @include euiBreakpoint('xs', 's', 'm') {
-    // If we are on a small screen we force the visualization to take 100% width.
-    width: 100% !important;
-  }
 }
 
 .visEditor__canvas {
@@ -92,13 +65,34 @@
     flex-basis: 100%;
   }
 
-  .visualize {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 100%;
-  }
-
   .visChart {
     position: relative;
   }
 }
+
+/**
+ * If we are on a small screen we change the editor layout
+ */
+@include euiBreakpoint('xs', 's', 'm') {
+  .visEditor--default {
+    flex-direction: column; // change the editor direction to column
+  }
+
+  .visEditor__collapsibleSidebar {
+    width: 100% !important; // force the editor to take 100% width
+  }
+
+  .visEditor__collapsibleSidebar-isClosed {
+    height: $euiSizeXXL !important; // Just enough room for the collapse button
+  }
+
+  .visEditor__resizer {
+    display: none; // hide the resizer button
+  }
+
+  .visEditor__visualization__wrapper {
+    // force the visualization to take 100% width and height.
+    width: 100% !important;
+    height: 100% !important;
+  }
+}

src/plugins/vis_default_editor/public/_sidebar.scss

@@ -3,11 +3,11 @@
 //
 
 .visEditorSidebar {
-  min-width: $visEditorSidebarMinWidth;
+  height: 100%;
+  padding-left: $euiSizeS;
 
-  // a hack for IE, issue: https://github.com/elastic/kibana/issues/66586
-  > .visEditorSidebar__formWrapper {
-    flex-basis: auto;
+  @include euiBreakpoint('xs', 's', 'm') {
+    padding-left: 0;
   }
 }
 

src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx

@@ -6,7 +6,14 @@
  * Side Public License, v 1.
  */
 
-import React, { useMemo, useState, useCallback, KeyboardEventHandler, useEffect } from 'react';
+import React, {
+  memo,
+  useMemo,
+  useState,
+  useCallback,
+  KeyboardEventHandler,
+  useEffect,
+} from 'react';
 import { isEqual } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { keys, EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
@@ -39,7 +46,7 @@ interface DefaultEditorSideBarProps {
   timeRange: TimeRange;
 }
 
-function DefaultEditorSideBar({
+function DefaultEditorSideBarComponent({
   embeddableHandler,
   isCollapsed,
   onClickCollapse,
@@ -173,7 +180,7 @@ function DefaultEditorSideBar({
         gutterSize="none"
         responsive={false}
       >
-        <EuiFlexItem className="visEditorSidebar__formWrapper">
+        <EuiFlexItem>
           <form
             className="visEditorSidebar__form"
             name="visualizeEditor"
@@ -236,4 +243,6 @@ function DefaultEditorSideBar({
   );
 }
 
+const DefaultEditorSideBar = memo(DefaultEditorSideBarComponent);
+
 export { DefaultEditorSideBar };

src/plugins/vis_default_editor/public/default_editor.tsx

@@ -11,10 +11,11 @@ import 'brace/mode/json';
 
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { EventEmitter } from 'events';
+import { EuiResizableContainer } from '@elastic/eui';
 
 import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public';
 import { EditorRenderProps } from 'src/plugins/visualize/public';
-import { KibanaContextProvider, PanelsContainer, Panel } from '../../kibana_react/public';
+import { KibanaContextProvider } from '../../kibana_react/public';
 import { Storage } from '../../kibana_utils/public';
 
 import { DefaultEditorSideBar } from './components/sidebar';
@@ -46,6 +47,14 @@ function DefaultEditor({
     setIsCollapsed((value) => !value);
   }, []);
 
+  /**
+   * The empty callback is in place to prevent resetting the dragging state of the resize button.
+   * The mouseLeave is triggered since a visualization is rendered through another call of "ReactDOM.render()"" in expressions,
+   * using the "visRef" node reference.
+   * Here is the existing React issue: https://github.com/facebook/react/issues/17064
+   */
+  const onEditorMouseLeave = useCallback(() => {}, []);
+
   useEffect(() => {
     if (!visRef.current) {
       return;
@@ -79,35 +88,52 @@ function DefaultEditor({
           ...core,
         }}
       >
-        <PanelsContainer
-          className="visEditor--default"
-          resizerClassName={`visEditor__resizer ${
-            isCollapsed ? 'visEditor__resizer-isHidden' : ''
-          }`}
-        >
-          <Panel className="visEditor__visualization" initialWidth={100 - editorInitialWidth}>
-            <div className="visEditor__canvas" ref={visRef} data-shared-items-container />
-          </Panel>
-
-          <Panel
-            className={`visEditor__collapsibleSidebar ${
-              isCollapsed ? 'visEditor__collapsibleSidebar-isClosed' : ''
-            }`}
-            initialWidth={editorInitialWidth}
-          >
-            <DefaultEditorSideBar
-              embeddableHandler={embeddableHandler}
-              isCollapsed={isCollapsed}
-              onClickCollapse={onClickCollapse}
-              vis={vis}
-              uiState={uiState}
-              isLinkedSearch={linked}
-              savedSearch={savedSearch}
-              timeRange={timeRange}
-              eventEmitter={eventEmitter}
-            />
-          </Panel>
-        </PanelsContainer>
+        <EuiResizableContainer className="visEditor--default" onMouseLeave={onEditorMouseLeave}>
+          {(EuiResizablePanel, EuiResizableButton) => (
+            <>
+              <EuiResizablePanel
+                className="visEditor__visualization"
+                initialSize={100 - editorInitialWidth}
+                minSize="25%"
+                paddingSize="none"
+                wrapperProps={{
+                  className: `visEditor__visualization__wrapper ${
+                    isCollapsed ? 'visEditor__visualization__wrapper-expanded' : ''
+                  }`,
+                }}
+              >
+                <div className="visEditor__canvas" ref={visRef} data-shared-items-container />
+              </EuiResizablePanel>
+
+              <EuiResizableButton
+                className={`visEditor__resizer ${isCollapsed ? 'visEditor__resizer-isHidden' : ''}`}
+              />
+
+              <EuiResizablePanel
+                initialSize={editorInitialWidth}
+                minSize={isCollapsed ? '0' : '350px'}
+                paddingSize="none"
+                wrapperProps={{
+                  className: `visEditor__collapsibleSidebar ${
+                    isCollapsed ? 'visEditor__collapsibleSidebar-isClosed' : ''
+                  }`,
+                }}
+              >
+                <DefaultEditorSideBar
+                  embeddableHandler={embeddableHandler}
+                  isCollapsed={isCollapsed}
+                  onClickCollapse={onClickCollapse}
+                  vis={vis}
+                  uiState={uiState}
+                  isLinkedSearch={linked}
+                  savedSearch={savedSearch}
+                  timeRange={timeRange}
+                  eventEmitter={eventEmitter}
+                />
+              </EuiResizablePanel>
+            </>
+          )}
+        </EuiResizableContainer>
       </KibanaContextProvider>
     </core.i18n.Context>
   );

src/plugins/vis_default_editor/public/index.scss

@@ -1,5 +1,3 @@
-$visEditorSidebarMinWidth: 350px;
-
 // Main layout
 @import './default';
 @import './sidebar';

test/functional/page_objects/visualize_editor_page.ts

@@ -296,7 +296,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
     }
 
     public async sizeUpEditor() {
-      const resizerPanel = await testSubjects.find('splitPanelResizer');
+      const resizerPanel = await testSubjects.find('euiResizableButton');
       // Drag panel 100 px left
       await browser.dragAndDrop({ location: resizerPanel }, { location: { x: -100, y: 0 } });
     }

x-pack/plugins/reporting/server/lib/layouts/preserve_layout.css

@@ -55,7 +55,7 @@ discover-app .discover-table-footer {
 
 /* hide unusable controls
 *  !important is required to override resizable panel inline display */
-.visEditor__content .visEditor--default > :not(.visEditor__visualization) {
+.visEditor__content .visEditor--default > :not(.visEditor__visualization__wrapper) {
   display: none !important;
 }
 

x-pack/plugins/reporting/server/lib/layouts/print.css

@@ -54,7 +54,7 @@ discover-app .discover-table-footer {
 
 /* hide unusable controls
 *  !important is required to override resizable panel inline display */
-.visEditor__content .visEditor--default > :not(.visEditor__visualization) {
+.visEditor__content .visEditor--default > :not(.visEditor__visualization__wrapper) {
   display: none !important;
 }
 /** THIS IS FOR TSVB UNTIL REFACTOR **/