Toggle instructions hamburger menu item on state

Author: greenberga

locales/en/translation.json

@@ -4,7 +4,8 @@
     "export-gist": "Export Gist",
     "export-repo": "Export Repo",
     "share-to-classroom": "Share To Classroom",
-    "add-or-edit-instructions": "Add/Edit Instructions",
+    "add-instructions": "Add Instructions",
+    "edit-instructions": "Edit Instructions",
     "libraries": "Libraries",
     "load-project": "Your Projects",
     "new-project": "New Project",

src/components/TopBar/HamburgerMenu.jsx

@@ -12,6 +12,7 @@ const HamburgerMenu = createMenu({
   name: 'hamburger',
 
   renderItems({
+    hasInstructions,
     isEditingInstructions,
     isExperimental,
     isGistExportInProgress,
@@ -36,10 +37,15 @@ const HamburgerMenu = createMenu({
       if (isExperimental) {
         items.push(
           <MenuItem
+            isDisabled={isEditingInstructions}
             key="addOrEditInstructions"
             onClick={isEditingInstructions ? noop : onStartEditingInstructions}
           >
-            {t('top-bar.add-or-edit-instructions')}
+            {
+              hasInstructions ?
+                t('top-bar.edit-instructions') :
+                t('top-bar.add-instructions')
+            }
           </MenuItem>,
         );
       }
@@ -109,6 +115,7 @@ const HamburgerMenu = createMenu({
 
 
 HamburgerMenu.propTypes = {
+  hasInstructions: PropTypes.bool.isRequired,
   isClassroomExportInProgress: PropTypes.bool.isRequired,
   isEditingInstructions: PropTypes.bool.isRequired,
   isExperimental: PropTypes.bool.isRequired,

src/components/TopBar/createMenu.jsx

@@ -11,12 +11,13 @@ import React from 'react';
 import {closeTopBarMenu, toggleTopBarMenu} from '../../actions';
 import {getOpenTopBarMenu} from '../../selectors';
 
-export function MenuItem({children, isEnabled, onClick}) {
+export function MenuItem({children, isDisabled, isEnabled, onClick}) {
   return (
     <div
-      className={classnames('top-bar__menu-item',
-        {'top-bar__menu-item_active': isEnabled},
-      )}
+      className={classnames('top-bar__menu-item', {
+        'top-bar__menu-item_active': isEnabled,
+        'top-bar__menu-item_disabled': isDisabled,
+      })}
       onClick={onClick}
     >
       {children}
@@ -26,11 +27,13 @@ export function MenuItem({children, isEnabled, onClick}) {
 
 MenuItem.propTypes = {
   children: PropTypes.node.isRequired,
+  isDisabled: PropTypes.bool,
   isEnabled: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
 };
 
 MenuItem.defaultProps = {
+  isDisabled: false,
   isEnabled: false,
 };
 

src/components/TopBar/index.jsx

@@ -29,6 +29,7 @@ export default function TopBar({
   currentProjectKey,
   currentUser,
   enabledLibraries,
+  hasInstructions,
   isEditingInstructions,
   isExperimental,
   isGistExportInProgress,
@@ -94,6 +95,7 @@ export default function TopBar({
         onStartLogIn={onStartLogIn}
       />
       <HamburgerMenu
+        hasInstructions={hasInstructions}
         isClassroomExportInProgress={isClassroomExportInProgress}
         isEditingInstructions={isEditingInstructions}
         isExperimental={isExperimental}
@@ -115,6 +117,7 @@ TopBar.propTypes = {
   currentProjectKey: PropTypes.string,
   currentUser: PropTypes.object.isRequired,
   enabledLibraries: PropTypes.arrayOf(PropTypes.string).isRequired,
+  hasInstructions: PropTypes.bool.isRequired,
   isClassroomExportInProgress: PropTypes.bool.isRequired,
   isEditingInstructions: PropTypes.bool.isRequired,
   isExperimental: PropTypes.bool.isRequired,

src/containers/TopBar.js

@@ -2,6 +2,7 @@ import {connect} from 'react-redux';
 import TopBar from '../components/TopBar';
 import {
   getCurrentProjectKey,
+  getCurrentProjectInstructions,
   getCurrentUser,
   getCurrentValidationState,
   getEnabledLibraries,
@@ -36,6 +37,7 @@ function mapStateToProps(state) {
     currentProjectKey: getCurrentProjectKey(state),
     currentUser: getCurrentUser(state),
     enabledLibraries: getEnabledLibraries(state),
+    hasInstructions: Boolean(getCurrentProjectInstructions(state)),
     isEditingInstructions: isEditingInstructions(state),
     isExperimental: isExperimental(state),
     isGistExportInProgress: isGistExportInProgress(state),

src/css/application.css

@@ -285,6 +285,12 @@ body {
   font-weight: bold;
 }
 
+.top-bar__menu-item_disabled {
+  font-style: italic;
+  color: var(--color-gray);
+  cursor: default;
+}
+
 .top-bar__drop-down-button {
   padding-left: 0.5em;
 }