Merge pull request code-dot-org#32533 from code-dot-org/remove-custom-behavior-button

Remove 'Create a Behavior/Function' buttons from the toolbox WYSIWYG levelbuilder page

Author: jmkulwik

apps/i18n/common/en_us.json

@@ -341,6 +341,7 @@
   "createAccountDesc": "Join Code.org! With an account you’ll be able to save your course progress, keep your apps and games, and share your favorites in the public gallery.",
   "createAccountToShare": "Create a Code.org account to share your project",
   "createAccountToShareDescription": "You must create a Code.org account before you can share and publish your project. Creating an account will also let you save your progress and continue to work on your project later.",
+  "createBlocklyBehavior": "Create a Behavior",
   "createNewClassroom": "Create a new classroom section to start assigning courses and seeing your student progress.",
   "createPassword": "Create a password",
   "createSection": "Create a section",

apps/src/StudioApp.js

@@ -43,7 +43,7 @@ import msg from '@cdo/locale';
 import project from './code-studio/initApp/project';
 import puzzleRatingUtils from './puzzleRatingUtils';
 import userAgentParser from './code-studio/initApp/userAgentParser';
-import {KeyCodes, TestResults} from './constants';
+import {KeyCodes, TestResults, TOOLBOX_EDIT_MODE} from './constants';
 import {assets as assetsApi} from './clientApi';
 import {blocks as makerDropletBlocks} from './lib/kits/maker/dropletConfig';
 import {closeDialog as closeInstructionsDialog} from './redux/instructionsDialog';
@@ -2034,7 +2034,7 @@ StudioApp.prototype.configureDom = function(config) {
       // If in level builder editing blocks, make workspace extra tall
       vizHeight = 3000;
       // Modify the arrangement of toolbox blocks so categories align left
-      if (config.level.edit_blocks === 'toolbox_blocks') {
+      if (config.level.edit_blocks === TOOLBOX_EDIT_MODE) {
         this.blockYCoordinateInterval = 80;
         config.blockArrangement = {category: {x: 20}};
       }
@@ -2640,7 +2640,7 @@ StudioApp.prototype.handleUsingBlockly_ = function(config) {
     this.checkForEmptyBlocks_ = false;
     if (
       config.level.edit_blocks === 'required_blocks' ||
-      config.level.edit_blocks === 'toolbox_blocks' ||
+      config.level.edit_blocks === TOOLBOX_EDIT_MODE ||
       config.level.edit_blocks === 'recommended_blocks'
     ) {
       // Don't show when run block for toolbox/required/recommended block editing
@@ -2681,10 +2681,9 @@ StudioApp.prototype.handleUsingBlockly_ = function(config) {
       config.level.topLevelProcedureAutopopulate,
       false
     ),
-    useModalFunctionEditor: utils.valueOr(
-      config.level.useModalFunctionEditor,
-      false
-    ),
+    useModalFunctionEditor:
+      config.level.edit_blocks !== TOOLBOX_EDIT_MODE &&
+      !!config.level.useModalFunctionEditor,
     useContractEditor: utils.valueOr(config.level.useContractEditor, false),
     disableExamples: utils.valueOr(config.level.disableExamples, false),
     defaultNumExampleBlocks: utils.valueOr(
@@ -2704,10 +2703,14 @@ StudioApp.prototype.handleUsingBlockly_ = function(config) {
     typeHints: utils.valueOr(config.level.showTypeHints, false)
   };
 
-  // Never show unused blocks or disable autopopulate in edit mode
+  // Never show unused blocks in edit mode. Procedure autopopulate should always
+  // be enabled in edit mode. Except in toolbox mode where functions/behaviors
+  // should never be created (and therefore the autopopulated blocks would be
+  // confusing).
   if (options.editBlocks) {
     options.showUnusedBlocks = false;
-    options.disableProcedureAutopopulate = false;
+    options.disableProcedureAutopopulate =
+      options.editBlocks === TOOLBOX_EDIT_MODE;
   }
 
   [

apps/src/constants.js

@@ -181,3 +181,5 @@ export const EXPO_SESSION_SECRET =
   '{"id":"fakefake-67ec-4314-a438-60589b9c0fa2","version":1,"expires_at":2000000000000}';
 
 export const BASE_DIALOG_WIDTH = 700;
+
+export const TOOLBOX_EDIT_MODE = 'toolbox_blocks';

apps/src/dance/blocks.js

@@ -331,7 +331,7 @@ export default {
         if (behaviorEditor && !behaviorEditor.isOpen()) {
           flyout.addButtonToFlyout_(
             cursor,
-            'Create a Behavior',
+            i18n.createBlocklyBehavior(),
             behaviorEditor.openWithNewFunction.bind(behaviorEditor)
           );
         }

apps/src/p5lab/P5Lab.js

@@ -7,6 +7,7 @@ import {changeInterfaceMode, viewAnimationJson} from './actions';
 import {startInAnimationTab} from './stateQueries';
 import {P5LabInterfaceMode, APP_WIDTH} from './constants';
 import {SpritelabReservedWords} from './spritelab/constants';
+import {TOOLBOX_EDIT_MODE} from '../constants';
 import experiments from '@cdo/apps/util/experiments';
 import {
   outputError,
@@ -834,7 +835,7 @@ P5Lab.prototype.onPuzzleComplete = function(submit, testResult, message) {
     // See StudioApp -> setStartBlocks_
     // Because of this, we need to remove the SharedFunctions when we are in
     // toolbox edit mode. Otherwise, they end up in a student's toolbox.
-    if (this.level.edit_blocks === 'toolbox_blocks') {
+    if (this.level.edit_blocks === TOOLBOX_EDIT_MODE) {
       var allBlocks = Array.from(xml.querySelectorAll('xml > block'));
       var toRemove = allBlocks.filter(element => {
         return (

apps/src/p5lab/spritelab/blocks.js

@@ -5,6 +5,7 @@ import {SVG_NS} from '@cdo/apps/constants';
 import {getStore} from '@cdo/apps/redux';
 import {getLocation} from './locationPickerModule';
 import {APP_HEIGHT, P5LabInterfaceMode} from '../constants';
+import {TOOLBOX_EDIT_MODE} from '../../constants';
 import {animationSourceUrl} from '../animationListModule';
 import {changeInterfaceMode} from '../actions';
 import {Goal, show} from '../AnimationPicker/animationPickerModule';
@@ -520,17 +521,19 @@ export default {
       Blockly.BlockValueType.BEHAVIOR,
       'gamelab_behavior_get'
     );
-    Blockly.Flyout.configure(Blockly.BlockValueType.BEHAVIOR, {
-      initialize(flyout, cursor) {
-        if (behaviorEditor && !behaviorEditor.isOpen()) {
-          flyout.addButtonToFlyout_(
-            cursor,
-            'Create a Behavior',
-            behaviorEditor.openWithNewFunction.bind(behaviorEditor)
-          );
-        }
-      },
-      addDefaultVar: false
-    });
+    if (blockInstallOptions.level.editBlocks !== TOOLBOX_EDIT_MODE) {
+      Blockly.Flyout.configure(Blockly.BlockValueType.BEHAVIOR, {
+        initialize(flyout, cursor) {
+          if (behaviorEditor && !behaviorEditor.isOpen()) {
+            flyout.addButtonToFlyout_(
+              cursor,
+              i18n.createBlocklyBehavior(),
+              behaviorEditor.openWithNewFunction.bind(behaviorEditor)
+            );
+          }
+        },
+        addDefaultVar: false
+      });
+    }
   }
 };