add delete option to the function parameter edit prompt (microsoft#11076)

Author: riknoll

pxtblocks/builtins/functions.ts

@@ -30,6 +30,7 @@ export function initFunctions() {
     msg.FUNCTIONS_DEFNORETURN_TITLE = lf("function");
     msg.PROCEDURES_HUE = pxt.toolbox.getNamespaceColor("functions");
     msg.REPORTERS_HUE = pxt.toolbox.getNamespaceColor("variables");
+    msg.FUNCTIONS_DELETE_PARAMETER_BUTTON = lf("{id:delete-function-parameter}Delete");
 
     // builtin procedures_defnoreturn
     const proceduresDefId = "procedures_defnoreturn";

pxtblocks/external.ts

@@ -56,8 +56,19 @@ export function setOnWorkspaceContextMenu(impl: (workspace: Blockly.WorkspaceSvg
     _onWorkspaceContextMenu = impl;
 }
 
+// from webapp/src/core.ts DialogOptions
 export interface PromptOptions {
     placeholder: string;
+    buttons?: PromptButton[];
+}
+
+// from webapp/src/sui.ts ModalButton
+interface PromptButton {
+    label?: string;
+    title?: string;
+    icon?: string; // defaults to "checkmark"
+    className?: string; // defaults "positive"
+    onclick?: () => (Promise<void> | void);
 }
 
 let _prompt: (message: string, defaultValue: string, callback: (value: string) => void, options?: PromptOptions) => void;

pxtblocks/plugins/functions/fields/fieldArgumentEditor.ts

@@ -1,6 +1,8 @@
 import * as Blockly from "blockly";
 import { FunctionManager } from "../functionManager";
 import { ArgumentEditorBlock } from "../blocks/argumentEditorBlocks";
+import { prompt } from "../../../external";
+import { MsgKey } from "../msg";
 
 export interface FieldArgumentEditorConfig extends Blockly.FieldTextInputConfig {
 }
@@ -46,6 +48,50 @@ export class FieldArgumentEditor extends Blockly.FieldTextInput {
         }
     }
 
+    protected override showEditor_(
+        _e?: Event,
+        quietInput = false,
+        manageEphemeralFocus: boolean = true,
+    ) {
+        this.workspace_ = (this.sourceBlock_ as Blockly.BlockSvg).workspace;
+        if (
+            !quietInput &&
+            this.workspace_.options.modalInputs &&
+            (Blockly.utils.userAgent.MOBILE || Blockly.utils.userAgent.ANDROID || Blockly.utils.userAgent.IPAD)
+        ) {
+            this.showPromptEditorModal();
+        } else {
+            super.showEditor_(_e, quietInput, manageEphemeralFocus);
+        }
+    }
+
+    protected showPromptEditorModal() {
+        prompt(
+            Blockly.Msg.CHANGE_VALUE_TITLE,
+            this.getText(),
+            (text: string) => {
+                // Text is null if user pressed cancel button.
+                if (text !== null) {
+                    this.setValue(this.getValueFromEditorText_(text));
+                }
+                this.onFinishEditing_(this.value_);
+            },
+            {
+                placeholder: undefined,
+                buttons: [
+                    {
+                        label: Blockly.Msg[MsgKey.FUNCTIONS_DELETE_PARAMETER_BUTTON],
+                        className: "red",
+                        icon: "trash",
+                        onclick: () => {
+                            this.removeCallback();
+                        }
+                    }
+                ]
+            }
+        )
+    }
+
     protected removeCallback() {
         const parent = this.sourceBlock_?.getParent();
 

pxtblocks/plugins/functions/msg.ts

@@ -19,7 +19,8 @@ export enum MsgKey {
     FUNCTION_CREATE_NEW = "FUNCTION_CREATE_NEW",
     FUNCTION_FLYOUT_LABEL = "FUNCTION_FLYOUT_LABEL",
     FUNCTIONS_EDIT_OPTION = "FUNCTIONS_EDIT_OPTION",
-    FUNCTIONS_CREATE_CALL_OPTION = "FUNCTIONS_CREATE_CALL_OPTION"
+    FUNCTIONS_CREATE_CALL_OPTION = "FUNCTIONS_CREATE_CALL_OPTION",
+    FUNCTIONS_DELETE_PARAMETER_BUTTON = "FUNCTIONS_DELETE_PARAMETER_BUTTON"
 }
 
 function defineMsg(key: MsgKey, value: string) {
@@ -54,4 +55,6 @@ defineMsg(MsgKey.FUNCTION_FLYOUT_LABEL, "Your Functions");
 
 defineMsg(MsgKey.FUNCTIONS_EDIT_OPTION, "Edit Function");
 
-defineMsg(MsgKey.FUNCTIONS_CREATE_CALL_OPTION, "Create 'call %1'");
+defineMsg(MsgKey.FUNCTIONS_CREATE_CALL_OPTION, "Create 'call %1'");
+
+defineMsg(MsgKey.FUNCTIONS_DELETE_PARAMETER_BUTTON, "Delete");