config-editor-base 3.1.3 → 3.2.1

package/dist/index.modern.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 import validator from '@rjsf/validator-ajv6';
 import Form from '@rjsf/core';
-import saveAs from 'file-saver';
+import saveAs, { saveAs as saveAs$1 } from 'file-saver';
 import Select from 'react-select';
 import Files from 'react-files';
 import applyNav, { GENERIC_NAV } from 'rjsf-tabs';
@@ -147,7 +147,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";
@@ -1291,6 +1291,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;
@@ -1430,6 +1443,7 @@ var actions = {
   checkFileSplitValue: checkFileSplitValue,
   checkGNSSEstimate: checkGNSSEstimate,
   runConfigurationWarningChecks: runConfigurationWarningChecks,
+  collectConfigurationWarnings: collectConfigurationWarnings,
   checkCANmodMonitoringMode: checkCANmodMonitoringMode,
   saveUpdatedConfiguration: saveUpdatedConfiguration,
   setUpdatedFormData: setUpdatedFormData,
@@ -18935,11 +18949,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"
@@ -18958,10 +18970,13 @@ 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("div", {
       className: "btn-highlight",
@@ -19156,6 +19171,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, [{
@@ -19171,7 +19237,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;
@@ -19184,6 +19250,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$1(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 = {
@@ -19194,17 +19322,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"),
@@ -19213,6 +19341,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", {
@@ -19289,7 +19426,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);
@@ -19624,7 +19773,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,
@@ -24914,7 +25065,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       style: {
         width: barWidth + "px",
         height: "10px",
-        backgroundColor: "#4a90d9",
+        backgroundColor: "#46a5e0",
         borderRadius: "2px",
         display: "inline-block"
       }
@@ -25380,7 +25531,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       }
     }, "Select: "), /*#__PURE__*/React.createElement("span", {
       style: {
-        color: "#337ab7",
+        color: "#46a5e0",
         cursor: "pointer",
         marginLeft: "4px"
       },
@@ -25394,7 +25545,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       }
     }, "|"), /*#__PURE__*/React.createElement("span", {
       style: {
-        color: "#337ab7",
+        color: "#46a5e0",
         cursor: "pointer"
       },
       onClick: function onClick() {
@@ -25407,7 +25558,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       }
     }, "|"), /*#__PURE__*/React.createElement("span", {
       style: {
-        color: "#337ab7",
+        color: "#46a5e0",
         cursor: "pointer"
       },
       onClick: function onClick() {
@@ -25420,7 +25571,7 @@ var FilterBuilderTool = /*#__PURE__*/function (_React$Component) {
       }
     }, "|"), /*#__PURE__*/React.createElement("span", {
       style: {
-        color: "#337ab7",
+        color: "#46a5e0",
         cursor: "pointer"
       },
       onClick: function onClick() {
@@ -25745,5 +25896,5 @@ var mapDispatchToProps$4 = function mapDispatchToProps(dispatch) {
 };
 var FilterBuilderTool$1 = connect(mapStateToProps$4, mapDispatchToProps$4)(FilterBuilderTool);
 
-export { EditorSection$1 as EditorSection, FilterBuilderTool$1 as FilterBuilderTool, OBDTool$1 as OBDTool, reducer as editor, actions as editorActions };
+export { EditorSection$1 as EditorSection, FilterBuilderTool$1 as FilterBuilderTool, OBDTool$1 as OBDTool, computeConfigDelta, reducer as editor, actions as editorActions };
 //# sourceMappingURL=index.modern.js.map