[Lens] Basic layouting

src/legacy/core_plugins/data/public/expressions/expression_renderer.tsx

@@ -37,13 +37,15 @@ export type ExpressionRendererProps = Pick<
    * this callback is called with the given result.
    */
   onRenderFailure?: (result: Result) => void;
+  className?: string;
 };
 
 export type ExpressionRenderer = React.FC<ExpressionRendererProps>;
 
 export const createRenderer = (run: ExpressionRunner): ExpressionRenderer => ({
   expression,
   onRenderFailure,
+  className,
   ...options
 }: ExpressionRendererProps) => {
   const mountpoint: React.MutableRefObject<null | HTMLDivElement> = useRef(null);
@@ -63,6 +65,7 @@ export const createRenderer = (run: ExpressionRunner): ExpressionRenderer => ({
 
   return (
     <div
+      className={className}
       ref={el => {
         mountpoint.current = el;
       }}

x-pack/legacy/plugins/lens/public/app_plugin/app.tsx

@@ -13,11 +13,7 @@ import { NativeRenderer } from '../native_renderer';
 export function App({ editorFrame }: { editorFrame: EditorFrameInstance }) {
   return (
     <I18nProvider>
-      <div>
-        <h1>Lens</h1>
-
-        <NativeRenderer render={editorFrame.mount} nativeProps={undefined} />
-      </div>
+      <NativeRenderer className="lnsPage" render={editorFrame.mount} nativeProps={undefined} />
     </I18nProvider>
   );
 }

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.scss

@@ -0,0 +1,73 @@
+.lnsPage {
+  padding: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.lnsSidebar {
+  @include euiScrollBar;
+  overflow: hidden auto;
+  padding: $euiSize;
+  margin: 0;
+  flex: 1 0 18%;
+  min-width: ($euiSize * 16);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.lnsSidebar--right {
+  min-width: ($euiSize * 18);
+}
+
+.lnsPageBody {
+  @include euiScrollBar;
+  padding-top: $euiSize;
+  padding-bottom: $euiSize;
+  overflow: hidden auto;
+
+  &:first-child {
+    padding-left: $euiSize;
+  }
+
+  .lnsPageContent {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+
+    .lnsPageContentHeader {
+      padding: $euiSize;
+      border-bottom: $euiBorderThin;
+      margin-bottom: 0;
+    }
+
+    .lnsPageContentBody {
+      flex-grow: 1;
+      padding: $euiSizeXL;
+      display: flex;
+      align-items: stretch;
+      justify-content: stretch;
+
+      > * {
+        flex: 1 1 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow-x: hidden;
+      }
+    }
+  }
+}
+
+.lnsExpressionOutput {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow-x: hidden;
+}

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/frame_layout.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiPage, EuiPageSideBar, EuiPageBody } from '@elastic/eui';
 import { RootDragDropProvider } from '../../drag_drop';
 
 export interface FrameLayoutProps {
@@ -18,15 +18,16 @@ export interface FrameLayoutProps {
 export function FrameLayout(props: FrameLayoutProps) {
   return (
     <RootDragDropProvider>
-      <EuiFlexGroup>
-        {/* TODO style this and add workspace prop and loading flags */}
-        <EuiFlexItem grow={null}>{props.dataPanel}</EuiFlexItem>
-        <EuiFlexItem grow={5}>{props.workspacePanel}</EuiFlexItem>
-        <EuiFlexItem grow={null}>
+      <EuiPage className="lnsPage">
+        <EuiPageSideBar className="lnsSidebar">{props.dataPanel}</EuiPageSideBar>
+        <EuiPageBody className="lnsPageBody" restrictWidth={false}>
+          {props.workspacePanel}
+        </EuiPageBody>
+        <EuiPageSideBar className="lnsSidebar lnsSidebar--right">
           {props.configPanel}
           {props.suggestionsPanel}
-        </EuiFlexItem>
-      </EuiFlexGroup>
+        </EuiPageSideBar>
+      </EuiPage>
     </RootDragDropProvider>
   );
 }

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.test.tsx

@@ -17,6 +17,7 @@ import {
 import { WorkspacePanel, WorkspacePanelProps } from './workspace_panel';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
+import { DragDrop } from '../../drag_drop';
 
 const waitForPromises = () => new Promise(resolve => setTimeout(resolve));
 
@@ -317,7 +318,7 @@ Object {
         },
       ]);
 
-      instance.childAt(0).prop('onDrop')({
+      instance.find(DragDrop).prop('onDrop')!({
         name: '@timestamp',
         type: 'date',
         searchable: false,
@@ -374,7 +375,7 @@ Object {
         },
       ]);
 
-      instance.childAt(0).prop('onDrop')({
+      instance.find(DragDrop).prop('onDrop')!({
         name: '@timestamp',
         type: 'date',
         searchable: false,
@@ -392,7 +393,7 @@ Object {
     });
 
     it("should do nothing when the visualization can't use the suggestions", () => {
-      instance.childAt(0).prop('onDrop')({
+      instance.find(DragDrop).prop('onDrop')!({
         name: '@timestamp',
         type: 'date',
         searchable: false,

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx

@@ -4,15 +4,23 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useContext } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiCodeBlock, EuiSpacer } from '@elastic/eui';
+import {
+  EuiCodeBlock,
+  EuiSpacer,
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiTitle,
+  EuiPageContentBody,
+} from '@elastic/eui';
 
 import { toExpression } from '@kbn/interpreter/common';
 import { ExpressionRenderer } from '../../../../../../../src/legacy/core_plugins/data/public';
 import { Action } from './state_management';
 import { Datasource, Visualization, DatasourcePublicAPI } from '../../types';
-import { DragDrop } from '../../drag_drop';
+import { DragDrop, DragContext } from '../../drag_drop';
 import { getSuggestions, toSwitchAction } from './suggestion_helpers';
 import { buildExpression } from './expression_helpers';
 
@@ -37,6 +45,7 @@ export function WorkspacePanel({
   dispatch,
   ExpressionRenderer: ExpressionRendererComponent,
 }: WorkspacePanelProps) {
+  const dragDropContext = useContext(DragContext);
   function onDrop(item: unknown) {
     const datasourceSuggestions = activeDatasource.getDatasourceSuggestionsForField(
       datasourceState,
@@ -137,6 +146,7 @@ export function WorkspacePanel({
     } else {
       return (
         <ExpressionRendererComponent
+          className="lnsExpressionOutput"
           expression={expression!}
           onRenderFailure={(e: unknown) => {
             setExpressionError(e);
@@ -147,8 +157,19 @@ export function WorkspacePanel({
   }
 
   return (
-    <DragDrop draggable={false} droppable={true} onDrop={onDrop}>
-      {renderVisualization()}
-    </DragDrop>
+    <EuiPageContent className="lnsPageContent">
+      <EuiPageContentHeader className="lnsPageContentHeader">
+        <EuiPageContentHeaderSection>
+          <EuiTitle size="xs">
+            <h2>New Visualization</h2>
+          </EuiTitle>
+        </EuiPageContentHeaderSection>
+      </EuiPageContentHeader>
+      <EuiPageContentBody className="lnsPageContentBody">
+        <DragDrop draggable={false} droppable={Boolean(dragDropContext.dragging)} onDrop={onDrop}>
+          {renderVisualization()}
+        </DragDrop>
+      </EuiPageContentBody>
+    </EuiPageContent>
   );
 }

x-pack/legacy/plugins/lens/public/index.scss

@@ -3,4 +3,5 @@
 
 @import './drag_drop/drag_drop.scss';
 @import './xy_visualization_plugin/xy_expression.scss';
-@import './indexpattern_plugin/indexpattern';
+@import './indexpattern_plugin/indexpattern';
+@import './editor_frame_plugin/editor_frame/editor_frame.scss';

x-pack/legacy/plugins/lens/public/native_renderer/native_renderer.test.tsx

@@ -121,6 +121,24 @@ describe('native_renderer', () => {
     expect(containerElement.nodeName).toBe('DIV');
   });
 
+  it('should pass regular html attributes to the wrapping element', () => {
+    const renderSpy = jest.fn();
+    const testProps = { a: 'abc' };
+
+    renderAndTriggerHooks(
+      <NativeRenderer
+        render={renderSpy}
+        nativeProps={testProps}
+        className="testClass"
+        data-test-subj="container"
+      />,
+      mountpoint
+    );
+    const containerElement: HTMLElement = mountpoint.firstElementChild! as HTMLElement;
+    expect(containerElement.className).toBe('testClass');
+    expect(containerElement.dataset.testSubj).toBe('container');
+  });
+
   it('should render a specified element as container', () => {
     const renderSpy = jest.fn();
     const testProps = { a: 'abc' };

x-pack/legacy/plugins/lens/public/native_renderer/native_renderer.tsx

@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 
-export interface NativeRendererProps<T> {
+export interface NativeRendererProps<T> extends HTMLAttributes<HTMLDivElement> {
   render: (domElement: Element, props: T) => void;
   nativeProps: T;
   tag?: string;
@@ -20,8 +20,9 @@ export interface NativeRendererProps<T> {
  *
  * @param props
  */
-export function NativeRenderer<T>({ render, nativeProps, tag }: NativeRendererProps<T>) {
+export function NativeRenderer<T>({ render, nativeProps, tag, ...rest }: NativeRendererProps<T>) {
   return React.createElement(tag || 'div', {
+    ...rest,
     ref: el => el && render(el, nativeProps),
   });
 }

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.scss

@@ -1,4 +1,3 @@
  .lnsChart {
-   // TODO style this dependent on the screen height (see POC)
-   height: 500px;
+   height: 100%;
  }