config-editor-base 3.1.0 → 3.2.1

package/dist/index.js

@@ -5,7 +5,8 @@ var reactRedux = require('react-redux');
 var classNames = _interopDefault(require('classnames'));
 var validator = _interopDefault(require('@rjsf/validator-ajv6'));
 var Form = _interopDefault(require('@rjsf/core'));
-var saveAs = _interopDefault(require('file-saver'));
+var saveAs = require('file-saver');
+var saveAs__default = _interopDefault(saveAs);
 var Select = _interopDefault(require('react-select'));
 var Files = _interopDefault(require('react-files'));
 var applyNav = require('rjsf-tabs');
@@ -150,7 +151,7 @@ var loadFile = function loadFile(fileName) {
 var _require = require('detect-browser'),
   detect = _require.detect;
 var browser = detect();
-var crcBrowserSupport = ['chrome', 'firefox', 'opera', 'safari', 'edge'].includes(browser.name);
+var crcBrowserSupport = ['chrome', 'firefox', 'opera', 'safari', 'edge'].includes(browser && browser.name);
 
 var SET_SCHEMA_LIST = "editor/SET_SCHEMA_LIST";
 var SET_CONFIG_LIST = "editor/SET_CONFIG_LIST";
@@ -1294,6 +1295,19 @@ var runConfigurationWarningChecks = function runConfigurationWarningChecks(conte
     dispatch(checkCANmodMonitoringMode(content));
   };
 };
+var collectConfigurationWarnings = function collectConfigurationWarnings(content) {
+  var messages = [];
+  var _capture = function capture(action) {
+    if (typeof action === "function") return action(_capture, function () {
+      return {};
+    });
+    if (action && action.type === "alert/SET" && action.alert && action.alert.type === "warning") {
+      messages.push(action.alert.message);
+    }
+  };
+  _capture(runConfigurationWarningChecks(content));
+  return messages;
+};
 var checkCANmodMonitoringMode = function checkCANmodMonitoringMode(content) {
   return function (dispatch) {
     var _content$phy, _content$phy$can, _content$phy$can$phy;
@@ -1314,7 +1328,7 @@ var saveUpdatedConfiguration = function saveUpdatedConfiguration(filename, conte
     var blob = new Blob([JSON.stringify(content, null, 2)], {
       type: "text/json"
     });
-    saveAs(blob, "" + filename);
+    saveAs__default(blob, "" + filename);
   };
 };
 var setUpdatedFormData = function setUpdatedFormData(formData) {
@@ -1433,6 +1447,7 @@ var actions = {
   checkFileSplitValue: checkFileSplitValue,
   checkGNSSEstimate: checkGNSSEstimate,
   runConfigurationWarningChecks: runConfigurationWarningChecks,
+  collectConfigurationWarnings: collectConfigurationWarnings,
   checkCANmodMonitoringMode: checkCANmodMonitoringMode,
   saveUpdatedConfiguration: saveUpdatedConfiguration,
   setUpdatedFormData: setUpdatedFormData,
@@ -18938,11 +18953,9 @@ var PartialConfigLoader = /*#__PURE__*/function (_React$Component) {
     var _this$props = this.props,
       formData = _this$props.formData,
       schemaContent = _this$props.schemaContent;
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Partial config loader"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Partial config loader"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "form-group pl0 field-string"
     }, /*#__PURE__*/React.createElement("p", {
-      className: "reduced-margin"
-    }, "Upload partial Configuration File"), /*#__PURE__*/React.createElement("p", {
       className: "field-description field-description-shift"
     }, "Select a JSON file containing a partial Configuration File. This lets you e.g. load a list of transmit messages or filters. The loaded JSON is validated vs. the Rule Schema, after which it can be merged into the editor Configuration File (even if it is not valid)")), /*#__PURE__*/React.createElement("div", null, formData ? /*#__PURE__*/React.createElement("div", {
       className: "text-area-wrapper row no-gutters reduced-margin"
@@ -18961,20 +18974,31 @@ var PartialConfigLoader = /*#__PURE__*/function (_React$Component) {
       minFileSize: 0,
       clickable: true
     }, /*#__PURE__*/React.createElement("button", {
-      className: "btn btn-primary"
+      className: "btn btn-primary",
+      title: "Upload a partial Configuration File to merge it"
     }, "Load JSON file"), /*#__PURE__*/React.createElement("div", {
       className: "browse-file-name"
-    }, jsonFileName))), Object.keys(jsonFile).length ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("pre", {
+    }, jsonFileName))), Object.keys(jsonFile).length ? /*#__PURE__*/React.createElement("div", {
+      className: "text-area-wrapper row no-gutters"
+    }, /*#__PURE__*/React.createElement("pre", {
       className: "browse-file-preview"
-    }, JSON.stringify(jsonFile, null, 2)), formData ? /*#__PURE__*/React.createElement("div", null, mergedConfigValid ? /*#__PURE__*/React.createElement("span", null, " ", /*#__PURE__*/React.createElement("p", {
-      className: "btn-highlight"
+    }, JSON.stringify(jsonFile, null, 2)), formData ? /*#__PURE__*/React.createElement("div", null, mergedConfigValid ? /*#__PURE__*/React.createElement("div", {
+      className: "btn-highlight",
+      style: {
+        fontSize: "12px",
+        marginBottom: "8px"
+      }
     }, /*#__PURE__*/React.createElement("i", {
       className: "fa fa-check"
-    }), " \xA0Merged Configuration File validated")) : null, !mergedConfigValid ? /*#__PURE__*/React.createElement("p", {
-      className: "red-text"
+    }), " Merged Configuration File validated") : null, !mergedConfigValid ? /*#__PURE__*/React.createElement("div", {
+      className: "red-text",
+      style: {
+        fontSize: "12px",
+        marginBottom: "8px"
+      }
     }, /*#__PURE__*/React.createElement("i", {
       className: "fa fa-times"
-    }), " \xA0Merged Configuration File is invalid") : null, /*#__PURE__*/React.createElement("button", {
+    }), " Merged Configuration File is invalid") : null, /*#__PURE__*/React.createElement("button", {
       className: "btn btn-primary",
       onClick: this.onReview
     }, "Merge files")) : null) : null) : /*#__PURE__*/React.createElement("div", {
@@ -19151,6 +19175,57 @@ function ArrayFieldTemplate(props) {
   }), " "))));
 }
 
+var isPlainObject = function isPlainObject(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+};
+var jsonEqual = function jsonEqual(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+};
+var clone = function clone(value) {
+  return JSON.parse(JSON.stringify(value));
+};
+var computeConfigDelta = function computeConfigDelta(past, current) {
+  var deletions = [];
+  if (!isPlainObject(past) || !isPlainObject(current)) {
+    return {
+      partial: isPlainObject(current) ? clone(current) : {},
+      deletions: deletions
+    };
+  }
+  var _walk = function walk(pastNode, currentNode, path) {
+    var partialNode = {};
+    Object.keys(currentNode).forEach(function (key) {
+      var childPath = path ? path + '.' + key : key;
+      var pastValue = pastNode[key];
+      var currentValue = currentNode[key];
+      if (!(key in pastNode)) {
+        partialNode[key] = clone(currentValue);
+      } else if (isPlainObject(pastValue) && isPlainObject(currentValue)) {
+        var childPartial = _walk(pastValue, currentValue, childPath);
+        if (Object.keys(childPartial).length) {
+          partialNode[key] = childPartial;
+        }
+      } else if (!jsonEqual(pastValue, currentValue)) {
+        if (Array.isArray(pastValue) && isPlainObject(currentValue)) {
+          deletions.push(childPath);
+        } else {
+          partialNode[key] = clone(currentValue);
+        }
+      }
+    });
+    Object.keys(pastNode).forEach(function (key) {
+      if (!(key in currentNode)) {
+        deletions.push(path ? path + '.' + key : key);
+      }
+    });
+    return partialNode;
+  };
+  return {
+    partial: _walk(past, current, ''),
+    deletions: deletions
+  };
+};
+
 var selectOptions$1 = function selectOptions(Files) {
   Files = lodash.orderBy(Files, ["name"], ["desc"]);
   return [].concat(Files, [{
@@ -19166,7 +19241,7 @@ var pastCrc32 = "N/A";
 var _require$1 = require("detect-browser"),
   detect$1 = _require$1.detect;
 var browser$1 = detect$1();
-var crcBrowserSupport$1 = ["chrome", "firefox", "opera", "safari", "edge"].includes(browser$1.name);
+var crcBrowserSupport$1 = ["chrome", "firefox", "opera", "safari", "edge"].includes(browser$1 && browser$1.name);
 var EditorChangesComparison = /*#__PURE__*/function (_React$Component) {
   function EditorChangesComparison(props) {
     var _this;
@@ -19179,6 +19254,68 @@ var EditorChangesComparison = /*#__PURE__*/function (_React$Component) {
     _this.handleSelectChange = function (selectedValue) {
       _this.props.handleDropdownChange(selectedValue.value, "Previous Configuration File");
     };
+    _this.getPartialDelta = function () {
+      var _this$props = _this.props,
+        past = _this$props.past,
+        current = _this$props.current,
+        showAlert = _this$props.showAlert;
+      var pastObj = null;
+      try {
+        pastObj = JSON.parse(past);
+      } catch (e) {
+        pastObj = null;
+      }
+      if (!pastObj || typeof pastObj !== "object") {
+        if (showAlert) {
+          showAlert("info", "Select a Previous Configuration File first");
+        }
+        return null;
+      }
+      var _computeConfigDelta = computeConfigDelta(pastObj, current),
+        partial = _computeConfigDelta.partial,
+        deletions = _computeConfigDelta.deletions;
+      if (!Object.keys(partial).length) {
+        if (showAlert) {
+          showAlert("info", "No changes detected vs. the Previous Configuration File");
+        }
+        return null;
+      }
+      if (deletions.length && showAlert) {
+        showAlert("warning", deletions.length + " deleted setting(s) cannot be expressed in a partial config and were excluded: " + deletions.join(", "));
+      }
+      return {
+        partial: partial,
+        deletions: deletions
+      };
+    };
+    _this.onDownloadPartial = function () {
+      var delta = _this.getPartialDelta();
+      if (!delta) {
+        return;
+      }
+      var revisedConfigFile = _this.props.revisedConfigFile;
+      var fileName = "partial-" + (revisedConfigFile && revisedConfigFile.value || "config.json");
+      var blob = new Blob([JSON.stringify(delta.partial, null, 2)], {
+        type: "text/json"
+      });
+      saveAs.saveAs(blob, fileName);
+    };
+    _this.onTransferClick = function () {
+      var delta = _this.getPartialDelta();
+      if (!delta) {
+        return;
+      }
+      var _this$props2 = _this.props,
+        onTransferPartial = _this$props2.onTransferPartial,
+        closeChangesModal = _this$props2.closeChangesModal,
+        revisedConfigFile = _this$props2.revisedConfigFile;
+      closeChangesModal();
+      onTransferPartial({
+        partial: delta.partial,
+        deletions: delta.deletions,
+        configName: revisedConfigFile && revisedConfigFile.value || null
+      });
+    };
     _this.toggleCheckbox = _this.toggleCheckbox.bind(_this);
     _this.handleSelectChange = _this.handleSelectChange.bind(_this);
     _this.state = {
@@ -19189,17 +19326,17 @@ var EditorChangesComparison = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(EditorChangesComparison, _React$Component);
   var _proto = EditorChangesComparison.prototype;
   _proto.render = function render() {
-    var _this$props = this.props,
-      options = _this$props.options,
-      selected = _this$props.selected,
-      past = _this$props.past,
-      current = _this$props.current,
-      closeChangesModal = _this$props.closeChangesModal,
-      revisedConfigFile = _this$props.revisedConfigFile,
-      crc32EditorLive = _this$props.crc32EditorLive,
-      isCompareChanges = _this$props.isCompareChanges,
-      enableDownload = _this$props.enableDownload,
-      externalSubmit = _this$props.externalSubmit;
+    var _this$props3 = this.props,
+      options = _this$props3.options,
+      selected = _this$props3.selected,
+      past = _this$props3.past,
+      current = _this$props3.current,
+      closeChangesModal = _this$props3.closeChangesModal,
+      revisedConfigFile = _this$props3.revisedConfigFile,
+      crc32EditorLive = _this$props3.crc32EditorLive,
+      isCompareChanges = _this$props3.isCompareChanges,
+      enableDownload = _this$props3.enableDownload,
+      externalSubmit = _this$props3.externalSubmit;
     var pastCleaned = past && Object.keys(past).length ? JSON.stringify(JSON.parse(past), null, 2) : "";
     if (crcBrowserSupport$1 == 1 && past && Object.keys(past).length) {
       var _require2 = require("crc"),
@@ -19208,6 +19345,15 @@ var EditorChangesComparison = /*#__PURE__*/function (_React$Component) {
     } else {
       pastCrc32 = "N/A";
     }
+    var partialAvailable = false;
+    try {
+      var pastObj = past ? JSON.parse(past) : null;
+      if (pastObj && typeof pastObj === "object") {
+        partialAvailable = Object.keys(computeConfigDelta(pastObj, current).partial).length > 0;
+      }
+    } catch (e) {
+      partialAvailable = false;
+    }
     return /*#__PURE__*/React.createElement("div", {
       className: isCompareChanges ? "show modal-custom-wrapper" : "hidden modal-custom-wrapper"
     }, /*#__PURE__*/React.createElement("div", {
@@ -19284,7 +19430,19 @@ var EditorChangesComparison = /*#__PURE__*/function (_React$Component) {
       type: "submit",
       onClick: enableDownload,
       className: "btn btn-primary ml15"
-    }, " ", "Download to disk", " "))));
+    }, " ", "Download to disk", " "), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: this.onDownloadPartial,
+      className: "btn btn-white ml15",
+      disabled: !partialAvailable,
+      title: "Download the delta changes as a partial config JSON e.g. for application across multiple devices"
+    }, " ", "Download partial JSON to disk", " "), typeof this.props.onTransferPartial === "function" ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: this.onTransferClick,
+      className: "btn btn-white ml15",
+      disabled: !partialAvailable,
+      title: "Transfer the delta changes as a partial config JSON to the OTA batch manager for application across multiple devices"
+    }, " ", "Transfer to OTA batch manager", " ") : null)));
   };
   return EditorChangesComparison;
 }(React.Component);
@@ -19619,7 +19777,9 @@ var EditorSection = /*#__PURE__*/function (_React$Component) {
       handleDropdownChange: this.handleDropdownChange,
       closeChangesModal: this.closeChangesModal,
       enableDownload: this.enableDownload.bind(this),
-      externalSubmit: this.props.fetchFileContentExt ? true : false
+      externalSubmit: this.props.fetchFileContentExt ? true : false,
+      showAlert: this.props.showAlert,
+      onTransferPartial: this.props.onTransferPartial
     }), /*#__PURE__*/React.createElement("div", {
       className: classNames({
         'config-bar': true,
@@ -19834,6 +19994,64 @@ var SimpleDropdown = /*#__PURE__*/function (_React$Component) {
   return SimpleDropdown;
 }(React.Component);
 
+var CollapsiblePreview = /*#__PURE__*/function (_React$Component) {
+  function CollapsiblePreview() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(CollapsiblePreview, _React$Component);
+  var _proto = CollapsiblePreview.prototype;
+  _proto.render = function render() {
+    var _this$props = this.props,
+      open = _this$props.open,
+      onToggle = _this$props.onToggle,
+      data = _this$props.data,
+      onDownload = _this$props.onDownload,
+      label = _this$props.label;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: "10px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: onToggle,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        cursor: "pointer",
+        fontSize: "12px",
+        color: "#999999",
+        userSelect: "none"
+      }
+    }, /*#__PURE__*/React.createElement("i", {
+      className: open ? "fa fa-angle-down" : "fa fa-angle-right",
+      style: {
+        marginRight: "6px",
+        width: "8px"
+      }
+    }), label || "Show partial config preview"), open ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: "10px"
+      }
+    }, /*#__PURE__*/React.createElement("pre", {
+      className: "browse-file-preview",
+      style: {
+        maxHeight: "300px",
+        overflow: "auto",
+        fontSize: "11px"
+      }
+    }, JSON.stringify(data, null, 2)), onDownload ? /*#__PURE__*/React.createElement("button", {
+      className: "btn",
+      onClick: onDownload,
+      style: {
+        backgroundColor: "#fff",
+        border: "1px solid #ccc",
+        color: "#333",
+        marginTop: "8px"
+      }
+    }, "Download JSON") : null) : null);
+  };
+  return CollapsiblePreview;
+}(React.Component);
+
 var obdPids = [
 	{
 		service: "01",
@@ -22745,48 +22963,28 @@ var OBDTool = /*#__PURE__*/function (_React$Component) {
         marginBottom: "15px",
         marginTop: "10px"
       }
-    }, "When testing supported PIDs, make sure the ignition is on for 2 minutes before you connect the device. Let the device be connected for 5 minutes to perform the test."), mergedConfigValid === false && /*#__PURE__*/React.createElement("p", {
-      className: "red-text"
+    }, "When testing supported PIDs, make sure the ignition is on for 2 minutes before you connect the device. Let the device be connected for 5 minutes to perform the test."), mergedConfigValid === false && /*#__PURE__*/React.createElement("div", {
+      className: "red-text",
+      style: {
+        fontSize: "12px",
+        marginBottom: "8px"
+      }
     }, /*#__PURE__*/React.createElement("i", {
       className: "fa fa-times"
     }), " Merged Configuration File is invalid"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       className: "btn btn-primary",
       onClick: this.onMerge,
       disabled: !formData || Object.keys(formData).length === 0 || mergedConfigValid !== true
-    }, "Merge files"), /*#__PURE__*/React.createElement("button", {
-      className: "btn btn-default",
-      onClick: this.onDownload,
-      disabled: Object.keys(generatedConfig).length === 0,
-      style: {
-        marginLeft: "10px"
-      }
-    }, "Download JSON"))), Object.keys(generatedConfig).length > 0 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        cursor: "pointer",
-        fontSize: "12px",
-        marginTop: "8px"
-      }
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      checked: showPreview,
-      onChange: function onChange() {
+    }, "Merge files"))), Object.keys(generatedConfig).length > 0 && /*#__PURE__*/React.createElement(CollapsiblePreview, {
+      open: showPreview,
+      onToggle: function onToggle() {
         return _this9.setState({
           showPreview: !showPreview
         });
       },
-      style: {
-        marginRight: "6px",
-        marginBottom: "4px"
-      }
-    }), "Show partial config preview"), showPreview && /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginTop: "10px"
-      }
-    }, /*#__PURE__*/React.createElement("pre", {
-      className: "browse-file-preview"
-    }, JSON.stringify(combinedConfig, null, 2))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null)));
+      data: combinedConfig,
+      onDownload: this.onDownload
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null)));
   };
   return OBDTool;
 }(React.Component);
@@ -24871,7 +25069,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       style: {
         width: barWidth + "px",
         height: "10px",
-        backgroundColor: "#4a90d9",
+        backgroundColor: "#46a5e0",
         borderRadius: "2px",
         display: "inline-block"
       }
@@ -25337,7 +25535,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       }
     }, "Select: "), /*#__PURE__*/React.createElement("span", {
       style: {
-        color: "#337ab7",
+        color: "#46a5e0",
         cursor: "pointer",
         marginLeft: "4px"
       },
@@ -25351,7 +25549,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       }
     }, "|"), /*#__PURE__*/React.createElement("span", {
       style: {
-        color: "#337ab7",
+        color: "#46a5e0",
         cursor: "pointer"
       },
       onClick: function onClick() {
@@ -25364,7 +25562,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       }
     }, "|"), /*#__PURE__*/React.createElement("span", {
       style: {
-        color: "#337ab7",
+        color: "#46a5e0",
         cursor: "pointer"
       },
       onClick: function onClick() {
@@ -25377,7 +25575,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       }
     }, "|"), /*#__PURE__*/React.createElement("span", {
       style: {
-        color: "#337ab7",
+        color: "#46a5e0",
         cursor: "pointer"
       },
       onClick: function onClick() {
@@ -25645,11 +25843,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
           className: "btn btn-primary",
           onClick: _this10.onMerge,
           disabled: !_this10.props.formData || Object.keys(_this10.props.formData).length === 0 || _this10.state.mergedConfigValid !== true || !isFirmwareSupported || !isDeviceSupported
-        }, "Merge files"), /*#__PURE__*/React.createElement("button", {
-          className: "btn btn-default",
-          onClick: _this10.onDownload,
-          disabled: Object.keys(_this10.state.generatedFilterConfig).length === 0
-        }, "Download JSON")), function () {
+        }, "Merge files")), function () {
           var mergeDisabled = !_this10.props.formData || Object.keys(_this10.props.formData).length === 0 || _this10.state.mergedConfigValid !== true || !isFirmwareSupported || !isDeviceSupported;
           if (!mergeDisabled) return null;
           var reason = "";
@@ -25672,41 +25866,16 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
             }
           }, reason) : null;
         }());
-      }(), Object.keys(_this10.state.generatedFilterConfig).length > 0 && /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginTop: "10px"
-        }
-      }, /*#__PURE__*/React.createElement("label", {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          cursor: "pointer",
-          fontSize: "12px"
-        }
-      }, /*#__PURE__*/React.createElement("input", {
-        type: "checkbox",
-        checked: _this10.state.showFilterPreview,
-        onChange: function onChange() {
+      }(), Object.keys(_this10.state.generatedFilterConfig).length > 0 && /*#__PURE__*/React.createElement(CollapsiblePreview, {
+        open: _this10.state.showFilterPreview,
+        onToggle: function onToggle() {
           return _this10.setState({
             showFilterPreview: !_this10.state.showFilterPreview
           });
         },
-        style: {
-          marginRight: "6px",
-          marginBottom: "4px"
-        }
-      }), "Show partial config preview"), _this10.state.showFilterPreview && /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginTop: "10px"
-        }
-      }, /*#__PURE__*/React.createElement("pre", {
-        className: "browse-file-preview",
-        style: {
-          maxHeight: "300px",
-          overflow: "auto",
-          fontSize: "11px"
-        }
-      }, JSON.stringify(_this10.state.generatedFilterConfig, null, 2)))));
+        data: _this10.state.generatedFilterConfig,
+        onDownload: _this10.onDownload
+      }));
     }()), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null)));
   };
   return FilterBuilderTool;
@@ -25734,6 +25903,7 @@ var FilterBuilderTool$1 = reactRedux.connect(mapStateToProps$4, mapDispatchToPro
 exports.EditorSection = EditorSection$1;
 exports.FilterBuilderTool = FilterBuilderTool$1;
 exports.OBDTool = OBDTool$1;
+exports.computeConfigDelta = computeConfigDelta;
 exports.editor = reducer;
 exports.editorActions = actions;
 //# sourceMappingURL=index.js.map