fix loading of blocks with dynamic extra fields

package.json

@@ -15,8 +15,8 @@
     "@material-ui/core": "^4.11.0",
     "@sentry/react": "^6.0.0",
     "@sentry/tracing": "^6.0.0",
-    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.22.0",
     "blockly": "^6.20210701.0",
@@ -25,7 +25,7 @@
     "moment": "^2.28.0",
     "prismjs": "^1.25.0",
     "react": "^17.0.2",
-    "react-cookie-consent": "^5.2.0",
+    "react-cookie-consent": "^7.0.0",
     "react-dom": "^17.0.2",
     "react-markdown": "^5.0.2",
     "react-mde": "^11.5.0",

src/components/Blockly/blocks/sensebox-osem.js

@@ -1,56 +1,76 @@
-import * as Blockly from 'blockly/core';
+import * as Blockly from "blockly/core";
-import { getColour } from '../helpers/colour';
+import { getColour } from "../helpers/colour";
 
-import store from '../../../store';
+import store from "../../../store";
 
-var boxes = store.getState().auth.user ? store.getState().auth.user.boxes : null;
+var boxes = store.getState().auth.user
+  ? store.getState().auth.user.boxes
+  : null;
 store.subscribe(() => {
   boxes = store.getState().auth.user ? store.getState().auth.user.boxes : null;
 });
-var selectedBox = '';
+var selectedBox = "";
 
-
+Blockly.Blocks["sensebox_osem_connection"] = {
-Blockly.Blocks['sensebox_osem_connection'] = {
   init: function () {
     this.setTooltip(Blockly.Msg.senseBox_osem_connection_tip);
-        this.setHelpUrl('');
+    this.setHelpUrl("");
     this.setColour(getColour().sensebox);
     this.appendDummyInput()
       .appendField(Blockly.Msg.senseBox_osem_connection)
-            .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_osem_host, '"ingress.opensensemap.org"'], [Blockly.Msg.senseBox_osem_host_workshop, '"ingress.workshop.opensensemap.org"']]), "host")
+      .appendField(
-            .appendField('SSL')
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_osem_host, '"ingress.opensensemap.org"'],
+          [
+            Blockly.Msg.senseBox_osem_host_workshop,
+            '"ingress.workshop.opensensemap.org"',
+          ],
+        ]),
+        "host"
+      )
+      .appendField("SSL")
       .appendField(new Blockly.FieldCheckbox("TRUE"), "SSL");
     this.appendDummyInput()
       .setAlign(Blockly.ALIGN_LEFT)
       .appendField(Blockly.Msg.senseBox_osem_exposure)
-            .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_osem_stationary, 'Stationary'], [Blockly.Msg.senseBox_osem_mobile, 'Mobile']]), "type");
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_osem_stationary, "Stationary"],
+          [Blockly.Msg.senseBox_osem_mobile, "Mobile"],
+        ]),
+        "type"
+      );
     if (!boxes) {
       this.appendDummyInput()
         .setAlign(Blockly.ALIGN_LEFT)
         .appendField("senseBox ID")
         .appendField(new Blockly.FieldTextInput("senseBox ID"), "BoxID");
     } else {
-            var dropdown = []
+      var dropdown = [];
       for (var i = 0; i < boxes.length; i++) {
-                dropdown.push([boxes[i].name, boxes[i]._id])
+        dropdown.push([boxes[i].name, boxes[i]._id]);
       }
       this.appendDummyInput()
         .setAlign(Blockly.ALIGN_LEFT)
         .appendField("senseBox ID")
-                .appendField(new Blockly.FieldDropdown(dropdown), 'BoxID');
+        .appendField(new Blockly.FieldDropdown(dropdown), "BoxID");
     }
     this.appendDummyInput()
       .setAlign(Blockly.ALIGN_LEFT)
       .appendField(Blockly.Msg.senseBox_osem_access_token)
       .appendField(new Blockly.FieldTextInput("access_token"), "access_token");
-        this.appendStatementInput('DO')
+    this.appendStatementInput("DO")
       .appendField(Blockly.Msg.senseBox_sensor)
       .setCheck(null);
     this.setPreviousStatement(true, null);
     this.setNextStatement(true, null);
+    this.getField("type").setValidator(
+      function (val) {
+        this.updateShape_(val === "Mobile");
+      }.bind(this)
+    );
   },
   onchange: function (e) {
-
     var legal = false;
     // Is the block nested in a loop?
     var block = this;
@@ -72,77 +92,90 @@ Blockly.Blocks['sensebox_osem_connection'] = {
      * To add a new loop type add this to your code:
      * Blockly.Blocks['controls_flow_statements'].LOOP_TYPES.push('custom_loop');
      */
-        selectedBox = this.getFieldValue('BoxID');
+    selectedBox = this.getFieldValue("BoxID");
-        if (selectedBox !== '' && boxes) {
+    if (selectedBox !== "" && boxes) {
-            var accessToken = boxes.find(element => element._id === selectedBox).access_token
+      var accessToken = boxes.find(
+        (element) => element._id === selectedBox
+      ).access_token;
       if (accessToken !== undefined) {
-                this.getField('access_token').setValue(accessToken)
+        this.getField("access_token").setValue(accessToken);
       } else {
-                this.getField('access_token').setValue('access_token')
+        this.getField("access_token").setValue("access_token");
       }
     }
-
   },
 
-    mutationToDom: function () {
+  updateShape_(isMobile) {
-        var container = document.createElement('mutation');
+    if (isMobile) {
-        var input = this.getFieldValue('type');
+      if (this.getInput("lat") == null) {
-        this.updateShape_(input);
+        this.appendValueInput("lat", "Number").appendField(
-        container.setAttribute('type', input);
+          Blockly.Msg.senseBox_gps_lat,
-        return container;
+          "gps"
-    },
+        );
-
+        this.appendValueInput("lng", "Number").appendField(
-    domToMutation: function (xmlElement) {
+          Blockly.Msg.senseBox_gps_lng
-        var connections = xmlElement.getAttribute('connections');
+        );
-        this.updateShape_(connections);
+        this.appendValueInput("altitude", "Number").appendField(
-    },
+          Blockly.Msg.senseBox_gps_alt
-    /**
+        );
-     * Modify this block to have the correct number of pins available.
+        this.appendValueInput("timeStamp", "Number").appendField(
-     * @param {boolean}
+          Blockly.Msg.senseBox_gps_timeStamp
-     * @private
+        );
-     * @this Blockly.Block
-     */
-    updateShape_: function () {
-        var extraFieldExist = this.getFieldValue('gps');
-        var input = this.getFieldValue('type');
-        if ((input === 'Mobile') && extraFieldExist === null) {
-            this.appendValueInput('lat', 'Number')
-                .appendField(Blockly.Msg.senseBox_gps_lat, 'gps');
-            this.appendValueInput('lng', 'Number')
-                .appendField(Blockly.Msg.senseBox_gps_lng);
-            this.appendValueInput('altitude', 'Number')
-                .appendField(Blockly.Msg.senseBox_gps_alt);
-            this.appendValueInput('timeStamp', 'Number')
-                .appendField(Blockly.Msg.senseBox_gps_timeStamp);
       }
-
+    } else {
-        if (input === 'Stationary' && extraFieldExist !== null) {
+      this.removeInput("lat", true);
-            this.removeInput('lat');
+      this.removeInput("lng", true);
-            this.removeInput('lng');
+      this.removeInput("altitude", true);
-            this.removeInput('altitude');
+      this.removeInput("timeStamp", true);
-            this.removeInput('timeStamp');
     }
   },
-    LOOP_TYPES: ['sensebox_interval_timer']
+
+  //   updateShape_: function () {
+  //     var extraFieldExist = this.getFieldValue("gps");
+  //     var input = this.getFieldValue("type");
+  //     if (input === "Mobile" && extraFieldExist === null) {
+  //       this.appendValueInput("lat", "Number").appendField(
+  //         Blockly.Msg.senseBox_gps_lat,
+  //         "gps"
+  //       );
+  //       this.appendValueInput("lng", "Number").appendField(
+  //         Blockly.Msg.senseBox_gps_lng
+  //       );
+  //       this.appendValueInput("altitude", "Number").appendField(
+  //         Blockly.Msg.senseBox_gps_alt
+  //       );
+  //       this.appendValueInput("timeStamp", "Number").appendField(
+  //         Blockly.Msg.senseBox_gps_timeStamp
+  //       );
+  //     }
+
+  //     if (input === "Stationary" && extraFieldExist !== null) {
+  //       this.removeInput("lat");
+  //       this.removeInput("lng");
+  //       this.removeInput("altitude");
+  //       this.removeInput("timeStamp");
+  //     }
+  //   },
+  LOOP_TYPES: ["sensebox_interval_timer"],
 };
-Blockly.Blocks['sensebox_send_to_osem'] = {
+Blockly.Blocks["sensebox_send_to_osem"] = {
   init: function () {
     this.setTooltip(Blockly.Msg.senseBox_send_to_osem_tip);
-        this.setHelpUrl('');
+    this.setHelpUrl("");
     this.setColour(getColour().sensebox);
-        this.appendDummyInput()
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_send_to_osem);
-            .appendField(Blockly.Msg.senseBox_send_to_osem);
     if (boxes) {
-            this.appendValueInput('Value')
+      this.appendValueInput("Value")
-                .appendField('Phänomen')
+        .appendField("Phänomen")
-                .appendField(new Blockly.FieldDropdown(
+        .appendField(
-                    this.generateOptions), 'SensorID');
+          new Blockly.FieldDropdown(this.generateOptions),
+          "SensorID"
+        );
     } else {
-            this.appendValueInput('Value')
+      this.appendValueInput("Value")
         .setAlign(Blockly.ALIGN_LEFT)
-                .appendField('Phänomen')
+        .appendField("Phänomen")
-                .appendField(new Blockly.FieldTextInput(
+        .appendField(new Blockly.FieldTextInput("sensorID"), "SensorID");
-                    'sensorID'), 'SensorID')
     }
 
     this.setPreviousStatement(true, null);
@@ -150,24 +183,23 @@ Blockly.Blocks['sensebox_send_to_osem'] = {
   },
 
   generateOptions: function () {
-        var dropdown = [['', '']];
+    var dropdown = [["", ""]];
     var boxID = selectedBox;
-        if (boxID !== '' && boxes) {
+    if (boxID !== "" && boxes) {
-
+      let box = boxes.find((el) => el._id === boxID);
-            let box = boxes.find(el => el._id === boxID);
       if (box !== undefined) {
         for (var i = 0; i < box.sensors.length; i++) {
-                    dropdown.push([box.sensors[i].title, box.sensors[i]._id])
+          dropdown.push([box.sensors[i].title, box.sensors[i]._id]);
         }
       }
       if (dropdown.length > 1) {
-                var options = dropdown.slice(1)
+        var options = dropdown.slice(1);
-                return options
+        return options;
       } else {
-                return dropdown
+        return dropdown;
       }
     }
-        return dropdown
+    return dropdown;
   },
   /**
    * Called whenever anything on the workspace changes.
@@ -176,7 +208,6 @@ Blockly.Blocks['sensebox_send_to_osem'] = {
    * @this Blockly.Block
    */
   onchange: function () {
-
     var legal = false;
     // Is the block nested in a loop?
     var block = this;
@@ -198,5 +229,5 @@ Blockly.Blocks['sensebox_send_to_osem'] = {
    * To add a new loop type add this to your code:
    * Blockly.Blocks['controls_flow_statements'].LOOP_TYPES.push('custom_loop');
    */
-    LOOP_TYPES: ['sensebox_osem_connection']
+  LOOP_TYPES: ["sensebox_osem_connection"],
 };

src/components/Blockly/blocks/sensebox-sd.js

@@ -129,29 +129,16 @@ Blockly.Blocks["sensebox_sd_osem"] = {
       .setCheck(null);
     this.setPreviousStatement(true, null);
     this.setNextStatement(true, null);
-  },
+    this.getField("type").setValidator(
-  mutationToDom: function () {
+      function (val) {
-    var container = document.createElement("mutation");
+        this.updateShape_(val === "Mobile");
-    var input = this.getFieldValue("type");
+      }.bind(this)
-    this.updateShape_(input);
+    );
-    container.setAttribute("type", input);
-    return container;
   },
 
-  domToMutation: function (xmlElement) {
+  updateShape_(isMobile) {
-    var connections = xmlElement.getAttribute("connections");
+    if (isMobile) {
-    this.updateShape_(connections);
+      if (this.getInput("lat") == null) {
-  },
-  /**
-   * Modify this block to have the correct number of pins available.
-   * @param {boolean}
-   * @private
-   * @this Blockly.Block
-   */
-  updateShape_: function () {
-    var extraFieldExist = this.getFieldValue("gps");
-    var input = this.getFieldValue("type");
-    if (input === "Mobile" && extraFieldExist === null) {
         this.appendValueInput("lat", "Number").appendField(
           Blockly.Msg.senseBox_gps_lat,
           "gps"
@@ -163,14 +150,14 @@ Blockly.Blocks["sensebox_sd_osem"] = {
           Blockly.Msg.senseBox_gps_alt
         );
       }
-
+    } else {
-    if (input === "Stationary" && extraFieldExist !== null) {
+      this.removeInput("lat", true);
-      this.removeInput("lat");
+      this.removeInput("lng", true);
-      this.removeInput("lng");
+      this.removeInput("altitude", true);
-      this.removeInput("altitude");
     }
   },
 };
+
 Blockly.Blocks["sensebox_sd_save_for_osem"] = {
   init: function () {
     this.setTooltip(Blockly.Msg.sensebox_sd_save_for_osem_tip);

src/components/Blockly/blocks/sensebox-sensors.js

@@ -157,50 +157,23 @@ Blockly.Blocks["sensebox_sensor_pressure"] = {
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setTooltip(Blockly.Msg.senseBox_pressure_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_pressure_helpurl);
+    this.getField("NAME").setValidator(
+      function (val) {
+        this.updateShape_(val === "Altitude");
+      }.bind(this)
+    );
   },
-  /**
+  updateShape_(isAltitude) {
-   * Parse XML to restore the number of pins available.
+    if (isAltitude) {
-   * @param {!Element} xmlElement XML storage element.
+      if (this.getInput("extraField") == null) {
-   * @this Blockly.Block
-   */
-
-  domToMutation: function (xmlElement) {
-    xmlElement.getAttribute("port");
-  },
-  /**
-   * Create XML to represent number of pins selection.
-   * @return {!Element} XML storage element.
-   * @this Blockly.Block
-   */
-  mutationToDom: function () {
-    var container = document.createElement("mutation");
-    var input = this.getFieldValue("NAME");
-    this.updateShape_(input);
-    container.setAttribute("NAME", input);
-    return container;
-  },
-  /**
-   * Modify this block to have the correct number of pins available.
-   * @param {boolean}
-   * @private
-   * @this Blockly.Block
-   */
-  updateShape_: function () {
-    var extraFieldExist = this.getFieldValue("referencePressure");
-    var input = this.getFieldValue("NAME");
-    if (input === "Altitude" && extraFieldExist === null) {
         this.appendDummyInput("extraField")
           .setAlign(Blockly.ALIGN_RIGHT)
           .appendField(Blockly.Msg.senseBox_pressure_referencePressure)
           .appendField(new Blockly.FieldTextInput("1013"), "referencePressure")
           .appendField(Blockly.Msg.senseBox_pressure_referencePressure_dim);
       }
-
+    } else {
-    if (
+      this.removeInput("extraField", true);
-      (input === "Pressure" || input === "Temperature") &&
-      extraFieldExist !== null
-    ) {
-      this.removeInput("extraField");
     }
   },
 };
@@ -370,50 +343,23 @@ Blockly.Blocks["sensebox_button"] = {
     this.setOutput(true, Types.BOOLEAN.typeName);
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_button_tooltip);
+    this.getField("FUNCTION").setValidator(
+      function (val) {
+        this.updateShape_(val === "longPress");
+      }.bind(this)
+    );
   },
-  /**
+  updateShape_(isLongPress) {
-   * Parse XML to restore the number of pins available.
+    if (isLongPress) {
-   * @param {!Element} xmlElement XML storage element.
+      if (this.getInput("extraField") == null) {
-   * @this Blockly.Block
-   */
-
-  domToMutation: function (xmlElement) {
-    xmlElement.getAttribute("port");
-  },
-  /**
-   * Create XML to represent number of pins selection.
-   * @return {!Element} XML storage element.
-   * @this Blockly.Block
-   */
-  mutationToDom: function () {
-    var container = document.createElement("mutation");
-    var input = this.getFieldValue("FUNCTION");
-    this.updateShape_(input);
-    container.setAttribute("FUNCTION", input);
-    return container;
-  },
-  /**
-   * Modify this block to have the correct number of pins available.
-   * @param {boolean}
-   * @private
-   * @this Blockly.Block
-   */
-  updateShape_: function () {
-    var extraFieldExist = this.getFieldValue("time");
-    var input = this.getFieldValue("FUNCTION");
-    if (input === "longPress" && extraFieldExist === null) {
         this.appendDummyInput("extraField")
           .setAlign(Blockly.ALIGN_RIGHT)
           .appendField(Blockly.Msg.senseBox_pressure_referencePressure)
           .appendField(new Blockly.FieldTextInput("1000"), "time")
           .appendField("ms");
       }
-
+    } else {
-    if (
+      this.removeInput("extraField", true);
-      (input === "isPressed" || input === "wasPressed" || input === "Switch") &&
-      extraFieldExist !== null
-    ) {
-      this.removeInput("extraField");
     }
   },
 };