Make Preview component collapsible and handle completely collapsed right column (#1702)

alexpelan · outoftime · commit 38823dc14eda · 2019-06-25T07:40:25.000-04:00
* WIP: making the preview hideable and expanding Workspace column logic

* Fix bug with preview not getting hidden and lint

* share constants

* Don't force show the errors until user is done typing and it's definitely invalid

* render the preview but hidden if it's collapsed so we can still capture runtime errors and the console works while preview is collapsed.

* Don't show collapsed RHS components when there are errors
diff --git a/src/components/Preview.jsx b/src/components/Preview.jsx
@@ -1,9 +1,11 @@
 import {
+  faChevronDown,
   faExternalLinkAlt,
   faSyncAlt,
 } from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import get from 'lodash-es/get';
+import classnames from 'classnames';
+import partial from 'lodash-es/partial';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import React from 'react';
@@ -13,13 +15,17 @@ import PreviewFrame from './PreviewFrame';
 export default function Preview({
   compiledProjects,
   consoleEntries,
+  currentProjectKey,
+  isOpen,
   showingErrors,
+  title,
   onConsoleError,
   onConsoleLog,
   onConsoleValue,
   onPopOutProject,
   onRefreshClick,
   onRuntimeError,
+  onToggleVisible,
 }) {
   if (showingErrors) {
     return null;
@@ -38,11 +44,14 @@ export default function Preview({
     />
   ));
 
-  const mostRecentCompiledProject = compiledProjects.last();
-  const title = get(mostRecentCompiledProject, 'title', '');
-
   return (
-    <div className="preview output__item">
+    <div
+      className={classnames(
+        'preview',
+        'output__item',
+        {u__hidden: !isOpen},
+      )}
+    >
       <div className="preview__title-bar">
         <span className="preview__button preview__button_pop-out">
           <FontAwesomeIcon
@@ -51,6 +60,12 @@ export default function Preview({
           />
         </span>
         {title}
+        <span className="preview__button preview__button_toggle-visibility">
+          <FontAwesomeIcon
+            icon={faChevronDown}
+            onClick={partial(onToggleVisible, currentProjectKey)}
+          />
+        </span>
         <span className="preview__button preview__button_reset">
           <FontAwesomeIcon icon={faSyncAlt} onClick={onRefreshClick} />
         </span>
@@ -63,11 +78,15 @@ export default function Preview({
 Preview.propTypes = {
   compiledProjects: ImmutablePropTypes.iterable.isRequired,
   consoleEntries: ImmutablePropTypes.iterable.isRequired,
+  currentProjectKey: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
   showingErrors: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
   onConsoleError: PropTypes.func.isRequired,
   onConsoleLog: PropTypes.func.isRequired,
   onConsoleValue: PropTypes.func.isRequired,
   onPopOutProject: PropTypes.func.isRequired,
   onRefreshClick: PropTypes.func.isRequired,
   onRuntimeError: PropTypes.func.isRequired,
+  onToggleVisible: PropTypes.func.isRequired,
 };
diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx
@@ -10,12 +10,14 @@ import includes from 'lodash-es/includes';
 import isNull from 'lodash-es/isNull';
 import get from 'lodash-es/get';
 import partial from 'lodash-es/partial';
+import some from 'lodash-es/some';
 import {t} from 'i18next';
 import classnames from 'classnames';
 
 import prefix from '../services/inlineStylePrefixer';
 import {getQueryParameters, setQueryParameters} from '../util/queryParams';
 import {LANGUAGES} from '../util/editor';
+import {RIGHT_COLUMN_COMPONENTS} from '../util/ui';
 import {dehydrateProject, rehydrateProject} from '../clients/localStorage';
 
 import {isPristineProject} from '../util/projectUtils';
@@ -163,30 +165,42 @@ export default class Workspace extends React.Component {
   _renderHiddenRightColumnComponents() {
     const {
       currentProject,
+      hasErrors,
       onComponentToggle,
-      shouldShowCollapsedConsole,
+      title,
     } = this.props;
-    const rightColumnComponents = ['console'];
-    return rightColumnComponents.
+    // Errors take over the whole right side of the screen
+    if (hasErrors) {
+      return null;
+    }
+    return RIGHT_COLUMN_COMPONENTS.
       filter(component => (
         includes(currentProject.hiddenUIComponents, component)
       )).
       map((component) => {
         switch (component) {
           case 'console':
-            if (shouldShowCollapsedConsole) {
-              return (
-                <CollapsedComponent
-                  component="console"
-                  isRightJustified={false}
-                  key="console"
-                  projectKey={currentProject.projectKey}
-                  text={t('workspace.components.console')}
-                  onComponentUnhide={onComponentToggle}
-                />
-              );
-            }
-            return null;
+            return (
+              <CollapsedComponent
+                component="console"
+                isRightJustified={false}
+                key="console"
+                projectKey={currentProject.projectKey}
+                text={t('workspace.components.console')}
+                onComponentUnhide={onComponentToggle}
+              />
+            );
+          case 'preview':
+            return (
+              <CollapsedComponent
+                component="preview"
+                isRightJustified={false}
+                key="preview"
+                projectKey={currentProject.projectKey}
+                text={title}
+                onComponentUnhide={onComponentToggle}
+              />
+            );
           default:
             return null;
         }
@@ -197,6 +211,29 @@ export default class Workspace extends React.Component {
     return this.props.hiddenLanguages.length !== LANGUAGES.length;
   }
 
+  _shouldRenderRightColumn() {
+    const {
+      currentProject,
+      shouldRenderOutput,
+    } = this.props;
+    return shouldRenderOutput || some(RIGHT_COLUMN_COMPONENTS,
+      component => (
+        !includes(currentProject.hiddenUIComponents, component)
+      ));
+  }
+
+  _isEverythingHidden() {
+    return !this._shouldRenderLeftColumn() && !this._shouldRenderRightColumn();
+  }
+
+  _renderEverythingHidden() {
+    return (
+      <div className="environment__column">
+        {this._renderHiddenRightColumnComponents()}
+        {this._renderHiddenLanguages()}
+      </div>
+    );
+  }
   _renderEnvironment() {
     const {
       currentProject,
@@ -208,6 +245,7 @@ export default class Workspace extends React.Component {
       onResizableFlexDividerDrag,
       onStartDragColumnDivider,
       onStopDragColumnDivider,
+      shouldRenderOutput,
     } = this.props;
     if (isNull(currentProject)) {
       return <PopThrobber message={t('workspace.loading')} />;
@@ -218,7 +256,7 @@ export default class Workspace extends React.Component {
     return (
       <div className="environment">
         {this._shouldRenderLeftColumn() &&
-          <React.Fragment>
+          <>
             <div
               className="environment__column"
               ref={_handleEditorsRef}
@@ -227,6 +265,8 @@ export default class Workspace extends React.Component {
               <div className="environment__column-contents">
                 <div className="environment__column-contents-inner">
                   <EditorsColumn />
+                  {!this._shouldRenderRightColumn() &&
+                    this._renderHiddenRightColumnComponents()}
                   {this._renderHiddenLanguages()}
                 </div>
               </div>
@@ -246,25 +286,30 @@ export default class Workspace extends React.Component {
                 )}
               />
             </DraggableCore>
-          </React.Fragment>
+          </>
         }
-        <div
-          className="environment__column"
-          ref={_handleOutputRef}
-          style={prefix({
-            flexGrow: resizableFlexGrow.get(1),
-            pointerEvents: ignorePointerEvents ? 'none' : 'all',
-          })}
-        >
-          <div className="environment__column-contents">
-            <div className="environment__column-contents-inner">
-              <Output />
-              {this._renderHiddenRightColumnComponents()}
-              {!this._shouldRenderLeftColumn() &&
-                this._renderHiddenLanguages()}
+        {this._shouldRenderRightColumn() &&
+          <>
+            <div
+              className="environment__column"
+              ref={_handleOutputRef}
+              style={prefix({
+                flexGrow: resizableFlexGrow.get(1),
+                pointerEvents: ignorePointerEvents ? 'none' : 'all',
+              })}
+            >
+              <div className="environment__column-contents">
+                <div className="environment__column-contents-inner">
+                  {shouldRenderOutput && <Output />}
+                  {this._renderHiddenRightColumnComponents()}
+                  {!this._shouldRenderLeftColumn() &&
+                    this._renderHiddenLanguages()}
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
+          </>
+        }
+        {this._isEverythingHidden() && this._renderEverythingHidden()}
       </div>
     );
   }
@@ -290,14 +335,16 @@ export default class Workspace extends React.Component {
 
 Workspace.propTypes = {
   currentProject: PropTypes.object,
+  hasErrors: PropTypes.bool.isRequired,
   hiddenLanguages: PropTypes.array.isRequired,
   isAnyTopBarMenuOpen: PropTypes.bool.isRequired,
   isDraggingColumnDivider: PropTypes.bool.isRequired,
   isEditingInstructions: PropTypes.bool.isRequired,
   isFlexResizingSupported: PropTypes.bool.isRequired,
   resizableFlexGrow: ImmutablePropTypes.list.isRequired,
   resizableFlexRefs: PropTypes.array.isRequired,
-  shouldShowCollapsedConsole: PropTypes.bool.isRequired,
+  shouldRenderOutput: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
   onApplicationLoaded: PropTypes.func.isRequired,
   onClickInstructionsEditButton: PropTypes.func.isRequired,
   onComponentToggle: PropTypes.func.isRequired,
diff --git a/src/containers/Preview.js b/src/containers/Preview.js
@@ -10,10 +10,14 @@ import {
   consoleValueProduced,
   popOutProject,
   refreshPreview,
+  toggleComponent,
 } from '../actions';
 import {
   getCompiledProjects,
   getConsoleHistory,
+  getCurrentProjectKey,
+  getCurrentProjectPreviewTitle,
+  getHiddenUIComponents,
   isCurrentProjectSyntacticallyValid,
   isUserTyping,
 } from '../selectors';
@@ -22,10 +26,13 @@ function mapStateToProps(state) {
   return {
     compiledProjects: getCompiledProjects(state),
     consoleEntries: getConsoleHistory(state),
+    currentProjectKey: getCurrentProjectKey(state),
+    isOpen: !getHiddenUIComponents(state).includes('preview'),
     showingErrors: (
       !isUserTyping(state) &&
         !isCurrentProjectSyntacticallyValid(state)
     ),
+    title: getCurrentProjectPreviewTitle(state),
   };
 }
 
@@ -74,6 +81,10 @@ function mapDispatchToProps(dispatch) {
     onRuntimeError(error) {
       dispatch(addRuntimeError('javascript', error));
     },
+
+    onToggleVisible(projectKey) {
+      dispatch(toggleComponent(projectKey, 'preview'));
+    },
   };
 }
 
diff --git a/src/containers/Workspace.js b/src/containers/Workspace.js
@@ -1,13 +1,18 @@
 import {connect} from 'react-redux';
+import every from 'lodash-es/every';
 
 import Workspace from '../components/Workspace';
 import {
   getCurrentProject,
+  isCurrentlyValidating,
   isDraggingColumnDivider,
   isEditingInstructions,
+  getCurrentProjectPreviewTitle,
   getHiddenAndVisibleLanguages,
+  getHiddenUIComponents,
   getOpenTopBarMenu,
   isCurrentProjectSyntacticallyValid,
+  isUserTyping,
 } from '../selectors';
 import {
   toggleComponent,
@@ -17,16 +22,30 @@ import {
   startEditingInstructions,
 } from '../actions';
 import resizableFlex from '../higherOrderComponents/resizableFlex';
+import {RIGHT_COLUMN_COMPONENTS} from '../util/ui';
 
 function mapStateToProps(state) {
   const {hiddenLanguages} = getHiddenAndVisibleLanguages(state);
+  const isCurrentProjectValid = isCurrentProjectSyntacticallyValid(state);
+  const isCurrentProjectValidating = isCurrentlyValidating(state);
+  const hiddenUIComponents = getHiddenUIComponents(state);
+  const areAllRightColumnComponentsCollapsed = every(
+    RIGHT_COLUMN_COMPONENTS,
+    component => hiddenUIComponents.includes(component),
+  );
+  const shouldRenderOutput = !areAllRightColumnComponentsCollapsed ||
+    (!isCurrentProjectValid &&
+    !isCurrentProjectValidating &&
+    !isUserTyping(state));
   return {
     currentProject: getCurrentProject(state),
+    hasErrors: !isCurrentProjectValid,
     isAnyTopBarMenuOpen: Boolean(getOpenTopBarMenu(state)),
     isDraggingColumnDivider: isDraggingColumnDivider(state),
     isEditingInstructions: isEditingInstructions(state),
     hiddenLanguages,
-    shouldShowCollapsedConsole: isCurrentProjectSyntacticallyValid(state),
+    shouldRenderOutput,
+    title: getCurrentProjectPreviewTitle(state),
   };
 }
 
diff --git a/src/css/application.css b/src/css/application.css
@@ -761,7 +761,8 @@ body {
   float: left;
 }
 
-.preview__button_reset {
+.preview__button_reset,
+.preview__button_toggle-visibility {
   float: right;
 }
 
diff --git a/src/selectors/getCurrentProjectPreviewTitle.js b/src/selectors/getCurrentProjectPreviewTitle.js
@@ -0,0 +1,13 @@
+import {createSelector} from 'reselect';
+import get from 'lodash-es/get';
+
+import getCompiledProjects from './getCompiledProjects';
+
+export default createSelector(
+  [getCompiledProjects],
+  (compiledProjects) => {
+    const mostRecentCompiledProject = compiledProjects.last();
+    const title = get(mostRecentCompiledProject, 'title', '');
+    return title;
+  },
+);
diff --git a/src/selectors/index.js b/src/selectors/index.js
diff --git a/src/util/ui.js b/src/util/ui.js

Original file line number	Diff line number	Diff line change
`@@ -761,7 +761,8 @@ body {`
`761`	`761`	`float: left;`
`762`	`762`	`}`
`763`	`763`
`764`		`-.preview__button_reset {`
	`764`	`+.preview__button_reset,`
	`765`	`+.preview__button_toggle-visibility {`
`765`	`766`	`float: right;`
`766`	`767`	`}`
`767`	`768`