feat(xod-client): make Deployment pane resizable

packages/xod-client-browser/test-func/copy-save.spec.js

@@ -1,4 +1,4 @@
-/* global browser:false, assert:false, navigator:false */
+/* global browser:false, assert:false, navigator:false, localStorage: false */
 import { tmpdir } from 'os';
 import { promises as fs } from 'fs';
 import { resolve } from 'path';
@@ -9,16 +9,26 @@ import getPage from './utils/getPage';
 import Debugger from './pageObjects/Debugger';
 
 describe('copy & save log', () => {
+  beforeEach(async () => {
+    const page = await getPage(browser);
+    // We have to clear the localStorage to ensure that the deployment
+    // pane will be in a default initial state
+    await page.evaluate(() => localStorage.clear());
+  });
   const openIdeAndDeploymentPane = async browser => {
     const page = await getPage(browser);
-    const debugPanel = await Debugger.findOnPage(page);
-
+    // TODO: Replace with `const` and do not find the DOM elment on the page
+    //       after opening it, when rerendering of the element will be fixed
+    let debugPanel = await Debugger.findOnPage(page);
     // Open debugger
     assert.isTrue(
       await debugPanel.isCollapsed(),
       'debugger panel is collapsed by default'
     );
+
     await debugPanel.click();
+    debugPanel = await Debugger.findOnPage(page); // TODO
+
     assert.isTrue(
       await debugPanel.isOpened(),
       'debugger panel is opened by click'

packages/xod-client/package.json

@@ -47,7 +47,7 @@
     "react-highlight-words": "^0.8.1",
     "react-hotkeys": "^1.1.4",
     "react-redux": "^4.0.6",
-    "react-reflex": "^2.2.7",
+    "react-reflex": "^2.2.9",
     "react-remarkable": "^1.1.3",
     "react-resize-detector": "^1.1.0",
     "react-skylight": "git+/~https://github.com/xodio/react-skylight.git#6dc266edc5198d0d1a6feb57f329826e782ec967",

packages/xod-client/src/core/containers/App.jsx

@@ -59,6 +59,7 @@ import { USERNAME_NEEDED_FOR_LITERAL } from '../../user/messages';
 import { PROJECT_NAME_NEEDED_FOR_LITERAL } from '../../project/messages';
 import { DO_NOT_USE_TETHERING_INTERNET_IN_BROWSER } from '../../debugger/messages';
 import { COMMAND } from '../../utils/constants';
+import { PANEL_IDS } from '../../editor/constants';
 
 import formatErrorMessage from '../formatErrorMessage';
 
@@ -438,7 +439,7 @@ App.actions = {
   startDebuggerSession: actions.startDebuggerSession,
   startSerialSession: actions.startSerialSession,
   stopDebuggerSession: actions.stopDebuggerSession,
-  toggleDebugger: actions.toggleDebugger,
+  toggleDebugger: () => actions.togglePanel(PANEL_IDS.DEPLOYMENT),
   logDebugger: actions.addMessagesToDebuggerLog,
   clearDebugger: actions.clearDebuggerLog,
   cutEntities: actions.cutEntities,

packages/xod-client/src/core/styles/components/Debugger.scss

@@ -10,16 +10,20 @@
 }
 
 .Debugger {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
   bottom: 0;
-  height: 220px;
   width: 100%;
-  border-top: 2px solid $chrome-outlines;
+  border-top: 0;
   box-sizing: border-box;
 
   color: $sidebar-color-text;
 
   &.isCollapsed {
     height: 24px;
+    border-top: 2px solid $chrome-outlines;
   }
 
   .titlebar {
@@ -171,7 +175,9 @@
   }
 
   .container {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
     position: relative;
     height: 165px;
 
@@ -180,7 +186,8 @@
   }
 
   .log {
-    height: 161px;
+    flex: 1;
+    // height: 161px;
 
     overflow-y: scroll;
     white-space: pre-wrap;
@@ -220,8 +227,6 @@
     }
 
     &.compact {
-      height: 143px;
-
       .skipped {
         bottom: 24px;
         padding: 0 28px 7px;
@@ -230,6 +235,7 @@
   }
 
   .SerialInput {
+    display: block;
     position: relative;
 
     input {

packages/xod-client/src/core/styles/components/Workarea.scss

@@ -4,6 +4,20 @@
   flex-direction: column;
   flex-grow: 1;
   max-width: 100%;
+
+  & > .reflex-layout > .reflex-element > div {
+    flex-direction: column;
+  }
+
+  .Deployment-pane {
+    min-height: 24px;
+  }
+}
+
+.Workarea-content {
+  &.isCollapsed .reflex-splitter {
+    display: none;
+  }
 }
 
 .Workarea-inner {

packages/xod-client/src/debugger/actionTypes.js

@@ -3,8 +3,6 @@ export const INSTALL_ARDUINO_DEPENDENCIES = 'INSTALL_ARDUINO_DEPENDENCIES';
 export const CHECK_ARDUINO_DEPENDENCIES = 'CHECK_ARDUINO_DEPENDENCIES';
 export const UPGRADE_ARDUINO_DEPENDECIES = 'UPGRADE_ARDUINO_DEPENDECIES';
 
-export const TOGGLE_DEBUGGER_PANEL = 'TOGGLE_DEBUGGER_PANEL';
-
 export const SELECT_DEBUGGER_TAB = 'SELECT_DEBUGGER_TAB';
 
 export const DEBUGGER_LOG_ADD_MESSAGES = 'DEBUGGER_LOG_ADD_MESSAGES';

packages/xod-client/src/debugger/actions.js

@@ -3,10 +3,6 @@ import { maybeProp } from 'xod-func-tools';
 import * as AT from './actionTypes';
 import { tetheringInetChunksToSend } from './selectors';
 
-export const toggleDebugger = () => ({
-  type: AT.TOGGLE_DEBUGGER_PANEL,
-});
-
 export const addMessagesToDebuggerLog = messages => ({
   type: AT.DEBUGGER_LOG_ADD_MESSAGES,
   payload: messages,

packages/xod-client/src/debugger/containers/Debugger.jsx

@@ -10,6 +10,7 @@ import { foldMaybe } from 'xod-func-tools';
 import { Maybe } from 'ramda-fantasy';
 
 import { LOG_TAB_TYPE } from '../constants';
+import { PANEL_IDS } from '../../editor/constants';
 import * as selectors from '../selectors';
 import { addError, addConfirmation } from '../../messages/actions';
 import * as DA from '../actions';
@@ -51,7 +52,7 @@ const TAB_ORDER = [
   LOG_TAB_TYPE.TESTER,
 ];
 
-class Debugger extends React.Component {
+class Debugger extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -196,6 +197,7 @@ class Debugger extends React.Component {
       isConnectedToSerial,
       stopDebuggerSession,
       currentTab,
+      isResizing,
     } = this.props;
 
     const uploadProgress = foldMaybe(
@@ -216,7 +218,6 @@ class Debugger extends React.Component {
     );
 
     const isDebuggerTab = currentTab === LOG_TAB_TYPE.DEBUGGER;
-
     return (
       <div className={cn('Debugger', { isCollapsed: !isExpanded })}>
         <div className="titlebar">
@@ -301,7 +302,7 @@ class Debugger extends React.Component {
           <React.Fragment>
             {this.renderTabSelector()}
             <div className="container">
-              <Log compact={isDebuggerTab} />
+              <Log compact={isDebuggerTab} doNotSkipLines={isResizing} />
               {isDebuggerTab ? (
                 <SerialInput
                   disabled={!isConnectedToSerial}
@@ -316,7 +317,12 @@ class Debugger extends React.Component {
   }
 }
 
+Debugger.defaultProps = {
+  isResizing: false,
+};
+
 Debugger.propTypes = {
+  isResizing: PropTypes.bool,
   log: PropTypes.string.isRequired,
   maybeUploadProgress: PropTypes.object.isRequired,
   isExpanded: PropTypes.bool.isRequired,
@@ -336,17 +342,21 @@ const mapStateToProps = R.applySpec({
   log: selectors.getLogForCurrentTab,
   maybeUploadProgress: selectors.getUploadProgress,
   currentTab: selectors.getCurrentDebuggerTab,
-  isExpanded: selectors.isDebuggerVisible,
+  isExpanded: EditorSelectors.isPanelMaximized(PANEL_IDS.DEPLOYMENT),
   isConnectedToSerial: selectors.isSessionActive,
   isCapturingDebuggerProtocolMessages:
     selectors.isCapturingDebuggerProtocolMessages,
   isTabtestRunning: EditorSelectors.isTabtestRunning,
   isSimulationAbortable: selectors.isSimulationAbortable,
 });
+
+const toggleDeploymentPane = () =>
+  EditorActions.togglePanel(PANEL_IDS.DEPLOYMENT);
+
 const mapDispatchToProps = dispatch => ({
   actions: bindActionCreators(
     {
-      toggleDebugger: DA.toggleDebugger,
+      toggleDebugger: toggleDeploymentPane,
       sendToSerial: DA.sendToSerial,
       toggleCapturingDebuggerProtocolMessages:
         DA.toggleCapturingDebuggerProtocolMessages,

packages/xod-client/src/debugger/containers/Log.jsx

@@ -52,6 +52,7 @@ class Log extends React.PureComponent {
     const {
       log,
       error,
+      doNotSkipLines,
       isSkippingNewSerialLogLines,
       numberOfSkippedSerialLogLines,
       isSkipOnScrollEnabled,
@@ -64,7 +65,9 @@ class Log extends React.PureComponent {
         className={cn('log', { compact })}
         ref={el => (this.autoscrollRef = el)}
         onScrolledFromBottom={
-          isSkipOnScrollEnabled ? startSkippingNewLogLines : noop
+          isSkipOnScrollEnabled && !doNotSkipLines
+            ? startSkippingNewLogLines
+            : noop
         }
       >
         {log}
@@ -81,7 +84,12 @@ class Log extends React.PureComponent {
   }
 }
 
+Log.defaultProps = {
+  doNotSkipLines: false,
+};
+
 Log.propTypes = {
+  doNotSkipLines: PropTypes.bool.isRequired,
   log: PropTypes.string.isRequired,
   error: PropTypes.string.isRequired,
   isSkippingNewSerialLogLines: PropTypes.bool.isRequired,

packages/xod-client/src/debugger/reducer.js

@@ -8,7 +8,6 @@ import {
   INSTALL_ARDUINO_DEPENDENCIES,
   CHECK_ARDUINO_DEPENDENCIES,
   UPGRADE_ARDUINO_DEPENDECIES,
-  TOGGLE_DEBUGGER_PANEL,
   DEBUGGER_LOG_ADD_MESSAGES,
   DEBUGGER_LOG_CLEAR,
   DEBUGGER_LOG_START_SKIPPING_NEW_LINES,
@@ -38,6 +37,7 @@ import {
   createFlasherMessage,
   createErrorMessage,
   createOutgoingLogMessage,
+  isErrorMessage,
 } from './utils';
 
 import { default as initialState, DEFAULT_TETHERING_INET_STATE } from './state';
@@ -177,8 +177,6 @@ const updateInteractiveErroredNodePins = R.curry((messageList, state) => {
   );
 });
 
-const showDebuggerPane = R.assoc('isVisible', true);
-
 const hideProgressBar = R.assoc('uploadProgress', null);
 
 const getMessageFromErrResponce = R.compose(
@@ -284,7 +282,6 @@ export default (state = initialState, action) => {
 
       if (status === STATUS.STARTED) {
         return R.compose(
-          type === CHECK_ARDUINO_DEPENDENCIES ? R.identity : showDebuggerPane,
           R.assoc('currentTab', LOG_TAB_TYPE.INSTALLER),
           R.assoc('currentStage', LOG_TAB_TYPE.INSTALLER),
           R.assoc('uploadProgress', 0),
@@ -333,8 +330,7 @@ export default (state = initialState, action) => {
           hideProgressBar,
           overStageError(state.currentStage)(
             appendMessage(createErrorMessage(payload.message))
-          ),
-          showDebuggerPane
+          )
         )(state);
       }
 
@@ -387,15 +383,12 @@ export default (state = initialState, action) => {
           hideProgressBar,
           overStageError(state.currentStage)(
             appendMessage(createErrorMessage(payload.message))
-          ),
-          showDebuggerPane
+          )
         )(state);
       }
 
       return state;
     }
-    case TOGGLE_DEBUGGER_PANEL:
-      return R.over(R.lensProp('isVisible'), R.not, state);
     case DEBUGGER_LOG_START_SKIPPING_NEW_LINES:
       return R.assoc('isSkippingNewSerialLogLines', true, state);
     case DEBUGGER_LOG_STOP_SKIPPING_NEW_LINES:
@@ -422,24 +415,19 @@ export default (state = initialState, action) => {
       const allMessages = action.payload;
 
       const [errorMessages, logMessages] = R.compose(
-        R.partition(R.propEq('type', UPLOAD_MSG_TYPE.ERROR)),
+        R.partition(isErrorMessage),
         state.isCapturingDebuggerProtocolMessages
           ? R.identity
           : R.reject(R.propEq('type', UPLOAD_MSG_TYPE.XOD))
       )(allMessages);
 
-      const showPanelOnErrorMessages = R.isEmpty(errorMessages)
-        ? R.identity
-        : showDebuggerPane;
-
       const addErrorMessage = R.isEmpty(errorMessages)
         ? R.identity
         : overStageError(state.currentStage)(
             appendMessageAndTruncate(errorMessages[0])
           );
 
       return R.compose(
-        showPanelOnErrorMessages,
         addErrorMessage,
         addMessagesOrIncrementSkippedLines(logMessages),
         updateInteractiveErroredNodePins(allMessages),
@@ -482,8 +470,7 @@ export default (state = initialState, action) => {
         ),
         R.assoc('activeSession', SESSION_TYPE.DEBUG),
         R.assoc('isOutdated', false),
-        R.assoc('globals', action.payload.globals),
-        showDebuggerPane
+        R.assoc('globals', action.payload.globals)
       )(state);
     }
     case SERIAL_SESSION_STARTED:
@@ -496,8 +483,7 @@ export default (state = initialState, action) => {
         R.assoc('isSkippingNewSerialLogLines', false),
         R.assoc('numberOfSkippedSerialLogLines', 0),
         R.assoc('activeSession', SESSION_TYPE.SERIAL),
-        R.assoc('isOutdated', false),
-        showDebuggerPane
+        R.assoc('isOutdated', false)
       )(state);
     case DEBUG_SESSION_STOPPED:
       return R.compose(
@@ -573,8 +559,7 @@ export default (state = initialState, action) => {
         overStageError(LOG_TAB_TYPE.TESTER)(
           R.always(formatWasmError(action.payload))
         ),
-        hideProgressBar,
-        showDebuggerPane
+        hideProgressBar
       )(state);
 
     case EAT.SIMULATION_RUN_REQUESTED:
@@ -633,8 +618,7 @@ export default (state = initialState, action) => {
         R.assoc('isPreparingSimulation', false),
         R.assoc('globals', {}),
         R.assoc('tetheringInet', DEFAULT_TETHERING_INET_STATE),
-        hideProgressBar,
-        showDebuggerPane
+        hideProgressBar
       )(state);
 
     default: