@atlaskit/editor-core 151.3.0 → 152.0.0

package/dist/esm/ui/ConfigPanel/ConfigPanel.js

@@ -9,10 +9,6 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -23,11 +19,12 @@ import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-n
 import Form from '@atlaskit/form';
 import { isTabGroup } from '@atlaskit/editor-common/extensions';
 import _isEqual from 'lodash/isEqual';
+import _mergeRecursive from 'lodash/merge';
 import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from '../../plugins/analytics';
 import LoadingState from './LoadingState';
 import Header from './Header';
 import ErrorMessage from './ErrorMessage';
-import { serialize, deserialize } from './transformers';
+import { serialize, deserialize, findDuplicateFields } from './transformers';
 import { injectIntl } from 'react-intl';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/custom-theme-button';
@@ -36,6 +33,7 @@ import { pluginKey as extensionPluginKey } from '../../plugins/extension/plugin-
 import WithPluginState from '../WithPluginState';
 import FormContent from './FormContent';
 import { messages } from './messages';
+import { FormErrorBoundary } from './FormErrorBoundary';
 
 function ConfigForm(_ref) {
   var canSave = _ref.canSave,
@@ -49,7 +47,17 @@ function ConfigForm(_ref) {
       onCancel = _ref.onCancel,
       onFieldChange = _ref.onFieldChange,
       parameters = _ref.parameters,
-      submitting = _ref.submitting;
+      submitting = _ref.submitting,
+      contextIdentifierProvider = _ref.contextIdentifierProvider;
+  useEffect(function () {
+    if (fields) {
+      var firstDuplicateField = findDuplicateFields(fields);
+
+      if (firstDuplicateField) {
+        throw new Error("Possible duplicate field name: `".concat(firstDuplicateField.name, "`."));
+      }
+    }
+  }, [fields]);
 
   if (isLoading || !hasParsedParameters && errorMessage === null) {
     return /*#__PURE__*/React.createElement(LoadingState, null);
@@ -61,44 +69,36 @@ function ConfigForm(_ref) {
     });
   }
 
-  return /*#__PURE__*/React.createElement(WithPluginState, {
-    plugins: {
-      extension: extensionPluginKey
-    },
-    render: function render(_ref2) {
-      var extension = _ref2.extension;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormContent, {
-        fields: fields,
-        parameters: parameters,
-        extensionManifest: extensionManifest,
-        onFieldChange: onFieldChange,
-        firstVisibleFieldName: firstVisibleFieldName,
-        contextIdentifierProvider: extension === null || extension === void 0 ? void 0 : extension.contextIdentifierProvider
-      }), /*#__PURE__*/React.createElement("div", {
-        style: canSave ? {} : {
-          display: 'none'
-        }
-      }, /*#__PURE__*/React.createElement(FormFooter, {
-        align: "start"
-      }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
-        type: "submit",
-        appearance: "primary"
-      }, intl.formatMessage(messages.submit)), /*#__PURE__*/React.createElement(Button, {
-        appearance: "default",
-        isDisabled: submitting,
-        onClick: onCancel
-      }, intl.formatMessage(messages.cancel))))));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormContent, {
+    fields: fields,
+    parameters: parameters,
+    extensionManifest: extensionManifest,
+    onFieldChange: onFieldChange,
+    firstVisibleFieldName: firstVisibleFieldName,
+    contextIdentifierProvider: contextIdentifierProvider
+  }), /*#__PURE__*/React.createElement("div", {
+    style: canSave ? {} : {
+      display: 'none'
     }
-  });
+  }, /*#__PURE__*/React.createElement(FormFooter, {
+    align: "start"
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    appearance: "primary"
+  }, intl.formatMessage(messages.submit)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    isDisabled: submitting,
+    onClick: onCancel
+  }, intl.formatMessage(messages.cancel))))));
 }
 
 var ConfigFormIntl = injectIntl(ConfigForm);
 
-var WithOnFieldChange = function WithOnFieldChange(_ref3) {
-  var getState = _ref3.getState,
-      autoSave = _ref3.autoSave,
-      handleSubmit = _ref3.handleSubmit,
-      children = _ref3.children;
+var WithOnFieldChange = function WithOnFieldChange(_ref2) {
+  var getState = _ref2.getState,
+      autoSave = _ref2.autoSave,
+      handleSubmit = _ref2.handleSubmit,
+      children = _ref2.children;
   var getStateRef = useRef(getState);
   useEffect(function () {
     getStateRef.current = getState;
@@ -153,14 +153,52 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "backfillTabFormData", function (fields, formData, currentParameters) {
-      var mergedTabGroups = fields.filter(isTabGroup).reduce(function (acc, field) {
-        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, field.name, _objectSpread(_objectSpread({}, currentParameters[field.name] || {}), formData[field.name] || {})));
+      var getRelevantData = function getRelevantData(field, formParams, currentParams, backfill) {
+        if (field.hasGroupedValues && !(field.name in backfill)) {
+          backfill[field.name] = {};
+        }
+
+        var actualFormParams = field.hasGroupedValues ? formParams[field.name] || {} : formParams;
+        var actualCurrentParams = field.hasGroupedValues ? currentParams[field.name] || {} : currentParams;
+        var actualBackfillParams = field.hasGroupedValues ? backfill[field.name] : backfill;
+        return {
+          formParams: actualFormParams,
+          currentParams: actualCurrentParams,
+          backfillParams: actualBackfillParams
+        };
+      }; // Traverse any tab structures and backfill field values on tabs
+      // which aren't shown. This filter should be ok because tabs are
+      // currently only allowed on top level
+
+
+      var mergedTabGroups = fields.filter(isTabGroup).reduce(function (missingBackfill, tabGroup) {
+        var _getRelevantData = getRelevantData(tabGroup, formData, currentParameters, missingBackfill),
+            tabGroupFormData = _getRelevantData.formParams,
+            tabGroupCurrentData = _getRelevantData.currentParams,
+            tabGroupParams = _getRelevantData.backfillParams; // Loop through tabs and see what fields are missing from current data
+
+
+        tabGroup.fields.forEach(function (tabField) {
+          var _getRelevantData2 = getRelevantData(tabField, tabGroupFormData, tabGroupCurrentData, tabGroupParams),
+              tabFormData = _getRelevantData2.formParams,
+              tabCurrentData = _getRelevantData2.currentParams,
+              tabParams = _getRelevantData2.backfillParams;
+
+          tabField.fields.forEach(function (field) {
+            if (field.name in tabFormData || !(field.name in tabCurrentData)) {
+              return;
+            }
+
+            tabParams[field.name] = tabCurrentData[field.name];
+          });
+        });
+        return missingBackfill;
       }, {});
-      return _objectSpread(_objectSpread({}, formData), mergedTabGroups);
+      return _mergeRecursive({}, mergedTabGroups, formData);
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleSubmit", /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(formData) {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(formData) {
         var _this$props, fields, extensionManifest, onChange, serializedData;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -202,12 +240,12 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
       }));
 
       return function (_x) {
-        return _ref4.apply(this, arguments);
+        return _ref3.apply(this, arguments);
       };
     }());
 
     _defineProperty(_assertThisInitialized(_this), "parseParameters", /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fields, parameters) {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fields, parameters) {
         var extensionManifest, currentParameters;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
@@ -256,7 +294,7 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
       }));
 
       return function (_x2, _x3) {
-        return _ref5.apply(this, arguments);
+        return _ref4.apply(this, arguments);
       };
     }());
 
@@ -414,10 +452,10 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
           handleKeyDown = this.handleKeyDown;
       return /*#__PURE__*/React.createElement(Form, {
         onSubmit: handleSubmit
-      }, function (_ref6) {
-        var formProps = _ref6.formProps,
-            getState = _ref6.getState,
-            submitting = _ref6.submitting;
+      }, function (_ref5) {
+        var formProps = _ref5.formProps,
+            getState = _ref5.getState,
+            submitting = _ref5.submitting;
         return /*#__PURE__*/React.createElement(WithOnFieldChange, {
           autoSave: !!autoSave,
           getState: getState,
@@ -428,18 +466,31 @@ var ConfigPanel = /*#__PURE__*/function (_React$Component) {
             noValidate: true,
             onKeyDown: handleKeyDown,
             "data-testid": "extension-config-panel"
-          }), _this2.renderHeader(extensionManifest), /*#__PURE__*/React.createElement(ConfigFormIntl, {
-            canSave: !autoSave,
-            errorMessage: errorMessage,
-            extensionManifest: extensionManifest,
-            fields: fields,
-            firstVisibleFieldName: firstVisibleFieldName,
-            hasParsedParameters: hasParsedParameters,
-            isLoading: isLoading || false,
-            onCancel: onCancel,
-            onFieldChange: onFieldChange,
-            parameters: currentParameters,
-            submitting: submitting
+          }), _this2.renderHeader(extensionManifest), /*#__PURE__*/React.createElement(WithPluginState, {
+            plugins: {
+              extension: extensionPluginKey
+            },
+            render: function render(_ref6) {
+              var extension = _ref6.extension;
+              return /*#__PURE__*/React.createElement(FormErrorBoundary, {
+                contextIdentifierProvider: extension === null || extension === void 0 ? void 0 : extension.contextIdentifierProvider,
+                extensionKey: extensionManifest.key,
+                fields: fields || []
+              }, /*#__PURE__*/React.createElement(ConfigFormIntl, {
+                canSave: !autoSave,
+                errorMessage: errorMessage,
+                extensionManifest: extensionManifest,
+                fields: fields,
+                firstVisibleFieldName: firstVisibleFieldName,
+                hasParsedParameters: hasParsedParameters,
+                isLoading: isLoading || false,
+                onCancel: onCancel,
+                onFieldChange: onFieldChange,
+                parameters: currentParameters,
+                submitting: submitting,
+                contextIdentifierProvider: extension === null || extension === void 0 ? void 0 : extension.contextIdentifierProvider
+              }));
+            }
           }));
         });
       });

package/dist/esm/ui/ConfigPanel/FormContent.js

@@ -138,35 +138,48 @@ export function FieldComponent(_ref) {
       });
 
     case 'expand':
-      // if expand is under a tab.
-      var resolvedParentName = parentName ? "".concat(parentName, ".").concat(field.name) : field.name;
-      return /*#__PURE__*/React.createElement(Expand, {
-        field: field,
-        isExpanded: field.isExpanded
-      }, /*#__PURE__*/React.createElement(FormContent, {
-        parentName: resolvedParentName,
-        fields: field.fields,
-        parameters: parameters[field.name] || {},
-        onFieldChange: onFieldChange,
-        extensionManifest: extensionManifest
-      }));
-
-    case 'tab-group':
-      var renderPanel = function renderPanel(tabField) {
-        var tabParameters = parameters[field.name] || {};
-        return /*#__PURE__*/React.createElement(FormContent, {
-          parentName: "".concat(field.name, ".").concat(tabField.name),
-          fields: tabField.fields,
-          parameters: tabParameters[tabField.name] || {},
+      {
+        // if expand is under a tab with hasGroupedValues=true
+        var resolvedParentName = [parentName, field.hasGroupedValues ? field.name : undefined].filter(function (val) {
+          return !!val;
+        }).join('.') || undefined;
+        var resolvedParameters = !field.hasGroupedValues ? parameters : parameters[field.name] || {};
+        return /*#__PURE__*/React.createElement(Expand, {
+          field: field,
+          isExpanded: field.isExpanded
+        }, /*#__PURE__*/React.createElement(FormContent, {
+          parentName: resolvedParentName,
+          fields: field.fields,
+          parameters: resolvedParameters,
           onFieldChange: onFieldChange,
           extensionManifest: extensionManifest
-        });
-      };
+        }));
+      }
 
-      return /*#__PURE__*/React.createElement(TabGroup, {
-        field: field,
-        renderPanel: renderPanel
-      });
+    case 'tab-group':
+      {
+        var tabGroupField = field;
+        var tabGroupParams = tabGroupField.hasGroupedValues ? parameters[tabGroupField.name] || {} : parameters;
+
+        var renderPanel = function renderPanel(tabField) {
+          var parentName = [tabGroupField.hasGroupedValues ? tabGroupField.name : undefined, tabField.hasGroupedValues ? tabField.name : undefined].filter(function (val) {
+            return !!val;
+          }).join('.') || undefined;
+          var tabParameters = tabField.hasGroupedValues ? tabGroupParams[tabField.name] || {} : tabGroupParams;
+          return /*#__PURE__*/React.createElement(FormContent, {
+            parentName: parentName,
+            fields: tabField.fields,
+            parameters: tabParameters,
+            onFieldChange: onFieldChange,
+            extensionManifest: extensionManifest
+          });
+        };
+
+        return /*#__PURE__*/React.createElement(TabGroup, {
+          field: tabGroupField,
+          renderPanel: renderPanel
+        });
+      }
 
     default:
       return /*#__PURE__*/React.createElement(UnhandledType, {