Merge branch 'staging' into levelbuilder

Author: Madelyn Kasula

apps/Gruntfile.js

@@ -451,6 +451,7 @@ describe('entry tests', () => {
     'levels/textMatch':                    './src/sites/studio/pages/levels/textMatch.js',
     'levels/widget':                       './src/sites/studio/pages/levels/widget.js',
     'levels/_external_link':               './src/sites/studio/pages/levels/_external_link.js',
+    'levels/show':                         './src/sites/studio/pages/levels/show.js',
     'projects/index':                      './src/sites/studio/pages/projects/index.js',
     'projects/public':                     './src/sites/studio/pages/projects/public.js',
     'projects/featured':                   './src/sites/studio/pages/projects/featured.js',

apps/i18n/common/en_us.json

@@ -1241,6 +1241,7 @@
   "startOver": "Start Over",
   "startOverTitle": "Are you sure you want to start over?",
   "startOverBody": "This will reset the puzzle to its start state and reset all the data you've added or changed.",
+  "statsTableFailure": "Sorry, something went wrong. Please reload the page to try again.",
   "stayHere": "Stay here",
   "stepIn": "Step in",
   "stepOut": "Step out",

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

@@ -0,0 +1,42 @@
+import React, { PropTypes } from 'react';
+import i18n from '@cdo/locale';
+import { onDismissRedirectDialog, dismissedRedirectDialog } from '@cdo/apps/util/dismissVersionRedirect';
+import RedirectDialog from '@cdo/apps/code-studio/components/RedirectDialog';
+
+export default class ScriptLevelRedirectDialog extends React.Component {
+  static propTypes = {
+    redirectUrl: PropTypes.string.isRequired,
+    scriptName: PropTypes.string.isRequired,
+    courseName: PropTypes.string,
+  };
+
+  state = {
+    isOpen: true,
+  };
+
+  onCloseRedirectDialog = () => {
+    const {courseName, scriptName} = this.props;
+    // Use course name if available, and script name if not.
+    onDismissRedirectDialog(courseName || scriptName);
+    this.setState({
+      isOpen: false,
+    });
+  };
+
+  render() {
+    const {redirectUrl, courseName, scriptName} = this.props;
+
+    // Only render redirect dialog if isOpen and user hasn't already dismissed the dialog for this course or script.
+    const displayRedirectDialog = this.state.isOpen && !dismissedRedirectDialog(courseName || scriptName);
+
+    return (
+      <RedirectDialog
+        isOpen={displayRedirectDialog}
+        details={i18n.assignedToNewerVersion()}
+        handleClose={this.onCloseRedirectDialog}
+        redirectUrl={redirectUrl}
+        redirectButtonText={i18n.goToAssignedVersion()}
+      />
+    );
+  }
+}

apps/src/gamelab/blocks.js

@@ -32,7 +32,7 @@ const limitedColours = [
   // some "tertiary" colors
   '#ff8800', // ORANGE
   '#8800ff', // PURPLE
-  '#0088ff', // LIGHT BLUE
+  '#00ff88', // LIME
 ];
 
 const customInputTypes = {

apps/src/lib/kits/maker/CircuitPlaygroundBoard.js

@@ -29,6 +29,10 @@ process.hrtime = require('browser-process-hrtime');
 /** @const {number} serial port transfer rate */
 const SERIAL_BAUD = 57600;
 
+/** Maps the Circuit Playground Express pins to Circuit Playground Classic*/
+const pinMapping = {"A0": 12, "A1": 6, "A2": 9, "A3": 10, "A4": 3, "A5": 2, "A6": 0, "A7": 1};
+
+
 /**
  * Controller interface for an Adafruit Circuit Playground board using
  * Circuit Playground Firmata firmware.
@@ -228,33 +232,39 @@ export default class CircuitPlaygroundBoard extends EventEmitter {
         .then(() => forEachLedInSequence(led => led.off(), 80));
   }
 
+  mappedPin(pin) {
+    return pinMapping.hasOwnProperty(pin) ? pinMapping[pin] : pin;
+  }
+
   pinMode(pin, modeConstant) {
-    this.fiveBoard_.pinMode(pin, modeConstant);
+    this.fiveBoard_.pinMode(this.mappedPin(pin), modeConstant);
   }
 
   digitalWrite(pin, value) {
-    this.fiveBoard_.digitalWrite(pin, value);
+    this.fiveBoard_.digitalWrite(this.mappedPin(pin), value);
   }
 
   digitalRead(pin, callback) {
-    this.fiveBoard_.digitalRead(pin, callback);
+    this.fiveBoard_.digitalRead(this.mappedPin(pin), callback);
   }
 
   analogWrite(pin, value) {
-    this.fiveBoard_.analogWrite(pin, value);
+    this.fiveBoard_.analogWrite(this.mappedPin(pin), value);
   }
 
   analogRead(pin, callback) {
-    this.fiveBoard_.analogRead(pin, callback);
+    this.fiveBoard_.analogRead(this.mappedPin(pin), callback);
   }
 
   createLed(pin) {
+    pin = this.mappedPin(pin);
     const newLed = new Led({board: this.fiveBoard_, pin});
     this.dynamicComponents_.push(newLed);
     return newLed;
   }
 
   createButton(pin) {
+    pin = this.mappedPin(pin);
     const newButton = new Button({board: this.fiveBoard_, pin});
     this.dynamicComponents_.push(newButton);
     return newButton;

apps/src/redux/sectionDataRedux.js

@@ -1,13 +1,48 @@
 import { PropTypes } from 'react';
+import $ from 'jquery';
 
-// Reducer for section data in teacher dashboard.
-// Tab specific reducers can import actions from this file
-// if they need to respond to a section changing.
+/**
+ * Reducer for section data in teacher dashboard.
+ * Tab specific reducers can import actions from this file
+ * if they need to respond to a section changing.
+ */
+
+ /**
+  * Shape for the section
+  * The section we get directly from angular right now. This gives us a
+  * different shape than some other places we use sections. For now, I'm just
+  * going to document the parts of section that we use here
+  */
+ export const sectionDataPropType = PropTypes.shape({
+   id: PropTypes.number.isRequired,
+   script: PropTypes.object,
+   students: PropTypes.arrayOf(PropTypes.shape({
+     id: PropTypes.number.isRequired,
+     name: PropTypes.string.isRequired,
+   })).isRequired
+ });
+
+ /**
+  * Status for loading section data from server.
+  */
+  export const LoadingStatus = {
+    IN_PROGRESS: "inProgress",
+    SUCCESS: "success",
+    FAIL: "fail",
+  };
 
-// Action type constants
+/**
+ * Action type constants
+ */
 export const SET_SECTION = 'sectionData/SET_SECTION';
+export const CLEAR_SECTION_DATA = 'sectionData/CLEAR_SECTION_DATA';
+export const START_LOADING_SECTION = 'sectionData/START_LOADING_SECTION';
+export const LOAD_SECTION_SUCCESS = 'sectionData/LOAD_SECTION_SUCCESS';
+export const LOAD_SECTION_FAIL = 'sectionData/LOAD_SECTION_FAIL';
 
-// Action creators
+/**
+ * Action creators
+ */
 export const setSection = (section) => {
   // Sort section.students by name.
   const sortedStudents = section.students.sort((a, b) => a.name.localeCompare(b.name));
@@ -22,25 +57,16 @@ export const setSection = (section) => {
 };
 
 /**
- * Shape for the section
- * The section we get directly from angular right now. This gives us a
- * different shape than some other places we use sections. For now, I'm just
- * going to document the parts of section that we use here
+ * Initial state of sectionDataRedux
  */
-export const sectionDataPropType = PropTypes.shape({
-  id: PropTypes.number.isRequired,
-  script: PropTypes.object,
-  students: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-  })).isRequired
-});
-
-// Initial state of sectionDataRedux
 const initialState = {
   section: {},
+  loadingStatus: null,
 };
 
+/**
+ * Reducer
+ */
 export default function sectionData(state=initialState, action) {
   if (action.type === SET_SECTION) {
     // Setting the section is the first action to be called when switching
@@ -52,14 +78,61 @@ export default function sectionData(state=initialState, action) {
     };
   }
 
+  if (action.type === CLEAR_SECTION_DATA) {
+    return initialState;
+  }
+
+  if (action.type === START_LOADING_SECTION) {
+    return {
+      ...state,
+      loadingStatus: LoadingStatus.IN_PROGRESS,
+    };
+  }
+
+  if (action.type === LOAD_SECTION_SUCCESS) {
+    return {
+      ...state,
+      loadingStatus: LoadingStatus.SUCCESS,
+    };
+  }
+
+  if (action.type === LOAD_SECTION_FAIL) {
+    return {
+      ...state,
+      loadingStatus: LoadingStatus.FAIL,
+    };
+  }
+
   return state;
 }
 
-// Selector functions
+/**
+ * Selector functions
+ */
 export const getTotalStudentCount = (state) => {
   return state.sectionData.section.students.length;
 };
 
 export const getStudentList = (state) => {
   return state.sectionData.section.students;
 };
+
+/**
+ * Helper functions
+ */
+export const asyncSetSection = (sectionId) => (dispatch) => {
+  // Clear any existing section data and begin loading.
+  dispatch({ type: CLEAR_SECTION_DATA });
+  dispatch({ type: START_LOADING_SECTION });
+
+  $.ajax({
+    url: `/api/v1/sections/${sectionId}`,
+    method: 'GET',
+    dataType: 'json'
+  }).done(section => {
+    dispatch(setSection(section));
+    dispatch({ type: LOAD_SECTION_SUCCESS });
+  }).fail((jqXhr, status) => {
+    dispatch({ type: LOAD_SECTION_FAIL });
+  });
+};

apps/src/sites/studio/pages/levels/show.js

@@ -0,0 +1,23 @@
+import $ from 'jquery';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ScriptLevelRedirectDialog from '@cdo/apps/code-studio/components/ScriptLevelRedirectDialog';
+
+$(document).ready(initPage);
+
+function initPage() {
+  const script = document.querySelector('script[data-level]');
+  const config = JSON.parse(script.dataset.level);
+
+  const redirectDialogMountPoint = document.getElementById('redirect-dialog');
+  if (redirectDialogMountPoint && config.redirect_script_url) {
+    ReactDOM.render(
+      <ScriptLevelRedirectDialog
+        redirectUrl={config.redirect_script_url}
+        scriptName={config.script_name}
+        courseName={config.course_name}
+      />,
+      redirectDialogMountPoint
+    );
+  }
+}

apps/src/sites/studio/pages/teacher_dashboard/index.js

@@ -2,6 +2,10 @@ import $ from 'jquery';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {BrowserRouter as Router, Route} from 'react-router-dom';
+import {Provider} from 'react-redux';
+import {getStore, registerReducers} from '@cdo/apps/redux';
+import sectionData, {asyncSetSection} from '@cdo/apps/redux/sectionDataRedux';
+import stats, {asyncSetCompletedLevelCount} from '@cdo/apps/templates/teacherDashboard/statsRedux';
 import TeacherDashboard from '@cdo/apps/templates/teacherDashboard/TeacherDashboard';
 
 const script = document.querySelector('script[data-dashboard]');
@@ -10,15 +14,20 @@ const sectionId = scriptData.section_id;
 const baseUrl = `/teacher_dashboard/sections/${sectionId}`;
 
 $(document).ready(function () {
+  registerReducers({sectionData, stats});
+  const store = getStore();
+  store.dispatch(asyncSetSection(sectionId));
+  store.dispatch(asyncSetCompletedLevelCount(sectionId));
+
   ReactDOM.render(
-    <div>
+    <Provider store={store}>
       <Router basename={baseUrl}>
         <Route
           path="/"
           component={props => <TeacherDashboard {...props} sectionId={sectionId} studioUrlPrefix=""/>}
         />
       </Router>
-    </div>
+    </Provider>
     ,
     document.getElementById('teacher-dashboard')
   );

apps/src/templates/RegionalPartnerSearch.jsx

@@ -237,33 +237,35 @@ class RegionalPartnerSearch extends Component {
               <div>In addition to attending a five-day summer workshop, the professional learning program includes up to 4 required one-day, in-person academic year workshops during the 2019-20 school year.</div>
             )}
 
-            {partnerInfo.cost_scholarship_information && (
-              <div>
-                <h3>Cost and scholarship information:</h3>
-                <UnsafeRenderedMarkdown markdown={partnerInfo.cost_scholarship_information}/>
-              </div>
-            )}
-
-            {partnerInfo.additional_program_information && (
-              <div>
-                <h3>Additional program information:</h3>
-                <UnsafeRenderedMarkdown markdown={partnerInfo.additional_program_information}/>
-              </div>
-            )}
+            <div className="professional_learning_information" id={`id-${partnerInfo.id}`}>
+              {partnerInfo.cost_scholarship_information && (
+                <div>
+                  <h3>Cost and scholarship information:</h3>
+                  <UnsafeRenderedMarkdown markdown={partnerInfo.cost_scholarship_information}/>
+                </div>
+              )}
+
+              {partnerInfo.additional_program_information && (
+                <div>
+                  <h3>Additional program information:</h3>
+                  <UnsafeRenderedMarkdown markdown={partnerInfo.additional_program_information}/>
+                </div>
+              )}
+            </div>
 
             {appState === WorkshopApplicationStates.now_closed && (
               <div>Applications are now closed.</div>
             )}
 
             {appState === WorkshopApplicationStates.currently_open && !partnerInfo.link_to_partner_application && (
-              <a href={studio("/pd/application/teacher")}>
+              <a className="professional_learning_link" id={`id-${partnerInfo.id}`} href={studio("/pd/application/teacher")}>
                 <button>Start application</button>
               </a>
             )}
 
             {appState === WorkshopApplicationStates.currently_open && partnerInfo.link_to_partner_application && (
-              <a href={partnerInfo.link_to_partner_application} target="_blank">
-                <button>Apply on partner’s site</button>
+              <a className="professional_learning_link" id={`id-${partnerInfo.id}`} href={partnerInfo.link_to_partner_application} target="_blank">
+                <button>Apply on partner's site</button>
               </a>
             )}