feat(compass-aggregations): make top area preview resizeable

packages/compass-aggregations/src/components/input-builder-toolbar/input-builder-toolbar.less

@@ -2,7 +2,7 @@
 
 .input-builder-toolbar {
   width: 350px;
-  margin: 0px 18px 0px 18px;
+  margin: 0px 15px 0px 18px;
   flex-shrink: 0;
   display: flex;
   flex-direction: row;

packages/compass-aggregations/src/components/input-builder/input-builder.jsx

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 
 import styles from './input-builder.less';
 
@@ -19,9 +18,9 @@ class InputBuilder extends PureComponent {
 
   render() {
     return (
-      <div className={classnames(styles['input-builder'])}>
+      <div className={styles['input-builder']}>
         Select an operator to construct expressions used in the aggregation pipeline stages.
-        <span onClick={this.learnMore} className={classnames(styles['input-builder-link'])}>
+        <span onClick={this.learnMore} className={styles['input-builder-link']}>
           Learn more
         </span>
       </div>

packages/compass-aggregations/src/components/input-builder/input-builder.less

@@ -1,12 +1,12 @@
 @import (reference) "~less/compass/_theme.less";
 
 .input-builder {
-  flex-shrink: 0;
+  flex-grow: 1;
   position: relative;
   margin: 15px 18px 15px 18px;
   padding: 10px 0px 10px 0px;
-  width: 350px;
   font-size: 13px;
+  min-height: 54px;
   text-align: center;
 
   &-link {

packages/compass-aggregations/src/components/input-preview/input-preview.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import { Document } from '@mongodb-js/compass-crud';
 import HadronDocument from 'hadron-document';
 import LoadingOverlay from '../loading-overlay';
@@ -33,12 +32,12 @@ class InputPreview extends Component {
           key={i} />);
     });
     return (
-      <div className={classnames(styles['input-preview'])}>
+      <div className={styles['input-preview']}>
         { this.props.isLoading ?
           <LoadingOverlay text="Sampling Documents..." /> :
           null
         }
-        <div className={classnames(styles['input-preview-documents'])}>
+        <div className={styles['input-preview-documents']}>
           {documents}
         </div>
       </div>

packages/compass-aggregations/src/components/input-preview/input-preview.less

@@ -4,9 +4,9 @@
   display: flex;
   align-items: center;
   overflow: auto;
+  flex-grow: 1;
   width: 100%;
   position: relative;
-  border-left: 1px solid @gray6;
 
   &-documents {
     display: flex;

packages/compass-aggregations/src/components/input-toolbar/input-toolbar.jsx

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import InputBuilderToolbar from '../input-builder-toolbar';
 import InputPreviewToolbar from '../input-preview-toolbar';
 
@@ -26,7 +25,7 @@ class InputToolbar extends PureComponent {
    */
   render() {
     return (
-      <div className={classnames(styles['input-toolbar'])}>
+      <div className={styles['input-toolbar']}>
         <InputBuilderToolbar
           toggleInputDocumentsCollapsed={
             this.props.toggleInputDocumentsCollapsed

packages/compass-aggregations/src/components/input-workspace/input-workspace.jsx

@@ -1,11 +1,24 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
+import { Resizable } from 're-resizable';
+
 import InputBuilder from '../input-builder';
 import InputPreview from '../input-preview';
+import ResizeHandle from '../resize-handle/resize-handle';
 
 import styles from './input-workspace.less';
 
+const resizeableDirections = {
+  top: false,
+  right: true,
+  bottom: false,
+  left: false,
+  topRight: false,
+  bottomRight: false,
+  bottomLeft: false,
+  topLeft: false
+};
+
 /**
  * The input workspace component.
  */
@@ -25,8 +38,23 @@ class InputWorkspace extends PureComponent {
    */
   render() {
     return (
-      <div className={classnames(styles['input-workspace'])}>
-        <InputBuilder openLink={this.props.openLink} />
+      <div className={styles['input-workspace']}>
+        <Resizable
+          defaultSize={{
+            width: '388px',
+            height: 'auto'
+          }}
+          minWidth="220px"
+          maxWidth="92%"
+          enable={resizeableDirections}
+          ref={c => { this.resizableRef = c; }}
+          handleWrapperClass={styles['stage-resize-handle-wrapper']}
+          handleComponent={{
+            right: <ResizeHandle />,
+          }}
+        >
+          <InputBuilder openLink={this.props.openLink} />
+        </Resizable>
         <InputPreview documents={this.props.documents} isLoading={this.props.isLoading} />
       </div>
     );

packages/compass-aggregations/src/components/stage/stage.jsx

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { Resizable } from 're-resizable';
+
+import ResizeHandle from '../resize-handle/resize-handle';
 import StageEditorToolbar from '../stage-editor-toolbar';
 import StageEditor from '../stage-editor';
 import StagePreview from '../stage-preview';
 import StagePreviewToolbar from '../stage-preview-toolbar';
-import { Resizable } from 're-resizable';
-
-import ResizeHandle from '../resize-handle/resize-handle';
 
 import styles from './stage.less';