Instructions component

* Change `<Dashboard>` to `<Instructions>`
* Component is visible by default if instructions are present
* Can be hidden by clicking instructions bar; uses same mechanism as
  minimizing editors etc.
* Neither bar nor instructions appear at all if there are no
  instructions in the project

Author: Mat Brown

src/actions/index.js

@@ -16,6 +16,7 @@ import {
   toggleLibrary,
   hideComponent,
   unhideComponent,
+  toggleComponent,
   updateProjectSource,
 } from './projects';
 
@@ -44,10 +45,6 @@ import {
   userLoggedOut,
 } from './user';
 
-function toggleDashboard() {
-  return {type: 'DASHBOARD_TOGGLED'};
-}
-
 export {
   createProject,
   createSnapshot,
@@ -59,7 +56,7 @@ export {
   addRuntimeError,
   hideComponent,
   unhideComponent,
-  toggleDashboard,
+  toggleComponent,
   focusLine,
   editorFocusedRequestedLine,
   dragRowDivider,

src/actions/projects.js

@@ -36,6 +36,12 @@ export const unhideComponent = createAction(
   (_projectKey, _componentName, timestamp = Date.now()) => ({timestamp}),
 );
 
+export const toggleComponent = createAction(
+  'TOGGLE_COMPONENT',
+  (projectKey, componentName) => ({projectKey, componentName}),
+  (_projectKey, _componentName, timestamp = Date.now()) => ({timestamp}),
+);
+
 export const gistImported = createAction(
   'GIST_IMPORTED',
   (projectKey, gistData) => ({projectKey, gistData}),

src/components/Dashboard.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import remark from 'remark';
+import remarkReact from 'remark-react';
+import classnames from 'classnames';
+
+export default function Instructions({instructions, isOpen}) {
+  if (!instructions || !isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classnames(
+        'layout__instructions',
+        'instructions',
+        'u__flex-container',
+        'u__flex-container_column',
+      )}
+    >
+      {remark().use(remarkReact).processSync(instructions).contents}
+    </div>
+  );
+}
+
+Instructions.propTypes = {
+  instructions: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+};

src/components/Instructions.jsx

@@ -6,6 +6,7 @@ import values from 'lodash/values';
 import bindAll from 'lodash/bindAll';
 import includes from 'lodash/includes';
 import isNull from 'lodash/isNull';
+import get from 'lodash/get';
 import partial from 'lodash/partial';
 import map from 'lodash/map';
 import {t} from 'i18next';
@@ -24,24 +25,23 @@ import {
   userLoggedOut,
   hideComponent,
   unhideComponent,
-  toggleDashboard,
   focusLine,
   editorFocusedRequestedLine,
   dragRowDivider,
   dragColumnDivider,
   startDragColumnDivider,
   stopDragColumnDivider,
+  toggleComponent,
   applicationLoaded,
 
 } from '../actions';
 
 import {isPristineProject} from '../util/projectUtils';
 import {getCurrentProject} from '../selectors';
 
-import {TopBar, Dashboard, NotificationList} from '../containers';
+import {TopBar, Instructions, NotificationList} from '../containers';
 import EditorsColumn from './EditorsColumn';
 import Output from './Output';
-import Sidebar from './Sidebar';
 import PopThrobber from './PopThrobber';
 
 function mapStateToProps(state) {
@@ -64,6 +64,7 @@ class Workspace extends React.Component {
     bindAll(
       this,
       '_handleUnload',
+      '_handleClickInstructionsBar',
       '_handleComponentUnhide',
       '_handleComponentHide',
       '_handleDividerDrag',
@@ -72,7 +73,6 @@ class Workspace extends React.Component {
       '_handleEditorInput',
       '_handleEditorsDividerDrag',
       '_handleErrorClick',
-      '_handleToggleDashboard',
       '_handleRequestedLineFocused',
       '_storeDividerRef',
       '_storeColumnRef',
@@ -185,10 +185,6 @@ class Workspace extends React.Component {
     );
   }
 
-  _handleToggleDashboard() {
-    this.props.dispatch(toggleDashboard());
-  }
-
   _handleEditorsDividerDrag(data) {
     this.props.dispatch(dragRowDivider(data));
   }
@@ -204,14 +200,24 @@ class Workspace extends React.Component {
     this.props.dispatch(editorFocusedRequestedLine());
   }
 
-  _renderSidebar() {
+  _handleClickInstructionsBar() {
+    this.props.dispatch(toggleComponent(
+      get(this.props, ['currentProject', 'projectKey']),
+      'instructions',
+    ));
+  }
+
+  _renderInstructionsBar() {
+    if (!get(this.props, ['currentProject', 'instructions'])) {
+      return null;
+    }
+
     return (
-      <div className="layout__sidebar">
-        <Sidebar
-          dashboardIsOpen={this.props.ui.dashboard.isOpen}
-          validationState={this._getOverallValidationState()}
-          onToggleDashboard={this._handleToggleDashboard}
-        />
+      <div
+        className="layout__instructions-bar"
+        onClick={this._handleClickInstructionsBar}
+      >
+        <span className="u__icon">&#xf05a;</span>
       </div>
     );
   }
@@ -290,8 +296,8 @@ class Workspace extends React.Component {
         <TopBar />
         <NotificationList />
         <div className="layout__columns">
-          <Dashboard />
-          {this._renderSidebar()}
+          <Instructions />
+          {this._renderInstructionsBar()}
           <div className="workspace layout__main">
             {this._renderEnvironment()}
           </div>

src/components/Sidebar.jsx

@@ -1,12 +1,12 @@
-import Dashboard from './Dashboard';
+import Instructions from './Instructions';
 import ErrorReport from './ErrorReport';
 import NotificationList from './NotificationList';
 import Preview from './Preview';
 import TopBar from './TopBar';
 import ProjectPreview from './ProjectPreview';
 
 export {
-  Dashboard,
+  Instructions,
   ErrorReport,
   NotificationList,
   Preview,

src/components/Workspace.jsx

@@ -1,17 +1,17 @@
 import {connect} from 'react-redux';
-import {Dashboard} from '../components';
+import {Instructions} from '../components';
 import {
   getCurrentProjectInstructions,
-  isDashboardOpen,
+  getHiddenUIComponents,
 } from '../selectors';
 
 function mapStateToProps(state) {
   return {
     instructions: getCurrentProjectInstructions(state),
-    isOpen: isDashboardOpen(state),
+    isOpen: !getHiddenUIComponents(state).includes('instructions'),
   };
 }
 
 export default connect(
   mapStateToProps,
-)(Dashboard);
+)(Instructions);

src/components/index.js

@@ -10,7 +10,6 @@ import {
   getEnabledLibraries,
   getOpenTopBarMenu,
   getAllProjectKeys,
-  isDashboardOpen,
   isExperimental,
   isGistExportInProgress,
   isSnapshotInProgress,
@@ -24,7 +23,6 @@ import {
   exportGist,
   exportRepo,
   notificationTriggered,
-  toggleDashboard,
   toggleEditorTextSize,
   toggleLibrary,
   toggleTopBarMenu,
@@ -41,7 +39,6 @@ function mapStateToProps(state) {
     enabledLibraries: getEnabledLibraries(state),
     isExperimental: isExperimental(state),
     isGistExportInProgress: isGistExportInProgress(state),
-    isHamburgerMenuActive: isDashboardOpen(state),
     isSnapshotInProgress: isSnapshotInProgress(state),
     isTextSizeLarge: isTextSizeLarge(state),
     isUserAuthenticated: isUserAuthenticated(state),
@@ -54,10 +51,6 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    onClickHamburgerMenu() {
-      dispatch(toggleDashboard());
-    },
-
     onClickMenu(menuKey) {
       dispatch(toggleTopBarMenu(menuKey));
     },

src/containers/Dashboard.js src/containers/Instructions.jssrc/containers/Dashboard.js renamed to src/containers/Instructions.js

@@ -1,13 +1,13 @@
-import Dashboard from './Dashboard';
 import ErrorReport from './ErrorReport';
+import Instructions from './Instructions';
 import NotificationList from './NotificationList';
 import Preview from './Preview';
 import ProjectPreview from './ProjectPreview';
 import TopBar from './TopBar';
 
 export {
-  Dashboard,
   ErrorReport,
+  Instructions,
   NotificationList,
   Preview,
   ProjectPreview,