Merge pull request #19883 from code-dot-org/staging

DTT (Staging > Test) [robo-dtt]

apps/src/StudioApp.js

@@ -275,7 +275,7 @@ StudioApp.prototype.init = function (config) {
       firehoseClient.putRecord(
         'analysis-events',
         {
-          study: 'instructions-resources-tab-wip',
+          study: 'instructions-resources-tab-wip-v1',
           study_group: 'resources-tab',
           event: 'resources-tab-load',
           data_json: JSON.stringify([config.app, config.scriptName, config.stagePosition, config.levelPosition]),
@@ -285,7 +285,7 @@ StudioApp.prototype.init = function (config) {
       firehoseClient.putRecord(
         'analysis-events',
         {
-          study: 'instructions-resources-tab-wip',
+          study: 'instructions-resources-tab-wip-v1',
           study_group: 'under-app',
           event: 'under-app-load',
           data_json: JSON.stringify([config.app, config.scriptName, config.stagePosition, config.levelPosition]),
@@ -1855,23 +1855,25 @@ StudioApp.prototype.configureDom = function (config) {
   const referenceAreaInTopInstructions = config.noInstructionsWhenCollapsed && experiments.isEnabled('resourcesTab');
   if (!referenceAreaInTopInstructions && referenceArea) {
     belowViz.appendChild(referenceArea);
+    // TODO (epeach) - remove after resources tab A/B testing
+    // Temporarily attach an event listener to log clicks
+    // Logs the type of app and the ids of the puzzle
+    var videoThumbnail = document.getElementsByClassName('video_thumbnail');
+    if (videoThumbnail[0]){
+      videoThumbnail[0].addEventListener('click', () => {
+        firehoseClient.putRecord(
+          'analysis-events',
+          {
+            study: 'instructions-resources-tab-wip-v1',
+            study_group: 'under-app',
+            event: 'under-app-video-click',
+            data_json: JSON.stringify([config.app, config.scriptName, config.stagePosition, config.levelPosition]),
+          }
+        );
+      });
+    }
   }
 
-  // TODO (epeach) - remove after resources tab A/B testing
-  // Temporarily attach an event listener to log clicks
-  // Logs the type of app and the ids of the puzzle
-  var videoThumbnail = document.getElementsByClassName('video_thumbnail');
-  if (videoThumbnail[0]){
-    videoThumbnail[0].addEventListener('click', firehoseClient.putRecord(
-      'analysis-events',
-      {
-        study: 'instructions-resources-tab-wip',
-        study_group: 'under-app',
-        event: 'under-app-video-click',
-        data_json: JSON.stringify([config.app, config.scriptName, config.stagePosition, config.levelPosition]),
-      }
-    ));
-  }
   var visualizationColumn = document.getElementById('visualizationColumn');
 
   if (!config.hideSource || config.embed || config.level.iframeEmbed) {

apps/src/code-studio/pd/workshop_survey/VariableFormGroup.jsx

@@ -33,16 +33,16 @@ const styles = {
   },
 };
 
-const ColumnVariableQuestion = React.createClass({
-  propTypes: {
+class ColumnVariableQuestion extends React.Component {
+  static propTypes = {
     selectedValues: PropTypes.arrayOf(PropTypes.string).isRequired,
     question: questionPropType,
     onChange: PropTypes.func,
     data: PropTypes.object,
     errors: PropTypes.arrayOf(PropTypes.string),
-  },
+  };
 
-  buildColumn(selectedValue) {
+  buildColumn = (selectedValue) => {
     const key = `${this.props.question.name}[${selectedValue}]`;
 
     // Support referring to checkboxes as either "single_select" or "check", and
@@ -83,7 +83,7 @@ const ColumnVariableQuestion = React.createClass({
         </FormGroup>
       </td>
     );
-  },
+  }
 
   render() {
     return (
@@ -98,18 +98,18 @@ const ColumnVariableQuestion = React.createClass({
       </tr>
     );
   }
-});
+}
 
-const RowVariableQuestion = React.createClass({
-  propTypes: {
+class RowVariableQuestion extends React.Component {
+  static propTypes = {
     selectedValues: PropTypes.arrayOf(PropTypes.string).isRequired,
     question: questionPropType,
     onChange: PropTypes.func,
     data: PropTypes.object,
     errors: PropTypes.arrayOf(PropTypes.string),
-  },
+  };
 
-  buildRow(selectedValue) {
+  buildRow = (selectedValue) => {
     const label = this.props.question.label.replace("{value}", selectedValue);
     const key = `${this.props.question.name}[${selectedValue}]`;
 
@@ -132,7 +132,7 @@ const RowVariableQuestion = React.createClass({
         onChange={this.props.onChange}
       />
     );
-  },
+  };
 
   render() {
     return (
@@ -141,10 +141,10 @@ const RowVariableQuestion = React.createClass({
       </div>
     );
   }
-});
+}
 
-const VariableFormGroup = React.createClass({
-  propTypes: {
+export default class VariableFormGroup extends React.Component {
+  static propTypes = {
     sourceLabel: PropTypes.string.isRequired,
     sourceName: PropTypes.string.isRequired,
     sourceValues: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -153,29 +153,29 @@ const VariableFormGroup = React.createClass({
     onChange: PropTypes.func,
     data: PropTypes.object,
     errors: PropTypes.arrayOf(PropTypes.string),
-  },
+  };
 
-  getDefaultProps() {
-    return {
-      columnVariableQuestions: [],
-      rowVariableQuestions: []
-    };
-  },
+  static defaultProps = {
+    columnVariableQuestions: [],
+    rowVariableQuestions: []
+  };
+
+  constructor(props) {
+    super(props);
 
-  getInitialState() {
     let selected = [];
 
     if (this.hasSingleSourceValue()) {
       // If we have only a single sourceValue, select it by default
-      selected = [this.props.sourceValues[0]];
-    } else if (this.props.data && this.props.data[this.props.sourceName]) {
+      selected = [props.sourceValues[0]];
+    } else if (props.data && props.data[props.sourceName]) {
       // otherwise, if we're a controlled component, set our initial state from
       // the data
-      selected = this.props.data[this.props.sourceName];
+      selected = props.data[props.sourceName];
     }
 
-    return {selected};
-  },
+    this.state = { selected };
+  }
 
   componentWillMount() {
     if (this.hasSingleSourceValue() && this.props.onChange) {
@@ -186,25 +186,25 @@ const VariableFormGroup = React.createClass({
         [this.props.sourceName]: this.state.selected
       });
     }
-  },
+  }
 
   hasNoSourceValues() {
     return this.props.sourceValues.length === 0;
-  },
+  }
 
   hasSingleSourceValue() {
     return this.props.sourceValues.length === 1;
-  },
+  }
 
-  setSelected(values) {
+  setSelected = (values) => {
     if (this.props.onChange) {
       this.props.onChange(values);
     }
 
     this.setState({
       selected: values[this.props.sourceName]
     });
-  },
+  }
 
   render() {
     if (this.hasNoSourceValues()) {
@@ -294,6 +294,4 @@ const VariableFormGroup = React.createClass({
       </FormGroup>
     );
   }
-});
-
-export default VariableFormGroup;
+}

apps/src/code-studio/pd/workshop_survey/VariableFormGroup.story.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import VariableFormGroup from './VariableFormGroup';
+import reactBootstrapStoryDecorator from '../reactBootstrapStoryDecorator';
+
+export default storybook => {
+  storybook
+    .storiesOf('VariableFormGroup', module)
+    .addDecorator(reactBootstrapStoryDecorator)
+    .addStoryTable([{
+      name: 'basic uncontrolled VariableFormGroup',
+      story: () => (
+        <VariableFormGroup
+          sourceLabel="Who should go on the away mission?"
+          sourceName="roster"
+          sourceValues={[
+            "an essential member of the bridge crew",
+            "an absolutely valueless redshirt",
+            "someone whose actual job is to go on away missions"
+          ]}
+
+          columnVariableQuestions={[{
+            label: "is this person qualified for the mission?",
+            name: "qualified",
+            required: true,
+            type: "radio",
+            values: ["Yes", "Not remotely"]
+          }, {
+            label: "can the ship afford to risk this person's life?",
+            name: "risk",
+            required: true,
+            type: "radio",
+            values: ["Yes", "We would all literally die without them"]
+          }]}
+
+          rowVariableQuestions={[{
+            label: "why are you selecing {value} for this mission?",
+            name: "why",
+            required: false,
+            type: "free_response"
+          }]}
+        />
+      )
+    }]);
+};

apps/src/templates/VideoThumbnail.jsx

@@ -44,7 +44,7 @@ export default class VideoThumbnail extends Component {
           firehoseClient.putRecord(
             'analysis-events',
             {
-              study: 'instructions-resources-tab-wip',
+              study: 'instructions-resources-tab-wip-v1',
               study_group: 'resources-tab',
               event: 'tab-video-click',
               data_json: JSON.stringify(this.props.logText),

apps/src/templates/instructions/TopInstructionsCSP.jsx

@@ -221,7 +221,7 @@ var TopInstructions = React.createClass({
     firehoseClient.putRecord(
       'analysis-events',
       {
-        study: 'instructions-resources-tab-wip',
+        study: 'instructions-resources-tab-wip-v1',
         study_group: 'resources-tab',
         event: 'resources-tab-click',
         data_json: JSON.stringify([this.props.app, this.props.scriptName, this.props.stagePosition, this.props.levelPosition]),

apps/src/templates/projects/PersonalRecentProjects.jsx

@@ -55,7 +55,6 @@ class PersonalRecentProjects extends Component {
                 <ProjectCard
                   projectData={project}
                   currentGallery={'personal'}
-                  hideActions={true}
                 />
               </div>
             ))