Merge pull request #45616 from code-dot-org/dtp_candidate_d4306f92

DTP (Test > Production: d4306f9)

apps/src/dance/DanceVisualizationColumn.jsx

@@ -8,7 +8,11 @@ import PropTypes from 'prop-types';
 import Radium from 'radium';
 import {connect} from 'react-redux';
 import i18n from '@cdo/locale';
-import AgeDialog, {signedOutOver13} from '../templates/AgeDialog';
+import AgeDialog, {
+  ageDialogSelectedOver13,
+  songFilterOn
+} from '../templates/AgeDialog';
+import {getFilteredSongKeys} from '@cdo/apps/dance/songs';
 
 const SongSelector = Radium(
   class extends React.Component {
@@ -17,7 +21,7 @@ const SongSelector = Radium(
       setSong: PropTypes.func.isRequired,
       selectedSong: PropTypes.string,
       songData: PropTypes.objectOf(PropTypes.object).isRequired,
-      filterOff: PropTypes.bool.isRequired
+      filterOn: PropTypes.bool.isRequired
     };
 
     changeSong = event => {
@@ -26,6 +30,15 @@ const SongSelector = Radium(
     };
 
     render() {
+      const {
+        selectedSong,
+        songData,
+        enableSongSelection,
+        filterOn
+      } = this.props;
+
+      const songKeys = getFilteredSongKeys(songData, filterOn);
+
       return (
         <div id="song-selector-wrapper">
           <label>
@@ -35,17 +48,14 @@ const SongSelector = Radium(
             id="song_selector"
             style={styles.selectStyle}
             onChange={this.changeSong}
-            value={this.props.selectedSong}
-            disabled={!this.props.enableSongSelection}
+            value={selectedSong}
+            disabled={!enableSongSelection}
           >
-            {Object.keys(this.props.songData).map(
-              (option, i) =>
-                (this.props.filterOff || !this.props.songData[option].pg13) && (
-                  <option key={i} value={option}>
-                    {this.props.songData[option].title}
-                  </option>
-                )
-            )}
+            {songKeys.map((option, i) => (
+              <option key={i} value={option}>
+                {songData[option].title}
+              </option>
+            ))}
           </select>
         </div>
       );
@@ -67,27 +77,39 @@ class DanceVisualizationColumn extends React.Component {
   };
 
   state = {
-    filterOff: this.setFilterStatus()
+    filterOn: this.getFilterStatus()
   };
 
   /*
     Turn the song filter off
   */
   turnFilterOff = () => {
-    this.setState({filterOff: true});
+    this.setState({filterOn: false});
   };
 
   /*
     The filter defaults to on. If the user is over 13 (identified via account or anon dialog), filter turns off.
    */
-  setFilterStatus() {
+  getFilterStatus() {
+    const {userType, under13} = this.props;
+
+    // Check if song filter override is triggered and initialize song filter to true.
+    const songFilter = songFilterOn();
+    if (songFilter) {
+      return true;
+    }
+
     // userType - 'teacher', 'student', 'unknown' - signed out users.
-    // under13 - boolean for signed in user representing age category. Teacher assumed > 13.
-    const signedInOver13 =
-      this.props.userType === 'teacher' ||
-      (this.props.userType === 'student' && !this.props.under13);
-    const signedOutAge = signedOutOver13();
-    return signedInOver13 || signedOutAge;
+    // If the user is signed out . . .
+    if (userType === 'unknown') {
+      // Query session key set from user selection in age dialog.
+      // Return false (no filter), if user is over 13.
+      return !ageDialogSelectedOver13();
+    }
+
+    // User is signed in (student or teacher) and the filter override is not turned on.
+    // Return true (filter should be turned on) if the user is under 13. Teachers assumed over13.
+    return under13;
   }
 
   render() {
@@ -112,7 +134,7 @@ class DanceVisualizationColumn extends React.Component {
               setSong={this.props.setSong}
               selectedSong={this.props.selectedSong}
               songData={this.props.songData}
-              filterOff={this.state.filterOff}
+              filterOn={this.state.filterOn}
             />
           )}
           <ProtectedVisualizationDiv>

apps/src/dance/songs.js

@@ -106,3 +106,15 @@ export function parseSongOptions(songManifest) {
   });
   return songs;
 }
+
+// Given a songManifest, returns a list of keys that represent the songs to
+// be displayed based on whether the song filter is on.
+export function getFilteredSongKeys(fullSongManifest, filterOn) {
+  const allSongKeys = Object.keys(fullSongManifest);
+  if (filterOn) {
+    // Filter is on, only include songs that are not pg13.
+    return allSongKeys.filter(key => !fullSongManifest[key].pg13);
+  }
+  // Filter is off, all songs may be displayed.
+  return allSongKeys;
+}

apps/src/lib/levelbuilder/reference-guide-editor/ReferenceGuideEditAll.jsx

@@ -6,7 +6,7 @@ import FontAwesome from '@cdo/apps/templates/FontAwesome';
 import {
   getGuideChildren,
   organizeReferenceGuides
-} from './referenceGuideHelpers';
+} from '@cdo/apps/util/referenceGuideHelpers';
 import Dialog, {
   Title as DialogTitle,
   Body as DialogBody

apps/src/lib/levelbuilder/reference-guide-editor/ReferenceGuideEditor.jsx

@@ -84,13 +84,17 @@ export default function ReferenceGuideEditor(props) {
         <select
           className="input"
           value={referenceGuide.parent_reference_guide_key}
-          onChange={e =>
+          onChange={e => {
+            const value = e.target.value === 'null' ? null : e.target.value;
             setReferenceGuide({
               ...referenceGuide,
-              parent_reference_guide_key: e.target.value
-            })
-          }
+              parent_reference_guide_key: value
+            });
+          }}
         >
+          <option key={'null'} value="null">
+            No parent
+          </option>
           {referenceGuides
             .filter(guide => guide.key !== referenceGuide.key) // don't let a guide parent to itself
             .sort((a, b) => a.key.localeCompare(b.key)) // sort alphabetically

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

@@ -5,8 +5,12 @@ import ReferenceGuideView from '@cdo/apps/templates/referenceGuides/ReferenceGui
 
 $(() => {
   const referenceGuide = getScriptData('referenceGuide');
+  const referenceGuides = getScriptData('referenceGuides');
   ReactDOM.render(
-    <ReferenceGuideView referenceGuide={referenceGuide} />,
+    <ReferenceGuideView
+      referenceGuide={referenceGuide}
+      referenceGuides={referenceGuides}
+    />,
     document.getElementById('show-container')
   );
 });