Structure change (#4220)

* Structure change

* Remove duplicate folders from previous structure

* Cleanup websocket protocol

* Updating from based off PR

* Fixup - remove wrong files during conflict and get the websocket working

* renaming tsx to ts

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/components/ThreePaneLayout/ThreePaneLayout.css

@@ -0,0 +1,33 @@
+.three-pane-layout,
+.three-pane-layout .grid {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+.three-pane-layout .grid-main,
+.three-pane-layout .grid-side {
+  height: 100%;
+}
+
+.three-pane-layout .grid-main {
+  display: flex;
+  flex-direction: column; 
+}
+
+.three-pane-layout .grid-main__top {
+  max-height: 50%;
+  width: 100%;
+  padding-bottom: 20px;
+  flex-shrink: 0;
+}
+
+.three-pane-layout .grid-main__top.fixedHeight {
+  height: 50%;
+}
+
+.three-pane-layout .grid-main__bottom {
+  height: 100%;
+  width: 100%;
+  flex-shrink: 1;
+}

webclient/src/components/ThreePaneLayout/ThreePaneLayout.tsx

@@ -0,0 +1,45 @@
+// eslint-disable-next-line
+import React, { Component, CElement } from "react";
+import { connect } from "react-redux";
+import Grid from "@material-ui/core/Grid";
+import Hidden from "@material-ui/core/Hidden";
+
+import "./ThreePaneLayout.css";
+
+class ThreePaneLayout extends Component<ThreePaneLayoutProps> {
+  render() {
+    return (
+      <div className="three-pane-layout">
+        <Grid container spacing={2} className="grid">
+          <Grid item xs={12} md={9} lg={10} className="grid-main">
+            <Grid item className={
+              "grid-main__top"
+              + (this.props.fixedHeight ? " fixedHeight" : "")
+            }>
+              {this.props.top}
+            </Grid>
+            <Grid item className="grid-main__bottom">
+              {this.props.bottom}
+            </Grid>
+          </Grid>
+          <Hidden smDown>
+            <Grid item md={3} lg={2} className="grid-side">
+              {this.props.side}
+            </Grid>
+          </Hidden>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+interface ThreePaneLayoutProps {
+  top: CElement<any, any>,
+  bottom: CElement<any, any>,
+  side?: CElement<any, any>,
+  fixedHeight?: boolean,
+}
+
+const mapStateToProps = state => ({});
+
+export default connect(mapStateToProps)(ThreePaneLayout);