Merge pull request #35175 from code-dot-org/levelbuilder

DTS (Levelbuilder > Staging) [robo-dts]
code-dot-org · Jun 5, 2020 · e815188 · e815188
2 parents 9ace5b0 + 2291371
commit e815188
Show file tree

Hide file tree

Showing 15 changed files with 208 additions and 74 deletions.
diff --git a/apps/i18n/common/en_us.json b/apps/i18n/common/en_us.json
@@ -229,6 +229,7 @@
   "changeUserTypeModal_save_teacher": "Update to teacher account",
   "changeUserTypeModal_title": "Update account type",
   "changeUserTypeModal_unexpectedError": "An unexpected error has occurred.  Please wait a moment and try again.",
+  "choiceLevel": "Choice level",
   "choose": "Choose",
   "chooseActivity": "Choose from the following activities:",
   "chooseColumn": "Choose a column from \"{table}\"",

diff --git a/apps/src/code-studio/progressRedux.js b/apps/src/code-studio/progressRedux.js
@@ -520,13 +520,13 @@ const isCurrentLevel = (currentLevelId, level) => {
  * state.levelProgress
  */
 const levelWithStatus = (
-  {levelProgress, levelPairing = {}, currentLevelId},
+  {levelProgress, levelPairing = {}, currentLevelId, isSublevel = false},
   level
 ) => {
-  if (level.kind !== LevelKind.unplugged) {
+  if (level.kind !== LevelKind.unplugged && !isSublevel) {
     if (!level.title || typeof level.title !== 'number') {
       throw new Error(
-        'Expect all non-unplugged levels to have a numerical title'
+        'Expect all non-unplugged, non-bubble choice sublevel, levels to have a numerical title'
       );
     }
   }
@@ -549,9 +549,22 @@ export const levelsByLesson = ({
   currentLevelId
 }) =>
   stages.map(stage =>
-    stage.levels.map(level =>
-      levelWithStatus({levelProgress, levelPairing, currentLevelId}, level)
-    )
+    stage.levels.map(level => {
+      let statusLevel = levelWithStatus(
+        {levelProgress, levelPairing, currentLevelId},
+        level
+      );
+
+      if (statusLevel.sublevels) {
+        statusLevel.sublevels = level.sublevels.map(sublevel =>
+          levelWithStatus(
+            {levelProgress, levelPairing, currentLevelId, isSublevel: true},
+            sublevel
+          )
+        );
+      }
+      return statusLevel;
+    })
   );
 
 /**
@@ -608,9 +621,11 @@ export function statusForLevel(level, levelProgress) {
   // for each uid). When locked, they will end up not having a per-uid
   // test result, but will have a LOCKED_RESULT for the LevelGroup (which
   // is tracked by ids)
+  // BubbleChoice sublevels will have a level_id
   // Worth noting that in the majority of cases, ids will be a single
   // id here
-  const id = level.uid || bestResultLevelId(level.ids, levelProgress);
+  const id =
+    level.uid || level.level_id || bestResultLevelId(level.ids, levelProgress);
   let status = activityCssClass(levelProgress[id]);
   if (
     level.uid &&

diff --git a/apps/src/templates/progress/ProgressBubble.jsx b/apps/src/templates/progress/ProgressBubble.jsx
@@ -59,7 +59,8 @@ const styles = {
     width: SMALL_DOT_SIZE,
     height: SMALL_DOT_SIZE,
     borderRadius: SMALL_DOT_SIZE,
-    fontSize: 0
+    fontSize: 0,
+    alignItems: 'none'
   },
   smallDiamond: {
     width: SMALL_DIAMOND_SIZE,

diff --git a/apps/src/templates/progress/ProgressBubbleSet.jsx b/apps/src/templates/progress/ProgressBubbleSet.jsx
@@ -27,6 +27,9 @@ const styles = {
     // dot size, plus borders, plus margin, minus our height of "background"
     top: (DOT_SIZE + 4 + 6 - 10) / 2
   },
+  backgroundSublevel: {
+    top: 4
+  },
   backgroundDiamond: {
     top: (DIAMOND_DOT_SIZE + 4 + 12 - 10) / 2
   },
@@ -85,48 +88,69 @@ class ProgressBubbleSet extends React.Component {
     return false;
   };
 
-  render() {
+  renderBubble = (level, index, isSublevel) => {
     const {
       levels,
-      style,
       selectedSectionId,
       selectedStudentId,
       hideAssessmentIcon
     } = this.props;
 
+    return (
+      <div style={styles.withBackground} key={index}>
+        <div
+          style={[
+            styles.background,
+            level.isConceptLevel && styles.backgroundDiamond,
+            isSublevel && styles.backgroundSublevel,
+            level.isUnplugged && styles.backgroundPill,
+            !isSublevel && index === 0 && styles.backgroundFirst,
+            !level.sublevels &&
+              index === levels.length - 1 &&
+              styles.backgroundLast
+          ]}
+        />
+        <div
+          style={[
+            styles.container,
+            level.isUnplugged && styles.pillContainer,
+            level.isConceptLevel && styles.diamondContainer
+          ]}
+        >
+          <ProgressBubble
+            level={level}
+            disabled={this.bubbleDisabled(level)}
+            smallBubble={isSublevel}
+            selectedSectionId={selectedSectionId}
+            selectedStudentId={selectedStudentId}
+            hideToolTips={this.props.hideToolTips}
+            pairingIconEnabled={this.props.pairingIconEnabled}
+            hideAssessmentIcon={hideAssessmentIcon}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  render() {
+    const {levels, style} = this.props;
     return (
       <div style={{...styles.main, ...style}}>
-        {levels.map((level, index) => (
-          <div style={styles.withBackground} key={index}>
-            <div
-              style={[
-                styles.background,
-                level.isConceptLevel && styles.backgroundDiamond,
-                level.isUnplugged && styles.backgroundPill,
-                index === 0 && styles.backgroundFirst,
-                index === levels.length - 1 && styles.backgroundLast
-              ]}
-            />
-            <div
-              style={[
-                styles.container,
-                level.isUnplugged && styles.pillContainer,
-                level.isConceptLevel && styles.diamondContainer
-              ]}
-            >
-              <ProgressBubble
-                level={level}
-                disabled={this.bubbleDisabled(level)}
-                smallBubble={false}
-                selectedSectionId={selectedSectionId}
-                selectedStudentId={selectedStudentId}
-                hideToolTips={this.props.hideToolTips}
-                pairingIconEnabled={this.props.pairingIconEnabled}
-                hideAssessmentIcon={hideAssessmentIcon}
-              />
-            </div>
-          </div>
-        ))}
+        {levels.map((level, index) => {
+          return (
+            <span key={index}>
+              {this.renderBubble(level, index, false)}
+              {level.sublevels &&
+                level.sublevels.map((sublevel, index) => {
+                  return (
+                    <span key={index}>
+                      {this.renderBubble(sublevel, index, true)}
+                    </span>
+                  );
+                })}
+            </span>
+          );
+        })}
       </div>
     );
   }

diff --git a/apps/src/templates/progress/ProgressLegend.jsx b/apps/src/templates/progress/ProgressLegend.jsx
@@ -217,13 +217,13 @@ export default class ProgressLegend extends Component {
               </div>
             </TD>
             <TD style={styles.rightBorder}>
-              <div style={styles.iconAndTextDiv}>
+              <div style={styles.iconAndTextDivTop}>
                 <FontAwesome icon="list-ul" style={styles.icon} />
                 {i18n.question()}
               </div>
-              {/* Blank space to keep spacing consistent */}
               <div style={styles.conAndTextDivBottom}>
-                <FontAwesome icon="" style={styles.icon} />{' '}
+                <FontAwesome icon="sitemap" style={styles.icon} />
+                {i18n.choiceLevel()}
               </div>
             </TD>
             <TD rowSpan={secondRowRowSpan}>

diff --git a/apps/src/templates/progress/progressHelpers.js b/apps/src/templates/progress/progressHelpers.js
@@ -178,6 +178,8 @@ export const processedLevel = level => {
     isUnplugged: level.display_as_unplugged,
     levelNumber: level.kind === LevelKind.unplugged ? undefined : level.title,
     isConceptLevel: level.is_concept_level,
-    bonus: level.bonus
+    bonus: level.bonus,
+    sublevels: level.sublevels,
+    bubbleChoiceLetter: level.letter
   };
 };
diff --git a/apps/src/templates/progress/progressTypes.js b/apps/src/templates/progress/progressTypes.js
@@ -8,7 +8,8 @@ export const levelType = PropTypes.shape({
   isUnplugged: PropTypes.bool,
   levelNumber: PropTypes.number,
   isCurrentLevel: PropTypes.bool,
-  isConceptLevel: PropTypes.bool
+  isConceptLevel: PropTypes.bool,
+  sublevels: PropTypes.arrayOf(PropTypes.object)
 });
 
 /**

diff --git a/apps/src/templates/sectionProgress/detail/VirtualizedDetailView.jsx b/apps/src/templates/sectionProgress/detail/VirtualizedDetailView.jsx
@@ -169,17 +169,36 @@ class VirtualizedDetailView extends Component {
         )}
         {rowIndex === 1 && columnIndex >= 1 && (
           <span style={styles.bubbleSet}>
-            {scriptData.stages[stageIdIndex].levels.map((level, i) => (
-              <FontAwesome
-                icon={getIconForLevel(level, true)}
-                style={
-                  level.isUnplugged
-                    ? progressStyles.unpluggedIcon
-                    : progressStyles.icon
-                }
-                key={i}
-              />
-            ))}
+            {scriptData.stages[stageIdIndex].levels.map((level, i) => {
+              return (
+                <span key={i}>
+                  <FontAwesome
+                    icon={getIconForLevel(level, true)}
+                    style={
+                      level.isUnplugged
+                        ? progressStyles.unpluggedIcon
+                        : progressStyles.icon
+                    }
+                  />
+                  {level.sublevels &&
+                    level.sublevels.map((sublevel, i) => {
+                      return (
+                        <span
+                          className="filler"
+                          key={i}
+                          style={{
+                            width: 17,
+                            display: 'inline-block',
+                            color: color.background_gray
+                          }}
+                        >
+                          .
+                        </span>
+                      );
+                    })}
+                </span>
+              );
+            })}
           </span>
         )}
       </div>

diff --git a/apps/src/templates/sectionProgress/sectionProgressRedux.js b/apps/src/templates/sectionProgress/sectionProgressRedux.js
@@ -334,6 +334,11 @@ export const getColumnWidthsForDetailView = state => {
         // Circle bubble
         width = width + PROGRESS_BUBBLE_WIDTH;
       }
+      if (levels[levelIndex].sublevels) {
+        // TODO: import SMALL_DOT_SIZE from progressStyles
+        // TODO: make consistent with multiGridConstants
+        width = width + levels[levelIndex].sublevels.length * 18;
+      }
     }
     columnLengths.push(width || 0);
   }