@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

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

@@ -0,0 +1,465 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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; } }
+import React, { useCallback, useEffect, useRef } from 'react';
+import _isEqual from 'lodash/isEqual';
+import _mergeRecursive from 'lodash/merge';
+import memoizeOne from 'memoize-one';
+import { injectIntl } from 'react-intl-next';
+import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/custom-theme-button';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { isTabGroup } from '@atlaskit/editor-common/extensions';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import Form, { FormFooter } from '@atlaskit/form';
+import { pluginKey as extensionPluginKey } from '../../plugin-key';
+import { ALLOWED_LOGGED_MACRO_PARAMS } from './constants';
+import ErrorMessage from './ErrorMessage';
+import FormContent from './FormContent';
+import { FormErrorBoundary } from './FormErrorBoundary';
+import Header from './Header';
+import LoadingState from './LoadingState';
+import { messages } from './messages';
+import { deserialize, findDuplicateFields, serialize } from './transformers';
+import { getLoggedParameters } from './utils';
+function ConfigForm(_ref) {
+  var canSave = _ref.canSave,
+    errorMessage = _ref.errorMessage,
+    extensionManifest = _ref.extensionManifest,
+    fields = _ref.fields,
+    firstVisibleFieldName = _ref.firstVisibleFieldName,
+    hasParsedParameters = _ref.hasParsedParameters,
+    intl = _ref.intl,
+    isLoading = _ref.isLoading,
+    onCancel = _ref.onCancel,
+    onFieldChange = _ref.onFieldChange,
+    parameters = _ref.parameters,
+    submitting = _ref.submitting,
+    contextIdentifierProvider = _ref.contextIdentifierProvider,
+    featureFlags = _ref.featureFlags;
+  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);
+  }
+  if (errorMessage || !fields) {
+    return /*#__PURE__*/React.createElement(ErrorMessage, {
+      errorMessage: errorMessage || ''
+    });
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormContent, {
+    fields: fields,
+    parameters: parameters,
+    extensionManifest: extensionManifest,
+    onFieldChange: onFieldChange,
+    firstVisibleFieldName: firstVisibleFieldName,
+    contextIdentifierProvider: contextIdentifierProvider,
+    featureFlags: featureFlags
+  }), /*#__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(_ref2) {
+  var getState = _ref2.getState,
+    autoSave = _ref2.autoSave,
+    handleSubmit = _ref2.handleSubmit,
+    children = _ref2.children;
+  var getStateRef = useRef(getState);
+  useEffect(function () {
+    getStateRef.current = getState;
+  }, [getState]);
+  var handleFieldChange = useCallback(function (name, isDirty) {
+    if (!autoSave) {
+      return;
+    }
+
+    // Don't trigger submit if nothing actually changed
+    if (!isDirty) {
+      return;
+    }
+    var _getStateRef$current = getStateRef.current(),
+      errors = _getStateRef$current.errors,
+      values = _getStateRef$current.values;
+
+    // Get only values that does not contain errors
+    var validValues = {};
+    for (var _i = 0, _Object$keys = Object.keys(values); _i < _Object$keys.length; _i++) {
+      var key = _Object$keys[_i];
+      if (!errors[key]) {
+        // not has error
+        validValues[key] = values[key];
+      }
+    }
+    handleSubmit(validValues);
+  }, [autoSave, handleSubmit]);
+  return children(handleFieldChange);
+};
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var ConfigPanel = /*#__PURE__*/function (_React$Component) {
+  _inherits(ConfigPanel, _React$Component);
+  var _super = _createSuper(ConfigPanel);
+  function ConfigPanel(props) {
+    var _this;
+    _classCallCheck(this, ConfigPanel);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
+      if ((e.key === 'Esc' || e.key === 'Escape') && _this.props.closeOnEsc) {
+        _this.props.onCancel();
+      }
+    });
+    // https://product-fabric.atlassian.net/browse/DST-2697
+    // workaround for DST-2697, remove this function once fix.
+    _defineProperty(_assertThisInitialized(_this), "backfillTabFormData", function (fields, formData, currentParameters) {
+      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 _mergeRecursive({}, mergedTabGroups, formData);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleSubmit", /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(formData) {
+        var _this$props, fields, extensionManifest, onChange, autoSaveReject, serializedData;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = _this.props, fields = _this$props.fields, extensionManifest = _this$props.extensionManifest, onChange = _this$props.onChange, autoSaveReject = _this$props.autoSaveReject;
+              if (!(!extensionManifest || !fields)) {
+                _context.next = 4;
+                break;
+              }
+              if (!extensionManifest) {
+                autoSaveReject === null || autoSaveReject === void 0 || autoSaveReject(new Error('Extension manifest not loaded'));
+              } else if (!fields) {
+                autoSaveReject === null || autoSaveReject === void 0 || autoSaveReject(new Error('Config fields not loaded'));
+              }
+              return _context.abrupt("return");
+            case 4:
+              _context.prev = 4;
+              _context.next = 7;
+              return serialize(extensionManifest, _this.backfillTabFormData(fields, formData, _this.state.currentParameters), fields);
+            case 7:
+              serializedData = _context.sent;
+              onChange(serializedData);
+              _context.next = 15;
+              break;
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](4);
+              autoSaveReject === null || autoSaveReject === void 0 || autoSaveReject(_context.t0);
+              // eslint-disable-next-line no-console
+              console.error("Error serializing parameters", _context.t0);
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[4, 11]]);
+      }));
+      return function (_x) {
+        return _ref3.apply(this, arguments);
+      };
+    }());
+    _defineProperty(_assertThisInitialized(_this), "parseParameters", /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fields, parameters) {
+        var extensionManifest, currentParameters;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              extensionManifest = _this.props.extensionManifest;
+              if (!(!extensionManifest || !fields || fields.length === 0)) {
+                _context2.next = 3;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 3:
+              if (!(typeof parameters === 'undefined')) {
+                _context2.next = 6;
+                break;
+              }
+              _this.setState({
+                currentParameters: {},
+                hasParsedParameters: true
+              });
+              return _context2.abrupt("return");
+            case 6:
+              _context2.next = 8;
+              return deserialize(extensionManifest, parameters, fields);
+            case 8:
+              currentParameters = _context2.sent;
+              _this.setState({
+                currentParameters: currentParameters,
+                hasParsedParameters: true
+              });
+            case 10:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x2, _x3) {
+        return _ref4.apply(this, arguments);
+      };
+    }());
+    // memoized to prevent rerender on new parameters
+    _defineProperty(_assertThisInitialized(_this), "renderHeader", memoizeOne(function (extensionManifest) {
+      var _this$props2 = _this.props,
+        onCancel = _this$props2.onCancel,
+        showHeader = _this$props2.showHeader;
+
+      // Use a temporary allowlist of top 3 macros to test out a new "Documentation" CTA ("Need help?")
+      // This will be removed when Top 5 Modernized Macros updates are rolled out
+      var modernizedMacrosList = ['children', 'recently-updated', 'excerpt'];
+      var enableHelpCTA = modernizedMacrosList.includes(extensionManifest.key);
+      if (!showHeader) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(Header, {
+        icon: extensionManifest.icons['48'],
+        title: extensionManifest.title,
+        description: extensionManifest.description,
+        summary: extensionManifest.summary,
+        documentationUrl: extensionManifest.documentationUrl,
+        onClose: onCancel,
+        enableHelpCTA: enableHelpCTA
+      });
+    }));
+    _defineProperty(_assertThisInitialized(_this), "getFirstVisibleFieldName", memoizeOne(function (fields) {
+      function nonHidden(field) {
+        if ('isHidden' in field) {
+          return !field.isHidden;
+        }
+        return true;
+      }
+
+      // finds the first visible field, true for FieldSets too
+      var firstVisibleField = fields.find(nonHidden);
+      var newFirstVisibleFieldName;
+      if (firstVisibleField) {
+        // if it was a fieldset, go deeper trying to locate the field
+        if (firstVisibleField.type === 'fieldset') {
+          var firstVisibleFieldWithinFieldset = firstVisibleField.fields.find(nonHidden);
+          newFirstVisibleFieldName = firstVisibleFieldWithinFieldset && firstVisibleFieldWithinFieldset.name;
+        } else {
+          newFirstVisibleFieldName = firstVisibleField.name;
+        }
+      }
+      return newFirstVisibleFieldName;
+    }));
+    _defineProperty(_assertThisInitialized(_this), "setFirstVisibleFieldName", function (fields) {
+      var newFirstVisibleFieldName = _this.getFirstVisibleFieldName(fields);
+      if (newFirstVisibleFieldName !== _this.state.firstVisibleFieldName) {
+        _this.setState({
+          firstVisibleFieldName: newFirstVisibleFieldName
+        });
+      }
+    });
+    _this.state = {
+      hasParsedParameters: false,
+      currentParameters: {},
+      firstVisibleFieldName: props.fields ? _this.getFirstVisibleFieldName(props.fields) : undefined
+    };
+    _this.onFieldChange = null;
+    return _this;
+  }
+  _createClass(ConfigPanel, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props3 = this.props,
+        fields = _this$props3.fields,
+        parameters = _this$props3.parameters;
+      this.parseParameters(fields, parameters);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$props4 = this.props,
+        createAnalyticsEvent = _this$props4.createAnalyticsEvent,
+        extensionManifest = _this$props4.extensionManifest,
+        fields = _this$props4.fields;
+      var currentParameters = this.state.currentParameters;
+      fireAnalyticsEvent(createAnalyticsEvent)({
+        payload: {
+          action: ACTION.CLOSED,
+          actionSubject: ACTION_SUBJECT.CONFIG_PANEL,
+          eventType: EVENT_TYPE.UI,
+          attributes: _objectSpread({
+            extensionKey: extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest.key,
+            extensionType: extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest.type
+          }, extensionManifest !== null && extensionManifest !== void 0 && extensionManifest.key && ALLOWED_LOGGED_MACRO_PARAMS[extensionManifest.key] ? {
+            parameters: getLoggedParameters(extensionManifest.key, currentParameters, fields)
+          } : {})
+        }
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props5 = this.props,
+        parameters = _this$props5.parameters,
+        fields = _this$props5.fields,
+        autoSaveTrigger = _this$props5.autoSaveTrigger,
+        extensionManifest = _this$props5.extensionManifest;
+      if (parameters && parameters !== prevProps.parameters || fields && (!prevProps.fields || !_isEqual(fields, prevProps.fields))) {
+        this.parseParameters(fields, parameters);
+      }
+      if (fields && (!prevProps.fields || !_isEqual(fields, prevProps.fields))) {
+        this.setFirstVisibleFieldName(fields);
+      }
+      if (prevProps.autoSaveTrigger !== autoSaveTrigger) {
+        if (this.onFieldChange) {
+          this.onFieldChange('', true);
+        }
+      }
+      if (prevProps.extensionManifest === undefined && prevProps.extensionManifest !== extensionManifest) {
+        // This will only be fired once when extensionManifest is loaded initially
+        // Can't do this in componentDidMount because extensionManifest is still undefined at that point
+        fireAnalyticsEvent(this.props.createAnalyticsEvent)({
+          payload: {
+            action: ACTION.OPENED,
+            actionSubject: ACTION_SUBJECT.CONFIG_PANEL,
+            eventType: EVENT_TYPE.UI,
+            attributes: {
+              extensionKey: extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest.key,
+              extensionType: extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest.type
+            }
+          }
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props6 = this.props,
+        extensionManifest = _this$props6.extensionManifest,
+        featureFlags = _this$props6.featureFlags;
+      if (!extensionManifest) {
+        return /*#__PURE__*/React.createElement(LoadingState, null);
+      }
+      var _this$props7 = this.props,
+        autoSave = _this$props7.autoSave,
+        errorMessage = _this$props7.errorMessage,
+        fields = _this$props7.fields,
+        isLoading = _this$props7.isLoading,
+        onCancel = _this$props7.onCancel;
+      var _this$state = this.state,
+        currentParameters = _this$state.currentParameters,
+        hasParsedParameters = _this$state.hasParsedParameters,
+        firstVisibleFieldName = _this$state.firstVisibleFieldName;
+      var handleSubmit = this.handleSubmit,
+        handleKeyDown = this.handleKeyDown;
+      return /*#__PURE__*/React.createElement(Form, {
+        onSubmit: handleSubmit
+      }, function (_ref5) {
+        var formProps = _ref5.formProps,
+          getState = _ref5.getState,
+          submitting = _ref5.submitting;
+        return /*#__PURE__*/React.createElement(WithOnFieldChange, {
+          autoSave: !!autoSave,
+          getState: getState,
+          handleSubmit: handleSubmit
+        }, function (onFieldChange) {
+          _this2.onFieldChange = onFieldChange;
+          return /*#__PURE__*/React.createElement("form", _extends({}, formProps, {
+            noValidate: true,
+            onKeyDown: handleKeyDown,
+            "data-testid": "extension-config-panel"
+          }), _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,
+                featureFlags: featureFlags
+              }));
+            }
+          }));
+        });
+      });
+    }
+  }]);
+  return ConfigPanel;
+}(React.Component);
+export default withAnalyticsContext({
+  source: 'ConfigPanel'
+})(withAnalyticsEvents()(ConfigPanel));

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

@@ -0,0 +1,112 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import ConfigPanel from './ConfigPanel';
+import { useStateFromPromise } from './use-state-from-promise';
+var getFieldsDefinitionFn = function getFieldsDefinitionFn(extensionManifest, nodeKey) {
+  if (extensionManifest && extensionManifest.modules.nodes && extensionManifest.modules.nodes[nodeKey] && extensionManifest.modules.nodes[nodeKey].getFieldsDefinition) {
+    return extensionManifest.modules.nodes[nodeKey].getFieldsDefinition;
+  }
+};
+
+// having the default value in the props instead of a reference will cause excessive rerenders
+var defaultEmptyObject = {};
+var FieldDefinitionsPromiseResolver = function FieldDefinitionsPromiseResolver(props) {
+  var extensionManifest = props.extensionManifest,
+    nodeKey = props.nodeKey,
+    extensionParameters = props.extensionParameters,
+    setErrorMessage = props.setErrorMessage;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    fields = _useState2[0],
+    setFields = _useState2[1];
+
+  // Resolve the promise
+  // useStateFromPromise() has an issue which isn't compatible with
+  // DynamicFieldDefinitions when it returns a function as setState()
+  // will immediately run the function returned and pass it the currentState.
+  useEffect(function () {
+    if (!extensionManifest) {
+      return;
+    }
+    var promiseFn = getFieldsDefinitionFn(extensionManifest, nodeKey);
+    if (typeof promiseFn !== 'function') {
+      setFields(undefined);
+      return;
+    }
+    promiseFn(extensionParameters).catch(function (err) {
+      if (err && typeof err.message === 'string') {
+        setErrorMessage(err.message);
+      }
+      setFields(undefined);
+    }).then(function (value) {
+      if (Array.isArray(value)) {
+        // value: FieldDefinition[]
+        setFields(value);
+      } else if (typeof value === 'function') {
+        try {
+          // value: DynamicFieldDefinitions
+          var dynamicFields = value(extensionParameters);
+          setFields(dynamicFields);
+        } catch (err) {
+          if (err instanceof Error) {
+            setErrorMessage(err.message);
+          }
+          setFields(undefined);
+        }
+      } else {
+        // value: undefined
+        setFields(undefined);
+      }
+    });
+  }, [extensionManifest, nodeKey, extensionParameters, setErrorMessage]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children(fields));
+};
+export default function FieldsLoader(_ref) {
+  var extensionType = _ref.extensionType,
+    extensionKey = _ref.extensionKey,
+    nodeKey = _ref.nodeKey,
+    extensionProvider = _ref.extensionProvider,
+    _ref$extensionParamet = _ref.extensionParameters,
+    extensionParameters = _ref$extensionParamet === void 0 ? defaultEmptyObject : _ref$extensionParamet,
+    _ref$parameters = _ref.parameters,
+    parameters = _ref$parameters === void 0 ? defaultEmptyObject : _ref$parameters,
+    autoSave = _ref.autoSave,
+    autoSaveTrigger = _ref.autoSaveTrigger,
+    autoSaveReject = _ref.autoSaveReject,
+    closeOnEsc = _ref.closeOnEsc,
+    showHeader = _ref.showHeader,
+    featureFlags = _ref.featureFlags,
+    onChange = _ref.onChange,
+    onCancel = _ref.onCancel;
+  var _useStateFromPromise = useStateFromPromise(function () {
+      return extensionProvider.getExtension(extensionType, extensionKey);
+    }, [extensionProvider, extensionType, extensionKey]),
+    _useStateFromPromise2 = _slicedToArray(_useStateFromPromise, 1),
+    extensionManifest = _useStateFromPromise2[0];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    errorMessage = _useState4[0],
+    setErrorMessage = _useState4[1];
+  return /*#__PURE__*/React.createElement(FieldDefinitionsPromiseResolver, {
+    setErrorMessage: setErrorMessage,
+    extensionManifest: extensionManifest,
+    nodeKey: nodeKey,
+    extensionParameters: extensionParameters
+  }, function (fields) {
+    return /*#__PURE__*/React.createElement(ConfigPanel, {
+      extensionManifest: extensionManifest,
+      isLoading: !extensionManifest || errorMessage === null && !fields,
+      fields: fields,
+      parameters: parameters,
+      autoSave: autoSave,
+      autoSaveTrigger: autoSaveTrigger,
+      autoSaveReject: autoSaveReject,
+      closeOnEsc: closeOnEsc,
+      showHeader: showHeader,
+      onChange: onChange,
+      onCancel: onCancel,
+      errorMessage: errorMessage,
+      featureFlags: featureFlags
+    });
+  });
+}

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

@@ -0,0 +1,11 @@
+import Loadable from 'react-loadable';
+import LoadingState from './LoadingState';
+export default Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_editor-core-config-panel" */
+    './ConfigPanelFieldsLoader').then(function (module) {
+      return module.default;
+    });
+  },
+  loading: LoadingState
+});

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

@@ -0,0 +1,68 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// Quality Ticket: https://product-fabric.atlassian.net/browse/DSP-4249
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+var imageContainerStyles = css({
+  margin: "0 auto ".concat("var(--ds-space-300, 24px)"),
+  height: '80px'
+});
+var ErrorImage = function ErrorImage() {
+  return jsx("div", {
+    css: imageContainerStyles
+  }, jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 163.28 218",
+    height: "80"
+  }, jsx("defs", null, jsx("linearGradient", {
+    id: "linear-gradient",
+    x1: "133.86",
+    x2: "-2.79",
+    y1: "136.43",
+    y2: "200.15",
+    gradientUnits: "userSpaceOnUse"
+  }, jsx("stop", {
+    offset: "0",
+    stopColor: "#ffd740"
+  }), jsx("stop", {
+    offset: "1",
+    stopColor: "#ffab00"
+  })), jsx("clipPath", {
+    id: "clip-path"
+  }, jsx("path", {
+    id: "_Polygon_",
+    d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
+    className: "cls-1",
+    "data-name": "<Polygon>"
+  })), jsx("style", null, ".cls-1{fill:url(#linear-gradient)}.cls-2{fill:#253858}.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;stroke:#5e6c84}")), jsx("g", {
+    id: "Layer_2",
+    "data-name": "Layer 2"
+  }, jsx("g", {
+    id: "Software"
+  }, jsx("path", {
+    id: "_Polygon_2",
+    d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
+    className: "cls-1",
+    "data-name": "<Polygon>"
+  }), jsx("path", {
+    d: "M87.22 163.71l2.88-44.35a9.18 9.18 0 00-9.16-9.78 9.18 9.18 0 00-9.16 9.78l2.88 44.35a6.3 6.3 0 006.28 5.89 6.3 6.3 0 006.28-5.89zM71.38 187.25a9.53 9.53 0 0010.39 9.58 9.68 9.68 0 00-.9-19.32 9.64 9.64 0 00-9.49 9.74z",
+    className: "cls-2"
+  }), jsx("path", {
+    fill: "#ffc400",
+    d: "M91.7 27.17L84.29.45A.61.61 0 0083.1.5l-4.66 25.1-5.8-1.08a.61.61 0 00-.7.76L79.35 52a.61.61 0 001.19 0l4.66-25.1 5.8 1.03a.61.61 0 00.7-.76z"
+  }), jsx("path", {
+    fill: "#ffab00",
+    d: "M65.12 41.81l-10.88-8.55a.27.27 0 00-.41.33L59.36 45l-2.66 1.31a.27.27 0 000 .45l10.87 8.55a.27.27 0 00.41-.33l-5.57-11.43 2.66-1.29a.27.27 0 00.05-.45z"
+  }), jsx("path", {
+    fill: "none",
+    stroke: "#344563",
+    strokeLinecap: "round",
+    strokeMiterlimit: "10",
+    strokeWidth: "2",
+    d: "M115.15 36.6c-1.17 1.59-11-5.6-12.16-4s8.66 8.79 7.5 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39"
+  }), jsx("path", {
+    d: "M119.92 64.19c-1.46 1.33-7.05-4.78-8.51-3.44s4.13 7.45 2.67 8.78-7.05-4.78-8.51-3.44c-.68.62.16 2.27 1.11 4M44.8 64c1.82.77 5-6.87 6.86-6.1s-1.39 8.4.43 9.17 5-6.87 6.86-6.1c.85.36.61 2.19.29 4.13",
+    className: "cls-6"
+  })))));
+};
+export default ErrorImage;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl-next';
+import EmptyState from '@atlaskit/empty-state';
+import ErrorImage from './ErrorImage';
+var messages = defineMessages({
+  configFailedToLoad: {
+    id: 'fabric.editor.configFailedToLoad',
+    defaultMessage: 'Failed to load',
+    description: 'Displayed when the config panel fails to load fields'
+  }
+});
+var ConfigPanelErrorMessage = function ConfigPanelErrorMessage(_ref) {
+  var errorMessage = _ref.errorMessage,
+    intl = _ref.intl;
+  return /*#__PURE__*/React.createElement(EmptyState, {
+    header: intl.formatMessage(messages.configFailedToLoad),
+    description: errorMessage,
+    renderImage: function renderImage() {
+      return /*#__PURE__*/React.createElement(ErrorImage, null);
+    },
+    size: "narrow",
+    imageHeight: 80,
+    testId: "config-panel-error-message"
+  });
+};
+export default injectIntl(ConfigPanelErrorMessage);