Merge pull request #38539 from code-dot-org/dtp_candidate_890377b6

DTP (Test > Production: 890377b)
code-dot-org · Jan 13, 2021 · 13734fe · 13734fe
2 parents b103db3 + 385911f
commit 13734fe
Show file tree

Hide file tree

Showing 161 changed files with 4,641 additions and 1,029 deletions.
diff --git a/Gemfile b/Gemfile
@@ -256,7 +256,7 @@ gem 'aws-sdk-s3'
 gem 'aws-sdk-secretsmanager'
 
 # Lint tools
-group :development, :staging do
+group :development, :staging, :levelbuilder do
   gem 'haml_lint', require: false
   gem 'rubocop', '~> 0.52', require: false
   gem 'scss_lint', require: false

diff --git a/apps/package.json b/apps/package.json
@@ -48,7 +48,7 @@
     "@babel/preset-react": "^7.0.0",
     "@cdo/interpreted": "link:../dashboard/config/libraries",
     "@code-dot-org/artist": "0.2.1",
-    "@code-dot-org/blockly": "3.5.32",
+    "@code-dot-org/blockly": "3.5.33",
     "@code-dot-org/craft": "0.2.2",
     "@code-dot-org/dance-party": "1.0.1",
     "@code-dot-org/johnny-five": "0.11.1-cdo.2",

diff --git a/apps/src/code-studio/components/BubbleChoice.jsx b/apps/src/code-studio/components/BubbleChoice.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import i18n from '@cdo/locale';
 import color from '@cdo/apps/util/color';
 import {navigateToHref} from '@cdo/apps/utils';
 import SafeMarkdown from '@cdo/apps/templates/SafeMarkdown';
 import SublevelCard from './SublevelCard';
+import {levelTypeWithoutStatus} from '@cdo/apps/templates/progress/progressTypes';
 
 const MARGIN = 10;
 
@@ -29,27 +29,9 @@ const styles = {
 };
 
 export default class BubbleChoice extends React.Component {
-  static propTypes = {
-    level: PropTypes.shape({
-      display_name: PropTypes.string.isRequired,
-      description: PropTypes.string.isRequired,
-      previous_level_url: PropTypes.string,
-      redirect_url: PropTypes.string,
-      script_url: PropTypes.string,
-      sublevels: PropTypes.arrayOf(
-        PropTypes.shape({
-          id: PropTypes.number.isRequired,
-          display_name: PropTypes.string.isRequired,
-          description: PropTypes.string,
-          thumbnail_url: PropTypes.string,
-          url: PropTypes.string.isRequired,
-          position: PropTypes.number,
-          letter: PropTypes.string,
-          perfect: PropTypes.bool
-        })
-      )
-    })
-  };
+  // The bubble choice component doesn't need the status. It's
+  // only rendering the sublevel cards.
+  static propTypes = {level: levelTypeWithoutStatus};
 
   goToUrl = url => {
     navigateToHref(url + location.search);

diff --git a/apps/src/code-studio/components/SublevelCard.jsx b/apps/src/code-studio/components/SublevelCard.jsx
@@ -7,6 +7,7 @@ import FontAwesome from '@cdo/apps/templates/FontAwesome';
 import LessonExtrasFlagIcon from '@cdo/apps/templates/progress/LessonExtrasFlagIcon';
 import MazeThumbnail from '@cdo/apps/code-studio/components/lessonExtras/MazeThumbnail';
 import queryString from 'query-string';
+import {levelTypeWithoutStatus} from '@cdo/apps/templates/progress/progressTypes';
 
 const THUMBNAIL_IMAGE_SIZE = 200;
 const MARGIN = 10;
@@ -84,18 +85,8 @@ const styles = {
 export default class SublevelCard extends React.Component {
   static propTypes = {
     isLessonExtra: PropTypes.bool,
-    sublevel: PropTypes.shape({
-      id: PropTypes.number.isRequired,
-      display_name: PropTypes.string.isRequired,
-      description: PropTypes.string,
-      thumbnail_url: PropTypes.string,
-      url: PropTypes.string.isRequired,
-      position: PropTypes.number,
-      letter: PropTypes.string,
-      perfect: PropTypes.bool,
-      type: PropTypes.string,
-      maze_summary: PropTypes.object
-    }),
+    // sublevels generally use "perfect" instead of status
+    sublevel: levelTypeWithoutStatus,
     sectionId: PropTypes.number,
     userId: PropTypes.number
   };

diff --git a/apps/src/code-studio/components/header/HeaderMiddle.jsx b/apps/src/code-studio/components/header/HeaderMiddle.jsx
@@ -6,7 +6,6 @@ import ScriptName from './ScriptName';
 import LessonProgress from '../progress/LessonProgress';
 import HeaderPopup from './HeaderPopup';
 import HeaderFinish from './HeaderFinish';
-import {lessonExtrasUrl} from '@cdo/apps/code-studio/progressRedux';
 import _ from 'lodash';
 import $ from 'jquery';
 
@@ -33,9 +32,8 @@ class HeaderMiddle extends React.Component {
     appLoaded: PropTypes.bool,
     scriptNameData: PropTypes.object,
     lessonData: PropTypes.object,
-    lessonExtrasUrl: PropTypes.string,
     scriptData: PropTypes.object,
-    currentLevelId: PropTypes.string,
+    currentLevelId: PropTypes.number,
     linesOfCodeText: PropTypes.string,
     isRtl: PropTypes.bool
   };
@@ -339,9 +337,5 @@ class HeaderMiddle extends React.Component {
 export default connect(state => ({
   isRtl: state.isRtl,
   appLoadStarted: state.header.appLoadStarted,
-  appLoaded: state.header.appLoaded,
-  lessonExtrasUrl: lessonExtrasUrl(
-    state.progress,
-    state.progress.currentStageId
-  )
+  appLoaded: state.header.appLoaded
 }))(HeaderMiddle);
diff --git a/apps/src/code-studio/components/header/HeaderPopup.jsx b/apps/src/code-studio/components/header/HeaderPopup.jsx
@@ -26,7 +26,7 @@ export default class HeaderPopup extends Component {
   static propTypes = {
     scriptName: PropTypes.string,
     scriptData: PropTypes.object,
-    currentLevelId: PropTypes.string,
+    currentLevelId: PropTypes.number,
     linesOfCodeText: PropTypes.string,
     minimal: PropTypes.bool,
     windowHeight: PropTypes.number

diff --git a/apps/src/code-studio/components/progress/LessonProgress.jsx b/apps/src/code-studio/components/progress/LessonProgress.jsx
@@ -11,6 +11,7 @@ import {
 } from '@cdo/apps/code-studio/progressRedux';
 import ProgressBubble from '@cdo/apps/templates/progress/ProgressBubble';
 import {levelType} from '@cdo/apps/templates/progress/progressTypes';
+import {LevelKind} from '@cdo/apps/util/sharedConstants';
 import $ from 'jquery';
 
 const styles = {
@@ -78,10 +79,11 @@ class LessonProgress extends Component {
   static propTypes = {
     levels: PropTypes.arrayOf(levelType).isRequired,
     lessonExtrasUrl: PropTypes.string,
-    onLessonExtras: PropTypes.bool,
+    isLessonExtras: PropTypes.bool,
     lessonTrophyEnabled: PropTypes.bool,
     width: PropTypes.number,
-    setDesiredWidth: PropTypes.func
+    setDesiredWidth: PropTypes.func,
+    currentPageNumber: PropTypes.number
   };
 
   getFullWidth() {
@@ -160,7 +162,12 @@ class LessonProgress extends Component {
   }
 
   render() {
-    const {lessonExtrasUrl, onLessonExtras, lessonTrophyEnabled} = this.props;
+    const {
+      currentPageNumber,
+      lessonExtrasUrl,
+      isLessonExtras,
+      lessonTrophyEnabled
+    } = this.props;
     let levels = this.props.levels;
 
     // Only puzzle levels (non-concept levels) should count towards mastery.
@@ -194,29 +201,37 @@ class LessonProgress extends Component {
             style={styles.inner}
           >
             {lessonTrophyEnabled && <div style={styles.spacer} />}
-            {levels.map((level, index) => (
-              <div
-                key={index}
-                ref={level.isCurrentLevel ? 'currentLevel' : null}
-                style={{
-                  ...(level.isUnplugged &&
-                    level.isCurrentLevel &&
-                    styles.pillContainer)
-                }}
-              >
-                <ProgressBubble
-                  level={level}
-                  disabled={false}
-                  smallBubble={!level.isCurrentLevel}
-                  lessonTrophyEnabled={lessonTrophyEnabled}
-                />
-              </div>
-            ))}
+            {levels.map((level, index) => {
+              let isCurrent = level.isCurrentLevel;
+              if (
+                isCurrent &&
+                level.kind === LevelKind.assessment &&
+                level.pageNumber
+              ) {
+                isCurrent = currentPageNumber === level.pageNumber;
+              }
+              return (
+                <div
+                  key={index}
+                  ref={isCurrent ? 'currentLevel' : null}
+                  style={{
+                    ...(level.isUnplugged && isCurrent && styles.pillContainer)
+                  }}
+                >
+                  <ProgressBubble
+                    level={level}
+                    disabled={false}
+                    smallBubble={!isCurrent}
+                    lessonTrophyEnabled={lessonTrophyEnabled}
+                  />
+                </div>
+              );
+            })}
             {lessonExtrasUrl && !lessonTrophyEnabled && (
-              <div ref={onLessonExtras ? 'currentLevel' : null}>
+              <div ref={isLessonExtras ? 'currentLevel' : null}>
                 <LessonExtrasProgressBubble
                   lessonExtrasUrl={lessonExtrasUrl}
-                  perfect={onLessonExtras}
+                  perfect={isLessonExtras}
                 />
               </div>
             )}
@@ -241,5 +256,6 @@ export default connect(state => ({
     state.progress,
     state.progress.currentStageId
   ),
-  onLessonExtras: state.progress.currentLevelId === 'stage_extras'
+  isLessonExtras: state.progress.isLessonExtras,
+  currentPageNumber: state.progress.currentPageNumber
 }))(LessonProgress);
diff --git a/apps/src/code-studio/components/progress/SelectedStudentInfo.jsx b/apps/src/code-studio/components/progress/SelectedStudentInfo.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import i18n from '@cdo/locale';
 import {TeacherPanelProgressBubble} from '@cdo/apps/code-studio/components/progress/TeacherPanelProgressBubble';
 import Button from '@cdo/apps/templates/Button';
+import {levelType} from '@cdo/apps/templates/progress/progressTypes';
 import {LevelStatus} from '@cdo/apps/util/sharedConstants';
 import Radium from 'radium';
 import FontAwesome from '@cdo/apps/templates/FontAwesome';
@@ -47,7 +48,7 @@ export class SelectedStudentInfo extends React.Component {
   static propTypes = {
     students: PropTypes.arrayOf(studentShape).isRequired,
     selectedStudent: PropTypes.object,
-    level: PropTypes.object,
+    level: levelType,
     onSelectUser: PropTypes.func.isRequired,
     getSelectedUserId: PropTypes.func.isRequired
   };

diff --git a/apps/src/code-studio/components/progress/StudentTable.jsx b/apps/src/code-studio/components/progress/StudentTable.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Radium from 'radium';
 import color from '@cdo/apps/util/color';
 import i18n from '@cdo/locale';
+import {levelType} from '@cdo/apps/templates/progress/progressTypes';
 import {TeacherPanelProgressBubble} from '@cdo/apps/code-studio/components/progress/TeacherPanelProgressBubble';
 import FontAwesome from '@cdo/apps/templates/FontAwesome';
 
@@ -62,7 +63,7 @@ class StudentTable extends React.Component {
     students: PropTypes.arrayOf(studentShape).isRequired,
     onSelectUser: PropTypes.func.isRequired,
     getSelectedUserId: PropTypes.func.isRequired,
-    levels: PropTypes.array,
+    levels: PropTypes.arrayOf(levelType),
     sectionId: PropTypes.number,
     scriptName: PropTypes.string
   };

diff --git a/apps/src/code-studio/components/progress/TeacherPanelProgressBubble.jsx b/apps/src/code-studio/components/progress/TeacherPanelProgressBubble.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import color from '@cdo/apps/util/color';
 import FontAwesome from '@cdo/apps/templates/FontAwesome';
 import {
@@ -8,6 +7,7 @@ import {
   levelProgressStyle
 } from '@cdo/apps/templates/progress/progressStyles';
 import {LevelStatus} from '@cdo/apps/util/sharedConstants';
+import {levelType} from '@cdo/apps/templates/progress/progressTypes';
 
 /**
  * A TeacherPanelProgressBubble represents progress for a specific level in the TeacherPanel. It can be a circle
@@ -53,7 +53,7 @@ const styles = {
 
 export class TeacherPanelProgressBubble extends React.Component {
   static propTypes = {
-    level: PropTypes.object.isRequired
+    level: levelType.isRequired
   };
 
   render() {

diff --git a/apps/src/code-studio/header.js b/apps/src/code-studio/header.js
@@ -56,23 +56,27 @@ const PUZZLE_PAGE_NONE = -1;
  *   }>
  * }}
  * @param {object} progressData
- * @param {string} currentLevelId
- * @param {number} puzzlePage
+ * @param {number} currentLevelId
+ * @param {number} currentPageNumber The page we are on if this is a multi-
+ *   page level
  * @param {boolean} signedIn True/false if we know the sign in state of the
  *   user, null otherwise
  * @param {boolean} stageExtrasEnabled Whether this user is in a section with
  *   stageExtras enabled for this script
+ * @param {boolean} isLessonExtras Boolean indicating we are not on a script
+ *   level and therefore are on lesson extras
  */
 header.build = function(
   scriptData,
   lessonGroupData,
   lessonData,
   progressData,
   currentLevelId,
-  puzzlePage,
+  currentPageNumber,
   signedIn,
   stageExtrasEnabled,
   scriptNameData,
+  isLessonExtras,
   hasAppOptions
 ) {
   const store = getStore();
@@ -86,8 +90,7 @@ header.build = function(
   progressData = progressData || {};
 
   const linesOfCodeText = progressData.linesOfCodeText;
-
-  let saveAnswersBeforeNavigation = puzzlePage !== PUZZLE_PAGE_NONE;
+  let saveAnswersBeforeNavigation = currentPageNumber !== PUZZLE_PAGE_NONE;
 
   // Set up the store immediately.
   progress.generateStageProgress(
@@ -98,7 +101,9 @@ header.build = function(
     currentLevelId,
     saveAnswersBeforeNavigation,
     signedIn,
-    stageExtrasEnabled
+    stageExtrasEnabled,
+    isLessonExtras,
+    currentPageNumber
   );
 
   // Hold off on rendering HeaderMiddle.  This will allow the "app load"