Detect unavailable extensions in dragged PNGs

[ewpatton]

Describe the bug

From the forum: If a PNG file containing blocks from an extension is dragged into a project that doesn't contain that extension, mayhem ensues.

Affects

• Designer
• Blocks editor
• Projects Explorer
• Companion
• Compiled apps
• Buildserver
• Debugging
• Other... (please describe)

Expected behavior

Given that the project doesn't contain the extension, we should probably show an error of some kind and refuse to instantiate the blocks.

Steps to reproduce

1. Create a project and import an extension such as the BLE extension.
2. Create a block stack and export it to a single PNG by right clicking on the block and selecting Download Blocks as PNG
3. Create a new project
4. Drag the PNG from step 2 into the block workspace of the project created in step 3

[d1vyanshu-kumar]

@ewpatton I'm working on this Issue. Could you assign it to me?

[d1vyanshu-kumar]

@ewpatton, could you please provide guidance on the following points?

• How should we handle refusing to instantiate blocks when an extension is missing? Specifically, how can we identify whether a block belongs to an extension that isn't included in the project? Given that App Inventor already has numerous built-in blocks(e.g.:Screen1.PermissionDenied), how do we distinguish between the built-in blocks and those from an extension? This would ensure that only the blocks native to App Inventor are allowed while blocking those from missing extensions.

• Conversely, if a project does include the required extension, how can we allow importing blocks through a PNG? For instance, if the project has the necessary extension already added, what mechanism can we use to verify and permit the imported block to be instantiated?

• Does this issue also extend to components? For example, if a specific component (like a CheckBox) is not present in the project, should we also restrict the respective blocks for that component?

[ewpatton]

@d1vyanshu-kumar You want to take a look at the importPngAsBlock function exportBlocksImage.js:

appinventor-sources/appinventor/blocklyeditor/src/exportBlocksImage.js

Line 526 in 54ab2e6

Blockly.importPngAsBlock = function(workspace, xy, png) {

This already provides the logic needed to import the images as this has been a feature in App Inventor for quite some time. component_event, component_method, and component_set_get all make use of the type definitions to know their shapes. For built-in components like CheckBox this isn't a problem since App Inventor has simple_components.json that defines them all. However, with extensions if the blocks are imported a lookup of the type definition results in undefined, and the thrown exception will cause the project to be in an inconsistent state. What we need to do is go through the XML content before constructing the blocks to see if the above mentioned block instances reference any component types not already in the workspace's component database. If you find even one, then we should abort the process and show a dialog instead that warns that the project doesn't contain the extension, possibly such as:

This image references the block "ConnectWithName" in the extension "BluetoothLE". You must import this extension before you can load these blocks.