Merge pull request #43741 from code-dot-org/nov21-blockly-var-rename

[Google Blockly] Customize variable dropdown options

apps/i18n/common/en_us.json

@@ -1590,6 +1590,10 @@
   "removeStudentHeader": "Are you sure you want to remove this student?",
   "removeUnusedStudentHeader": "Are you sure you want to remove {studentName}?",
   "rename": "Rename",
+  "renameAll": "Rename all {variableName}",
+  "renameAllPromptTitle": "Rename all {variableName} variables to:",
+  "renameThis": "Rename this variable",
+  "renameThisPromptTitle": "New variable name:",
   "repeat": "repeat",
   "replayButton": "Replay",
   "reportAbuse": "Report Abuse",

apps/src/blockly/addons/cdoFieldVariable.js

@@ -0,0 +1,93 @@
+import GoogleBlockly from 'blockly/core';
+import msg from '@cdo/locale';
+
+const RENAME_THIS_ID = 'RENAME_THIS_ID';
+const RENAME_ALL_ID = 'RENAME_ALL_ID';
+
+export default class FieldVariable extends GoogleBlockly.FieldVariable {
+  /**
+   * Handle the selection of an item in the variable dropdown menu.
+   * Special case the 'Rename all' and 'Rename this' options to prompt the user
+   * for a new name.
+   * @param {!Blockly.Menu} menu The Menu component clicked.
+   * @param {!Blockly.MenuItem} menuItem The MenuItem selected within menu.
+   * @protected
+   */
+  onItemSelected_(menu, menuItem) {
+    const oldVar = this.getText();
+    var id = menuItem.getValue();
+    if (this.sourceBlock_ && this.sourceBlock_.workspace) {
+      switch (id) {
+        case RENAME_ALL_ID:
+          // Rename all instances of this variable.
+          FieldVariable.modalPromptName(
+            msg.renameAllPromptTitle({variableName: oldVar}),
+            msg.rename(),
+            oldVar,
+            newName =>
+              this.sourceBlock_.workspace.renameVariableById(
+                this.variable_.getId(),
+                newName
+              )
+          );
+          break;
+        case RENAME_THIS_ID:
+          // Rename just this variable.
+          FieldVariable.modalPromptName(
+            msg.renameThisPromptTitle(),
+            msg.create(),
+            '',
+            newName => {
+              const newVar = this.sourceBlock_.workspace.createVariable(
+                newName
+              );
+              this.setValue(newVar.getId());
+            }
+          );
+          break;
+        default:
+          this.setValue(id);
+          break;
+      }
+    }
+  }
+}
+
+FieldVariable.originalDropdownCreate = FieldVariable.dropdownCreate;
+FieldVariable.dropdownCreate = function() {
+  const options = FieldVariable.originalDropdownCreate.call(this);
+
+  // Remove the last two options (Delete and Rename)
+  options.pop();
+  options.pop();
+
+  // Add our custom options (Rename this variable, Rename all)
+  options.push([msg.renameAll({variableName: this.getText()}), RENAME_ALL_ID]);
+  options.push([msg.renameThis(), RENAME_THIS_ID]);
+
+  return options;
+};
+
+/**
+ * Prompt the user for a variable name and perform some whitespace cleanup
+ * @param {string} promptText description text for window prompt
+ * @param {string} confirmButtonLabel Label of confirm button, e.g. "Rename"
+ * @param {string} defaultText default input text for window prompt
+ * @param {Function} callback with parameter (text) of new name
+ */
+FieldVariable.modalPromptName = function(
+  promptText,
+  confirmButtonLabel,
+  defaultText,
+  callback
+) {
+  Blockly.customSimpleDialog({
+    bodyText: promptText,
+    prompt: true,
+    promptPrefill: defaultText,
+    cancelText: confirmButtonLabel,
+    confirmText: msg.cancel(),
+    onConfirm: null,
+    onCancel: callback
+  });
+};

apps/src/blockly/googleBlocklyWrapper.js

@@ -9,6 +9,7 @@ import CdoFieldButton from './addons/cdoFieldButton';
 import CdoFieldDropdown from './addons/cdoFieldDropdown';
 import {CdoFieldImageDropdown} from './addons/cdoFieldImageDropdown';
 import CdoFieldLabel from './addons/cdoFieldLabel';
+import CdoFieldVariable from './addons/cdoFieldVariable';
 import FunctionEditor from './addons/functionEditor';
 import initializeGenerator from './addons/cdoGenerator';
 import CdoInput from './addons/cdoInput';
@@ -150,6 +151,7 @@ function initializeBlocklyWrapper(blocklyInstance) {
   blocklyWrapper.wrapReadOnlyProperty('VARIABLE_CATEGORY_NAME');
   blocklyWrapper.wrapReadOnlyProperty('Variables');
   blocklyWrapper.wrapReadOnlyProperty('VariableMap');
+  blocklyWrapper.wrapReadOnlyProperty('VariableModel');
   blocklyWrapper.wrapReadOnlyProperty('weblab_locale');
   blocklyWrapper.wrapReadOnlyProperty('WidgetDiv');
   blocklyWrapper.wrapReadOnlyProperty('Workspace');
@@ -161,6 +163,7 @@ function initializeBlocklyWrapper(blocklyInstance) {
   blocklyWrapper.blockly_.FieldDropdown = CdoFieldDropdown;
   blocklyWrapper.blockly_.FieldImageDropdown = CdoFieldImageDropdown;
   blocklyWrapper.blockly_.FieldLabel = CdoFieldLabel;
+  blocklyWrapper.blockly_.FieldVariable = CdoFieldVariable;
   blocklyWrapper.blockly_.FunctionEditor = FunctionEditor;
   blocklyWrapper.blockly_.Input = CdoInput;
   blocklyWrapper.geras.PathObject = CdoPathObject;
@@ -203,6 +206,7 @@ function initializeBlocklyWrapper(blocklyInstance) {
 
   blocklyWrapper.wrapSettableProperty('assetUrl');
   blocklyWrapper.wrapSettableProperty('behaviorEditor');
+  blocklyWrapper.wrapSettableProperty('customSimpleDialog');
   blocklyWrapper.wrapSettableProperty('BROKEN_CONTROL_POINTS');
   blocklyWrapper.wrapSettableProperty('BUMP_UNCONNECTED');
   blocklyWrapper.wrapSettableProperty('HSV_SATURATION');
@@ -321,6 +325,10 @@ function initializeBlocklyWrapper(blocklyInstance) {
     // apps, so we should also set it here.
     blocklyWrapper.assetUrl = opt_options.assetUrl || (path => `./${path}`);
 
+    // CDO Blockly takes customSimpleDialog as an inject option and uses it
+    // instead of the default prompt dialogs, so we should also set it here.
+    blocklyWrapper.customSimpleDialog = opt_options.customSimpleDialog;
+
     // Shrink container to make room for the workspace header
     container.style.height = `calc(100% - ${
       styleConstants['workspace-headers-height']