Merge pull request #40743 from code-dot-org/dtp_candidate_d0c3df98

DTP (Test > Production: d0c3df9)

apps/i18n/spritelab/en_us.json

@@ -156,7 +156,7 @@
   "spinBeforeClick": "Your sprite was spinning before you clicked on it. Make sure that your spin behavior is connected to this event. \n<xml><block type=\"gamelab_spriteClicked\"><title name=\"CONDITION\">\"when\"</title><value name=\"SPRITE\"><block type=\"gamelab_allSpritesWithAnimation\"><title name=\"ANIMATION\">\"blue alien\"</title></block></value></block></xml>",
   "createAtLeastTwoSprites": "You need to have two sprites. Make two sprites under the `when run` block.",
   "createAtLeastThreeSprites": "You need to have three sprites. Make three sprites under the `when run` block.",
-  "spriteNotClicked": "Make sure that you click on each sprite and that you have the right events in your workspace.",
+  "spriteNotClicked": "Make sure that you click on each sprite and that you have the right events in your workspace. <xml><block type=\"gamelab_spriteClicked\"><title name=\"CONDITION\">\"when\"</title></block></xml>",
   "startBehaviorWhenClicked": "Your new sprite needs to start a behavior when it is clicked.",
   "clickNewSprite": "Make sure you click on your new sprite and that it also has a `when clicked` event in your workspace.",
   "colorChangedBeforeKeyPress": "Your sprite changed color at the wrong time. Move the `change color` block under a `when key pressed` block.",

apps/src/applab/applab.js

@@ -306,19 +306,6 @@ Applab.getCode = function() {
   return studioApp().getCode();
 };
 
-/**
- * Helper function for levelbuilders to get the level html to copy into a widget
- * mode level.
- */
-Applab.getHtmlForWidgetMode = function() {
-  const dom = new DOMParser().parseFromString(Applab.levelHtml, 'text/html');
-  // Make screens the width of widget mode, not regular app mode
-  Array.from(dom.getElementsByClassName('screen')).forEach(
-    screen => (screen.style.width = `${applabConstants.WIDGET_WIDTH}px`)
-  );
-  return dom.getElementById('designModeViz').outerHTML;
-};
-
 Applab.getHtml = function() {
   // This method is called on autosave. If we're about to autosave, let's update
   // levelHtml to include our current state.

apps/src/code-studio/components/playzone.jsx

@@ -4,7 +4,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import color from '../../util/color';
-import msg from '@cdo/locale';
+import i18n from '@cdo/locale';
 import CreateSomething from './lessonExtras/CreateSomething';
 
 export default class PlayZone extends React.Component {
@@ -16,9 +16,9 @@ export default class PlayZone extends React.Component {
     return (
       <div style={styles.container}>
         <h1 style={styles.primaryHeader}>
-          {msg.playzonePrimaryHeader({stageName: this.props.stageName})}
+          {i18n.playzonePrimaryHeader({stageName: this.props.lessonName})}
         </h1>
-        <h4 style={styles.secondaryHeader}>{msg.playzoneSecondaryHeader()}</h4>
+        <h4 style={styles.secondaryHeader}>{i18n.playzoneSecondaryHeader()}</h4>
         <CreateSomething />
         <div className="farSide">
           <button
@@ -27,7 +27,7 @@ export default class PlayZone extends React.Component {
             onClick={this.props.onContinue}
             style={styles.continueButton}
           >
-            {msg.playzoneContinueButton()}
+            {i18n.playzoneContinueButton()}
           </button>
         </div>
       </div>
@@ -56,6 +56,6 @@ const styles = {
 };
 
 PlayZone.propTypes = {
-  stageName: PropTypes.string.isRequired,
+  lessonName: PropTypes.string.isRequired,
   onContinue: PropTypes.func.isRequired
 };

apps/src/code-studio/components/playzone.story.jsx

@@ -9,7 +9,7 @@ export default storybook => {
     .add(
       'default',
       withInfo('This is the PlayZone component.')(() => (
-        <PlayZone stageName="Test Stage" onContinue={() => {}} />
+        <PlayZone lessonName="Test Stage" onContinue={() => {}} />
       ))
     )
     .add(

apps/src/code-studio/components/progress/StageLockDialog.jsx → apps/src/code-studio/components/progress/LessonLockDialog.jsx

@@ -4,13 +4,13 @@ import Radium from 'radium';
 import {connect} from 'react-redux';
 import BaseDialog from '@cdo/apps/templates/BaseDialog';
 import progressStyles from './progressStyles';
-import {LockStatus, saveLockDialog} from '../../stageLockRedux';
+import {LockStatus, saveLockDialog} from '../../lessonLockRedux';
 import color from '../../../util/color';
 import commonMsg from '@cdo/locale';
 import SectionSelector from './SectionSelector';
 import {teacherDashboardUrl} from '@cdo/apps/templates/teacherDashboard/urlHelpers';
 
-class StageLockDialog extends React.Component {
+class LessonLockDialog extends React.Component {
   static propTypes = {
     isOpen: PropTypes.bool.isRequired,
     handleClose: PropTypes.func.isRequired,
@@ -54,7 +54,7 @@ class StageLockDialog extends React.Component {
 
   allowEditing = () => this.setAllLockStatus(LockStatus.Editable);
 
-  lockStage = () => this.setAllLockStatus(LockStatus.Locked);
+  lockLesson = () => this.setAllLockStatus(LockStatus.Locked);
 
   showAnswers = () => this.setAllLockStatus(LockStatus.ReadonlyAnswers);
 
@@ -129,7 +129,7 @@ class StageLockDialog extends React.Component {
                   <button
                     type="button"
                     style={progressStyles.orangeButton}
-                    onClick={this.lockStage}
+                    onClick={this.lockLesson}
                   >
                     {commonMsg.lockStage()}
                   </button>
@@ -153,7 +153,7 @@ class StageLockDialog extends React.Component {
                   <button
                     type="button"
                     style={progressStyles.orangeButton}
-                    onClick={this.lockStage}
+                    onClick={this.lockLesson}
                   >
                     {commonMsg.relockStage()}
                   </button>
@@ -325,17 +325,17 @@ const styles = {
   }
 };
 
-export const UnconnectedStageLockDialog = Radium(StageLockDialog);
+export const UnconnectedLessonLockDialog = Radium(LessonLockDialog);
 export default connect(
   state => ({
-    initialLockStatus: state.stageLock.lockStatus,
-    isOpen: !!state.stageLock.lockDialogStageId,
-    saving: state.stageLock.saving,
+    initialLockStatus: state.lessonLock.lockStatus,
+    isOpen: !!state.lessonLock.lockDialogLessonId,
+    saving: state.lessonLock.saving,
     selectedSectionId: state.teacherSections.selectedSectionId.toString()
   }),
   dispatch => ({
     saveDialog(sectionId, lockStatus) {
       dispatch(saveLockDialog(sectionId, lockStatus));
     }
   })
-)(UnconnectedStageLockDialog);
+)(UnconnectedLessonLockDialog);

apps/src/code-studio/components/progress/LessonProgress.story.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {createStore, combineReducers} from 'redux';
 import {Provider} from 'react-redux';
 import LessonProgress from './LessonProgress';
-import stageLock from '../../stageLockRedux';
+import lessonLock from '../../lessonLockRedux';
 import progress, {
   initProgress,
   mergeResults,
@@ -96,7 +96,7 @@ export default storybook => {
     onStageExtras,
     bonusCompleted
   ) => {
-    const store = createStore(combineReducers({progress, stageLock}));
+    const store = createStore(combineReducers({progress, lessonLock}));
     store.dispatch(
       initProgress({
         currentLevelId: currentLevelIndex

apps/src/code-studio/components/progress/ScriptOverview.jsx

@@ -68,7 +68,7 @@ class ScriptOverview extends React.Component {
     isRtl: PropTypes.bool.isRequired,
     sectionsForDropdown: PropTypes.arrayOf(sectionForDropdownShape).isRequired,
     currentCourseId: PropTypes.number,
-    hiddenStageState: PropTypes.object,
+    hiddenLessonState: PropTypes.object,
     selectedSectionId: PropTypes.number,
     userId: PropTypes.number
   };
@@ -111,7 +111,7 @@ class ScriptOverview extends React.Component {
       showRedirectWarning,
       redirectScriptUrl,
       versions,
-      hiddenStageState,
+      hiddenLessonState,
       selectedSectionId,
       courseName,
       showAssignButton,
@@ -139,7 +139,7 @@ class ScriptOverview extends React.Component {
     const isHiddenUnit =
       !!selectedSectionId &&
       !!scriptId &&
-      isScriptHiddenForSection(hiddenStageState, selectedSectionId, scriptId);
+      isScriptHiddenForSection(hiddenLessonState, selectedSectionId, scriptId);
 
     return (
       <div>
@@ -218,7 +218,7 @@ export default connect((state, ownProps) => ({
   viewAs: state.viewAs,
   isRtl: state.isRtl,
   currentCourseId: state.progress.courseId,
-  hiddenStageState: state.hiddenStage,
+  hiddenLessonState: state.hiddenStage,
   selectedSectionId: parseInt(state.teacherSections.selectedSectionId),
   sectionsForDropdown: sectionsForDropdown(
     state.teacherSections,

apps/src/code-studio/components/progress/TeacherPanel.jsx

@@ -5,7 +5,7 @@ import TeacherPanelContainer from '../TeacherPanelContainer';
 import SectionSelector from './SectionSelector';
 import ViewAsToggle from './ViewAsToggle';
 import FontAwesome from '@cdo/apps/templates/FontAwesome';
-import {fullyLockedStageMapping} from '../../stageLockRedux';
+import {fullyLockedLessonMapping} from '../../lessonLockRedux';
 import {ViewType} from '../../viewAsRedux';
 import {hasLockableStages} from '../../progressRedux';
 import {pageTypes} from '@cdo/apps/templates/teacherDashboard/teacherSectionsRedux';
@@ -245,16 +245,16 @@ const styles = {
 
 export const UnconnectedTeacherPanel = TeacherPanel;
 export default connect(state => {
-  const {stagesBySectionId, lockableAuthorized} = state.stageLock;
+  const {lessonsBySectionId, lockableAuthorized} = state.lessonLock;
   const {
     selectedSectionId,
     sectionsAreLoaded,
     sectionIds
   } = state.teacherSections;
-  const currentSection = stagesBySectionId[selectedSectionId];
+  const currentSection = lessonsBySectionId[selectedSectionId];
 
-  const fullyLocked = fullyLockedStageMapping(
-    state.stageLock.stagesBySectionId[selectedSectionId]
+  const fullyLocked = fullyLockedLessonMapping(
+    state.lessonLock.lessonsBySectionId[selectedSectionId]
   );
   const unlockedStageIds = Object.keys(currentSection || {}).filter(
     stageId => !fullyLocked[stageId]

apps/src/code-studio/initApp/loadApp.js

@@ -132,7 +132,7 @@ export function setupApp(appOptions) {
         }`;
         ReactDOM.render(
           <PlayZone
-            stageName={stageName}
+            lessonName={stageName}
             onContinue={() => {
               dialog.hide();
             }}

apps/src/code-studio/initializeCodeMirror.js

@@ -38,13 +38,20 @@ CodeMirrorSpellChecker({
  * @param {function} [options.callback] - onChange callback for editor
  * @param {boolean} [options.attachments] - whether to enable attachment
  *        uploading in this editor.
- * @param {function} [options.onUpdateLinting]
+ * @param {function} [options.onUpdateLinting] - callback called when linting is finished
+ * @param {function} [options.getAnnotations] - optional function to override linting behavior
  * @param {(string|Element)} [options.preview] - element or id of element to
  *        populate with a preview. If none specified, will look for an element
  *        by appending "_preview" to the id of the target element.
  */
 function initializeCodeMirror(target, mode, options = {}) {
-  let {callback, attachments, onUpdateLinting, preview} = options;
+  let {
+    callback,
+    attachments,
+    onUpdateLinting,
+    additionalAnnotations,
+    preview
+  } = options;
   let updatePreview;
 
   // Code mirror parses html using xml mode
@@ -86,6 +93,18 @@ function initializeCodeMirror(target, mode, options = {}) {
     }
   }
 
+  const getAnnotations = (text, options, cm) => {
+    const cmValidation = cm.getHelper(CodeMirror.Pos(0, 0), 'lint')(
+      text,
+      {},
+      cm
+    );
+    const additionalValidation = additionalAnnotations
+      ? additionalAnnotations(text, options, cm)
+      : [];
+    return [...cmValidation, ...additionalValidation];
+  };
+
   var editor = CodeMirror.fromTextArea(node, {
     mode: mode,
     backdrop: backdrop,
@@ -97,6 +116,7 @@ function initializeCodeMirror(target, mode, options = {}) {
     lineWrapping: true,
     gutters: ['CodeMirror-lint-markers'],
     lint: {
+      getAnnotations: additionalAnnotations ? getAnnotations : undefined,
       onUpdateLinting
     }
   });