Merge pull request #30596 from code-dot-org/dtp_candidate_42df2694

DTP (Test > Production: 42df269)
code-dot-org · Sep 4, 2019 · f2e8b9d · f2e8b9d
2 parents 157b5ed + cc6df60
commit f2e8b9d
Show file tree

Hide file tree

Showing 56 changed files with 458 additions and 295 deletions.
diff --git a/apps/i18n/common/en_us.json b/apps/i18n/common/en_us.json
@@ -44,6 +44,9 @@
   "announcementHeadingBackToSchool2018": "Get set up for the new school year",
   "announcementDescriptionBackToSchool2018": "View our frequently asked questions on how to manage your classroom(s) and start teaching.",
   "announcementButtonBackToSchool2018": "Read the FAQ",
+  "announcementHeadingBackToSchool": "Get set up for the new school year",
+  "announcementDescriptionBackToSchool": "View our frequently asked questions on how to manage your classroom(s) and start teaching.",
+  "announcementButtonBackToSchool": "Read the FAQ",
   "announcementHeadingFacilitatorApp": "Join our Facilitator Development Program",
   "announcementDescriptionFacilitatorApp": "Help teachers by delivering professional learning workshops on Code.org's curriculum.",
   "announcementHeadingPrivacyGdpr": "We are updating our privacy policy",

diff --git a/apps/package.json b/apps/package.json
@@ -181,7 +181,7 @@
     "react-virtualized": "^9.18.5",
     "react-virtualized-select": "^3.0.1",
     "react-with-context": "^2.0.0",
-    "reactabular": "^2.0.5",
+    "reactabular-table": "^8.14.0",
     "redux": "^3.3.1",
     "redux-logger": "^2.6.1",
     "redux-mock-store": "^1.2.3",
@@ -203,7 +203,7 @@
     "seedrandom": "2.4.2",
     "sinon": "^5.0.0",
     "sinon-chai": "^3.1.0",
-    "sortabular": "^1.6",
+    "sortabular": "^1.6.0",
     "sprintf-js": "^1.0.3",
     "style-loader": "^0.13.1",
     "uglifyjs-webpack-plugin": "^2.1.1",

diff --git a/apps/src/applab/applab.js b/apps/src/applab/applab.js
@@ -405,6 +405,14 @@ Applab.init = function(config) {
   );
   config.getGeneratedProperties = getGeneratedProperties;
 
+  // Set information about the current Applab level being displayed.
+  getStore().dispatch(
+    actions.setLevelData({
+      name: config.level.name,
+      isStartMode: config.isStartMode
+    })
+  );
+
   // replace studioApp methods with our own
   studioApp().reset = this.reset.bind(this);
   studioApp().runButtonClick = this.runButtonClick.bind(this);

diff --git a/apps/src/applab/redux/applab.js b/apps/src/applab/redux/applab.js
@@ -19,6 +19,7 @@ export const REDIRECT_RESPONSE = {
 const CHANGE_INTERFACE_MODE = 'applab/CHANGE_INTERFACE_MODE';
 const ADD_REDIRECT_NOTICE = 'applab/ADD_REDIRECT_NOTICE';
 const DISMISS_REDIRECT_NOTICE = 'applab/DISMISS_REDIRECT_NOTICE';
+const SET_LEVEL_DATA = 'applab/SET_LEVEL_DATA';
 
 /**
  * Change the interface mode between Design Mode and Code Mode
@@ -59,10 +60,22 @@ function dismissRedirectNotice() {
   };
 }
 
+/**
+ * Store data about the current Applab level (e.g., level name).
+ * @returns {{type: string, levelData: object}}
+ */
+function setLevelData(data) {
+  return {
+    type: SET_LEVEL_DATA,
+    data
+  };
+}
+
 export const actions = {
   changeInterfaceMode,
   addRedirectNotice,
-  dismissRedirectNotice
+  dismissRedirectNotice,
+  setLevelData
 };
 
 // Reducers
@@ -102,11 +115,26 @@ function redirectDisplay(state, action) {
   }
 }
 
+function level(state, action) {
+  state = state || {};
+
+  switch (action.type) {
+    case SET_LEVEL_DATA:
+      return {
+        ...state,
+        ...action.data
+      };
+    default:
+      return state;
+  }
+}
+
 export const reducers = {
   ...jsDebuggerReducers,
   maker,
   data,
   interfaceMode,
   redirectDisplay,
-  screens
+  screens,
+  level
 };
diff --git a/apps/src/assetManagement/assetPrefix.js b/apps/src/assetManagement/assetPrefix.js
@@ -1,4 +1,5 @@
 import {unicode} from '@cdo/apps/code-studio/components/icons';
+import {getStore} from '@cdo/apps/redux';
 
 // For proxying non-https assets
 const MEDIA_PROXY = '//' + location.host + '/media?u=';
@@ -18,6 +19,11 @@ export const ICON_PREFIX_REGEX = new RegExp('^icon://');
 export const SOUND_PREFIX = 'sound://';
 export const SOUND_PREFIX_REGEX = new RegExp('^sound://');
 
+// Starter assets are currently only used for image assets, but may be extended
+// in the future, where we will want to change this prefix.
+export const STARTER_ASSET_PREFIX = 'image://';
+export const STARTER_ASSET_PREFIX_REGEX = new RegExp('^image://');
+
 const DEFAULT_ASSET_PATH_PREFIX = '/v3/assets/';
 export const DEFAULT_SOUND_PATH_PREFIX = '/api/v1/sound-library/';
 const DEFAULT_CHANNEL_ID = undefined;
@@ -71,6 +77,14 @@ export function fixPath(filename) {
     return filename.replace(SOUND_PREFIX, soundPathPrefix);
   }
 
+  if (STARTER_ASSET_PREFIX_REGEX.test(filename)) {
+    const state = getStore().getState();
+    return filename.replace(
+      STARTER_ASSET_PREFIX,
+      starterAssetPathPrefix(state.level.name)
+    );
+  }
+
   if (filename.indexOf('/') !== -1 || !channelId) {
     return filename;
   }
@@ -81,6 +95,15 @@ export function fixPath(filename) {
   return assetPathPrefix + channelId + '/' + encodeURIComponent(filename);
 }
 
+/**
+ * Get path prefix for starter assets, given a level name.
+ * @param levelName {string}
+ * @return {string}
+ */
+function starterAssetPathPrefix(levelName) {
+  return `/level_starter_assets/${levelName}/`;
+}
+
 /**
  * Create a data-URI with the image data of the given icon glyph.
  * @param value {string} An icon identifier of the format "icon://fa-icon-name".

diff --git a/apps/src/code-studio/components/AssetManager.jsx b/apps/src/code-studio/components/AssetManager.jsx
@@ -13,6 +13,7 @@ import AudioRecorder from './AudioRecorder';
 import firehoseClient from '@cdo/apps/lib/util/firehose';
 import AddAssetButtonRow from './AddAssetButtonRow';
 import i18n from '@cdo/locale';
+import {STARTER_ASSET_PREFIX} from '@cdo/apps/assetManagement/assetPrefix';
 
 export const AudioErrorType = {
   NONE: 'none',
@@ -257,7 +258,12 @@ export default class AssetManager extends React.Component {
         <AssetRow
           {...this.defaultAssetProps(asset)}
           api={boundApi}
-          onChoose={() => console.log('choose!')}
+          onChoose={() =>
+            this.props.assetChosen(
+              STARTER_ASSET_PREFIX + asset.filename,
+              asset.timestamp
+            )
+          }
           onDelete={() => this.deleteStarterAssetRow(asset.filename)}
           levelName={this.props.levelName}
           hideDelete={!this.props.isStartMode}

diff --git a/apps/src/code-studio/components/ImagePicker.jsx b/apps/src/code-studio/components/ImagePicker.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {getStore} from '@cdo/apps/redux';
 import AssetManager from './AssetManager';
 import color from '../../util/color';
 import IconLibrary from './IconLibrary';
@@ -96,6 +97,14 @@ export default class ImagePicker extends React.Component {
 
     const disableAudio =
       this.props.disableAudioRecording || this.props.assetChosen;
+
+    const reduxState = getStore().getState();
+    let levelName, isStartMode;
+    if (reduxState && reduxState.level) {
+      levelName = reduxState.level.name;
+      isStartMode = reduxState.level.isStartMode;
+    }
+
     const body =
       !this.props.assetChosen || this.state.mode === 'files' ? (
         <AssetManager
@@ -109,6 +118,8 @@ export default class ImagePicker extends React.Component {
           disableAudioRecording={disableAudio}
           imagePicker={true}
           elementId={this.props.elementId}
+          levelName={levelName}
+          isStartMode={isStartMode}
         />
       ) : (
         <IconLibrary assetChosen={this.getAssetNameWithPrefix} />

diff --git a/apps/src/code-studio/components/progress/ScriptOverviewHeader.jsx b/apps/src/code-studio/components/progress/ScriptOverviewHeader.jsx
@@ -23,7 +23,6 @@ import AssignmentVersionSelector, {
 } from '@cdo/apps/templates/teacherDashboard/AssignmentVersionSelector';
 import {assignmentVersionShape} from '@cdo/apps/templates/teacherDashboard/shapes';
 import StudentFeedbackNotification from '@cdo/apps/templates/feedback/StudentFeedbackNotification';
-import experiments from '@cdo/apps/util/experiments';
 import VerifiedResourcesNotification from '@cdo/apps/templates/courseOverview/VerifiedResourcesNotification';
 
 const SCRIPT_OVERVIEW_WIDTH = 1100;
@@ -212,9 +211,7 @@ class ScriptOverviewHeader extends Component {
             width={SCRIPT_OVERVIEW_WIDTH}
           />
         )}
-        {experiments.isEnabled(experiments.FEEDBACK_NOTIFICATION) && userId && (
-          <StudentFeedbackNotification studentId={userId} />
-        )}
+        {userId && <StudentFeedbackNotification studentId={userId} />}
         {displayVerifiedResources && (
           <VerifiedResourcesNotification width={SCRIPT_OVERVIEW_WIDTH} />
         )}

diff --git a/apps/src/code-studio/pd/application_dashboard/admin_cohort_view_table.jsx b/apps/src/code-studio/pd/application_dashboard/admin_cohort_view_table.jsx
@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactTooltip from 'react-tooltip';
-import {Table, sort} from 'reactabular';
+import * as Table from 'reactabular-table';
+import * as sort from 'sortabular';
 import color from '@cdo/apps/util/color';
 import {Button} from 'react-bootstrap';
 import _, {orderBy} from 'lodash';
@@ -76,7 +77,7 @@ export default class AdminCohortViewTable extends React.Component {
           label: 'View Application'
         },
         cell: {
-          format: this.formatViewButton
+          formatters: [this.formatViewButton]
         }
       },
       {
@@ -86,7 +87,7 @@ export default class AdminCohortViewTable extends React.Component {
           transforms: [sortable]
         },
         cell: {
-          format: this.formatDate
+          formatters: [this.formatDate]
         }
       },
       {
@@ -117,7 +118,7 @@ export default class AdminCohortViewTable extends React.Component {
           transforms: [sortable]
         },
         cell: {
-          format: this.formatBoolean
+          formatters: [this.formatBoolean]
         }
       },
       {
@@ -162,7 +163,7 @@ export default class AdminCohortViewTable extends React.Component {
           transforms: [sortable]
         },
         cell: {
-          format: this.formatBoolean
+          formatters: [this.formatBoolean]
         }
       },
       {
@@ -202,7 +203,7 @@ export default class AdminCohortViewTable extends React.Component {
           transforms: [sortable]
         },
         cell: {
-          format: this.formatNotesTooltip,
+          formatters: [this.formatNotesTooltip],
           transforms: [
             () => ({
               style: {...styles.notesCell}

diff --git a/apps/src/code-studio/pd/application_dashboard/cohort_view_table.jsx b/apps/src/code-studio/pd/application_dashboard/cohort_view_table.jsx
@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import ReactTooltip from 'react-tooltip';
-import {Table, sort} from 'reactabular';
+import * as Table from 'reactabular-table';
+import * as sort from 'sortabular';
 import color from '@cdo/apps/util/color';
 import {Button} from 'react-bootstrap';
 import _, {orderBy} from 'lodash';
@@ -107,7 +108,7 @@ export class CohortViewTable extends React.Component {
           label: 'View Application'
         },
         cell: {
-          format: this.formatViewButton
+          formatters: [this.formatViewButton]
         }
       },
       {
@@ -117,7 +118,7 @@ export class CohortViewTable extends React.Component {
           transforms: [sortable]
         },
         cell: {
-          format: this.formatDate
+          formatters: [this.formatDate]
         }
       },
       {
@@ -155,9 +156,11 @@ export class CohortViewTable extends React.Component {
           transforms: [sortable]
         },
         cell: {
-          format: status =>
-            ApplicationStatuses[this.props.viewType][status] ||
-            _.upperFirst(status),
+          formatters: [
+            status =>
+              ApplicationStatuses[this.props.viewType][status] ||
+              _.upperFirst(status)
+          ],
           transforms: [
             status => ({
               style: {...styles.statusCellCommon, ...styles.statusCell[status]}
@@ -184,7 +187,7 @@ export class CohortViewTable extends React.Component {
           label: 'Locked'
         },
         cell: {
-          format: this.formatBoolean
+          formatters: [this.formatBoolean]
         }
       });
     }
@@ -244,7 +247,7 @@ export class CohortViewTable extends React.Component {
           transforms: [sortable]
         },
         cell: {
-          format: this.formatNotesTooltip,
+          formatters: [this.formatNotesTooltip],
           transforms: [
             () => ({
               style: {...styles.notesCell}