feat: make apps resizable

closes #139

package.json

@@ -88,6 +88,7 @@
     "react-loading": "2.0.3",
     "react-redux": "7.0.3",
     "react-redux-toastr": "7.4.9",
+    "react-resizable": "1.8.0",
     "react-router": "5.0.0",
     "react-router-dom": "5.0.0",
     "redux": "4.0.1",

src/components/phase/PhaseApp.css

@@ -3,7 +3,3 @@
   height: 100%;
   border: 0;
 }
-
-.AppDiv {
-  height: 600px;
-}

src/components/phase/PhaseApp.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import Qs from 'qs';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { ResizableBox } from 'react-resizable';
 import './PhaseApp.css';
 import {
   GET_APP_INSTANCE_RESOURCES,
@@ -139,7 +140,12 @@ class PhaseApp extends Component {
     const queryString = Qs.stringify(params);
 
     return (
-      <div className="AppDiv">
+      <ResizableBox
+        minConstraints={[0, 200]}
+        maxConstraints={[0, 600]}
+        height={300}
+        axis="y"
+      >
         <iframe
           title={name}
           className="App"
@@ -148,7 +154,7 @@ class PhaseApp extends Component {
             this.iframe = c;
           }}
         />
-      </div>
+      </ResizableBox>
     );
   }
 }

src/index.js

@@ -7,6 +7,7 @@ import { I18nextProvider } from 'react-i18next';
 import i18nConfig from './config/i18n';
 import { WHITELISTED_ERRORS } from './config/errors';
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
+import 'react-resizable/css/styles.css';
 import App from './App';
 import configureStore from './store/configure';
 

yarn.lock

@@ -3339,7 +3339,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-[email protected], classnames@^2.2.3:
+[email protected], classnames@^2.2.3, classnames@^2.2.5:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -10919,7 +10919,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-[email protected], prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+[email protected], prop-types@15.x, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11232,6 +11232,14 @@ [email protected]:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+react-draggable@^3.0.3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-3.3.0.tgz#2ed7ea3f92e7d742d747f9e6324860606cd4d997"
+  integrity sha512-U7/jD0tAW4T0S7DCPK0kkKLyL0z61sC/eqU+NUfDjnq+JtBKaYKDHpsK2wazctiA4alEzCXUnzkREoxppOySVw==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react-error-overlay@^5.1.5, react-error-overlay@^5.1.6:
   version "5.1.6"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d"
@@ -11304,6 +11312,14 @@ [email protected]:
     prop-types "^15.7.2"
     react-is "^16.8.6"
 
+[email protected]:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.8.0.tgz#a6dd8c90826f1e54244141b770318e0320663a43"
+  integrity sha512-lfYlCelPyUL8GLYd4SgFtZOrFY8XpxpDwXjgGHLiLM2aMv7mEkBT8Jn5MUV1TCinF5mIro4CMezfnniAZEkGvg==
+  dependencies:
+    prop-types "15.x"
+    react-draggable "^3.0.3"
+
 [email protected]:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.0.tgz#542a9b86af269a37f0b87218c4c25ea8dcf0c073"