@kineticdata/react 6.1.0 → 6.1.6

package/lib/components/table/tests/components.js

@@ -18,7 +18,7 @@ var _excluded = ["header", "body", "footer"],
   _excluded9 = ["cells"],
   _excluded10 = ["filters"],
   _excluded11 = ["fields", "error", "buttons"],
-  _excluded12 = ["table", "pagination", "filter", "columnControl"];
+  _excluded12 = ["table", "pagination", "filter", "filterControl", "columnControl"];
 var stringifyProps = function stringifyProps(props) {
   return JSON.stringify(props,
   // Make sure functions are stringified to an empty function string
@@ -138,6 +138,12 @@ var mockTableConfig = exports.mockTableConfig = {
       type: "submit"
     }, "Search"));
   },
+  FilterControl: function FilterControl(props) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      "data-testid": "FilterControlMock",
+      "data-props": stringifyProps(props)
+    });
+  },
   TextFilter: function TextFilter(props) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       "data-testid": "TextFilterMock",
@@ -173,10 +179,11 @@ var TableViewMock = exports.TableViewMock = function TableViewMock(_ref12) {
   var table = _ref12.table,
     pagination = _ref12.pagination,
     filter = _ref12.filter,
+    filterControl = _ref12.filterControl,
     columnControl = _ref12.columnControl,
     props = (0, _objectWithoutProperties2["default"])(_ref12, _excluded12);
   return /*#__PURE__*/_react["default"].createElement("div", {
     "data-testid": "TableViewMock",
     "data-props": stringifyProps(props)
-  }, table, pagination, filter, columnControl);
+  }, table, pagination, filterControl, filter, columnControl);
 };

package/lib/components/task/builder/Connector.js

@@ -31,23 +31,23 @@ var Connector = exports.Connector = /*#__PURE__*/function (_Component) {
     _this.setTreeBuilder = function (treeBuilder) {
       _this.treeBuilder = treeBuilder;
     };
-    /*****************************************************************************
-     * Click handlers                                                            *
+    /*****************************************************************************
+     * Click handlers                                                            *
      ****************************************************************************/
     _this.onSelect = function (event) {
       if (typeof _this.props.onSelect === 'function') {
         _this.props.onSelect(_this.props.connector, event.shiftKey);
       }
     };
-    /*****************************************************************************
-     * Drag-and-drop support                                                     *
-     * Leverages the `watchDrag` helper exposed by the `TreeBuilder` instance.   *
-     * On move we update this instance's `head` or `tail` properties and set     *
-     * `dragging` to either "head" or "tail" so that the `draw` method knows if  *
-     * we are drawing to a dragging point or to the center of a node.            *
-     * On drop we check to see if the point we are dropping at is within a node  *
-     * (we check that its a valid node as well) and dispatch a redux action to   *
-     * persist the change or we reset the `head` or `tail` properties and `draw` *
+    /*****************************************************************************
+     * Drag-and-drop support                                                     *
+     * Leverages the `watchDrag` helper exposed by the `TreeBuilder` instance.   *
+     * On move we update this instance's `head` or `tail` properties and set     *
+     * `dragging` to either "head" or "tail" so that the `draw` method knows if  *
+     * we are drawing to a dragging point or to the center of a node.            *
+     * On drop we check to see if the point we are dropping at is within a node  *
+     * (we check that its a valid node as well) and dispatch a redux action to   *
+     * persist the change or we reset the `head` or `tail` properties and `draw` *
      ****************************************************************************/
     _this.dragHead = function (event) {
       _this.treeBuilder.watchDrag({
@@ -119,49 +119,53 @@ var Connector = exports.Connector = /*#__PURE__*/function (_Component) {
       _this.tail = point;
       _this.draw();
     };
-    /*****************************************************************************
-     * Rendering                                                                 *
-     * To make the drag-and-drop perform as fast as possible we manually         *
-     * manipulate some DOM elements in the `draw` method below. Anything that    *
-     * changes the instance's `head` or `tail` properties should also call       *
-     * `draw`                                                                    *
+    /*****************************************************************************
+     * Rendering                                                                 *
+     * To make the drag-and-drop perform as fast as possible we manually         *
+     * manipulate some DOM elements in the `draw` method below. Anything that    *
+     * changes the instance's `head` or `tail` properties should also call       *
+     * `draw`                                                                    *
      ****************************************************************************/
     _this.draw = function () {
       _this.connector.current.parentElement.style.display = '';
       var _getRectIntersections = (0, _helpers.getRectIntersections)((0, _assertThisInitialized2["default"])(_this)),
-        _getRectIntersections2 = (0, _slicedToArray2["default"])(_getRectIntersections, 2),
+        _getRectIntersections2 = (0, _slicedToArray2["default"])(_getRectIntersections, 3),
         _getRectIntersections3 = _getRectIntersections2[0],
         x1 = _getRectIntersections3.x,
         y1 = _getRectIntersections3.y,
         _getRectIntersections4 = _getRectIntersections2[1],
         x2 = _getRectIntersections4.x,
-        y2 = _getRectIntersections4.y;
+        y2 = _getRectIntersections4.y,
+        nodesOverlap = _getRectIntersections2[2];
       var dx = x2 - x1;
       var dy = y2 - y1;
       var length = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
       var angle = Math.atan2(dy, dx) * 180 / Math.PI + 180;
-      var connectorValue = _helpers.isIE11 ? "translate(".concat(x2, " ").concat(y2, ") rotate(").concat(angle, ")") : "translate(".concat(x2, "px, ").concat(y2, "px) rotate(").concat(angle, "deg)");
-      var connectorLabelValue = _helpers.isIE11 ? "translate(".concat(x1 + dx / 2, " ").concat(y1 + dy / 2, ")") : "translate(".concat(x1 + dx / 2, "px, ").concat(y1 + dy / 2, "px)");
-      if (_helpers.isIE11) {
-        _this.connector.current.transform = connectorValue;
-        if (_this.connectorLabel.current) {
-          _this.connectorLabel.current.transform = connectorLabelValue;
-        }
+      var connectorValue = "translate(".concat(x2, "px, ").concat(y2, "px) rotate(").concat(angle, "deg)");
+      var connectorLabelValue = "translate(".concat(x1 + dx / 2, "px, ").concat(y1 + dy / 2, "px)");
+
+      // If the nodes overlap, hide the connector line
+      if (nodesOverlap) {
+        _this.connector.current.style.display = 'none';
       } else {
-        _this.connector.current.style.transform = connectorValue;
-        if (_this.connectorLabel.current) {
-          _this.connectorLabel.current.style.transform = connectorLabelValue;
+        _this.connector.current.style.display = '';
+      }
+      _this.connector.current.style.transform = connectorValue;
+      if (_this.connectorLabel.current) {
+        var _this$props$connector3;
+        _this.connectorLabel.current.style.transform = connectorLabelValue;
+        // If the nodes overlap or the connector has an id, show the label
+        if (nodesOverlap || ((_this$props$connector3 = _this.props.connector) === null || _this$props$connector3 === void 0 ? void 0 : _this$props$connector3.id) !== null) {
+          _this.connectorLabel.current.style.display = '';
+        } else {
+          // If nodes don't overlap for a new connector, hide the label
+          _this.connectorLabel.current.style.display = 'none';
         }
       }
-
-      // this.connector.current.setAttribute(attribute, connectorValue);
       if (_this.connectorTail.current) {
         _this.connectorTail.current.setAttribute('cx', length);
       }
       _this.connectorBody.current.setAttribute('x2', length);
-      // if (this.connectorLabel.current) {
-      //   this.connectorLabel.current.setAttribute(attribute, connectorLabelValue);
-      // }
     };
     _this.connector = /*#__PURE__*/(0, _react.createRef)();
     _this.connectorBody = /*#__PURE__*/(0, _react.createRef)();
@@ -172,11 +176,11 @@ var Connector = exports.Connector = /*#__PURE__*/function (_Component) {
   (0, _createClass2["default"])(Connector, [{
     key: "shouldComponentUpdate",
     value:
-    /*****************************************************************************
-     * React lifecycle                                                           *
-     * Check the `connector` prop for change, which should be an immutable       *
-     * record. If that prop changes we need to sync the instance's `head` and    *
-     * `tail` values and call `draw`.                                            *
+    /*****************************************************************************
+     * React lifecycle                                                           *
+     * Check the `connector` prop for change, which should be an immutable       *
+     * record. If that prop changes we need to sync the instance's `head` and    *
+     * `tail` values and call `draw`.                                            *
      ****************************************************************************/
 
     function shouldComponentUpdate(nextProps) {
@@ -256,7 +260,7 @@ var Connector = exports.Connector = /*#__PURE__*/function (_Component) {
         className: "connector-head high-detail",
         points: constants.CONNECTOR_HEAD_POINTS,
         onMouseDown: this.dragHead
-      })), id !== null && /*#__PURE__*/_react["default"].createElement("g", {
+      })), id !== null ? /*#__PURE__*/_react["default"].createElement("g", {
         ref: this.connectorLabel,
         className: "connector-button",
         onClick: this.onSelect
@@ -300,7 +304,13 @@ var Connector = exports.Connector = /*#__PURE__*/function (_Component) {
         y: -constants.ICON_CENTER,
         height: constants.ICON_SIZE,
         width: constants.ICON_SIZE
-      }))));
+      }))) : /*#__PURE__*/_react["default"].createElement("circle", {
+        ref: this.connectorLabel,
+        className: "connector-placeholder",
+        r: constants.CONNECTOR_TAIL_RADIUS,
+        cx: "0",
+        cy: "0"
+      }));
     }
   }]);
   return Connector;

package/lib/components/task/builder/Node.js

@@ -28,8 +28,8 @@ var Node = exports.Node = /*#__PURE__*/function (_Component) {
     var _this;
     (0, _classCallCheck2["default"])(this, Node);
     _this = _super.call(this, props);
-    /*****************************************************************************
-     * Click handlers                                                            *
+    /*****************************************************************************
+     * Click handlers                                                            *
      ****************************************************************************/
     _this.onSelect = function (shiftKey) {
       return function () {
@@ -38,15 +38,15 @@ var Node = exports.Node = /*#__PURE__*/function (_Component) {
         }
       };
     };
-    /*****************************************************************************
-     * Drag-and-drop support                                                     *
-     * Leverages the `watchDrag` helper exposed by the `TreeBuilder` instance.   *
-     * On move we need to update any related connectors manually (for maximum    *
-     * performance).                                                             *
-     * On drop we dispatch an action to update the node in redux to persist the  *
-     * change.                                                                   *
-     * We also watch for drag on the plus button, which should leverage the      *
-     * `TreeBuilder` instance to start creating a new connector                  *
+    /*****************************************************************************
+     * Drag-and-drop support                                                     *
+     * Leverages the `watchDrag` helper exposed by the `TreeBuilder` instance.   *
+     * On move we need to update any related connectors manually (for maximum    *
+     * performance).                                                             *
+     * On drop we dispatch an action to update the node in redux to persist the  *
+     * change.                                                                   *
+     * We also watch for drag on the plus button, which should leverage the      *
+     * `TreeBuilder` instance to start creating a new connector                  *
      ****************************************************************************/
     _this.drag = function (event) {
       _this.treeBuilder.watchDrag({
@@ -101,15 +101,15 @@ var Node = exports.Node = /*#__PURE__*/function (_Component) {
   }, {
     key: "shouldComponentUpdate",
     value:
-    /*****************************************************************************
-     * React lifecycle                                                           *
-     * Check the `node` prop for change, which should be an immutable record.    *
-     * If that prop changes we need to sync the instance's `position` value and  *
-     * call `draw`.                                                              *
+    /*****************************************************************************
+     * React lifecycle                                                           *
+     * Check the `node` prop for change, which should be an immutable record.    *
+     * If that prop changes we need to sync the instance's `position` value and  *
+     * call `draw`.                                                              *
      ****************************************************************************/
 
     function shouldComponentUpdate(nextProps) {
-      return !this.props.node.equals(nextProps.node) || this.props.primary !== nextProps.primary || this.props.selected !== nextProps.selected || this.props.highlighted !== nextProps.highlighted;
+      return !this.props.node.equals(nextProps.node) || this.props.primary !== nextProps.primary || this.props.selected !== nextProps.selected || this.props.highlighted !== nextProps.highlighted || this.props.missingIntegration !== nextProps.missingIntegration;
     }
   }, {
     key: "componentDidMount",
@@ -124,37 +124,26 @@ var Node = exports.Node = /*#__PURE__*/function (_Component) {
       this.draw();
     }
 
-    /*****************************************************************************
-     * Rendering                                                                 *
-     * To make the drag-and-drop perform as fast as possible we manually         *
-     * manipulate some DOM elements in the `draw` method below. Anything that    *
-     * changes the instance's `position` property should also call `draw`        *
+    /*****************************************************************************
+     * Rendering                                                                 *
+     * To make the drag-and-drop perform as fast as possible we manually         *
+     * manipulate some DOM elements in the `draw` method below. Anything that    *
+     * changes the instance's `position` property should also call `draw`        *
      ****************************************************************************/
   }, {
     key: "draw",
     value: function draw() {
-      // const attribute = isIE11 ? 'transform' : 'style';
-      // const value = isIE11
-      //   ? `translate(${this.position.x} ${this.position.y})`
-      //   : `transform: translate(${this.position.x}px,  ${this.position.y}px)`;
-      // this.el.current.setAttribute(attribute, value);
-
-      if (_helpers.isIE11) {
-        this.el.current.transform = "translate(".concat(this.position.x, " ").concat(this.position.y, ")");
-      } else {
-        this.el.current.style.transform = "translate(".concat(this.position.x, "px,  ").concat(this.position.y, "px)");
-      }
+      this.el.current.style.transform = "translate(".concat(this.position.x, "px,  ").concat(this.position.y, "px)");
     }
   }, {
     key: "render",
     value: function render() {
-      var _node$parameters$find;
       var _this$props = this.props,
         node = _this$props.node,
         highlighted = _this$props.highlighted,
         primary = _this$props.primary,
         selected = _this$props.selected,
-        connections = _this$props.connections,
+        missingIntegration = _this$props.missingIntegration,
         tasks = _this$props.tasks;
       var defers = node.defers,
         definitionId = node.definitionId,
@@ -163,9 +152,7 @@ var Node = exports.Node = /*#__PURE__*/function (_Component) {
       var tempNode = typeof id !== 'number';
       var isRoutine = tasks.get(definitionId) && (0, _lodashEs.isArray)(tasks.get(definitionId).inputs);
       var isIntegration = node.definitionId.startsWith("".concat(_constants.ADVANCED_HANDLER_NAME_INTEGRATION, "_v"));
-      var missing = !tempNode && !tasks.has(node.definitionId) && !node.definitionId.startsWith('system_tree_return_v') && !node.definitionId.startsWith('system_start_v') || isIntegration && !connections.get((_node$parameters$find = node.parameters.find(function (p) {
-        return p.id === 'connection';
-      })) === null || _node$parameters$find === void 0 ? void 0 : _node$parameters$find.value);
+      var missing = !tempNode && !tasks.has(node.definitionId) && !node.definitionId.startsWith('system_tree_return_v') && !node.definitionId.startsWith('system_start_v') || missingIntegration;
       var invalid = missing || !tempNode && !name || node.parameters.some(function (parameter) {
         return parameter.required && parameter.value === '';
       });

package/lib/components/task/builder/SvgCanvas.js

@@ -12,7 +12,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inhe
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
 var _react = _interopRequireWildcard(require("react"));
 var _lodashEs = require("lodash-es");
-var _helpers = require("./helpers");
 var constants = _interopRequireWildcard(require("./constants"));
 var _models = require("./models");
 var SvgCanvas = exports.SvgCanvas = /*#__PURE__*/function (_Component) {
@@ -218,22 +217,9 @@ var SvgCanvas = exports.SvgCanvas = /*#__PURE__*/function (_Component) {
         scale = _this$viewport.scale,
         x = _this$viewport.x,
         y = _this$viewport.y;
-      if (_helpers.isIE11) {
-        // this.transformer.current.setAttribute(
-        //   'transform',
-        //   `translate(${x} ${y}) scale(${scale})`,
-        // );
-        this.transformer.current.transform = "translate(".concat(x, " ").concat(y, ") scale(").concat(scale, ")");
-      } else {
-        var transition = duration ? "transform ".concat(duration, "ms ").concat(ease) : '';
-        // this.transformer.current.setAttribute(
-        //   'style',
-        //   `transform: translate(${x}px, ${y}px) scale(${scale});${transition}`,
-        // );
-
-        this.transformer.current.style.transform = "translate(".concat(x, "px, ").concat(y, "px) scale(").concat(scale, ")");
-        this.transformer.current.style.transition = transition;
-      }
+      var transition = duration ? "transform ".concat(duration, "ms ").concat(ease) : '';
+      this.transformer.current.style.transform = "translate(".concat(x, "px, ").concat(y, "px) scale(").concat(scale, ")");
+      this.transformer.current.style.transition = transition;
       if (this.viewport.scale < 0.26 && this.transformer.current.className.baseVal !== 'min-detail') {
         this.transformer.current.className.baseVal = 'min-detail';
       }

package/lib/components/task/builder/TreeBuilder.js

@@ -413,8 +413,8 @@ var TreeBuilderComponent = exports.TreeBuilderComponent = /*#__PURE__*/function
                 var nodeId = _ref7.nodeId;
                 return nodeId === node.id;
               }),
+              missingIntegration: (0, _helpers.isNodeMissingIntegration)(node, connections),
               onSelect: _this2.props.onSelectNode,
-              connections: connections,
               tasks: tasks,
               tree: tree
             });
@@ -422,7 +422,6 @@ var TreeBuilderComponent = exports.TreeBuilderComponent = /*#__PURE__*/function
             ref: this.newNode,
             treeKey: treeKey,
             node: this.state.newNode,
-            connections: connections,
             tasks: tasks,
             tree: tree
           }))),

package/lib/components/task/builder/builder.redux.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.unmountTreeBuilder = exports.mountTreeBuilder = exports.configureTreeBuilder = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regeneratorRuntime"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _effects = require("redux-saga/effects");
 var _immutable = require("immutable");
@@ -44,7 +45,7 @@ var remember = function remember(state, treeKey) {
 (0, _store.regSaga)((0, _effects.takeEvery)('TREE_CONFIGURE', function (_ref) {
   var payload = _ref.payload;
   return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
-    var _treeObject$treeJson, _treeObject$treeJson$, name, sourceGroup, sourceName, treeKey, platformSourceName, webApiProps, workflowProps, _yield$all, _yield$all2, _yield$all2$, tree, treeError, _yield$all2$2, workflow, workflowError, categories, _yield$all2$3$connect, connections, _yield$all2$3, webApi, webApiError, kappSlug, formSlug, workflowObject, workflowObjectError, _yield$call, platformItem, platformItemError, _yield$call2, linkedWorkflow, linkedError, slugs, treeObject, loadError, operationIds;
+    var _treeObject$treeJson, _treeObject$treeJson$, name, sourceGroup, sourceName, treeKey, platformSourceName, webApiProps, workflowProps, _yield$all, _yield$all2, _yield$all2$, tree, treeError, _yield$all2$2, workflow, workflowError, categories, _yield$all2$3$connect, connections, _yield$all2$3, webApi, webApiError, kappSlug, formSlug, workflowObject, workflowObjectError, _yield$call, platformItem, platformItemError, _yield$call2, linkedWorkflow, linkedError, slugs, treeObject, loadError, operations;
     return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -62,15 +63,15 @@ var remember = function remember(state, treeKey) {
             include: 'bindings,categories,details,treeJson,inputs,outputs'
           }) : {},
           // Fetch the workflow if it is a linked workflow
-          workflowProps ? (0, _effects.call)(_apis.fetchWorkflow, (0, _objectSpread2["default"])({}, workflowProps)) : {},
+          workflowProps ? (0, _effects.call)(_apis.fetchWorkflow, (0, _objectSpread3["default"])({}, workflowProps)) : {},
           // Fetch task categories
           (0, _effects.call)(_apis.fetchTaskCategories, {
-            include: 'handlers.results,handlers.parameters,trees.parameters,trees.inputs,trees.outputs'
+            include: 'handlers.results,handlers.parameters,handlers.details,trees.parameters,trees.inputs,trees.outputs,trees.details'
           }),
           // Fetch connections
           (0, _effects.call)(_apis.fetchConnections),
           // Fetch the webAPI if applicable
-          webApiProps ? (0, _effects.call)(_apis.fetchWebApi, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, webApiProps), {}, {
+          webApiProps ? (0, _effects.call)(_apis.fetchWebApi, (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, webApiProps), {}, {
             include: 'details,securityPolicies'
           })) : {}]);
         case 6:
@@ -111,7 +112,7 @@ var remember = function remember(state, treeKey) {
             break;
           }
           _context.next = 33;
-          return (0, _effects.call)(_apis.fetchWorkflow, (0, _objectSpread2["default"])({
+          return (0, _effects.call)(_apis.fetchWorkflow, (0, _objectSpread3["default"])({
             workflowId: sourceGroup
           }, getPlatformItemSlugs(platformItem)));
         case 33:
@@ -140,15 +141,20 @@ var remember = function remember(state, treeKey) {
         case 42:
           // If workflow, set sourceName to platformSourceName since the value is
           // needed when creating new runs
-          treeObject = workflowObject ? (0, _objectSpread2["default"])({
+          treeObject = workflowObject ? (0, _objectSpread3["default"])({
             sourceName: platformSourceName
           }, workflowObject) : tree;
           loadError = workflowObjectError || treeError || webApiError; // Find the operation ids of any integration nodes
-          operationIds = (treeObject === null || treeObject === void 0 ? void 0 : (_treeObject$treeJson = treeObject.treeJson) === null || _treeObject$treeJson === void 0 ? void 0 : (_treeObject$treeJson$ = _treeObject$treeJson.nodes) === null || _treeObject$treeJson$ === void 0 ? void 0 : _treeObject$treeJson$.map(function (node) {
-            var _node$parameters$find;
-            return node.definitionId.startsWith("".concat(_constants.ADVANCED_HANDLER_NAME_INTEGRATION, "_v")) ? (_node$parameters$find = node.parameters.find(function (p) {
-              return p.id === 'operation';
-            })) === null || _node$parameters$find === void 0 ? void 0 : _node$parameters$find.value : null;
+          operations = (treeObject === null || treeObject === void 0 ? void 0 : (_treeObject$treeJson = treeObject.treeJson) === null || _treeObject$treeJson === void 0 ? void 0 : (_treeObject$treeJson$ = _treeObject$treeJson.nodes) === null || _treeObject$treeJson$ === void 0 ? void 0 : _treeObject$treeJson$.map(function (node) {
+            var _node$parameters$find, _node$parameters$find2;
+            return node.definitionId.startsWith("".concat(_constants.ADVANCED_HANDLER_NAME_INTEGRATION, "_v")) ? {
+              id: (_node$parameters$find = node.parameters.find(function (p) {
+                return p.id === 'operation';
+              })) === null || _node$parameters$find === void 0 ? void 0 : _node$parameters$find.value,
+              connectionId: (_node$parameters$find2 = node.parameters.find(function (p) {
+                return p.id === 'connection';
+              })) === null || _node$parameters$find2 === void 0 ? void 0 : _node$parameters$find2.value
+            } : null;
           }).filter(Boolean)) || [];
           _context.next = 47;
           return (0, _effects.all)([(0, _effects.put)((0, _store.action)('TREE_LOADED', {
@@ -162,9 +168,9 @@ var remember = function remember(state, treeKey) {
             treeObject && (!webApiProps || webApi) ? (0, _models.deserializeTree)(treeObject) : null,
             webApi: webApi ? (0, _models.deserializeWebApi)(webApi, webApiProps.kappSlug) : null,
             error: loadError ? loadError.message || loadError : null
-          })), operationIds.length > 0 ? (0, _effects.put)((0, _store.action)('TREE_LOAD_OPERATIONS', {
+          })), operations.length > 0 ? (0, _effects.put)((0, _store.action)('TREE_LOAD_OPERATIONS', {
             treeKey: treeKey,
-            operationIds: operationIds
+            operations: operations
           })) : null]);
         case 47:
           _context.next = 52;
@@ -217,39 +223,47 @@ var remember = function remember(state, treeKey) {
 (0, _store.regSaga)((0, _effects.takeEvery)('TREE_LOAD_OPERATIONS', function (_ref3) {
   var payload = _ref3.payload;
   return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee3() {
-    var treeKey, connectionId, _payload$operationIds, operationIds, _yield, _yield$operations, operations;
+    var treeKey, connectionId, _payload$operationIds, operationIds, operationsToLoad, _yield, _yield$operations, operations, loadedOperationIds;
     return (0, _regeneratorRuntime2["default"])().wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           _context3.prev = 0;
-          treeKey = payload.treeKey, connectionId = payload.connectionId, _payload$operationIds = payload.operationIds, operationIds = _payload$operationIds === void 0 ? [] : _payload$operationIds;
+          treeKey = payload.treeKey, connectionId = payload.connectionId, _payload$operationIds = payload.operationIds, operationIds = _payload$operationIds === void 0 ? [] : _payload$operationIds, operationsToLoad = payload.operations;
           _context3.next = 4;
           return connectionId ? (0, _effects.call)(_apis.fetchOperations, {
             connectionId: connectionId
           }) : (0, _effects.call)(_apis.fetchBulkOperations, {
-            ids: operationIds
+            ids: operationsToLoad ? operationsToLoad.map(function (op) {
+              return op.id;
+            }) : operationIds
           });
         case 4:
           _yield = _context3.sent;
           _yield$operations = _yield.operations;
           operations = _yield$operations === void 0 ? [] : _yield$operations;
-          _context3.next = 9;
+          loadedOperationIds = operations.reduce(function (ids, op) {
+            return (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, ids), {}, (0, _defineProperty2["default"])({}, op.id, true));
+          }, {});
+          _context3.next = 10;
           return (0, _effects.put)((0, _store.action)('TREE_INTEGRATION_DATA_LOADED', {
+            missing: operationsToLoad ? operationsToLoad.filter(function (op) {
+              return !loadedOperationIds[op.id];
+            }) : null,
             operations: operations,
             treeKey: treeKey
           }));
-        case 9:
-          _context3.next = 14;
+        case 10:
+          _context3.next = 15;
           break;
-        case 11:
-          _context3.prev = 11;
+        case 12:
+          _context3.prev = 12;
           _context3.t0 = _context3["catch"](0);
           console.error('Caught error loading tree integration data', _context3.t0);
-        case 14:
+        case 15:
         case "end":
           return _context3.stop();
       }
-    }, _callee3, null, [[0, 11]]);
+    }, _callee3, null, [[0, 12]]);
   })();
 }));
 var getPlatformItemSlugs = function getPlatformItemSlugs(platformItem) {
@@ -294,13 +308,13 @@ var getPlatformItemSlugs = function getPlatformItemSlugs(platformItem) {
           // endpoint to create the workflow
           _context4.next = 14;
           return newName ? tree.event ? (0, _effects.call)(_apis.createWorkflow, {
-            workflow: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _models.serializeTree)(tree)), {}, {
+            workflow: (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, (0, _models.serializeTree)(tree)), {}, {
               name: newName
             }),
             kappSlug: kappSlug,
             formSlug: formSlug
           }) : (0, _effects.call)(_apis.createTree, {
-            tree: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _models.serializeTree)(tree, true)), {}, {
+            tree: (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, (0, _models.serializeTree)(tree, true)), {}, {
               name: newName
             })
           }) : tree.event ? (0, _effects.call)(_apis.updateWorkflow, {
@@ -464,7 +478,7 @@ var getPlatformItemSlugs = function getPlatformItemSlugs(platformItem) {
       lastWebApi: webApi,
       loading: false,
       tasks: (0, _immutable.List)(categories).map(function (category) {
-        return category.name === 'System Controls' ? (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, category), {}, {
+        return category.name === 'System Controls' ? (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, category), {}, {
           handlers: [].concat((0, _toConsumableArray2["default"])(category.handlers), [tree ? (0, _helpers.treeReturnTask)(tree) : null]).filter(Boolean)
         }) : category;
       }).flatMap(function (category) {
@@ -483,7 +497,8 @@ var getPlatformItemSlugs = function getPlatformItemSlugs(platformItem) {
     var _ref11$payload = _ref11.payload,
       treeKey = _ref11$payload.treeKey,
       connections = _ref11$payload.connections,
-      operations = _ref11$payload.operations;
+      operations = _ref11$payload.operations,
+      missing = _ref11$payload.missing;
     return state.updateIn(['trees', treeKey, 'connections'], function (connectionsMap) {
       // Update connections map in state if data was provided
       var newConnectionsMap = connections ? (0, _immutable.fromJS)(connections).sortBy(function (conn) {
@@ -493,9 +508,14 @@ var getPlatformItemSlugs = function getPlatformItemSlugs(platformItem) {
       }, (0, _immutable.OrderedMap)()) : connectionsMap;
 
       // Update the operations maps in each connection if data was provided
-      return operations ? (0, _immutable.fromJS)(operations).reduce(function (map, op) {
+      var newConnectionsWithOperationsMap = operations ? (0, _immutable.fromJS)(operations).reduce(function (map, op) {
         return map.setIn([op.get('connectionId'), 'operations', op.get('id')], op);
       }, newConnectionsMap) : newConnectionsMap;
+
+      // Update the operations maps in each connection to set missing values
+      return missing ? (0, _immutable.fromJS)(missing).reduce(function (map, op) {
+        return map.has(op.get('connectionId')) ? map.setIn([op.get('connectionId'), 'operations', op.get('id')], null) : map;
+      }, newConnectionsWithOperationsMap) : newConnectionsWithOperationsMap;
     });
   },
   TREE_SAVE: function TREE_SAVE(state, _ref12) {
@@ -662,7 +682,7 @@ var getPlatformItemSlugs = function getPlatformItemSlugs(platformItem) {
       values = _ref26$payload.values;
     // If the updated settings are for a routine we rebuild the "Tree Input"
     // bindings.
-    var bindings = values.inputs ? (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state.getIn(['trees', treeKey, 'tree', 'bindings'])), {}, {
+    var bindings = values.inputs ? (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, state.getIn(['trees', treeKey, 'tree', 'bindings'])), {}, {
       'Tree Input': values.inputs.groupBy(function (input) {
         return input.get('name');
       }).map(function (list) {
@@ -671,7 +691,7 @@ var getPlatformItemSlugs = function getPlatformItemSlugs(platformItem) {
         return "<%=@inputs['".concat(name, "']%>");
       }).toJS()
     }) : state.getIn(['trees', treeKey, 'tree', 'bindings']);
-    return remember(state, treeKey).mergeIn(['trees', treeKey, 'tree'], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, values), {}, {
+    return remember(state, treeKey).mergeIn(['trees', treeKey, 'tree'], (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, values), {}, {
       bindings: bindings
     })).updateIn(['trees', treeKey], synchronizeRoutineDefinition);
   },
@@ -689,7 +709,7 @@ var synchronizeRoutineDefinition = function synchronizeRoutineDefinition(treeBui
     outputs = tree.outputs;
   return treeBuilderState.update('tasks', function (tasks) {
     return tasks.map(function (task, taskDefinitionId) {
-      return definitionId === taskDefinitionId ? (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, task), {}, {
+      return definitionId === taskDefinitionId ? (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, task), {}, {
         inputs: inputs.toJS(),
         outputs: outputs.toJS()
       }) : taskDefinitionId === 'system_tree_return_v1' ? (0, _helpers.treeReturnTask)(tree) : task;