Merge pull request #42931 from code-dot-org/dtp_candidate_130daa5a

DTP (Test > Production: 130daa5)
code-dot-org · Oct 11, 2021 · 8b933d7 · 8b933d7
2 parents d5b1ba2 + 8b124e5
commit 8b933d7
Show file tree

Hide file tree

Showing 130 changed files with 2,637 additions and 1,016 deletions.
diff --git a/apps/i18n/common/en_us.json b/apps/i18n/common/en_us.json
@@ -1486,6 +1486,7 @@
   "projectTypeMinecraftHero": "Minecraft Hero",
   "projectTypePlaylab": "Play Lab",
   "projectTypePlaylabPreReader": "Play Lab (Pre-reader)",
+  "projectTypePoetry": "Poetry",
   "projectTypeStarwars": "Star Wars",
   "projectTypeStarwarsBlocks": "Star Wars (Blocks)",
   "projectTypeSpecialTopic": "Featured Topics",

diff --git a/apps/src/StudioApp.js b/apps/src/StudioApp.js
@@ -24,12 +24,9 @@ import AbuseError from './code-studio/components/AbuseError';
 import Alert from './templates/alert';
 import AuthoredHints from './authoredHints';
 import ChallengeDialog from './templates/ChallengeDialog';
-import DialogButtons from './templates/DialogButtons';
-import DialogInstructions from './templates/instructions/DialogInstructions';
 import DropletTooltipManager from './blockTooltips/DropletTooltipManager';
 import FeedbackUtils from './feedback';
 import InstructionsDialog from '@cdo/apps/templates/instructions/InstructionsDialog';
-import InstructionsDialogWrapperDEPRECATED from './templates/instructions/InstructionsDialogWrapperDEPRECATED';
 import SmallFooter from './code-studio/components/SmallFooter';
 import Sounds from './Sounds';
 import VersionHistory from './templates/VersionHistory';
@@ -54,12 +51,10 @@ import {
   configCircuitPlayground,
   configMicrobit
 } from './lib/kits/maker/dropletConfig';
-import {closeDialog as closeInstructionsDialog} from './redux/instructionsDialog';
 import {getStore} from './redux';
 import {getValidatedResult, initializeContainedLevel} from './containedLevels';
 import {lockContainedLevelAnswers} from './code-studio/levels/codeStudioLevels';
 import {parseElement as parseXmlElement} from './xml';
-import {resetAniGif} from '@cdo/apps/utils';
 import {setIsRunning, setIsEditWhileRun, setStepSpeed} from './redux/runState';
 import {isEditWhileRun} from './lib/tools/jsdebugger/redux';
 import {setPageConstants} from './redux/pageConstants';
@@ -320,27 +315,14 @@ StudioApp.prototype.init = function(config) {
   this.configureDom(config);
 
   if (!config.level.iframeEmbedAppAndCode) {
-    // We are migrating usages of InstructionsDialogWrapperDEPRECATED to use
-    // InstructionsDialog instead. NetSim is the first consumer to be migrated.
-    const useNewDialog = config.app === 'netsim';
     ReactDOM.render(
       <Provider store={getStore()}>
-        {useNewDialog ? (
-          <InstructionsDialog
-            title={msg.puzzleTitle({
-              stage_total: config.level.lesson_total,
-              puzzle_number: config.level.puzzle_number
-            })}
-          />
-        ) : (
-          <div>
-            <InstructionsDialogWrapperDEPRECATED
-              showInstructionsDialog={autoClose => {
-                this.showInstructionsDialog_(config.level, autoClose);
-              }}
-            />
-          </div>
-        )}
+        <InstructionsDialog
+          title={msg.puzzleTitle({
+            stage_total: config.level.lesson_total,
+            puzzle_number: config.level.puzzle_number
+          })}
+        />
       </Provider>,
       document.body.appendChild(document.createElement('div'))
     );
@@ -1311,115 +1293,6 @@ StudioApp.prototype.onReportComplete = function(response) {
   }
 };
 
-/**
- * Show our instructions dialog. This should never be called directly, and will
- * instead be called when the state of our redux store changes.
- * @param {object} level
- * @param {boolean} autoClose - closes instructions after 32s if true
- */
-StudioApp.prototype.showInstructionsDialog_ = function(level, autoClose) {
-  const reduxState = getStore().getState();
-  const isMarkdownMode =
-    !!reduxState.instructions.longInstructions &&
-    !reduxState.instructionsDialog.imgOnly;
-
-  var headerElement;
-  if (isMarkdownMode) {
-    headerElement = document.createElement('h1');
-    headerElement.className = 'markdown-level-header-text dialog-title';
-    headerElement.innerHTML = msg.puzzleTitle({
-      stage_total: level.lesson_total,
-      puzzle_number: level.puzzle_number
-    });
-    if (!this.icon) {
-      headerElement.className += ' no-modal-icon';
-    }
-  }
-
-  // Create a div to eventually hold this content, and add it to the
-  // overall container. We don't want to render directly into the
-  // container just yet, because our React component could contain some
-  // elements that don't want to be rendered until they are in the DOM
-  var instructionsReactContainer = document.createElement('div');
-  instructionsReactContainer.className = 'instructions-content';
-  var instructionsDiv = document.createElement('div');
-  instructionsDiv.className = isMarkdownMode
-    ? 'markdown-instructions-container'
-    : 'instructions-container';
-  instructionsDiv.appendChild(instructionsReactContainer);
-
-  var buttons = document.createElement('div');
-  instructionsDiv.appendChild(buttons);
-  ReactDOM.render(<DialogButtons ok={true} />, buttons);
-
-  // If there is an instructions block on the screen, we want the instructions dialog to
-  // shrink down to that instructions block when it's dismissed.
-  // We then want to flash the instructions block.
-  var hideOptions = null;
-  var endTargetSelector = '#bubble';
-
-  if ($(endTargetSelector).length) {
-    hideOptions = {};
-    hideOptions.endTarget = endTargetSelector;
-  }
-
-  var hideFn = _.bind(function() {
-    // Set focus to ace editor when instructions close:
-    if (this.editCode && this.currentlyUsingBlocks()) {
-      this.editor.aceEditor.focus();
-    }
-
-    // update redux
-    getStore().dispatch(closeInstructionsDialog());
-  }, this);
-
-  this.instructionsDialog = this.createModalDialog({
-    markdownMode: isMarkdownMode,
-    contentDiv: instructionsDiv,
-    icon: this.icon,
-    defaultBtnSelector: '#ok-button',
-    onHidden: hideFn,
-    scrollContent: true,
-    scrollableSelector: '.instructions-content',
-    header: headerElement
-  });
-
-  // Now that our elements are guaranteed to be in the DOM, we can
-  // render in our react components
-  $(this.instructionsDialog.div).on('show.bs.modal', () => {
-    ReactDOM.render(
-      <Provider store={getStore()}>
-        <DialogInstructions />
-      </Provider>,
-      instructionsReactContainer
-    );
-    resetAniGif(this.instructionsDialog.div.find('img.aniGif').get(0));
-  });
-
-  if (autoClose) {
-    setTimeout(
-      _.bind(function() {
-        this.instructionsDialog.hide();
-      }, this),
-      32000
-    );
-  }
-
-  var okayButton = buttons.querySelector('#ok-button');
-  if (okayButton) {
-    dom.addClickTouchEvent(
-      okayButton,
-      _.bind(function() {
-        if (this.instructionsDialog) {
-          this.instructionsDialog.hide();
-        }
-      }, this)
-    );
-  }
-
-  this.instructionsDialog.show({hideOptions: hideOptions});
-};
-
 /**
  *  Resizes the blockly workspace.
  */

diff --git a/apps/src/code-studio/assets/SpriteUpload.jsx b/apps/src/code-studio/assets/SpriteUpload.jsx
@@ -106,15 +106,16 @@ export default class SpriteUpload extends React.Component {
   };
 
   generateMetadata = () => {
-    const {filename, aliases} = this.state;
+    const {filename, aliases, category} = this.state;
     let image = this.refs.spritePreview;
     let metadata = {
-      name: filename,
+      name: filename.split('.')[0],
       aliases: aliases,
       frameCount: 1,
       frameSize: {x: image.clientWidth, y: image.clientHeight},
       looping: true,
-      frameDelay: 2
+      frameDelay: 2,
+      categories: [category]
     };
     this.setState({metadata: JSON.stringify(metadata)});
   };

diff --git a/apps/src/code-studio/initApp/loadApp.js b/apps/src/code-studio/initApp/loadApp.js
@@ -375,6 +375,12 @@ const sourceHandler = {
   getSelectedSong() {
     return getAppOptions().level.selectedSong;
   },
+  setSelectedPoem(poem) {
+    getAppOptions().level.selectedPoem = poem;
+  },
+  getSelectedPoem() {
+    return getAppOptions().level.selectedPoem;
+  },
   setInitialLevelHtml(levelHtml) {
     getAppOptions().level.levelHtml = levelHtml;
   },

diff --git a/apps/src/code-studio/initApp/project.js b/apps/src/code-studio/initApp/project.js
@@ -109,7 +109,8 @@ var currentSources = {
   html: null,
   makerAPIsEnabled: null,
   animations: null,
-  selectedSong: null
+  selectedSong: null,
+  selectedPoem: null
 };
 
 /**
@@ -134,6 +135,7 @@ function unpackSources(data) {
     makerAPIsEnabled: data.makerAPIsEnabled,
     generatedProperties: data.generatedProperties,
     selectedSong: data.selectedSong,
+    selectedPoem: data.selectedPoem,
     libraries: data.libraries
   };
 }
@@ -677,6 +679,7 @@ var projects = (module.exports = {
    * @param {function(boolean)} sourceHandler.setMakerAPIsEnabled
    * @param {function(): boolean} sourceHandler.getMakerAPIsEnabled
    * @param {function(): boolean} sourceHandler.setSelectedSong
+   * @param {function(): boolean} sourceHandler.setSelectedPoem
    */
   init(sourceHandler) {
     this.sourceHandler = sourceHandler;
@@ -699,6 +702,10 @@ var projects = (module.exports = {
         sourceHandler.setSelectedSong(currentSources.selectedSong);
       }
 
+      if (currentSources.selectedPoem) {
+        sourceHandler.setSelectedPoem(currentSources.selectedPoem);
+      }
+
       if (currentSources.animations) {
         sourceHandler.setInitialAnimationList(currentSources.animations);
       }
@@ -906,6 +913,8 @@ var projects = (module.exports = {
           return 'basketball';
         }
         return 'bounce';
+      case 'poetry':
+        return appOptions.level.standaloneAppName;
       default:
         return null;
     }
@@ -962,7 +971,7 @@ var projects = (module.exports = {
   },
   /**
    * Saves the project only if the sources {source, html, animations,
-   * makerAPIsEnabled, selectedSong} have changed.
+   * makerAPIsEnabled, selectedSong, selectedPoem} have changed.
    * @returns {Promise} A promise containing the project data if the project
    * was saved, otherwise returns a promise which resolves with no arguments.
    */
@@ -1180,6 +1189,11 @@ var projects = (module.exports = {
     return this.save();
   },
 
+  saveSelectedPoem(poem) {
+    this.sourceHandler.setSelectedPoem(poem);
+    return this.save();
+  },
+
   /**
    * Saves the project to the Channels API. Calls `callback` on success if a
    * callback function was provided.
@@ -1254,6 +1268,7 @@ var projects = (module.exports = {
           const html = this.sourceHandler.getLevelHtml();
           const makerAPIsEnabled = this.sourceHandler.getMakerAPIsEnabled();
           const selectedSong = this.sourceHandler.getSelectedSong();
+          const selectedPoem = this.sourceHandler.getSelectedPoem();
           const generatedProperties = this.sourceHandler.getGeneratedProperties();
           const libraries = this.sourceHandler.getLibrariesList();
           callback({
@@ -1262,6 +1277,7 @@ var projects = (module.exports = {
             animations,
             makerAPIsEnabled,
             selectedSong,
+            selectedPoem,
             generatedProperties,
             libraries
           });

diff --git a/apps/src/javalab/PlaygroundImage.jsx b/apps/src/javalab/PlaygroundImage.jsx
@@ -32,22 +32,9 @@ export default class PlaygroundImage extends React.Component {
     dynamicStyles.height = heightAdjusted;
     dynamicStyles.marginTop = yAdjusted;
     dynamicStyles.marginLeft = xAdjusted;
-    dynamicStyles.clipPath = `inset(0 ${this.getClipPath(
-      widthAdjusted,
-      xAdjusted
-    )} ${this.getClipPath(heightAdjusted, yAdjusted)} 0)`;
     return dynamicStyles;
   }
 
-  // If the image would go outside of the 800x800 box we put playground
-  // into, cut it off at the appropriate dimension. This will crop any images
-  // that go outside of the box, which is our expected behavior.
-  getClipPath(dimension, coordinate) {
-    return dimension + coordinate > 800
-      ? `${dimension + coordinate - 800}px`
-      : 0;
-  }
-
   render() {
     const {fileUrl, id, onClick, isClickable} = this.props;
     let dynamicStyles = this.getDynamicStyles();

diff --git a/apps/src/javalab/PlaygroundText.jsx b/apps/src/javalab/PlaygroundText.jsx
@@ -39,7 +39,6 @@ export default class PlaygroundText extends React.Component {
       left: x * 2,
       top: y * 2,
       zIndex: index,
-      height: height * 2,
       color: `rgb(${parseInt(colorRed)}, ${parseInt(colorGreen)}, ${parseInt(
         colorBlue
       )})`,
@@ -85,6 +84,8 @@ const styles = {
     position: 'absolute',
     display: 'flex',
     alignItems: 'center',
-    transformOrigin: 'top left'
+    transformOrigin: 'top left',
+    whiteSpace: 'nowrap',
+    lineHeight: 1
   }
 };
diff --git a/apps/src/netsim/netsim.js b/apps/src/netsim/netsim.js
@@ -1404,11 +1404,5 @@ NetSim.prototype.resetShard = function() {
  * Show the instrutions modal dialog on top of the NetSim interface.
  */
 NetSim.prototype.showInstructionsDialog = function() {
-  getStore().dispatch(
-    openInstructionsDialog({
-      autoClose: false,
-      imgOnly: false,
-      hintsOnly: false
-    })
-  );
+  getStore().dispatch(openInstructionsDialog({imgOnly: false}));
 };
diff --git a/apps/src/p5lab/P5LabVisualizationHeader.jsx b/apps/src/p5lab/P5LabVisualizationHeader.jsx
@@ -26,7 +26,8 @@ class P5LabVisualizationHeader extends React.Component {
     allowAnimationMode: PropTypes.bool.isRequired,
     onInterfaceModeChange: PropTypes.func.isRequired,
     isBlockly: PropTypes.bool.isRequired,
-    numAllowedModes: PropTypes.number.isRequired
+    numAllowedModes: PropTypes.number.isRequired,
+    isShareView: PropTypes.bool.isRequired
   };
 
   changeInterfaceMode = mode => {
@@ -59,7 +60,9 @@ class P5LabVisualizationHeader extends React.Component {
     const {interfaceMode, allowAnimationMode} = this.props;
     return (
       <div>
-        {this.props.labType === P5LabType.POETRY && <PoemSelector />}
+        {!this.props.isShareView && this.props.labType === P5LabType.POETRY && (
+          <PoemSelector />
+        )}
         {this.props.numAllowedModes > 1 && (
           <div style={styles.main} id="playSpaceHeader">
             <ToggleGroup
@@ -110,7 +113,8 @@ export default connect(
     interfaceMode: state.interfaceMode,
     allowAnimationMode: allowAnimationMode(state),
     isBlockly: state.pageConstants.isBlockly,
-    numAllowedModes: countAllowedModes(state)
+    numAllowedModes: countAllowedModes(state),
+    isShareView: state.pageConstants.isShareView
   }),
   dispatch => ({
     onInterfaceModeChange: mode => dispatch(changeInterfaceMode(mode))