@kineticdata/react 5.1.0-rc.1 → 5.1.1

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

@@ -2,6 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { generateForm } from '../../form/Form';
 import { buildBindings, normalizeParameter } from './helpers';
 import { NodeParameter } from './models';
+import { checkOmittedParameters } from './TaskDefinitionConfigForm';
 
 var getOptions = function getOptions(menu) {
   return menu.split(',').filter(function (value) {
@@ -54,7 +55,8 @@ var fields = function fields(_ref2) {
         initialValue: parameter.value,
         options: parameter.menu ? getOptions(parameter.menu) : bindings,
         "transient": true,
-        enabled: false
+        enabled: false,
+        visible: checkOmittedParameters(node, parameter)
       };
     })), _toConsumableArray(parameters.map(function (parameter) {
       var matchingParameter = node.parameters.find(function (oldParameter) {
@@ -68,7 +70,8 @@ var fields = function fields(_ref2) {
         helpText: parameter.description,
         initialValue: matchingParameter ? matchingParameter.value : parameter.defaultValue,
         options: parameter.menu ? getOptions(parameter.menu) : bindings,
-        "transient": true
+        "transient": true,
+        visible: checkOmittedParameters(node, parameter)
       };
     })), [{
       name: 'parameters',

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

@@ -245,11 +245,20 @@ export var SvgCanvas = /*#__PURE__*/function (_Component) {
           x = _this$viewport.x,
           y = _this$viewport.y;
 
-      if (!isIE11) {
-        var transition = duration ? "transition: transform ".concat(duration, "ms ").concat(ease) : '';
-        this.transformer.current.setAttribute('style', "transform: translate(".concat(x, "px, ").concat(y, "px) scale(").concat(scale, ");").concat(transition));
+      if (isIE11) {
+        // this.transformer.current.setAttribute(
+        //   'transform',
+        //   `translate(${x} ${y}) scale(${scale})`,
+        // );
+        this.transformer.current.transform = "translate(".concat(x, " ").concat(y, ") scale(").concat(scale, ")");
       } else {
-        this.transformer.current.setAttribute('transform', "translate(".concat(x, " ").concat(y, ") scale(").concat(scale, ")"));
+        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;
       }
 
       if (this.viewport.scale < 0.26 && this.transformer.current.className.baseVal !== 'min-detail') {

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

@@ -0,0 +1,113 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { List, Map } from 'immutable';
+import { generateForm } from '../../form/Form';
+import { fetchForm, fetchKapps } from '../../../apis';
+export var checkOmittedParameters = function checkOmittedParameters(node, parameter) {
+  if (node.definitionId === 'system_submission_create_v1') {
+    return !['kappSlug', 'formSlug'].includes(parameter.id);
+  } else {
+    return true;
+  }
+};
+export var generateTaskDefinition = function generateTaskDefinition(taskDefinition) {
+  if (taskDefinition.definitionName === 'system_submission_create') {
+    return function (_ref) {
+      var form = _ref.form;
+      return _objectSpread(_objectSpread({}, taskDefinition), {}, {
+        parameters: [].concat(_toConsumableArray(taskDefinition.parameters.map(function (parameter) {
+          return parameter.id === 'kappSlug' ? _objectSpread(_objectSpread({}, parameter), {}, {
+            defaultValue: form.kapp.slug
+          }) : parameter.id === 'formSlug' ? _objectSpread(_objectSpread({}, parameter), {}, {
+            defaultValue: form.slug
+          }) : parameter;
+        })), _toConsumableArray(form.fields.map(function (field) {
+          return {
+            name: field.name,
+            defaultValue: '',
+            dependsOnId: null,
+            dependsOnValue: null,
+            description: '',
+            id: "values.".concat(field.name),
+            required: false
+          };
+        })))
+      });
+    };
+  } else {
+    return null;
+  }
+};
+
+var dataSources = function dataSources() {
+  return {
+    kapps: {
+      fn: fetchKapps,
+      params: [],
+      transform: function transform(data) {
+        return data.kapps;
+      }
+    }
+  };
+};
+
+var fields = function fields() {
+  return function () {
+    return [{
+      name: 'kappSlug',
+      label: 'Kapp',
+      type: 'select',
+      required: true,
+      options: function options(_ref2) {
+        var kapps = _ref2.kapps;
+        return kapps ? kapps.map(function (kapp) {
+          return Map({
+            value: kapp.get('slug'),
+            label: kapp.get('name')
+          });
+        }) : List();
+      },
+      onChange: function onChange(_ref3, actions) {
+        var values = _ref3.values;
+
+        if (!!values.get('form')) {
+          actions.setValue('form', null);
+        }
+      }
+    }, {
+      name: 'form',
+      label: 'Form',
+      type: 'form',
+      required: true,
+      enabled: function enabled(_ref4) {
+        var values = _ref4.values;
+        return values.get('kappSlug') !== '';
+      },
+      search: function search(_ref5) {
+        var values = _ref5.values;
+        return values.get('kappSlug') !== '' ? {
+          kappSlug: values.get('kappSlug')
+        } : {};
+      }
+    }];
+  };
+};
+
+var handleSubmit = function handleSubmit(_ref6) {
+  var taskDefinition = _ref6.taskDefinition;
+  return function (values) {
+    return fetchForm({
+      kappSlug: values.get('kappSlug'),
+      formSlug: values.getIn(['form', 'slug'], ''),
+      include: 'fields,kapp'
+    }).then(generateTaskDefinition(taskDefinition));
+  };
+};
+
+export var TaskDefinitionConfigForm = generateForm({
+  formOptions: ['taskDefinition'],
+  dataSources: dataSources,
+  fields: fields,
+  handleSubmit: handleSubmit
+});
+TaskDefinitionConfigForm.displayName = 'TaskDefinitionConfigForm';

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

@@ -155,7 +155,7 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
     };
 
     _this.isDirty = function (treeBuilderState) {
-      return treeBuilderState && !is(treeBuilderState.lastSave, treeBuilderState.tree);
+      return treeBuilderState && (!is(treeBuilderState.lastSave, treeBuilderState.tree) || !is(treeBuilderState.lastWebApi, treeBuilderState.webApi));
     };
 
     _this.state = {
@@ -202,7 +202,7 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
       // placeholder then we will call configureTreeBuilder with the component's
       // props at that time
       if (this.props.treeBuilderState === null) {
-        configureTreeBuilder(pick(this.props, ['treeKey', 'sourceName', 'sourceGroup', 'name']));
+        configureTreeBuilder(pick(this.props, ['treeKey', 'sourceName', 'sourceGroup', 'name', 'platformSourceName']));
       }
     }
   }, {
@@ -218,8 +218,8 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
         } // otherwise check for changes to the highlight prop and focus if it changes
         // and its a truthy value
         else if (this.props.highlight && !this.props.highlight.equals(prevProps.highlight)) {
-            this.panTo(this.props.highlight);
-          }
+          this.panTo(this.props.highlight);
+        }
       }
     }
   }, {
@@ -239,11 +239,14 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
           highlightId = _ref4[1];
 
       if (treeBuilderState) {
-        var redoStack = treeBuilderState.redoStack,
+        var lastSave = treeBuilderState.lastSave,
+            lastWebApi = treeBuilderState.lastWebApi,
+            redoStack = treeBuilderState.redoStack,
             saving = treeBuilderState.saving,
             tasks = treeBuilderState.tasks,
             tree = treeBuilderState.tree,
-            undoStack = treeBuilderState.undoStack;
+            undoStack = treeBuilderState.undoStack,
+            webApi = treeBuilderState.webApi;
         return this.props.children({
           actions: {
             deleteConnector: function deleteConnector(id) {
@@ -270,6 +273,18 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
                 dependencies: dependencies
               }));
             },
+            updateSettings: function updateSettings(values) {
+              return dispatch('TREE_UPDATE_SETTINGS', {
+                treeKey: treeKey,
+                values: values
+              });
+            },
+            updateWebApi: function updateWebApi(values) {
+              return dispatch('TREE_UPDATE_WEB_API', {
+                treeKey: treeKey,
+                values: values
+              });
+            },
             save: function save(_ref5) {
               var _ref5$overwrite = _ref5.overwrite,
                   overwrite = _ref5$overwrite === void 0 ? false : _ref5$overwrite,
@@ -305,12 +320,14 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
             }
           },
           dirty: this.isDirty(treeBuilderState),
-          name: tree.name,
+          lastTree: lastSave,
+          lastWebApi: lastWebApi,
+          name: tree ? tree.name : null,
           saving: saving,
           sidebarRef: this.sidebarRef,
           tasks: tasks,
           tree: tree,
-          treeBuilder: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SvgCanvas, {
+          treeBuilder: tree && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SvgCanvas, {
             ref: this.canvasRef
           }, tree.connectors.map(function (connector) {
             return /*#__PURE__*/React.createElement(Connector, {
@@ -350,7 +367,8 @@ export var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
               tasks: tasks,
               tree: tree
             });
-          }).toList()))
+          }).toList())),
+          webApi: webApi
         });
       }
 

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

@@ -1,13 +1,13 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { all, call, put, select, takeEvery } from 'redux-saga/effects';
 import { List, OrderedMap } from 'immutable';
 import { isFunction } from 'lodash-es';
 import { action, dispatch, regHandlers, regSaga } from '../../../store';
-import { deserializeTree, serializeTree, Connector, TreeBuilderState } from './models';
-import { cloneTree, fetchTaskCategories, fetchTree, updateTree } from '../../../apis/task';
+import { deserializeTree, serializeTree, Connector, TreeBuilderState, deserializeWebApi } from './models';
+import { cloneTree, fetchTaskCategories, fetchTree, fetchWebApi, updateTree, updateWebApi } from '../../../apis';
 import { renameDependencies, treeReturnTask } from './helpers';
 export var mountTreeBuilder = function mountTreeBuilder(treeKey) {
   return dispatch('TREE_MOUNT', {
@@ -26,12 +26,15 @@ export var configureTreeBuilder = function configureTreeBuilder(props) {
 
 var remember = function remember(state, treeKey) {
   return state.updateIn(['trees', treeKey, 'undoStack'], function (stack) {
-    return stack.push(state.getIn(['trees', treeKey, 'tree']));
+    return stack.push({
+      tree: state.getIn(['trees', treeKey, 'tree']),
+      webApi: state.getIn(['trees', treeKey, 'webApi'])
+    });
   }).deleteIn(['trees', treeKey, 'redoStack']);
 };
 
 regSaga(takeEvery('TREE_CONFIGURE', /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
-  var payload, name, sourceGroup, sourceName, treeKey, _yield$all, _yield$all2, tree, categories;
+  var payload, name, sourceGroup, sourceName, treeKey, webApiProps, _yield$all, _yield$all2, tree, categories, webApi;
 
   return _regeneratorRuntime.wrap(function _callee$(_context) {
     while (1) {
@@ -40,46 +43,52 @@ regSaga(takeEvery('TREE_CONFIGURE', /*#__PURE__*/_regeneratorRuntime.mark(functi
           payload = _ref.payload;
           _context.prev = 1;
           name = payload.name, sourceGroup = payload.sourceGroup, sourceName = payload.sourceName, treeKey = payload.treeKey;
-          _context.next = 5;
+          webApiProps = getWebApiProps(payload);
+          _context.next = 6;
           return all([call(fetchTree, {
             name: name,
             sourceGroup: sourceGroup,
             sourceName: sourceName,
-            include: 'bindings,details,treeJson'
+            include: 'bindings,categories,details,treeJson,inputs,outputs'
           }), call(fetchTaskCategories, {
             include: 'handlers.results,handlers.parameters,trees.parameters,trees.inputs,trees.outputs'
-          })]);
+          }), webApiProps ? call(fetchWebApi, _objectSpread(_objectSpread({}, webApiProps), {}, {
+            include: 'details,securityPolicies'
+          })) : {}]);
 
-        case 5:
+        case 6:
           _yield$all = _context.sent;
-          _yield$all2 = _slicedToArray(_yield$all, 2);
+          _yield$all2 = _slicedToArray(_yield$all, 3);
           tree = _yield$all2[0].tree;
           categories = _yield$all2[1].categories;
-          _context.next = 11;
+          webApi = _yield$all2[2].webApi;
+          _context.next = 13;
           return put(action('TREE_LOADED', {
             categories: categories,
+            kappSlug: webApiProps && webApiProps.kappSlug,
             treeKey: treeKey,
-            tree: deserializeTree(tree)
+            tree: deserializeTree(tree),
+            webApi: webApiProps && deserializeWebApi(webApi, webApiProps.kappSlug)
           }));
 
-        case 11:
-          _context.next = 16;
+        case 13:
+          _context.next = 18;
           break;
 
-        case 13:
-          _context.prev = 13;
+        case 15:
+          _context.prev = 15;
           _context.t0 = _context["catch"](1);
           console.error('Caught error loading tree', _context.t0);
 
-        case 16:
+        case 18:
         case "end":
           return _context.stop();
       }
     }
-  }, _callee, null, [[1, 13]]);
+  }, _callee, null, [[1, 15]]);
 })));
 regSaga(takeEvery('TREE_SAVE', /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref2) {
-  var payload, newName, onError, onSave, overwrite, treeKey, _yield$select, tree, name, sourceGroup, sourceName, _yield, error, newTree;
+  var payload, newName, onError, onSave, overwrite, treeKey, _yield$select, kappSlug, lastSave, lastWebApi, tree, webApi, name, sourceGroup, sourceName, _yield, error1, newTree, _yield2, error2, error;
 
   return _regeneratorRuntime.wrap(function _callee2$(_context2) {
     while (1) {
@@ -97,11 +106,15 @@ regSaga(takeEvery('TREE_SAVE', /*#__PURE__*/_regeneratorRuntime.mark(function _c
 
         case 5:
           _yield$select = _context2.sent;
+          kappSlug = _yield$select.kappSlug;
+          lastSave = _yield$select.lastSave;
+          lastWebApi = _yield$select.lastWebApi;
           tree = _yield$select.tree;
-          name = tree.name, sourceGroup = tree.sourceGroup, sourceName = tree.sourceName; // if a newName was passed we will be creating a new tree with the builder
+          webApi = _yield$select.webApi;
+          name = lastSave.name, sourceGroup = lastSave.sourceGroup, sourceName = lastSave.sourceName; // if a newName was passed we will be creating a new tree with the builder
           // contents, otherwise just an update
 
-          _context2.next = 10;
+          _context2.next = 14;
           return newName ? call(cloneTree, {
             name: name,
             sourceGroup: sourceGroup,
@@ -116,36 +129,50 @@ regSaga(takeEvery('TREE_SAVE', /*#__PURE__*/_regeneratorRuntime.mark(function _c
             tree: serializeTree(tree, overwrite)
           });
 
-        case 10:
+        case 14:
           _yield = _context2.sent;
-          error = _yield.error;
+          error1 = _yield.error;
           newTree = _yield.tree;
-          _context2.next = 15;
+          _context2.next = 19;
+          return webApi && !error1 ? call(updateWebApi, {
+            slug: lastWebApi.get('slug'),
+            kappSlug: kappSlug,
+            webApi: webApi
+          }) : {};
+
+        case 19:
+          _yield2 = _context2.sent;
+          error2 = _yield2.error;
+          error = error1 || error2; // dispatch the appropriate action based on the result of the call above
+
+          _context2.next = 24;
           return put(error ? action('TREE_SAVE_ERROR', {
             treeKey: treeKey,
             error: error.message || error,
             onError: onError
           }) : action('TREE_SAVE_SUCCESS', {
+            previousTree: lastSave,
             treeKey: treeKey,
             tree: newTree,
+            webApi: webApi,
             onSave: onSave
           }));
 
-        case 15:
-          _context2.next = 20;
+        case 24:
+          _context2.next = 29;
           break;
 
-        case 17:
-          _context2.prev = 17;
+        case 26:
+          _context2.prev = 26;
           _context2.t0 = _context2["catch"](1);
           console.error(_context2.t0);
 
-        case 20:
+        case 29:
         case "end":
           return _context2.stop();
       }
     }
-  }, _callee2, null, [[1, 17]]);
+  }, _callee2, null, [[1, 26]]);
 })));
 regSaga(takeEvery('TREE_SAVE_ERROR', /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref3) {
   var _ref3$payload, error, onError;
@@ -182,38 +209,45 @@ regSaga(takeEvery('TREE_SAVE_ERROR', /*#__PURE__*/_regeneratorRuntime.mark(funct
   }, _callee3, null, [[1, 7]]);
 })));
 regSaga(takeEvery('TREE_SAVE_SUCCESS', /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref4) {
-  var _ref4$payload, onSave, tree;
+  var _ref4$payload, onSave, previousTree, treeKey, tree;
 
   return _regeneratorRuntime.wrap(function _callee4$(_context4) {
     while (1) {
       switch (_context4.prev = _context4.next) {
         case 0:
-          _ref4$payload = _ref4.payload, onSave = _ref4$payload.onSave, tree = _ref4$payload.tree;
+          _ref4$payload = _ref4.payload, onSave = _ref4$payload.onSave, previousTree = _ref4$payload.previousTree, treeKey = _ref4$payload.treeKey;
           _context4.prev = 1;
 
           if (!isFunction(onSave)) {
-            _context4.next = 5;
+            _context4.next = 8;
             break;
           }
 
           _context4.next = 5;
-          return call(onSave, tree);
+          return select(function (state) {
+            return state.getIn(['trees', treeKey, 'tree']);
+          });
 
         case 5:
-          _context4.next = 10;
+          tree = _context4.sent;
+          _context4.next = 8;
+          return call(onSave, tree, previousTree);
+
+        case 8:
+          _context4.next = 13;
           break;
 
-        case 7:
-          _context4.prev = 7;
+        case 10:
+          _context4.prev = 10;
           _context4.t0 = _context4["catch"](1);
           console.error(_context4.t0);
 
-        case 10:
+        case 13:
         case "end":
           return _context4.stop();
       }
     }
-  }, _callee4, null, [[1, 7]]);
+  }, _callee4, null, [[1, 10]]);
 })));
 regHandlers({
   // the TreeBuilder component does nothing while the tree state is undefined,
@@ -234,11 +268,14 @@ regHandlers({
   TREE_LOADED: function TREE_LOADED(state, _ref8) {
     var _ref8$payload = _ref8.payload,
         categories = _ref8$payload.categories,
+        kappSlug = _ref8$payload.kappSlug,
         treeKey = _ref8$payload.treeKey,
-        tree = _ref8$payload.tree;
+        tree = _ref8$payload.tree,
+        webApi = _ref8$payload.webApi;
     return state.mergeIn(['trees', treeKey], {
-      categories: categories,
+      kappSlug: kappSlug,
       lastSave: tree,
+      lastWebApi: webApi,
       loading: false,
       tasks: List(categories).map(function (category) {
         return category.name === 'System Controls' ? _objectSpread(_objectSpread({}, category), {}, {
@@ -251,7 +288,8 @@ regHandlers({
       }).reduce(function (reduction, task) {
         return reduction.set(task.definitionId, task);
       }, OrderedMap()),
-      tree: tree
+      tree: tree,
+      webApi: webApi
     });
   },
   TREE_SAVE: function TREE_SAVE(state, _ref9) {
@@ -272,7 +310,8 @@ regHandlers({
   TREE_SAVE_SUCCESS: function TREE_SAVE_SUCCESS(state, _ref11) {
     var _ref11$payload = _ref11.payload,
         tree = _ref11$payload.tree,
-        treeKey = _ref11$payload.treeKey;
+        treeKey = _ref11$payload.treeKey,
+        webApi = _ref11$payload.webApi;
     var newTree = state.getIn(['trees', treeKey, 'tree']).merge({
       name: tree.name,
       versionId: tree.versionId
@@ -281,29 +320,39 @@ regHandlers({
       dirty: false,
       error: null,
       lastSave: newTree,
+      lastWebApi: webApi,
       saving: false,
-      tree: newTree
+      tree: newTree,
+      webApi: webApi
     });
   },
   TREE_UNDO: function TREE_UNDO(state, _ref12) {
     var treeKey = _ref12.payload.treeKey;
     return state.getIn(['trees', treeKey, 'undoStack']).isEmpty() ? state : state.updateIn(['trees', treeKey], function (builderState) {
       return builderState.merge({
-        tree: builderState.undoStack.last(),
-        redoStack: builderState.redoStack.push(builderState.tree),
-        undoStack: builderState.undoStack.butLast()
+        tree: builderState.undoStack.last().tree,
+        redoStack: builderState.redoStack.push({
+          tree: builderState.tree,
+          webApi: builderState.webApi
+        }),
+        undoStack: builderState.undoStack.butLast(),
+        webApi: builderState.undoStack.last().webApi
       });
-    });
+    }).updateIn(['trees', treeKey], synchronizeRoutineDefinition);
   },
   TREE_REDO: function TREE_REDO(state, _ref13) {
     var treeKey = _ref13.payload.treeKey;
     return state.getIn(['trees', treeKey, 'redoStack']).isEmpty() ? state : state.updateIn(['trees', treeKey], function (builderState) {
       return builderState.merge({
-        tree: builderState.redoStack.last(),
+        tree: builderState.redoStack.last().tree,
         redoStack: builderState.redoStack.butLast(),
-        undoStack: builderState.undoStack.push(builderState.tree)
+        undoStack: builderState.undoStack.push({
+          tree: builderState.tree,
+          webApi: builderState.webApi
+        }),
+        webApi: builderState.redoStack.last().webApi
       });
-    });
+    }).updateIn(['trees', treeKey], synchronizeRoutineDefinition);
   },
   TREE_UPDATE: function TREE_UPDATE(state, _ref14) {
     var _ref14$payload = _ref14.payload,
@@ -399,5 +448,63 @@ regHandlers({
         id = _ref22$payload.id,
         nodeId = _ref22$payload.nodeId;
     return remember(state, treeKey).setIn(['trees', treeKey, 'tree', 'connectors', id, 'tailId'], nodeId);
+  },
+  TREE_UPDATE_SETTINGS: function TREE_UPDATE_SETTINGS(state, _ref23) {
+    var _ref23$payload = _ref23.payload,
+        treeKey = _ref23$payload.treeKey,
+        values = _ref23$payload.values;
+    // If the updated settings are for a routine we rebuild the "Tree Input"
+    // bindings.
+    var bindings = values.inputs ? _objectSpread(_objectSpread({}, state.getIn(['trees', treeKey, 'tree', 'bindings'])), {}, {
+      'Tree Input': values.inputs.groupBy(function (input) {
+        return input.get('name');
+      }).map(function (list) {
+        return list.first().get('name');
+      }).map(function (name) {
+        return "<%=@inputs['".concat(name, "']%>");
+      }).toJS()
+    }) : state.getIn(['trees', treeKey, 'tree', 'bindings']);
+    return remember(state, treeKey).mergeIn(['trees', treeKey, 'tree'], _objectSpread(_objectSpread({}, values), {}, {
+      bindings: bindings
+    })).updateIn(['trees', treeKey], synchronizeRoutineDefinition);
+  },
+  TREE_UPDATE_WEB_API: function TREE_UPDATE_WEB_API(state, _ref24) {
+    var _ref24$payload = _ref24.payload,
+        treeKey = _ref24$payload.treeKey,
+        values = _ref24$payload.values;
+    return remember(state, treeKey).mergeIn(['trees', treeKey, 'webApi'], values).setIn(['trees', treeKey, 'tree', 'name'], values.slug);
   }
-});
+});
+
+var synchronizeRoutineDefinition = function synchronizeRoutineDefinition(treeBuilderState) {
+  var tree = treeBuilderState.tree;
+  var definitionId = tree.definitionId,
+      inputs = tree.inputs,
+      outputs = tree.outputs;
+  return treeBuilderState.update('tasks', function (tasks) {
+    return tasks.map(function (task, taskDefinitionId) {
+      return definitionId === taskDefinitionId ? _objectSpread(_objectSpread({}, task), {}, {
+        inputs: inputs.toJS(),
+        outputs: outputs.toJS()
+      }) : taskDefinitionId === 'system_tree_return_v1' ? treeReturnTask(tree) : task;
+    });
+  });
+};
+
+var getWebApiProps = function getWebApiProps(_ref25) {
+  var name = _ref25.name,
+      platformSourceName = _ref25.platformSourceName,
+      sourceGroup = _ref25.sourceGroup,
+      sourceName = _ref25.sourceName;
+
+  if (sourceName === platformSourceName && sourceGroup.startsWith('WebApis')) {
+    var kappSlug = sourceGroup.startsWith('WebApis > ') ? sourceGroup.replace('WebApis > ', '') : undefined;
+    var slug = name;
+    return {
+      kappSlug: kappSlug,
+      slug: slug
+    };
+  }
+
+  return null;
+};

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

@@ -331,7 +331,7 @@ export var normalizeParameter = function normalizeParameter(_ref12) {
     value: defaultValue
   }, rest);
 };
-var defaultOutputs = [{
+var defaultOutputs = List([{
   id: 'content',
   name: 'Content'
 }, {
@@ -346,7 +346,7 @@ var defaultOutputs = [{
   id: 'response_code',
   name: 'Response Code',
   defaultValue: '200'
-}];
+}]).map(Map);
 export var treeReturnTask = function treeReturnTask(tree) {
   return {
     deferrable: false,
@@ -358,7 +358,9 @@ export var treeReturnTask = function treeReturnTask(tree) {
     selectionCriterion: null,
     status: 'Active',
     visible: false,
-    parameters: (tree.taskDefinition ? tree.taskDefinition.outputs : defaultOutputs).map(function (output) {
+    parameters: (tree.definitionId ? tree.outputs : defaultOutputs).map(function (output) {
+      return output.toObject();
+    }).map(function (output) {
       return {
         name: output.name,
         defaultValue: output.defaultValue || '',