Merge pull request #20190 from code-dot-org/dtl_candidate_4aa23197

.circleci/config.yml

@@ -80,7 +80,6 @@ jobs:
           command: |
             echo "
             bundler_use_sudo: false
-            npm_use_sudo: false
             properties_encryption_key: $PROPERTIES_ENCRYPTION_KEY
             applitools_eyes_api_key: $APPLITOOLS_KEY
             saucelabs_username: $SAUCE_USERNAME

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
   "plugins": [
     "react",
     "mocha",
+    "babel",
   ],
   "extends": [
     "eslint:recommended",
@@ -18,6 +19,7 @@ module.exports = {
   },
   "rules": {
     "array-bracket-spacing": ["error", "never"],
+    "babel/semi": "error", // autofixable
     "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
     "comma-dangle": "off",
     "curly": "error",
@@ -48,7 +50,7 @@ module.exports = {
     "react/no-render-return-value": "off", // TODO: turn this on
     "react/self-closing-comp": "error",
     "react/wrap-multilines": "error", // autofixable
-    "semi": "error",
+    "semi": "off", // enforced by babel/semi
     "space-before-function-paren": ["error", {
       "anonymous": "always",
       "named": "never"

.rubocop_todo.yml

@@ -109,11 +109,6 @@ Lint/ShadowedArgument:
 Lint/UnneededDisable:
   Enabled: false
 
-# Offense count: 1
-# Cop supports --auto-correct.
-Lint/UnneededRequireStatement:
-  Enabled: false
-
 # Offense count: 70
 # Cop supports --auto-correct.
 # Configuration parameters: AllowUnusedKeywordArguments, IgnoreEmptyMethods.
@@ -124,11 +119,6 @@ Lint/UnusedMethodArgument:
 Lint/UriEscapeUnescape:
   Enabled: false
 
-# Offense count: 1
-# Cop supports --auto-correct.
-Lint/UriRegexp:
-  Enabled: false
-
 # Offense count: 7
 # Configuration parameters: EnforcedStyle.
 # SupportedStyles: lowercase, uppercase
@@ -141,12 +131,6 @@ Naming/HeredocDelimiterCase:
 Naming/HeredocDelimiterNaming:
   Enabled: false
 
-# Offense count: 2
-# Configuration parameters: EnforcedStyle.
-# SupportedStyles: snake_case, camelCase
-Naming/VariableName:
-  Enabled: false
-
 # Offense count: 173
 # Configuration parameters: EnforcedStyle.
 # SupportedStyles: snake_case, normalcase, non_integer

apps/i18n/common/en_us.json

@@ -434,6 +434,7 @@
   "errorRequiredParamsMissing": "Create a parameter for your function by clicking \"edit\" and adding the necessary parameters. Drag the new parameter blocks into your function definition.",
   "errorUnusedFunction": "You created a function, but never used it on your workspace! Click on \"Functions\" in the toolbox and make sure you use it in your program.",
   "errorUnusedParam": "You added a parameter block, but didn't use it in the definition. Make sure to use your parameter by clicking \"edit\" and placing the parameter block inside the green block.",
+  "exactNumberOfBlocks": "Only {numBlocks, plural, one {1 block} other {# blocks}} used!",
   "exampleErrorMessage": "The function {functionName} has one or more examples that need adjusting. Make sure they match your definition and answer the question.",
   "examplesFailedOnClose": "One or more of your examples do not match your definition. Check your examples before closing",
   "explainLessonExtras": "When Lesson Extras is on, students will end each lesson with some bonus challenges and creative projects rather than being automatically advanced to the next lesson. This feature gives students the opportunity to expand their knowledge and further practice, without getting ahead of their classmates.",
@@ -450,6 +451,7 @@
   "extraTopBlocks": "You have unattached blocks.",
   "extraTopBlocksWhenRun": "You have unattached blocks. Did you mean to attach these to the \"when run\" block?",
   "featured": "Featured",
+  "fewerNumberOfBlocks": "Fewer than {numBlocks, plural, one {1 block} other {# blocks}} used!",
   "filterByStudent": "Filter by student:",
   "finalStage": "Congratulations! You have completed the final puzzle.",
   "finalStageTrophies": "Congratulations! You have completed the final puzzle and won {numTrophies, plural, one {a trophy} other {# trophies}}.",
@@ -762,6 +764,7 @@
   "published": "Published",
   "publicGallery": "Public Gallery",
   "publicProjects": "Public Projects",
+  "puzzleCompleted": "Puzzle completed!",
   "puzzleRatingQuestion": "Did you like this puzzle?",
   "puzzleTitle": "Puzzle {puzzle_number} of {stage_total}",
   "question": "Question",
@@ -977,6 +980,7 @@
   "unpublishPending": "Unpublishing...",
   "usernameLabel": "Username: ",
   "usingHints": "Using hints",
+  "usingTooManyBlocks": "Using too many blocks",
   "unsubmit": "Unsubmit",
   "unsubmitAssessment": "Unsubmit your assessment",
   "unsubmitYourProject": "Unsubmit your project",

apps/i18n/studio/en_us.json

@@ -217,6 +217,7 @@
   "hoc2015_event_free_instructions": "\"You're on your own now, R2-D2.\"",
   "hoc2015_event_free_instructions2": "You have all the tools you need now to create your own puzzle. Feel free to explore and play with all the different Commands and Events. When you're done, press the Finish button to continue.",
   "iceAge": "Ice Age!",
+  "ifDroid": "droid",
   "ifDroidN": "droid {spriteIndex}",
   "ifSpriteN": "actor {spriteIndex}",
   "incrementPlayerScore" : "score point",
@@ -314,6 +315,7 @@
   "moveDistanceTooltip": "Move an actor a specific distance in the specified direction.",
   "moveSprite": "move",
   "moveSpriteN": "move actor {spriteIndex}",
+  "moveDroid": "move droid",
   "moveDroidN": "move droid {spriteIndex}",
   "toXY": "to x,y",
   "moveDown": "move down",
@@ -717,6 +719,7 @@
   "stopEverySpriteName": "stop every {spriteName}",
   "stopSprite": "stop",
   "stopSpriteN": "stop actor {spriteIndex}",
+  "stopDroid": "stop droid",
   "stopDroidN": "stop droid {spriteIndex}",
   "stopTooltip": "Stops an actor's movement.",
   "tennisboy": "tennis boy",

apps/package.json

@@ -88,6 +88,7 @@
     "enzyme": "2.8.0",
     "es6-promise": "3.0.2",
     "eslint": "^3.19.0",
+    "eslint-plugin-babel": "^4.1.2",
     "eslint-plugin-mocha": "^4.9.0",
     "eslint-plugin-react": "^5.2.2",
     "fast-memoize": "2.0.2",

apps/src/StudioApp.js

@@ -36,6 +36,7 @@ import VersionHistory from './templates/VersionHistory';
 import WireframeButtons from './templates/WireframeButtons';
 import annotationList from './acemode/annotationList';
 import color from "./util/color";
+import getAchievements from './achievements';
 import i18n from './code-studio/i18n';
 import logToCloud from './logToCloud';
 import msg from '@cdo/locale';
@@ -55,6 +56,7 @@ import {setIsRunning} from './redux/runState';
 import {setPageConstants} from './redux/pageConstants';
 import {setVisualizationScale} from './redux/layout';
 import {
+  setAchievements,
   setBlockLimit,
   setFeedbackData,
   showFeedback,
@@ -1446,24 +1448,11 @@ StudioApp.prototype.displayFeedback = function (options) {
       store.dispatch(setFeedbackData({
         isPerfect: feedbackType >= TestResults.MINIMUM_OPTIMAL_RESULT,
         blocksUsed: this.feedback_.getNumCountableBlocks(),
-        achievements: [
-          {
-            isAchieved: true,
-            message: 'Placeholder achievement!',
-          },
-          {
-            isAchieved: true,
-            message: 'Another achievement!',
-          },
-          {
-            isAchieved: false,
-            message: 'Some lame achievement :(',
-          },
-        ],
         displayFunometer: response && response.puzzle_ratings_enabled,
         studentCode: this.feedback_.getGeneratedCodeProperties(this.config.appStrings),
         canShare: !this.disableSocialShare && !options.disableSocialShare,
       }));
+      store.dispatch(setAchievements(getAchievements(store.getState())));
       if (!preventDialog) {
         store.dispatch(showFeedback());
       }
@@ -2938,6 +2927,7 @@ StudioApp.prototype.setPageConstants = function (config, appSpecificConstants) {
     showProjectTemplateWorkspaceIcon: !!config.level.projectTemplateLevelName &&
       !config.level.isK1 &&
       !config.readonlyWorkspace,
+    serverLevelId: config.serverLevelId,
   }, appSpecificConstants);
 
   getStore().dispatch(setPageConstants(combined));

apps/src/achievements.js

@@ -0,0 +1,71 @@
+import msg from '@cdo/locale';
+import authoredHintUtils from './authoredHintUtils';
+
+export default function getAchievements(state) {
+  return POSSIBLE_ACHIEVEMENTS.map(
+    possibleAchievement => possibleAchievement(state)
+  ).filter(achievement => achievement);
+}
+
+const POSSIBLE_ACHIEVEMENTS = [
+  puzzleComplete,
+  numberOfBlocks,
+  usingHints,
+];
+
+export function puzzleComplete(state) {
+  return {
+    isAchieved: true,
+    message: msg.puzzleCompleted(),
+    successIconUrl: '',
+  };
+}
+
+export function numberOfBlocks(state) {
+  const blockLimit = state.feedback.blockLimit;
+  const blocksUsed = state.feedback.blocksUsed;
+  if (blockLimit === undefined || blockLimit === Infinity) {
+    return null;
+  }
+
+  let message, isAchieved;
+  if (blocksUsed < blockLimit) {
+    message = msg.fewerNumberOfBlocks({numBlocks: blockLimit});
+    isAchieved = true;
+  } else if (blocksUsed === blockLimit) {
+    message = msg.exactNumberOfBlocks({numBlocks: blockLimit});
+    isAchieved = true;
+  } else {
+    message = msg.usingTooManyBlocks();
+    isAchieved = false;
+  }
+
+  return {
+    isAchieved,
+    message,
+    successIconUrl: '',
+    failureIconUrl: '',
+  };
+}
+
+export function usingHints(state) {
+  const hintsUsed = authoredHintUtils.currentOpenedHintCount(
+    state.pageConstants.serverLevelId);
+  let message, isAchieved;
+  if (hintsUsed === 0) {
+    message = msg.withoutHints();
+    isAchieved = true;
+  } else if (hintsUsed === 1) {
+    message = msg.usingOneHint();
+    isAchieved = true;
+  } else {
+    message = msg.usingHints();
+    isAchieved = false;
+  }
+  return {
+    isAchieved,
+    message,
+    successIconUrl: '',
+    failureIconUrl: '',
+  };
+}

apps/src/applab/Visualization.jsx

@@ -88,6 +88,7 @@ class Visualization extends React.Component {
         <div
           id="designModeViz"
           className="appModern"
+          tabIndex="1"
           style={commonStyles.hidden}
         />
         <VisualizationOverlay width={appWidth} height={appHeight}>

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

@@ -12,7 +12,7 @@ export default class CellEditor extends React.Component {
     row: PropTypes.number.isRequired,
     col: PropTypes.number.isRequired,
     onUpdate: PropTypes.func.isRequired,
-  }
+  };
 
   constructor(props) {
     super(props);

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

@@ -65,8 +65,8 @@ const styles = {
   }
 };
 
-const StageLockDialog = React.createClass({
-  propTypes: {
+class StageLockDialog extends React.Component {
+  static propTypes = {
     isOpen: PropTypes.bool.isRequired,
     handleClose: PropTypes.func.isRequired,
     initialLockStatus: PropTypes.arrayOf(
@@ -78,13 +78,15 @@ const StageLockDialog = React.createClass({
     selectedSectionId: PropTypes.string.isRequired,
     saving: PropTypes.bool.isRequired,
     saveDialog: PropTypes.func.isRequired
-  },
+  };
+
+  constructor(props) {
+    super(props);
 
-  getInitialState() {
-    return {
-      lockStatus: this.props.initialLockStatus
+    this.state = {
+      lockStatus: props.initialLockStatus
     };
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.saving) {
@@ -93,33 +95,27 @@ const StageLockDialog = React.createClass({
     this.setState({
       lockStatus: nextProps.initialLockStatus
     });
-  },
+  }
 
   setAllLockStatus(lockStatus) {
     this.setState({
       lockStatus: this.state.lockStatus.map(item => Object.assign({}, item, {
         lockStatus
       }))
     });
-  },
+  }
 
-  allowEditing() {
-    this.setAllLockStatus(LockStatus.Editable);
-  },
+  allowEditing = () => this.setAllLockStatus(LockStatus.Editable);
 
-  lockStage() {
-    this.setAllLockStatus(LockStatus.Locked);
-  },
+  lockStage = () => this.setAllLockStatus(LockStatus.Locked);
 
-  showAnswers() {
-    this.setAllLockStatus(LockStatus.ReadonlyAnswers);
-  },
+  showAnswers = () => this.setAllLockStatus(LockStatus.ReadonlyAnswers);
 
-  viewSection() {
+  viewSection = () => {
     window.open(`${window.dashboard.CODE_ORG_URL}/teacher-dashboard#/sections/${this.props.selectedSectionId}/assessments`, '_blank');
-  },
+  };
 
-  handleRadioChange(event) {
+  handleRadioChange = (event) => {
     const modifiedIndex = parseInt(event.target.name, 10);
     const value = event.target.value;
 
@@ -137,11 +133,11 @@ const StageLockDialog = React.createClass({
         })
       });
     }, 0);
-  },
+  };
 
-  handleSave() {
+  handleSave = () => {
     this.props.saveDialog(this.props.selectedSectionId, this.state.lockStatus);
-  },
+  };
 
   render() {
     const responsiveHeight = {
@@ -307,8 +303,9 @@ const StageLockDialog = React.createClass({
       </BaseDialog>
     );
   }
-});
+}
 
+export const UnconnectedStageLockDialog = Radium(StageLockDialog);
 export default connect(state => ({
   initialLockStatus: state.stageLock.lockStatus,
   isOpen: !!state.stageLock.lockDialogStageId,
@@ -318,4 +315,4 @@ export default connect(state => ({
   saveDialog(sectionId, lockStatus) {
     dispatch(saveLockDialog(sectionId, lockStatus));
   }
-}))(Radium(StageLockDialog));
+}))(UnconnectedStageLockDialog);

apps/src/code-studio/components/stageExtras/CompletableLevelThumbnail.jsx

@@ -29,7 +29,7 @@ export default class CompletableLevelThumbnail extends React.Component {
     children: PropTypes.element.isRequired,
     size: PropTypes.number,
     completed: PropTypes.bool,
-  }
+  };
 
   render() {
     const scale = (this.props.size || 400) / 400;